实验javascript程序设计.docx

1、实验javascript程序设计实验项目二十 javascript程序设计 【学 时 数】 2 （ 45 分钟 2=90 分钟） 【实验内容】 1 、 JavaScript 变量、表达式和运算符的使用 2 、 JavaScript 对话框的使用 3 、 JavaScript 函数的定义及调用 4 、 JavaScript 分支结构程序设计 5 、 JavaScript 循环结构程序设计 【实验参考书】 网页设计与制作 重庆大学出版社 网页标题制作技巧与实例 清华大学出版社 javascript 入门与提高 清华大学出版社 javascript 宝典 电子工业出版社 【实验设备】 计算机，投影机

2、，多媒体 ,【实验目的与要求】 1 、掌握 JavaScript 变量、表达式和运算符的使用 2 、掌握 JavaScript 对话框的使用 3 、掌握 JavaScript 函数的定义及调用 4 、掌握分支结构的 JavaScript 程序设计 5 、掌握循环结构的 JavaScript 程序设计 【实验重点】 1 、掌握 JavaScript 函数的定义及调用 2 、掌握分支结构的 JavaScript 程序设计 3 、掌握循环结构的 JavaScript 程序设计 【实验难点】 1 、掌握分支结构的 JavaScript 程序设计 2 、掌握循环结构的 JavaScript 程序设计 【

3、实验方式】 1 、项目工程互动式教学法 2 、“讲、学、练”相结合：对于 javscript 程序设计相关细节，大量采用演示、讲解和操作等方式。使学生在实验中加深对相关内容的理解并熟练掌握。 【实验设计】 向学生演示多个 javascript 程序设计案例，学生跟着教师一起完成 javascript 程序的编写，同时完成教师布置的思考题，教师实施指导。 第一步：演示 JavaScript 变量、表达式和运算符的使用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （ 10 分钟左右） 第二步：演示 JavaScript 对话框的使用，学生按照教师的操作步骤，自己动手编写该

4、程序，并完成教师布置的思考题。 （ 20 分钟左右） 第三步：演示 JavaScript 函数的定义及调用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （ 20 分钟左右） 第四步：演示分支结构的 JavaScript 程序设计，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （ 20 分钟左右） 第五步：演示循环结构的 JavaScript 程序设计，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （ 20 分钟左右） 【实验过程】 实验内容一： JavaScript 变量、表达式和运算符 教师演示 JavaScript

5、变量、表达式和运算符的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 1 、程序案例 1 显示年龄 var name; 香港 tB. 广州 tC. 北京 tD. 上海 ,E); switch(answer) case a: case A: alert( 错！香港是中国的特别特政区 ); break; case b: case B: alert( 错！广州是中国南部的大都市 ); break; case c: case C: alert( 对！北京是中国的首都，在中国北方 ); break; case d: case D: alert( 错！上海是中国东部的大都市

6、 ); break; default: alert( 选择错误 ! 只能选填字母 A 、 B 、 C 或 D); break; 3 、思考题： 根据成绩给出学生的考评：如果成绩 =85, 考评 “ 优 ” ，否则如果成绩 =60 ，考评 “ 及格 ”, 否则考评为 “ 不及格 ” 。 var score,grade; score = parseFloat(prompt( 请输入学生的成绩 :,); if (score=85) grade= 优 ; else if (score=75) grade= 中 ; else if (score=60) grade= 及格 ; else grade= 不

7、及格 ; alert( 根据学生成绩 : + score +, 评定为 : + grade); 实验内容五： JavaScript 循环结构程序设计 教师演示 JavaScript 循环结构程序设计的程序案例，学生按照教师的操作步骤，自己编写该程序。 1 、循环结构程序案例 1 求 1+2+3+100 的累计和 var i,sum=0; for(i=1;i=100;i+) sum += i; (1+2+3+.+100=+sum); 2 、循环结构程序案例 2 二位整数相加的测试程序 var go_on,x,y,result,answer do x = () *90)+10; y = () *9

8、0)+10; result = x+y; answer = parseFloat(prompt(x + + + y + =,0); go_on = confirm(answer=result) 答对 : 答错 ) + ！ t 继续测试吗 ) while(go_on) 3 、循环结构程序案例 3 累加用户输入的整数 var input,input_number,sum for(sum=0;) input = prompt(sum=+sum + n 请输入新的累加数 ( 输入 Q 结束 ):,0); if (input=null | input=Q | input=q) break; if (is

9、NaN(input) continue; input_number = parseFloat(input); if (input_number=0) continue; sum += input_number; alert(sum=+sum); 4 、思考题： 在页面上显示一个 “9 9 乘法表 ” 。 var i,j () for(i=1;i=9;i+) for(j=1;j1) (t); (j+*+i+=+j*i); (); () 【实验小结】 通过这次实验，同学们熟悉了 JavaScript 变量、表达式和运算符，理解了 JavaScript 对话框的使用，掌握了 JavaScript 函

10、数的定义及调用，掌握了分支结构的 JavaScript 程序设计，掌握了循环结构的 JavaScript 程序设计。 实验项目二十一内置函数和对象【学 时 数】 2 （ 45 分钟 2=90 分钟） ，【实验内容】 1 、 JavaScript 内置函数的应用 2 、 JavaScript 内置对象的应用 3 、 JavaScript 浏览器对象的应用 【实验参考】 网页设计与制作 重庆大学出版社 网页标题制作技巧与实例 清华大学出版社 javascript 入门与提高 清华大学出版社 javascript 宝典 电子工业出版社【实验设备】 计算机，投影机 【实验目的与要求】 1 、掌握 Ja

11、vaScript 内置函数的使用方法 2 、掌握 JavaScript 常用内置对象的属性和方法 3 、掌握 JavaScript 浏览器对象的含义 4 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。 【实验重点】 1 、掌握 JavaScript 内置函数的使用方法 2 、掌握 JavaScript 常用内置对象的属性和方法 3 、掌握 JavaScript 浏览器对象的含义 &【实验难点】 1 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。 【实验方式】 1 、项目工程互动式教学法 2 、“讲、学、练”相结合：对于 javascript 内置函数和对象相关细节，大量采用

12、演示、讲解和操作等方式。使学生在实验中加深对相关内容的理解并熟练掌握。 【实验设计】 向学生演示多个 javascrip 内置函数和对象的程序案例，学生跟着教师一起完成 javascript 程序的编写，同时完成教师布置的思考题，教师实施指导。 第一步：演示 JavaScript 内置函数的应用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （ 20 分钟左右） 第二步：演示 JavaScript 常用内置对象的应用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （ 35 分钟左右） 第三步：演示 JavaScript 浏览器对象的应用，学生按照

13、教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （ 35 分钟左右） 【实验过程】 实验内容一： JavaScript 内置函数的应用 教师演示 JavaScript 内置函数应用的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 1 、 eval( ) ：计算字符串表达式的值 2 、 parseFloat( ) 和 parseInt( ) ：将字符串开头的整数或浮点数分解出来，转换为整数或浮点数 3 、 isNaN( ) ：确定一个变量是否为 NaN （ Not a Number ） 4 、 escape( ) ：将字符串中的非字母数字字符转换为按

14、格式 %XX 表示的数字 5 、 unescape( ) ：将字符串格式为 %XX 的数字转换为字符 6 、程序案例 1_1 ：求用户在提示对话框中输入的表达式的值。 alert(eval(prompt( 请输入一个常量表达式 , 运算符可以是 JavaScript 所允许的任何运算符 , 而操作数只能是常量。如 123*321/9, 我将为您计算出结果。 ,65+98+96) 7 、思考题：判断用户输入的字符是不是数字，如果是，分别将其转换成浮点数和整数，并显示到网页上。 var input = prompt( 请输入字符！ ,); alert(isNaN(input) 你输入的不是数字 :

15、 你输入的是数字 ); if(!isNaN(input) (parseInt(input)+); (parseFloat(input); 实验内容二： JavaScript 内置对象的应用 教师演示 JavaScript 内置对象应用的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 一、对象的基本概念 1 、什么是对象 对象用于描述客观世界存在的特定实体。在计算机世界中，不仅存在来自于客观世界的对象，也包含为解决问题而引入的抽象对象。 2 、对象的属性和方法 在 JavaScript 中，对象就是属性和方法的集合。 方法是作为对象成员的函数表明对象所具有的行为，

16、属 性是作为对象成员的一组变量，表明对象的状态。 通过访问或设置对象的属性，并且调用对象的方法，就可以对对象进行各种操作，从而获得需要的功能。 调用对象的一个方法类似于调用一个函数。 使用对象的一个属性则类似于使用一个变量。 二、 Math 对象 1 、 Math 对象的属性是数学中常用的常量，如圆周率 PI ，自然对数的底 E 等。 2 、 Math 对象的方法则是一些十分有用的数学函数，如 sin() 、 random() 、 log() 等。 3 、在调用 Math 对象的属性和方法时，直接写成： Math. 属性和 Math. 方法。 4 、案例 2_1 ：求 PI 的 5 次方，并四

17、舍五入取整。 var number = ,5); (PI 的 5 次方的值为： +number); 5 、思考题：设计 javascript 程序，在网页上随机显示 10 个两位整数。 for(i=1;i=10;i+) var number = ()*90)+10; ( 随机数 +i+ ： +number+); 三、 Date 对象 1 、 Date 对象的主要方法 常用方法 : 设置和获取日期中的年、月、日、小时、分、秒和毫秒等 2 、创建 Date 对象 要使用 Date 对象，必须先使用 new 运算符创建它。创建 Date 对象的常见方式有三种： (1) 不带参数 var today

18、= new Date(); (2) 创建一个指定日期的 Date 变量 var theDate = new Date(2000, 9, 1); (3) 创建一个指定时间的 Date 变量 var theTime = new Date(2000, 9, 1, 10, 20,30,50) 3 、案例 2_2 ：计算求 1+2+3+10000 之和所需要的运行时间 ( 毫秒数 ) 。 var t1,t2,htime,i,sum=0; t1 = new Date(); ( 循环前的时间 :+()+:+()+); for(i=1;i=10000;i+) sum+=i; t2 = new Date();

19、( 循环后的时间 :+()+:+()+); htime = () - (); ( 执行 10000 次循环用时 :+ htime+ 毫秒 ) 4 、思考题：在网页上显示当前日期和时间，并显示是星期几 。 var week,today,week_i; week=new Array( 星期日 , 星期一 , 星期二 , 星期三 , 星期四 , 星期五 , 星期六 ); today=new Date(); year=();123”hecked) return effectsi.value; return 没有选择 ; function GetSelectedPrograms(programs) va

20、r i,result=; for(i=0;i;i+) if(programsi.checked) result += +programsi.value+; return result; function ShowResult() var f,msg; f = ; msg = 您感觉本站 :+GetSelectedEffect; msg += n 您希望本站出现以下以下栏目 :+GetSelectedPrograms; alert(msg); 【实验小结】 通过本次实验，同学们学会了 javascript 内置函数的使用方法，熟悉了 javascript 多个内置对象的属性和方法，要求重点掌握浏

21、览器对象的含义，以及如何使用浏览器对象提供的信息来完成一定功能的网页设计。 实验项目二十二 javascript事件处理 【学 时 数】 2 （ 45 分钟 2=90 分钟） 【实验内容】 1. 浏览器事件及处理 2. 鼠标事件及处理 3. 键盘事件及处理 4. 其他事件及处理 【实验参考】 网页设计与制作 重庆大学出版社 网页标题制作技巧与实例 清华大学出版社 javascript入门与提高 清华大学出版社 javascript宝典 电子工业出版社 【实验设备】 计算机、投影机 【实验目的与要求】 1. 了解 JavaScript 事件处理的基本概念 2. 理解 JavaScript 事件处

22、理模型 3. 掌握 JavaScript 常用事件及处理 【实验重点】 1. 理解 JavaScript 事件处理模型 2. 掌握 JavaScript 常用事件处理 【实验难点】 掌握 JavaScript 常用事件及处理 【实验方式】1. 项目工程互动式教学法 2. “讲、学、练”相结合：对于 javascript 事件处理相关细节，大量采用演示、讲解和操作等方式。使学生在实验中加深对相关内容的理解并熟练掌握。 【实验设计】 向学生演示多个 javascrip 事件处理的程序案例，学生跟着教师一起完成 javascript 程序的编写，同时完成教师布置的思考题，教师实施指导。 第一步：演示

23、 JavaScript 浏览器事件及处理程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。（20分钟左右） 第二步：演示 JavaScript 鼠标事件及处理程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （20分钟左右） 第三步：演示 JavaScript 键盘事件及处理程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （25分钟左右） 第四步：演示 JavaScript 其他事件及处理程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 （25分钟左右） 【实验过程】 &实验

24、内容一：浏览器事件及处理 教师演示 JavaScript 浏览器事件及处理程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 1、 load 事件：发生在浏览器完成网页的加载之后。 欢迎访问我的主页！ 2、 unload 事件：发生在浏览器载入新网页之前。 3、submit 事件：发生在提交表单数据给服务器处理时。 function checkit() 思考题 计算用户在网页上的停留时间。 pageOpen = new Date(); function stay() pageClose = new Date(); minutes = () - (); seconds = () - (); time = (seconds + (minutes * 60); time = (time + 秒钟 ); alert( 您在这儿停留了 + time + . 欢迎下次再来 !); 实验内容二： 鼠标事件及处理 教师演示 JavaScript 鼠标事件及处理程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 1. MouseMove 事件：发生在移动鼠标的时候。 var timeout; function load() timeout=setTimeout(navigate();