函数
定义:就是对代码的封装(函数就像一个盒子,然后把我们想要的代码放进去 );
需要该代码时,则需要调用;
函数定义:
定义的过程:
- 开空间(开启一个盒子)
- 把一段代码存储进去(是把代码当作字符串存储,此时不解析函数内的变量"console.log(num)")
- 把这个空间的地址给到函数名称
函数在定义的时候没有解析函数内的变量,在函数执行的时候拿出来解析num变量;
1、声明式函数
语法:function 函数名(){ 要执行的代码 };
()必须写,是用来放参数的位置
2、赋值式:定义一个变量一样
使用var 关键字,把一个函数当作值直接赋值给这个变量
var fn = function () {
//一段代码
}
// 不需要在function后面书写函数名了,前面已经有了
函数调用和区别:
浏览器里面有一个叫fn变量,这个变量代表了一个函数,可随时调用fn盒子,来执行一段代码;
定义位置无所谓在哪,在哪调用则在哪显示;
1、声明式函数调用:调用可在定义前也可在定义后
//可调用函数
fn ()
//声明式函数
function fn () {
console.log('我是fn函数')
}
//可调用函数
fn ()
2、赋值式函数:只能在定义之后调用
//会报错
fn ()
//声明式函数
var fn = function () {
console.log('我是fn函数')
}
//可调用函数
fn ()
函数的参数(重点):形参、实参
形参:在函数定义的时候书写,是只能在函数内部使用的变量;
实参:在函数调用时,给形参赋值的;
相关问题:
- 参数的个数问题 : 形参比实参个数多时,多出来的就是undefined;
- 形参的默认值 :函数在定义时,可以在小括号中给形参进行复制,这个赋值就是形参的默认值;
- 函数调用时,若没有传递实参,则函数内的形参使用默认值;若传递了实参,则就用对应的实参
arguments:
在每个函数内部,都有一个不需要操作就可以直接使用的数据,叫做arguments,是所有实参的集合;
console.log(arguments);
console.log(arguments.length);
arguments.lenght 是实参的个数
可通过 argument[下标] 获取每一个实参的值
console.log(arguments[0]);
console.log(arguments[1]);
下标必须从0开始!!
return:
该关键字用在函数内部;
作用:
1、表示结束当前的函数执行;
2、return可以给函数执行之后创造出一个结果,结果紧跟在return之后;
函数内不写return,函数调用到的结果是undefined;
函数内写了return,但不写东西,函数调用到的结果是undefined;
函数内写了return,写了东西,函数调用到的结果是写的东西;
预解析:
因为JavaScript是一个解释型语言,在代码执行之前,先对代码解析,再执行;
解释内容:
1、var 关键字
在代码执行之前,会把代码里所有的var 关键字声明的变量提升;
2、声明式函数
在代码执行之前,会把代码里的声明式函数的变量提升,并给这个变量赋值一个函数地址;
*变量提升:在代码执行之前,先告诉浏览器这个变量可以使用,只不过没有赋值;
*声明式函数提升:在代码执行之前,浏览器已经知道fn变量可以用,并且fn变量的值是一个函数地址;
作用域:
1、全局作用域:
- 一个页面就是一个全局作用域;
- 生命周期:从页面打开到页面关闭;
2、局部作用域:
- 只有函数能确定一个局部作用域;
- 局部作用域中声明的变量只能在当前的局部作用域中使用,外部不能使用;
作用域变量的访问规则(把这个变量拿过来用):
当在任意一级作用域里边访问变量的时候,
如果自己有,则用自己的,否则就一级一级往上找(方向不可逆),直到全局作用域,若全局作用域也没有,则报错;
作用域变量的赋值规则:
在任意一级作用域下,若要给一个变量赋值,
先看自己作用域内有没有,没有就往上找,有则赋值,没有则继续往上找,
直到全局作用域都没有的情况下,那么就把这个变量定义为全局变量,并赋值(这个变量也叫隐式全局变量)
事件:
是用户在网页上的动作,比如鼠标点击,鼠标移动,键盘按下...
1、事件三要素:事件源,事件名称,事件处理程序;
事件源:谁触发了这个事件(按钮 btn)
事件名称:触发了什么事件(点击事件 click)
事件处理程序:事件触发后要执行的代码(函数形式)
2、btn和网页中标签的id值相对应,on click鼠标点击,处理单机使用函数;如果有名的函数,就 不要加小括号;
3、事件类型
鼠标事件:click 单击 、dblclick 双击 、mouseover 鼠标移入 、mouseout 鼠标移除;
键盘事件:keydown 键盘按下事件 、 keyup 键盘弹起事件 、 keypress 敲打键盘事件;
表单事件:focus 获取焦点 、 blur 失去焦点 、 change 内容改变(失去焦点触发)、
input 表单输入 (随着输入触发)、submit 表单提交事件(form标签触发)
浏览器窗口事件:load 页面加载事件(当网页中所有内容都加载完毕后触发)
scroll 浏览器窗口滚动事件;
4、使用方法
使用事件需要在事件名称前面加on(eg:鼠标事件)
btn.onclick = function(){
console.log('单击事件')
}
btn.ondblclick = function(){
console.log('双击事件')
}
btn.onmouseover = function(){
console.log('鼠标移入')
}
btn.onmouseout = function(){
console.log('鼠标移出')
}
window就是页面窗口(eg:浏览器事件,键盘事件)
window.onkeydown = function(){
console.log('按下键盘')
}
window.onkeyup = function(){
console.log('弹起键盘')
}
window.onkeypress = function(){
var keyNum = e.keyCode;
console.log(keyNum);
console.log('敲打键盘')
}
window.onscroll = function(){
console.log('滚动')
}
eg:表单事件
username.onfocus = function(){
console.log('失去焦点');
console.log(username.value); //表单中的输入框的value值
}
username.onblur = function(){
console.log('失去焦点');
console.log(username.value); //表单中的输入框的value值
}
username.onchange = function(){
console.log(username.value); //表单中的输入框的value值
}
username.oninput = function(){
console.log(username.value); //表单中的输入框的value值
}
form.onsubmit = function(){
//触发的标签是form 但是实际在网页中操作的是提交按钮
alert('66666')
// 阻止了表单的默认提交
return false;
}
递归函数:
1、概念
是在函数内部调用函数自己;
写递归的时候,一定要规定什么时候停止,否会超出内存,变成死递归;
斐波那契额数列:第一个数和第二个数字都是1,第三个数字开始,每个数字是前两个数字的和
function fn(n){
if(n == 1){
return 1
}if(n == 2){
return 1
}
return fn(n-1)+fn(n-2)
}
var res = fn(10)
console.log(res);
对象:
基本概念:
1、概念:是js的一种数据类型,也是一个复杂数据类型;
2、对象是一个键值对的集合,对象就是一个盒子;
3、对象存储数据的格式:键值对;
4、对象语法:{ } 这是一个空对象
{key : value,key2 : value2}
5、语法规则:
- 键 也叫做对象的属性,必须是字符串,键可以加引号,也可不加引号;
- 值 可以是任意数据类型,包括:数字,字符串,布尔,对象,函数...
- 多个键值对之间用逗号隔开;
- 键值对之间没有顺序;
创建对象的两种方式:
1、字面量创建对象
var obj = {} //使用字面量方式创建一个空对象
// 创建有数据的对象
var obj2 = {
name:'',
age:18,
sex:'女'
}
2、通过系统内置构造函数创建对象
var obj3 = new Object()
// 通过系统构造函数创建对象,都是空对象
obj3.name = 'Rose'
obj3.age = 20
//向对象中添加成员
console.log(obj3);
// obj3 中存储的是 一个空间地址
3、创建对象时做的事情:
- 在内存空间中开了一个区域;
- 把对象中你要存储的数据放到该区域中;
- 把这个区域的地址给变量名;
操作对象:
主要操作:增删改查(CRUD) create read update delete
方法一:
1、添加数据成员
语法:对象.键 = 值
var obj = {}
obj.name = ''
obj.age = 18
obj.sex = '女'
1、添加数据成员【方二】
语法:数组关联语法 对象['键'] = 值
var obj = {}
obj[age] = 18
obj[sex] = '女'
2、读取对象成员
语法:对象.键
console.log(obj.name)
console.log(obj.age)
2、读取对象成员【方二】
语法:对象['键']
console.log(obj['name'])
console.log(obj['age'])
3、修改对象成员
语法:对象.已有的键 = 值
obj.name = '新内容'
obj.age = 新内容
console.log(obj) //输出的新obj对象中的name和age是修改后的内容
3、修改对象成员【方二】
语法:对象['已有的键'] = 值
obj['name'] = '新内容'
4、删除对象成员
语法:对象.键
delete obj.age
console.log(obj) //输出的新对象中没有age该键
4、删除对象成员【方二】
语法:对象['键']
delete obj['age']