教学项目二十 JavaScript分支与循环程序设计
【 教学内容 】
讲解 JavaScript函数定义, 分支程序及循环程序设计
【 教学目的 】
使学生学会设计 JavaScript多分支程序, 循环程序
【 教学重点 】
JavaScript循环程序设计
【 教学难点 】
JavaScript循环程序设计
【 教学方式 】
讨论式, 案例分析式, 练习式相结合
【 教学参考 】
1,<<JavaScript 入门与提高 >> 杨浩著 清华大学出版社
2,<<Internet 网页工场 >> Wittime工作室 重庆出版社
3,<<JavaScript从入门到精通 >> 电脑报社出版
4,<<JavaScript编程起步 >> 人民邮电出版社
【 教学过程 】
【 新课 】
一, 函数定义语句
1,function 函数名 （ 形参表 ）
{
,
,
.(函数执行部分 )
}
2,return
格式,
return 表达式
返回函数的值
二,Javascript两分支语句
案例设计：检测用户的手机号码
分析,
(1) 手机号码应为 11位
obj.length=11
(2) 手机号码应以 13开头
obj.substring(0,1)=”13”
(3) 手机号码是由 0—9的数字 11位数字组成
使用函数 isNaN()测试字符串中是否有非数字字符
<html>
<body>
<script>
function aa(obj)
{
if(obj.length!=11) alert("手机号码应该是 11位数字 ");
else if(obj.substring(0,2)!=“13”) alert(“手机号码应该以 13开头
");
else if(isNaN(obj)) alert("手机号码应该是 11位数字 ");
else alert("你填的是正确的手机号码 ");
}
</script>
三,JavaScript多分支语句
格式,
switch (表达式 )
{
case 标号 1 语句 1
case 标号 2 语句 2
case 标号 3 语句 3
…
case 标号 n 语句 n
}
例二,设计网页，能获取系统日期，并显示对应的星期值。
分析,
（ 1） Javascript中处理与时间相关的操作使用内置对象 date();
Date() 对象使用以下的形式创建,
变量名 =new Date()
（ 2）在 date()对象有如下常用的方法,
getDate() 获取当前的日期；
getDay() 获取星期值；
0-----星期天 5---- 星期五
1----- 星期一 6---- 星期六
2----- 星期二
3----- 星期三
4----- 星期四
getHours() 获取当前的小时
getMinutes()获取当前的分钟
getSeconds()获取当前的秒钟
getYear()获取年份值
getMonth()获取当前的月份值 /*getMonth()+1为实际的月份值
0 一月 7 八月
1 二月 8 九月
2 三月 9 十月
3 四月 10 十一月
4 五月 11 十二月
5 六月
6 七月
<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>
【 课后小结 】
本次课程介绍了 JavaScript分支程序与循环程序的基本结构，同时使用分
支语句和循环语句设计了四个 JavaScript特效网页，在学习过程中逐步学习
自己设计 JavaScript特效网页。