一篇文章教你用JavaScript使用流程控制打印九九乘法表
一、選擇結(jié)構(gòu)
概念:選擇結(jié)構(gòu)語(yǔ)句需要根據(jù)給出的條件進(jìn)行判斷來(lái)決定執(zhí)行對(duì)應(yīng)的代碼。

if單分支語(yǔ)句
概念:if條件判斷語(yǔ)句也被稱(chēng)為單分支語(yǔ)句,當(dāng)滿(mǎn)足某種條件時(shí),就進(jìn)行某種處理。
舉例:只有年齡大于等于18周歲,才輸出已成年,否則無(wú)輸出。

if…else雙分支語(yǔ)句
概念:if…else語(yǔ)句也稱(chēng)為雙分支語(yǔ)句,當(dāng)滿(mǎn)足某種條件時(shí),就進(jìn)行某種處理,否則進(jìn)行另一種處理。
舉例:判斷一個(gè)學(xué)生的年齡,大于等于18歲則是成年人,否則是未成年人。

if…else if…else多分支語(yǔ)句
概念:if…else if…else語(yǔ)句也稱(chēng)為多分支語(yǔ)句,可針對(duì)不同情況進(jìn)行不同的處理。
舉例:對(duì)一個(gè)學(xué)生的考試成績(jī)進(jìn)行等級(jí)的劃分,分?jǐn)?shù)在90——100分為優(yōu)秀,分?jǐn)?shù)在80——90分為優(yōu)秀為良好,分?jǐn)?shù)在70——80分為中等,分?jǐn)?shù)在60——70分為及格,分?jǐn)?shù)小于60則為不及格。

注意
“if…else if…else”語(yǔ)句在使用時(shí),“else if”中間要有空格,否則程序會(huì)報(bào)語(yǔ)法錯(cuò)誤。

switch多分支語(yǔ)句
概念:switch語(yǔ)句也是多分支語(yǔ)句,功能與if系列條件語(yǔ)句相同,不同的是它只能針對(duì)某個(gè)表達(dá)式的值作出判斷,從而決定執(zhí)行哪一段代碼。
特點(diǎn):代碼更加清晰簡(jiǎn)潔、便于閱讀。
舉例:根據(jù)學(xué)生成績(jī)score進(jìn)行評(píng)比(滿(mǎn)分為100分)。


二、循環(huán)結(jié)構(gòu)
概念:所謂循環(huán)語(yǔ)句就是可以實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行。
舉例:連續(xù)輸出1~100之間的數(shù)字。

while循環(huán)語(yǔ)句
概念:while循環(huán)語(yǔ)句是根據(jù)循環(huán)條件來(lái)判斷是否重復(fù)執(zhí)行一段代碼。

注意
需要注意的是,若循環(huán)條件永遠(yuǎn)為true時(shí),則會(huì)出現(xiàn)死循環(huán),因此在開(kāi)發(fā)中應(yīng)根據(jù)實(shí)際需要,在循環(huán)體中設(shè)置循環(huán)出口,即循環(huán)結(jié)束的條件。
do…while循環(huán)語(yǔ)句
do…while循環(huán)語(yǔ)句的功能與while循環(huán)語(yǔ)句類(lèi)似,唯一的區(qū)別在于,while是先判斷條件后執(zhí)行循環(huán)體,而do…while會(huì)無(wú)條件執(zhí)行一次循環(huán)體后再判斷條件。

for循環(huán)語(yǔ)句
概念:for循環(huán)語(yǔ)句是最常用的循環(huán)語(yǔ)句,它適合循環(huán)次數(shù)已知的情況。

for關(guān)鍵字后面小括號(hào)“()”中包括了三部分內(nèi)容:
初始化表達(dá)式。循環(huán)條件。操作表達(dá)式。
它們之間用“;”分隔,{}中的執(zhí)行語(yǔ)句為 ③循環(huán)體。

注意
for循環(huán)語(yǔ)句小括號(hào)“()”內(nèi)的每個(gè)表達(dá)式都可以為空,但是必須保留分號(hào)分割符。當(dāng)每個(gè)表達(dá)式都為空時(shí),表示該for循環(huán)語(yǔ)句的循環(huán)條件永遠(yuǎn)滿(mǎn)足,會(huì)進(jìn)入無(wú)限循環(huán)的狀態(tài),此時(shí)如果要結(jié)束無(wú)限循環(huán),可在for語(yǔ)句循環(huán)體中用跳轉(zhuǎn)語(yǔ)句進(jìn)行控制。
三、跳轉(zhuǎn)語(yǔ)句
概念:跳轉(zhuǎn)語(yǔ)句用于實(shí)現(xiàn)程序執(zhí)行過(guò)程中的流程跳轉(zhuǎn)。
常用的跳轉(zhuǎn)語(yǔ)句:有break和continue語(yǔ)句。
break與continue的區(qū)別:break語(yǔ)句可應(yīng)用在switch和循環(huán)語(yǔ)句中,其作用是終止當(dāng)前語(yǔ)句的執(zhí)行,跳出switch選擇結(jié)構(gòu)或循環(huán)語(yǔ)句,執(zhí)行后面的代碼。而continue語(yǔ)句用于結(jié)束本次循環(huán)的執(zhí)行,開(kāi)始下一輪循環(huán)的執(zhí)行操作。
其他功能:break和continue語(yǔ)句還可跳轉(zhuǎn)到指定的標(biāo)簽語(yǔ)句處,實(shí)現(xiàn)嵌套語(yǔ)句的多層次跳轉(zhuǎn)。
- label表示標(biāo)簽的名稱(chēng),如start、end等任意合法的標(biāo)識(shí)符。
- statement表示具體執(zhí)行的語(yǔ)句,如if、while、變量的聲明等。
- 標(biāo)簽語(yǔ)句必須在使用之前定義,否則會(huì)出現(xiàn)找不到標(biāo)簽的情況。

【案例】打印金字塔

代碼實(shí)現(xiàn)思路:
- 分析金字塔組成:由空格和星星“*”組成的三角形。
- 分析“*”和空格的分布規(guī)律(假設(shè)最上面的一個(gè)星星作為金字塔的第一層)。
- 每層中星星的數(shù)量 = 當(dāng)前層數(shù)2 -1。例如當(dāng)前為第4層,則星星數(shù)= 42-1=7。
- 每層星星前的空格 = 金字塔層數(shù) – 當(dāng)前層數(shù)。例如當(dāng)前行數(shù)為第3層,則空格數(shù)=5-3=2。
代碼實(shí)現(xiàn)
<script>
var level = prompt('請(qǐng)?jiān)O(shè)置金字塔的層數(shù)');
// 獲取輸入的純數(shù)字,其余情況皆轉(zhuǎn)為NaN
level = parseInt(level);
// 判斷用戶(hù)輸入的數(shù)據(jù)是否合法
if (isNaN(level)) {
alert('金字塔的層數(shù)必須是純數(shù)字');
}
// 循環(huán)遍歷金字塔的層數(shù)
for(var i = 1; i <= level; ++i){
// 輸出星星前的空格
var blank = level - i;
for(var k=0; k < blank; ++k){
document.write(' ');
}
// 打印星星
var star = i*2 - 1;
for(var j = 0; j < star; ++j){
document.write('*');
}
// 換行
document.write('<br>');
}
</script>
四、動(dòng)手實(shí)踐九九乘法表
九九乘法表體現(xiàn)了數(shù)字之間乘法的規(guī)律,成為了學(xué)生在學(xué)習(xí)數(shù)學(xué)時(shí)必不可少的一項(xiàng)內(nèi)容。

代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
table{border-collapse:collapse;}
table td{border:2px solid #ccc;padding:3px 6px;}
</style>
</head>
<body>
<table>
<script>
for (var i = 1; i < 10; ++i) { // 遍歷表中所有的行
document.write('<tr>');
for (var j = 1; j <= i; ++j) { // 遍歷每行中的列
// 拼接單元格
document.write('<td>');
document.write(j);
document.write('×');
document.write(i);
document.write('=');
document.write(j * i);
document.write('</td>');
}
document.write('</tr>');
}
</script>
</table>
</body>
</html>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JS實(shí)現(xiàn)從連接中獲取youtube的key實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)從連接中獲取youtube的key的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-07-07
JavaScript的常見(jiàn)兼容問(wèn)題及相關(guān)解決方法(chrome/IE/firefox)
本篇文章只要是對(duì)JavaScript的常見(jiàn)兼容問(wèn)題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
小程序中設(shè)置緩存過(guò)期的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序中設(shè)置緩存過(guò)期的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
防止Layui form表單重復(fù)提交的實(shí)現(xiàn)方法
今天小編就為大家分享一篇防止Layui form表單重復(fù)提交的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對(duì)比)
很多時(shí)候需要用到限制文本框的數(shù)字輸入,試過(guò)許多方法,都不太理想,遂決定自己實(shí)現(xiàn)一個(gè)來(lái)玩玩,接下來(lái)介紹曾經(jīng)使用過(guò)的方法與自定義方法的對(duì)比,感興趣的朋友可以了解下啊2013-01-01
對(duì)Web開(kāi)發(fā)中前端框架與前端類(lèi)庫(kù)的一些思考
這篇文章主要介紹了對(duì)Web開(kāi)發(fā)中前端框架與前端類(lèi)庫(kù)的一些思考,本文講解了前端框架的理解誤區(qū)、前端框架與前端類(lèi)庫(kù)的區(qū)別、前端MVC框架思想等內(nèi)容,需要的朋友可以參考下2015-03-03
escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問(wèn)題
這篇文章主要介紹了escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問(wèn)題,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn)
這篇文章主要介紹了使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn),以及遇到的問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
javascript事件監(jiān)聽(tīng)與事件委托實(shí)例詳解
這篇文章主要介紹了javascript事件監(jiān)聽(tīng)與事件委托,結(jié)合實(shí)例形式詳細(xì)分析了javascript事件監(jiān)聽(tīng)與事件委托相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
JavaScript oncopy事件用法實(shí)例解析
這篇文章主要介紹了JavaScript oncopy事件用法實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05

