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

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