文章目录
第一节：函数
函数的定义
- 关键字声明（声明式）
【格式】：function 函数名(){ }
如：
function sum(){}——声明了一个函数sum
函数的声明会提前 ==> 解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），它提前的是整个函数;
- 函数表达式(赋值式)
【格式】
var sum = function(){}——一个匿名函数赋给了sum
赋值式也会声明提前，但只是var sum这个变量
函数不同定义方法的区别
例：
<html>
<head>
<meta charset="utf-8">
<title>函数的定义</title>
<script type="text/javascript">
//在函数实体前调用函数
show1();
show2();
//声明式定义函数show1
function show1(){
console.log('我是一个函数show1')
}
//赋值式定义函数show2
var show2 = function(){
console.log('我是一个函数show2')
}
</script>
</head>
<body>
</body>
</html>
控制台结果：
函数的执行与常用事件
内置函数
当我们在使用输出alert()、数据类形转换
Number()等的时候，我们都在直接使用，并没有给alert等进行定义，这些都是window下的内置函数。可写成window.alert().window是alert()的对象（能点的就是对象）,平时只是省略了。但在事件函数或属性时，建议不要省略window。所有的内置函数大致可分为几个类。
【方法类函数】
例如：
alert()——
parseInt()——
parseFloat()——
Number()——
Boolean()——
【事件类函数】
例如：
window.onload—— 页面所有元素（包括DOM、图片等）加载完成后执行
【对象类函数】
例如：
document.getElementById()——
函数的执行（调用）
【手动调用（主动）】
sum();
【事件驱动（被动）】
格式：元素.事件 = 函数名 ; （注意被动的函数名后不能加（））
buton.onclick = sum;
常见事件触发函数
onclick—— 点击事件
ondblclick—— 双击事件
onmouseover—— 鼠标移入事件
onmouseout—— 鼠标移开事件
onchange—— 内容改变并失去焦点事件（一般用于表单元素）
onkeyup—— 键盘按键弹起事件
事件对象 event
当函数在监听事件触发，就是监听
event对象，比如键盘的输入这个事件，但是想知道输入的是哪个键，就可以通过获取event的“key”或“keyCode”的值得出。
【常见的keyCode值】
13—— 回 车 键 ；
37—— 左方向箭头 ；38—— 上方向箭头
38—— 上方向箭头 ；40—— 下方向箭头
27—— Esc键
32—— 空格键
例：监听用户键盘按键弹起事件(键盘按下某键)，捕获event内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于event</title>
<script type="text/javascript">
document.onkeyup = function(event){
console.log(event); //控制台打印event内容
}
</script>
</head>
<body>
</body>
</html>
控制台结果：
案例：使用事件移动愤怒的小鸟
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>愤怒的小鸟</title>
<style>
html,body{height:100%;overflow:hidden;}
#ab{position:absolute;top:0;left:0;width:200px;}
.right{transform:rotateY(180deg);}
.down{transform:rotateZ(-90deg);}
.up{transform:rotateZ(90deg);}
</style>
<script>
window.onload = function(){
var bird = document.getElementById('ab');
// 小鸟定位到光标中间位置
// document.onmousemove = function(e){
// bird.style.left = e.clientX - bird.offsetWidth/2 + 'px';
// bird.style.top = e.clientY - bird.offsetHeight/2 + 'px';
// }
var speed = 10;
// 键盘方向键移动小鸟
document.onkeydown = function(e){
console.log(e.keyCode,e.which);
var key = e.keyCode;
// 获取小鸟当前所在的位置
var left = bird.offsetLeft;
var top = bird.offsetTop;
if(key === 37){
left -= speed;
bird.className = '';
}else if(key === 39){
left += speed;
// 改变方向
bird.className = 'right';
}else if(key === 38){
top -= speed;
bird.className = 'up';
}else if(key === 40){
top += speed;
bird.className = 'down';
}
// 边界处理(水平+垂直)
if(left < -bird.offsetWidth){
left = window.innerWidth;
}else if(left > window.innerWidth){
left = -bird.offsetWidth
}
if(top < -bird.offsetHeight){
top = window.innerHeight;
}else if(top > window.innerHeight){
top = -bird.offsetHeight;
}
bird.style.left = left + 'px';
bird.style.top = top + 'px';
}
}
</script>
</head>
<body>
<img src="img/bird.jpg" id="ab"/>
</body>
</html>
函数的作用域
俗称“使用范围”，即能够使用某个变量的范围，分【全局作用域】和【局部作用域】
【全局变量与局部变量】
全局变量：在全局作用域下声明的变量，可以在任意地方中使用，作用范围比较大，我们称为全局变量
局部变量：在函数内（局部作用域）声明的变量，只在函数中可以使用，作用范围较小，我们称之为局部变量
【变量的访问规则】 —— 就近原则（如查找变量a）：
使用变量a时先从当前函数查找，如果当前函数有变量a则使用;
如果当前函数无变量a,则往父级函数查找，如果找到则使用，并停止查找;
如果在父级函数还是无法找到，则继续往上一层函数查找，以此类推，直到最顶层(全局作用域)，如果还是没找到，则报not defined错误;
【作用域链】
每个函数在定义时就形成了局部作用域，如果存在多个函数嵌套，他们之间就会建立起某种联系，直到全局作用域，这种联系称之为作用域链。当函数访问变量时，根据就近原则在这个作用域链中从内到外查询变量。
例：
<html>
<head>
<meta charset="utf-8">
<title>关于作用域</title>
<script type="text/javascript">
var myname = 'LeiFeng' //myname是全局作用域下的变量，全局变量
function show(){
var myage = 18; //myage是局部作用域下的变量，局部变量
console.log(myname); //局部作用域没有myname，会往上一层作用域找,直到全局
}
show();
</script>
</head>
<body>
</body>
</html>
函数的参数与返回值
函数参数
【形参】 就是局部变量
【形参与实参的区别】
形参：声明函数时圆括号内定义的变量
实参：函数执行时传入的参数。
形参和实参的数量可以不同
arguments—— 函数内部隐藏的对象（是一个类数组），保存着实参的信息
length—— 实参的数量
引用数据类型与基本数据类型的传参（引用传递与值传递）
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于参数</title>
<script type="text/javascript">
function show(numb){ //声明的函数参数numb就是形参
// 形参numb 其实就是局部变量相当于在此处声明了一个‘var numb’
}
show(100); //这里的100，才是实参
</script>
</head>
<body>
</body>
</html>
函数返回值
函数返回值是函数体返回给函数的一个结果
【注意点】
终止函数的执行,return后的代码不会执行
return后如果有值，则把这个值返回到函数执行的地方
如果函数没有return,执行完后返回undefined
例：有返回值和没反回值的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于返回值</title>
<script type="text/javascript">
//下面两个都是求平方的函数，一个有返回值，一个没有返回值，
function argum1(numb){
rest = numb * numb;
return rest
}
function argum2(numb){
rest = numb * numb;
}
//打印两个函数
console.log(argum1(5));
console.log(argum2(5));
</script>
</head>
<body>
</body>
</html>
控制台结果：
函数中的this
函数中的
this是一个关键字，表示当前对象，而当前对象是谁，取决于谁调用了这个函数，每个函数都会有this
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数中的this</title>
<script type="text/javascript">
function func1(){
console.log(this); //打印func1的this
}
func1();
</script>
</head>
<body>
</body>
</html>
控制台结果：
第二节：函数的封装与复用
函数的封装
例：封装一个获取随机颜色的方法
1、新建一个javaScript文档，自定义一个名字（这里取名为common）,因为是JS文档，所有后缀当然是 .js
2、编缉内容，定义获取随机颜色的方法randomColor,并保存，这样就完成了函数的封装
函数的调用
封装好的函数，可以在任何HTML内的script标签中调用
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用封装好的函数</title>
<script type="text/javascript" src="./JS/common.js">
//使用src引入js文件,等效于在此处编写的JS代码
</script>
<script type="text/javascript">
window.onload = function(){
//调用函数，随机更改页面背景颜色
document.body.style.backgroundColor = randomColor();
}
</script>
</head>
<body>
</body>
</html>
浏览器结果：
定时器的设置与清除
项目中，经常会用到定时器来实现数据实时更新、时间等，例如网页自动刷新。上面例子中不断刷新网页，就可以看到随机的不同背景颜色，如何才能让它自动刷新，就要使用到定时器功能
【定时器的格式】
设置定时器：
setInterval(fn,duration)——fn表示函数，duration表示时间。即每隔duration时间(ms)，执行一次fn。并返回一个定时器标识
清除定时器：
clearInterval(IntervalName)
例：给随机背景定时器，实现自动随机颜色，鼠标移入停止。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用定时器+鼠标事件刷新随机背景</title>
<script type="text/javascript" src="./JS/common.js">
</script>
<script type="text/javascript">
window.onload = function(){
//使用定时器自动刷新
timer = setInterval(function(){
//调用函数，随机更改页面背景颜色
document.body.style.backgroundColor = randomColor();
},500)
}
//鼠标移入事件
document.onmouseover = function(){
//停止定时器
clearInterval(timer);
}
//鼠标移出事件
document.onmouseout = function(){
//使用定时器自动刷新
timer = setInterval(function(){
//调用函数，随机更改页面背景颜色
document.body.style.backgroundColor = randomColor();
},500)
}
</script>
</head>
<body>
</body>
</html>
浏览器结果：略