第2章 基本語法 教學(xué)設(shè)計(jì)

第3章面向?qū)ο螅ㄉ希禞avaScript前端開發(fā)案例教程》教學(xué)設(shè)計(jì)課程名稱：JavaScript前端開發(fā)案例教程授課年級(jí)：年級(jí)授課學(xué)期：學(xué)年第一學(xué)期教師姓名：年月日課題名稱第2章基本語法計(jì)劃學(xué)時(shí)6學(xué)時(shí)內(nèi)容分析對(duì)于任何一種語言來說，掌握基本語法都是學(xué)好這門語言的第一步，只有完全掌握了基礎(chǔ)知識(shí)，才能游刃有余的學(xué)習(xí)后續(xù)內(nèi)容。本章將針對(duì)JavaScript的變量定義、數(shù)據(jù)類型、運(yùn)算符等基礎(chǔ)語法進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)及基本要求掌握變量的定義與賦值掌握數(shù)據(jù)類型與運(yùn)算符的使用掌握流程控制語句的使用教學(xué)重點(diǎn)JavaScript引入方式、語法風(fēng)格、注釋、輸出語句教學(xué)難點(diǎn)數(shù)據(jù)類型轉(zhuǎn)換、字符串/賦值/邏輯運(yùn)算符、運(yùn)算符優(yōu)先級(jí)、循環(huán)結(jié)構(gòu)教學(xué)方式教學(xué)采用教師課堂講授為主概念性知識(shí)點(diǎn)：提出為什么，將抽象具體化，配合教學(xué)PPT、圖例輔助講解。功能性知識(shí)點(diǎn)：提需求，并上機(jī)演示如何應(yīng)用，重點(diǎn)內(nèi)容總結(jié)運(yùn)行原理。綜合實(shí)戰(zhàn)操作：分析整體的設(shè)計(jì)思路和步驟，對(duì)具體操作進(jìn)行上機(jī)演練。教學(xué)過程第一學(xué)時(shí)（標(biāo)識(shí)符、關(guān)鍵字、保留字、變量）一、提出需求，導(dǎo)入學(xué)習(xí)任務(wù)（1）思考編程語言的學(xué)習(xí)應(yīng)該從何入手。從學(xué)習(xí)漢語、英語的學(xué)習(xí)方式（先學(xué)習(xí)基本的語法、然后才可以組詞、造句、交流等等）引出編程語言的學(xué)習(xí)也類似。地基打好，才能建高樓；只有完全掌握了JavaScript的基礎(chǔ)知識(shí)，才能游刃有余的學(xué)習(xí)后續(xù)的內(nèi)容。（2）明確學(xué)習(xí)方向。理解標(biāo)識(shí)符的概念。熟悉關(guān)鍵字與保留字。掌握變量的基本使用。掌握變量的賦值操作。二、知識(shí)講解標(biāo)識(shí)符功能：開發(fā)中自定義的一些符號(hào)來標(biāo)記一些名稱。用途：為變量、函數(shù)命名等。標(biāo)識(shí)符的定義需要遵循一定的規(guī)則。對(duì)于多個(gè)單詞的名稱，常使用下劃線法、駝峰法、帕斯卡法的風(fēng)格。關(guān)鍵字功能：被事先定義好并賦予了特殊含義。如var、if、function。注意：關(guān)鍵字不能作為變量名和函數(shù)名使用。列舉ES5規(guī)定的關(guān)鍵字。保留字作用：系統(tǒng)預(yù)留，未來可能成為關(guān)鍵字。不推薦使用保留字來命名。變量的使用什么是變量：存儲(chǔ)數(shù)據(jù)的容器，其保存的數(shù)據(jù)是可變的。聲明變量：使用var關(guān)鍵字，通過代碼進(jìn)行演示。變量的命名：與標(biāo)識(shí)符相同。列舉哪些是合法變量名，哪些是不合法變量名。利用逗號(hào)“,”可實(shí)現(xiàn)一條語句同時(shí)完成多個(gè)變量的聲明。變量的賦值通過代碼演示如何為變量賦值。注意var關(guān)鍵字可以省略，但不推薦這么做。補(bǔ)充講解ES6新增的const關(guān)鍵字，用來定義常量。三、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第二學(xué)時(shí)（數(shù)據(jù)類型分類、基本數(shù)據(jù)類型、數(shù)據(jù)類型檢測(cè)、數(shù)據(jù)類型轉(zhuǎn)換）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。了解數(shù)據(jù)類型的分類。理解基本數(shù)據(jù)類型和復(fù)合數(shù)據(jù)類型的區(qū)別。掌握基本數(shù)據(jù)類型的使用。掌握數(shù)據(jù)類型的檢測(cè)方法。掌握數(shù)據(jù)類型的自動(dòng)轉(zhuǎn)換機(jī)制。掌握數(shù)據(jù)類型的手動(dòng)轉(zhuǎn)換操作。二、知識(shí)講解數(shù)據(jù)類型的分類劃分?jǐn)?shù)據(jù)類型的意義：保存不同類型的數(shù)據(jù)，來滿足各種操作需求。劃分方式：兩大類，基本數(shù)據(jù)類型，復(fù)合數(shù)據(jù)類型。5種常用的基本數(shù)據(jù)類型：布爾、字符、數(shù)值、空、未定義型。對(duì)象屬于復(fù)合數(shù)據(jù)類型，特點(diǎn)：里面可以保存多個(gè)變量?；緮?shù)據(jù)類型——布爾型作用：邏輯判斷，有true和false兩個(gè)值，表示真和假。注意：區(qū)分大小寫，必須全小寫?；緮?shù)據(jù)類型——數(shù)值型作用：可保存數(shù)字（包括整數(shù)和浮點(diǎn)數(shù)），用來進(jìn)行數(shù)學(xué)運(yùn)算。正負(fù)：可在數(shù)字前使用“+”或“-”表示正或負(fù)。NaN：是一個(gè)特殊的值，表示非數(shù)值。進(jìn)制：支持十進(jìn)制、八進(jìn)制、十六進(jìn)制表示法?；緮?shù)據(jù)類型——字符型作用：表示文本，可保存Unicode字符、數(shù)字等組成的字符序列。定界符：可使用單引號(hào)或雙引號(hào)。（ES6新增了反引號(hào)）在計(jì)算機(jī)中通常稱為字符串。單引號(hào)字符串中可保存雙引號(hào)，雙引號(hào)字符串中可保存單引號(hào)。轉(zhuǎn)義字符作用：在字符串中表示一些特殊字符。語法：使用“\”符號(hào)對(duì)其后的內(nèi)容轉(zhuǎn)義，或表示一些特殊字符。演示常用的轉(zhuǎn)義字符的使用?；緮?shù)據(jù)類型——空型作用：表示一個(gè)不存在的或無效的對(duì)象與地址。語法：使用null表示，全小寫字母。基本數(shù)據(jù)類型——未定義型作用：表示未定義，如聲明的變量還未被初始化。語法：使用undefined表示，全小寫字母。數(shù)據(jù)類型檢測(cè)為什么進(jìn)行數(shù)據(jù)類型檢測(cè)：變量的數(shù)據(jù)類型，在運(yùn)行過程中會(huì)根據(jù)賦值結(jié)果而改變，因此在開發(fā)中，若要知道一個(gè)變量當(dāng)前的數(shù)據(jù)類型，就需要對(duì)其檢測(cè)。演示如何利用typeof操作符來進(jìn)行數(shù)據(jù)類型檢測(cè)。演示如何利用Ototype.toString.call(data)進(jìn)行數(shù)據(jù)類型檢測(cè)。數(shù)據(jù)類型轉(zhuǎn)換為什么需要進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換。轉(zhuǎn)布爾型：利用Boolean()函數(shù)進(jìn)行轉(zhuǎn)換。注意根據(jù)傳入?yún)?shù)的不同類型，轉(zhuǎn)換結(jié)果也不同。轉(zhuǎn)數(shù)值型：利用Number()或parseInt()、parseFloat()函數(shù)進(jìn)行轉(zhuǎn)換。注意3種函數(shù)對(duì)于轉(zhuǎn)換的結(jié)果有區(qū)別。使用isNaN()可判斷給定值。轉(zhuǎn)字符型：利用String()函數(shù)，或調(diào)用toString()方法進(jìn)行轉(zhuǎn)換。三、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第三學(xué)時(shí)（表達(dá)式、算術(shù)運(yùn)算符、字符串運(yùn)算符、賦值運(yùn)算符、比較運(yùn)算符）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。理解表達(dá)式的概念。掌握算術(shù)運(yùn)算符的使用。掌握字符串運(yùn)算符的使用。掌握賦值運(yùn)算符的使用。掌握比較運(yùn)算符的使用。二、知識(shí)講解表達(dá)式作用：各種類型的數(shù)據(jù)、變量和運(yùn)算符的集合。講解表達(dá)式的用途，增強(qiáng)代碼的靈活性。算術(shù)運(yùn)算符作用：對(duì)數(shù)值類型的變量及常量進(jìn)行數(shù)學(xué)運(yùn)算。列舉常用的運(yùn)算符，通過代碼演示其使用示例。注意四則運(yùn)算遵循的順序，先乘除后加減。講解取模運(yùn)算“%”的原理和基本規(guī)律。注意浮點(diǎn)數(shù)運(yùn)算的精度問題，以及解決辦法。注意整數(shù)、浮點(diǎn)數(shù)的取值范圍，小數(shù)位的最大數(shù)量。對(duì)比分析“++”和“--”在變量前、后的區(qū)別。測(cè)試布爾型在進(jìn)行運(yùn)算時(shí)產(chǎn)生的效果。字符串運(yùn)算符作用：使用“+”對(duì)兩個(gè)字符串進(jìn)行連接，或數(shù)字與字符串連接。注意在進(jìn)行運(yùn)算時(shí)，針對(duì)不同數(shù)據(jù)類型的處理結(jié)果可能不同。測(cè)試布爾型、整型、浮點(diǎn)型或?yàn)閚ull的數(shù)據(jù)，與字符串的拼接結(jié)果。賦值運(yùn)算符作用：將運(yùn)算符右邊的值賦給左邊的變量。通過代碼演示各種賦值運(yùn)算符的使用。賦值運(yùn)算符支持對(duì)多個(gè)變量進(jìn)行同時(shí)賦值操作。對(duì)比分析“a+=b”與“a=a+b”，以及在操作字符串時(shí)的特點(diǎn)。比較運(yùn)算符作用：對(duì)兩個(gè)數(shù)值或變量進(jìn)行比較，獲得布爾值比價(jià)結(jié)果。通過代碼演示各種比較運(yùn)算符的使用。注意字符串與數(shù)字進(jìn)行比較運(yùn)算時(shí)的特點(diǎn)。注意區(qū)分全等“===”、不全等“!==”與“==”、“!=”的區(qū)別。三、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第四學(xué)時(shí)（邏輯運(yùn)算符、三元運(yùn)算符、位運(yùn)算符、運(yùn)算符優(yōu)先級(jí)）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（2）明確學(xué)習(xí)方向。掌握邏輯運(yùn)算符的使用。掌握三元運(yùn)算符的使用。掌握位運(yùn)算符的使用。理解運(yùn)算符的優(yōu)先級(jí)機(jī)制，掌握如何更改優(yōu)先級(jí)。二、知識(shí)講解邏輯運(yùn)算符作用：對(duì)布爾型的數(shù)據(jù)進(jìn)行操作。通過代碼演示常用邏輯運(yùn)算符的使用，注意比較各運(yùn)算符的區(qū)別。注意“&&”和“||”的短路效果，并演示短路效果的使用。演示邏輯運(yùn)算符在if中的使用，如“x>3&&y!=0”。三元運(yùn)算符作用：根據(jù)條件表達(dá)式的結(jié)果，執(zhí)行表達(dá)式1或表達(dá)式2。利用三元運(yùn)算符可以簡(jiǎn)化代碼書寫，使代碼簡(jiǎn)潔方便。通過代碼演示三元運(yùn)算符的使用。位運(yùn)算符作用：對(duì)數(shù)據(jù)進(jìn)行二進(jìn)制按位操作。在講解前，回顧進(jìn)制之間的轉(zhuǎn)換以及如何查看ASCII表。通過代碼演示各種位運(yùn)算符的使用。以二進(jìn)制的方式講解位運(yùn)算的運(yùn)算過程。運(yùn)算符優(yōu)先級(jí)作用：當(dāng)一個(gè)表達(dá)式中出現(xiàn)多個(gè)運(yùn)算符時(shí)，其優(yōu)先級(jí)值得注意。給出運(yùn)算符優(yōu)先級(jí)表格，并演示具體案例進(jìn)行說明。表達(dá)式中還有一個(gè)優(yōu)先級(jí)最高的運(yùn)算符——圓括號(hào)()，演示其使用方法。三、【案例】計(jì)算圓的周長(zhǎng)和面積分析案例的功能和實(shí)現(xiàn)思路功能：根據(jù)用戶輸入的半徑，計(jì)算圓的周長(zhǎng)和面積。思路：通過prompt()提示用戶輸入半徑，然后進(jìn)行計(jì)算，將計(jì)算結(jié)果顯示在網(wǎng)頁(yè)中。編寫代碼完成案例的開發(fā)在網(wǎng)頁(yè)中準(zhǔn)備3個(gè)文本框，分別用來顯示半徑、周長(zhǎng)和面積。編寫JavaScript代碼，通過prompt()提示用戶輸入半徑。將輸入的內(nèi)容轉(zhuǎn)換成數(shù)字。判斷用戶輸入的內(nèi)容是否合法，如果不合法則不進(jìn)行計(jì)算并給出提示。利用“*”進(jìn)行乘法計(jì)算。為了更好的顯示效果，通過字符串的toFixed()限制小數(shù)的最大位數(shù)。將計(jì)算結(jié)果顯示在網(wǎng)頁(yè)的文本框中。四、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第五學(xué)時(shí)（選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語句）一、提出需求，導(dǎo)入學(xué)習(xí)任務(wù)（1）思考如何將現(xiàn)實(shí)生活中的判斷（假如..否則…等）以及只要符合某要求就重復(fù)執(zhí)行某些操作的關(guān)系在程序中表示出來。流程控制語句：順序、選擇和循環(huán)。選擇結(jié)構(gòu)語句指的就是需要對(duì)一些條件進(jìn)行判斷，從而決定執(zhí)行指定的代碼。循環(huán)語句就是可以實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行，如計(jì)算給定區(qū)間內(nèi)的偶數(shù)等。（2）明確學(xué)習(xí)方向。掌握選擇結(jié)構(gòu)語句if、switch的使用方法。掌握循環(huán)結(jié)構(gòu)語句while、do…while、for的使用方法。掌握跳轉(zhuǎn)語句break、continue的使用方法。二、知識(shí)講解選擇結(jié)構(gòu)語句分類：?jiǎn)畏种В╥f）、雙分支（if…else）和多分支（if…elseif…else），switch也屬于多分支。選擇結(jié)構(gòu)——單分支if作用：當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理。演示單分支的語法結(jié)構(gòu)，繪制流程圖，以及示例代碼。選擇結(jié)構(gòu)——雙分支if…else作用：當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理，否則進(jìn)行另一種處理。演示雙分支的語法結(jié)構(gòu)，繪制流程圖，以及示例代碼。選擇結(jié)構(gòu)——多分支if…elseif…else作用：針對(duì)不同情況進(jìn)行不同的處理。通過多分支語句，為學(xué)生的考試成績(jī)劃分等級(jí)，如優(yōu)秀、良好、及格等。演示多分支的語法結(jié)構(gòu)，繪制流程圖。注意“elseif”中間有空格，如果遺漏，會(huì)造成語法錯(cuò)誤。選擇結(jié)構(gòu)——多分支switchswitch語句也是多分支語句，功能與if系列條件語句相同。switch選擇結(jié)構(gòu)語句的特點(diǎn)就是代碼更加清晰簡(jiǎn)潔、便于閱讀。區(qū)分switch與if的不同。switch只能針對(duì)某個(gè)表達(dá)式的值進(jìn)行判斷，從而決定執(zhí)行哪一段代碼。注意在switch中，break和default的作用，以及在省略情況下的細(xì)節(jié)問題。演示如何利用switch的方式來判斷學(xué)生成績(jī)的等級(jí)。循環(huán)結(jié)構(gòu)語句作用：實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行，例如連續(xù)輸出1~100之間的數(shù)字。。分類：while、do…while和for循環(huán)語句。循環(huán)結(jié)構(gòu)——while講解while的語法結(jié)構(gòu)，繪制流程圖。通過編寫代碼演示while的應(yīng)用。應(yīng)注意，若循環(huán)條件永遠(yuǎn)為true時(shí)，則會(huì)出現(xiàn)死循環(huán)。案例：將while與if結(jié)合起來，實(shí)現(xiàn)計(jì)算100以內(nèi)的奇數(shù)和。循環(huán)結(jié)構(gòu)——do…while講解do…while的語法結(jié)構(gòu)，繪制流程圖。比較while與do…while的異同。while是先判斷條件后執(zhí)行循環(huán)體，而do...while會(huì)無條件執(zhí)行一次循環(huán)體后再判斷條件，決定是否執(zhí)行下次循環(huán)。循環(huán)結(jié)構(gòu)——for作用：適合循環(huán)次數(shù)已知的情況。分別使用while與for實(shí)現(xiàn)輸出5個(gè)“*”，通過對(duì)比代碼進(jìn)行學(xué)習(xí)。講解for循環(huán)的語法結(jié)構(gòu)，繪制流程圖。測(cè)試for循環(huán)括號(hào)中的表達(dá)式是否可以為空，如“for(;;)”。跳轉(zhuǎn)語句作用：實(shí)現(xiàn)程序執(zhí)行過程中的流程跳轉(zhuǎn)。分類：break和continue語句。break：在switch中終止當(dāng)前語句的執(zhí)行，或在循環(huán)語句中跳出循環(huán)。continue語句用于結(jié)束本次循環(huán)的執(zhí)行，開始下一輪循環(huán)的執(zhí)行操作。以在for循環(huán)中跳出為例，編寫代碼演示break的使用。將break換成continue，觀察程序的運(yùn)行結(jié)果。break可在死循環(huán)中使用，當(dāng)滿足一定條件時(shí)跳出循環(huán)。continue和break還可跳轉(zhuǎn)到指定的標(biāo)簽語句處，演示標(biāo)簽的添加，以及跳到指定標(biāo)簽的實(shí)現(xiàn)。利用標(biāo)簽，實(shí)現(xiàn)跳出兩層循環(huán)，或在多層循環(huán)內(nèi)跳出到指定的外層循環(huán)。三、【案例】打印金字塔分析案例的功能和實(shí)現(xiàn)思路觀察金字塔的顯示效果，分析其基本規(guī)律。每層中星星的數(shù)量=當(dāng)前層數(shù)*2-1。例如，當(dāng)前為第4層，則星星數(shù)=4*2-1=7。每層星星前的空格=金字塔層數(shù)-當(dāng)前層數(shù)。例如，當(dāng)前行數(shù)為第3層，則空格數(shù)=5-3=2。編寫代碼完成案例的開發(fā)通過prompt()提示用戶輸入金字塔的層數(shù)。判斷用戶輸入是否為一個(gè)合法的數(shù)字，如果不是則報(bào)錯(cuò)提示。編寫外層for循環(huán)，遍歷金字塔的層數(shù)。編寫內(nèi)層第1個(gè)for循環(huán)，輸出星星前的空格。編寫內(nèi)層第2個(gè)for循環(huán)，輸出指定數(shù)量的“*”。在一行輸