任务2学习JavaScript中的语言基础(精)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
移动Web编程基础
任务2 JavaScript语言基础
2018年9月15日星期六
提纲
• 控制结构 • 条件语句 • 循环语句 • 跳转语句 • 函数
1 控制结构
• 顺序执行
• 三种控制结构
语句按编写顺序执行 顺序结构 选择结构
ຫໍສະໝຸດ Baidu
if if…else switch
while do…while for for…in
<body> <p>点击这个按钮，获得基于 时间的问候。</p> <input type="button" value="点击这里" onClick="clickfunc()" /> <p id="demo"></p> </body>
if else if使用
<script> function clickfunc(){ var x=""; var time=new Date().getHours(); if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script>
课堂练习
5.2 条件语句—switch 多路选择结构
• switch的语法结构如下：
switch(表达式){ case 值1：语句; break; case 值2：语句; break;
... ...
case 值N：语句; break; default：语句; }
switch使用
<script> function myFunction() { var x; var d=new Date().getDay(); switch (d) { case 0: x="Today it's 周日"; case 1: x="Today it's 周一"; case 2: x="Today it's 周二"; case 3: x="Today it's 周三"; case 4: x="Today it's 周四"; case 5: x="Today it's 周五"; case 6: x="Today it's 周六"; }
break; break; break; break; break; break; break;
课堂练习
• 使用switch选择结构：
根据学生等级，给出学生的成绩范围。
A
B
90-100
80-89
C
D E
70-79
60-69 60分以下
<script type = "text/javascript"> var grade; 课堂练习 grade = window.prompt("请输入学生等级：" ,"A"); switch (grade) { case "A" : document.write("90-100"); break; case "B" : document.write("80-89"); break; case "c" : document.write("70-79"); break; case "D" : document.write("60-69"); break; case "E" : document.write("60分以下"); default: document.write("Error!"); } </script>
循环结构
if 使用
<script> function clickfunc(){ var x=""; var time=new Date().getHours(); if(time<14) {x="Good Day！！"} document.getElementBy Id("demo").innerHTML= x; } </script>
<body> <p>如果时间早于14:00，会 获得问候“good day”</p> <input type="button" value="点击这里" onClick="clickfunc()" /> <p id="demo"></p> </body>
if else 使用
<script> function clickfunc(){ var x=""; var time=new Date().getHours(); if (time<12) { x="Good day"; } else {x="Good evening"; } document.getElementById( "demo").innerHTML=x; } </script>
5.2 条件语句—switch 多路选择结构
• [例5.2]：根据出生年月计算生肖
5.2 条件语句—switch 多路选择结构
• [例5.2]：根据出生年月计算生肖
<script language="javascript" type="text/javascript"> <!-根据出生年月计算生肖 function showShengxiao(){ var iRemainder, sShenxiao; var iYear = document.form1.txtYear.value; if(iYear == ""){ alert("请输入出生年份！"); document.form1.txtYear.focus(); return; }else{ iRemainder = iYear % 12; } switch(iRemainder){ case 0: sShengxiao = "猴"; break; case 1: sShengxiao = "鸡"; break; case 2: sShengxiao = "狗"; break;
case 3: sShengxiao break; case 4: sShengxiao break; case 5: sShengxiao break; case 6: sShengxiao break; case 7: sShengxiao break; case 8: sShengxiao break; case 9: sShengxiao break;
任务2 JavaScript语言基础
2018年9月15日星期六
提纲
• 控制结构 • 条件语句 • 循环语句 • 跳转语句 • 函数
1 控制结构
• 顺序执行
• 三种控制结构
语句按编写顺序执行 顺序结构 选择结构
ຫໍສະໝຸດ Baidu
if if…else switch
while do…while for for…in
<body> <p>点击这个按钮，获得基于 时间的问候。</p> <input type="button" value="点击这里" onClick="clickfunc()" /> <p id="demo"></p> </body>
if else if使用
<script> function clickfunc(){ var x=""; var time=new Date().getHours(); if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script>
课堂练习
5.2 条件语句—switch 多路选择结构
• switch的语法结构如下：
switch(表达式){ case 值1：语句; break; case 值2：语句; break;
... ...
case 值N：语句; break; default：语句; }
switch使用
<script> function myFunction() { var x; var d=new Date().getDay(); switch (d) { case 0: x="Today it's 周日"; case 1: x="Today it's 周一"; case 2: x="Today it's 周二"; case 3: x="Today it's 周三"; case 4: x="Today it's 周四"; case 5: x="Today it's 周五"; case 6: x="Today it's 周六"; }
break; break; break; break; break; break; break;
课堂练习
• 使用switch选择结构：
根据学生等级，给出学生的成绩范围。
A
B
90-100
80-89
C
D E
70-79
60-69 60分以下
<script type = "text/javascript"> var grade; 课堂练习 grade = window.prompt("请输入学生等级：" ,"A"); switch (grade) { case "A" : document.write("90-100"); break; case "B" : document.write("80-89"); break; case "c" : document.write("70-79"); break; case "D" : document.write("60-69"); break; case "E" : document.write("60分以下"); default: document.write("Error!"); } </script>
循环结构
if 使用
<script> function clickfunc(){ var x=""; var time=new Date().getHours(); if(time<14) {x="Good Day！！"} document.getElementBy Id("demo").innerHTML= x; } </script>
<body> <p>如果时间早于14:00，会 获得问候“good day”</p> <input type="button" value="点击这里" onClick="clickfunc()" /> <p id="demo"></p> </body>
if else 使用
<script> function clickfunc(){ var x=""; var time=new Date().getHours(); if (time<12) { x="Good day"; } else {x="Good evening"; } document.getElementById( "demo").innerHTML=x; } </script>
5.2 条件语句—switch 多路选择结构
• [例5.2]：根据出生年月计算生肖
5.2 条件语句—switch 多路选择结构
• [例5.2]：根据出生年月计算生肖
<script language="javascript" type="text/javascript"> <!-根据出生年月计算生肖 function showShengxiao(){ var iRemainder, sShenxiao; var iYear = document.form1.txtYear.value; if(iYear == ""){ alert("请输入出生年份！"); document.form1.txtYear.focus(); return; }else{ iRemainder = iYear % 12; } switch(iRemainder){ case 0: sShengxiao = "猴"; break; case 1: sShengxiao = "鸡"; break; case 2: sShengxiao = "狗"; break;
case 3: sShengxiao break; case 4: sShengxiao break; case 5: sShengxiao break; case 6: sShengxiao break; case 7: sShengxiao break; case 8: sShengxiao break; case 9: sShengxiao break;