第一节：函数/方法
1.1 什么是函数
函数是指一段可以直接被另一段程序或代码引用的程序或代码。也叫做子程序、（OOP中）方法。一个较大的程序一般应分为若干个程序块，每一个模块用来实现一个特定的功能。
由主函数调用其他函数，其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。在程序设计中，常将一些常用的功能模块编写成函数，放在函数库中供公共选用。要善于利用函数，以减少重复编写程序段的工作量。
函数：一段具有特定的功能的代码块。需要时调用，调用时执行！(自己不会主动执行！)
if(){} : 控制代码是否执行。
for(){}: 控制代码执行多少次。
function(){}: 控制代码何时执行。调用时执行。
1.2 函数分类
-
库函数（系统函数）
js给我们提供的具有特定功能的代码块。
alert() prompt() document.write() Number() parseInt() 。。。
-
自定义函数( 重点 )
自己定义函数，根据自己的需求来定义功能。
1.3 函数的定义和使用
语法:
function 函数名(参数1,参数2,参数3,...)
{
函数功能代码;
return 函数返回值；
}说明:
function:用于定义函数的关键字，不能写错。
函数名:使用者自己定义，命名规则:字母，数字，下划线，$，数字不能开头。小驼峰的命名方式,例如: getNum()
参数列表:在函数名后面的小括号中定义参数列表，参数可多可少，也可以没有。其实参数就是变量，可以接受数据。
函数功能代码:当前函数要实现的特定功能，是函数的核心内容。
return 返回值:在函数执行完成之后，可以通过return关键字，返回函数处理的结果。可以省略。
函数的使用:如果一个功能代码，需要被反复使用，此时建议将该代码定义为函数。另外一种情况，如果在一个处理过程中，部分代码太多，此时可以将此部分代码封装成函数，优化代码结构。
示例：洗衣服
// 定义函数
function xiyifu(){
document.write("将衣服放进洗衣机");
document.write("放水");
document.write("加洗衣粉");
document.write("开始洗衣服");
document.write("甩干");
}
//调用函数
xiyifu();
//调用函数
xiyifu();
xiyifu();1.3.1无参无返回值的函数
// 定义函数
function sayHello(){
alert("你好!");
}
//调用函数
sayHello();1.3.2无参有返回值的函数
// 返回值的使用
function getNum(){
// 使用return关键返回数据
return 200;
}
// 调用函数，因为函数有返回值，所以可以进行接收
var res = getNum();
document.write(res);
//-----------------------------------------------------
var names = ["张三","李四","王五","赵六","孙琪"];
// 返回值的使用
function getNum(){
// Math.random():
//0-0.999999 -> (0-0.999999)*10 ->
//0-9.9999999 -> parseInt(0-9.9999) -> 0-9 -> (0-9)+1 ->1-10
return parseInt(Math.random()*5)+1; // 1-5
}
// 获取随机数，作为下标
var r1 = getNum();
//var r2 = getNum();
//var r3 = getNum();
//alert(r1+" "+r2+" "+r3);
alert("中将的人:"+names[r1-1]);注意:如果函数的最后没有使用return返回结果，此时如果使用变量接受函数，则接受的数据为undefined。
function getNum(){
document.write(200);
}
// 函数没有返回值，变量什么都接收不到，此时变量是undefined
var res = getNum();
alert(res);1.3.3有参数无返回值的函数
// 定义函数
function sayHello(mingzi){
alert("你好!"+mingzi);
}
// 定义函数
function study(who,course){
alert(who+"学习"+course);
}
document.write("早上起来散步，遇到熟人:")
// 调用函数
sayHello("老张");
document.write("进入教室学习");
study("小王","html");
document.write("中午到公元散步,遇到熟人:")
// 调用函数
sayHello("老李");
document.write("进入教室学习");
study("小丽","javascript");
1.3.4有参数有返回值的函数
/*
function add(n1,n2){
var res = n1+n2;
return res;
}
var res = add(10,20);
alert(res);
*/
// 扩展: 求任意两个区间之间(1-100,100-200)的和
function sum(start,end){
var he = 0;
for(var i = start;i<=end;i++){
he+=i;
}
return he;
}
var res = sum(1,100);
alert(res);
1.3.5匿名函数
语法:
// 定义匿名函数
function(参数1,参数2...){
//代码块
return 结果;
}// 定义匿名函数，并存储到变量中
var x = function (){
document.write("我是匿名函数");
}
// 调用匿名函数
x();
// 事件和函数绑定
// window.onload:浏览器窗口中的页面加载完成事件
window.onload=function(){
alert(123);
}第二节 网页元素的事件和函数
2.1 事件
事件:就是发生了一件事，通常我们会将html元素事件和特定的方法绑定到一起，当事件触发的时候，程序自动执行绑定的方法，以此完成特定的程序处理。这就是程序的事件驱动机制。
function test()
{
alert("你点我了");
}
<input type="button" value="测试" onclick="test()"/><!DOCTYPE html>
<html>
<head>
<title> new document </title>
<style type="text/css">
</style>
<script type="text/javascript">
function test(){
alert("你点我了");
}
function test2(){
alert("讨厌，把鼠标拿开");
}
function test3(){
//alert("你点击了div");
// 让div元素的背景颜色变为红色
// 1.通过js方式，获取到div元素
// document.getElementById("id名字"): 根据id名，获取对应元素对象
var md = document.getElementById("mydiv");
//alert(md);
console.log(md);
// 2.通过js方式,设置元素背景
// md:指得是div元素对象 style:指的是div的样式对象 backgroundColor:背景颜色属性
md.style.backgroundColor="red";
}
function test4(){
// 1. 通过js方式,获取到div元素
var md = document.getElementById("mydiv");
// 2. 通过js方式，设置元素背景
// backgroundColor: js的属性等价于 css属性去掉中划线，
// 首字母小写，其它单词首字母大写
// fontSize: font-size
// borderWidth: border-width
md.style.backgroundColor="yellow";
}
</script>
</head>
<body>
<!--html元素 ：button按钮
事件 : on(当)click(单击)。发生一件事情
函数 : 完成一个特定功能。针对发生的事情做处理
针对按钮，当点击按钮(onclick)的时候，弹出信息(test()函数)
html js事件驱动机制,从而实现页面的特定功能
-->
<input type="button"
value="测试按钮"
onclick="test()"
/>
<input type="button"
value="测试按钮2"
onmouseover="test2()"
/>
<!--onclick:鼠标单击 onmouseover:鼠标覆盖 onmouseout:鼠标移出-->
<div id="mydiv" style="border:1px solid red;width:300px;height:200px;"
onclick="test3()"
onmouseout="test4()"
>
</div>
</body>
</html>
2.2 什么是对象
在软件系统中，对象具有唯一的标识符，对象包括属性（Properties）和（行为）方法（Methods），属性就是需要记忆的信息，方法就是对象能够提供的服务。
2.3 js 对象
js对象：包含了html元素对象，以及其它js内置或自定义的对象。
//根据id获取到html元素, 获取的就是一个html元素对象
var v = document.getElementById("id");
alert(v);2.4 使用js访问html元素对象
a. 设置/获取表单元素(文本框,单选，复选，下拉框...)的内容
b. 设置/获取非表单元素(h1-h6,p,div,span,a....)的内容
//通过HTML元素，触发js函数的执行
<元素 事件名="函数名()"/>//通过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 表示 获取当前标签中的所有内容 包含标签本身
绑定事件函数三步走 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>
<style type="text/css">
</style>
<script type="text/javascript">
// 计算器
// fh:接收一个运算符号
function calc(fh){
// 1.获取第一个文本框的数据
var txtNum1 = document.getElementById("num1");
var num1Val = Number(txtNum1.value);
// 可以直接写对象并访问属性
//var num1Val = document.getElementById("num1").value;
//document.getElementById("num1") ===> num1 (id名)
//var numVal1 = num1.value;
// 2.获取第二个文本框的数据
var txtNum2 = document.getElementById("num2");
var num2Val = Number(txtNum2.value);
// 3.做运算
/*
var jg = 0;
if(fh=="+"){
jg = num1Val+num2Val;
}else if(fh=="-"){
jg = num1Val-num2Val;
}else if(fh=="*"){
jg = num1Val*num2Val;
}else if(fh=="/"){
jg = num1Val/num2Val;
// 扩展点:除以0的错误
}*/
switch(fh){
case "+":
jg = num1Val+num2Val;
break;
case "-":
jg = num1Val-num2Val;
break;
case "*":
jg = num1Val*num2Val;
break;
case "/":
jg = num1Val/num2Val;
break;
}
// 4.将运算结果赋值给结果文本框
var txtRes = document.getElementById("res");
txtRes.value = jg;
//document.getElementById("res").value =jg;
//res.value = jg;
}
// 扩展: eval可以执行字符串运算
//alert(eval("20+30"));
</script>
</head>
<body>
<div class="mydiv">
<h1>计算器</h1>
<input type="text"
name="num1"
id="num1"
placeholder="第一个数"
/>
<br/>
<input type="text"
name="num2"
id="num2"
placeholder="第二个数"
/>
<br/>
<input type="button"
value="+"
onclick="calc('+')"
/>
<input type="button"
value="-"
onclick="calc('-')"
/>
<input type="button"
value="*"
onclick="calc('*')"
/>
<input type="button"
value="/"
onclick="calc('/')"
/>
<br/>
<input type="text"
name="res"
id="res"
placeholder="结果"
/>
</div>
</body>
</html>
第三节 代码的调试
1 观察法调试：根据异常提示，找到错误位置，通过观察找到出错代码
2 逐步输出信息调试法：如果代码没有出错，但是结果不符合预期，可以按照代码流程逐步打印输出信息跟踪代码执行过程
3 断点调试法：使用浏览器自带的调试工具进行调试
第四节：网页中的常用事件
4.1 事件
事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。
发生的某件事情。通过html元素触发的事情。
4.2 常用事件
1.鼠标事件
| * onclick | 点击事件 |
| ondblclick | 双击事件 |
| onmousedown | 鼠标按下 |
| onmouseup | 鼠标松开 |
| onmouseover | |
| onmouseout |
2.键盘事件
| onkeydown | 按下 |
|---|---|
| onkeyup | 松开 |
| onkeypress | 按下并松开 |
3.浏览器事件
| *onload | 页面加载完成时触发 |
|---|---|
| *onunload | 页面退出时触发 |
4.表单事件
| * onblur | 元素失去焦点时触发 | 2 |
|---|---|---|
| * onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
| * onfocus | 元素获取焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) | |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) | 2 |
| * onsubmit | 表单提交时触发 |
