JavaScript课程

两日大纲

● JavaScript基本语法

● JavaScript函数

● JavaScript基于对象编程

● JavaScript BOM对象编程

● JavaScript DOM对象编程

● JavaScript JSON格式简介

*************************************************************************************************

1. JavaScript简介

1.1 JavaScript是什么

JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言，正日益受到全球的关注。因它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，而因倍受Web设计者的所爱。

1.2 JavaScript的作用

作用：

1、对html中的标签实现动态的控制。

2、验证表单中的内容。

Javaweb 第2天 JavaScript课程

1.3 JavaScript与Java区别

JS是Netscape公司的产品，前身是LiveScript;

Java是Sun公司的产品，现在是Oracle公司的产品。

JS只需解释就可以执行不需要编译。由浏览器去解释。

Java需要先编译成字节码文件，再执行。

JS 是弱类型。

Java 是强类型。

int a = 10;

表示a只能存储int类型的数据。

JavaScript和java是两种不同的语言。但是有相似的地方。比较学习。

1.4 JavaScript特点

1、脚本编写语言（解释型语言都叫脚本语言）

2、基于对象的语言（面向对象的概念混淆不清，类、对象、方法（函数）、属性全部很模糊）

3、简单性（方法的调用）

4、安全性（每种语言都会说自己很安全）

5、动态性（处处都是反射，代码中控制代码）

6、跨平台性（在浏览器上运行）

*************************************************************************************************

2. JavaScript快速入门

2.1 编写第一个JavaScript程序

通常在<head></head>中书写：

//这里写js代码

alert("HelloWorld");

</script>

注意：

1、JavaScript 代码必需写在 <script type="text/javascript"> </script> 标签内部。

2、此标签可以编写在html页面代码中的任何地方。html代码是由上至下，顺序执行。

3、通常我们会将此标签写在<head></head>，做到html代码和js代码相分离。

*************************************************************************************************

2.2 外部JS文件引用编写方式

1、新建js文件，文件的扩展名是.js

Javaweb 第2天 JavaScript课程

2、在js文件中编写

//切记：直接写js代码，不要写<script>标签

alert("HelloWorld--这是外部的js文件中的js程序");

3、在html页面上引入该文件

在<head></head>中写入：

注意：

a、在html文档中，通过script标签的src属性引入外部的js文件。

b、外部引入功能的<script>标签中，不可以写JS代码。

c、如果要写JS代码，另外重新写一对<script>标签，然后在里面写。

引入JS文件和JS执行并存的代码：

alert("HelloWorld--可以和js文件中方法并存");

alert("haha");

</script>

*************************************************************************************************

3. JavaScript基本语法

3.1 数据类型与变量

3.1.1 回顾java的数据类型：

整数：int short long

小数：float double

字符：char

布尔：boolean

字节：byte

字符串：String

3.1.2 JavaScript的数据类型

数值（整数和实数）不区分整数和小数。

字符串型（用""号或''括起来的字符或数值）包含了字符串和字符。

布尔型（使True或False表示）

空值 null 表示值为空

3.1.3 回顾java定义变量

数据类型变量名；

数据类型变量名 = 初始值；

3.1.4 JavaScript定义变量

var 变量名=初始值；

var 变量名；

js中定义的变量，在没有赋值之前，这些空间中是没有数据类型的。

一旦赋值以后，js通过值来主动帮我们判断该变量应该是什么类型。

通过typeof可以知道js变量的类型。

代码：

//定义变量

var a = 10;

var b = 20.5;

var c = "abc";

//判断变量是什么类型

alert(typeof(a));

alert(typeof(b));

alert(typeof(c));

</script>

、建议大家一定要使用var 关键字去定义一个变量。

、建议大家定义一个变量，最好就存放一种数据类型数据。

*************************************************************************************************

3.2 运算符

3.2.1 算数运算符

JavaScript中的算术运算符有单目运算符和双目运算符。

双目运算符：

+（加）、-（减）、
*（乘）、
/（除）、
%（取模）

单目运算符：

）、）。

注意：

1、基本的算术运算和java一样。

2、整数除不尽，会自动转成小数，反正在js中都是number。

3、字符串在加上一个整数的时候会进行拼接，最终转成一个字符串。

4、如果字符串用于其它运算（非加法）的话，返回NaN（not a number）。

代码：

//1、基本的算术运算和java一样。

var a = 6;

var b = 20;

var c = a+b;

//alert(c);

//2、整数除不尽，会自动转成小数，反正在js中都是number。

var d = b/a;

//alert(d);

//3、字符串在加上一个整数的时候会进行拼接，最终转成一个字符串。

var e = "abc";

var f = e + a + b;

//alert(f);

//4、如果字符串用于其它运算（非加法）的话，返回NaN（not a number）。

var g = e - a;

alert(g);

</script>

*************************************************************************************************

3.2.2 赋值运算符

java赋值运算符号： = ,+= -= *= /= %=

js 赋值运算符：= ,+=
-=
*=
/=
%=

举例：

a += b ; 等价于 a = a+b;

a -= b ; 等价于 a = a-b;

a *= b ; 等价于 a = a*b;

a /= b ; 等价于 a = a/b;

a %= b ; 等价于 a = a%b;

整数除不尽，会自动转成小数，反正在js中都是number。

如果保留N位小数

语法：

变量名.toFixed(N)

代码：

//整数除不尽，会自动转成小数，反正在js中都是number。

var a = 20;

var b = 6;

a/=b;//a = a/b;

//如果保留N位小数

a=a.toFixed(2);

alert(a);

</script>

*************************************************************************************************

3.2.3 关系运算符

比较运算符它的基本操作过程是，首先对它的操作数进行比较，然后再返回一个true或False值。

js有８个比较运算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。

注意：

1、== 只判断里面的值是否相同

2、=== （表示全等：要求数值相同的同时，类型也要相同）

代码：

//1、== 只判断里面的值是否相同

var a = "100";

var b = 100;

//alert(a==b);

//2、=== （表示全等：要求数值相同的同时，类型也要相同）

alert(a===b);

</script>

*************************************************************************************************

3.2.4 逻辑运算符

&&（与）、 ||（或）、！（非）

与Java一样，会出现逻辑短路（当左边的表达配合逻辑运算符已经能够确定出来结果，右边的表达式为了节省效率就不执行了）

注意：

返回结果与java（要求两边是逻辑值）有不同。

&&
：当左边真，返回右侧表达式的值。

当左边假，返回左侧表达式的值，右侧不执行（短路）

|| ：当左边真，返回表达式左边的值，右侧不执行（短路）

当左边假，返回表达式右侧的值。

切记：

非空非错就是真, 0、null、""、''、undefined NaN 都是假

所以js逻辑运算符不再返回true false这样的布尔值，而是具体值

代码：

//&& 当左边真，返回右侧表达式的值。

//alert(true&&100);

//&&当左边假，返回左侧表达式的值，右侧不执行（短路）

//alert(false&&true);

//alert(0&&true);

var a = 10;

alert(null&&++a);//逻辑短路，前面的值能够确定与运算的结果，右边就不运算了

alert(a);

</script>

*************************************************************************************************

3.2.5 位运算符

JavaScript中的位运算符：

& 与：二进制比较，两个都是1返回1，否则是0；
| 或：二进制比较：一个是1返回1，否则是0；
^ 异或：两个都相同返回0，否则1；
~ 取反： 1取0，0取1；
>> 右移：高位补符号位" 这里右移一位表示除2
<< 左移：左移一位表示乘2，二位就表示4，就是2的n次方
>>> 无符号右移,高位补0"；与>>类似

注：用的不多，通常都是有java处理完然后返回给页面

1、如下：

a=5;

b=4;

计算a | b

把a，b转换成二进制

a 0101

b 0100

----------

0101 = 5

代码：

//计算a | b

var a = 5;

var b = 4;

//位或运算

var c = a|b;// 101

// 100

// 101

alert(c);

</script>

、面试题：最高效率的计算 2*2*2*2

代码：

//2、面试题：最高效率的计算 2*2*2*2

alert(2<<3);

</script>

*************************************************************************************************

3.2.6 三元运算符

JavaScript中的三元运算符：表达式1 ？表达式2 :
表达式3；

如果表达式1是真，返回表达式2的结果。

如果表达式1是假：返回表达式3的结果。

表达式1的结果可以不是布尔型，、null、""、''、undefined NaN 都是假

需求：求ab中最大的数

代码：

//需求：求ab中最大的数

var a = 10;

var b = 20;

var c = a>b?a:b;

//alert(c);

var d = a?a:b;

alert(d);

</script>

注意：表达式1的结果可以不是布尔型

*************************************************************************************************

3.3 条件分支语句

3.3.1 if和else

if(判断条件)｛条件成立的时候执行的代码｝

if(判断条件)｛条件成立的时候执行的代码｝else{执行的代码}

if(判断条件)｛条件成立的时候执行的代码｝else if{执行的代码} ......

、null、""、''、undefined NaN 都是假。

需求: 判断一个数，是奇数还是偶数。

代码：

//需求: 判断一个数，是奇数还是偶数。

if(a%2)

{

alert('奇数');

}

else

{

alert('偶数');

}

</script>

*************************************************************************************************

3.3.2 switch和case

js中的switch

switch（表达式）｛

case 常量：

语句;

break;

case 常量：

语句;

break;

case 常量：

语句;

break;

default:

语句;

｝

Javaweb 第2天 JavaScript课程

提示：可以先对分数进行取整parseInt，然后在作为switch判断的条件

代码：

//划分学生成绩

var score = 45;

//取整后的成绩

var scoreInt = parseInt(score / 10);

//alert(scoreInt);

switch (scoreInt) {

case 10:

case 9:

alert("a");

break;

case 8:

alert("b");

break;

case 7:

alert("c");

break;

case 6:

alert("d");

break;

default:

alert("e");

break;

}

</script>

*************************************************************************************************

3.4 循环语句

3.4.1 while

while(循环条件){

循环体；

｝

需求：计算1~10的和

代码：

//需求：计算1~10的和

var sum = 0;

var num = 1;

while(true)

{

sum = sum + num;

num++;

if(num>10)

{

break;

}

alert(sum);

</script>

*************************************************************************************************

3.4.2 do while

循环体会首先执行一次，然后再判断。

do｛

循环体

｝while（循环条件）

需求：计算1~10的和

代码：

//需求：计算1~10的和

var sum = 0;

var num = 1;

{

sum = sum +num;

num++;

}while(num<=10);

alert(sum);

</script>

*************************************************************************************************

3.4.3 for

；表达式2；表达式3）｛

循环体；

｝

表达式1：循环变量的初始---可以省略；

：循环条件---一定不能省略，否则.....

表达式3：循环变量的迭代；

while do while for 循环条件可以不是布尔类型。

0 null undefined......表示 false

其他表示true

需求：统计1~100 之间 5，6的公倍数（同时可以被5整除并且可以被6整除）

代码：

//需求：统计1~100 之间 5，6的公倍数（同时可以被5整除并且可以被6整除）

for ( var i = 1; i <= 100; i++) {

if(i%5==0&&i%6==0)

{

//alert(i);

//使用浏览器控制台打印数据

console.log(i);

}

</script>

按f12 调出浏览器控制台

console.log(int);
//在浏览器控制台进行打印

*************************************************************************************************

3.4.4 break continue

break；表示结束该循环。

continue; 表示结束本次循环，继续循环下一次。

需求：浏览器控制台打印1~10 ，遇到5时不打印

代码：

//需求：浏览器控制台打印1~10 ，遇到5时不打印

for ( var i = 1; i <=10; i++) {

if(5==i)

{

continue;

}

console.log(i);

}

</script>

*************************************************************************************************

3.4.5 循环嵌套

for(){ --A

for() B

}

一个循环内的循环体可以包含其他循环；

循环的执行顺序：

先外层循环执行一次。内层循环（整体循环一次）。在外层在执行一次在执行内层循环。

需求：嵌套循环：99乘法表

代码：

//需求：嵌套循环：99乘法表

for ( var i = 1; i < 10; i++) {

//利用字符串达到换行的效果

var s = "";

for ( var j = 1; j <= i; j++) {

s = s + " "+ (j+"*"+i+"="+i*j);

}

console.log(s);

}

</script>

需求：在页面上显示出来 99乘法表

document.write("字符串"); //在页面上显示指定字符串

代码：

//需求：在页面上显示出来 99乘法表

for ( var i = 1; i < 10; i++) {

for ( var j = 1; j <= i; j++) {

//页面上打印

document.writeln(j + "*" + i + "=" + i * j);

document.writeln(" ");

}

//页面上打印换行标签---页面上能够换行

document.writeln("<br/>");

}

</script>

*************************************************************************************************

3.5 数组

回顾java中数组的定义方式：

数据类型[] 变量名 = new 数据类型[长度]；

数据类型[] 变量名 = {初始值};

int[] arr = new int[5];

3.5.1 js数组第一种定义方式

var
数组名 = [初始值，初始值，初始值];

在js中中括号表示一个数组。多个初始值之间使用逗号分割。

注意：

1、通过角标可以得到数组中，某个位置的值。

2、通过数组的length属性得到数组的长度。(可以通过该属性遍历数组)

3、数组不固定类型。可以存放任何类型的数据。

4、数组的长度是可变的。

需求：

1、使用[]方式定义数组

2、改变数组中的某个元素

3、遍历该数组，并在页面上显示

代码：

//1、使用[]方式定义数组

var arr = [10,20.5,"abc"];

//2、改变数组中的某个元素

arr[1] = "maoyun";

//3、遍历该数组，并在页面上显示

for ( var i = 0; i < arr.length; i++) {

document.write(arr[i]+" ");

}

</script>

*************************************************************************************************

3.5.2 js数组第二种定义方式

var
数组名 = new Array（长度）；

var
数组名 = new Array（初始值）；

Array 表示的是一个数组对象。

注意：

、如果Array（），不接受参数，表示定义一个长度为0的数组。

、如果Array只接受一个参数，并且这个参数是整数，那么表示定义一个长度为这个参数的数组。

、如果只接受一个参数，并且是数值类型的非整数，此时报错。

、如果接受一个参数，并且这个参数是非数值类型的，那么这个参数是数组的初始值。

、如果接受多个参数，那么这些参数就是数组的初始值。

代码：

//var 数组名 = new Array（长度）；

//var arr = new Array(5);

//var 数组名 = new Array（初始值）；

//var arr2 = new Array("abc");

//var arr3 = new Array(5,6);

var arr = new Array(10,20.5,"abc");

for ( var i = 0; i < arr.length; i++) {

document.write(arr[i]+" ");

}

</script>

*************************************************************************************************

3.5.3 数组中的函数介绍

Javaweb 第2天 JavaScript课程

需求：定义一个数组，演示数组名.join("连接符") 这个方法，并显示在页面上

代码：

//需求：定义一个数组，演示数组名.join("连接符") 这个方法，并显示在页面上

var arr = new Array(10,50.5,"abc");

//通过"<br/>"将数组中的元素都连接起来并返回給一个字符串

var s = arr.join("<br/>");

document.write(s);

</script>

*************************************************************************************************

4. JavaScript 函数

回顾Java中函数的定义：

修饰符返回类型方法名（数据类型变量名，多个）｛

方法体；

｝

4.1 定义方式

4.1.1 JS函数的第一种定义方式

function 函数名（参数列表）｛

函数体;

｝

函数的细节：

1、函数必须在调用之后才会执行,参数列表不需要类型。

2、如果函数有返回值，在函数体中直接使用return 返回的数据即可，JS中的函数没有返回值类型这个限制。

3、如果函数要接收参数，这时直接写变量名，不能有var关键字。

4、在JS中函数没有重载的概念，如果在js中出现了多个同名的函数后面会把前面的函数覆盖掉，即使参数不一样。

5、在JS中如果函数需要接受参数，但是没有传递，这时变量全部是undefined

6、JS中函数不管接不接收参数，我们调用的时候，都可以给其传递参数。

7、在JS中的函数中有一个内置的数组（arguments）参数接收传递的所有数据，使用arguments，这个参数其实它本身是一个数组对象。

注意：后期如果使用JS中的函数，需要接受参数，就在函数上定义变量，如果不需要就不定义，很少使用arguments数组操作。

需求：

1、求两个数的和

2、求三个数的和，使用（arguments）参数，注意同名函数会被覆盖。

代码：

//1、求两个数的和

function sum(a,b)

{

return a+b;

}

//alert(sum(3,5));

//2、求三个数的和，使用（arguments）参数，注意同名函数会被覆盖。

function sum1()

{

var total = 0;

//（arguments）参数接收传递的所有数据是一个数组

for ( var i = 0; i < arguments.length; i++) {

total = total +arguments[i];

}

return total;

}

alert(sum1(5,6,7));

</script>

*************************************************************************************************

4.1.2 JS函数的第二种定义方式（了解）

写法：var 函数名 = new Function("参数列表","函数体");

第一个参数代表参数列表

第二个参数代表函数体。

参数列表和函数体都是字符串的方式去定义的。

//函数列表和参数体都是字符串的方式去定义的。

var sum = new Function("a,b","return a+b;");

document.write(sum(3,5));

</script>

书写函数过于复杂，可读性不高，所以开发很少使用。

*************************************************************************************************

4.1.3 JS函数的第三种定义方式

写法：var 函数名 = function（参数列表）｛

函数体；

｝;

需求：求两个数的和

代码：

//写法：var 函数名 = function（参数列表）{函数体}

//需求：求两个数的和

var sum = function(a,b)

{

return a+b;

};

alert(sum(7,8));

</script>

*************************************************************************************************

4.2 调用方式

4.2.1 普通调用

通过直接书写函数名称，传递相应参数进行调用。

4.2.2 超链接调用函数

语法：

需求：使用超链接调用函数，求两个数的和

<head>中的代码

function sum(a,b)

{

alert(a+b);

}

</script>

body中的代码：

*************************************************************************************************

4.2.3 事件属性调用函数

所有可见的HTML标签都会相应的事件属性，比如鼠标单击事件，双击事件，聚焦，失焦事件......等。

事件属性名字都是以on开头，

Javaweb 第2天 JavaScript课程

HTML 4.0 事件

事件	当...时发生
onabort	用户终止页面加载。
onblur	用户离开对象。（失去焦点）
onchange	用户改变对象的值。
onclick	用户点击对象。
ondblclick	用户双击对象。
onfocus	用户激活对象。（获得焦点）
onkeydown	按下键盘。
onkeypress	按压键盘。
onkeyup	松开键盘。
onload	页面完成加载。注释：在 Netscape 中，当页面加载时会发生该事件。
onmousedown	用户按鼠标按钮。
onmousemove	鼠标指针在对象上移动。
onmouseover	鼠标指针移动到对象上。
onmouseout	鼠标指针移出对象。
onmouseup	用户释放鼠标按钮。
onreset	用户重置表单。
onselect	用户选取页面上的内容。
onsubmit	用户提交表单。
onunload	用户关闭页面。

语法：

<标签名事件属性名="函数名（参数）；" />

需求：分别使用超链接和按钮的onclick事件调用求两个数之和的函数。

head中代码：

function sum(a, b) {

alert(a + b);

}

</script>

body中的代码：

*************************************************************************************************

4.3 全局函数

Javaweb 第2天 JavaScript课程

常用的全局函数：

Number()、parseInt()、parseFloat()

将数字字符串转换为数字

如果转换失败，则返回"NaN"

代码：

//将数字字符串转换为数字

var a = "100";

var b = Number(a);

alert(b+1);

isNaN()

判断是否不是数字

不是数字：永远不能成为数字。

判断是否不是数字（此方法会将可能成为数字的字符串也算数字）

代码：

//判断是否不是数字

//判断是否不是数字（此方法会将可能成为数字的字符串也算数字）

alert(isNaN("90"));

alert(isNaN("abc"));

eval(字符串)

把字符串当作JavaScript代码来执行，并返回结果

eval("alert(2+3);")

代码：

//eval(字符串)

//把字符串当作JavaScript代码来执行，并返回结果

eval("alert(2+3);");

*************************************************************************************************

5. JavaScript 基于对象编程

5.1 全局对象

Javaweb 第2天 JavaScript课程

5.1.1 String 对象

String 对象

String 对象用于处理文本（字符串）。

创建 String 对象的语法：

new String(s);

String(s);

参数

参数
s
是要存储在 String 对象中或转换成原始字符串的值。

String 对象常用属性

属性	描述
length	字符串的长度

String 对象常用方法

方法	描述
charAt()	返回在指定位置的字符。
concat()	连接字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
indexOf()	检索字符串。
lastIndexOf()	从后向前搜索字符串。
localeCompare()	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
split()	把字符串分割为字符串数组。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。

需求：通过js代码String 对象的常用方法让字符串（abc）分别，变红、变大、变大又变红。

代码：

var s = "abc";

//alert(s.length);//得出字符串的长度

//需求：通过js代码String 对象的常用方法让字符串（abc）分别，变红、变大、变大又变红。

document.write(s.fontcolor("red")); //变红

document.write(s.fontsize(7));//变大

document.write(s.fontsize(7).fontcolor("red"));//变大又变红

</script>

*************************************************************************************************

5.1.2 Date对象

Date 对象

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象常用方法

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
parse()	年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
valueOf()	返回 Date 对象的原始值。

需求：

1、定义日期对象，返回的是当前日期（国际格式）

2、根据本地时间格式，把 Date 对象转换为字符串

3、根据本地时间格式，把 Date 对象的时间部分转换为字符串

4、根据本地时间格式，把 Date 对象的日期部分转换为字符串

代码：

//1、定义日期对象，返回的是当前日期（国际格式）

var myDate = new Date();

document.write(myDate);

document.write("<br/>");

//2、根据本地时间格式，把 Date 对象转换为字符串

document.write(myDate.toLocaleString());

document.write("<br/>");

//3、根据本地时间格式，把 Date 对象的时间部分转换为字符串

document.write(myDate.toLocaleTimeString());

document.write("<br/>");

//4、根据本地时间格式，把 Date 对象的日期部分转换为字符串

document.write(myDate.toLocaleDateString());

document.write("<br/>");

</script>

*************************************************************************************************

5.1.3 Math对象

Math 对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

注意：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。你无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。

Math对象及方法和Java中的基本一致

需求：输出2到7之间的随机数(包括2和7)

代码：

//需求：输出2到7之间的随机数(包括2和7)

for ( var i = 0; i < 100; i++) {

var num = Math.random();

document.write(parseInt(num*(7-2+1))+2);

}

</script>

*************************************************************************************************

5.1.4 RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

正则表达式的书写规则和Java也一致

. 当前可以是任意字符

? 表示零次或一次

* 表示零次或多次

+ 表示一次或多次

() 对某个存在的正则进行分组组的使用 \组号 $组号

{} 当前的规则可以出现的次数

{m} 正好 m次 {m,} 最少m次 {m,n} 最少m次最多n

[] 当前位置上可以是中括号中某个字符

[abc] [^abc]

\\d 当前位置上可以数字

\\w 当前位置上可以是字母数字下划线

\b 单词边界

^ 行开始

$ 行结尾

需求：验证表单中文本框里面用户输入的手机号码是否正确

常用的手机的正则表达式：^1[34578]\\d{9}$

head中的代码：

//需求：验证表单中文本框里面用户输入的手机号码是否正确

function checkTel() {

//获得文本框中的值

var tel = document.getElementById("tel");//根据id获得页面上文本框对象

var vTel = tel.value;//获得文本框中的值

//alert(vTel);

//验证手机号码格式

var reg = new RegExp("^1[34578]\\d{9}$");

if (reg.test(vTel)) {

alert("格式正确");

} else {

alert("格式不正确");

}

</script>

body中的代码：

<input
id="tel"
type="text"
/>
<input
onclick="checkTel();"

type="button"
value="验证手机号码格式"
/>

</form>

*************************************************************************************************

5.2 自定义类和对象（了解）

5.2.1 通过函数方式创建类

在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数。

任何创建js函数的方式其实都是在创建自定义类。

简单的类：

只有属性，外部赋值

//简单的类，建议使用第三种函数定义方式来定义它，来区别函数的定义

var Person=function()

{

var username;

var age;

}

var p = new Person();

p.username = "haha";

alert(p.username);

</script>

复杂的类：

带构造参数，带方法的类

//带构造参数，带方法的类

var Person=function(username,age)

{

//属性定义可以省略不写

var username;

var age;

//因为该类本身就是构造函数，所以直接再这里将参数的值放入"成员变量"中。

this.username = username;

this.age = age;

//函数定义格式，this.方法名=function(){}

this.setUsername=function(username)

{

this.username = username;

}

this.getUsername=function()

{

return this.username;

}

var p1 = new Person("大乔",20);

alert(p1.getUsername());

var p2 = new Person();

p2.setUsername("小乔");

alert(p2.getUsername());

</script>

*************************************************************************************************

5.2.2 直接定义初始完毕的对象

格式：

在js中，｛｝表示一个对象。

var对象名={

属性名1：属性值,属性名2：属性值,......

函数名1:function(形参......){函数体1},

函数名2:function(形参......){函数体2},......

}

属性的写法：

属性：值

多个属性需要使用逗号分开，

对象中的函数的定义方式：函数名：function(){函数体}

多个函数需要使用逗号分割，

并且函数和属性也需要使用逗号分开。

最后一个函数或者属性，不需要书写逗号

注意：对象在使用的时候，不需要new，直接赋值给其他变量，或者直接使用

//定义对象

var person = {

username:"张三丰",

age:100,

fight:function(){

alert(this.username+"用太极拳打你");

}

};

//不要new对象，直接调用属性和方法

person.username="张三丰二代";

person.fight();

</script>

*************************************************************************************************

5.2.3 直接定义未初始化的对象

var对象名=new Object();

对象名.属性名1=属性值1;

对象名.函数名1=function(形参......){函数体1};

//定义对象

var person = new Object();

person.username = "张三丰";

person.age = 100;

person.fight=function(){

alert(this.age+"岁的"+this.username+"用太极拳打你");

}

//不要new对象，直接调用属性和方法

person.username="张三丰二代";

person.fight();

</script>

*************************************************************************************************

5.2.4 原型模式扩展方法

可以为全局对象添加新的方法。

对象.prototype.方法名=function(参数){

语句;

}

prototype属性：返回对象类型原型的引用。

给String全局对象添加新的方法：

//给所有String添加了一个名为mao的方法

String.prototype.mao=function()

{

alert(this+"mao");

}

var a = "abc";

a.mao();

</script>

常用的String自定义扩展方法：

个

String.prototype.ChineseLength = function() {

return this.replace(/[^x00-xff]/g, "**").length;

}

// 判断字符串是否以指定的字符串结束

String.prototype.EndsWith = function(str) {

return this.substr(this.length - str.length) == str;

}

// 去掉字符左端的的空白字符

String.prototype.LeftTrim = function() {

return this.replace(/(^[s]*)/g, "");

}

// 去掉字符右端的空白字符

String.prototype.RightTrim = function() {

return this.replace(/([s]*$)/g, "");

}

// 判断字符串是否以指定的字符串开始

String.prototype.StartsWith = function(str) {

return this.substr(0, str.length) == str;

}

// 去掉字符两端的空白字符

String.prototype.Trim = function() {

return this.replace(/(^s*)|(s*$)/g, "");

}

</script>

*************************************************************************************************

6. BOM对象编程

BOM : browser object model 浏览器对象模型

js为了js可以和浏览器进行一定的交互的能力，而去设计一个bom的模型，就是一些对象。

BOM对象都是关于浏览器的本身，而非浏览器里面页面上的元素内容。

利用BOM对象，我们可以使用js去操作浏览器的某些功能。

Javaweb 第2天 JavaScript课程

6.1 Window对象

6.1.1 Window对象介绍

所有浏览器都支持
window 对象。它表示浏览器窗口。

window是js中的顶层对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM的
document 也是 window 对象的属性之一：

window.document.write("HelloWorld");

注意：window 对象使用的时候可以省略不写。与此相同：

document.write("HelloWorld");

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

*************************************************************************************************

6.1.2 打开关闭窗口

close()	关闭浏览器窗口。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。

head中的代码：

//关闭窗口

function closeWindow()

{

window.close();

}

//打开窗口

function openWindow()

{

window.open("6.1.2.打开关闭窗口.html");

}

</script>

body中的代码：

注意：不是window.open所打开的窗口，不能关闭

*************************************************************************************************

6.1.3 对话框

alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。

head中代码：

function myConfirm()

{

//显示带有一段消息以及确认按钮和取消按钮的对话框。返回布尔值表示用户的选择

var b = window.confirm("确定要删除吗？");

alert(b);

}

function myPrompt()

{

//显示可提示用户输入的对话框。(标题，默认文字),返回用户输入的内容

var s = window.prompt("请输入内容","我很温柔");

alert(s);

}

</script>

body中的代码：

*************************************************************************************************

6.1.4 计时器

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

需求：在页面上显示当前时间，并由开始、停止按钮来控制时间的显示。

head中的代码：

//需求：在页面上显示当前时间，并由开始、停止按钮来控制时间的显示。

//页面加载后执行

window.onload = function(){

show();

}

//显示时间

function show()

{

//根据id获得div对象

var divTime = document.getElementById("divTime");

//修改div里面的内容为当前时间

divTime.innerHTML = new Date();

}

var timeFun;

//开始显示时间

function start()

{

//反复调用函数show，间隔时间1000毫秒

timeFun = window.setInterval(show,1000);

}

//停止显示时间

function stop()

{

//停止反复调用，参数为反复调用函数的引用（返回值）

window.clearInterval(timeFun);

}

</script>

body中的代码：

当前时间：<div
id="divTime"></div>

*************************************************************************************************

6.2 History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

History 对象方法

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

下面一行代码执行的操作与单击两次后退按钮执行的操作一样：

history.go(-2) - go里面参数为负数，表示后退几次，正数表示前进几次

1.html：

<body>

</body>

2.html：

<body>

</body>

*************************************************************************************************

6.3 Location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

function _go(){

//跳转到该页面

location.href='a.html';

//location='a.html'; //简写

}

</script>

<body>

</body>

*************************************************************************************************

7. DOM对象编程

DOM对象：Document Object Model 文档对象模型

HTML DOM 树

Javaweb 第2天 JavaScript课程

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

7.1 document对象

Document 对象常用方法

方法	描述
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

需求：

1、根据id查找指定id的div元素，并显示div里面的内容。

2、根据标签名查找所有div元素，并显示div里面的内容。

3、根据name查找文本框元素，并显示文本框里面的值。

head中的代码：

//点击按钮开始执行

var myClick = function() {

//1、根据id查找指定id的div元素，并显示div里面的内容。

//获得div的dom对象

var div1 = document.getElementById("div1");

//innerHTML表示元素里面的内容

//alert(div1.innerHTML);

//2、根据标签名查找所有div元素，并显示div里面的内容。

var divs = document.getElementsByTagName("div");

//遍历div集合

for ( var i = 0; i < divs.length; i++) {

//alert(divs[i].innerHTML);

}

//3、根据name查找文本框元素，并显示文本框里面的值。

var txts = document.getElementsByName("username");

//从name查找返回的集合中打印出第一个文本框元素的值

alert(txts[0].value);

}

</script>

body中的代码：

注意：

显示或设置div、span等元素的里面的内容通常是innerHTML

显示或设置表单元素中的值是value

*************************************************************************************************

7.2 Element对象

7.2.1 Element对象介绍

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

在 HTML DOM 中，Element对象表示
HTML 元素。

Element对象是一个抽象的概念，代码中并不存在element这个对象，只有具体html页面上某个元素的对象。

常用属性和方法：

下面的属性和方法可用于所有 HTML 元素上：

属性 / 方法	描述
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.cloneNode()	克隆元素。
element.firstChild	返回元素的首个子元素。
element.getAttribute()	返回元素节点的指定属性值。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.setAttribute()	把指定属性设置或更改为指定值。
element.style	设置或返回元素的 style 属性。
element.value	设置或返回元素值。

*************************************************************************************************

7.2.2 元素绑定事件

1、通过HTML标签属性绑定事件

语法：

<标签名事件属性名="函数名（参数）；" />

需求：两数求和功能。

head中的代码：

//需求：两数求和功能。

function sum(a,b)

{

return a+b;

}

</script>

body中的代码：

2、通过JS代码绑定事件

语法：

对象.事件名 = function(){}

首先要获取到js中对应的对象，才可以去绑定事件。

需求：两数求和功能。

head中的代码：

//页面加载后执行

window.onload = function() {

//获得该元素的dom对象

var btn2 = document.getElementById("btn2");

//给指定元素绑定事件

btn2.onclick = function() {

alert(sum(8, 9));

}

</script>

html中的代码：

*************************************************************************************************

7.2.3 元素取值和赋值

element.innerHTML	设置或返回元素的内容。（多用于DIV，SPAN等标签）
element.value	设置或返回元素值。（多用于表单元素）

表单验证练习：

Javaweb 第2天 JavaScript课程

常用的正则表达式：

定义一个正则 6-16为英文字母和数字

^[0-9a-zA-Z]{6,16}$

电子邮件常用正则表达式：

^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$

//页面加载完成后执行

window.onload = function()

{

//验证成功标识,默认都为false

var usernameOk=false;

var passwordOk=false;

var password2Ok=false;

var emailOk=false;

//获得各个表单元素对象

var username = document.getElementById("username");

var password = document.getElementById("password");

var password2 = document.getElementById("password2");

var email = document.getElementById("email");

//用户名失去焦点时开始认证

username.onblur=function(){

//获得用户名的值

var usernameValue = username.value;

//进行验证

//定义一个正则 4-12为英文字母

var regExp = new RegExp("^[a-zA-Z]{4,12}$");

if(regExp.test(usernameValue))

{

//用户名验证成功

document.getElementById("usernameMsg").innerHTML="<font color='green'>√</font>";

usernameOk = true;

}

else

{

//用户名验证失败

document.getElementById("usernameMsg").innerHTML="<font color='red'>用户名4-12位，只能是字母</font>";

usernameOk = false;

}

};

//密码失去焦点时候认证

password.onblur=function(){

//获得密码的值

var passwordValue = password.value;

//进行验证

//定义一个正则 6-16为英文字母和数字

var regExp = new RegExp("^[0-9a-zA-Z]{6,16}$");

if(regExp.test(passwordValue))

{

//密码验证成功

document.getElementById("passwordMsg").innerHTML="<font color='green'>√</font>";

passwordOk = true;

}

else

{

//密码验证失败

document.getElementById("passwordMsg").innerHTML="<font color='red'>密码6-16位，字母或数字</font>";

passwordOk = false;

}

};

//确认密码失去焦点时候认证

password2.onblur=function()

{

//获得密码的值

var passwordValue = password.value;

//获得确认密码的值

var password2Value = password2.value;

if(passwordValue==password2Value)

{

//确认密码验证成功

document.getElementById("password2Msg").innerHTML="<font color='green'>√</font>";

password2Ok = true;

}

else

{

//确认密码验证失败

document.getElementById("password2Msg").innerHTML="<font color='red'>确认密码要和密码一样</font>";

password2Ok = false;

}

//电子邮件失去焦点时开始认证

email.onblur=function(){

//获得电子邮件的值

var emailValue = email.value;

//进行验证

//邮箱验证，网上找到的正则

var regExp = new RegExp("^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$");

if(regExp.test(emailValue))

{

//邮箱验证成功

document.getElementById("emailMsg").innerHTML="<font color='green'>√</font>";

emailOk = true;

}

else

{

//邮箱验证失败

document.getElementById("emailMsg").innerHTML="<font color='red'>标准电子邮件格式（xxx@abc.com）</font>";

emailOk = false;

}

};

//注册按钮点击事件

document.getElementById("btn").onclick=function(){

//判断全部验证是否通过

if(usernameOk&&passwordOk&&password2Ok&&emailOk){

//获得表单对象

var registerForm = document.getElementById("registerForm");

//提交表单

registerForm.submit();

}

</script>

<body>

&emsp;用户名：<input
id="username"
type="text"/>

&emsp;<span
id="usernameMsg">用户名4-12位，只能是字母</span><br />

&emsp;<span
id="passwordMsg">密码6-16位，字母或数字</span><br />

&emsp;<span
id="password2Msg">确认密码要和密码一样</span><br />

<br />电子邮件：<input
id="email"
type="text"
/>&emsp;

<span
id="emailMsg">标准电子邮件格式（xxx@abc.com）</span><br />

</form>

</body>

*************************************************************************************************

7.2.4 元素属性操作

element.getAttribute()	返回元素节点的指定属性值。
element.setAttribute()	把指定属性设置或更改为指定值。

注意：element.checked = true/false; 专门适用于单复选按钮

全选全不选练习：

Javaweb 第2天 JavaScript课程

//页面加载后执行

window.onload = function(){

//全选全不选单选按钮点击事件

//获得全选全不选按钮

var allAndAllNo = document.getElementById("allAndAllNo");

allAndAllNo.onclick=function(){

//alert(allAndAllNo.checked);//全选全不选单选按钮的值

//获得全部爱好选项

var hobbys = document.getElementsByName("hobby");

for ( var i = 0; i < hobbys.length; i++) {

//让每一个单选按钮变为全选全不选单选按钮的值

hobbys[i].checked = allAndAllNo.checked;

}

//全选按钮点击事件

document.getElementById("checkAll").onclick=function(){

//获得全部爱好选项

var hobbys = document.getElementsByName("hobby");

for ( var i = 0; i < hobbys.length; i++) {

//让每一个单选按钮变为选中

hobbys[i].checked = true;

}

//全不选按钮点击事件

document.getElementById("checkAllNo").onclick=function(){

//获得全部爱好选项

var hobbys = document.getElementsByName("hobby");

for ( var i = 0; i < hobbys.length; i++) {

//让每一个单选按钮变为选中

hobbys[i].checked = false;

}

//反选

document.getElementById("checkReversal").onclick=function(){

//获得全部爱好选项

var hobbys = document.getElementsByName("hobby");

for ( var i = 0; i < hobbys.length; i++) {

//让每一个单选按钮变为与之前的状态相反

hobbys[i].checked = !hobbys[i].checked;

}

</script>

<body>

爱好

<br />

<input
type="checkbox"
id="allAndAllNo"
/>全选/全不选

<br />

<input
type="checkbox"
name="hobby"
value="足球"
/>足球

<input
type="checkbox"
name="hobby"
value="篮球"
/>篮球

<input
type="checkbox"
name="hobby"
value="游泳"
/>游泳

<input
type="checkbox"
name="hobby"
value="唱歌"
/>唱歌

<br>

</body>

*************************************************************************************************

7.2.5 元素样式操作

element.style	设置或返回元素的 style 属性。
element.className	设置或返回元素的 class 属性。

DIV显示隐藏练习：

Javaweb 第2天 JavaScript课程

//页面加载后执行

window.onload = function(){

//获得按钮对象

var btn = document.getElementById("btn");

//给该按钮对象绑定单击事件

btn.onclick=function(){

//获得div对象

var div1 = document.getElementById("div1");

if(btn.value=="隐藏")

{

//设置div的样式为隐藏

div1.style.display="none";

//按钮的value值改为"显示"

btn.value = "显示";

}

else if(btn.value=="显示")

{

//设置div的样式为显示

div1.style.display="";

//按钮的value值改为"隐藏"

btn.value = "隐藏";

}

</script>

<body>

</body>

注意：div1.style.display="none" 或者 ""; 可以控制div是否隐藏、显示。

*************************************************************************************************

7.2.6 元素节点操作

document.createElement()

创建一个新节点。暂时存放在内存中，不显示在页面上

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.removeChild()	从元素中移除子节点。

综合练习中会使用到

*************************************************************************************************

8. JSON格式简介

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是轻量级的文本数据交换格式

JSON 独立于语言 *

JSON 具有自我描述性，更易理解

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

具体格式：

{

"employees":

[

{ "firstName":"Bill" , "lastName":"Gates" },

{ "firstName":"George" , "lastName":"Bush" },

{ "firstName":"Thomas" , "lastName":"Carter" }

]

}

{} 代表一个对象

[] 代表一个数组

对象属性定义使用key:value 格式

*************************************************************************************************

9. 综合练习

9.1 省市二级联动

Javaweb 第2天 JavaScript课程

9.1.1 准备工作

1、编写HTML代码

<body>

</select>

</select>

</body>

2、载入素材数据cities.js
文件

3、测试读取json数据

//页面加载后执行

window.onload=function(){

//测试取得cities.js中的json格式的数据

alert(china[0].p_name);

}

</script>

*************************************************************************************************

9.1.2 初始化省的数据

//页面加载后执行

window.onload=function(){

//china[0].p_name

//初始化省的数据

//获得省的select对象

var province = document.getElementById("province")

//遍历出省的信息

for ( var i = 0; i < china.length; i++) {

//创建一个option

var option =document.createElement("option"); //<option></option>

//把省的名字，添加到option中

option.innerHTML = china[i].p_name;//<option>辽宁省</option>

//把省的id标识添加到option中

option.value = china[i].p_id;//<option value="ln">辽宁省</option>

//把新创建的option标签，添加到 id=province select中

province.appendChild(option);

}

</script>

*************************************************************************************************

9.1.3 当省改变时改变市的数据

//页面加载后执行

window.onload=function(){

//china[0].p_name

//初始化省的数据

//获得省的select对象

var province = document.getElementById("province")

//获得市的select对象

var city = document.getElementById("city")

//遍历出省的信息

for ( var i = 0; i < china.length; i++) {

//创建一个option

var option =document.createElement("option"); //<option></option>

//把省的名字，添加到option中

option.innerHTML = china[i].p_name;//<option>辽宁省</option>

//把省的id标识添加到option中

option.value = china[i].p_id;//<option value="ln">辽宁省</option>

//把新创建的option标签，添加到 id=province select中

province.appendChild(option);

}

//当省发生改变时

province.onchange=function(){

//获得省的id

//alert(province.value);

//清空市的数据

city.innerHTML = "<option value='none'>--请选择市--</option>";

//遍历china得到每个省的信息

for ( var i = 0; i < china.length; i++) {

//如果省的id正好等于文件中省的id，那么开始动手

if(province.value==china[i].p_id){

//获得该省下面的市的信息

for ( var j = 0; j < china[i].cities.length; j++) {

//创建一个option

var option =document.createElement("option"); //<option></option>

//把市的名字，添加到option中

option.innerHTML = china[i].cities[j].c_name;

//把市的id标识添加到option中

option.value = china[i].cities[j].c_id;

//把新创建的option标签，添加到 id=city select中

city.appendChild(option);

}

</script>

*************************************************************************************************

10. 总结

Javaweb 第2天 JavaScript课程