码上欢乐
相关内容   简体   繁体

10-前端核心技术-JavaScript条件和循环结构

本文转载自  查看原文  2021-11-20 15:55  186    前端课件

第10章-前端核心技术-JavaScript条件和循环结构

学习目标

  1. 掌握JavaScript条件结构语句的使用 重点

  2. 掌握JavaScript获取和修改HTML元素的简单方法

  3. 掌握JavaScript常用事件的用法

  4. 掌握JavaScript循环结构语句的使用 重点 难点

  5. 掌握JavaScript中break和continue关键词的使用

JavaScript条件语句

在 JavaScript 中，我们可使用以下条件语句：

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
  • if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if…else if….else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

1. if 语句

只有当指定条件为 true 时，该语句才会执行代码。

语法：

1
2
3
if ( /*条件*/ ) {
	/*当条件为 true 时执行的代码*/
}

案例01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="/js.js" type="text/javascript" charset="utf-8"></script>
	</head>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</span><span class="javascript">
	<span class="hljs-keyword">var</span> age = <span class="hljs-number">1</span>;
	<span class="hljs-keyword">if</span> (age &gt; <span class="hljs-number">3</span>) {<span class="hljs-comment">//false</span>
		<span class="hljs-comment">//下面这句话会弹出警告框，显示内容“我不是3岁小孩”</span>
		alert(<span class="hljs-string">'我不是3岁小孩'</span>);
	}<span class="hljs-keyword">else</span>{
		<span class="hljs-comment">//代码块</span>
		alert(<span class="hljs-string">'我是3岁小孩'</span>);
	}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>



</html>

效果展示

image-20210907104026642

2. if…else 语句

可以有两个分支选择性执行的语句。当条件为 true 时执行if的代码，否则执行else中的代码。

语法

1
2
3
4
5
6
if ( /*条件*/ ) {
	/*当条件为 true 时执行的代码*/
}
else{
	/*当条件不为 false 时执行的代码*/
}

案例02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</span><span class="javascript">
	<span class="hljs-keyword">var</span> age = <span class="hljs-number">1</span>;
	<span class="hljs-keyword">if</span> (age &gt; <span class="hljs-number">3</span>) {
		<span class="hljs-comment">//下面这句话会弹出警告框，显示内容“我不是3岁小孩”</span>
		alert(<span class="hljs-string">'我不是3岁小孩'</span>);
	}<span class="hljs-keyword">else</span>{
		<span class="hljs-comment">//下面这句话会弹出警告框，显示内容“我是3岁小孩”</span>
		alert(<span class="hljs-string">'我是'</span>+age+<span class="hljs-string">'岁小孩'</span>);
	}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>



</html>

效果展示

image-20210907104116504

3. if…else if…else 语句

对if…else的补充，可以有任意多个分支，其中if分支必须在最前面，else if语句必须在中间，else语句必须在最后面，else语句可以不写。多个分支最多只有一个选项可以被执行。

语法

1
2
3
4
5
6
7
8
9
10
if ( /*条件1*/ ) {
	/*当条件 1 为 true 时执行的代码*/
}
else if ( /*条件2*/ ) {
	/*当条件 2 为 true 时执行的代码*/
}
...
else{
	/*当条件 1 和 条件 2 都不为 true 时执行的代码*/
}

案例03

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>



</html>

效果展示

image-20210907104139174

4. JavaScript switch 语句

switch 语句和if的区别在于：

  • switch语句只能判断某个变量是否等于某个值，if语句可以判断任意条件
  • switch语句可以有多个分支同时执行，if语句最多只能有一个分支被执行
  • switch语句可以使用break语句，if不能使用switch语句

语法：

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</span><span class="javascript">
	<span class="hljs-keyword">var</span> d = <span class="hljs-number">0</span>;
	<span class="hljs-keyword">switch</span>(d) {
		<span class="hljs-keyword">case</span> <span class="hljs-number">0</span>:
			alert(<span class="hljs-string">"今天是星期日"</span>);
			<span class="hljs-keyword">break</span>;
		<span class="hljs-keyword">case</span> <span class="hljs-number">1</span>:
			alert(<span class="hljs-string">"今天是星期一"</span>);
			<span class="hljs-keyword">break</span>;
		<span class="hljs-keyword">case</span> <span class="hljs-number">2</span>:
			alert(<span class="hljs-string">"今天是星期二"</span>);
			<span class="hljs-keyword">break</span>;
		<span class="hljs-keyword">case</span> <span class="hljs-number">3</span>:
			alert(<span class="hljs-string">"今天是星期三"</span>);
			<span class="hljs-keyword">break</span>;
		<span class="hljs-keyword">case</span> <span class="hljs-number">4</span>:
			alert(<span class="hljs-string">"今天是星期四"</span>);
			<span class="hljs-keyword">break</span>;
		<span class="hljs-keyword">case</span> <span class="hljs-number">5</span>:
			alert(<span class="hljs-string">"今天是星期五"</span>);
			<span class="hljs-keyword">break</span>;
		<span class="hljs-keyword">case</span> <span class="hljs-number">6</span>:
			alert(<span class="hljs-string">"今天是星期六"</span>);
			<span class="hljs-keyword">break</span>;
	}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>



</html>

效果展示

image-20210907104157256

JavaScript获取和设置HTML元素

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

var name = document.getElementById('name')

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
// 获取输入框的值
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双边元素内部的所有子元素和文字

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

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

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

案例05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</span><span class="javascript">
	<span class="hljs-comment">//通过ID属性获取HTML元素</span>
	<span class="hljs-comment">//通过value设置和获取HTML输入框的值</span>
	<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'name'</span>).value = <span class="hljs-string">"JavaScript修改的内容"</span>;
	<span class="hljs-comment">//通过CLASS属性获取HTML元素</span>
	<span class="hljs-comment">//通过innerHTML设置和获取HTML普通标签的内部元素和文字</span>
	<span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">'text'</span>).item(<span class="hljs-number">0</span>).innerHTML = <span class="hljs-string">"&lt;h1&gt;你好&lt;/h1&gt;"</span>;
	<span class="hljs-comment">//通过标签名属性获取HTML元素</span>
	<span class="hljs-comment">//通过innerText设置和获取HTML普通标签的文字</span>
	<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">'button'</span>).item(<span class="hljs-number">0</span>).innerText = <span class="hljs-string">'搜索'</span>;
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>



</html>

效果展示

image-20210907104211892

JavaScript常用事件

文档加载事件

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

元素点击事件

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

元素双击事件

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

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

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

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

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

案例06：登录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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)';
		}
	}

<span class="hljs-comment">//用户名输入框获得焦点时的事件</span>
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'name'</span>).onfocus = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
	<span class="hljs-keyword">this</span>.style.backgroundColor = <span class="hljs-string">'white'</span>;
}

<span class="hljs-comment">//密码输入框失去焦点时的事件</span>
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'pswd'</span>).onblur = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
	<span class="hljs-keyword">var</span> pswd = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'pswd'</span>).value;
	<span class="hljs-keyword">if</span> (!pswd) {
		<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'pswd'</span>).style.backgroundColor = <span class="hljs-string">'rgba(255,100,100,0.8)'</span>;
	}
}

<span class="hljs-comment">//密码输入框获得焦点时的事件</span>
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'pswd'</span>).onfocus = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
	<span class="hljs-keyword">this</span>.style.backgroundColor = <span class="hljs-string">'white'</span>;
}



}

效果展示

image-20210926092823321

JavaScript循环语句

1.while 循环

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

语法：

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

案例07

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>

效果展示

image-20210907104251775

2.do/while 循环

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

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

语法：

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

案例08

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>

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

效果展示

image-20210907104303823

3.for 循环

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

语法：

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

说明：

  • 语句1：在循环开始执行之前做的一次操作

  • 语句2：循环的条件，判断循环条件是否满足，true：执行循环；flase：不执行

  • 语句3：每次循环结束后，下一次循环开始前，执行的操作

案例09

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>

效果展示

image-20210907104318039

break 和 continue 语句

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

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

案例10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>

效果展示

image-20210907104329135

案例11

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>

效果展示

image-20210907104340027

作业

求最大值

HTML中有两个数字输入框和一个按钮，点击按钮的时候求最大值

要求：

使用方法function完成如下功能：

获取两个输入框的数字值，并保存到变量a和b中

判断a和b的大小

使用alert弹窗提示最大值

image-20210907104400878

实现9*9乘法表

使用双层循环实现9*9乘法表，分别使用while和for循环

image-20210907104412536

实现如下功能：

image-20210907104422502

实现如下功能：

image-20210907104433613

求出所有“水仙花数”

所谓“水仙花数”是指一个3位数，其各位数立方和等于该数本身。如：153(x) = 1*1*1 + 5*5*5 + 3*3*3

思路：

1.水仙花数是一个三位数，所以设置三个变量，分别保存百位a、十位b、个位c数字

2.这三个变量的立方相加等于这三个变量自由组合的数字。

image-20210907104442739

输入任意一个数字，求其最高位的数字

image-20210907104514262

求两个数最大公约数

image-20210907104524870

使用循环输入本月日历。

要求：根据本月的日历显示本月的日历

image-20210907104818558

判断任意数【N】是否是一个数【M】的倍数，写成函数

求任意数【N】的个位数值，写成函数

求任意数【N】的【M】次方，写成函数

求任意数【N】的最高位数值，写成函数

    </article>


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 09-前端核心技术-JavaScript基础语法 Spring 核心技术（1） Spring 核心技术（5） Spring 核心技术（7） 01-前端核心技术-HTML基础 03-前端核心技术-HTML媒体 04-前端核心技术-CSS基础属性 10大高性能开发核心技术，多图详解！ 区块链核心技术与应用/核心技术篇 Spring MVC核心技术
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM