【网页设计教案】JavaScript分支与循环程序设计.docVIP

教学项目二十 JavaScript分支与循环程序设计 【教学内容】 讲解JavaScript函数定分支程序及循环程序设计 【教学目的】 使学生学会设计JavaScript多分支程序，循环程序 【教学重点】 JavaScript循环程序设计 【教学难点】 JavaScript循环程序设计 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．JavaScript 入门与提高 杨浩著 清华大学出版社 2．Internet 网页工场 Wittime工作室 重庆出版社 3．JavaScript从入门到精通 电脑报社出版 4．JavaScript编程起步 人民邮电出版社 【教学过程】 【新课】 案例设计： 设计猜用户密码的网页 程序代码如下： html head script language=javascript function display() { var p=false; p=confirm(数据输入完毕?); if (p) document.message.answer.value=document.message.inter.value else alert(you are welcome...) } /script /head body form name=message p请输入密码:input type=password name=inter size=12 input type=button value=我来猜 onclick=display()br p你输出的密码是: input type=text name=answer size=12 /form /body /html JavaScript多分支语句 格式： switch (表达式) { case 标号1 语句1 case 标号2 语句2 case 标号3 语句3 … case 标号n 语句n } 例二、 设计网页，能获取系统日期，并显示对应的星期值。 html head script language=javascript var week; var p=new Date( ); switch (p.getDay()) { case 0: document.write(今天是+(p.getMonth( )+1)+月+p.getDate( )+日+星期日);break; case 1: document.write(今天是+(p.getMonth( )+1)+月+p.getDate( )+日+星期一);break; case 2: document.write(今天是+(p.getMonth( )+1)+月+p.getDate( )+日+星期二);break; case 3: document.write(今天是+(p.getMonth( )+1)+月+p.getDate( )+日+星期三);break; case 4: document.write(今天是+(p.getMonth( )+1)+月+p.getDate( )+日+星期四);break; case 5: document.write(今天是+(p.getMonth( )+1)+月+p.getDate( )+日+星期五);break; case 6: document.write(今天是+(p.getMonth( )+1)+月+p.getDate( )+日+星期六);break; } /script /head /html 三、循环程序设计 JavaScript中的循环程序可以使用for,while语句实现。 案例三、使用for语句实现打开网页时弹出多个窗口。 html head script language=JavaScript function pop() { for(i=1;i=3;i++) { window.open(a2.htm,,width=400,height=260) } } /script /head body form name=form p align=center input type=button value=这回只是三个窗口!!! onClick=pop() /p /form /body /html 案例四、设计状态栏跳动字符的网页。 在状态栏中闪烁出现you are welcome信息。 html body script var yourwords = you are welcome ; var speed = 700; var control = 1; function fla