JavaScript 条件和循环结构

最新推荐文章于 2024-07-30 17:19:26 发布

抹泪的知更鸟

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量517

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_51596354/article/details/123152861

版权

学习目标

掌握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(d) {
   
			case 0:
				alert("今天是星期日");
				break;
			case 1:
				alert("今天是星期一");
				break;
			case 2:
				alert("今天是星期二");
				break;
			case 3:
				alert(

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 条件和循环结构

JavaScript 条件和循环结构学习目标JavaScript条件语句1. if 语句案例013. if...else if...else 语句案例034. JavaScript switch 语句案例04JavaScript获取和设置HTML元素案例05JavaScript常用事件案例06：登录JavaScript循环语句1.while 循环案例072.do/while 循环案例083.for 循环案例09break 和 continue 语句案例10案例11学习目标掌握JavaScript条件结
复制链接

扫一扫