实验javascript程序设计.docx
《实验javascript程序设计.docx》由会员分享,可在线阅读,更多相关《实验javascript程序设计.docx(19页珍藏版)》请在冰豆网上搜索。
实验javascript程序设计
实验项目二十 javascript程序设计
【学时数】2(45分钟×2=90分钟)
【实验内容】
1、JavaScript变量、表达式和运算符的使用
2、JavaScript对话框的使用
3、JavaScript函数的定义及调用
4、JavaScript分支结构程序设计
5、JavaScript循环结构程序设计
【实验参考书】
《网页设计与制作》…………………………………………………………重庆大学出版社
《网页标题制作技巧与实例》………………………………………………清华大学出版社
《javascript入门与提高》………………………………………………清华大学出版社
《javascript宝典》………………………………………………………电子工业出版社
【实验设备】
计算机,投影机,多媒体
【实验目的与要求】
1、掌握JavaScript变量、表达式和运算符的使用
2、掌握JavaScript对话框的使用
3、掌握JavaScript函数的定义及调用
4、掌握分支结构的JavaScript程序设计
5、掌握循环结构的JavaScript程序设计
【实验重点】
1、掌握JavaScript函数的定义及调用
2、掌握分支结构的JavaScript程序设计
3、掌握循环结构的JavaScript程序设计
【实验难点】
1、掌握分支结构的JavaScript程序设计
2、掌握循环结构的JavaScript程序设计
【实验方式】
1、项目工程互动式教学法
2、“讲、学、练”相结合:
对于javscript程序设计相关细节,大量采用演示、讲解和操作等方式。
使学生在实验中加深对相关内容的理解并熟练掌握。
【实验设计】
向学生演示多个javascript程序设计案例,学生跟着教师一起完成javascript程序的编写,同时完成教师布置的思考题,教师实施指导。
第一步:
演示JavaScript变量、表达式和运算符的使用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(10分钟左右)
第二步:
演示JavaScript对话框的使用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(20分钟左右)
第三步:
演示JavaScript函数的定义及调用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(20分钟左右)
第四步:
演示分支结构的JavaScript程序设计,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(20分钟左右)
第五步:
演示循环结构的JavaScript程序设计,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(20分钟左右)
>
【实验过程】
实验内容一:
JavaScript变量、表达式和运算符
教师演示JavaScript变量、表达式和运算符的程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
1、程序案例1-显示年龄
varname;香港\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("错!
上海是中国东部的大都市");
break;
default:
alert("选择错误!
只能选填字母A、B、C或D");
break;
}
3、思考题:
根据成绩给出学生的考评:
如果成绩>=85,考评“优”,否则如果成绩>=60,考评“及格”,否则考评为“不及格”。
varscore,grade;
score=parseFloat(prompt("请输入学生的成绩:
",""));
if(score>=85)
grade="优";
elseif(score>=75)
grade="中";
elseif(score>=60)
grade="及格";
else
grade="不及格";
alert("根据学生成绩:
"+score+",评定为:
"+grade);
实验内容五:
JavaScript循环结构程序设计
教师演示JavaScript循环结构程序设计的程序案例,学生按照教师的操作步骤,自己编写该程序。
1、循环结构程序案例1-求1+2+3+…+100的累计和
vari,sum=0;
for(i=1;i<=100;i++){
sum+=i;
}
("1+2+3+...+100="+sum);
2、循环结构程序案例2-二位整数相加的测试程序
vargo_on,x,y,result,answer
do{
x=()*90)+10;
y=()*90)+10;
result=x+y;
answer=parseFloat(prompt(x+"+"+y+"=","0"));
go_on=confirm(((answer==result)"答对":
"答错")+"!
\t继续测试吗")
}while(go_on)
3、循环结构程序案例3-累加用户输入的整数
varinput,input_number,sum
for(sum=0;;){
input=prompt("sum="+sum+"\n请输入新的累加数(输入Q结束):
","0");
if(input==null||input=="Q"||input=="q")break;
if(isNaN(input))continue;
input_number=parseFloat(input);
if(input_number<=0)continue;
sum+=input_number;
}
alert("sum="+sum);
4、思考题:
在页面上显示一个“9×9乘法表”。
vari,j
("
") for(i=1;i<=9;i++)
{
for(j=1;j<=i;j++)
{
if(j>1)("\t");
(j+"*"+i+"="+j*i);
}
();
}
("
")
【实验小结】
通过这次实验,同学们熟悉了JavaScript变量、表达式和运算符,理解了JavaScript对话框的使用,掌握了JavaScript函数的定义及调用,掌握了分支结构的JavaScript程序设计,掌握了循环结构的JavaScript程序设计。
~
实验项目二十一 内置函数和对象
【学时数】2(45分钟×2=90分钟)
,
【实验内容】
1、JavaScript内置函数的应用
2、JavaScript内置对象的应用
3、JavaScript浏览器对象的应用
【实验参考】
《网页设计与制作》…………………………………………………………重庆大学出版社
《网页标题制作技巧与实例》………………………………………………清华大学出版社
《javascript入门与提高》………………………………………………清华大学出版社
《javascript宝典》………………………………………………………电子工业出版社
【实验设备】
计算机,投影机
【实验目的与要求】
1、掌握JavaScript内置函数的使用方法
2、掌握JavaScript常用内置对象的属性和方法
3、掌握JavaScript浏览器对象的含义
4、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。
【实验重点】
1、掌握JavaScript内置函数的使用方法
2、掌握JavaScript常用内置对象的属性和方法
3、掌握JavaScript浏览器对象的含义
&
【实验难点】
1、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。
【实验方式】
1、项目工程互动式教学法
2、“讲、学、练”相结合:
对于javascript内置函数和对象相关细节,大量采用演示、讲解和操作等方式。
使学生在实验中加深对相关内容的理解并熟练掌握。
【实验设计】
向学生演示多个javascrip内置函数和对象的程序案例,学生跟着教师一起完成javascript程序的编写,同时完成教师布置的思考题,教师实施指导。
第一步:
演示JavaScript内置函数的应用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(20分钟左右)
第二步:
演示JavaScript常用内置对象的应用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(35分钟左右)
第三步:
演示JavaScript浏览器对象的应用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(35分钟左右)
【实验过程】
实验内容一:
JavaScript内置函数的应用
教师演示JavaScript内置函数应用的程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
1、eval():
计算字符串表达式的值
2、parseFloat()和parseInt():
将字符串开头的整数或浮点数分解出来,转换为整数或浮点数
3、isNaN():
确定一个变量是否为NaN(NotaNumber)
4、escape():
将字符串中的非字母数字字符转换为按格式%XX表示的数字
5、unescape():
将字符串格式为%XX的数字转换为字符
6、程序案例1_1:
求用户在提示对话框中输入的表达式的值。
alert(eval(prompt("请输入一个常量表达式,运算符可以是JavaScript所允许的任何运算符,而操作数只能是常量。
如 123*321/9,我将为您计算出结果。
","65+98+96")))
7、思考题:
判断用户输入的字符是不是数字,如果是,分别将其转换成浮点数和整数,并显示到网页上。
varinput=prompt("请输入字符!
","");
alert(isNaN(input)"你输入的不是数字":
"你输入的是数字");
if(!
isNaN(input)){
(parseInt(input)+"
");
(parseFloat(input));
}
实验内容二:
JavaScript内置对象的应用
教师演示JavaScript内置对象应用的程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
一、对象的基本概念
1、什么是对象
对象用于描述客观世界存在的特定实体。
在计算机世界中,不仅存在来自于客观世界的对象,也包含为解决问题而引入的抽象对象 。
2、对象的属性和方法
在JavaScript中,对象就是属性和方法的集合。
方法是作为对象成员的函数表明对象所具有的行为,属性是作为对象成员的一组变量,表明对象的状态。
通过访问或设置对象的属性,并且调用对象的方法,就可以对对象进行各种操作,从而获得需要的功能。
调用对象的一个方法类似于调用一个函数。
使用对象的一个属性则类似于使用一个变量。
二、Math对象
1、Math对象的属性是数学中常用的常量,如圆周率PI,自然对数的底E等。
2、Math对象的方法则是一些十分有用的数学函数,如sin()、random()、log()等。
3、在调用Math对象的属性和方法时,直接写成:
Math.属性和Math.方法。
4、案例2_1:
求PI的5次方,并四舍五入取整。
varnumber=,5));
("PI的5次方的值为:
"+number);
5、思考题:
设计javascript程序,在网页上随机显示10个两位整数。
for(i=1;i<=10;i++){
varnumber=()*90)+10;
("随机数"+i+":
"+number+"
");
}
三、Date对象
1、Date对象的主要方法
常用方法:
设置和获取日期中的年、月、日、小时、分、秒和毫秒等
2、创建Date对象
要使用Date对象,必须先使用new运算符创建它。
创建Date对象的常见方式有三种:
(1)不带参数vartoday=newDate();
(2)创建一个指定日期的Date变量vartheDate=newDate(2000,9,1);
(3)创建一个指定时间的Date变量vartheTime=newDate(2000,9,1,10,20,30,50)
3、案例2_2:
计算求1+2+3+…10000之和所需要的运行时间(毫秒数)。
vart1,t2,htime,i,sum=0;
t1=newDate();
("循环前的时间:
"+()+":
"+()+"
");
for(i=1;i<=10000;i++)sum+=i;
t2=newDate();
("循环后的时间:
"+()+":
"+()+"
");
htime=()-();
("执行10000次循环用时:
"+htime+"毫秒
")
4、思考题:
在网页上显示当前日期和时间,并显示是星期几。
varweek,today,week_i;
week=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
today=newDate();
year=();123”hecked)returneffects[i].value;
}
return"[没有选择]";
}
functionGetSelectedPrograms(programs)
{
vari,result="";
for(i=0;i<;i++)
{
if(programs[i].checked)result+="["+programs[i].value+"]";
}
returnresult;
}
functionShowResult()
{
varf,msg;
f=;
msg="您感觉本站:
"+GetSelectedEffect;
msg+="\n您希望本站出现以下以下栏目:
"+GetSelectedPrograms;
alert(msg);
}
【实验小结】
通过本次实验,同学们学会了javascript内置函数的使用方法,熟悉了javascript多个内置对象的属性和方法,要求重点掌握浏览器对象的含义,以及如何使用浏览器对象提供的信息来完成一定功能的网页设计。
实验项目二十二 javascript事件处理
}
【学时数】2(45分钟×2=90分钟)
【实验内容】
1.浏览器事件及处理
2.鼠标事件及处理
3.键盘事件及处理
4.其他事件及处理
【实验参考】
《网页设计与制作》……………………………………………………………重庆大学出版社
《网页标题制作技巧与实例》…………………………………………………清华大学出版社
《javascript入门与提高》……………………………………………………清华大学出版社
《javascript宝典》……………………………………………………………电子工业出版社
【实验设备】计算机、投影机
【实验目的与要求】
1.了解JavaScript事件处理的基本概念
2.理解JavaScript事件处理模型
3.掌握JavaScript常用事件及处理
^
【实验重点】
1.理解JavaScript事件处理模型
2.掌握JavaScript常用事件处理
【实验难点】掌握JavaScript常用事件及处理
【实验方式】
1.项目工程互动式教学法
2.“讲、学、练”相结合:
对于javascript事件处理相关细节,大量采用演示、讲解和操作等方式。
使学生在实验中加深对相关内容的理解并熟练掌握。
【实验设计】
向学生演示多个javascrip事件处理的程序案例,学生跟着教师一起完成javascript程序的编写,同时完成教师布置的思考题,教师实施指导。
第一步:
演示JavaScript浏览器事件及处理程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(20分钟左右)
第二步:
演示JavaScript鼠标事件及处理程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(20分钟左右)
第三步:
演示JavaScript键盘事件及处理程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(25分钟左右)
第四步:
演示JavaScript其他事件及处理程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
(25分钟左右)
【实验过程】
&
实验内容一:
浏览器事件及处理
教师演示JavaScript浏览器事件及处理程序案例,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。
1、load事件:
发生在浏览器完成网页的加载之后。
')">
欢迎访问我的主页!