《web前端技術(shù)》(趙敏)003-0教案 第18課 JavaScript基礎(chǔ)之流程控制語(yǔ)句

PAGE1PAGE1PAGE2PAGE2

課題第18課JavaScript基礎(chǔ)之流程控制語(yǔ)句課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握J(rèn)avaScript中的選擇結(jié)構(gòu)語(yǔ)句和循環(huán)結(jié)構(gòu)語(yǔ)句，以及這兩種結(jié)構(gòu)語(yǔ)句中涉及的跳轉(zhuǎn)語(yǔ)句（2）獨(dú)立制作項(xiàng)目——計(jì)算銀行存款收益素質(zhì)目標(biāo)：（1）學(xué)習(xí)JavaScript中流程控制語(yǔ)句的基礎(chǔ)知識(shí)，激發(fā)了解和探索新技術(shù)的欲望（2）積極參與實(shí)戰(zhàn)演練，提升自身動(dòng)手能力，強(qiáng)化實(shí)踐能力教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：選擇結(jié)構(gòu)語(yǔ)句和循環(huán)結(jié)構(gòu)語(yǔ)句教學(xué)難點(diǎn)：制作項(xiàng)目——計(jì)算銀行存款收益教學(xué)方法問(wèn)答法、討論法、講授法、實(shí)踐練習(xí)法、演示法、翻轉(zhuǎn)課堂教學(xué)法、對(duì)比分析法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（30min）→課堂評(píng)價(jià)（10min）第2節(jié)課：→實(shí)戰(zhàn)演練（20min）→實(shí)訓(xùn)練習(xí)（15min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，把和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請(qǐng)同學(xué)們提前了解JavaScript中的流程控制語(yǔ)句的用法以及分類，常見(jiàn)的語(yǔ)句有哪些。將學(xué)生分為8個(gè)小隊(duì)，每個(gè)小隊(duì)負(fù)責(zé)查找一種語(yǔ)句的相關(guān)知識(shí)點(diǎn)（老師分好），并準(zhǔn)備課件，上課講解，可自行設(shè)計(jì)，例如舉例子演示，利用微課等方法?！緦W(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，讓學(xué)生提前了解JavaScript中的流程控制語(yǔ)句，為課堂上學(xué)習(xí)相關(guān)知識(shí)點(diǎn)做準(zhǔn)備考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（3min）【教師】提出問(wèn)題在數(shù)據(jù)結(jié)構(gòu)中我們學(xué)習(xí)過(guò)數(shù)據(jù)的三種基本結(jié)構(gòu)，有沒(méi)有同學(xué)說(shuō)下都是什么?在JavaScript中，也有三種流程控制語(yǔ)句，同學(xué)們知道是哪些么？那我們?cè)诔绦蛟O(shè)計(jì)的時(shí)候都要怎么書(shū)寫和表達(dá)？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)JavaScript提供了一些語(yǔ)句（即流程控制語(yǔ)句）來(lái)控制程序的執(zhí)行流程。這些語(yǔ)句可分為順序結(jié)構(gòu)語(yǔ)句、選擇結(jié)構(gòu)語(yǔ)句和循環(huán)結(jié)構(gòu)語(yǔ)句。前面編寫的自上而下按順序執(zhí)行的程序都是順序結(jié)構(gòu)語(yǔ)句。下面請(qǐng)同學(xué)們?cè)敿?xì)介紹選擇結(jié)構(gòu)語(yǔ)句和循環(huán)結(jié)構(gòu)語(yǔ)句，以及這兩種結(jié)構(gòu)語(yǔ)句中涉及的跳轉(zhuǎn)語(yǔ)句。通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（30min）9.6流程控制語(yǔ)句9.6.1選擇結(jié)構(gòu)語(yǔ)句【教師】讓講解if語(yǔ)句和switch語(yǔ)句的兩個(gè)小隊(duì)講解人員上臺(tái)講解，隊(duì)員可進(jìn)行補(bǔ)充，其他隊(duì)的同學(xué)可以提出疑問(wèn)。在結(jié)束后教師對(duì)知識(shí)點(diǎn)進(jìn)行補(bǔ)充，并對(duì)小組講解情況進(jìn)行評(píng)價(jià)選擇結(jié)構(gòu)語(yǔ)句就是通過(guò)對(duì)程序中給出的不同條件進(jìn)行判斷，進(jìn)而決定要執(zhí)行的語(yǔ)句。常用的選擇結(jié)構(gòu)語(yǔ)句有if語(yǔ)句和switch語(yǔ)句兩種。if語(yǔ)句if語(yǔ)句是最基本、最常見(jiàn)的選擇結(jié)構(gòu)語(yǔ)句，其語(yǔ)法格式如下：if(判斷條件){ 代碼塊1}else{ 代碼塊2}…（詳見(jiàn)教材）根據(jù)分支數(shù)量的多少，if語(yǔ)句又可以分為單分支、雙分支和多分支語(yǔ)句。單分支語(yǔ)句。在單分支if語(yǔ)句中省略了else分句，當(dāng)滿足判斷條件時(shí)，就向下執(zhí)行程序，否則不做任何處理?！ㄔ斠?jiàn)教材）【課堂拓展】當(dāng)代碼段中只有一條語(yǔ)句時(shí)，“{}”可以省略。雙分支語(yǔ)句。在雙分支語(yǔ)句中有一個(gè)else分句，當(dāng)滿足判斷條件時(shí)就執(zhí)行某一個(gè)語(yǔ)句塊，否則執(zhí)行另一個(gè)語(yǔ)句塊。…（詳見(jiàn)教材）多分支語(yǔ)句。在多分支語(yǔ)句中一個(gè)if可以接上多個(gè)elseif分句?！ㄔ斠?jiàn)教材）switch語(yǔ)句除if語(yǔ)句外，還可以通過(guò)switch語(yǔ)句進(jìn)行流程控制。switch語(yǔ)句是多分支選擇結(jié)構(gòu)語(yǔ)句，和if系列語(yǔ)句功能相同。不同的是，switch語(yǔ)句會(huì)針對(duì)某個(gè)表達(dá)式的值進(jìn)行判斷，從而決定執(zhí)行哪一段代碼，其代碼結(jié)構(gòu)更加清晰簡(jiǎn)潔。switch語(yǔ)句的語(yǔ)法格式如下：…（詳見(jiàn)教材）switch語(yǔ)句主要是通過(guò)case進(jìn)行條件判斷，一個(gè)case代表一種結(jié)果，當(dāng)滿足case條件后，會(huì)執(zhí)行case內(nèi)的代碼塊；當(dāng)前面所有case都沒(méi)有匹配成功時(shí)，會(huì)執(zhí)行default內(nèi)的代碼塊。值得注意的是，表達(dá)式匹配成功后還會(huì)繼續(xù)匹配下一個(gè)case，此時(shí)若需要跳出選擇結(jié)構(gòu)語(yǔ)句，可以使用break語(yǔ)句。【課堂拓展】switch語(yǔ)句中的default屬于可選值，具體應(yīng)用時(shí)可根據(jù)實(shí)際情況選擇是否設(shè)置default。當(dāng)遇到需要對(duì)同一個(gè)變量進(jìn)行多次判斷的場(chǎng)景時(shí)，可以考慮使用switch語(yǔ)句。例如：…（詳見(jiàn)教材）【課堂拓展】switch語(yǔ)句在進(jìn)行條件判斷時(shí)，使用全等運(yùn)算符“===”進(jìn)行判斷，因此在判斷時(shí)不會(huì)發(fā)生類型轉(zhuǎn)換。例如，num的值為'1'時(shí)，case1無(wú)法成功匹配，必須寫為case'1'。9.6.2循環(huán)結(jié)構(gòu)語(yǔ)句【教師】講解循環(huán)結(jié)構(gòu)語(yǔ)句及常見(jiàn)類別循環(huán)結(jié)構(gòu)語(yǔ)句用于反復(fù)執(zhí)行一系列語(yǔ)句，直到條件表達(dá)式的值為假為止。JavaScript中常用的循環(huán)結(jié)構(gòu)語(yǔ)句包括for語(yǔ)句、for-in語(yǔ)句、while語(yǔ)句和do-while語(yǔ)句。【學(xué)生】聆聽(tīng)、記錄、理解【教師】讓講解for語(yǔ)句、for-in語(yǔ)句、while語(yǔ)句、do-while語(yǔ)句的四個(gè)小隊(duì)講解人員上臺(tái)講解，隊(duì)員可進(jìn)行補(bǔ)充，其他隊(duì)的同學(xué)可以提出疑問(wèn)。在結(jié)束后教師對(duì)知識(shí)點(diǎn)進(jìn)行補(bǔ)充，并對(duì)小組講解情況進(jìn)行評(píng)價(jià)for語(yǔ)句for語(yǔ)句是最常用的循環(huán)結(jié)構(gòu)語(yǔ)句，適合循環(huán)次數(shù)已知的情況，其語(yǔ)法格式如下：for(初始化表達(dá)式;循環(huán)條件;操作表達(dá)式){ 循環(huán)體}…（詳見(jiàn)教材）【課堂拓展】for循環(huán)中的初始化表達(dá)式、循環(huán)條件及操作表達(dá)式都是可選的，如果在for語(yǔ)句中一個(gè)表達(dá)式都不寫，將創(chuàng)建一個(gè)無(wú)限循環(huán)。例如：…（詳見(jiàn)教材）for-in語(yǔ)句for-in語(yǔ)句主要用于遍歷數(shù)組元素或者對(duì)象的屬性，其語(yǔ)法格式如下：for(變量in對(duì)象){ 循環(huán)體}使用JavaScript變量前一般需要先進(jìn)行聲明。在ECMAScript6版本以前，使用var關(guān)鍵字聲明變量，其語(yǔ)法格式如下：…（詳見(jiàn)教材）在ECMAScript6版本之后，增加了let關(guān)鍵字聲明變量，其語(yǔ)法格式如下：…（詳見(jiàn)教材）【課堂拓展】for循環(huán)中的初始化表達(dá)式、循環(huán)條件及操作表達(dá)式都是可選的，如果在for語(yǔ)句中一個(gè)表達(dá)式都不寫，將創(chuàng)建一個(gè)無(wú)限循環(huán)。例如：…（詳見(jiàn)教材）聲明變量之后，還需要給變量賦值，否則該變量的值默認(rèn)為undefined。在JavaScript中，使用等號(hào)（=）為變量賦值。變量賦值的方式有兩種，一種是先聲明后賦值，另一種是聲明的同時(shí)賦值，其語(yǔ)法格式如下：…（詳見(jiàn)教材）例如，使用以下代碼聲明變量并賦值。…（詳見(jiàn)教材）while語(yǔ)句while語(yǔ)句根據(jù)循環(huán)條件來(lái)判斷是否重復(fù)執(zhí)行一段代碼，它的結(jié)構(gòu)比f(wàn)or語(yǔ)句更簡(jiǎn)單，其語(yǔ)法格式如下：while(循環(huán)條件){循環(huán)體}…（詳見(jiàn)教材）do-while語(yǔ)句do-while語(yǔ)句和while語(yǔ)句類似，最大的不同在于，while語(yǔ)句是先判斷循環(huán)條件再執(zhí)行循環(huán)體，而do-while是無(wú)條件執(zhí)行一次循環(huán)體后再判斷循環(huán)條件，其語(yǔ)法格式如下：do{循環(huán)體}while(循環(huán)條件);…（詳見(jiàn)教材）9.6.3跳轉(zhuǎn)語(yǔ)句【教師】讓講解break語(yǔ)句和continue語(yǔ)句的四個(gè)小隊(duì)講解人員上臺(tái)講解，隊(duì)員可進(jìn)行補(bǔ)充，其他隊(duì)的同學(xué)可以提出疑問(wèn)。在結(jié)束后教師對(duì)知識(shí)點(diǎn)進(jìn)行補(bǔ)充，并對(duì)小組講解情況進(jìn)行評(píng)價(jià)在實(shí)際應(yīng)用中，循環(huán)語(yǔ)句并不是必須等到循環(huán)條件不滿足時(shí)才結(jié)束循環(huán)。在很多情況下，開(kāi)發(fā)者希望循環(huán)能根據(jù)某種情況提前退出或者終止某一次循環(huán)。要實(shí)現(xiàn)這些需求，需要使用跳轉(zhuǎn)語(yǔ)句。跳轉(zhuǎn)語(yǔ)句包括break語(yǔ)句和continue語(yǔ)句。1．break語(yǔ)句break語(yǔ)句的語(yǔ)法格式如下：break;…（詳見(jiàn)教材）2．continue語(yǔ)句除break語(yǔ)句外，還有一個(gè)跳轉(zhuǎn)語(yǔ)句continue，其語(yǔ)法格式如下：continue;…（詳見(jiàn)教材）本節(jié)課利用翻轉(zhuǎn)課堂的形式，充分發(fā)揮學(xué)生的自主能動(dòng)性，活躍課堂氣氛，課下課上相結(jié)合，鍛煉學(xué)生自主學(xué)習(xí)的能力，課堂互相提問(wèn)和答疑，便于學(xué)生更好的掌握J(rèn)avaScript中的流程控制語(yǔ)句課堂評(píng)價(jià)（10min）【教師】對(duì)本節(jié)課的知識(shí)點(diǎn)進(jìn)行補(bǔ)充，并對(duì)本節(jié)課的整體效果進(jìn)行評(píng)價(jià)，讓同學(xué)們對(duì)其他隊(duì)的表現(xiàn)進(jìn)行打分，選出本節(jié)課最佳小組，進(jìn)行獎(jiǎng)勵(lì)通過(guò)獎(jiǎng)勵(lì)和激勵(lì)評(píng)價(jià)的方式，激發(fā)學(xué)生的進(jìn)取心，培養(yǎng)學(xué)生做事做優(yōu)的態(tài)度第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出問(wèn)題在上節(jié)課中我們講解了8種語(yǔ)句，具體應(yīng)該怎么應(yīng)用呢？這節(jié)課我們開(kāi)學(xué)習(xí)一個(gè)案例——計(jì)算銀行存款收益，其中出現(xiàn)一些名詞，“定期存款”、“存款年限”、“年利率”，有沒(méi)有同學(xué)解釋一下這些名詞？那我們計(jì)算銀行收益，應(yīng)該怎么計(jì)算呢？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣實(shí)戰(zhàn)演練（20min）計(jì)算銀行存款收益【教師】介紹制作計(jì)算銀行存款收益項(xiàng)目的重點(diǎn)部分和容易出錯(cuò)的地方并演示，要求學(xué)生制作該項(xiàng)目，遇到不會(huì)的問(wèn)題可以掃描微課二維碼觀看視頻”計(jì)算銀行存款收益“（詳見(jiàn)教材），可以互相討論或詢問(wèn)老師小明在中國(guó)建設(shè)銀行、中國(guó)工商銀行、中國(guó)農(nóng)業(yè)銀行分別存入10000元定期存款，存款年限分別為4年、5年、6年，年利率分別為3.75%、3.25%、3%。請(qǐng)問(wèn)當(dāng)所有定期存款日期結(jié)束時(shí)，小明在哪家銀行獲得的收益最高?！菊n堂拓展】這是一個(gè)簡(jiǎn)單的數(shù)學(xué)運(yùn)算，只需要分別循環(huán)計(jì)算出各個(gè)銀行到期之后存款的總額度，然后將這3個(gè)數(shù)值進(jìn)行比較，即可得到結(jié)果。步驟1HBuilderX中導(dǎo)入本書(shū)配套素材“素材與案例\第9章\實(shí)戰(zhàn)演練\9.6”文件夾，然后打開(kāi)“shouyi.html”文檔，在</body>標(biāo)簽前添加<script></script>標(biāo)簽對(duì)，然后在該標(biāo)簽對(duì)中編寫JavaScript代碼。步驟2聲明3個(gè)變量并賦值，分別表示3家銀行的定期存款金額，代碼如下：……（詳見(jiàn)教材）步驟3使用for語(yǔ)句分別計(jì)算存款日期結(jié)束時(shí)3家銀行的存款總金額，代碼如下：……（詳見(jiàn)教材）步驟4使用if多分支語(yǔ)句比較各銀行最終的存款總金額，代碼如下：……（詳見(jiàn)教材）步驟5運(yùn)行“shouyi.html”文檔，頁(yè)面中彈出顯示“中國(guó)農(nóng)業(yè)銀行收益最高”的彈窗，如圖9-11所示。由此可知，當(dāng)所有定期存款日期結(jié)束時(shí)，小明在中國(guó)農(nóng)業(yè)銀行獲得的收益最高?！ㄔ斠?jiàn)教材）制作項(xiàng)目，觀看微課，討論通過(guò)制作項(xiàng)目“計(jì)算銀行存款收益，”使學(xué)生鞏固流程控制語(yǔ)句的用法，鍛煉動(dòng)手操作能力實(shí)訓(xùn)練習(xí)（15min）【教師】先演示下最終效果，要求學(xué)生完成課后實(shí)訓(xùn)練習(xí)部分，可以互相討論或詢問(wèn)老師（1）一輛卡車裝著從果園運(yùn)來(lái)的蘋果、梨和橘子三種水果，總計(jì)有500斤。其中蘋果的重量是梨的2倍，橘子比梨重20斤，請(qǐng)計(jì)算出三種水果的重量。（2）在控制臺(tái)輸出一個(gè)九九乘法表，顯示效果如圖所示?！緦W(xué)生】討論、思考、操作通過(guò)實(shí)訓(xùn)練習(xí)，鞏固學(xué)生對(duì)JavaScript中的流程控制語(yǔ)句的理解與掌握，并鍛煉學(xué)生的實(shí)際操作能力課堂小結(jié)（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課主要介紹了JavaScript的流程控制語(yǔ)句。通過(guò)本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點(diǎn)掌握以下內(nèi)容。流程控制語(yǔ)句包括選擇結(jié)構(gòu)語(yǔ)句和循環(huán)結(jié)構(gòu)語(yǔ)句。其中，常用的選擇結(jié)構(gòu)語(yǔ)句有if語(yǔ)句和switch語(yǔ)句；常用的循環(huán)結(jié)構(gòu)語(yǔ)句有for語(yǔ)句、for-in語(yǔ)句、while語(yǔ)句和do-while語(yǔ)句。此外，根據(jù)實(shí)際應(yīng)用需要，JavaScript中還有兩個(gè)跳轉(zhuǎn)語(yǔ)句，即break語(yǔ)句和continue語(yǔ)句?！緦W(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，使學(xué)生牢固掌握J(rèn)avaScript的選擇結(jié)構(gòu)語(yǔ)句和循環(huán)結(jié)構(gòu)語(yǔ)句，以及涉及的跳轉(zhuǎn)語(yǔ)句作業(yè)布置（2min）【教師】布置課后作業(yè)請(qǐng)同學(xué)們完成以下程序，并將代碼打包至文旌課堂APP（1）大家都知道，男大當(dāng)婚，女大當(dāng)嫁。那么女方家長(zhǎng)要嫁女兒，當(dāng)然要提出一定的條件：高：180cm以上;富:1000萬(wàn)以上;帥:500以上;如果這三個(gè)條件同時(shí)滿足，則:‘我一定要嫁給他’如果三個(gè)條件有為真的情況，則:‘嫁吧，比上不足，比下有余?！绻齻€(gè)條件都不滿足，則:‘不嫁！’（2）