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

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效來源網(wǎng)絡(luò)侵權(quán)請(qǐng)聯(lián)系刪除PAGE12黑馬程序員《JavaScript前端開發(fā)案例教程（第2版）》教學(xué)設(shè)計(jì)課程名稱：授課年級(jí)：授課學(xué)期：教師姓名：年月課題名稱第2章JavaScript基本語法計(jì)劃課時(shí)8課時(shí)教學(xué)引入學(xué)習(xí)任何一門語言，都需要掌握這門語言的基本語法，JavaScript語言也不例外。只有掌握了JavaScript的基本語法，才能游刃有余地學(xué)習(xí)后續(xù)內(nèi)容。本章將針對(duì)JavaScript的變量、數(shù)據(jù)類型、表達(dá)式、運(yùn)算符以及流程控制等基本語法進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)使學(xué)生了解什么是變量，能夠說出變量的概念使學(xué)生掌握變量的命名規(guī)則，能夠?yàn)樽兞棵箤W(xué)生掌握變量的聲明與賦值，能夠聲明變量并為其賦值使學(xué)生熟悉數(shù)據(jù)類型的分類，能夠說出JavaScript中有哪些數(shù)據(jù)類型使學(xué)生掌握常用的基本數(shù)據(jù)類型，能夠根據(jù)實(shí)際需求聲明基本數(shù)據(jù)類型的變量使學(xué)生掌握數(shù)據(jù)類型檢測(cè)，能夠檢測(cè)變量的數(shù)據(jù)類型是否符合預(yù)期使學(xué)生掌握數(shù)據(jù)類型轉(zhuǎn)換，能夠根據(jù)實(shí)際需求進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換使學(xué)生掌握表達(dá)式的使用，能夠根據(jù)具體需求使用表達(dá)式使學(xué)生掌握運(yùn)算符的使用，能夠使用運(yùn)算符完成運(yùn)算使學(xué)生熟悉運(yùn)算符的優(yōu)先級(jí)，能夠區(qū)分表達(dá)式中運(yùn)算符的優(yōu)先級(jí)使學(xué)生掌握選擇結(jié)構(gòu)語句，能夠根據(jù)需求選擇合適的選擇結(jié)構(gòu)語句使學(xué)生掌握循環(huán)結(jié)構(gòu)語句，能夠根據(jù)需求選擇合適的循環(huán)結(jié)構(gòu)語句使學(xué)生掌握跳轉(zhuǎn)語句，能夠?qū)崿F(xiàn)程序中的流程跳轉(zhuǎn)使學(xué)生掌握循環(huán)嵌套，能夠根據(jù)程序需要使用循環(huán)嵌套語句教學(xué)重點(diǎn)變量的聲明與賦值常用的基本數(shù)據(jù)類型數(shù)據(jù)類型轉(zhuǎn)換算術(shù)運(yùn)算符邏輯運(yùn)算符選擇結(jié)構(gòu)-if...else語句循環(huán)結(jié)構(gòu)-for語句跳轉(zhuǎn)語句動(dòng)手實(shí)踐：輸出“金字塔”教學(xué)難點(diǎn)數(shù)據(jù)類型轉(zhuǎn)換算術(shù)運(yùn)算符賦值運(yùn)算符邏輯運(yùn)算符循環(huán)結(jié)構(gòu)-for語句跳轉(zhuǎn)語句循環(huán)嵌套動(dòng)手實(shí)踐：輸出“金字塔”教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一課時(shí)（什么是變量、變量的命名規(guī)則、變量的聲明與賦值、【案例】交換兩個(gè)變量的值）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過直接導(dǎo)入的方式導(dǎo)入新課在程序中，經(jīng)常需要保存一些臨時(shí)數(shù)據(jù)。例如，將兩個(gè)數(shù)字相加的結(jié)果保存起來，以便在后面的計(jì)算中使用。為了保存這些臨時(shí)數(shù)據(jù)，我們可以在程序中聲明一些變量。本節(jié)課將講解什么是變量、變量的命名規(guī)則以及變量的聲明與賦值。三、新課講解知識(shí)點(diǎn)1-什么是變量教師通過PPT的方式講解什么是變量。什么是變量。變量的組成。變量名。變量值。知識(shí)點(diǎn)2-變量的命名規(guī)則教師通過PPT的方式講解變量的命名規(guī)則。變量的命名規(guī)則。變量的命名建議。常見的關(guān)鍵字。知識(shí)點(diǎn)3-變量的聲明與賦值教師通過PPT結(jié)合實(shí)際操作的方式講解變量的聲明與賦值。先聲明后賦值。聲明的同時(shí)并賦值。多學(xué)一招：常見的關(guān)鍵字。知識(shí)點(diǎn)4-【案例】交換兩個(gè)變量的值教師通過PPT結(jié)合實(shí)際操作的方式講解【案例】交換兩個(gè)變量的值。案例需求：假設(shè)我們?cè)谝患椅鞑蛷d用餐，我們左手拿著西餐刀，右手握著西餐叉，但是西餐的禮儀是左手握西餐叉，右手拿西餐刀，因此我們需要將左右手的西餐工具交換。本案例將實(shí)現(xiàn)交換左右手的西餐工具。案例分析：我們可以將左手、右手和餐桌看作3個(gè)變量，把左手看作變量leftHand，變量值為西餐刀；把右手看作變量rightHand，變量值為西餐叉；把餐桌看作變量temp，用來臨時(shí)存儲(chǔ)數(shù)據(jù)。編寫代碼實(shí)現(xiàn)案例。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過測(cè)試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺(tái)（://tch.ityxb）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第二課時(shí)（數(shù)據(jù)類型分類、常用的基本數(shù)據(jù)類型、數(shù)據(jù)類型檢測(cè)、數(shù)據(jù)類型轉(zhuǎn)換）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課變量是存儲(chǔ)數(shù)據(jù)的容器，變量可以保存各種各樣的數(shù)據(jù)，例如字符串、數(shù)字等。這些數(shù)據(jù)在計(jì)算機(jī)中需要分類型存儲(chǔ)，例如將一串字符存為字符串型數(shù)據(jù)，將數(shù)字存為數(shù)字型數(shù)據(jù)等。接下來將對(duì)數(shù)據(jù)類型進(jìn)行講解。三、新課講解知識(shí)點(diǎn)1-數(shù)據(jù)類型分類教師通過PPT的方式講解JavaScript中的數(shù)據(jù)類型分類。基本數(shù)據(jù)類型（或稱為值類型）。boolean（布爾型）string（字符串型）number（數(shù)字型）null（空型）undefined（未定義型）bigInt（大整型）symbol（符號(hào)型）復(fù)雜數(shù)據(jù)局類型（或稱為引用類型）。object（對(duì)象）。知識(shí)點(diǎn)2-常用的基本數(shù)據(jù)類型教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中常用的基本數(shù)據(jù)類型。布爾型。數(shù)字型。整數(shù)：一般情況下使用十進(jìn)制表示，除此之外還可以使用八進(jìn)制或十六進(jìn)制表示。浮點(diǎn)數(shù)：浮點(diǎn)數(shù)可以使用標(biāo)準(zhǔn)格式和科學(xué)記數(shù)法格式表示。通過Number.MAX_VALUE獲取數(shù)字型的最大值。通過Number.MIN_VALUE獲取數(shù)字型的最小值。字符串型。單引號(hào)字符串。雙引號(hào)字符串。單、雙引號(hào)嵌套的情況?？招停簄ull。未定義型：undefined。多學(xué)一招：數(shù)字型中的特殊值。Infinity（無窮大）。-Infinity（無窮小）。NaN（NotaNumber，非數(shù)字）。使用isNaN()可以判斷一個(gè)變量的值是否為數(shù)字。知識(shí)點(diǎn)3-數(shù)據(jù)類型檢測(cè)教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的數(shù)據(jù)類型檢測(cè)。typeof操作符的兩種語法格式。typeof需要類型檢測(cè)的數(shù)據(jù)typeof(需要類型檢測(cè)的數(shù)據(jù))演示如何使用typeof操作符檢測(cè)數(shù)據(jù)類型。知識(shí)點(diǎn)4-數(shù)據(jù)類型轉(zhuǎn)換教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換。將數(shù)據(jù)轉(zhuǎn)換為布爾型。通Boolean()。將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型。parseInt()。parseFloat()。Number()。將數(shù)據(jù)轉(zhuǎn)換為字符串型。String()。toString()。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過提問的方式檢測(cè)學(xué)生是否掌握了JavaScript中的數(shù)據(jù)類型。五、布置作業(yè)教師通過高校教輔平臺(tái)（://tch.ityxb）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第三、四課時(shí)（表達(dá)式、算術(shù)運(yùn)算符、字符串運(yùn)算符、【案例】根據(jù)用戶輸入的數(shù)據(jù)完成求和運(yùn)算、賦值運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、三元運(yùn)算符、位運(yùn)算符、運(yùn)算符優(yōu)先級(jí)、【案例】計(jì)算圓的周長和面積）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過需求引入的方式導(dǎo)入新課在實(shí)際開發(fā)中，我們需要進(jìn)行各種各樣的運(yùn)算，這時(shí)就需要用到表達(dá)式和運(yùn)算符。表達(dá)式是一組代碼的集合，每個(gè)表達(dá)式的執(zhí)行結(jié)果都是一個(gè)值。運(yùn)算符用于按照特定規(guī)則進(jìn)行運(yùn)算。本節(jié)課將講解JavaScript中的表達(dá)式和運(yùn)算符。三、新課講解知識(shí)點(diǎn)1-表達(dá)式教師通過PPT結(jié)合實(shí)際操作的方式幫助學(xué)生認(rèn)識(shí)JavaScript中的表達(dá)式。最基本的表達(dá)式：一個(gè)變量或值，不再包含其他表達(dá)式。含有運(yùn)算符的表達(dá)式。賦值表達(dá)式。知識(shí)點(diǎn)2-算術(shù)運(yùn)算符教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的算術(shù)運(yùn)算符。算術(shù)運(yùn)算符的作用：用于對(duì)兩個(gè)變量或數(shù)字進(jìn)行算術(shù)運(yùn)算。算術(shù)運(yùn)算符的注意事項(xiàng)。先乘除后加減。取模運(yùn)算結(jié)果的正負(fù)。小數(shù)的精度問題。正、負(fù)數(shù)的表示。多學(xué)一招：toFixed()方法。知識(shí)點(diǎn)3-字符串運(yùn)算符教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的字符串運(yùn)算符。字符串運(yùn)算符（+）：用于字符串拼接。多學(xué)一招：隱式轉(zhuǎn)換。利用-*/實(shí)現(xiàn)將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型。利用+實(shí)現(xiàn)將數(shù)據(jù)轉(zhuǎn)換為字符串型。知識(shí)點(diǎn)4-【案例】根據(jù)用戶輸入的數(shù)據(jù)完成求和運(yùn)算教師通過PPT結(jié)合實(shí)際操作的方式講解【案例】根據(jù)用戶輸入的數(shù)據(jù)完成求和運(yùn)算。案例需求：提示用戶輸入兩個(gè)數(shù)據(jù)，輸入完成后對(duì)兩個(gè)數(shù)據(jù)進(jìn)行求和運(yùn)算，在控制臺(tái)輸出求和的結(jié)果。實(shí)現(xiàn)思路：使用prompt()接收用戶輸入的數(shù)據(jù)，然后使用parseFloat()將用戶輸入的數(shù)據(jù)轉(zhuǎn)換成浮點(diǎn)數(shù)，相加后的結(jié)果使用toFixed()方法保留兩位小數(shù)。編寫代碼實(shí)現(xiàn)案例。知識(shí)點(diǎn)5-賦值運(yùn)算符教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的賦值運(yùn)算符。賦值運(yùn)算符的作用：將運(yùn)算符右邊的值賦給左邊的變量。賦值運(yùn)算符的注意事項(xiàng)。知識(shí)點(diǎn)6-比較運(yùn)算符教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的比較運(yùn)算符。比較運(yùn)算符的作用：對(duì)兩個(gè)數(shù)據(jù)進(jìn)行比較，比較結(jié)果是布爾值true或false。比較運(yùn)算符的注意事項(xiàng)。知識(shí)點(diǎn)7-邏輯運(yùn)算符教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的邏輯運(yùn)算符。邏輯運(yùn)算符的作用：條件判斷。邏輯運(yùn)算符的短路問題。知識(shí)點(diǎn)8-三元運(yùn)算符教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的三元運(yùn)算符。什么是三元運(yùn)算符。三元運(yùn)算符的語法格式。知識(shí)點(diǎn)9-位運(yùn)算符教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中的位運(yùn)算符。位算符的作用：用來對(duì)數(shù)據(jù)進(jìn)行二進(jìn)制運(yùn)算。位算符的注意事項(xiàng)。知識(shí)點(diǎn)10-運(yùn)算符優(yōu)先級(jí)教師通過PPT結(jié)合實(shí)際操作的方式講解JavaScript中運(yùn)算符的優(yōu)先級(jí)。什么是運(yùn)算符的優(yōu)先級(jí)。小括號(hào)“()”是優(yōu)先級(jí)最高運(yùn)算符，運(yùn)算時(shí)先計(jì)算小括號(hào)內(nèi)的表達(dá)式。知識(shí)點(diǎn)11-【案例】計(jì)算圓的周長和面積教師通過PPT結(jié)合實(shí)際操作的方式講解【案例】計(jì)算圓的周長和面積。案例需求：使用JavaScript中的運(yùn)算符實(shí)現(xiàn)圓的周長和面積的計(jì)算。實(shí)現(xiàn)思路：首先我們要知道圓的周長公式和面積公式。圓的周長公式為2πr，圓的面積公式為πr2。公式中，π表示圓周率，代碼中使用圓周率的近似值3.14；r表示圓的半徑。編寫代碼實(shí)現(xiàn)案例。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過測(cè)試題的方式檢測(cè)學(xué)生是否掌握了JavaScript中的表達(dá)式和運(yùn)算符的使用。五、布置作業(yè)教師通過高校教輔平臺(tái)（://tch.ityxb）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第五、六課時(shí)（選擇結(jié)構(gòu)-if語句、選擇結(jié)構(gòu)-if...else語句、選擇結(jié)構(gòu)-if...elseif...else語句、選擇結(jié)構(gòu)-switch語句、【案例】查詢水果的價(jià)格、循環(huán)結(jié)構(gòu)-for語句、循環(huán)結(jié)構(gòu)-while語句、循環(huán)結(jié)構(gòu)-do...while語句、跳轉(zhuǎn)語句、循環(huán)嵌套）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過比擬的方式導(dǎo)入新課現(xiàn)實(shí)生活中，我們做一件事，從開始到結(jié)束往往需要經(jīng)過一個(gè)流程，這個(gè)流程如何執(zhí)行由我們自身來決定。一個(gè)程序的執(zhí)行也有流程，很多時(shí)候我們需要通過控制程序中的流程來實(shí)現(xiàn)程序的功能，這就是流程控制。程序的流程控制通過3種結(jié)構(gòu)實(shí)現(xiàn)，分別是順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。順序結(jié)構(gòu)指的是程序按照代碼的先后順序自上而下地執(zhí)行，由于順序結(jié)構(gòu)比較簡單，本節(jié)課將不過多介紹。本節(jié)課將講解選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語句以及循環(huán)嵌套。三、新課講解知識(shí)點(diǎn)1-選擇結(jié)構(gòu)-if語句教師通過PPT結(jié)合實(shí)際操作的方式講解選擇結(jié)構(gòu)中的if語句。if語句的作用。if語句的執(zhí)行流程。if語句的代碼演示。知識(shí)點(diǎn)2-選擇結(jié)構(gòu)-if...else語句教師通過PPT結(jié)合實(shí)際操作的方式講解選擇結(jié)構(gòu)中的if…else語句。if…else語句的作用。if…else語句的執(zhí)行流程。if…else語句的代碼演示。知識(shí)點(diǎn)3-選擇結(jié)構(gòu)-if...elseif...else語句教師通過PPT結(jié)合實(shí)際操作的方式講解選擇結(jié)構(gòu)中的if...elseif...else語句。if...elseif...else語句的作用。if...elseif...else語句的執(zhí)行流程。if...elseif...else語句的代碼演示。知識(shí)點(diǎn)4-選擇結(jié)構(gòu)-switch語句教師通過PPT結(jié)合實(shí)際操作的方式講解選擇結(jié)構(gòu)中的switch語句。switch語句的作用。switch語句的執(zhí)行流程。switch語句的代碼演示。知識(shí)點(diǎn)5-【案例】查詢水果的價(jià)格教師通過PPT結(jié)合實(shí)際操作的方式講解【案例】查詢水果的價(jià)格。案例需求：日常生活中，我們?nèi)ニ曩I水果，結(jié)賬時(shí)售貨員要查詢所買水果的價(jià)格來計(jì)算總價(jià)，例如，當(dāng)售貨員輸入“蘋果”時(shí)，查詢蘋果的價(jià)格；輸入“桃子”時(shí)，查詢桃子的價(jià)格。實(shí)現(xiàn)思路：首先聲明變量fruit，用來接收售貨員輸入的水果名稱，然后利用switch語句實(shí)現(xiàn)查詢對(duì)應(yīng)水果的價(jià)格。編寫代碼實(shí)現(xiàn)案例。知識(shí)點(diǎn)6-循環(huán)結(jié)構(gòu)-for語句教師通過PPT結(jié)合實(shí)際操作的方式講解循環(huán)結(jié)構(gòu)中的for語句。for語句的作用。for語句的執(zhí)行流程。for語句的代碼演示。通過案例演示for語句的使用。知識(shí)點(diǎn)7-循環(huán)結(jié)構(gòu)-while語句教師通過PPT結(jié)合實(shí)際操作的方式講解循環(huán)結(jié)構(gòu)中的while語句。while語句的作用。while語句的執(zhí)行流程。while語句的代碼演示。通過案例演示while語句的使用。知識(shí)點(diǎn)8-循環(huán)結(jié)構(gòu)-do…while語句教師通過PPT結(jié)合實(shí)際操作的方式講解循環(huán)結(jié)構(gòu)中的do…while語句。do…while語句的作用。do…while語句和while語句的區(qū)別。do…while語句的執(zhí)行流程。do…while語句的代碼演示。通過案例演示do…while語句的使用。多學(xué)一招：斷點(diǎn)調(diào)試。知識(shí)點(diǎn)9-跳轉(zhuǎn)語句教師通過PP