JavaScript 条件和循环结构
学习目标
- 掌握JavaScript条件结构语句的使用
重点
- 掌握JavaScript获取和修改HTML元素的简单方法
- 掌握JavaScript常用事件的用法
- 掌握JavaScript循环结构语句的使用
重点
难点
- 掌握JavaScript中break和continue关键词的使用
JavaScript条件语句
在 JavaScript 中,我们可使用以下条件语句:
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
1. if 语句
只有当指定条件为 true
时,该语句才会执行代码。
语法:
if ( /*条件*/ ) {
/*当条件为 true 时执行的代码*/
}
案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="/js.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
var age = 1;
if (age > 3) {
//false
//下面这句话会弹出警告框,显示内容“我不是3岁小孩”
alert('我不是3岁小孩');
}else{
//代码块
alert('我是3岁小孩');
}
</script>
<body>
</body>
</html>
效果展示
3. if…else if…else 语句
对if…else的补充,可以有任意多个分支,其中if分支必须在最前面,else if语句必须在中间,else语句必须在最后面,else语句可以不写。多个分支最多只有一个选项可以被执行。
语法
if ( /*条件1*/ ) {
/*当条件 1 为 true 时执行的代码*/
}
else if ( /*条件2*/ ) {
/*当条件 2 为 true 时执行的代码*/
}
...
else{
/*当条件 1 和 条件 2 都不为 true 时执行的代码*/
}
案例03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
var mark = 90;
if (mark < 60) {
//下面这句话会弹出警告框,显示内容“差”
alert('差');
}else if(mark >= 60 && mark < 70){
//下面这句话会弹出警告框,显示内容“及格”
alert('及格');
}else if(mark >= 70 && mark < 80){
//下面这句话会弹出警告框,显示内容“良好”
alert('良好');
}else if(mark >= 80 && mark < 90){
//下面这句话会弹出警告框,显示内容“优秀”
alert('优秀');
}else{
//下面这句话会弹出警告框,显示内容“完美”
alert('完美');
}
</script>
<body>
</body>
</html>
效果展示
4. JavaScript switch 语句
switch 语句和if的区别在于:
- switch语句只能判断某个变量是否等于某个值,if语句可以判断任意条件
- switch语句可以有多个分支同时执行,if语句最多只能有一个分支被执行
- switch语句可以使用break语句,if不能使用switch语句
语法:
var n=1;
switch(n) {
case 1: //如果n=1,则执行这里的代码
alert(‘n=1’); //弹窗提示
break; //执行到这里就停止,不再执行下面的代码
case 2: //如果n=2,则执行这里的代码
alert(‘n=2’); //弹窗提示
break; //执行到这里就停止,不再执行下面的代码
default: //如果n不等于1也不等于2,则执行这里的代码
}
案例04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var d = 0;
switch