第6章网页中使用 Javascript 学习目标 Javascript中的概念,如对象、事件等 ◆ JavaScript类型和变量 熟悉各种语句 掌握内置对象和函数 掌握各种事件
1 第6章 网页中使用JavaScript 学习目标 u JavaScript中的概念，如对象、事件等 u JavaScript类型和变量 u 熟悉各种语句 u 掌握内置对象和函数 u 掌握各种事件
返回总目录 第6章网页中使用 Javascript 教学内容 6.1 Javascript中的数据类型与变量 6.2 Javascript的语言结构 6 3 JavaScript中的对象 6.4 Javascript中的事件 6.5 JavaScript实例 本章小结
2 第6章 网页中使用JavaScript 教学内容 6.1 JavaScript中的数据类型与变量 6.2 JavaScript的语言结构 6.3 JavaScript中的对象 6.4 JavaScript中的事件 6.5 JavaScript实例 本章小结 返回总目录
返回目录 61 JavaScript中的数据类型与变量数据类型 Javascript主要的数据类型有:数值类型( number)、字符串型 ( String)、对象类型( object))、布尔类型( Boolean)、空类型(nul)l。 数值类型 在 JavaScript中数值类型可代表整数和浮点数。整数可以为正数、0或 者负数。浮点数通常是科学记数法,如1.6E10(E大小写均可)代表 16×1010。 2.字符串类型 字符串类型是用引号括起来的一组字符。如:“ happy birthday to you” 3.对象类型 因为 JavaScript是一种基于对象的语言,所以在 JavaScript中还有对象类 型,比如以后将会讲到的 windows对象等。 4.布尔类型 布尔类型用于逻辑运算,一个布尔类型的变量可能的取值有true和 false 5.空数据类型 空数据类型就是nu,也就是没有任何值,什么也不表示。 3
3 6.1 JavaScript中的数据类型与变量—数据类型 返回目录 J avaSc ript主要的数据类型有：数值类型（n umb e r）、字符串型 （String）、对象类型(object)、布尔类型(Boolean)、空类型(null)。 1．数值类型 在JavaScript 中数值类型可代表整数和浮点数。整数可以为正数、0 或 者负数。浮点数通常是科学记数法，如1.6E10（E大小写均可）代表 1.6×10 10。 2．字符串类型 字符串类型是用引号括起来的一组字符。如： “happy birthday to you ” 3．对象类型 因为JavaScript是一种基于对象的语言，所以在JavaScript中还有对象类 型，比如以后将会讲到的windows对象等。 4．布尔类型 布尔类型用于逻辑运算，一个布尔类型的变量可能的取值有 true 和 false。 5．空数据类型 空数据类型就是null，也就是没有任何值，什么也不表示
返回目录 6.1 JavaScript中的数据类型与变量变量 在 JavaScript中,变量用来存放脚本中的值,在需要用这个值的地方 可以用变量来代表。 JavaScript语言不像其他语言那样对数据类型要求 严格,所以不必声明每一个变量的类型。虽然变量声明不是必须的,但 在使用变量之前先进行声明是个好习惯。变量声明使用var语句进行。 如: var student= false;∥变量 student的数据类型为 Boolean类型 另外,在定义变量名时必须遵循以下规则: 1.第一个字符必须以字母(大小写均可)、或下划线、或美元符$开 始。例如md和md都是合法的变量名称。而2md和@md都是非法的 2.变量名中不能包含空格。例如 text name就是不合法的变量名。 3.变量名称不能是保留字。例如var是 Javascript'中定义变量的保留字, 在给变量起名字的时候就不能使用var 4.变量名区分大小写。 JavaScript是一种区分大小写的语言,将一个 变量命名为name和将其命名为Name是不一样的。 另外,对象名必须大写,方法名和属性名大小写均可。 JavaScript支持 ∥注释符
4 6.1 JavaScript中的数据类型与变量—变量 在 JavaScript 中，变量用来存放脚本中的值，在需要用这个值的地方 可以用变量来代表。JavaScript语言不像其他语言那样对数据类型要求 严格，所以不必声明每一个变量的类型。虽然变量声明不是必须的，但 在使用变量之前先进行声明是个好习惯。变量声明使用 var 语句进行。 如：var student= false; // 变量student 的数据类型为Boolean 类型。 另外，在定义变量名时必须遵循以下规则： 1. 第一个字符必须以字母（大小写均可）、或下划线、或美元符$开 始。例如_md和md都是合法的变量名称。而2md和@md都是非法的。 2. 变量名中不能包含空格。例如 text name就是不合法的变量名。 3. 变量名称不能是保留字。例如var是JavaScript中定义变量的保留字， 在给变量起名字的时候就不能使用var。 4. 变量名区分大小写。JavaScript 是一种区分大小写的语言，将一个 变量命名为 name 和将其命名为 Name是不一样的。 另外，对象名必须大写，方法名和属性名大小写均可。JavaScript支持 //注释符。 返回目录
返回目录 62 JavaScript的语言结构一if条件语句 if.else语句是 Javascript'中最基本的控制语句,通过它可以改变语句的 执行顺序 if条件语句的基本格式是 if(表述式) 语句段1;} 语句段2;} 功能:如果条件满足,即表达式为true,则执行语句段1,否则执行语句段 2。如果语句段1和语句段2中只有一条语句,两边的花括号可以省去,如 果有多条语句,则必须使用花括号将其括起来。If条件语句中的else部分可 以省去,如果省去,当条件满足时执行语句段1,如果不满足,就什么也不 做。if必须小写。 5
5 6.2 JavaScript的语言结构— if条件语句 if…else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的 执行顺序。 if条件语句的基本格式是： if（表述式） {语句段１；} else {语句段２；} 功能：如果条件满足，即表达式为true，则执行语句段１，否则执行语句段 ２。如果语句段1和语句段2中只有一条语句，两边的花括号可以省去，如 果有多条语句，则必须使用花括号将其括起来。If条件语句中的else部分可 以省去，如果省去，当条件满足时执行语句段1，如果不满足，就什么也不 做。if必须小写。 返回目录
返回目录 62 JavaScript的语言结构一if条件语句 if语句是可以嵌套的。格式为: 在这种情况下,若表达式1 if(表达式1) 为真,则执行语句段1,否则, 语句段1;} 若表达式2为真,则执行语句 else(表达式2) 段2。若表达式2为假,则看 {语句段2;} 表达式3是否为真,若为真, else if(表达式3) 则执行语句段3。依次下去, 语句段3;} 直到遇到条件为真,转去执 行相应的语句段。若前面的 else 条件都假,则执行最后的else 语句段n;} 语句。 6
6 6.2 JavaScript的语言结构— if条件语句 if语句是可以嵌套的。格式为： if（表达式1） {语句段１；} else（表达式2） {语句段２；} else if（表达式3） {语句段３；} …… else {语句段n；} 在这种情况下，若表达式1 为真，则执行语句段1，否则， 若表达式2为真，则执行语句 段2。若表达式2为假，则看 表达式3是否为真，若为真， 则执行语句段3。依次下去， 直到遇到条件为真，转去执 行相应的语句段。若前面的 条件都假，则执行最后的else 语句。 返回目录
返回目录 62 JavaScript的语言结构— switch条件语句 Switch语句格式如下: switch语句是多分支选择语句, switch(表达式) 虽然这个功能可用嵌套的i语句来 实现,但如果分支较多则嵌套的if case常量表达式1 语句层数就多,增加了程序的长 语句段1; 度并降低了可读性。此时用 Switch case常量表达式2 语句是较好的选择。说明: switch 语句段2; 后面的表达式,可以是字符型表 case常量表达式3 达式或整型表达式。当表达式的 语句段3 值与常量表达式m的值相等时就执 行语句段m。若没有与它匹配的常 量表达式,则执行 default后面的语 default 句段。 7语句段m;
7 6.2 JavaScript的语言结构— switch条件语句 Switch语句格式如下： switch (表达式) { case 常量表达式1: 语句段1； case 常量表达式2: 语句段2； case 常量表达式3: 语句段3； …… default: 语句段n；} switch语句是多分支选择语句， 虽然这个功能可用嵌套的if语句来 实现，但如果分支较多则嵌套的if 语句层数就多，增加了程序的长 度并降低了可读性。此时用Switch 语句是较好的选择。说明：switch 后面的表达式，可以是字符型表 达式或整型表达式。当表达式的 值与常量表达式m的值相等时就执 行语句段m。若没有与它匹配的常 量表达式，则执行default后面的语 句段。 返回目录
返回目录 62 JavaScript的语言结构— switch条件语句 要注意的一点是:在 switch(表达式) switch语句中如果找到常量 表达式m的值和表达式的值 case常量表达式1 语句段1; break; 相等,程序就会从语句段m case常量表达式2: 直执行下去,而不再判断 语句段2; break; 与后面常量表达式的值是否ca常量表达式3 匹配。所以要想让程序只执语句段3: break 行相应的语句段,应该在相 应语句段后加上 break语句 default. 格式为: 语句段n:} 8
8 6.2 JavaScript的语言结构— switch条件语句 switch (表达式) { case 常量表达式1: 语句段1；break； case常量表达式2: 语句段2；break； case常量表达式3: 语句段3；break； …… default: 语句段n；} 要 注 意 的 一 点 是 ： 在 switch语句中如果找到常量 表达式m的值和表达式的值 相等，程序就会从语句段m 一直执行下去，而不再判断 与后面常量表达式的值是否 匹配。所以要想让程序只执 行相应的语句段，应该在相 应语句段后加上break语句。 格式为： 返回目录
返回目录 6.2 JavaScript的语言结构—For循环语句 如果一个语句段需要反复使用多次,用循环语句编写代码。For 语句基本格式是: for(初始化部分;条件部分;增量部分) 语句段} 说明:语句的初始化部分是可选的,若在该语句外初始化变量, 则该部分可省去。执行for语句时,首先判断条件是否成立,若 成立则执行语句段,接着执行增量部分,否则跳岀循环语句。增 量部分用来定义循环控制变量在每次循环时按什么方式变化。 9
9 6.2 JavaScript的语言结构— For循环语句 如果一个语句段需要反复使用多次，用循环语句编写代码。For 语句基本格式是： for（初始化部分；条件部分；增量部分） { 语句段 } 说明：语句的初始化部分是可选的，若在该语句外初始化变量， 则该部分可省去。执行for语句时，首先判断条件是否成立，若 成立则执行语句段，接着执行增量部分，否则跳出循环语句。增 量部分用来定义循环控制变量在每次循环时按什么方式变化。 返回目录
返回目录 62 JavaScript的语言结构 while和do. while循环语句 For与 while语句都是循环语句,使用For语句在处理有关数字时更 易看懂,也较紧凑,而 while循环对复杂的语句效果更特别。 1. while循环语句基本格式是: while(循环条件){语句段;} 当循环条件为真时,重复执行语句段,否则退出循环。 2.do. whiley循环语句的基本格式是:do{语句段;} while(循环 条件 do.. while循环语句不管循环条件是否成立,都会先执行一次循环, 然后判断条件是否成立。若成立,继续执行语句段,否则跳出循环。 也就是说do.whil循环语句中的语句段至少执行一次。 使用 break语句可使得循环从For、 while或 switch语句中跳出。使 用 Continue语句是结束当前的循环,进入下一次循环 10
10 6.2 JavaScript的语言结构— while和do…while循环语句 For与while语句都是循环语句，使用For语句在处理有关数字时更 易看懂，也较紧凑，而while循环对复杂的语句效果更特别。 1．while循环语句基本格式是：while（循环条件）{ 语句段；} 当循环条件为真时，重复执行语句段，否则退出循环。 2．do…while循环语句的基本格式是：do {语句段；} while (循环 条件) do…while循环语句不管循环条件是否成立，都会先执行一次循环， 然后判断条件是否成立。若成立，继续执行语句段，否则跳出循环。 也就是说do…while循环语句中的语句段至少执行一次。 使用break语句可使得循环从For、while或switch语句中跳出。使 用Continue语句是结束当前的循环，进入下一次循环。 返回目录