JavaScript项目式实例教程课件

1、项目一对话框和页面输出 初步体验第1页，共339页。有两张网页，每张网页上都有一个”问候”按钮。在第一张网页上点击该按钮，弹出对话框“张三向您问好！”，点击对话框上的“确定”按钮后，紧接着在该网页上打印“张三欢迎您光临本站！”。在第二张网页上做同样的操作，显示结果相同，只不过信息中把“张三”显示为了“李四”。项目要求代码的复用性和可维护性良好。项目情境第2页，共339页。熟悉JavaScript脚本内嵌在HTML中的书写方法熟悉JavaScript脚本的执行时机。初步了解事件触发的概念。初步了解函数和函数调用的方法。熟悉JavaScript脚本文件的编写和引入的方法。学习目标第3页，共339页

2、。打开页面，立即弹出一个问候对话框。任务1 弹出对话框第4页，共339页。1、在HTML中，任何标签都可以看成是一个对象，例如body就是一个对象。这些对象一般都有属性、事件和方法。其相关内容将在后面的章节阐述。2、如果要想在页面被引导后执行一个任务，可以给标签添加一个onload事件（关于事件将在后续章节详细介绍），此事件在body对象被加载完成后被触发，写法形如：onload=要执行的代码;3、alert(参数)功能是弹出一个对话框，对话框中的内容就是该函数中设置的参数。4、JavaScript对大小写是敏感的，所以alert()必须全部小写。【相关知识】第5页，共339页。在标签内部输入

3、以下代码：【任务实现】第6页，共339页。在网页上打印一串欢迎词。任务2 在页面上打印欢迎词第7页，共339页。1、document表示的是文档对象，每个载入浏览器的 HTML 文档都会成为 Document 对象。（关于该对象在后续章节会详细介绍）2、document对象有很多方法，write方法是其中之一，表示在文档中打印信息内容。【相关知识】第8页，共339页。在标签内部输入以下代码：【任务实现】第9页，共339页。先弹出问候对话框再在页面上打印欢迎词任务3 先弹对话框再打印 第10页，共339页。在JavaScript中，如果功能块有多个语句，这些语句中间用分号隔开。实际上，每一个完整

4、的功能语句结束处都应该写上分号，哪怕只有一条语句，也应该写上。【相关知识】第11页，共339页。在标签内部输入以下代码：【任务实现】第12页，共339页。页面上有一个按钮，点击此按钮后，弹出问候对话框，在页面上打印欢迎词。任务4 点击按钮执行任务3第13页，共339页。document.write()执行时，将重写当前页面。所以，页面上原有的内容将全部消失，只留下document.write()写下的内容。在本任务中，页面中最后看不到原来的“问候”按钮就是这个原因。【相关知识】第14页，共339页。在标签对中编写按钮代码，并在按钮代码中添加onclick事件属性，并编写执行任务代码：【任务实现

5、】第15页，共339页。仍然实现任务4的需求，但是要求把任务执行代码模块化，以便随时调用。任务5 任务模块化第16页，共339页。1、代码模块化。 将代码“打包”为函数的形式2、Javascript与HTML混编 标签的使用3、注释 /. 注释单行 /*.*/ 注释多行【相关知识】第17页，共339页。1、在标签对中编写按钮代码：站！); /2、在页面的标签内部编写代码：/下面定义了一个函数hellofunction hello()alert(你好！); document.write(欢迎光临本站!);【任务实现】第18页，共339页。仍然完成任务5的需求，但是要求增加代码的灵活性。例如改变对

6、话框和页面打印的信息，但是不需要修改函数模块代码。任务6 调用灵活化第19页，共339页。在任务4中，我们将代码“打包”为一个函数，实现了模块化，但是还不够灵活。例如要改变显示的内容，就必须要修改函数体中的代码。又例如，如果再增加一个按钮，点击这个按钮也需要调用函数hello(),但是要显示的内容又有不同，则无法实现，只能另外编写一个函数供其调用。这样的程序缺乏了可扩展性，代码的复用性也比较差。程序设计中常常通过在编写函数模块时定义参数（一般是用逗号隔开的变量列表），而在调用函数时传入具体的数值的方法实现函数功能的灵活性和可扩展性。有关变量的概念以及函数参数的具体内容将在后面章节阐述。【相关知

7、识】第20页，共339页。1、在标签对中编写按钮代码：2、在页面的标签内部编写代码：function hello(str1,str2)alert(str1);document.write(str2);【任务实现】第21页，共339页。任务7 “项目一”的实现第22页，共339页。1、js文件扩展名为js的文件是用JavaScript编写的客户端脚本文件，它不是一般的网页文件，一般不能直接运行打开，而是配合网页来使用。它常常用来实现某些功能，这些功能代码可以被多个不同的网页调用。在js文件中编写JavaScript脚本时，不要用标签对包括。2、引用js文件在页面中，只有引入js文件才能使用该文件

8、中的JavaScript代码。方法是在标签中添加src属性，其值就是该js文件的路径。【相关知识】第23页，共339页。1、建立一个文件hello.js（注意扩展名为js）。2、在hello.js中编写如下函数代码并保存文件。function hello(str1,str2)alert(str1);document.write(str2);3、建立两个页面，分别为hello1.html和hello2.html（为简单起见，将这三个文件放置在同一个目录下）。4、在hello1.html中，在标签对内部编写按钮代码如下：5、在页面的标签内部编写代码如下：6、在hello2.html中做同样的操作，

9、只是将“张三”改为“李四”【任务实现】第24页，共339页。项目二简单计算器 判断结构第25页，共339页。设计一个简单的计算器，能进行加、减、乘、除四则运算。当用户运行网页时，依次弹出三个输入对话框，分别要求输入两个数和一个运算符号（+、-、）。输入无误时，在页面上打印计算算式。在进行除法运算时，除数不能为0，否则打印错误信息。如果输入数字格式错误或者输入的运算符号错误都提示相应的不能运算信息。项目情境第26页，共339页。熟悉变量和常量的概念和使用方法。熟悉基本数据类型的概念熟悉数据类型的转换。熟悉关系运算符、逻辑运算符、算术运算符的使用方法。熟悉判断结构的使用方法。熟悉几个内置函数的使用

10、方法。学习目标第27页，共339页。打开页面，打印程序中指定的姓名和性别。任务1 认识变量和字符串第28页，共339页。1、变量的定义定义一个变量用关键字var，例如：var x;var y;一个var也可以同时定义多个变量，这些变量间用逗号隔开，例如：var x,y,z;【相关知识】第29页，共339页。2、变量的赋值变量的赋值就是把值存储在变量所在的内存单元中,方法是用“=”运算符。赋值可以是在定义变量时，例如：var x=0;var y=1,z=2;也可以是在变量定义后使用时才赋值，例如：var x;x=0;【相关知识】第30页，共339页。3、变量的命名变量的名称必须是由ASCII字符

11、或者下划线（_）开头，第一个字符不能是数字，但其后可以是数字或者其他字母。例如如下变量的命名是合法的：aA_aa_1注意：JavaScript语言对大小写是敏感的，所以变量a和变量A是两个不同的变量。变量名不能定义为JavaScript的保留字。例如不能定义一个变量的名称为var或者function。【相关知识】第31页，共339页。4、变量的类型【相关知识】数据类型具体类型基本数据类型字符串型、数字型、布尔型复合数据类型对象、数组其他数据类型函数、null（空）、undefined（未定义）第32页，共339页。5、常量与变量对应的是常量。常量用来表示一个固定不变的值。比如下面这些这些都是常

12、量：12325.78张三true【相关知识】第33页，共339页。6、字符串型6.1、字符串的定义字符串必须用双引号或者单引号包括起来。6.2、转义符转义符“”6.3、连接运算符连接运算符”+”【相关知识】第34页，共339页。在标签内部输入以下代码：var name=张三;var sex=男; document.write(姓名：+name+性别：+sex);【任务实现】第35页，共339页。打开页面，弹出一个输入对话框，要求输入姓名。输入确定后再次弹出输入对话框，要求输入性别。输入确定后，在页面打印刚刚输入的信息。任务2 输入对话框第36页，共339页。1、Window对象window对象

13、表示浏览器窗口。任何一个全局函数或变量都是windowd对象的属性，所以使用时，该对象常常省略不写。【相关知识】第37页，共339页。2、prompt方法prompt方法的功能是弹出一个输入对话框，格式是：prompt( ,默认值)其返回的值就是用户在对话框中输入的值,返回值的类型是字符串型。【相关知识】第38页，共339页。在标签内部输入以下代码：var name=mpt(请输入您的姓名：,);var sex=mpt(请输入您的性别：,男);document.write(姓名：+name+性别：+sex);【任务实现】第39页，共339页。打开页面，弹出一个输入对话框，要求输入一个整数。如果

14、输入的不是一个整数，则给出错误提示。任务3 判断是否为整数第40页，共339页。1、表达式表达式可以是常量或者变量，也可以是由常量、变量和运算符号组成的语句。比如下面这些都是合法的表达式：4.56trueaba+b。【相关知识】第41页，共339页。2、布尔数据类型布尔（boolean）是一种基本数据类型，表示真或者假，通俗的理解为是或者非，对或者错等。它常常用于判断一个结果的是非性。它的值只有两个：true（真）和false（假）。例如：84其结果就是false。再如：a大于ab小于a=大于或等于a=b=小于或等于a=b第43页，共339页。4、判断语句4.1、if语句 if语句if()语句

15、块 if.else语句if()语句块1else语句块2【相关知识】第44页，共339页。 if.else if.else语句if()语句块1else if(条件2)语句块2else if()语句块nelse语句块n+1【相关知识】第45页，共339页。 if语句的嵌套if语句允许嵌套，嵌套时注意if与else的匹配，不要出现交叉嵌套的现象。【相关知识】第46页，共339页。4.2、switch语句switch()case ：语句块1case ：语句块2case ：语句块ndefault:语句块n+1【相关知识】第47页，共339页。5、三目运算三目运算是根据条件执行两个语句中的其中一个，格式如

16、下：布尔表达式?语句1 : 语句2当“布尔表达式”值为真时，执行“语句1”；当“布尔表达式”值为假时，执行“语句2”。【相关知识】第48页，共339页。在标签内部输入以下代码：var num=mpt(请输一个整数：,);if(parseInt(num) =num)document.write(num+是整数);elsedocument.write(num+不是整数);【任务实现】第49页，共339页。打开页面， 弹出一个输入对话框，要求输入一个整数。如果输入的为奇数，确认后打印信息，提示该数为奇数。如果输入的为偶数，确认后打印信息，提示该数为偶数。如果输入的信息为以下情况中的一种，就视为不合法

17、输入，提示错误。 输入的不是数字。 输入的是数字，但不是整数。 未做任何输入。任务4 判断奇偶数第50页，共339页。1、逻辑运算符【相关知识】运算符名称举例备注&逻辑与true & false(结果为false)98 & 78(结果为false)二元运算符。只有两个操作数的值都为true，结果才是true。|逻辑或true | false(结果为false)98 | 78(结果为false)二元运算符。操作数中只要有一个值为true，结果就是true。只有两个操作数的值都为false，结果才是false。!逻辑非!true(结果为false)!98(结果为false)一元运算符。true的非

18、是false,false的非是true。第51页，共339页。2、算术运算符【相关知识】运算符名称举例备注+加a+b二元运算符。加法运算，运算结果为数字型。-减a-b二元运算符。减法运算，运算结果为数字型。*乘a*b二元运算符。乘法运算，运算结果为数字型。/除a/b二元运算符。除法运算，运算结果为数字型。%模a%b二元运算符。取余数运算，运算结果为数字型。+递增a+a一元运算符。相当于加1。要求操作数必须是变量。运算结果为数字型。-递减a-a一元运算符。相当于减1。要求操作数必须是变量。运算结果为数字型。第52页，共339页。在标签输入下列代码：var num=mpt(请输一个整数：,0);i

19、f(!isNaN(num) & num!= & parseInt(num)=num) var res=num % 2; if(res=0)document.write(num+是偶数);elsedocument.write(num+是奇数);elsedocument.write(输入的数字格式不对，不能判断奇偶数);【任务实现】第53页，共339页。打开页面，弹出输入对话框，要求输入一个被加数。输入确定后，再次弹出输入对话框，要求输入一个加数。输入确定后，打印这两个数的和。如果这两个数中只要有一个输入格式不正确，或者未输入任何值，都给出错误信息。任务5 加法运算器第54页，共339页。1、数字

20、型【相关知识】表现形式举例涵义整数198、234072、0650 xAF9、0 x56E十进制八进制（0开头）十六进制（0 x开头）浮点数1.0、3.489有小数点科学计数法2.45E72.45107特殊数字InfinityNaN无限大不是一个数字第55页，共339页。2、数据类型的转换2.1、隐式类型转换【相关知识】数据类型在数字环境下转换在字符串环境下转换在布尔环境下转换数字无转换为内容为数字的字符串NaN转换为NaN非0转换为true,0转换为falseNaN转换为false字符串空字符串转换为0非空字符串转换为数字(字符内容为数字时)或者NaN(字符内容不是数字时)true转换为1fa

21、lse转换为0无空字符串转换为false非空字符串转换为truetrue转换为truefalse转换为false布尔true转换为1false转换为0转换为true转换为false无第56页，共339页。2.2、显示类型转换【相关知识】函数功能举例结果Number(字符串)将字符串整体转换为数字。Number(4.56)Number(1.23.56)4.56NaNparseInt(字符串)将字符串中第一个非数字字符前的字符转换为整型数字。parseInt(12abc)parseInt(abc12)parseInt(1.8)12NaN1parseFloat(字符串)将字符串中第一个非数字字符前的

22、字符转换为浮点型数字。parseFloat(1.2abc)parseFloat(abc1.2)parseFloat(1.2e3abc)1.2NaN1200第57页，共339页。在标签对中输入如下代码：var num1=mpt(请输入被加数：,0);var num2=mpt(请输入加数：,0);if(!isNaN(num1) & num1!= & !isNaN(num2) & num2!=)var res=parseFloat(num1)+parseFloat(num2);document.write(num1+num2+=+res);elsedocument.write(输入的数格式不正确！)

23、;【任务实现】第58页，共339页。任务6 “项目二”的实现第59页，共339页。在标签对中输入以下代码：var num1=mpt(请输入第一个数：,0);var num2=mpt(请输入第二个数：,0);var op=mpt(请输入一个运算符号（+、-、）：,+);if(!isNaN(num1) & !isNaN(num2) & num1!= & num2!=)var n1=parseFloat(num1);var n2=parseFloat(num2);var flag=0;var res=0;switch(op)case +:res=n1+n2;break;case -:res=n1-n

24、2;break;【任务实现】第60页，共339页。case :res=n1*n2;break;case :if(n2!=0)/如果除数为0res=n1/n2;elseflag=1;res=除数不能为0！;break; default:/如果输入的运算符不是+、-、中的任何一个flag=1;res=输入的运算符号错误！不能计算！;【任务实现】第61页，共339页。if(flag=0)document.write(n1+op+n2+=+res);elsedocument.write(res);elsedocument.write(输入数字格式错误！不能计算！);【任务实现】第62页，共339页。项

25、目三统计成绩单 循环结构第63页，共339页。设计一个程序，要求能不断弹出输入成绩对话框。在输入成绩时，检测输入数据的合法性，如果输入的不是数字或输入内容为空，给出错误信息，继续弹出成绩对话框输入成绩，只到用户输入一个截止符号!为止。最后在页面上打印所有输入的有效成绩，打印的格式为每行4个。统计所有成绩的平均分、最高分、最低分并打印输出。最后输出一个链接“是否有不及格”。用户点击该链接，如果成绩中有不及格的，则弹出对话框提示没有不及格成绩。若有不及格成绩，则弹出对话框提示有不及格成绩。项目情境第64页，共339页。初步了解数组的概念和使用方法。初步了解对象的概念。熟悉Math数学对象的应用。熟

26、悉循环结构的使用方法。熟悉变量的作用域学习目标第65页，共339页。分别计算并打印输出1+2+3+.+100和12 3. 100的值。任务1 累加和累乘第66页，共339页。1、循环结构1.1、while语句while()1.2、do.while语句dowhile();2、死循环【相关知识】第67页，共339页。在标签内部输入以下代码：var sum=0; /总和sumvar f=1;/总乘积fvar i=1;/计数iwhile(i=100) sum=sum+i;f=f*i;i+; document.write(1+2+3+.+100=+sum+12 3. 100=+f);【任务实现】第68页

27、，共339页。随机的给出10个0到100之间（包含0和100）的整数，统计这10个数中的最大值和最小值。任务2 最大和最小值第69页，共339页。1、数组1.1、数组的概念数组是一些数据元素（element）的集合，每个数据元素在数组中都有一个编号，通过编号可以引用这些数据元素。这些数据元素可以是不同的数据类型，例如数字型、字符串型、布尔型等，设置还可以是一个数组。每个数组都有一个名称，其命名规则和变量的命名规则相同。【相关知识】第70页，共339页。1.2、数组的定义1.2.1、使用构造函数方式有三种，分别是：new Array()new Array()new Array(,数组元素2的值.

28、)1.2.2、直接定义方式有两种，一种是用一对空的中括号定义一个空数组，然后再为数组元素赋值。另一种方式是在一对中括号中，放入数组元素值，并用逗号隔开。【相关知识】第71页，共339页。2、对象2.1、对象的概念对象有三要素：属性、方法和事件。2.2、使用属性和方法引用或修改对象的属性：对象.对象的属性调用对象的方法：对象.对象的方法名(参数列表)【相关知识】第72页，共339页。2.3、Math对象【相关知识】属性描述E返回算术常量 e，即自然对数的底数（约等于2.718）。LN2返回 2 的自然对数（约等于0.693）。LN10返回 10 的自然对数（约等于2.302）。LOG2E返回以

29、2 为底的 e 的对数（约等于 1.414）。LOG10E返回以 10 为底的 e 的对数（约等于0.434）。PI返回圆周率（约等于3.14159）。SQRT1_2返回返回 2 的平方根的倒数（约等于 0.707）。SQRT2返回 2 的平方根（约等于 1.414）。第73页，共339页。【相关知识】方法描述abs(x)返回数的绝对值。acos(x)返回数的反余弦值。asin(x)返回数的反正弦值。atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。cei

30、l(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 对象的原始值。第74页，共339页。3、for循环结构for(初始化变量

31、;逻辑表达式;改变变量表达式)4、for.in循环结构for(变量 in 对象或者数组)5、循环的嵌套无论哪种循环结构，都可以相互之间使用嵌套，这与判断结构的嵌套类似。【相关知识】第75页，共339页。在标签对中输入以下代码：var ele=; for(var i=0;i10;i+) elei=Math.round(Math.random()*100); document.write(elei+ ); var e_max=ele1; var e_min=ele1; for(var i=0;ie_max)e_max=elei; if(eleie_min)e_min=elei; document.

32、write(最大值：+e_max+最小值：+e_min);【任务实现】第76页，共339页。有一个字符串I am a student,用循环语句查找第一个字母t在字符串中的位置。任务3 循环的跳转第77页，共339页。1、字符串对象1.1、创建字符串对象使用构造函数String()创建字符串对象，方式是：new String(str)或者String(str)其中str参数是字符串变量或者具体的字符串的值。【相关知识】第78页，共339页。1.2、属性和方法【相关知识】属性描述constructor对创建该对象的函数的引用length字符串的长度prototype允许您向对象添加属性和方法第7

33、9页，共339页。【相关知识】方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接字符串。indexOf()检索字符串。lastIndexOf()从后向前搜索字符串。localeCompare()用本地特定的顺序来比较两个字符串。match()找到一个或多个正则表达式的匹配。replace()替换与正则表达式匹配的子串。search()检索与正则表达式相匹配的值。slice()提取字符串的片断，并在新的字符串中返回被提取的部分。split()把字符串分割为字符串数组。strike()使用删除线来显示字符串。s

34、ubstr()从起始索引号提取字符串中指定数目的字符。substring()提取字符串中两个指定的索引号之间的字符。toLocaleLowerCase()把字符串转换为小写。toLocaleUpperCase()把字符串转换为大写。toLowerCase()把字符串转换为小写。toUpperCase()把字符串转换为大写。toSource()代表对象的源代码。toString()返回字符串。valueOf()返回某个字符串对象的原始值。第80页，共339页。2、循环的跳转2.1、break语句在循环中，它的作用是结束循环的执行。即使循环的次数还没有执行完，也不再执行。2.2、continue语

35、句continue语句只能用于循环中，是结束当前正在执行的这次循环，跳入下一次循环。【相关知识】第81页，共339页。在标签内部输入以下代码：var str = I am a student;var str_len = str.length;var iPos = 0;for(var i=0;istr_len;i+) if(str.charAt(i)=t) iPos=i+1; break; document.write(字符串+str+中的第一个字母t的位置为+iPos);【任务实现】第82页，共339页。任务4 “项目三”的实现第83页，共339页。1、函数1.1、自定义函数function

36、函数名称(参数列表)语句块 return 【相关知识】第84页，共339页。1.2、函数参数函数名称(参数值列表);对于形参和实参还需要注意以下几点： 形参与实参要一一对应，也就是传递的顺序要一致。 形参的个数与实参的个数原则上要求一致。如果形参的个数大于实参的个数，则多余的形参的值将被赋予undefined(表示未定义)，如果形参的个数小于实参的个数，则多余的实参将被舍弃。 用于定义形参的变量不能添加关键字var,直接写变量名即可。 形参只能是变量，不能是一个表达式。【相关知识】第85页，共339页。1.3、系统函数也叫内置函数，是JavaScript内部定义好的函数，能完成一些特定的功能，

37、用户不必知道它是如何实现的，只要直接调用就可以了。前面我们已经学习的例如数学函数、parseInt()、parseFloat()、isNaN()等都是系统函数。【相关知识】第86页，共339页。2、变量的作用域变量的作用域就是变量的有效作用范围。这个范围有两种：全局和局部。在函数定义之外声明的变量是全局变量，该变量在整个持续范围内都可以访问和修改。在函数定义内声明的变量是局部变量，它不能被该函数外的任何事物访问。但是，必须注意的是，在函数内部声明一个局部变量时一定要使用关键字var，否则还是一个全局变量。一个局部变量的名称可以与某个全局变量的名称相同，但这是完全不同和独立的两个变量。【相关知识

38、】第87页，共339页。1、要不断弹出成绩输入对话框，没有规定输入次数，所以要使用while循环。2、当输入“!”就结束输入，所以while循环的开始条件是输入字符串不等于“!”。3、要对成绩进行打印和统计，每输入一个成绩就先存储到数组中。【任务分析】第88页，共339页。1、在标签对中编写超级链接“是否有不及格”的代码，并为其添加onclick事件，在事件中调用一个自定义函数check()。此函数的功能是查找是否有不及格的成绩：是否有不及格【任务实现】第89页，共339页。2、在标签对中输入以下代码：var score=0; /存放当前输入的成绩var i=1; /输入次数计数var ele

39、=; /存放最终的成绩while(score!=!)score=prompt(请输入第+i+个成绩：,0);if(!isNaN(score) & score!= & score!=!)elei=Number(score);i+;else if(score!=!)alert(输入的成绩无效！);document.write(输入的成绩列表：);【任务实现】第90页，共339页。for(var i=1;iele.length;i+)document.write(elei+ );if(i % 4=0)document.write();var e_max=ele1; /存储最高分var e_min=e

40、le1; /存储最低分var sum=0; /存储分数总和，以便统计平均分for(var i=1;ie_max)e_max=elei; if(eleie_min)e_min=elei; 【任务实现】第91页，共339页。var everage=Math.round(sum/(ele.length-1)*10)/10;document.write(平均分数：+everage+最高分：+e_max+最低分：+e_min);function check()var flag=0; /标志，flag=0时无不及格，flag=1时有不及格for(var i=1;iele.length;i+)if(elei

41、60)flag=1;break;if(flag=0)alert(没有不及格成绩。);elsealert(有不及格成绩。);【任务实现】第92页，共339页。项目四注册页面设计 事件第93页，共339页。设计一个简单的用户注册页面。页面需求如下：填写的信息有姓名、年龄、和城市，且都是必填信息，“城市”文本框只读。当鼠标移入“姓名”或者“年龄”文本框时，光标自动落入文本框内。当鼠标移入“城市”文本框时，文本框中显示文字“请选择城市”。“年龄”文本框中只能输入数字，当焦点落在此文本框中时，按非数字键无法键入。点击“请选择城市”下列列表框，可以选择一个城市。当选择了一个城市后，在“城市”文本框中显示该

42、城市。如果没有填写姓名，点击“提交”按钮提交表单时，会弹出提示框“姓名未填写，不能提交！”。如果没有填写“年龄”，点击“提交”按钮提交表单时，会弹出提示框“年龄未填写，不能提交！”。如果没有选择城市，点击“提交”按钮提交表单时，则弹出提示框“城市未选择，不能提交！”。项目情境第94页，共339页。理解事件的概念。掌握事件的触发机制。掌握常用事件的应用。学习目标第95页，共339页。点击页面上的“问候”按钮，弹出两个对话框，分别显示“你好!”和“早上好”。要求不得将事件以及触发代码写在“问候”按钮的标签中，做到代码与标签分离。任务1 在代码中设置对象处理事件第96页，共339页。1、为对象事件赋

43、值属性的设置方式：对象.属性=属性的值;为事件设置要触发的行为动作：对象.事件=函数名称;或者对象.事件=function()函数体;【相关知识】第97页，共339页。2、浏览器与事件事件都是由浏览器产生的，而不是由javascript产生的。因此不同的浏览器产生的事件可能不同，就是相同的浏览器不同的版本所产生的事件也有可能不同。因此，对于某个事件在某个浏览器上能正常运行，但在另一个浏览器上就无效。3、加载和卸载事件加载事件为onload，是指加载（打开）页面完毕时产生的事件，卸载事件为onunload，是指卸载（关闭、刷新或者跳转到其他页面）网页时产生的事件。另外在卸载页面前还会触发onbe

44、foreunload事件。【相关知识】第98页，共339页。4、预加载对象处理事件window.onload=function()对象.事件=函数名称;或者window.onload=function()对象.事件=function()函数体;【相关知识】第99页，共339页。在标签内部输入以下代码：function hello()alert(你好！);alert(早上好！);bt1.onclick=hello;【任务实现】第100页，共339页。页面上显示一个“跳转到百度”的超级链接，点击该链接弹出一个询问是否跳转的对话框，如图4.4所示。如果点击“确定”按钮，浏览器打开百度首页，如果点击“

45、取消”按钮，浏览器不跳转，仍旧停止本页。任务2 事件处理中的返回值第101页，共339页。取消事件处理的默认动作【相关知识】元素事件描述onclick单击跳转到元素的href属性指定的URLonsubmit、onreset提交表单、重置表单documentoncontextmenu单击鼠标右键可以显示一个快捷菜单第102页，共339页。1、在页面中制作一个超级链接，标签id为link。代码如下：跳转到百度【任务实现】第103页，共339页。2、在标签对中输入如下JavaScript代码：window.onload=function()link.onclick=function()var sel

46、=confirm(真的要跳转吗？)if(!sel)return false;【任务实现】第104页，共339页。页面上有一个表单，内部有一个文本框，一个“提交”按钮。用户必须在文本框中输入姓名，点击“提交”按钮，表单才能提交跳转到ok.html,否则表单不提交。任务3 表单提交事件第105页，共339页。对象层次模型【相关知识】第106页，共339页。1、在页面上设计表单界面，HTML代码如下： 姓名： 【任务实现】第107页，共339页。2、在标签对中输入以下代码：window.onload=function()form1.onsubmit=function()if(form1.txtNam

47、e.value=)alert(请填写姓名！);return false;【任务实现】第108页，共339页。页面上有一张小狗的图片，当鼠标放置到该图片上时，变成另一张小狗的图片；当鼠标移开时，图片恢复成原来小狗图片；当在图片上单击鼠标左键时，弹出对话框，提示信息“汪汪”。任务4 鼠标事件第109页，共339页。鼠标事件【相关知识】事件类型事件描述鼠标移动onmousemove当鼠标在对象上移动时触发onmouseout当鼠标离开对象时触发onmouseover当鼠标移入到对象上时触发鼠标点击onclick当单击鼠标左键时触发ondblclick当双击鼠标左键时触发onmousedown当鼠标键

48、按下的瞬间触发onmouseup当鼠标键按下然后又释放的瞬间触发第110页，共339页。1、在页面上放置第一张小狗，HTML代码如下：【任务实现】第111页，共339页。2、在标签对中输入以下代码：window.onload=function()dog1.onmouseover=function()dog1.src=images/dog2.jpg;dog1.onmouseout=function()dog1.src=images/dog1.jpg;dog1.onmousedown=function()alert(汪汪！);【任务实现】第112页，共339页。页面上有两个文本框，在第一个文本框中

49、每输入一个字符，第二个文本框中就显示该字符对应在键盘上的键码值。第一个文本框中只能输入5个字符。任务5 键盘事件第113页，共339页。1、键盘事件【相关知识】事件描述onkeydown当按下键盘键时触发onkeyup当释放键盘键时触发onkeypress当按下并释放键盘键时触发第114页，共339页。2、event事件对象event(事件)对象代表事件状态，如事件发生的元素，键盘状态，鼠标状态，鼠标位置和鼠标按钮的状态。【相关知识】第115页，共339页。2.1 event对象兼容性处理IE浏览器有event对象，但是FF火狐浏览器没有event对象，在该浏览器中，可以通过给函数的参数传递e

50、vent对象。可以使用以下方法：function 函数名(ev)var oEvent=ev|event;/使用oEvent代替window.event或者对象=function(ev)var oEvent=ev|event;/使用oEvent代替window.event【相关知识】第116页，共339页。2.2 event对象属性【相关知识】属性描述 altKey设置或获取Alt键的状态。 altLeft设置或获取左 Alt 键的状态。 Button设置或获取用户所按的鼠标按钮。 clientX设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 c

51、lientY设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 ctrlKey设置或获取 Ctrl 键的状态。 ctrlLeft设置或获取左 Ctrl 键的状态。 fromElement设置或获取事件发生时激活或鼠标将要离开的对象。 keyCode设置或获取与导致事件的按键关联的 Unicode 按键代码。 offsetX设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 propertyName设置或获取对象上发生更改的属性名称。 第117页，共339页。（接上表）【相

52、关知识】repeat获取 onkeydown 事件是否正在重复。 returnValue设置或获取事件的返回值。 screenX设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 shiftKey设置或获取 Shift 键的状态。 shiftLeft设置或获取左 Shift 键的状态。 srcElement设置或获取触发事件的对象。 toElement设置或获取用户要将鼠标指针移动指向的对象的引用。 type从 event 对象中获取事件名称。 wheelDelta设置或获取滚轮按钮滚动的距离和方向。 x设置或获取鼠标指针位

53、置相对于父文档的 x 像素坐标。 y设置或获取鼠标指针位置相对于父文档的 y 像素坐标。第118页，共339页。2.3 event.button的值及其含义【相关知识】值描述0没按键1按左键2按右键3按左右键4按中间键5按左键和中间键6按右键和中间键7按所有的键第119页，共339页。1、在页面上设置两个文本框，HTML代码如下：字符：键码：【任务实现】第120页，共339页。2、在标签对中输入以下代码：window.onload=function()text1.onkeydown=function(ev)var oEvent=ev|event;text2.value=oEvent.keyCo

54、de;if(this.value.length=5)return false;【任务实现】第121页，共339页。任务6 “项目四”的实现第122页，共339页。this关键字JavaScript中，this关键字有很多用法，一般指的是当前的对象。比如下列语句中的this指的就是文本框本身。【相关知识】第123页，共339页。在本项目中，表单控件得到焦点时，操作鼠标或者敲击键盘都需要检查其中的值，所以需要用到鼠标键盘事件。在年龄文本框中不允许输入非数字的值以及在条件不符合时不允许提交表单都需要用到事件的返回值。检查键入的年龄是否为数字还要用到event对象。【任务分析】第124页，共339页。

55、1、在标签对中编写表单代码：注册 姓名：* 年龄：* 请选择城市 北京 上海 广州 * 【任务实现】第125页，共339页。2、在标签对中输入以下代码：window.onload=function()form1.username.onmouseover=function()this.focus();this.select();form1.age.onmouseover=function()this.focus();this.select();【任务实现】第126页，共339页。form1.age.onkeydown=function(ev)oEvent=ev|event;if( oEvent.

56、keyCode57)return false;form1.sel_city.onchange=function()if(this.value=0)alert(请选择一个城市);elseform1.city.value=form1.sel_city.value;【任务实现】第127页，共339页。form1.onsubmit=function()if(form1.username.value=)alert(姓名未填写，不能提交！);form1.username.focus();return false;else if(form1.age.value=)alert(年龄未填写，不能提交！);for

57、m1.age.focus();return false;【任务实现】第128页，共339页。else if(form1.city.value= | form1.city.value=请选择城市)alert(城市未选择，不能提交);form1.sel_city.focus();return false;form1.city.onmouseover=function()if(this.value=)this.value=请选择城市;【任务实现】第129页，共339页。项目五多窗体注册页面 窗口对象第130页，共339页。设计一个多窗体的用户注册页面，具体需求如下：如图5.1所示，在首页上有一个“注

58、册”按钮，点击可以进入如图5.2的注册页面。首页窗体状态栏上有一行文字“欢迎您光临本站！”从右向左循环滚动。项目情境 图5.1 首页 图5.1 首页 图5.2 注册页面第131页，共339页。项目情境打开如图5.2所示注册页面，默认尺寸为280*400像素。点击“注册须知”按钮打开一个对话框窗口（如图5.3）,此对话框窗口尺寸为200*200像素，点击其中的“关闭”链接，可以关闭此对话框窗口。 图5.3 注册须知第132页，共339页。项目情境在图5.2的注册页面的简介文本区域框中填入简介信息，点击“编辑”按钮，打开如图5.4所示的页面，在该页面中可以重新编辑简介信息，编辑完成后，点击“确定修

59、改并关闭本窗口”按钮，将本窗口关闭，并且把重新编辑的简介信息更新到注册页面的简介文本区域框中。图5.4 编辑简介页面第133页，共339页。项目情境点击图5.2注册页面中的“首页”按钮，页面跳转到图5.1所示的首页，点击“关闭”按钮，直接关闭注册页面。 第134页，共339页。掌握窗体对象Window的常用属性和方法。掌握地址对象Location的常用属性和方法。掌握历史对象History的常用属性和方法。掌握屏幕对象Screen的常用属性和方法。掌握浏览器对象Navigator的常用属性和方法。学习目标第135页，共339页。在如图5.5的页面上有三个按钮，点击“关闭本窗口”按钮，弹出如图5

60、.6所示的关闭窗口选择对话框，点击“是”按钮，当前窗口关闭，点击“否”，不关闭当前窗口。点击“立即关闭本窗口”按钮，窗口立即关闭，不弹出如图5.6所示的选择对话框。点击“打开子窗口”按钮，打开如图5.7所示的窗口，点击该窗口上的“关闭本窗口”按钮，窗口立即关闭，不弹出如图5.6所示的选择对话框。任务1 打开和关闭窗口图5.5 主窗口图5.6 关闭窗口选择对话框图5.7 子窗口第136页，共339页。1、窗口对象Window Window对象代表的是整个浏览器窗口。【相关知识】属性描述 closed获取引用窗口是否已关闭。 defaultStatus设置或获取要在窗口底部的状态栏上显示的缺省信息