函数与事件响应
函数
函数初步
函数的概念
- 函数，是将一段公共的代码进行封装，给它起个名字叫“函数”。
- 函数可以一次定义，多次调用。
- 函数，可以将常用的功能代码，进行封装。如：用户名的验证、验证码函数、邮箱验证、手机号码验证
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function max(a,b){
if(a>b){
document.write(a+"比较大<br/>");
}else{
document.write(b+"比较大<br/>");
}
}
max(10,50);
max(0,100);
max(-1,2);
max(100,100);
</script>
</head>
<body>
</body>
</html>
函数的定义格式
function functionName([参数1][,参数2][,参数N]){
函数的功能代码;
[return 参数r]
}
函数定义格式的说明
-
function关键字是必须的，全小写。
-
functionName：函数的名称。函数名的命名规则与变量命名一样。
-
()：是定义函数时接收数据的参数。参数可有可无，多个参数之间用逗号隔开。
-
形参(形式参数)：定义函数时的参数就是“形参”。主要用来接收调用函数者传过来的数据。
-
形参的名称，与变量的命名规则一样。
-
但形参不能用“var”关键字定义。
-
参数只能存在于函数中。
-
参数不需要声明，直接使用。
-
实参(实际参数)：调用函数时的参数称为“实参”。实参就是真正的数据。
-
{}是函数的功能。
-
return语句，用于向函数调用者返回一个值，并立即结束函数的运行。
-
return用于中止函数的运行。
-
break用于中止各种循环。
函数的调用
函数定义是不会执行的，那么，函数必须调用，才会有效果。
函数的调用：直接写函数名后跟小括号()，如果有参数则写参数。小括号不能省略。
函数的参数
- 形参的个数，要与实参的个数一致；
- 形参的顺序，要与实参的顺序一致。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
//定义函数
function information(name,age){
document.write("大家好，我叫"+name+",今年"+age+"岁<br/>")
}
information("张三",24);
information("李四",30);
information("涛哥",20);
</script>
</head>
<body>
</body>
</html>
全局变量和局部变量
全局变量：
- 可以在网页的任何地方(函数内部和函数外部)使用的变量，就是“全局变量”。
- 在函数外部定义的变量，就是“全局变量”。
- 全局变量”既可以在函数外使用，也可以在函数内部使用。
- “全局变量”在网页关闭时，自动消失(释放空间)。
局部变量：
- 只能在函数内部使用的变量，称为“局部变量”。
- “局部变量”在函数内部定义，在函数内部使用。
- “局部变量”在函数外部无法访问。
- “局部变量”在函数执完完毕就消失了。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
//定义全局变量
var name = "小明";
function information(){
//定义局部变量
var age = 24;
document.write("大家好，我叫"+name+",今年"+age+"岁<br/>");
}
//调用函数
information();
//下面的这行代码会报错，说age不存在
//因为age变量是局部变量，函数执行完毕，局部变量就消失了
//document.write("大家好，我叫"+name+",今年"+age+"岁<br/>");
</script>
</head>
<body>
</body>
</html>
拷贝传值和引用传值
拷贝传值：基本数据类型都是“拷贝传值”。
- 拷贝传值，就是将一个变量的值“拷贝”一份，传给了另一个变量。
- 拷贝传值完之后，两个变量之间没有任何联系，修改其中一个变量的值，另一个不会改变。
- 这两个变量之间，是相互独立的，没有任何联系。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var a=10;
var b=a;
a++;
document.write("a的值为:"+a+"<br/>");
document.write("b的值为:"+b);
</script>
</head>
<body>
</body>
</html>
引用传址：复合数据类型都是“引用传地址”
引用传址：将一个变量的数据地址，“拷贝”一份，传给另了另一个变量。这两个变量，指向“同一个地址”。
大家共享同一份数据。
如果其中一个变量的值发生了改变，那么，另一个变量的值也得变。要变一起变。
因此，这两个变量是有联系的，要变大家一起变。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var arr1=[10,20,30,40];
var arr2=arr1;
arr1[1]=100;
document.write("arr1[1]的值为:"+arr1[1]+"<br/>");
document.write("arr2[1]的值为:"+arr2[1]);
</script>
</head>
<body>
</body>
</html>
匿名函数
即没有名字的函数。
- 匿名函数，不能单独定义的，也不能单独调用。
- 匿名函数，一般是作为数据给其它变量赋值的。可以给普通变量、数组元素、对象的属性赋值。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var a=88 ;//将数值赋值给变量a，此时变量a就是“数值型”变量
var a="asd"; //将字符串赋值给a，此时变量a就是“字符型”变量
var a=true; //将布尔值赋值给变量a，此时变量a就是“布尔型”变量
var a=[10,20];//将数组赋值给变量a，此时变量a就是“数组型”变量
var a=function(name,age){//将函数值赋值给变量a，此时变量a就是“函数型”变量
window.alert("我叫"+name+"今年"+age+"岁");
}
//调用函数
a("小明",20);
var b=a;//将变量a的地址，拷贝一份传给变量b
b("小白",22);
</script>
</head>
<body>
</body>
</html>
事件响应
事件
事件的概念
事件：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
事件处理程序
事件处理程序：我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：onclick、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
鼠标单击事件(onclick)
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun1(){
window.alert("欢迎来到php.cn")
}
function fun2(){
window.alert("你看，你还是点了我")
}
</script>
</head>
<body>
<form>
<input name="点我看看" type="button" value="点我看看" onclick="fun1()"/>
<p onclick="fun2()">不要点我</p>
</form>
</body>
</html>
鼠标经过事件(onmouseover)
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
实例：当鼠标移动到绑定了onmouseover事件的元素时，弹出对话框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun(){
window.alert("请确认四周没有人再点击提交")
}
</script>
</head>
<body>
<form>
机密：
<input name="txt" type="text" >
<input name="" type="button" value="提交" onmouseover="fun()"/>
</form>
</body>
</html>
鼠标移开事件(onmouseout)
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
改造我们的上一个例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun(){
window.alert("提交成功了")
}
</script>
</head>
<body>
<form>
机密：
<input name="txt" type="text" >
<input name="" type="button" value="提交之后移开鼠标" onmouseout="fun()"/>
</form>
</body>
</html>
光标聚焦事件（onfocus）
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数fun()。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun(){
window.alert("请输入真实姓名")
}
</script>
</head>
<body>
<form>
姓名：
<input name="username" type="text" value="请输入姓名" onfocus="fun()" >
</form>
</body>
</html>
光标失焦事件（onblur）
onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
下面例子，当光标离开时，让用户确认是否已经输入信息：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun(){
window.alert("请确认这是您的真实姓名")
}
</script>
</head>
<body>
<form>
姓名：
<input name="username" type="text" value="请输入姓名" onblur="fun()" >
</form>
</body>
</html>
内容选中事件（onselect）
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
如下实例，当选择文字后，弹出禁止赋值警告对话框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun(){
window.alert("这是个人简介，禁止复制")
}
</script>
</head>
<body>
<form>
个性介绍：<br/><textarea name=" introduction" cols="30" rows="4" onselect="fun()">小明：
PHP高级工程师
全栈工程师</textarea>
</form>
</body>
</html>
文本框内容改变事件（onchange）
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
如下代码,当用户将文本框内的文字改变后，弹出对话框“您刚刚修改了个人简介”。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun(){
window.alert("您刚刚修改了个人简介")
}
</script>
</head>
<body>
<form>
个性介绍：<br/><textarea name=" introduction" cols="30" rows="4" onchange="fun()">小明：
PHP高级工程师
全栈工程师</textarea>
</form>
</body>
</html>
加载事件（onload）
事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：
- 加载页面时，触发onload事件，事件写在标签内。
- 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中......”。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
function fun(){
window.alert("加载中......")
}
</script>
</head>
<body onload="fun()">
欢迎来到php.cn
</body>
</html>
