湖北职业技术学院：《网页设计》理论课 教学项目二十《JavaScript《分支与循环程序设计

湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目二十 JavaScript分支与循环程序设计 【教学内容】 讲解 JavaScript函数定分支程序及循环程序设计 【教学目的】 使学生学会设计 JavaScript多分支程序,循环程序 【教学重点】 JavaScript循环程序设计 【教学难点】 JavaScript循环程序设计 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1. 电脑报社出版 4.< JavaScript编程起步 人民邮电出版社 【教学过程】 【新课】 一、案例设计

湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十 JavaScript 分支与循环程序设计 【教学内容】 讲解 JavaScript 函数定分支程序及循环程序设计 【教学目的】 使学生学会设计 JavaScript 多分支程序，循环程序 【教学重点】 JavaScript 循环程序设计 【教学难点】 JavaScript 循环程序设计 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．> 杨浩著 清华大学出版社 2．> Wittime 工作室 重庆出版社 3．> 电脑报社出版 4．> 人民邮电出版社 【教学过程】 【新课】 一、案例设计：

湖北职晚计算机科学与技术理论课教案一《网页设计》 设计猜用户密码的网页 ⊙x的收微的份,品 请轴入密码:[我来 你输出的密码是; 程序代码如下 Head> Script language=javascript> function display o var p-ialse, p= confirm("数据输入完毕?") document message. answer. value=document. message. inter. value alert(" you are welcome.") 请输入密码:br p>你输出的密码是

湖北职院计算机科学与技术系理论课教案—《网页设计》 设计猜用户密码的网页 程序代码如下： function display() { var p=false; p=confirm("数据输入完毕?"); if (p) document.message.answer.value=document.message.inter.value else alert("you are welcome...") } 请输入密码: 你输出的密码是:

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 Input type=text name=answer size=12> ) JavaScript多分支语句 格式 switch(表达式) case标号1语句1 case标号2语句2 case标号3语句3 case标号n语句n 例二、设计网页,能获取系统日期,并显示对应的星期值 收一煤体·□ Head> var weeK, var p=new Date()

湖北职院计算机科学与技术系理论课教案—《网页设计》 二、JavaScript 多分支语句 格式： switch (表达式) { case 标号 1 语句 1 case 标号 2 语句 2 case 标号 3 语句 3 … case 标号 n 语句 n } 例二、 设计网页，能获取系统日期，并显示对应的星期值。 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 /head> 循环程序设计 JavaScript中的循环程序可以使用for, while语句实现 案例三、使用for语句实现打开网页时弹出多个窗口 节数代吗飞无限 件￠)《)查看①)收6)工具①)帮助0 后6必)搜收夹的湖修,品8·口当 地址①)G:特效代无限窗口2t 转到铸” 匚这回只是不 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; } 三、循环程序设计 JavaScript 中的循环程序可以使用 for,while 语句实现。 案例三、使用 for 语句实现打开网页时弹出多个窗口。 function pop() { for(i=1;i<=3;i++) {

湖北职院计算机科学与技术糸理论遝教案一《网页设计》 window open (a2. htm, '' width=400, height=260') Kp align=center"> 案例四、设计状态栏跳动字符的网页 收m可体也··□ = m必收两的体也,·□ 1特效代状杜,和 ②特” 在状态栏中闪烁出现 you are we come信息

湖北职院计算机科学与技术系理论课教案—《网页设计》 window.open('a2.htm','','width=400,height=260') } } 案例四、设计状态栏跳动字符的网页。 在状态栏中闪烁出现 you are welcome 信息

湖北职晚计算机科学与技术理论课教案一《网页设计》 ar yourwords =you are we come ar speed 700 var control 1 function flash if (control = 1 control=o else window. status control=l setTimeout("flash (" speed) window. onload=flash O 【课后小结】 本次课程介绍了 JavaScript分支程序与循环程序的基本结构,同时使用分支语句 和循环语句设计了四个 JavaScript特效网页在学习过程中逐步学习自己设计 JavaScript 特效网页

湖北职院计算机科学与技术系理论课教案—《网页设计》 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(); 【课后小结】 本次课程介绍了 JavaScript 分支程序与循环程序的基本结构，同时使用分支语句 和循环语句设计了四个JavaScript特效网页，在学习过程中逐步学习自己设计JavaScript 特效网页