一篇文章教你用JavaScript使用流程控制打印九九乘法表
一、選擇結(jié)構(gòu)
概念：選擇結(jié)構(gòu)語句需要根據(jù)給出的條件進(jìn)行判斷來決定執(zhí)行對應(yīng)的代碼。
if單分支語句
概念：if條件判斷語句也被稱為單分支語句，當(dāng)滿足某種條件時，就進(jìn)行某種處理。
舉例：只有年齡大于等于18周歲，才輸出已成年，否則無輸出。
if…else雙分支語句
概念：if…else語句也稱為雙分支語句，當(dāng)滿足某種條件時，就進(jìn)行某種處理，否則進(jìn)行另一種處理。
舉例：判斷一個學(xué)生的年齡，大于等于18歲則是成年人，否則是未成年人。
if…else if…else多分支語句
概念：if…else if…else語句也稱為多分支語句，可針對不同情況進(jìn)行不同的處理。
舉例：對一個學(xué)生的考試成績進(jìn)行等級的劃分，分?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”語句在使用時，“else if”中間要有空格，否則程序會報語法錯誤。
switch多分支語句
概念：switch語句也是多分支語句，功能與if系列條件語句相同，不同的是它只能針對某個表達(dá)式的值作出判斷，從而決定執(zhí)行哪一段代碼。
特點：代碼更加清晰簡潔、便于閱讀。
舉例：根據(jù)學(xué)生成績score進(jìn)行評比（滿分為100分）。
二、循環(huán)結(jié)構(gòu)
概念：所謂循環(huán)語句就是可以實現(xiàn)一段代碼的重復(fù)執(zhí)行。
舉例：連續(xù)輸出1~100之間的數(shù)字。
while循環(huán)語句
概念：while循環(huán)語句是根據(jù)循環(huán)條件來判斷是否重復(fù)執(zhí)行一段代碼。
注意
需要注意的是，若循環(huán)條件永遠(yuǎn)為true時，則會出現(xiàn)死循環(huán)，因此在開發(fā)中應(yīng)根據(jù)實際需要，在循環(huán)體中設(shè)置循環(huán)出口，即循環(huán)結(jié)束的條件。
do…while循環(huán)語句
do…while循環(huán)語句的功能與while循環(huán)語句類似，唯一的區(qū)別在于，while是先判斷條件后執(zhí)行循環(huán)體，而do…while會無條件執(zhí)行一次循環(huán)體后再判斷條件。
for循環(huán)語句
概念：for循環(huán)語句是最常用的循環(huán)語句，它適合循環(huán)次數(shù)已知的情況。
for關(guān)鍵字后面小括號“()”中包括了三部分內(nèi)容：
初始化表達(dá)式。循環(huán)條件。操作表達(dá)式。
它們之間用“;”分隔，{}中的執(zhí)行語句為 ③循環(huán)體。
注意
for循環(huán)語句小括號“()”內(nèi)的每個表達(dá)式都可以為空，但是必須保留分號分割符。當(dāng)每個表達(dá)式都為空時，表示該for循環(huán)語句的循環(huán)條件永遠(yuǎn)滿足，會進(jìn)入無限循環(huán)的狀態(tài)，此時如果要結(jié)束無限循環(huán)，可在for語句循環(huán)體中用跳轉(zhuǎn)語句進(jìn)行控制。
三、跳轉(zhuǎn)語句
概念：跳轉(zhuǎn)語句用于實現(xiàn)程序執(zhí)行過程中的流程跳轉(zhuǎn)。
常用的跳轉(zhuǎn)語句：有break和continue語句。
break與continue的區(qū)別：break語句可應(yīng)用在switch和循環(huán)語句中，其作用是終止當(dāng)前語句的執(zhí)行，跳出switch選擇結(jié)構(gòu)或循環(huán)語句，執(zhí)行后面的代碼。而continue語句用于結(jié)束本次循環(huán)的執(zhí)行，開始下一輪循環(huán)的執(zhí)行操作。
其他功能：break和continue語句還可跳轉(zhuǎn)到指定的標(biāo)簽語句處，實現(xiàn)嵌套語句的多層次跳轉(zhuǎn)。
- label表示標(biāo)簽的名稱，如start、end等任意合法的標(biāo)識符。
- statement表示具體執(zhí)行的語句，如if、while、變量的聲明等。
- 標(biāo)簽語句必須在使用之前定義，否則會出現(xiàn)找不到標(biāo)簽的情況。
【案例】打印金字塔
代碼實現(xiàn)思路：
- 分析金字塔組成：由空格和星星“*”組成的三角形。
- 分析“*”和空格的分布規(guī)律（假設(shè)最上面的一個星星作為金字塔的第一層）。
- 每層中星星的數(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。
代碼實現(xiàn)
<script>
var level = prompt('請設(shè)置金字塔的層數(shù)');
// 獲取輸入的純數(shù)字，其余情況皆轉(zhuǎn)為NaN
level = parseInt(level);
// 判斷用戶輸入的數(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>
四、動手實踐九九乘法表
九九乘法表體現(xiàn)了數(shù)字之間乘法的規(guī)律，成為了學(xué)生在學(xué)習(xí)數(shù)學(xué)時必不可少的一項內(nèi)容。
代碼實現(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é)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹
下面小編就為大家?guī)硪黄狫avaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了input框中的name和id的區(qū)別介紹，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-11-11
JS項目中對本地存儲進(jìn)行二次的封裝的實現(xiàn)
這篇文章主要介紹了JS項目中對本地存儲進(jìn)行二次的封裝,這里我們將要使用到的key存儲下來，新建一個叫constant-storage.js的文件，對外暴露一些key的鍵名，也方便后期統(tǒng)一修改，這里因為都是恒量，所以名稱我們都用大寫表示，需要的朋友可以參考下2022-07-07
學(xué)習(xí)JavaScript設(shè)計模式之裝飾者模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的裝飾者模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JavaScript適配器模式原理與用法,結(jié)合具體實例形式詳細(xì)分析了JavaScript適配器模式概念、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要教大家如何簡單實現(xiàn)JS倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
thinkphp中常用的系統(tǒng)常量和系統(tǒng)變量
這篇文章主要介紹了thinkphp中常用的系統(tǒng)常量和變量,需要的朋友可以參考下2014-03-03
手機(jī)開發(fā)必備技巧：javascript及CSS功能代碼分享
這篇文章主要介紹了手機(jī)開發(fā)必備技巧：javascript及CSS功能代碼分享,本文講解了viewport(可視區(qū)域)操作、鏈接操作、javascript事件等內(nèi)容,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JS實現(xiàn)的點擊表頭排序功能,可實現(xiàn)針對表格中的字母、數(shù)字、日期等格式進(jìn)行排序的功能,涉及javascript針對頁面table元素的獲取及字符串、數(shù)字等排序操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
取變量的Boolean值2008-12-12