湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目二十 JavaScript分支与循环程序设计 【教学内容】 讲解 JavaScript函数定分支程序及循环程序设计 【教学目的】 使学生学会设计 JavaScript多分支程序,循环程序 【教学重点】 JavaScript循环程序设计 【教学难点】 JavaScript循环程序设计 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1.<< JavaScript入门与提高〉〉杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通> 电脑报社出版 4.< JavaScript编程起步 人民邮电出版社 【教学过程】 【新课】 一、案例设计
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十 JavaScript 分支与循环程序设计 【教学内容】 讲解 JavaScript 函数定分支程序及循环程序设计 【教学目的】 使学生学会设计 JavaScript 多分支程序，循环程序 【教学重点】 JavaScript 循环程序设计 【教学难点】 JavaScript 循环程序设计 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime 工作室 重庆出版社 3．<<JavaScript 从入门到精通>> 电脑报社出版 4．<<JavaScript 编程起步>> 人民邮电出版社 【教学过程】 【新课】 一、案例设计：
湖北职晚计算机科学与技术理论课教案一《网页设计》 设计猜用户密码的网页 ⊙x的收微的份,品 请轴入密码:[我来 你输出的密码是; 程序代码如下 <html> Head> Script language=javascript> function display o var p-ialse, p= confirm("数据输入完毕?") document message. answer. value=document. message. inter. value alert(" you are welcome.") </script> </head> <body <form name=message> <p>请输入密码:< input type= password name= inter size=12〉 < Input type= button value≡我来猜 onclick= display0>br p>你输出的密码是
湖北职院计算机科学与技术系理论课教案—《网页设计》 设计猜用户密码的网页 程序代码如下： <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>) </htmI> JavaScript多分支语句 格式 switch(表达式) case标号1语句1 case标号2语句2 case标号3语句3 case标号n语句n 例二、设计网页,能获取系统日期,并显示对应的星期值 收一煤体·□ <htm> Head> <script language"javascript"> var weeK, var p=new Date()
湖北职院计算机科学与技术系理论课教案—《网页设计》 <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. get Day o) case0: document. write("今天是"+(p. getMonth()+1)+"月"+p. getDate()+日"+"星期日"); break case1: document. write("今天是"+(p. getMonth()+1)+"月"+p. getDate()+日"+"星期—"); break; case2: document. write("今天是"+(p. getMonth()+1)+"月"+p. getDate()+"日"+"星期二"); break case3: document. write("今天是"+(p. getMonth()+1)+"月"+p. getDate()+"日"+"星期三"); break; case4: document. write("今天是"+(p. getMonth()+1)+"月"+p. getDate()+"日"+"星期四"); break; case5: document. write("今天是"+(p. getMonth()+1)+"月"+p. getDate()+"日"+"星期五"): break case6: document. write("今天是”+(p. getMonth()+1)+"月"+p. getDate()+"日"+"星期六"); break </script> /head> </htmI> 循环程序设计 JavaScript中的循环程序可以使用for, while语句实现 案例三、使用for语句实现打开网页时弹出多个窗口 节数代吗飞无限 件￠)《)查看①)收6)工具①)帮助0 后6必)搜收夹的湖修,品8·口当 地址①)G:特效代无限窗口2t 转到铸” 匚这回只是不 <html> <head> Script language="JavaScript"> function pop o for(i=1;i<=3;i++)
湖北职院计算机科学与技术系理论课教案—《网页设计》 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> < form name="form”> Kp align=center"> < input type=" button" value="这回只是三个窗口!!! onClick="pop0" /form> </body> </html> 案例四、设计状态栏跳动字符的网页 收m可体也··□ = m必收两的体也,·□ 1特效代状杜,和 ②特” 在状态栏中闪烁出现 you are we come信息
湖北职院计算机科学与技术系理论课教案—《网页设计》 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 信息