JavaScript课堂笔记

﹏ヽ暗。殇╰゛Y 2023-09-29 18:25 32阅读 0赞

### 前置任务： ###

配套视频：https://www.bilibili.com/video/BV15v411K7qe/

### 第一章：基本语法 ###

#### 第一节：JavaScript的来源 ####

##### 1.网景公司（**Netscape**）: #####

当时就职于**Netscape**公司的布兰登·\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W4T3LkTk-1672665841084)(assets/bulandeng.gif)\] 计划1995年2月发布的LiveScript在浏览器和服务器中使用 ，为了赶在发布日期前完成**LiveScript**的开发，**Netscape**与**Sun**公司成立了一个开发联盟。而此时，**Netscape**为了搭上媒体热炒**Java**的顺风车，临时把**LiveScript**改名为**JavaScript**，所以从本质上来说**JavaScript**和**Java**没什么关系 。

1996年03月　网景公司发表了支持JavaScript的网景导航者2.0。

1996年08月　由于JavaScript作为网页的客户面脚本语言非常成功，微软将之引入了Internet Explorer3.0，取名JScript。

##### 2.ECMAScript #####

1996年11月　网景公司将JavaScript提交给欧洲计算机制造商协会(ECMA)进行标准化。

1997年06月　ECMA-262的第一个版本被欧洲计算机制造商协会采纳。并将 ECMA-262 标准取名为 ECMAScript。ES6.

##### 3.javascript #####

JavaScript 和 JScript 与 ECMAScript 相容，但包含超出 ECMAScript 的功能

#### 第二节：为什么要学习javascript ####

##### 客户端表单验证 #####

![Image 1][]

##### 页面动态效果 #####

##### 动态改变页面内容 #####

![Image 1][]

##### Ajax效果： #####

![Image 1][]

#### 第三节：什么是程序 ####

程序一词来自生活，通常指完成某些事务的一种既定方式和过程

在日常生活中，可以将程序看成对一系列动作的执行过程的描述

##### 1、生活中的程序： #####

**西红柿炒鸡蛋：**

![eag-potato][Image 1]

正确的程序：

1、番茄3个，洗净切块放入盘中待炒------2、取鸡蛋两枚，磕破放于碗中------3、切葱花少许，盐少许一起搅打至混匀起泡------4、取油少许放入炒锅，加热至8成------5、倒入蛋糊，待稍凝固后翻炒并加入番茄------6、翻炒至番茄6成熟再加盐少许，翻匀盛于盘中。

![Image 1][]

##### 2、计算机中的程序 #####

为了让计算机执行某些操作或解决某个问题而编写的一系列有序指令的集合

##### 3、语言的发展史 #####

**人工操作**\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OPqiOS5S-1672665841086)(assets/计算机人工操作.png)\]

**纸带穿孔**\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0i231Vp-1672665841086)(assets/程序打孔纸带.png)\]

**汇编语言**

汇编语言程序依赖于计算机硬件，其可读性和可移植性都很差\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DBmhJf74-1672665841087)(assets/汇编.png)\]

**高级语言**

1954年，第一个完全脱离机器硬件的高级语言–FORTRAN问世了，60 多年来，共有几百种高级语言出现，有重要意义的有几十种，影响较大、使用较普遍的有FORTRAN、BASIC、Pascal、C、C++、VC、VB、PB、JAVA等。

#### 第四节：JavaScript语言基本结构 ####

*      示例
        
        <html>
        	<head>
        		<title>脚本的基本结构</title>
        		<script type="text/javascript">
        			var count=0;     
        			document.write("京东欢迎您！");   
        			for(i=0;i<5;i++)        
        				 document.write("<h2>AAA欢迎您！</h2>");
        		</script>
        	</head>
        	<body>	
        		<h1> body部分的内容</h1>
        	</body>
        
        </html>

##### 1、javascript三个组成部分： #####

###### ECMAScript核心语法 ######

###### 浏览器对象模型（BOM） ######

###### 文档对象模型（DOM） ######

##### 2、内存如何存放数据 #####

内存就像旅馆一样，有各种房间类型；房间有名称，变量也有名称；房间有入住的客人，变量中存储某个值。变量是存储数据的一个基本单元。

![Image 1][]

##### 3、变量的声明和赋值 #####

var count; //告诉计算机要开一个房间，名字叫count
    count=9;//让客人9入住到count房间
    document.write(count);//在页面上输出count的值
    console.log(count);//在控制台输出count的值

注意：var是关键字，表明后面跟的是变量，count是变量名，是可以任意取名的

也可以一次声明多个变量并赋值，中间用逗号间隔开

let money=900,count=5,name='欧阳锋',time;

在JavaScript中要注意大小写是严格区分的：count 和Count是不一样的两个变量;

let声明的是局部变量；var声明的是全局变量，提倡使用let声明变量。

##### 4、变量之间赋值 #####

示例2：A学员的热干面是6.5元/碗，B学员与A学员相同，输出B学员热干面价格

let a=6.5;
    let b=a;
    document.write("B学员的热干面价格是："+b+"元");
    document.write("A学员的热干面价格是："+a+"元");

从这个示例可以看出，当a把自己的值赋值给b时，仅仅是把自己的值复制了一份给了b，自己仍然保留了原来的值。

##### 5、变量命名规则 #####

变量名= “$” 或 “\_” 或 英文字母开头 + 英文字母或数字

name,money,img1,$time,\_count

###### 如果用两个单词来表示一个变量，单词中间不能有空格，后面一个单词的首字母要大写。 ######

关键字不能用来做变量名：

var, int, for,while, if, do…

##### 6、JavaScript的基本数据类型： #####

JavaScript提供了5种基本的数据类型：

Number,String,boolean,Null,Undefined

##### 7.类型判断 #####

1.判断某个变量是某种数据类型要用关键词：type of alert(type of name);

最大的问题是判断数组和null等数据类型时，无法获得预期的结果

2.instanceof

用于判断引用类型的继承关系，如：判断Function是否继承于object

最大的问题是不支持基本类型判断

3.Object.prototype.toString.call()

类型判断的最佳实践，使用Object原型上的toString方法，这种方法可以精确的判断各种数据类型。

##### 8. 转义字符 #####

**转义字符** \\b 退格字符 \\f 换页符 \\n 换行字符 \\r 回车字符 \\t 制表符 '单引号 "双引号 \\ 反斜线 \\xNN 其中NN是一个十六进制数，表示Latin-1字符集中的编号来表示一个字

#### 第五节：运算符 ####

运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值

##### 运算符可分为以下类别： #####

###### 算术运算符 ： +、-、 \* 、 / 、%、++、- -、-(求反) ######

###### 比较运算符 ： ==、!=、>、>=、<、<= ######

###### 逻辑运算符 ： &&、||、！ ######

##### 1、算术运算符 #####

示例3：以下是几个同学一起吃热干面的数据，求每个同学均摊多少钱？

var bigCount=4,littleCount=3,bigPrice=8,littlePrice=6,avg;	
    var xiaocai=2,caiPrice=9;	
    document.write("大碗和小碗的价格相差："+(bigPrice-littlePrice)+")";
    avg=(bigCount*bigPrice+littleCount*littlePrice+xiaocai*caiPrice)/7;	
    document.write("平均每人："+avg+"元");

##### 2、比较运算符 #####

关系运算符是为了比较两个数的大小，两个数据在进行值的比较时，其结果不是成立就是不成立

其中成立为“真”，不成立为“假”。

关系运算的结果仅产生两个值：true表示“真”，false表示“假”。

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;</td> 
   <td>小于运算符 。</td> 
   <td>a&lt;4</td> 
  </tr> 
  <tr> 
   <td>&lt;=</td> 
   <td>小于等于运算符。</td> 
   <td>3&lt;=5</td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于运算符。</td> 
   <td>x&gt;y</td> 
  </tr> 
  <tr> 
   <td>&gt;=</td> 
   <td>大于等于运算符。</td> 
   <td>x&gt;=0</td> 
  </tr> 
  <tr> 
   <td>==</td> 
   <td>等于运算符。</td> 
   <td>如a= =b。</td> 
  </tr> 
  <tr> 
   <td>!=</td> 
   <td>不等于运算符。</td> 
   <td>y!=1</td> 
  </tr> 
 </tbody> 
</table>

示例4：请比较热干面大碗和小碗的价格

var bigPrice=8,litterPrice=6,result;
    result= (bigPrice==litterPrice);
    document.write(" (bigPrice==litterPrice)的比较结果是： "+result); 
    result= (bigPrice != litterPrice); 
    document.write(" (bigPrice!=litterPrice)的比较结果是： "+ result);
    result= (bigPrice > litterPrice);
    document.write(" (bigPrice!=litterPrice)比较结果是："+result);

##### 3、逻辑运算符 #####

逻辑运算表示两个数据或表达式之间的逻辑关系是真还是假。

逻辑运算符有三种：逻辑与运算符“&&”、逻辑或运算符“||”、逻辑非运算符“!” 。

示例5：判断学生是否是男的并且满18岁？

var sex="男";
    var age=19;
    alert(sex=="男"&&age>18);//弹出满足两个条件的结果
    alert(sex=="男"||age>18);//弹出满足一个条件的结果

查看下面的结果：

alert((4>3)&&(5>1));
    alert((4<3)&&(5>1));	
    alert((4>3)||(5<1));
    alert((4<3)||(5<1));
    alert(!(4>3));
    alert(!(4<3));

##### 4、自增运算符和自减运算符 #####

自增运算符“++”用于给一个变量加1

自减运算符“–”用于给变量减1，

如a++和++a 运算结果都等价于a=a+1，

而a- -和- -a，都等价于a=a-1。

观察下面自增、自减的结果

var nNum1,nNum2;
    nNum1=nNum2 = 5;
    alert("num1++="+nNum1++);
    alert("++num2="+(++nNum2));
    alert( "num1--="+nNum1--);
    alert( "--num2="+(--nNum2));

#### 第六节：类型转换 ####

不同的数据之间需要转换后才能正确使用，

示例6：将两个字符串的数字进行加法运算

let a="12";
    let b="20";
    alert（a+b）；//结果是：1220

结果是两个字符串首尾相连拼接在一起了，所以需要对变量a,b进行类型转换，转换函数有：

###### parseInt (String) 将字符串转换为整型数字 ######

如: parseInt (“86”)将字符串“86”转换为整型值86

###### parseFloat(String) 将字符串转换为浮点型数字 ######

如: parseFloat (“34.45”)将字符串“34.45”转换为浮点值34.45

###### Number(Object) 将任何类型转换为数字 ######

如: Number(“34.45”)==34.45

Number(true)==1

#### 总结： ####

程序

变量

赋值

基本数据类型

类型转换

运算符

##### 作业：（10分钟） #####

求几个同学一起聚餐，AA制均摊的钱数。

### 第二章：分支语句 ###

##### 回顾 #####

javaScript语言有哪些数据类型？

标识符的命名规范？

javaScript语言提供了哪些运算符

自增自减运算符

怎样将字符串转换为数值？

##### 本章内容 #####

了解程序的三种结构

熟悉顺序结构的程序执行过程

能根据问题熟练绘制流程图

熟练使用if语句实现分支的条件判断

熟练使用switch语句进行多重分支判断

#### 第一节：程序流程 ####

##### 1、程序结构 #####

###### 顺序结构 ######

一段程序按照出现的顺序依次执行

###### 分支结构 ######

根据条件判断的结果不同，执行不同的功能

###### 循环结构 ######

重复执行一段代码

#### 第二节：分支结构—if条件 ####

![1545019425758][Image 1]

示例1：如果令狐冲的C语言考试成绩大于90分，师父就奖励他一本武功秘笈，否则就去思过崖面壁

var score=88;	
    if(score>90){
    	alert("奖励《独孤九剑》");
    } else{
        alert("思过崖面壁");    
    }

示例2：令狐冲Java成绩大于90分并且音乐成绩大于80分，师父奖励他；或者Java成绩等于100分并且音乐成绩大于70分，师父也可以奖励他；否则思过崖面壁

var java= prompt("请输入令狐冲的Java语言成绩","0");    //令狐冲的java成绩
    var music= prompt("请输入令狐冲的音乐成绩","0");     //令狐冲的音乐成绩
    if  ( (java> 90 && music>80) || (java== 100 && music> 70) )  {
         alert("师父说:不错，给你《独孤九剑》剑谱");
    }else{
        alert("思过崖面壁");
    }

当不知道运算符哪个优先级高的时候，多使用小括号( )控制优先级；

##### 课堂练习： #####

1、如果发烧，就要检测是否得了“新冠”，得了“新冠”就要隔离，否则就回家吃药

2、 两个数a、b，如果a能被b整除或a加b大于1000，则输出a，否则输出b

3、如果你是男的，就该挣钱，否则就该花钱

#### 第二节：使用多重if结构 ####

示例3：对学员的结业考试成绩评测

成绩>=90 ：优秀

成绩>=80 ：良好

成绩>=60 ：中等

成绩<60 ：差

int score = 70;    //考试成绩
    if ( score >= 90 ) {    
        alert("优秀");
    } else if (score >= 80 ) {    
        alert("良好");
    } else if (score >= 60 ) {    
        alert("中等");
    } else {    
        alert("差");
    }

#### 第三节：switch结构 ####

switch的语法结构：

switch (表达式){ 
      case 常量1:	
         语句;	
         break; 
      case 常量2:	
         语句;	
         break;	
      default:
         语句;
    }

示例4：令狐冲参加比武大会

如果获得第一名，将出任武林盟主

如果获得第二名，将出任武当掌门

如果获得第三名，将出任峨嵋掌门

否则，将被逐出师门

var mingCi = 1;
    switch (mingCi){
                case 1:
                    alert("出任武林盟主");
                    break;
                case 2:
                    alert("出任武当掌门");
                    break;
                case 3:
                    alert("出任峨嵋掌门");
                    break;
                default:
                    alert("被逐出师门");
    }

注意：每一个条件块中必须有break，否则会将之后所有的case都执行。

示例5：制作一个根据年月返回天数的程序

var year=2015,month=2,num;  //要输入的年月和返回的天数
    switch(month){
    	case 1:
    	case 3:
    	case 5:
    	......
    		num=31;	break;
    	case 4:
    	case 6:
    	......
    		num=30;	break;
    	case 2: 
    		if(year%4==0&&year%100!=0||year%400==0)
    			num=29;
    		else num=28;
    	default:
    		alert("输入错误！");	break;
    }
    alert("该月的天数为： “+num);

###### 练习：使用switch结构对学员的结业考试成绩评测 ，需要对学生成绩进行加工，然后才能用switch结构。 ######

成绩>=90 ：优秀

成绩>=80 ：良好

成绩>=60 ：中等

成绩<60 ：差

##### 总结： #####

程序的三种结构是什么？

分支中if的结构

switch的结构

switch能判断的类型有哪些？

##### 作业：从输入的年月中判断输入的年月是多少天（10分钟） #####

### 第三章：循 环 结 构1 ###

##### 本章目标 #####

理解循环的含义

会使用while循环结构

会使用do-while循环结构

##### 为什么要使用循环 #####

举例说明生活中的循环，

程序中的循环

##### 循环结构的特点： #####

循环进行的条件

循环执行的任务

#### 第一节：while循环结构 ####

##### 一、语法： #####

while ( 循环条件 ) {
    	   循环操作
    }

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dleSvHRE-1672665841089)(assets\\1545030068313.png)\]

先判断后循环，和if结构类似，但只要循环条件成立就会继续执行循环，而if判断只执行一次。

##### 二、示例1： #####

循环输出1000遍“我是最棒的！";

let i = 1;
    while(i <= 1000){
        document.write("我是最棒的！");
        i ++;
    }

##### 三、示例2： #####

给一个数，判断该数有几位

当这个数某位数除以10为小数的时候，也就是到了该数的最大位
    判断条件是每次除10的结果大于1
    执行的操作是将该数字除10并记录次数

var i = parseInt(prompt('请输入一个整数'));
    	var num=0;
       while(i >= 1){
          i=i/10;
          num++;
       }
       console.log(num);

##### 四、示例3： #####

输入一组学生成绩，求平均成绩，每次输入完成后都要提问是否继续输入，如果输入结果为"否"，则停止输入。

判断条件为输入的内容不为“否”
    循环的内容为加和输入的成绩

var ans="是";
    let i=0,sum=0;
    while(ans!="否"){
    	i++;
    	let score=Number(prompt("请输入第"+i+"个学生的成绩","0"));
    	sum+=score;
    	ans=prompt("是否继续输入学生成绩","是");
    }
    document.write(i+"个学生的平均成绩为："+sum/i);

##### while循环注意事项 #####

while语句中的表达式一般是关系表达式或逻辑表达式，只要表达式的值为真（true）即可继续循环。

循环体如包括一个以上的语句，则必须用｛｝括起来，组成复合语句。

应注意循环条件的选择以避免死循环

#### 第二节：do\_while循环结构 ####

##### 语法： #####

do {
    	循环操作
    } while ( 循环条件 );

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bAdjOWIN-1672665841090)(assets\\1545031292030.png)\]

##### 特点：先执行，再判断 #####

示例3：苦练半年，眼看大赛在即，盈盈提议：彩排一次，如果很令人满意，以后就不用彩排了，否则每天都要彩排，直到现场表现让她满意为止！

var pass;
    do{
    	document.write("令狐冲跳街舞！\n");
    	document.write("令狐冲弹琵琶！\n");
    	document.write("令狐冲问盈盈：满意么？");	
    	answer = prompt(“累死我了，盈盈还满意吧”，“不满意”);
    }while(pass!="满意");
    document.write("彩排满意！");

##### Math类的常用方法 #####

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ceil(x)</td> 
   <td align="left">对数进行上舍入，即向上取整。</td> 
  </tr> 
  <tr> 
   <td align="left">floor(x)</td> 
   <td align="left">对 x 进行下舍入，即向下取整。</td> 
  </tr> 
  <tr> 
   <td align="left">round(x)</td> 
   <td align="left">四舍五入。</td> 
  </tr> 
  <tr> 
   <td align="left">abs()</td> 
   <td align="left">返回传入参数的绝对值</td> 
  </tr> 
  <tr> 
   <td align="left">pow()</td> 
   <td align="left">用于计算一个数的指定幂pow(n,m)n为底数，m为幂</td> 
  </tr> 
  <tr> 
   <td align="left">random()</td> 
   <td align="left">返回 0 ~ 1 之间的随机数，包含 0 不包含 1。</td> 
  </tr> 
 </tbody> 
</table>

示例：

输出0~100之间的随机数

let num=Math.floor(Math.random()*100);
    console.log(num);

##### 示例：猜数游戏 #####

由随机数函数产生0~100之间的随机数，由测试者猜，共有6次机会，每次输出猜数的结果。

###### 课堂练习： ######

1、使用do-while实现：输出摄氏温度与华氏温度的对照表，要求它从摄氏温度0度到250度，每隔20度为一项，对照表中的条目不超过10条。

转换关系：华氏温度 = 摄氏温度 \* 9 / 5.0 + 32

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ViDsr0az-1672665841091)(assets\\1545032310515.png)\]

2、给一个数使用do-while循环判断它是不是水仙花数（数字每个位置上的数字的立方和等于数字本身：153）

#### 总结： ####

while和do—while循环都是用来解决循环次数不确定的场合问题。

##### 比较while和do-while #####

###### 语法不同\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z7wJ7a7A-1672665841091)(assets/1545031787759.png)\] ######

###### 初始情况不满足循环条件时 ######

while循环一次都不会执行

do-while循环不管任何情况都至少执行一次

##### 作业： #####

猜数游戏，计算学生平均成绩（15分钟）

### 第四章：循环结构2 ###

##### 本章内容： #####

学会使用for循环结构

学会在程序中使用break和continue

会使用调试解决简单的程序错误

#### 第一节：for循环 ####

###### 1、语法结构： ######

for(表达式1 ; 表达式2 ; 表达式3){
    	循环操作
    }

表达式1：自变量初始化

表达式2：循环条件

表达式3：自变量变化

示例1：循环录入某学员S1的5门课成绩，计算平均分

let sum=0;
    for(let i = 0; i < 5; i++){        //循环5次录入5门课成绩 
       score=Number(prompt("请输入5门功课中第" + (i+1) + "门课的成绩： "));  
       sum += score;
    }
    avg = sum / 5;        //计算平均分  
    document.write( "平均分是：" + avg);

示例2：再看从1累加到100

var sum=0;
    for(let i=1;i<=100;i++){
    	sum+=i;		
    }
    document.write("计算结果是："+sum);

示例3：输入一个数，输出如图所示加法表

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUQewAc0-1672665841093)(assets\\1545037973389.png)\]

###### 思路分析： ######

1、循环初始化：i = 0；j = 输入值
    2、循环条件：i<=输入值
    3、循环操作：计算i+j
    4、循环变量的改变：i++，j--

let val=parseInt(prompt("请输入一个个位整数","0"))
    for(  var i = 0,  j = val;  i<=val;  i++,  j-- ){
           document.write(j+"+"+j+”=”+(i+j));
     }

注意：for循环结构中三个表达式都可以省略，但小括号中的两个分号不能省略，其中中间的表达式2如果省略，则表示没有条件，即死循环

##### 2、练习： #####

求1~100之间不能被3整除的数之和

#### 第二节：break和continue的使用 ####

##### 1、break #####

在switch中已经使用过break；意思是跳出switch结构，循环里的break也是跳出循环。循环中，break后面无论有多少语句都不再执行，直接跳到循环后面。

示例4：循环录入王重阳5门课的成绩并计算平均分，如果某分数录入为负，停止录入并提示录入错误

var sum=0;
    for( var i = 1; i < 6; i++){   //循环5次录入5门课成绩       
       var score=prompt("请输入5门功课中第"+i+"门课的成绩： ",0);
       if(score < 0){
       	 alert("录入错误，循环退出");
    	 break;      //退出循环
       }
       sum = sum + parseFloat(score);
    }
    alert("总成绩是："+sum);
    alert("王重阳的平均成绩是："+sum/(i-1));

示例5：1~10之间的整数相加，得到累加值大于20的当前数

var sum=0;
    for(var i=1;i<=10;i++){
       sum=sum+i;
       if( sum > 20 ){
          document.write("当前数是:"+i);
          break;
       }
    }
    document.write("当前的累加值："+sum);

##### 2、continue #####

不跳出循环，而是继续执行下一次循环任务，本次循环中continue后面的语句不再执行。

示例6：循环录入Java课的学生成绩，统计分数大于等于 80分的学生比例

1、通过循环，获得分数大于等于80分的学生人数num，初始值为0，每有一个大于80分的学生num++

2、判断：如果成绩<80，不执行num++，直接进入下一次循环

var num=0,score;
    for( var i = 1; i < =6; i++){
        score=prompt("请输入第"+i+"名学生的成绩： ","0");
        if(score < 80){
             continue;
        }
        num++;      //大于等于80分的人数
    }
     alert("80分以上的学生所占的比例为："+ num/6*100+”%”);

示例7：利用continue求1~100之间能被3整除的数的和

let sum=0;
    for(let i=1;i<101;i++){
    	if(i%3!=0){
    		continue;
    	}
    	document.write(i+" ")
    	sum+=i;
    }
    document.write("1~100之间能被3整除的数的和是："+sum);

练习：

1、循环输出1~100之间的非明七暗七，例如：不能有7,14,17,21,27,28

2、循环输出刚刚超过1000的斐波那契数列（1,1,2,3,5,8,13,21,34…）,某一位数是前两位数之和。也叫兔子生崽数列/

3、求1000以内的水仙花数（数字每个位置上的数字的立方和等于数字本身：153）

4、求3位数以上5位数以内的回文数（121,5885）（选做）

#### 第三节：程序调试 ####

如果程序代码中出现错误，可以在浏览器中点击F12——找到控制台，在错误的右边有超链接，点击后就可以直接进入到代码错误的那一行。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jPpPLq4c-1672665841094)(assets\\1545043536062.png)\]

如果没有语法错误，只是结果有偏差，可以浏览器中点击F12，找到调试器

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwDcMiWa-1672665841094)(assets\\1545043233222.png)\]

选中要观察的变量——右键——添加监视表达式，就可以在右边的监视表达式中观察该变量的值；

点击跨越箭头图标，或按F10可以让程序向下执行一行，过程中观察变量的变化

#### 总结： ####

for循环结构比较紧凑，对已知数量的循环操作方便

break和continue的区别是什么？

##### 作业：（15分钟） #####

循环输出1~100之间的非明七暗七，例如：不能有7,14,17,21,27,28

循环输出刚刚超过1000的斐波那契数列（1,1,2,3,5,8,13,21,34…）,某一位数是前两位数之和。也叫兔子生崽数列

求1000以内的水仙花数（数字每个位置上的数字的立方和等于数字本身：153）

### 第五章：函数和事件： ###

#### 第一节：什么是函数 ####

就像一台榨汁机一样你不必去关心它怎么工作的，只需要把水果放入，按下功能键，![Image 1][]

##### 1.函数的含义： #####

函数是一组可以随时随地运行的语句块，可以完成一个具体的功能，并且可以在不同的地方重复调用。函数是 ECMAScript 的核心

##### 2、函数的分类 #####

###### 库函数 ######

是编程环境提供给用户的已经定义好的函数，这些函数不需要用户编写代码，如：alert() prompt() write() open()等

###### 自定义函数 ######

是由用户按需要自己编写的函数，

对于用户自定义函数，不仅要在程序中定义函数体，而且在主调函数或其他函数中，还必须对该函数进行调用。

##### 3、自定义函数： #####

###### 语法： ######

创建函数：

>     function 函数名(参数){
>     	函数体
>     }

使用函数：

函数调用一般和表单元素的事件一起使用，调用格式为： 事件名＝“函数名” ;

###### 示例： ######

在一个文本框中填入一个人的姓名，点击按钮后弹出提示框向这个人问好

<input type=“text” id=“username”>
    <input type="button"  value="显示" οnclick="showHello(  )">
    <script language=“javascript”>
    	function showHello( ){   
    		var username=document.getElementById("username").value ; //getElementById(id)是按照id找到指定的文本框   
    		alert("你好"+username);//alert为警告框
    	}
    </script>

示例2：编写如下图所示，具有能对两个操作数进行加、减、乘、除运算的简易计算器。![Image 1][]

function calPlus(){      
    	var n1=document.getElementById("num1").value;  
    	 var n2=document.getElementById("num2").value; 
    	document.getElementById("result").value=parseInt(n1)+parseInt(n2);
    }
    <input type="button" value="+" οnclick="calPlus()">

###### 定义有参函数 ######

4个按钮调用的函数的代码很类似，怎么优化代码？

#### 第二节：事件概念 ####

当文档、浏览器、元素或与之相关的对象发生某些事情时，web浏览器就会产生事件（event）。例如，浏览器加载完文档，鼠标指针移动到超链接上面、鼠标点击按钮、敲击键盘时web浏览器都会产生事件，当这些事件发生时要进行相应的处理就可以注册当这些事件发生时调用的函数。

事件类型(event.type)：就是事件名称。例如：mousemove，鼠标移动；keydown，按下 键盘的某个键；click，鼠标单击等。

事件目标(event.target)：是发生的事件或与之相关的对象，一般我们讲事件时，必须同时指明类型和目标。例如：文本框的keydown，button的click，window的load等；window，Document，Element对象都是最常见的事件目标。

当事件发生时，可以注册一个函数来响应这个事件，这个函数就是对这个事件发生要完成的任务。

获取事件对象的两种方式：

1）通过window对象的属性event获得，这一般是IE浏览器的方式

2）通过事件函数的第一个参数获得，除IE以外的其它浏览器的方式

但现在的浏览器兼容性都比较强了，两种方式大部分情况下都能通用。

##### 1、点击事件 #####

这是最常见的事件，在页面任何地方都可以发生单击事件

###### 示例1：事件源 ######

测试你点击了哪个按钮:**event.srcElement**或**event.target**

<input type="button" value="提交"/>
    <input type="button" value="充值"/>
    <input type="button" value="删除"/>
    <input type="button" value="登录"/>
    
    <script>
    	function showEventSrc(e){
    		e=e||window.event;
    		alert(e.srcElement.value);
    	}
    	document.οnclick=showEventSrc;
    </script>

##### **2、键盘事件** #####

**keydown事件： 键盘按一下事件（如果按着不放会连续触发此事件）**

**keypress事件：键盘按一下事件（如果按着不放会连续触发此事件）**

如果两个事件都给了，那么当绑定元素聚焦后按一下键盘，两个方法都会触发

如果按着不放，那么这两个事件会连续不断的触发keydown -> keypress

如果按下按的键是Ctrl、Alt、Shift和Meta等，那么keypress不会被触发，只有keydown会不断的触发

**keyup事件：键盘松开事件**

如果用户一直不松开键盘，键盘事件就会按照这样的顺序连续触发：keydown -> keypress -> keydown-> keypress -> … （松开键盘后）-> keyup。

**获取当前按下的按键值**

**基本演示**

当用户在按下键盘的过程中（keydown事件和keyup事件）可以通过事件对象的*keyCode*属性获取当前键盘的值，返回的值是一个数字。可以根据获取的数字做出判断来完成特定的事件函数。

**键盘各键对应的数字值**

![Image 1][]

###### **示例2:获取键盘的ASCII码** ######

**event.keyCode**

示例：用键盘控制人物在页面游走

<img src="4.gif" id="img" style="left:0px;top:0px;position:absolute;">
    	<script>
    		var img = document.getElementById('img');
    		var x = 0;
    		var y = 0;
    		document.onkeydown = move;
    		function move(e){
    			e=e||window.event;
    		    var k = e.keyCode;
    		    switch(k){
    			case 37:    x = x - 5;    break;
    			case 38:    y = y - 5;	break;
    			case 39:    x = x + 5;	break;
    			case 40:    y = y + 5;	break;
    		    }
    		    img.style.left = x + 'px';
    		    img.style.top = y + 'px';
    		}		
    	</script>

这里需要注意，**在给img.style.left赋值时，一定要加上像素单位“px”**

#### 总结： ####

在JavaScript中，如何定义一个函数？

怎样给函数添加参数？

常用的事件有哪些？

常用的事件属性有哪些？

怎样获得键盘的ASCII码？

##### 作业 #####

1、计算器；2、键盘控制图片移动（15分钟）

### 第六章：BOM编程 ###

##### 内容回顾 #####

你所知道的事件有哪些

怎样找到页面中指定的元素

##### **本章目标** #####

理解浏览器对象模型

熟练掌握window对象的常用属性和方法

#### 第一节：BOM对象 ####

浏览器对象模型（BOM）以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时， window 对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造 函数及其他函数也都存在于它的命名空间下

![Image 1][]

##### 1、window对象常用属性 #####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>history</td> 
   <td>包含了用户已浏览的 URL 的信息</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>包含关于当前 URL 的信息</td> 
  </tr> 
  <tr> 
   <td>document</td> 
   <td>代表给定浏览器窗口中的 HTML 文档</td> 
  </tr> 
  <tr> 
   <td>event</td> 
   <td>代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态</td> 
  </tr> 
 </tbody> 
</table>

###### 示例1：location和history ######

分别定义4个页面，代码基本相同，每个页面中下拉框中默认选中的就是当前页面的地址选项

<h1>4</h1>
    		<select id="loc" onchange="forward()">
    			<option value="history1.html">history1</option>
    			<option value="history2.html">history2</option>
    			<option value="history3.html">history3</option>
    			<option value="history4.html" selected="true">history4</option>
    		</select>
    		a <a href="javascript:history.go(1)">前进</a>
    		a <a href="javascript:history.go(-1)">后退</a>
    		<hr >
    		<img src="img/girls/zly4.png" >
    		<script type="text/javascript" src="js/myjs.js"></script>

另外定义一个js文件，使用`<script type="text/javascript" src="js/myjs.js"></script>`引入

function forward(){
    	let loc=document.getElementById("loc");
    	console.log(loc.value);
    	window.location=loc.value;	//使用location来重新设定访问地址信息			
    }

2、window常用函数

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alert</td> 
   <td>显示自定义消息的对话框</td> 
  </tr> 
  <tr> 
   <td>confirm</td> 
   <td>显示确认对话框</td> 
  </tr> 
  <tr> 
   <td>prompt</td> 
   <td>显示输入对话框</td> 
  </tr> 
  <tr> 
   <td>setTimeout</td> 
   <td>经过指定毫秒值后计算表达式，并返回该事件对象</td> 
  </tr> 
  <tr> 
   <td>setInterval</td> 
   <td>每过一定时间间隔调用一次指定函数</td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>关闭当前浏览器窗口</td> 
  </tr> 
 </tbody> 
</table>

###### 示例2：确认对话框 ######

<input type="button" value="测试" οnclick="test()">
    	<script>
    		function test(){
    			var bool=confirm("比豹子跑得快么");
    			if(bool){
    				alert("你比禽兽还禽兽");
    			}else{
    				alert("你禽兽不如");
    			}
    		}
    	</script>

###### 示例3：动画播放 ######

<input type="button" value="测试" οnclick="show()">
    	<img src="eat/eat_0.jpg" id="img">
    	<script>
    		let i=0;
    		function show(){
    			let img=document.getElementById("img");
    			img.src="eat/eat_"+(i++)+".jpg";
    			if(i>39) {
    				i=0;
    				clearTimeout(exe);
    			}
    			let exe=setTimeout("show()",80);//指定的时间之后只执行一次函数
    		}
    		//var ext=setInterval("show()",100);//每隔指定的时间执行一次函数
    	</script>

###### 示例4：倒计时 ######

<input type="button" value="测试" οnclick="showTime()">
    	剩余时间：<h1 id="show"></h1>
    	<script>				
    		let time=3;
    		let residue=time*60*60;
    		function showTime(){			
    			let hour=parseInt(residue/60/60);
    			let minute=parseInt((residue-(hour*60*60))/60);
    			let second=residue%60;
    			residue--;			
    			if(residue<=0){
    				clearTimeout(exe);
    			}
    			document.getElementById("show").innerHTML=hour+"小时  "+minute+"分钟  "+second+"秒";			
    			let exe=setTimeout("showTime()",100);
    		}
    	</script>

###### 示例5：鼠标事件，让图片移动到鼠标点击的位置（扩展） ######

**注意要让图片绝对定位**

鼠标可视区域坐标：

e.clientX , e.clientY

图片在父容器的位置：

img.offsetLeft , img。offsetTop

let mx,my,imgx,imgy,duty;
      function startmove(e){
           clearInterval(duty);
           mx=e.clientX;//获得鼠标点击的坐标位置
           my=e.clientY;
           duty=setInterval("move()",5);
           show();//启动吃鸡动画
      }
    
      let i=0;
        function show(){
            let img=document.getElementById("img");
            img.src="imgs/eat/eat_"+(i++)+".jpg";
            if(i>39) {
                i=0;
                clearTimeout(exe);
            }
            let exe=setTimeout("show()",80);//指定的时间之后只执行一次函数
        }
    
      function move(){
        let img=document.getElementById("img");
        imgx=img.offsetLeft;//获得图片在父容器中的坐标位置
        imgy=img.offsetTop;
        if(imgx<mx){imgx++}
        if(imgx>mx){imgx--}
        if(imgy<my){imgy++}
        if(imgy>my){imgy--}
        img.style.left=imgx+"px";
        img.style.top=imgy+"px";
        if(mx==imgx&&my==imgy){
            clearInterval(duty);//当二者坐标重合后停止移动任务
        }
      }
      document.οnclick=startmove;
      </script>
     
      <img id="img" src="imgs/eat/eat_1.jpg" width="200px" style="position:absolute;left:200px;top:150px">

#### 总结： ####

window的属性：

window的函数：

作业：控制文本框只能输入数字、小数点、并能删除内容；使用setTimeout或setInterval实现动画。（15分钟）

### 第七章：数组对象及其应用 ###

##### 内容回顾 #####

event.srcElement是什么

confirm()的返回值是什么？

每隔一定时间重复执行某个任务的函数是？

##### 本章内容 #####

数组的概念

一维数组的定义和遍历

一维数组的应用

#### 第一节：创建和使用数组 ####

##### 一、 什么是数组 #####

数组是用于储存多个相同类型数据的集合。

##### 二、 为什么要使用数组 #####

在许多场合，使用数组可以缩短和简化程序，因为可以利用索引值设计一个循环，高效处理多种情况

例如：一次Java内部测试结束后，老师给令狐冲分配了一项任务，计算全班（60人）的平均分，这样就需要有60个成绩变量，声明和使用起来太麻烦，使用数组就简单的多。

生活案例：快递柜

![Image 1][]

类比储物柜：我们可以把数据集体存放

数组是一个变量，存储一组数据

![Image 1][]

##### 创建数组： #####

Array是JavaScript的内置对象，创建数组有以下几种方式：

var   array=new Array(); //创建一个空数组
    var   array=new Array(3);//创建有3个空间的数组
    var   array=new Array(10,30,25);//创建已经放置了三个数的数组
    var   array=['令狐冲',23,new Date()];//用直接赋值的方式创建数组

访问数组元素

array[0]=9;
    array[1]=3;
    array.push("王重阳");
    document.write(array[2]);

遍历数组：

数组的重要属性：length

示例1：循环输出数组中每一个元素

let array=[1,2,3,4,5,6,7,8,9];
    for(let i=0;i<array.length;i++){
    	document.write(array[i]+" ");
    }

示例2：求一组学生成绩的平均成绩

let scores=[85,89,65,69,90,88,52,78,66,100,87,55,98,99,88];
    let sum=0;
    for(let i=0;i<scores.length;i++){
    	sum+=scores[i];
    }
    alert("这组学生的平均成绩是："+sum/scores.length);

示例3：求一组成绩中的最大值

打擂台的思路，让数组中的第一个元素先上到擂台上，用之后的每一个元素跟擂台上的元素进行比较，如果比擂台上的元素大，就将后来的元素放到擂台上。

<input type="button" value="测试" οnclick="showMax()"><br>
    	最高成绩：<input type="text" id="max">
    	<script>
    		function showMax(){
    			let scores=[56,77,98,77,88,56,84];
    			let max=scores[0];//将第一个值放到擂台上
    			for(let i=1;i<scores.length;i++){
    				if(scores[i]>max){//将每一个后面的元素和擂主比较
    					max=scores[i];
    				}
    			}
    			document.getElementById("max").value=max;
    		}
    	</script>

课堂练习：继续求该组成绩的最低成绩和平均成绩

示例4：将上述示例改为成绩是由6个文本框输入的成绩

成绩1：<input type="text" name="score"><br>
    	成绩2：<input type="text" name="score"><br>
    	成绩3：<input type="text" name="score"><br>
    	成绩4：<input type="text" name="score"><br>
    	成绩5：<input type="text" name="score"><br>
    	成绩6：<input type="text" name="score"><br>
    	<input type="button" value="打擂台" οnclick="showMax()"><br>
    	最高成绩：<input type="text" id="max">
    	<script>
    		function showMax(){ //计算成绩最大值
    			var inputScores=document.getElementsByName("score");
    			let scores=[];
    			for(let i=0;i<inputScores.length;i++){
    				scores.push(Number(inputScores[i].value));
    			}//先将文本框中的成绩转入到一个成绩数组中
    			var max=scores[0];//将第一个值放到擂台上
    			for(var i=1;i<scores.length;i++){
    				if(max<scores[i]){//将每一个后面的元素和擂主比较
    					max=scores[i];
    				}
    			}			
    			document.getElementById("max").value=max;
    			//将最后结果赋值给文本框
    		};
    	</script>

第二种：

#### 第二节：查找、插入、删除数组 ####

##### 1、数组查找 #####

示例5：查找学生张无忌的成绩在成绩数组的位置

<input type="button" value="查成绩" οnclick="showIndex()"><br>
    <script>
    	function showIndex(){ //计算成绩最大值
    		var arr=[68,75,60,95,55];
    	      var i,index=-1,score; //此处将index标注一个数组中不可能的位置(<0)
    	      var score=prompt("请输入查询的成绩：","");
    	      score=Number(score);      
    	      for(i=0;i<arr.length;i++)  {  /*查找该数需要放的位置*/
    			if(score == arr[i])  {    	 
    				index=i;//跳出循环时i的值就是该成绩的位置
    				break;		
    			}
    	       }
    	       if(index >= 0) {
    		   alert("查找到成绩: "+score+"在数组中的位置为第"+(i+1)+"个元素。");
    	       }else  {
    		   alert("很遗憾没有查询到你要找的成绩。");
    	       }
    	};
    </script>

抽取方法：

示例6：删除数组中指定的元素—令狐冲被逐出师门，将他的成绩删除

思路：找到要删除的元素的位置，然后将后面的元素依次前移：arr\[i\]=arr\[i+1\],直到数组的最后一个元素，最后将数组的length减一。

<input type="button" value="数组删除" οnclick="delete()"><br>
    
    <script>
    	    function indexOf(arr,sc){
            let index=-1;
            for(i=0;i<arr.length;i++){
                if(arr[i]==sc){
                    index=i;
                    break;
                }
            }
            return index;
        }
        function delete(){
            let scores=[88,67,89,90,94,76,65];
            let sc=Number(prompt("请输入要删除的成绩：","0"));
            let index=indexOf(scores,sc);
            if(index==-1){
                alert("没有找到要删除的成绩");
            }else{
                for(let i=index;i<scores.length-1;i++){
                    scores[i]=scores[i+1];
                }
                scores.pop();
                console.log("scores.length=",scores.length);
            }
            console.log(scores);
        }
    </script>

示例7：在从小到大的顺序有序排列的数组中插入新元素，要求插入新元素后仍保持从小到大的顺序

思路：从小到大的顺序中找到第一个比插入元素大的元素的位置index，然后从数组的最后一个元素开始依次后移，直到将index处的元素后移腾出index的位置，将新插入的元素放到数组的index位置

<input type="button" value="数组插入" οnclick="arrayInsert()"><br>
    
    <script>
    	      function indexOf(arr,sc){
                let index=-1;
                for(i=0;i<arr.length;i++){
                    if(arr[i]>sc){//稍微修改判断条件
                        index=i;
                        break;
                    }
                }
                return index;
            }
    
            function arrayInsert(){
                let scores=[33,44,55,66,77,88,99];
                let sc=Number(prompt("请输入要插入的成绩","0"));
                let index=indexOf(scores,sc);
                if(index==-1) index=scores.length;//如果没有找到比插入成绩更大的成绩，就定位到数组最后
                for(let i=scores.length-1;i>=index;i--){
                    scores[i+1]=scores[i];
                }
                scores[index]=sc;
                console.log(scores);
            }		
    	};
    </script>

#### 第三节：数组的常用函数 ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>join(‘-’)</td> 
   <td>将数组转换为使用符号连接的字符串</td> 
  </tr> 
  <tr> 
   <td>concat(arr1,arr2)</td> 
   <td>与另一个数组合并为一个新数组</td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td>将数组反转</td> 
  </tr> 
  <tr> 
   <td>sort(function(){排序规则})</td> 
   <td>对数组进行排序</td> 
  </tr> 
  <tr> 
   <td>push(ele1,ele2)</td> 
   <td>向数组末尾添加新元素</td> 
  </tr> 
  <tr> 
   <td>unshift(ele1,ele2)</td> 
   <td>向数组的开头添加新元素</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>删除数组中末尾的值 返回删除的值</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td>删除数组中开头的值 返回删除的值 与pop()相反</td> 
  </tr> 
  <tr> 
   <td>splice(1,2,3,4)</td> 
   <td>删除、替换、插入数组元素</td> 
  </tr> 
  <tr> 
   <td>indexOf(ele)</td> 
   <td>查找元素的下标位置</td> 
  </tr> 
 </tbody> 
</table>

示例8：sort()函数

var arr=new Array(1,2,3,4,5,59,6);
    arr.sort();
    console.log(arr);//输出 [1, 2, 3, 4, 5, 6,59] 
    //写比较规则函数
    arr.sort(function(a,b){return a-b}); //升序
    console.log(arr);//输出 [1, 2, 3, 4, 5, 6, 59]
    arr.sort(function(a,b){return b-a});//降序
    console.log(arr);//输出[59, 6, 5, 4, 3, 2, 1]

示例9：splice()函数

//删除
    var arr=new Array('a','b','c','d','e');
    var arr2=arr.splice(1,2);//删除开始下标为1的值"b"开始的2个值 （b和c） 返回删除的值
    console.log(arr,arr2);//输出 [a, d, e] [b, c]
    //插入
    var arr=new Array('a','b','c','d','e');
    var arr2=arr.splice(1,0,'f','g');//在下标为1的值"b"之前插入值 ，参数第二个为0不删除，插入f,g
    console.log(arr,arr2);// [ "a", "f", "g", "b", "c", "d", "e" ] [] arr2返回为空数组 因为不删除
    //替换
    var arr=new Array('a','b','c','d','e');
    var arr2=arr.splice(1,2,'f','g');//在下标为1的值（b）之前替换值 ，参数第二个为2删除2个值，再插入f,g
    console.log(arr,arr2);//[ "a", "f", "g", "d", "e" ] [ "b", "c" ]   //也就是 先删除再添加

##### 总结： #####

怎样创建数组？

怎样在有序数组中插入排序的数字？

怎样删除数组中指定的数据？

splice函数的用法

#### 作业： ####

自定义函数完成数组的插入和删除（15分钟）

### 第八章：DOM编程 ###

##### 回顾： #####

怎样在有序数组中插入排序的数字？

怎样删除数组中指定的数据？

##### 本章目标 #####

理解文档对象模型

熟练掌握document对象访问页面元素

熟练掌握动态添加页面元素

#### 第一节：什么是DOM ####

文档对象模型（Document Object Model，简称DOM），是[W3C][]组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

![Image 1][]

#### 第二节：document的常用属性和函数 ####

document对象代表浏览器窗口中加载的整个HTML文档

常用属性：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bgColor</td> 
   <td>页面的背景颜色</td> 
  </tr> 
  <tr> 
   <td>documentElement</td> 
   <td>获取对文档根结点的引用</td> 
  </tr> 
  <tr> 
   <td>body</td> 
   <td>文档主体的开始和结束。</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>设置或获取页面的标题</td> 
  </tr> 
 </tbody> 
</table>

常用函数

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>getElementById()</strong></td> 
   <td>返回带有指定 ID 的元素。</td> 
  </tr> 
  <tr> 
   <td><strong>getElementsByTagName()</strong></td> 
   <td>返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。</td> 
  </tr> 
  <tr> 
   <td><strong>getElementsByClassName()</strong></td> 
   <td>返回包含带有指定类名的所有元素的节点列表。</td> 
  </tr> 
  <tr> 
   <td><strong>querySelector(selector)</strong></td> 
   <td>获得该选择器的第一个元素</td> 
  </tr> 
  <tr> 
   <td><strong>querySelectorAll(selector)</strong></td> 
   <td>获得该选择器的所有元素，返回一个NodeList对象</td> 
  </tr> 
  <tr> 
   <td><strong>appendChild()</strong></td> 
   <td>把新的子节点添加到指定节点。</td> 
  </tr> 
  <tr> 
   <td><strong>remove()</strong></td> 
   <td>删除自己这个节点</td> 
  </tr> 
  <tr> 
   <td>removeChild()</td> 
   <td>删除子节点。</td> 
  </tr> 
  <tr> 
   <td>replaceChild()</td> 
   <td>替换子节点。</td> 
  </tr> 
  <tr> 
   <td><strong>insertBefore()</strong></td> 
   <td>在指定的子节点前面插入新的子节点。</td> 
  </tr> 
  <tr> 
   <td>createAttribute()</td> 
   <td>创建属性节点。</td> 
  </tr> 
  <tr> 
   <td><strong>createElement()</strong></td> 
   <td>创建元素节点。</td> 
  </tr> 
  <tr> 
   <td>createTextNode()</td> 
   <td>创建文本节点。</td> 
  </tr> 
  <tr> 
   <td>getAttribute()</td> 
   <td>返回指定的属性值。</td> 
  </tr> 
  <tr> 
   <td><strong>setAttribute()</strong></td> 
   <td>把指定属性设置或修改为指定的值。</td> 
  </tr> 
  <tr> 
   <td>getElementsByName()</td> 
   <td>通过元素的name属性获得一组元素</td> 
  </tr> 
 </tbody> 
</table>

##### 示例1：实现论坛添加留言效果 #####

![Image 1][]

样式：
    <style>
    	#content div{
          
    		background:url(images/1.jpg) 0px 0px/40px 40px no-repeat #ccffcc;
    		border:2px solid #cccc66;
    		margin:5px;
    		line-height:40px;
    		padding-left:80px;
    	}
    	#content{
          width:500px;border:2px solid #abcdef;padding:15px;}
    </style>

代码：

<div id="content">
    </div>
    <textarea id="msg" rows="5" cols="80"></textarea><br>
    <input type="button" value="发表" οnclick="addMsg()"><br>
    <script>
    	function addMsg(){
    		let msg=document.getElementById("msg").value;
    		let div=document.createElement("div");//创建div元素
    		div.innerHTML=msg;//将msg添加到div的内容中
    		let cont=document.getElementById("content");
    		cont.appendChild(div);//给#contentdiv添加生成好的div
    		//cont.insertBefore(div,cont.firstElementChild);//添加到子元素的最前面
    		document.getElementById("msg").value="";			
    	}
    </script>

#### 第二节：DOM节点信息 ####

XML DOM 把 XML DOM 文档视为一棵节点树 (node-tree)，树中的所有节点彼此之间都有关系

常用节点属性：

<table> 
 <thead> 
  <tr> 
   <th>节点属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>childNodes</td> 
   <td>获取当前节点的所有子节点（包括元素节点和文本节点）</td> 
  </tr> 
  <tr> 
   <td><strong>children</strong></td> 
   <td>获取当前节点的所有元素子节点（不包含文本节点）</td> 
  </tr> 
  <tr> 
   <td><strong>parentNode</strong></td> 
   <td>获取当前节点的父节点</td> 
  </tr> 
  <tr> 
   <td>firstChild</td> 
   <td>获取第一个子节点，包括回车等文本节点</td> 
  </tr> 
  <tr> 
   <td><strong>firstElementChild</strong></td> 
   <td>获取第一个元素节点。 不含文本节点</td> 
  </tr> 
  <tr> 
   <td>lastChild</td> 
   <td>获取最后一个子节点，包括回车等文本节点</td> 
  </tr> 
  <tr> 
   <td><strong>lastElementChild</strong></td> 
   <td>获取最后一个子节点，不含文本节点</td> 
  </tr> 
  <tr> 
   <td>previousSibling</td> 
   <td>获取当前节点的前一个兄弟节点，包括文本节点</td> 
  </tr> 
  <tr> 
   <td>previousElementSibling</td> 
   <td>获取当前节点的前一个元素兄弟节点</td> 
  </tr> 
  <tr> 
   <td>nextSibling</td> 
   <td>获取当前节点的后一个兄弟节点，包括文本节点</td> 
  </tr> 
  <tr> 
   <td>nextElementSibling</td> 
   <td>获取当前节点的后一个元素兄弟节点</td> 
  </tr> 
  <tr> 
   <td>attributes</td> 
   <td>获取当前节点的所有属性节点。 返回数组格式</td> 
  </tr> 
 </tbody> 
</table>

##### 示例2：点击展开菜单 #####

页面元素

JS代码：

##### 示例3：级联选择 #####

![image-20200715094619518][Image 1]

页面元素：

<input type="checkbox" id="all" onclick="selectAll(this.checked)">选择
      <hr>
      <input type="checkbox" class="sub" onclick="checkSub()">键盘<br>
      <input type="checkbox" class="sub" onclick="checkSub()">鼠标<br>
      <input type="checkbox" class="sub" onclick="checkSub()">耳机<br>
      <input type="checkbox" class="sub" onclick="checkSub()">投影仪

全选-全不选效果

function selectAll(bool){
            let subs=document.getElementsByClassName("sub");
            for(let i in subs){
                subs[i].checked=bool;
            }
        }

选择子项-父项级联

只要子项有一个选中则父项就要选中，子项都不选，父项也取消选中

这种方式需要在每一个子选项上都加上onclick属性，显得有些麻烦，也可以通过循环给每一个子项在代码中注册onclick事件。

自动注册事件

示例4：添加删除购物车

页面元素

js代码：

第一步：先将复选框、商品名称、商品价格放入表格：

function addShop(){
            let name=document.getElementById("name").value;
            let price=document.getElementById("price").value;
            let tr=document.createElement("tr");       
            tr.innerHTML="<td><input type='checkbox' class='sub' name='checkOne'></td><td>"+name+"</td><td>"+price+"</td>";        
            document.getElementById("tb").appendChild(tr);
      }

再给表格添加一列，给每行添加一个删除按钮，的点击按钮时删除所在的一行

批量删除：document.querySelectorAll(“\#tb :checked”)，选择所有被选中的复选框

##### 总结： #####

###### 获得所有的子元素 ######

###### 创建新元素 ######

###### 删除指定元素 ######

###### 添加元素 ######

#### 作业： ####

菜单点击展开，级联勾选，添加和删除购物车（20分钟）

### 第九章：JavaScript事件机制 ###

##### 事件的注册 #####

###### 方式一：在标签中添加 ######

<button  οnclick="fn()">按钮</button>
    <script>
        function fn(){
        
        	console.log("这是按钮执行的事件");
        	console.log(event.target.innerHTML);//target为事件的目标对象；innerHTML为元素标签中间的内容部分
    	}
    </script>

注意：这里的event是浏览器内置的事件对象，可以直接拿来使用

###### 方式二：通过DOM元素添加 ######

<button>按钮</button>
    <script>
    	var btn=document.querySelector("button");
        btn.οnclick=function (e){
          
            console.log("这是通过DOM元素添加的事件！");
            console.log(e.srcElement.innerHTML);
        }
    </script>

在这种 注册方式中函数参数e是浏览器（火狐、Google 等）在事件发生时传入的，可以直接使用。

如果用此方法给一个元素添加了多个相同的事件函数，则只执行最后一个事件函数。移除这种方式的事件可以用removeAttribute方式移除，也可以用setAttribute方式将onclick设置为空。

###### 方式三：使用addEventListener方法 ######

<button>按钮</button>
    <script>
    	var btn=document.querySelector("button");
        btn.addEventListener("click",function(e){
             
            console.log("我是通过addEventListener方法添加的事件");
            console.log(e.target.innerHTML);
        });
        btn.addEventListener("click",function(e){
          
    		alert("这是第二个click事件函数");
    	});
    </script>

注意：addEventListener参数说明：

第一个参数：表示事件名称，用字符串形式；

第二个参数：表示事件对应的执行函数，可以是一个函数名，也可以是一个匿名函数。

addEventListener可以绑定多个不同的函数，如果要移除这种方式的事件，则需要使用removeEventListener方法移除绑定的事件函数，而且移除的监听函数参数必须和添加监听函数时的参数完全一致，否则无效；移除多个需要一个一个的移除。移除时一定要注意两个参数的使用，尤其是第二个参数是函数名，一定和要删除的函数名一致，

<button>按钮</button>
    <script>
    	var btn=document.querySelector("button");
        btn.addEventListener("click",test);
    	function test(e){
            console.log("我是通过addEventListener方法添加的事件");
            console.log(e.srcElement.innerHTML);
    	}
        btn.addEventListener("click",function(e){
    		alert("这是第二个click事件函数"+event.srcElement.innerHTML);
    	});
    	btn.removeEventListener("click",test);
    	btn.removeEventListener("click",function(e){
    		alert("这是第二个click事件函数"+event.srcElement.innerHTML);
    	});//这种删除方式是不能奏效的，应为传入的函数虽然在形式上和上一个一致，但是他们根本不是一个函数对象。
    </script>

如果使用方式二和方式三同时添加事件，那么这个事件将被重复执行，执行顺序是就近原则。

使用addEventListener方式可以添加多个事件，而方式一和方式二只能添加一次事件，方式二如果添加两次，则后面的将覆盖前面的。

\#\#\#第二节： 事件的传播

当一个事件发生以后，它会在不同的DOM节点之间传播，这种传播会使得一个事件在多个节点上触发。

##### 1.事件传播的三个阶段 #####

![image-20200628104115647][Image 1]

第一阶段：从window对象传导到目标节点，称为“捕获阶段”。

第二阶段：在目标节点上触发，称为“目标阶段”。

第三阶段；从目标节点传导回window，称为“冒泡阶段”。

说明：事件传导的最顶层是window，接着是document>html>body。

##### 2.我们绑定的事件函数，默认会在冒泡阶段触发。 #####

<div>
    	<button>按钮</button>  
      </div>
    	<script>
    		document.addEventListener("click",function(){
    			alert("点击了document ");
    		});		
    		var div=document.querySelector("div");
    		div.addEventListener("click",function(){
    			alert("点击了div层 ");
    		});
    		var btn=document.querySelector("button");
    		btn.addEventListener("click",function(){
    			alert("点击了按钮 ");
    		});
    	</script>

当点击按钮时，会发现先弹出的时按钮、其次是div、最后是document；说明了事件是在冒泡阶段触发的。

##### 3.addEventListener方法的第三个参数 #####

它的第三个参数表示监听函数在捕获阶段触发还是在冒泡阶段触发，用一个布尔值表示，false表示在冒泡阶段触发，true表示在捕获阶段触发。如果在冒泡阶段和捕获阶段都进行事件的监听，每个祖先级节点都会触发两次，先绑定谁就先执行谁。

<div>
    	<button>按钮</button>  
      </div>
    	<script>
    		document.addEventListener("click",function(){
    			alert("点击了document ");
    		},true);		
    		var div=document.querySelector("div");
    		div.addEventListener("click",function(){
    			alert("点击了div层 ");
    		},true);
    		var btn=document.querySelector("button");
    		btn.addEventListener("click",function(){
    			alert("点击了按钮 ");
    		},true);
    	</script>

如果添加了第三个参数，并设置为true，则当点击按钮时可以看到第一个弹出的是document，其次是div、最后是button

#### 第三节：事件对象 ####

##### 1.什么是事件对象？ #####

当用户进行了某个行为，而这个行为被绑定成函数事件时，那么这个函数事件内部会发生一个对象（event），这个对象包含了这个被触发的事件的所有相关信息，然后这个对象就被称为事件对象。

获取事件对象：一般一个函数事件的第一个形参就是此函数的事件对象，也可以通过event获取。

##### 2.通过事件对象实现一些常见功能 #####

###### ①通过事件对象阻止冒泡行为-------------------> event.stopPropagation(); ######

e.cancelBubble=true;也能够阻止事件冒泡，是IE的用法。加上e.stopPropagation()就可以看到，div和document的事件都被屏蔽掉了。

###### ②通过事件对象阻止事件的默认行为 -------------------> event.preventDefault(); ######

<a href="https://www.baidu.com/">百度</a>
    var aBtn=document.querySelector("a");aBtn.οnclick=function (){  event.preventDefault();}//此时点击上面的a标签将不会跳转到百度页面。

<div>请点右键</div>
      <script>
    	var div=document.querySelector("div");
    	div.οncοntextmenu=function(e){
    		e.preventDefault();
    		this.innerHTML="禁止了系统的右键菜单";
    	}

###### ③通过事件对象获取当前坐标 ######

<table> 
 <thead> 
  <tr> 
   <th>event.clientX</th> 
   <th>所点击位置到可视区域的横轴距离</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>event.clientY</td> 
   <td>所点击位置到可视区域的纵轴距离</td> 
  </tr> 
  <tr> 
   <td>event.screenX</td> 
   <td>所点击位置到显示屏的横轴距离</td> 
  </tr> 
  <tr> 
   <td>event.screenY</td> 
   <td>所点击位置到显示屏的纵轴距离</td> 
  </tr> 
  <tr> 
   <td>event.offsetX</td> 
   <td>所点击位置到所点击元素左上角的横轴距离</td> 
  </tr> 
  <tr> 
   <td>event.offsetY</td> 
   <td>所点击位置到所点击元素左上角的纵轴距离</td> 
  </tr> 
 </tbody> 
</table>

<img src="imgs/map.jpg" width="100%">
       <script>
    		function insertFlag(e){			
    			let flag=document.createElement("img");
    			document.body.append(flag);
    			flag.src="imgs/flag.png";
    			flag.width="40";
    			flag.style.position="absolute";
    			flag.style.left=e.clientX+"px";//获得事件发生的X坐标位置
    			flag.style.top=e.clientY+"px";//获得事件发生的Y坐标位置
    		}
    		document.οnmοusedοwn=insertFlag;
       </script>

上面示例 是插小旗效果 ，背景是世界地图，要把五星红旗插到想去的国家。效果如下：

![Image 1][]

#### 第四节：常见的事件类型 ####

##### **1、鼠标事件** #####

**鼠标左键单击事件 click**

鼠标左键双击事件 dblclick

鼠标右击事件 contextmenu

鼠标移入事件：mouseover

鼠标移出事件：mouseout

鼠标移入事件： mouseenter

鼠标移出事件： mouseleave

mouseout事件会冒泡，mouseleave事件不会。

鼠标按下事件 mousedown

鼠标释放事件 mouseup

当我们点击一个按钮时，触发顺序为：

mousedown首先触发，mouseup接着触发，click最后触发。

鼠标持续移动事件mousemove

##### **3、表单事件** #####

表单事件表示的是当HTML的标签内的元素被操作后发生的事件，在HTML中常见的表单标签有（不同的“type”属性支持的事件可能会有区别）、、、等，这些元素在内容在被操作或值发生改变时都会触发事件。

表单元素主要有以下事件：

**input事件**

input事件当、的值发生变化时触发。此外，将contenteditable属性设置为“true”的非表单元素，只要值发生变化，也会触发input事件。input事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。

**Change事件**

Change事件当（单选框和复选框）、、（需要失去焦点时触发）的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。

**select事件**

select事件当在、中选中文本时触发。

**reset事件**

reset事件只能发生在表单元素上，当表单重置（所有表单成员变回默认值）时触发。

**submit事件**

submit事件只能发生在表单元素上，当表单数据向服务器提交时触发。注意，submit事件的发生对象是，而不是，因为提交的是表单，而不是按钮。

##### \****4、文档事件\**** #####

文档事件就是DOM元素在特定的操作下一种事件，有的时候并非需要人为的操作，如页面加载时就会触发加载事件，页面将关掉时会触发卸载事件。又如，元素在获得焦点时会触发获得焦点事件，失去焦点又会触发失去焦点事件等。

**load事件和error事件**

load事件在页面加载成功时触发，

error事件在页面加载失败时触发。

1.  页面从浏览器缓存加载，并不会触发load事件。
2.  这两个事件实际上属于进度事件，不仅发生在document对象，还发生在各种外部资源上面。
3.  浏览网页就是一个加载各种资源的过程，图像、样式表、脚本、视频、音频、Ajax请求等等。
4.  这些资源和document对象、window对象、XMLHttpRequestUpload对象，都会触发load事件和error事件。

**unload事件**

unload事件在窗口关闭或者document对象将要卸载时触发，发生在window、body、frameset等对象上面。

它的触发顺序排在beforeunload、pagehide事件后面。

unload事件只在页面没有被浏览器缓存时才会触发，换言之，如果通过按下“前进/后退”导致页面卸载，并不会触发unload事件。

#### 第五节：拖拽事件 ####

##### 定义和用法 #####

###### 在拖放的过程中会触发以下事件： ######

在拖动目标上触发事件(源元素)：

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

###### 释放目标时触发的事件: ######

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

要完成拖动，必须牵扯到两个不想关的元素，这样就需要确定谁是被拖动元素，谁是拖放的目标元素，还必须让被拖动元素能够拖动。

###### 第一步：给被拖动元素设置允许拖动的属性draggable=true ######

其实 img 和 a 元素默认是可以被拖拽的，只不过默认的是在新的浏览器页面打开，所以这里不写draggable=“true”也是可以的。

###### 第二步：设置 拖动的数据 ######

当拖动 元素时，目标元素并不知道要拖动的是谁，有什么信息传递，所以就需要有一个传递信息的方法，这就是ev.dataTransfer.setData();在这里主要是用来传递被拖动元素的id。并标明传递的数据名称叫“imgid”，以便在目标元素接受是使用该名称接受传递的数据。

<img id="toy1" src="imgs/小熊.png" width="300px" ondragstart="dragbegin(event)">
    	<script>
    		function dragbegin(ev){
          
    			ev.dataTransfer.setData("imgid",ev.target.id);
    		}
    	</script>

###### 第三步：当被拖拽对象放到目标对象上的时候ondragover ######

要在目标元素上设置允许拖拽到自己范围内，默认是不允许的,所以只需要阻止默认行为 即可。

<div id="div1"  ondragover="allowdrag(ev)"></div>
    ......
    function allowdrag(ev){	ev.preventDefault();	}

###### 第四步：当释放鼠标放下被拖拽的元素ondrop时的处理 ######

当释放鼠标时，需要讲被拖拽的元素放到目标元素内，这样就需要将被拖拽对象的id获得到，并添加到目标元素内。

<h3>把小熊放到盒子里 </h3>
    	<div id="div1"  ondragover="allowdrag(event)" ondrop="drop(event)"></div>
    	<img id="toy1" src="imgs/小熊.png" width="300px" ondragstart="dragbegin(event)">
    
    	<script>
    		function dragbegin(ev){
          
    			ev.dataTransfer.setData("imgid",ev.target.id);
    		}
    
    		function allowdrag(ev){
          
    			ev.preventDefault();
    		}
    
    		function drop(ev){
          
    			ev.preventDefault();
    			let id=ev.dataTransfer.getData("imgid");
    			ev.target.appendChild(document.getElementById(id));
    		}
    
    	</script>

这里的ev.preventDefault();是阻止浏览器在 新的页面打开被拖拽的元素，若火狐浏览器还不能被阻止默认行为，可以尝试使用ev.stopPropagation()方法。

###### 练习：将玩具放到储物柜的格子里 ######

![Image 1][]

如果需要添加从储物格中拿出的功能，则可以再给document.body添加ondeagover和ondrop事件

### 第十章：字符串与表单验证 ###

##### 本章内容 #####

*  字符串常用函数
 *  表单提交及验证方式
 *  正则表达式

#### 第一节：string ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>charAt</td> 
   <td>返回字符串对象中指定索引处的字符，索引从0开始</td> 
  </tr> 
  <tr> 
   <td>indexOf</td> 
   <td>返回某个子字符串在目标字符串中的首次出现位置，若找不到则返回-1.</td> 
  </tr> 
  <tr> 
   <td>substr</td> 
   <td>从指定索引位置开始截取指定长度的字符串</td> 
  </tr> 
  <tr> 
   <td>substring</td> 
   <td>返回指定索引范围内的字符串</td> 
  </tr> 
  <tr> 
   <td>toLowerCase</td> 
   <td>返回一个字符串，该字符串中的字母被转换为小写字母。</td> 
  </tr> 
  <tr> 
   <td>replace</td> 
   <td>使用指定的字符串替代目标字符串中指定的字符串。</td> 
  </tr> 
  <tr> 
   <td>split</td> 
   <td>返回按照指定分隔符拆分的若干子字符串数组</td> 
  </tr> 
 </tbody> 
</table>

示例：提取地名信息

中国的名山有：黄山、庐山、雁荡山、泰山、华山、五台山、峨眉山、昆仑山、天山

对于上面的这句文本信息，从中提取出山名并放到数组中

let str="中国的名山有：黄山、庐山、雁荡山、泰山、华山、五台山、峨眉山、昆仑山、天山";
    let index=str.indexOf('：');
    let mount=str.substr(index+1);
    
    let arr=mount.split("、");
    
    //let arr=str.substr(str.indexOf("：")+1).split("、");//可以使用这种链式编程方式
    console.log(arr);

使用string进行表单验证

//let str="0123456789";
    	//alert(str.substring(2,4));//[3,6)
    	//alert(str.indexOf('q'));
    	//alert(str.contains("g"));
    	//alert(str.length);
    	function checkUser(){
    		let user=document.getElementById("username").value;
    		if(user.length>=6&&user.length<=8){
    			alert("用户名正常");
    		}else{
    			alert("用户名长度必须在6~8之间");
    		}      
        }
      </script>
    	<input id="username">
    	<input type="button" value="检测" οnclick="checkUser()">

###### 表单验证的基本原理1： ######

检测函数返回true或false，form表单的submit事件根据检测函数的返回结果决定是否执行

###### 表单验证的基本原理2： ######

通过表单元素的submit()函数进行提交

###### 表单验证中多个验证同时进行： ######

#### 第二节：正则表达式 ####

RegExp是JavaScript中提供的一种用来完成有关正则表达式操作和功能的对象

##### 两种创建方式： #####

let reg=new RegExp(“表达式”,“附加参数”);

let reg=/表达式/附加参数;

##### 附加参数： #####

g(global):全局匹配。

i(ignoreCase):不区分大小写。

m(multiline):多行匹配。

示例：调用函数test()，测试某个字符串中是否包含指定的正则表达式

<input type="text" id="email">
    <input type="button" value="检测" οnclick="checkEmail()"/>
    
    <script>
    	function checkEmail(){
    		let email=document.getElementById("email").value;
    		let reg=/yellow/;
    		if(reg.test(email)){
    			alert("符合正则表达式的要求");
    		}else{
    			alert("格式错误");
    		}
    	}
    </script>

##### 正则表达式的规则1： #####

使用(.)来匹配任意字符：

var myReg = /r.n/;

he ran home、see dick run、I don’t know what r^n means 、hair net.

如果不想匹配任意字符，只想匹配小写字母：

var myReg = /r\[a-z\]n/;

如果想匹配(.)字符本身，需要用反斜杠“\\”对其进行转义：

var myReg = /a.com/;

##### 正则表达式的规则2： #####

匹配两个任意字符： var myReg = /r…n/;

“ \* ” 匹配“零或多个前面的项目”

“ + ” 匹配“一个或多个前面的项目”

“ ？” 匹配“零或一个前面的项目”

##### 规则3：开始和结尾： #####

^ 标记“开始”，$标记“结尾”，|标记“或者”。

/^20\[0-9\]\{2\}$/ 匹配年份2000后：

/^((19)|(20)\[0-9\]\{2\})$/ 匹配年份1900或2000后；

/^(0\[1-9\]|1\[0-2\])$/ 匹配月份；

/^(0?\[1-9\]|\[1-2\]\[0-9\]|3\[0,1\])$/ 匹配日期

###### 其他规则： ######

[...]   位于括号之内的任意字符
    [^...]  不在括号之中的任意字符
      .     除了换行符之外的任意字符,等价于[^\n]
    \w    	任何单字字符, 等价于[a-zA-Z0-9]
    \W    	任何非单字字符,等价于[^a-zA-Z0-9]
    \s      任何空白符,等价于[\ t \ n \ r \ f \ v]
    \S      任何非空白符,等价于[^\ t \ n \ r \ f \ v]
    \d      任何数字,等价于[0-9]
    \D      除了数字之外的任何字符,等价于[^0-9]
    i       执行大小写不敏感的匹配

##### 常用的表达式： #####

手机号码:/^(13)|(15)\[0-9\]\{9\} /

手机号前带86或是+86的情况: /^((+86)|(86))?(13)\\d\{9\}/

电话号码与手机号码同时验证: /(^(\\d\{3,4\}-)?\\d\{7,8\})|(13\[0-9\]\{9\})/

邮件地址: `/^\w+([\-_\.]?\w*)*@\w+(\.\w+){1,3}$/i`

日期：/^(19|20\\d\{2\})-(0?\[1-9\]|1\[0-2\])-(0?\[1-9\]|(\[1-2\]\\d)|(3\[01\]))$/

#### 作业： ####

完成，用户名长度在6-8之间，密码必须是字母和数字混合，邮箱格式的验证，验证正确方可提交（10分钟）

### 第十一章：异常与JSON数据处理 ###

##### 本章内容 #####

*  JavaScript异常
 *  JavaScript对象
 *  JavaScript处理JSON数据

#### 第一节：异常处理 ####

##### 1、什么是异常 #####

异常是程序运行中出现的非正常情况，往往程序会因异常而中断，为了增强程序的稳定性和健壮性，需要对可能出现的异常进行处理。

\#\#\#\#2、处理异常的语法解构

try{
    	//逻辑代码
    }catch(e){
    	//异常处理
    }finally{
    	//最终代码
    }

示例：

查找一个元素，如果该元素不存在，就给出提示。

<button id="btn" οnclick="tryfun()">挺容易</button>
    <script type="text/javascript">
       function tryfun(){
          let user=document.getElementById("username");
          alert(user.value);			
          document.write("程序执行完毕");
       }
    </script>

很显然，调用user.value时出错，提示：**TypeError: Cannot read property ‘value’ of null**

![image-20200628112209102][Image 1]

为了不再让程序因为异常而中断，可以给程序加上try-catch处理块

这样处理后，虽然4行出异常了，但程序对异常进行了处理，并不影响后面的代码运行。

finally块：在程序运行中，如果有无论程序是否出错都要保证运行的代码，可以放到这个处理块中

#### 第二节：JavaScript中的对象 ####

##### 1、内置对象 #####

主要有 Object、Function、Array、String、Date、RegExp、Math、document等。

##### 2、使用Object创建对象 #####

使用new关键字调用构造函数创建对象

var 对象名=new 构造函数()

对象被定义为无序属性的集合，属性可以是任何类型的值，包括其他对象或函数。函数作为属性值时称为“方法”，即对象的行为。

对象属性和方法是通过“.”运算符访问的

示例：

var student = new Object();
    student.name = "令狐冲";//对象属性赋值
    student.age = 19;
    student.sex = "男";
    student.show = function() {
    	alert("我是" + this.name + "," + this.sex + ",年龄：" + this.age);
    	//注意这里的name之前必须使用this来限定，否则name就是另外一个单独声明的变量，和Student无关
    };
    
    student.show();//对象方法调用

##### 3、使用函数创建 #####

示例：

##### 4、使用class创建 #####

class Student{
       constructor(name,age){
          this.age=age;
          this.name=name;
       }
    
       sayHello(){
       	console.log(this.name+"--->"+this.age);
       }
    }
    
    let stu=new Student("郭靖",23);
    stu.sayHello();

##### 5、访问对象属性 #####

1）通过访问连接符“.”

alert(student.name);

2）通过中括号+属性名

student["name"]

3）遍历对象属性

var student=new Object();
    student.name="令狐冲";
    student.age=19;
    student.sex="男";
    
    document.write(“student.name=”+student[“name”]);
    for(let pro in student){
    	console.log(pro+”-----”+student[pro]);
    }

测试结果：

![image-20200628120748632][Image 1]

##### 6、数组下标访问 #####

JavaScript数组在实质上是继承了Object，也可以用字符串作为下标

var arr = new Array();
    arr["first"] = "令狐冲";
    arr["second"] = "东方不败";
    arr["third"] = "任我行";
    console.log("arr.name = "+arr.first);
    for (var pro in arr) {
    	console.log(pro + " -- -- - " +arr[pro]);
    }

执行结果：

![image-20200628140457535][Image 1]

#### 第三节：JSON数据 ####

##### 一、JSON是什么？ #####

JSON即JavaScript Object Notation，是JavaScript对象原生的一种表示形式。它是一种轻量级的、纯文本的，用来存储、传递和交换文本信息

##### 二、JSON的优势： #####

*  同XML或HTML相比，JSON 更简单灵活
 *  JSON是基于纯文本的数据格式，体积小，便于在网络上传入和解析
 *  JSON是JavaScript原生格式，在JavaScript中处理JSON数据不需要任何特殊的 API 或工具包

##### 三、定义JSON对象 #####

定义JSON对象是使用大括号\{\}来定义的，里面包含属性和方法（函数）两种元素，元素和元素之间用逗号“，”间隔。

###### 1、定义单个对象 ######

var student = {
       name: "洪七公",
       age: 56,
       address: "河南省郑州市",
       sayHello: function() {
       	alert("大家好,我是" + this.name+",家住："+this.address+",今年"+this.age);
       }
    };
    student.sayHello();

###### 2、定义对象数组 ######

测试结果：

![image-20200628142743426][Image 1]

##### 四、解析JSON字符串： #####

JSON 最常见的用法，是Web服务器把从数据库中读取出来的数据转换成JSON格式的字符串，然后输出到客户端，客户端需要把JSON格式的字符串转换为JavaScript对象，然后在网页中才能使用这些数据。

使用浏览器内置对象JSON.parse()来解析json字符串。

###### 解析单个对象： ######

这里需要注意在解析json字符串的时候，只有第一种格式能正确解析，2，3两行的格式都不能正确解析，这里要特别注意。

###### 解析复合对象 ######

测试结果：

![image-20200628144913747][Image 1]

##### 五、将对象转换成JSON字符串 #####

在向服务器传递参数时，有的需要将对象转换为字符串，需要使用JSON.stringify()方法

var student = new Object();
    student.name = "令狐冲";
    student.age = 19;
    student.sex = "男";
    var myjson = JSON.stringify(student);
    console.log(typeof myjson);
    console.log(myjson);

测试结果：

![image-20200628145356082][Image 1]

#### 总结： ####

#### 作业： ####

将一个对象数组类型的JSON字符串解析成对象数组，并加入到表格中（10分钟）

属性

测试结果：

![image-20200628120748632][Image 1]

##### 6、数组下标访问 #####

JavaScript数组在实质上是继承了Object，也可以用字符串作为下标

执行结果：

![image-20200628140457535][Image 1]