教学项目二十 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 flash() { if (control == 1) { window.status=yourwords; control=0; } else { window.status=" "; control=1; } setTimeout("flash()",speed); } window.onload=flash(); </script> </body> </html> 【课后小结】 本次课程介绍了JavaScript分支程序与循环程序的基本结构，同时使用分支语句和循环语句设计了四个JavaScript特效网页，在学习过程中逐步学习自己设计JavaScript 特效网页。