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