JavaScript 条件和循环结构-CFANZ编程社区

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(d) {
			case 0:
				alert("今天是星期日");
				break;
			case 1:
				alert("今天是星期一");
				break;
			case 2:
				alert("今天是星期二");
				break;
			case 3:
				alert("今天是星期三");
				break;
			case 4:
				alert("今天是星期四");
				break;
			case 5:
				alert("今天是星期五");
				break;
			case 6:
				alert("今天是星期六");
				break;
		}
	</script>
    
</html>

效果展示

在这里插入图片描述

JavaScript获取和设置HTML元素

1.通过ID属性获取HTML元素，只能获取第一个

var name = document.getElementById('name')

2.通过CLASS属性获取HTML元素，可以获取多个，用item(n)来获取第n个

var text = document.getElementsByClassName('text'); // 获取所有class=text的元素
var first = text.item(0); // 获取第1个
var first = text.item(1); // 获取第2个

3.通过标签名获取HTML元素，可以获取多个，用item(n)来获取第n个

var button = document.getElementsByTagName('button'); // 获取所有标签名称为button的元素
var button = text.item(0); // 获取第1个
var button = text.item(1); // 获取第2个

4.使用“.value”来设置或者获取HTML输入框元素的值

// 获取输入框的值
var name = document.getElementById('name'); // 获取id=name的输入框
var value = name.value; // 获取输入框的value值
// 或者
var value = document.getElementById('name').value; // 获取id=name的输入框的值

// 设置修改输入框的值
var name = document.getElementById('name'); // 获取id=name的输入框
name.value = "JavaScript修改的内容"; // 将输入框的值修改成"JavaScript修改的内容"
// 或者
document.getElementById('name').value = "JavaScript修改的内容"; // 将输入框的值修改成"JavaScript修改的内容"

5.使用“.innerHTML”来设置或者获取HTML双边元素内部的所有子元素和文字

// 获取双标签元素的内容
var value = document.getElementsByClassName('text').item(0).innerHTML;
// 设置修改双标签元素的内容
document.getElementsByClassName('text').item(0).innerHTML = "<h1>你好</h1>";

6.使用“.innerText”来设置或者获取HTML双边元素内部的所有文字

// 获取双标签元素的内容
var value = document.getElementsByTagName('button').item(0).innerText;
// 设置修改双标签元素的内容
document.getElementsByTagName('button').item(0).innerText = '搜索';

案例05

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="text">
			HTML的文字内容
		</div>
		<input type="text" id="name" />
		<button>按钮</button>
	</body>
    
	<script type="text/javascript">
		//通过ID属性获取HTML元素
		//通过value设置和获取HTML输入框的值
		document.getElementById('name').value = "JavaScript修改的内容";
		//通过CLASS属性获取HTML元素
		//通过innerHTML设置和获取HTML普通标签的内部元素和文字
		document.getElementsByClassName('text').item(0).innerHTML = "<h1>你好</h1>";
		//通过标签名属性获取HTML元素
		//通过innerText设置和获取HTML普通标签的文字
		document.getElementsByTagName('button').item(0).innerText = '搜索';
	</script>
    
</html>

效果展示
在这里插入图片描述

JavaScript常用事件

文档加载事件

window.onload = function(){
    /*里面写代码*/ 
}

元素点击事件

document.getElementById('name').onclick = function(){
    /*里面写代码*/ 
}

元素双击事件

document.getElementById('name').ondblclick = function(){
    /*里面写代码*/ 
}

表单输入元素获取焦点时的事件

document.getElementById('name').onfocus = function(){
    /*里面写代码*/ 
}

表单输入元素失去焦点时的事件

document.getElementById('name').onblur = function(){
    /*里面写代码*/ 
}

案例06：登录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="content">
			<form>
				<div id="title">用户登录</div>
				<input type="text" id="name" placeholder="请输入用户名" />
				<input type="text" id="pswd" placeholder="请输入密码" />
				<button type="button" id="buttom">登录</button>
			</form>
		</div>
	</body>
</html>

实例：CSS

body {
	background: -webkit-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
	background: -moz-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
	background: -o-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
	background: linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
}

#content {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 400px;
	height: 200px;
	border-radius: 10px;
	padding: 50px;
	background-color: rgba(0, 0, 0, 0.4);
}

#content:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

form {
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

#title {
	width: 360px;
	font-size: 22px;
	text-align: center;
	margin-bottom: 20px;
	color: white;
	font-weight: bold;
}

input {
	position: relative;
	display: block;
	width: 360px;
	height: 40px;
	margin: auto;
	border-radius: 5px;
	font-size: 18px;
	outline: 0;
	border: 0;
}

input:not([type=button]) {
	width: 300px;
	margin-bottom: 20px;
	padding: 0 30px;
}
input[type=text]:focus{
	font-size: 20px;
}
button[type=button]{
	width: 360px;
	height: 40px;
	margin: auto;
	border-radius: 5px;
	font-size: 18px;
	outline: 0;
	border: 0;
	background-color: rgba(0,200,200,0.6);
	color: white;
}
button[type=button]:hover{
	background-color: rgba(0,200,200,0.8);
	color: white;
}
button[type=button]:active{
	background-color: rgba(20,200,200,0.4);
	color: white;
}

实例： JS

window.onload = function(){
	//用户名输入框失去焦点时的事件
	document.getElementById('name').onblur = function(){
		var name = document.getElementById('name').value;
		if (!name) {
			document.getElementById('name').style.backgroundColor = 'rgba(255,100,100,0.8)';
		}
	}

	//用户名输入框获得焦点时的事件
	document.getElementById('name').onfocus = function(){
		this.style.backgroundColor = 'white';
	}

	//密码输入框失去焦点时的事件
	document.getElementById('pswd').onblur = function(){
		var pswd = document.getElementById('pswd').value;
		if (!pswd) {
			document.getElementById('pswd').style.backgroundColor = 'rgba(255,100,100,0.8)';
		}
	}

	//密码输入框获得焦点时的事件
	document.getElementById('pswd').onfocus = function(){
		this.style.backgroundColor = 'white';
	}
}

效果展示
在这里插入图片描述

JavaScript循环语句

1.while 循环

先判断条件，只要指定条件为 true，循环就可以一直执行代码块。

语法：

while ( /*条件*/ ) {
	/*需要执行的代码*/
}

案例07

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		var i = 1;
		while (i <= 6){
			document.getElementById('test').innerHTML+='<h'+i+'>'+'第'+i+'级标题';
			i++;
		}
	</script>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N5W43R6k-1645867369525)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220210174521236.png)]$

2.do/while 循环

do/while 循环是 while 循环的变体。无论条件是否成立至少会执行一次。

先执行一次代码，再判断条件，如果条件为真的话，就会重复这个循环。

语法：

do{
	/*需要执行的代码*/
}while ( /*条件*/ );

案例08

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		var i = 1;
		do{
			document.getElementById('test').innerHTML+='<h'+i+'>'+'第'+i+'级标题';
			i++;
		}while (i >= 6)
	</script>
</html>

虽然循环的条件不成立，但是也执行了一次。

效果展示
在这里插入图片描述

3.for 循环

for循环常用于已知循环次数的情况。

语法：

for ( 语句1 ; 语句2 ; 语句3 ) {
	/*被执行的代码块*/
}

说明：

语句1：在循环开始执行之前做的一次操作
语句2：循环的条件，判断循环条件是否满足，true：执行循环；flase：不执行
语句3：每次循环结束后，下一次循环开始前，执行的操作

案例09

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		for(var i = 0; i < 5; i++) {
			document.write("第" + i + "循环<br>");
		}
	</script>
</html>

效果展示
在这里插入图片描述

break 和 continue 语句

break 和 continue 语句都可以控制循环语句的循环次数。

break 语句用于跳出整个循环。
continue 用于跳过循环中的某一次。

案例10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		for(i = 0; i < 10; i++) {
			if(i == 3) {
				break;
			}
			document.write("第：" + i + "次循环<br>");
		}
	</script>
</html>

效果展示
在这里插入图片描述

案例11

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		for(i = 0; i <= 10; i++) {
			if(i == 3) continue;
			document.write("第" + i + "循环<br>");
		}
	</script>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jDmv1E0Y-1645867419102)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220210174613441.png)]$