文章目录
第一节:函数
函数的定义
- 关键字声明(声明式)
【格式】: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>
浏览器结果:略