JavaScript与动态交互网页的制作.pptx

JavaScript与动态交互网页的制作.pptx

《JavaScript与动态交互网页的制作.pptx》由会员分享，可在线阅读，更多相关《JavaScript与动态交互网页的制作.pptx（54页珍藏版）》请在冰豆网上搜索。

电子教案第7章JavaScript与动态交互网页的制作电子教案本章内容第1节第2节第3节JavaScript概述JavaScript基础JavaScript实例制作电子教案1.11.21.3JavaScript历史JavaScript的特点JavaScript与HTML第1节JavaScript概述电子教案一、JavaScript历史JavaScript作为一种简单的脚本语言，其前身是LiveScript，是NetScape公司开发的一种语言。

随司着S开u发n公出具有跨平台等许多优越特性的Java语言，NetScape公司将Java语言的部分特性融合进来，将LiveScript发展成现在的JavaScript。

所以JavaScript和Java是两家不同的公司提出的不同的编程语言，只是在某些特性上有共同之处。

第1节JavaScript概述电子教案二、JavaScript的特点是一种脚本编写语言基于对象的语言简单性安全性动态性跨平台性第1节JavaScript概述电子教案注意：

用户编写的JavaScript脚本加在中间，是为了把脚本对那些不支持元素SCRIPT的浏览器屏蔽掉，否则会把脚本当作文档的一部分显示在浏览器上。

另外JavaScript也可以以一个外部文件的形式出现，这个文件的扩展名为“.js”。

在使用时，需要通过设定SCRIPT元素的src属性来进行引用。

第1节JavaScript概三、Java述Script与HTMLJavaScript能增强网页的动态特性和交互能力，能完成只依靠HTML的元素属性无法完成的任务。

1、在HTML中加入JavaScript电子教案第1节JavaScript概2、JavaScri述pt的注释JavaScript的注释是C+风格的，即有两种注释方法。

一种是单行注释，即在注释文字前加上“/”，这一行中在“/”后的文字都算作注释，浏览器将忽略，不对其进行解释。

另一种注释是成段注释，方法为：

在注释文字的前后两端分别加上“/*”和“*/”，在这中间的文字将被浏览器忽略，不进行解释执行。

3、JavaScript脚本的语句语句：

就是在脚本中完整地完成一个动作的指令，可以是一个表达式、变量声明、赋值表达式、控制语句等。

注意：

JavaScript的一个语句可以用“；”标志结束，也可以没有任何标记，但必须自成一行。

当把多句语句安排在一行时，这多个语句之间必须用“；”隔开，否则会出现语法错误。

4、JavaScript的排错JavaScript没有专门的排错工具，只能依靠浏览器，如果发现错误，就会弹出相应的对话框提示它认为的错误原因。

电子教案第2节JavaScript基础2.12.22.32.42.52.6JavaScript的变量JavaScript的常量JavaScript的运算JavaScript的控制语句函数对象与属性方法电子教案第2节JavaScript基一、Java础Script的变量1、变量名所谓变量（variable）就是在程序运行期间其值可改以变的量，在JavaScript中一个变量由一个该文档中独一无二的字符串或字符来代表。

变量的命名规则为：

变量名只能由字母、数字和下划线3种字符组成，且第一个字符必须是英文字母或下划线。

变量名中不能出现空格。

变量名不能和JavaScript的“保留”字重名。

t如hrcolwas等s、。

new、在引用变量名时要区分大小写。

例如：

NUM、Num、num是三个不同的变量。

电子教案第2节JavaScript基2、变量赋础值将一个数据存放在一个变量中，这个过程称为“赋值”，在JavaScript中赋值用等号“=”来实现。

例如：

number=100，str=”youclickedbutton”等3、变量声明在JavaScript中主要使用保留字var来声明变量，通常的声明方法为：

var变量名;也可以在声明变量时给变量赋初值，如：

varnumber=100varstring=”youclickedbutton”电子教案4、变量类型JavaScript中通常变量类型有：

字符型、整型、浮点型、布尔型和字符串型等几种。

（1）字符型用单撇号栝起来的一个字符称为字符型常量。

如a、B、8、#等都是合法的字符常量，在内存中占一个节字。

另外一些特殊字符要特殊表示。

如反斜杠“”表为示“”；单引号“”表示为“”；双引号“”表示为“”；换行表示为“n”等。

将一个字符常量赋予一个变量中，实际上是将该字符的ASCII码值存储到内存单元中。

例如ch=A，s=c等。

（2）整型整型常量就是整型数据，例如200、-125等。

在赋值时直接引用即可，例如a=251、num=-121等。

第2节JavaScript基础电子教案第2节JavaScript基础3浮点型浮点型就是实数型，例如22.15、3.1415926等。

另外可也以用科学计数法表示，例如5.25e5或5.25E5表示5.25105。

4布尔型布尔型就是逻辑值型，它只有两个取示值真：

t和ru假e和）。

fa例lse如（表isChange=false表示isChange的逻辑值为假。

5字符串型例如：

“Mycomputer”、“欢迎使用”等，把一个字串符赋予一个变量时要用双引号把字符串括起来。

例v如a：

rstr=”welcome”。

JavaScript专门有一个对象String来处理字符串的运算。

电子教案二、JavaScript的常量JavaScript中预定了一些常数或文字，用于特殊用途：

1、NaN该值用于函数返回特殊值，表示表达式不是数字（NotaNumber）。

例如下面的语句就在页面上显示一个“NaN”。

varstr=”abc”document.write（parseInt（str）;其中，方法parseInt（str）功能为把一个用字符串形式表示的数字转化为数字，变量str为”abc”不是数字，因此返回一个“NaN”。

2、nullnull代表一个变量中没有有效的数据。

可以对一个变量显式地复制为null。

第2节JavaScript基础电子教案3、true，false它们是布尔变量的两个可能取值，一般来说，true用非0值表示，false用0值表示。

4、Infinity该常量用来代表无穷大，例如：

document.write（62/0）在网页上显示Infinity。

5、undefined该变量是在一个变量被创建之后和被赋值之前分配给该变的量一个特殊值。

例如：

varnumdocument.write（num）在网页上将显示undefined。

JavaScript基第2节础6.MAX_VALUE代表JavaScript所能表达的最大值。

约等于1.79E+308。

7.MIN_VALUE代表JavaScript所能表达的最接近零的数。

约等于2.22E-308。

8.NEGATIVE_INFINITY代表比在JavaScript中能够表示的最小的负数更小的值（即负无穷小）。

9.POSITIVE_INFINITY代表比在JavaScript中能够表示的最大正数更大的值（即正无穷大）。

JavaScript基电子教第2节案础电子教案三、JavaScript的运算JavaScript中的运算符很丰富，可分为以下几类：

算术运算符：

+（加法）、-（减法/取负）、*（乘法）、/（除法（求）、余%数）、+（递增）、-（递减）；逻辑运算符：

=（相等）、!

=（不相等）、（大=（大于等于）、&（逻辑与）、|（逻辑（或逻）、辑！

非）；位运算符：

&（位与）、|（位或）、（位非）、（异或）、（位右移）、（无符号右移）；条件运算符：

?

:

（三目运算）；逗号运算符：

，（逗号运算）；特殊运算符：

delete、typeof、void；第2节JavaScript基础电子教案四、JavaScript的控制语句JavaScript中也有两种控制语句：

条件控制语句和循环控语制句。

1、条件控制If语句的基本格式：

if（condition）thenstatement1elsestatement2第2节JavaScript基础电子教4）&（hr8）&（hr12）&（hr14）&（hr17）&（hr显示结果：

电子教for循环的形式为：

for（initialization;test;increment）statement）例如：

for循环，求0到10的和。

!

-varmynum=0for（i=0;i第2节JavaScript基案2、循环控制础循环控制有四种形式，分别为：

for循环、forin、while和dowhile。

（1）for循环电子教案

（2）forin循环这种循环对应于一个对象的每个属性，或一个数组的每个元素，执行一个或多个语句。

格式为：

for（variableinobject|array）statement其中variable是一个变量，它可以是object的任一属性或array的任一元素；object、array为要在其上遍历的对象或数组；statement是相对于object的每个属性或array的个每元素，都要被执行的语句，可以是复合语句。

JavaScript基第2节础电子教案statement例如：

while循环vari=0while（i3）document.write（“Thisis”+i+“line.”）i+这段代码在浏览器窗口中执行的结果为：

Thisis1line.Thisis2line.Thisis3line.第2节JavaScript基（3）whil础e循环这种循环先判定指定的条件是否为true，如果expression的Boolean值为true，则执行一个语句，直到expression的Boolean值为false时结束。

格式为：

while（expression）电子教案第2节JavaScript基（4）dow础hile循环这种循环和while循环基本一样，但是它先执行一次statement语句，然后才判定指定的条件是否为true，如果expression的Boolean值为true，则继续执行下一个循环语句，直到expression的Boolean值为false时结束。

格式为：

dostatementwhile（expression）例如：

这个例子和前一个相比稍有变化。

vari=0dodocument.write（“Thisis”+i+“line.”）i+while（i3）其执行结果与上例一样。

电子教例如：

break语句!

-vari=2document.write（在100中的所有质数是：

）while（i100）varj=2while（j第2节JavaScript基案3、break语句础与continue语句在循环执行的过程中，使用break语句可以强行中断循环，执行循环体后面的语句，无论循环条件是否满足。

使用continue语句可以结束本次循环，转向执行下一次循环的条件判定。

电子教案这段代码实现了在小于100的整数中找出所有的质数，并在浏览器窗口中显示出来，显示结果：

第2节JavaScript基础电子教案第2节JavaScript基例如：

cont础inue语句vars=,i=0;while（i10）i+;if（i=5）continue;s+=i;document.write（s）这段代码中当i=5时跳过下面的语句，重复执行下一轮循环。

因此，结果s应为40而不是45。

电子教案五、函数1、函数声明JavaScript中的函数使用关键字function来声明一个函数，其式格为：

functionfunctionname（argument1,argument2,argumentn）statements其中，functionname为函数名，在文档中是独一无二的，且取函数名时必须符合变量命名规则；argument1argumentn是可选的、函数的参数