碼上歡樂
相關內容    簡體    繁體

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刪除。



猜您在找 11-前端核心技術-JavaScript 09-前端核心技術-JavaScript基礎語法 12-前端核心技術-JavaScript對象 Web前端三大核心技術之HTML Spring 核心技術（1） Spring 核心技術（5） Spring 核心技術（7） 01-前端核心技術-HTML基礎 03-前端核心技術-HTML媒體 04-前端核心技術-CSS基礎屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM