《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》 教案-教學(xué)設(shè)計 第2章 JavaScript基礎(chǔ)

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效PAGE12PAGE7《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第2章JavaScript基礎(chǔ)計劃課時6課時教學(xué)引入JavaScript作為一門編程語言，在Web前端開發(fā)領(lǐng)域中扮演著至關(guān)重要的角色。作為一名初學(xué)者，掌握JavaScript基礎(chǔ)是十分必要的。只有掌握了JavaScript基礎(chǔ)，才能更好地理解和編寫JavaScript程序，為后續(xù)的學(xué)習(xí)奠定堅實的基礎(chǔ)。本章將對JavaScript基礎(chǔ)進行講解，包括數(shù)據(jù)類型、數(shù)據(jù)類型轉(zhuǎn)換、運算符和流程控制。教學(xué)目標(biāo)使學(xué)生了解數(shù)據(jù)類型的分類，能夠描述JavaScript中的基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型使學(xué)生掌握常用的基本數(shù)據(jù)類型，能夠根據(jù)實際需求定義基本數(shù)據(jù)類型的變量使學(xué)生掌握數(shù)據(jù)類型轉(zhuǎn)換，能夠根據(jù)實際需求將數(shù)據(jù)轉(zhuǎn)換為布爾型、數(shù)字型或字符串型使學(xué)生掌握運算符的使用，能夠靈活運用運算符完成運算使學(xué)生掌握選擇結(jié)構(gòu)語句，能夠根據(jù)實際需求選擇合適的選擇結(jié)構(gòu)語句使學(xué)生掌握循環(huán)結(jié)構(gòu)語句，能夠根據(jù)實際需求選擇合適的循環(huán)結(jié)構(gòu)語句使學(xué)生掌握跳轉(zhuǎn)語句，能夠靈活運用continue語句或break語句完成程序中的流程跳轉(zhuǎn)教學(xué)重點算術(shù)運算符字符串運算符賦值運算符比較運算符邏輯運算符三元運算符位運算符數(shù)據(jù)類型檢測運算符運算符優(yōu)先級選擇結(jié)構(gòu)循環(huán)結(jié)構(gòu)跳轉(zhuǎn)語句教學(xué)難點選擇結(jié)構(gòu)循環(huán)結(jié)構(gòu)【案例】for語句的使用循環(huán)嵌套教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進行教學(xué)教學(xué)過程第一課時（數(shù)據(jù)類型分類、常用的基本數(shù)據(jù)類型、將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)、將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)、將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在計算機編程中，數(shù)據(jù)有多種不同的類型。不同數(shù)據(jù)類型的數(shù)據(jù)占用的存儲空間不同，計算方式也不同。本節(jié)課將講解數(shù)據(jù)類型及其轉(zhuǎn)換。三、新課講解知識點1-數(shù)據(jù)類型分類教師通過PPT的方式講解數(shù)據(jù)類型分類?；緮?shù)據(jù)類型。復(fù)雜數(shù)據(jù)類型。知識點2-常用的基本數(shù)據(jù)類型教師通過PPT的方式講解常用的基本數(shù)據(jù)類型。布爾型。數(shù)字型。整數(shù)浮點數(shù)字符串型。空型。未定義型。知識點3-將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)教師通過PPT結(jié)合實際操作的方式講解將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)。在JavaScript中，使用Boolean()可以將給定的數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)通過代碼演示如何將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)知識點4-將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)教師通過PPT結(jié)合實際操作的方式講解將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)。將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)的方式。parseInt()parseFloat()Number()通過代碼演示如何將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)。不同類型數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)的結(jié)果。知識點5-將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)教師通過PPT結(jié)合實際操作的方式講解將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。在JavaScript中可以使用String()或toString()將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。String()和toString()的區(qū)別。通過代碼演示如何將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第二課時（算術(shù)運算符、字符串運算符、賦值運算符、比較運算符、邏輯運算符、三元運算符、位運算符、數(shù)據(jù)類型檢測運算符、運算符優(yōu)先級、【案例】計算圓的周長和面積）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導(dǎo)入新課在實際開發(fā)中，經(jīng)常需要對數(shù)據(jù)進行運算，JavaScript提供了多種類型的運算符用于運算。運算符也稱為操作符，用于實現(xiàn)算術(shù)運算、字符串運算、賦值運算、比較運算、邏輯運算等。本節(jié)課將講解JavaScript中常用的運算符和運算符的優(yōu)先級，并進行案例練習(xí)。三、新課講解知識點1-算術(shù)運算符教師通過PPT結(jié)合實際操作的方式講解算術(shù)運算符。算術(shù)運算符的作用。JavaScript中常用的算術(shù)運算符。通過代碼演示自增和自減運算。算術(shù)運算符在實際應(yīng)用過程中的注意事項。知識點2-字符串運算符教師通過PPT結(jié)合實際操作的方式講解字符串運算符。字符串運算符的作用。通過代碼演示字符串運算符的使用。使用模板字符串的方式實現(xiàn)字符串的拼接。知識點3-賦值運算符教師通過PPT結(jié)合實際操作的方式講解賦值運算符。賦值運算符的作用。JavaScript中常用的賦值運算符。通過代碼演示賦值運算符的使用。知識點4-比較運算符教師通過PPT結(jié)合實際操作的方式講解比較運算符。比較運算符的作用。JavaScript中常用的比較運算符。通過代碼演示比較運算符的使用。知識點5-邏輯運算符教師通過PPT結(jié)合實際操作的方式講解邏輯運算符。邏輯運算符的作用。JavaScript中常用的邏輯運算符。通過代碼演示邏輯運算符的使用。知識點6-三元運算符教師通過PPT結(jié)合實際操作的方式講解三元運算符。三元運算符的作用。三元表達式的語法格式。通過代碼演示三元運算符的使用。知識點7-位運算符教師通過PPT結(jié)合實際操作的方式講解位運算符。位運算符的作用。JavaScript中常用的位運算符。通過代碼演示位運算符的使用。知識點8-數(shù)據(jù)類型檢測運算符教師通過PPT結(jié)合實際操作的方式講解數(shù)據(jù)類型檢測運算符。typeof運算符的兩種語法格式。通過代碼演示使用typeof運算符檢測數(shù)據(jù)類型。知識點9-運算符優(yōu)先級教師通過PPT結(jié)合實際操作的方式講解運算符優(yōu)先級。JavaScript中的運算符優(yōu)先級。通過代碼演示未加小括號的表達式和加小括號的表達式的運算順序。知識點10-【案例】計算圓的周長和面積教師通過PPT結(jié)合實際操作的方式講解【案例】計算圓的周長和面積。JavaScript中的運算符優(yōu)先級案例要求運用運算符的知識，實現(xiàn)計算圓的周長和面積。其中，計算圓的周長的公式為2r，計算圓的面積的公式為r2。公式中，表示圓周率，在代碼中使用圓周率的近似值3.14；r表示圓的半徑。編寫代碼實現(xiàn)案例四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式檢測學(xué)生對運算符的掌握情況。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第三、四課時（選擇結(jié)構(gòu)、【案例】查詢蔬菜的價格、循環(huán)結(jié)構(gòu)、【案例】for語句的使用、循環(huán)嵌套、跳轉(zhuǎn)語句）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在JavaScript中，當(dāng)需要實現(xiàn)復(fù)雜的業(yè)務(wù)邏輯時，需要對程序進行流程控制。根據(jù)流程控制的需要，通常將程序分為3種結(jié)構(gòu)，分別是順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。本節(jié)課將詳細講解這3種結(jié)構(gòu)。三、新課講解知識點1-選擇結(jié)構(gòu)教師通過PPT結(jié)合實際操作的方式講解選擇結(jié)構(gòu)。if語句。if語句的語法格式if語句的運行流程通過代碼演示if語句的使用if…else語句。if…else語句的語法格式if…else語句的運行流程通過代碼演示if…else語句的使用if…elseif…else語句。if…elseif…else語句的語法結(jié)格式if…elseif…else語句的運行流程通過代碼演示if…elseif…else語句的使用switch語句。switch語句的語法結(jié)構(gòu)switch語句的運行流程通過代碼演示switch語句的使用知識點2-【案例】查詢蔬菜的價格教師通過PPT結(jié)合實際操作的方式講解【案例】查詢蔬菜的價格。案例要求定義一個用于保存售貨員輸入的蔬菜名稱的變量vegetable，然后使用switch語句實現(xiàn)查詢對應(yīng)蔬菜的價格。當(dāng)售貨員輸入需要查詢的蔬菜名稱后，控制臺會輸出對應(yīng)的蔬菜價格，其中，芹菜的價格是3.2元/kg；黃瓜的價格是2.5元/kg；蓮藕的價格是9.0元/kg；土豆的價格是1.2元/kg。如果輸入的蔬菜名稱不存在，則輸出“沒有此蔬菜”。編寫代碼實現(xiàn)案例。知識點3-循環(huán)結(jié)構(gòu)教師通過PPT結(jié)合實際操作的方式講解循環(huán)結(jié)構(gòu)。for語句。for語句的語法格式for語句的運行流程通過代碼演示for語句的使用while語句。while語句的語法格式while語句的運行流程通過代碼演示while語句的使用do…while語句。do…while語句的語法格式do…while語句的運行流程通過代碼演示do…while語句的使用知識點4-【案例】for語句的使用教師通過PPT結(jié)合實際操作的方式講解【案例】for語句的使用。通過6個小案例鞏固for語句的使用。重復(fù)運行相同代碼。重復(fù)運行不同代碼。計算1~100所有整數(shù)的和與平均值。計算1~100所有整數(shù)中偶數(shù)的和與奇數(shù)的和。計算1~100所有整數(shù)中能被5整除的整數(shù)之和。自動生成字符串。知識點5-循環(huán)嵌套教師通過PPT結(jié)合實際操作的方式講解循環(huán)嵌套。for語句循環(huán)嵌套for語句的語法格式。通過3個案例演示循環(huán)嵌套的使用。生成指定行列的星星圖案生成星星構(gòu)成的三角形圖案生成九九乘法表知識點6-跳轉(zhuǎn)語句教師通過PPT結(jié)合實際操作的方式講解跳轉(zhuǎn)語句。跳轉(zhuǎn)語句的作用。JavaScript中常用的跳轉(zhuǎn)語句。continue語句continue語句的作用通過代碼演示continue語句的使用break語句break語句的作用通過代碼演示break語句的使用break語句跳轉(zhuǎn)到指定標(biāo)簽的語法格式通過代碼演示標(biāo)簽語句的使用四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式檢測學(xué)生對選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)和跳轉(zhuǎn)語句的基本使用的掌握情況。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第五、六課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習(xí)，通過上機練習(xí)考察學(xué)生對知識點的掌握情況。上機：（考察知識點為：【案例】計算圓的周長和面積、【案例】查詢蔬菜的價格、【案例】for語句的