牡丹江網(wǎng)站制作市場(chǎng)營銷專業(yè)課程
目錄
目錄
前言
思維導(dǎo)圖
1，作業(yè)資源
2，if語句練習(xí)
2.1代碼解讀:
2.2,結(jié)果展示:
3，switch語句練習(xí)
3.1,代碼解讀:
3.2,結(jié)果展示:
4.while循環(huán)練習(xí)
4.1,代碼解讀:
4.2.結(jié)果展示:
5.do-while循環(huán)練習(xí)
5.1,代碼解讀:
5.2,結(jié)果展示:
6.for循環(huán)練習(xí)
6.1,代碼解讀:
6.2,結(jié)果展示:
7，總結(jié)
前言
? ? 本篇文章是對(duì)于javaScript中if ,switch,while ,do-while,,for語法的作業(yè)練習(xí).對(duì)于我來說也是對(duì)自己知識(shí)掌握的一種檢驗(yàn).
思維導(dǎo)圖
1，作業(yè)資源
css代碼部分: 此文件保存在style.css文件中,因后續(xù)所有作業(yè)都會(huì)使用本次樣式
body {background-color: #523620;color: #fff;font-family: 微軟雅黑,黑體;font-size: 150%;margin: 0px 0px 0px 0px;
}h1 {background-image: url('images/bullseye-logo.png');background-repeat: no-repeat;text-indent: 100%;white-space: nowrap;overflow: hidden;height: 109px;width: 643px;margin: 40px auto;
}#teacher {float:right;margin:135px 30px 0px 0px;
}#page1 {background-color: #fecc6f;height: 730px;padding: 10px;min-width: 779px;
}#answer {background-color: #425a5a;border: 25px solid #523620;border-radius: 20px;padding: 40px 20px;margin: 0px auto;height: 370px;width: 600px;text-align: center;
}圖片部分在images文件夾中:
2，if語句練習(xí)
? ? ? ? ? ? ? ?如果不知道輸出文本到頁面的基礎(chǔ)方面的知識(shí),那么可以看我前面的文章:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? JavaScript基礎(chǔ)輸出
2.1代碼解讀:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 這里是對(duì)if語句與else if 語句的練習(xí)
其中語法格式為(這里用法與c語言一致):
?if{
? ? ?代碼塊
}
else if {
?代碼塊
}
<!doctype html> <html lang="cn"> <head> <meta charset="utf-8"> <title>if語句練習(xí)</title> <link rel="stylesheet" href="style.css" /> <script> window.onload= function(){ var cash= 160; //口袋里的現(xiàn)金//1.寫出if-else語句，分別分為三種情況：//現(xiàn)金大于等于150；現(xiàn)金大于等于100并小于150；現(xiàn)金小于100if(cash>=150){result= '大吃一頓團(tuán)票看電影';}else if (100<=cash&&cash<150){result= '吃開封菜團(tuán)票看電影';}else if(cash<100){result= '宿舍吃泡面電腦看電影';}//將結(jié)果輸出到網(wǎng)頁中var el = document.getElementById('answer');el.innerHTML = '決定: ' + result; } </script> </head><body><section id="page1"><h1>Bullseye</h1><img src="images/teacher.png" id="teacher" alt="teacher" /><section id="answer"></section></section> </body> </html>
2.2,結(jié)果展示:
3，switch語句練習(xí)
3.1,代碼解讀:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?這里是對(duì)switch語句的練習(xí)
語法格式:
switch(判斷條件)
{
case 條件1: 代碼快;break;
case 條件2: 代碼塊;break;
}
default : 代碼塊;? //如果條件都不都滿足,執(zhí)行代碼塊
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>switch語句練習(xí)</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload= function(){var msg; //顯示的信息var level = 2; //當(dāng)前第幾關(guān)//1.用level作為switch后的表達(dá)式，根據(jù)level值寫出完整switch語句switch (level){case 1:msg = '第一關(guān)';break;case 2:msg = '第二關(guān)。繼續(xù)！';break;case 3:msg = '最后一關(guān)';break;case 4:msg = '好運(yùn)';break;//默認(rèn)}//輸出到頁面var el = document.getElementById('answer');el.textContent = msg;
}
</script>
</head>
<body><section id="page1"><h1>Bullseye</h1><img src="images/teacher.png" id="teacher" alt="teacher" /><section id="answer"></section></section>
</body>
</html>
3.2,結(jié)果展示:
4.while循環(huán)練習(xí)
4.1,代碼解讀:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?這里是對(duì)于while循環(huán)的練習(xí)
語法格式:
while(循環(huán)條件){
? ?代碼塊;
? ?控制循環(huán)的條件(i++);
}
`${i} * 5 = ${result}<br>`? 其中`? ` 為使用站位符時(shí)必須使用的符號(hào)
${}代表站位符,如果學(xué)過python就知道,這是在f"{name}"初始化,代表將上面代碼中的變量的值填寫在其中.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>while循環(huán)練習(xí)</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){var i = 1; //設(shè)置循環(huán)變量初始值 var msg = ''; //顯示的信息//1.用while循環(huán)分別計(jì)算1至9的5倍//將“ix5=?”字符串添加到變量msg中，并添加換行標(biāo)簽。while (i < 10) {const result = i * 5;msg += `${i} * 5 = ${result}<br>`;i++;}//用變量msg的值替換原網(wǎng)頁中顯示的信息//2.寫完1-2后將下面語句中的注釋符刪除document.getElementById('answer').innerHTML = msg;
}
</script>
</head><body><section id="page1"><h1>Bullseye</h1><img src="images/teacher.png" id="teacher" alt="teacher" /><section id="answer">1x5=5<br>2x5=10<br>……<br>9x5=45</section></section>
</body>
</html>
4.2.結(jié)果展示:
5.do-while循環(huán)練習(xí)
5.1,代碼解讀:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 這里是對(duì)do-while循環(huán)的練習(xí)
語法格式:
do{
? ? ? 代碼塊;
}while(控制條件);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>do-while循環(huán)練習(xí)</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){var i = 1; //設(shè)置循環(huán)變量初始值var msg = ''; //顯示的信息//1.用do-while循環(huán)分別計(jì)算1至9的5倍do{const result = i * 5;msg += `${i} * 5 = ${result}<br>`;i++;}while(i<=9);//用變量msg的值替換原網(wǎng)頁中顯示的信息//2.完成第1步后將下面語句前的注釋符刪掉document.getElementById('answer').innerHTML = msg;
}
</script>
</head><body><section id="page1"><h1>Bullseye</h1><img src="images/teacher.png" id="teacher" alt="teacher" /><section id="answer">1x5=5<br>2x5=10<br>……<br>9x5=45</section></section>
</body>
</html>
5.2,結(jié)果展示:
6.for循環(huán)練習(xí)
6.1,代碼解讀:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?這里是for循環(huán)練習(xí)
語法格式:
for(定義式;條件判斷;迭代){
? ? ? 代碼塊;
}
字符拼接 + "<br>" 代表換行? ? 字符拼接使用 + 號(hào)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>for循環(huán)練習(xí)</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){var scores = [90, 70, 50]; //游戲中每一關(guān)得分var arrayLength = scores.length; //數(shù)組長度var roundNumber = 0; //當(dāng)前第幾關(guān)var msg = ''; //顯示的信息//使用for循環(huán)遍歷數(shù)組scores的元素，顯示每關(guān)的得分。//1.寫出for循環(huán)的條件//2.存放當(dāng)前關(guān)數(shù)//3.將“第幾關(guān)”字符串添加到變量msg的值中//4.將數(shù)組scores中當(dāng)前關(guān)的得分添加到變量msg的值中，并添加換行標(biāo)簽for (var i = 0; i < arrayLength; i++) {roundNumber += 1;msg += '第' + roundNumber + '關(guān)'+ ':';msg += scores[i] + '<br>';}//用變量msg的值替換原網(wǎng)頁中顯示的信息//5.寫完1-4后將下面語句前的注釋符刪掉document.getElementById('answer').innerHTML = msg;
}
</script>
</head><body><section id="page1"><h1>Bullseye</h1><img src="images/teacher.png" id="teacher" alt="teacher" /><section id="answer">第1關(guān)：10<br>第2關(guān)：20<br>第3關(guān)：30</section></section>
</body>
</html>
6.2,結(jié)果展示:
7，總結(jié)
本篇文章主要是對(duì)js的基礎(chǔ)語法進(jìn)行的一次練習(xí),通過有趣的示例進(jìn)行練習(xí),使得對(duì)于代碼能夠增加印象,對(duì)于知識(shí)的掌握更加透徹.
每日一言
每一個(gè)不曾起舞的日子，都是對(duì)生命的辜負(fù)。
??如果我的學(xué)習(xí)筆記對(duì)你有用，不妨點(diǎn)贊收藏一下，感謝你的支持，當(dāng)然也歡迎大佬給我一下建議或是對(duì)筆記中的不足進(jìn)行補(bǔ)充，對(duì)我學(xué)習(xí)大有幫助，謝謝。??