第五章函数及事件 ① 笔记

回顾

数组的使用

本章目标

函数,事件,js对象,js操作页面元素

第一节：函数/方法

1.1 什么是函数

函数是指一段可以直接被另一段程序或代码引用的程序或代码。也叫做子程序、（OOP中）方法。一个较大的程序一般应分为若干个程序块，每一个模块用来实现一个特定的功能。
由主函数调用其他函数，其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。在程序设计中，常将一些常用的功能模块编写成函数，放在函数库供公共选用。要善于利用函数，以减少重复编写程序段的工作量。
函数：一段具有特定的功能的代码块。需要时调用，调用时执行！(自己不会主动执行！)
if(){} : 控制代码是否执行。
for(){}: 控制代码执行多少次。
function(){}: 控制代码何时执行。调用时执行。

1.2 函数分类

 库函数（系统函数）
js给我们提供的具有特定功能的代码块。
1.alert() prompt() document.write() Number() parseInt() 。。。
 自定义函数( 重点 )
1.自己定义函数，根据自己的需求来定义功能。

1.3 函数的定义和使用

函数的作用: 实现模块/功能封装，实现代码复用。
语法:

	// 定义
	function 函数名(参数1,参数2,参数3,...)
	{
		函数功能代码;
		return 函数返回值； //返回值可以省略
	}
	//调用
	函数名(数据1,数据2,数据3...);

说明:
function :用于定义函数的关键字，不能写错。
函数名 :使用者自己定义，命名规则:字母，数字，下划线，$，数字不能开头。小驼峰的命名方式,例如: getNum()
参数列表 :在函数名后面的小括号中定义参数列表，参数可多可少，也可以没有。其实参数就是变量，可以接受数据。
函数功能代码 :当前函数要实现的特定功能，是函数的核心内容。
return 返回值 :在函数执行完成之后，可以通过return关键字，返回函数处理的结果。可以省略。
函数的使用:如果一个功能代码，需要被反复使用，此时建议将该代码定义为函数。另外一种情况，如果在一个处理过程中，部分代码太多，此时可以将此部分代码封装成函数，优化代码结构。
示例：洗衣服

	//1.重复要做的事情
	//2.后期可能有变化的事情
	//定义函数:完成洗衣服的功能
	// 洗衣机来洗衣服
	function xyj(){
		document.write("拿出要洗的衣服<br/>");
		document.write("放到洗衣机中<br/>");
		document.write("加水<br/>");
		document.write("加洗衣液<br/>");
		document.write("启动洗衣机<br/>");
		document.write("自动甩干<br/>");
	}
	//周一洗衣服:
	// 调用函数: 函数名();
	xyj();
	//周三洗衣服:
	xyj();
	//周六洗衣服:
	xyj();

1.3.1无参无返回值的函数

实例：打招呼

	//定义函数
	//打招呼
	//无参，无返回值
	/*
	function 函数名(){
		函数体
	}
	*/
	function sayHello(){
		//这只是个输出，不是返回值
		document.write("你好");
	}
	//调用函数
	sayHello();

1.3.2无参有返回值的函数哦

实例：抽奖

	<script type="text/javascript">
		//随机数:1.范围[0,1) 0-0.999999999
		// 2.小数数据随机
		//var r = Math.random();
		//document.write(r+"<br/>");
		// 问:如何生成一个1-60的随机数
		// [0,1) * 60 => 0,59.999999 + 1 => 1,60.9999999 => parseInt(数据)
		//r= parseInt(Math.random()*60+1);
		//document.write(r);
		//定义函数用于返回0-60的
		// 随机获取某人
		function getMR(){
			//学生数组
			var stus = [
			"张三", //0
			"李四", //1
			"王五", //2
			"赵六", //3
			"孙琪" //4
			];
			//随机获取下标
			//获取 0-4
			var r = parseInt(Math.random()*5);
			//获取数组中的某个元素
			//return后面跟的数据就是函数的返回值
			return stus[r];
		}
		document.write("111111111<br/>");
		document.write("111111111<br/>");
		//调用函数,定义变量，接受函数的返回值
		var xxx = getMR();
		document.write("函数的返回值是:"+xxx+"<br/>");
		document.write("111111111<br/>");
		document.write("111111111<br/>");
	</script>

注意:如果函数的最后没有使用return返回结果，此时如果使用变量接受函数，则接受的数据为undefined。

	/*
	//定义函数
	function say(){
		document.write("你好");
	}
	// 调用函数，并接收返回值
	//问题是:人家函数有给你返回值么？？？？
	var v = say();
	//接的是个啥: undefined
	document.write(v);
	*/
	//定义函数
	function say(){
		document.write("你好");
		//通过return才能定义函数的返回值
		return 100;
	}
	// 调用函数，并接收返回值
	var v = say();
	//接的是个啥: 100
	document.write(v);

1.3.3有参数无返回值的函数

实例：给某人打招呼，某人学习课程

	<script type="text/javascript">
		//有参，无返回值
		//给某人打招呼
		function hello(name){
			//函数的参数:就是一个变量，可以接收调用者传入的值
			alert("你好,"+name);
		}
		//调用函数
		//hello("张三");
		//hello("李四");
		//hello("王五");
		//有参(括号中有定义变量)，无返回值(函数没有return)
		function study(name,course,hours){
			document.write(name+"学习"+course+"学习"+hours+"小时<br/>");
		}
		//调用函数
		study("张三","js",10);
		document.write("111111111111111111111<br/>");
		document.write("111111111111111111111<br/>");
		document.write("111111111111111111111<br/>");
		document.write("111111111111111111111<br/>");
		document.write("111111111111111111111<br/>");
		study("李四","html",3);
		hello("张三");
		document.write("111111111111111111111<br/>");
		document.write("111111111111111111111<br/>");
		hello("李四");
	</script>

1.3.4有参数有返回值的函数

实例:求任意两个区间的和

	<script type="text/javascript">
		//求任意区间的数字和: 1-100,50-200,30-80
		//有参(括号中有变量)，有返回值(方法有return返回值)
		function qh(start,end){
			var sum = 0;
			for(var i=start;i<=end;i++){
				sum+=i;
			}
			return sum;
		}
		//调用函数:1-100,50-200,30-80
		var res = qh(1,100)
		document.write("1-100:"+res+"<br/>");
		res = qh(50,200)
		document.write("50-200:"+res+"<br/>");
		res = qh(30,80)
		document.write("30-80:"+res+"<br/>");
	</script>

扩展: 定义函数，实现接受一个年份和月份，返回该月份的天数（考虑2月份的问题）

1.3.5匿名函数

语法:

	// 定义匿名函数
	function(参数1,参数2...){
		//代码块
		return 结果;
	}
	```
	```
	// 定义匿名函数，并存储到变量中
	var x = function (){
		document.write("我是匿名函数");
	}
	// 调用匿名函数
	x();
	// 事件和函数绑定
	// window.onload:浏览器窗口中的页面加载完成事件
	window.onload=function(){
		alert(123);
	}

	<script type="text/javascript">
	//匿名函数
	//匿名函数要存储之后，或者事件关联才能使用
	var x = function(){
		alert("你好");
	}
	//调用匿名函数
	//x();
	//onload:页面加载完成事件
	//绑定匿名函数，这样的话，等事件发生的时候，自动执行匿名函数
	window.onload=function(){
		alert(title.innerHTML);
	}
	</script>
	</head>
	<body>
		<h1 id="title">这是标签内容</h1>
	</body>

第二节网页元素的事件和函数

2.1 事件

事件:就是发生了一件事，通常我们会将html元素事件和特定的方法绑定到一起，当事件
触发的时候，程序自动执行绑定的方法，以此完成特定的程序处理。这就是程序的事件
驱动机制。

//通过HTML元素，触发js函数的执行
<元素 事件名="函数名()"/>

实例1：按钮点击触发函数调用
实例2：通过任意事件触发修改元素背景颜色

	<!DOCTYPE html >
	<html>
		<head>
			<title> New Document </title>
			<meta charset="utf-8">
			<script type="text/javascript">
				//对象:具有一系列属性和行为的事物称为对象
				// 人: 姓名，性别，年龄，身高.... 吃，喝....
				// 按钮: 标签名,id,class,value.... 点击,双击,.....
				// h1:
				// p:
				// 自定义函数
				function test1(){
					alert("你点我了");
				}
				//让p元素的背景变化
				function test2(){
					//通过js的方式，改变元素样式
					//1.获取元素对象
					// document.getElementById(id名字):根据id获取元素对象
					//获取文档中id名位myp的元素对象
					var pys = document.getElementById("myp");
					//2.用js的方式修改对象的样式属性
					// css样式:background-color js的写法: backgroundColor
					// font-size fontSize
					// color color
					pys.style.backgroundColor="red";
				}
				//让span的字体变化:字体颜色变为绿色,大小变为50px
				function test3(){
					//通过js的方式,改变元素样式
				}
			</script>
		</head>
		<body>
			<!--单击元素时(特定事件)，进行特定处理(调用函数)-->
			<h1 onclick="test1()">这是一个标题</h1>
			<div onclick="test1()">这是一个div</div>
			<!--onmouseover鼠标移入到元素上时，进行特定处理-->
			<p onmouseover="test2()" id="myp">这是一个p</p>
			<span onmouseout="test3()">这是一个span</span>
		</body>
	</html>

2.2 什么是对象

在软件系统中，对象具有唯一的标识符，对象包括属性（Properties）和（行为）方法（Methods），属性就是需要记忆的信息，方法就是对象能够提供的服务。

2.3 js 对象

js对象 ：包含了html元素对象，以及其它js内置或自定义的对象。

	//根据id获取到html元素, 获取的就是一个html元素对象
	var v = document.getElementById("id");
	alert(v);
	console.log(v);

2.4 使用js访问html元素对象

表单元素.value/非表单元素.innerHTML

a. 设置/获取表单元素(文本框,单选，复选，下拉框…)的内容
b. 设置/获取非表单元素(h1-h6,p,div,span,a…)的内容

	//通过js访问HTML元素
	1.表单元素
	获取表单元素数据:
	var bl = document.getElementById("表单元素id").value;
	设置表单元素数据
	document.getElementById("表单元素id").value="数据"
	
	2.非表单元素
	获取非表单元素的内容
	var nr = document.getElementById("非表单元素id").innerHTML;
	设置非表单元素的内容
	document.getElementById("非表单元素id").innerHTML="数据";
	
	3.通过js设置元素样式
	设置元素的行内样式
	document.getElementById("元素id").style.color="字体颜色";
	设置元素的类样式
	document.getElementById("元素id").className="类样式名";

innerText 表示获取标签中的文本（内容）不包含标签
innerHTML 表示获取标签中的所有内容（包含标签+文本）
outerHTML 表示获取当前标签中的所有内容包含标签本身
绑定元素的事件函数三步走(事件驱动机制):
3w，针对哪个元素，在什么时候，做什么处理
who 触发事件的事件源：给谁绑定函数（哪个标签）。针对哪个元素
When 什么时机点击时触发事件操作。在什么时候
what 干什么函数的主体代码。做什么事情

案例1：改变页面颜色

	<!DOCTYPE html>
	<html>
		<head>
			<title> new document </title>
			<style type="text/css">
			</style>
			<script type="text/javascript">
				// 调试问题:
				// 1.页面控制台是否出错。观察法
				// 2.函数代码全都注释，只留一个弹窗。排除法。
				function changeColor(){
				//alert(123);
				// 实现点击按钮切换页面背景
				// 切换页面背景: document.body.style.backgroundColor=""
				//document.body.style.backgroundColor="red";
					if(document.body.style.backgroundColor=="red"){
						document.body.style.backgroundColor="green";
					}else if(document.body.style.backgroundColor=="green"){
						document.body.style.backgroundColor="blue";
					}else{
						document.body.style.backgroundColor="red";
					}
				}
			</script>
		</head>
		<body>
			<input type="button" value="改变页面背景" onclick="changeColor()"/>
		</body>
	</html>

案例2：计算器

1.写界面(标题,三个文本框,四个按钮)
2.实现加减乘除的函数，与按钮的单击事件绑定

	<!DOCTYPE html >
	<html>
		<head>
			<title> New Document </title>
			<meta charset="utf-8">
			<script type="text/javascript">
			//var x; "xxx",'sdfsd',20,234.234
			//定义计算器
			//ysf:接受方法调用时，传入的运算符参数
			function jisuan(ysf){
				//显示运算符
				//alert(ysf);
				//1.获取文本框的值
				var txt1 = document.getElementById("num1");
				var v1 = Number(txt1.value);
				var txt2 = document.getElementById("num2");
				var v2 = Number(txt2.value);
				//2.根据传入的运算符做运算
				var jg ;
				switch(ysf){
					case "+":
						jg = v1+v2;
						break;
					case "-":
						jg = v1-v2;
						break;
					case "*":
						jg = v1*v2;
						break;
					case "/":
						jg = v1/v2;
						break;
				}
				//3.将运算结果设置到结果文本框中
				var txtRes =document.getElementById("res");
				txtRes.value = jg;
			}
			</script>
		</head>
		<body>
			<table border="1" align="center">
				<caption>计算器</caption>
				<tr>
					<td>数据1</td>
					<td>
						<input type="text" name="num1" id="num1" />
					</td>
				</tr>
				<tr>
					<td>数据2</td>
					<td>
						<input type="text" name="num2" id="num2"/>
					</td>
				</tr>
				<tr>
					<td>运算</td>
					<td>
						<input type="button" value="+" onclick="jisuan('+')"/>
						<input type="button" value="-" onclick="jisuan('-')"/>
						<input type="button" value="*" onclick="jisuan('*')"/>
						<input type="button" value="/" onclick="jisuan('/')"/>
					</td>
				</tr>
				<tr>
					<td>结果</td>
					<td>
						<input type="text" name="res" id="res"/>
					</td>
				</tr>
			</table>
		</body>
	</html>

案例3：猜数字

a.生成一个随机数1-100并不显示出来
b.让用户在文本框中输入他猜的数字
c.点击猜一猜按钮的时候，比较用户输入的值和随机数，是大是小，进行提示
// 扩展:只能猜5次

	<!DOCTYPE html >
	<html>
		<head>
			<title> New Document </title>
			<meta charset="utf-8">
			<script type="text/javascript">
				//生成一个1-100的随机数
				// var r = Math.random()
				var r = 79;
				//定义函数实现输入数据和随机数的比较
				function bijiao(){
					// 获取文本框中的数据
					var txt = document.getElementById("num");
					var v = Number(txt.value);
					//做比较
					if(v>r){
						//alert("猜大了")
						var mydiv = document.getElementById("tip");
						// innerHTML:设置成对标签的内部内容
						mydiv.innerHTML = "猜大了";
					}else if(v<r){
						alert("猜小了")
					}else{
						alert("猜对了");
					}
				}
			</script>
		</head>
		<body>
			输入一个数据:
			<input type="text" id="num"/>
			<input type="button" value="猜一猜" onclick="bijiao()"/>
			<hr/>
			<div id="tip">
			这里显示提示信息
			</div>
		</body>
	</html>

第三节代码的调试

1 观察法调试：根据异常提示，找到错误位置，通过观察找到出错代码
2 逐步输出信息调试法：如果代码没有出错，但是结果不符合预期，可以按照代码流程
逐步打印输出信息跟踪代码执行过程
3 断点调试法：使用浏览器自带的调试工具进行调试
firefox浏览器：

VS code：（关联浏览器环境，运行就会有信息提示）

ie浏览器：

第四节：网页中的常用事件

4.1 事件

事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。
发生的某件事情。通过html元素触发的事情。

4.2 常用事件

1.鼠标事件

事件
* onclick	点击事件
ondblclick	双击事件
onmousedown	鼠标按下
onmouseup	鼠标松开
onmouseover	鼠标移入
onmouseout	鼠标移出

2.键盘事件


onkeydown	按下
onkeyup	松开
onkeypress	按下并松开

3.浏览器事件


*onload	页面加载完成时触发
*onunload	页面退出时触发

4.表单事件

5.扩展

自学案例:

图片切换：点击上一张，下一张，让图片切换

	<!DOCTYPE html >
	<html>
		<head>
			<title> New Document </title>
			<meta charset="utf-8">
			<script type="text/javascript">
				var i = 0;
				// 下一张图片
				function nextImg(){
					i++;
					var str = "js"+i+".gif";
					//alert(str);
					var jiangshi = document.getElementById("jsImg");
					jiangshi.src = "img/"+str;
					//扩展:要求轮回显示,上一张，下一张显示完整
				}
			</script>
		</head>
		<body>
			<input type="button" value="下一张" onclick="nextImg()"/>
			<input type="button" value="上一张"/>
			<hr/>
			<img src = "img/js0.gif" id="jsImg"/>
		</body>
	</html>

总结：

函数，事件，对象
总结：函数学会函数的定义和调用
调用：直接，跟标签事件绑定
获取对象：document.getElementById();

练习：

首要目标：课堂案例搞清楚大熟练
作业1：整5个文本框，计算最大最小平均以及和，并显示到一个标签中。
注意：录入的值必须是数字点击按钮时判断不能为空必须是数字–附加
作业2：在页面上创建四个文本框：省市县详细地址。通过按钮触发：将地址信息
拼接显示在整体地址的div中
作业3：在页面上创建三个下拉框和一个文本框，通过下拉框的onchange事件(内容改
变事件)将信息拼接显示在文本框中
作业4：计算器(自己能够独立完成)。
要求：每天的所有案例，5遍以上。
1.先写整体思路流程
2.把每一步的步骤，注释写好。
3.做填空题。
避免：感觉自己会