实验-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－显示年龄scriptlanguage=javascriptvarname;//声明变量namevarage;//声明变量agename=张三;//把字符串张三存储到变量name中age=20;//把整数20存储到变量age中document.write(name);//读取变量name的值，并将它显示在页面上document.write(的年龄是:);//在页面上输出的年龄是:document.write(age);//读取变量age的值，并将它显示在页面上/script2、程序案例2－税额计算scriptlanguage=javascriptvarlist,rate=0.05,paid=105,tax;//list:标价;rate:税率;paid:付款额;tax:税额list=paid/(1+rate);//标价=付款额/(1+税率)tax=paid-list;document.writeln(标价=+list);document.writeln(税额=+tax);/script3、思考题：设计JavaScript程序，在网页上输出半径为3的圆的面积和周长。scriptlanguage=javascriptvarr=3;varpi=3.1415;document.writeln(圆的半径为：+r);document.writeln(圆的面积为：+pi*r*r);document.writeln(圆的周长为：+2*pi*r);/script实验内容二：JavaScript对话框教师演示JavaScript对话框的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。1、警示对话框程序案例scriptlanguage=javascriptalert(欢迎浏览本页面！);/script2、确认对话框程序案例scriptlanguage=javascriptvarvisited,show_text;visited=confirm(您来过湖北职院吗？);show_text=visited?您也认为湖北职院很美吧！:欢迎您有机会来湖北职院参观!;document.write(show_text);/script3、提示对话框程序案例scriptlanguage=javascriptvarname;name=prompt(请输入您的姓名:,);document.write(尊敬的+name+：欢迎您进入我的主页！);/script4、思考题：设计密码检测程序，密码输入正确，显示“欢迎访问”，不正确显示“密码不正确，好好想哟”。scriptvarpassword=123456;varanswer=prompt(请输入你的密码,);alert((answer==password)?欢迎访问:密码不正确，好好想想哟！);/script实验内容三：JavaScript函数的定义及调用教师演示JavaScript函数的定义及调用的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。1、程序案例1－素数判断scriptlanguage=javascriptfunctionIsPrime(p){if(p1)returnfalse;vari;for(i=2;ip;i++)if(p%i==0)returnfalse;returntrue;}varx;x=parseInt(prompt(请输入1-100之间的数字,1));alert(该数是否为素数：+IsPrime(x));/script2、程序案例2－局部变量和全局变量scriptlanguage=javascriptfunctionfirst(p,q){p=p*2;b=b+1;varc=100;document.writeln(P的值为：,p,br);document.writeln(a的值为：,a,br);document.writeln(b的值为：,b,br);document.writeln(c的值为：,c,br);}vara=1,b=2,c=3;first(a,b);document.writeln(a的值为：,a,br);document.writeln(b的值为：,b,br);document.writeln(c的值为：,c,br);/script3、思考题：设计检测手机号码的程序。scriptlanguage=javascriptfunctiontest(obj){if(obj.length!=11)alert(手机号码应该是11位数字);elseif(obj.substring(0,2)!=13)alert(手机号码应该以13开头);elseif(isNaN(obj))alert(手机号码应该是11位数字);elsealert(你填的是正确的手机号码);}/script检测手机号码：brformname=form1示例：inputtype=textname=numberinputtype=buttonvalue='提交'onclick=test(document.form1.number.value)/form实验内容四：JavaScript分支结构程序设计教师演示JavaScript分支结构程序设计的程序案例，学生按照教师的操作步骤，自己动手编写该程序。1、分支结构程序案例1－两个数排序scriptlanguage=javascriptvarx,y,temp;x=parseFloat(prompt(请输入x的值：,0));y=parseFloat(prompt(请输入y的值：,0));if(xy){temp=x;x=y;y=temp;}document.writeln(排序后,x=+x+;y=+y)/script2、分支结构程序案例2－常识问答scriptlanguage=javascriptvaranswer;answer=prompt(中国的首都在哪个城市?\nA.香港\tB.广州\tC.北京\tD.上海,E);switch(answer){casea:caseA:alert(错！香港是中国的特别特政区);break;caseb:caseB:alert(错！广州是中国南部的大都市);break;casec:caseC:alert(对！北京是中国的首都，在中国北方);break;cased:caseD:alert(错！上海是中国东部的大都市);break;default:alert(选择错误!只能选填字母A、B、C或D);break;}/script3、思考题：根据成绩给出学生的考评：如果成绩=85,考评“优”，否则如果成绩=60，考评“及格”,否则考评为“不及格”。scriptlanguage=javascriptvarscore,grade;score=parseFloat(prompt(请输入学生的成绩:,));if(score=85)grade=优;elseif(score=75)grade=中;elseif(score=60)grade=及格;elsegrade=不及格;alert(根据学生成绩:+score+,评定为:+grade);/script实验内容五：JavaScript循环结构程序设计教师演示JavaScript循环结构程序设计的程序案例，学生按照教师的操作步骤，自己编写该程序。1、循环结构程序案例1－求1+2+3+…+100的累计和scriptlanguage=javascriptvari,sum=0;for(i=1;i=100;i++){sum+=i;}document.write(1+2+3+...+100=+sum);/script2、循环结构程序案例2－二位整数相加的测试程序scriptlanguage=javascriptvargo_on,x,y,result,answerdo{x=Math.floor(Math.random()*90)+10;y=Math.floor(Math.random()*90)+10;result=x+y;answer=parseFloat(prompt(x+++y+=,0));go_on=confirm(((answer==result)?答对:答错)+！\t继续测试吗?)}while(go_on)/script3、循环结构程序案例3－累加用户输入的整数scriptlanguage=javascriptvarinput,input_number,sumfor(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_