博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效《JavaScript+jQueryWeb前端開發(fā)技術(shù)（微課版）》教學(xué)設(shè)計課程名稱：授課班級：授課學(xué)期：教師姓名：年月

課題名稱學(xué)習(xí)單元2JavaScript語言基礎(chǔ)計劃課時8課時教學(xué)引入九層之臺，起于壘土。同樣，掌握一門編程語言，基本語法是學(xué)習(xí)的第一步。JavaScript語言基礎(chǔ)語法包括的數(shù)據(jù)結(jié)構(gòu)、流程控制語句和數(shù)組。JavaScript的數(shù)據(jù)結(jié)構(gòu)主要包括標識符、關(guān)鍵字、常量、變量、數(shù)據(jù)類型、運算符和表達式等，而流程控制語句主要包括分支結(jié)構(gòu)、循環(huán)結(jié)構(gòu)和跳轉(zhuǎn)語句等。教學(xué)目標1.知識目標（1）掌握關(guān)鍵字、標識符、變量、常量、數(shù)據(jù)類型、運算符和表達式等基本概念；（2）掌握JavaScript流程控制語句的定義與使用；（3）掌握JavaScript數(shù)組的定義與使用；2.技能目標（1）能夠根據(jù)實際需求選擇一種輸入輸出語句進行數(shù)據(jù)的讀入與輸出；（2）能夠靈活運用分支結(jié)構(gòu)、循環(huán)結(jié)構(gòu)進行程序流程的控制；（3）能夠利用數(shù)組解決一些實際應(yīng)用問題。3.素養(yǎng)目標（1）培養(yǎng)自主學(xué)習(xí)能力素養(yǎng)；（2）通過對任務(wù)的技術(shù)實現(xiàn)不斷升級改進，培養(yǎng)學(xué)生精益求精的工匠精神。教學(xué)重點JavaScript分支結(jié)構(gòu)語句定義與使用JavaScript循環(huán)結(jié)構(gòu)語句定義與使用JavaScript數(shù)組的定義與使用教學(xué)難點多分支語句的使用循環(huán)嵌套的應(yīng)用利用數(shù)組解決一些實際應(yīng)用問題教學(xué)過程任務(wù)2.1為網(wǎng)頁添加時間和問候語——數(shù)據(jù)類型和分支語句（4課時）一、任務(wù)描述為頁面添加時間及問候語以提升用戶界面的友好程度。網(wǎng)頁根據(jù)不同時間段自動顯示不同歡迎語，如早上好、上午好、下午好、晚上好等，使網(wǎng)頁更具動態(tài)性。二、任務(wù)分析要完成顯示時間并根據(jù)不同時間段顯示不同歡迎語功能，可以將一天24小時分為多個時間段，在相應(yīng)時間段訪問頁面時分別進行早晨好、上午好等問候。在此，可以選用JavaScript分支結(jié)構(gòu)中的if…else…if多條件判斷語句來實現(xiàn)。由于本任務(wù)在實施時還沒有接觸到函數(shù)相關(guān)知識，因此頁面暫時不具備自動刷新功能，可以先借助于手動刷新操作來查看不同時間段的問候，在后續(xù)的學(xué)習(xí)中，將對本任務(wù)做進一步的完善。三、知識點講解1、常用的輸入/輸出語句（1）alert()alert()用于彈出一個警告框，包括一個提示信息字符串和一個【確定】按鈕，用于確保用戶看到某些信息。（2）console.log()console.log()用于在瀏覽器的控制臺中輸出內(nèi)容。（3）document.write()此方法用于在HTML文檔頁面中輸出內(nèi)容。（4）prompt()prompt()方法用于顯示一個帶有提示信息，并且用戶可以輸入內(nèi)容的對話框。2、關(guān)鍵字和標識符（1）關(guān)鍵字JavaScript關(guān)鍵字又被稱為保留字，在JavaScript語言中被事先定義好并賦予特殊含義。JavaScript關(guān)鍵字不能作為變量名和函數(shù)名使用，否則會使JavaScript在載入過程中出現(xiàn)編譯錯誤。有些保留關(guān)鍵字是作為JavaScript將來擴展使用的，具體參見下表。abstractargumentsbooleanbreakbytecasecatchCharclass*constcontinuedebuggerdefaultdeleteDodoubleelseenum*evalexport*extends*FalsefinalfinallyfloatforfunctiongotoIfimplementsimport*ininstanceofintinterfaceLetlongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuper*switchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatilewhilewithyield*標記的關(guān)鍵字是ECMAScript5中新添加的。（2）標識符JavaScript編寫程序時經(jīng)常需要定義一些符號來標記一些名稱，如函數(shù)名、變量名等?？梢詫⒍x要素時使用的字符序列稱為標識符。這些標識符必須遵循如下命名規(guī)則。①標識符只能由字母、數(shù)字、下劃線和美元符號組成，而不能包含空格、標點符號、運算符等其他符號。②標識符的第一個字符不能是數(shù)字。③標識符不能與JavaScript中的關(guān)鍵字名稱相同，如for、return、break等。3、JavaScript變量與常量（1）變量變量是程序在內(nèi)存中申請的一塊存放數(shù)據(jù)的空間，用于保存程序運行過程中可以發(fā)生改變的量，它的主要作用就是為數(shù)據(jù)操作提供存放信息的容器。變量的命名要符合標識符命名規(guī)則。在JavaScript中，使用變量前需要對其進行聲明。所有的變量都由關(guān)鍵字var聲明。（2）常量常量是指自始至終不能被改變的數(shù)據(jù)，JavaScript中有6種基本類型的常量。①字符型常量字符型常量是使用單引號（''）或雙引號（""）括起來的一個或幾個字符，如'hello'、"JavaScript"等。②整型常量整型常量是不能改變的數(shù)據(jù)，可以使用十進制、十六進制、八進制表示其值。③實型常量實型常量是由整數(shù)部分加小數(shù)部分表示，如3.14、0.456等，還可以使用科學(xué)或標準方法表示，如3E4、2e5等。④布爾值布爾值只有兩種值：true或false。主要用來說明事物是真還是假，說明或代表一種狀態(tài)或標志，用以說明操作流程。布爾值通常用于JavaScript的控制結(jié)構(gòu)。⑤空值（null）JavaScript中有一個空值類型null，表示什么也沒有。如果引用一個沒有定義的變量，則返回一個null值。⑥NaNJavaScript中的一種特殊類型的數(shù)字常量NaN（NotaNumber），即“非數(shù)字”。當(dāng)程序由于某種原因計算錯誤后，將產(chǎn)生一個沒有意義的數(shù)字，此時JavaScript返回的數(shù)值就是NaN。⑦特殊字符JavaScript中有以反斜杠（/）開頭的不可顯示的特殊字符，通常稱為控制字符。常量使用const關(guān)鍵字進行創(chuàng)建，在聲明時必須初始化。常量一旦創(chuàng)建，其值就不允許改變。習(xí)慣上，常量名全部大寫。4、JavaScript的數(shù)據(jù)類型（1）簡單數(shù)據(jù)類型JavaScript中常用的3種基本數(shù)類型：數(shù)值型（number）、字符串型（string）和布爾型（boolean）。（2）復(fù)合數(shù)據(jù)類型JavaScript中常用的3種復(fù)合數(shù)類型：數(shù)組、函數(shù)和對象。（3）特殊數(shù)據(jù)類型除了上面介紹的幾種數(shù)據(jù)類型，JavaScript還包括一些特殊類型的數(shù)據(jù)，如未定義類型和空值。5、運算符和表達式（1）運算符按照常用功能來劃分，運算符主要包括算數(shù)運算符、比較運算符、賦值運算符、邏輯運算符和條件運算符五種，JavaScript運算符有著明確的優(yōu)先級和結(jié)合性，JavaScript運算符的優(yōu)先級及結(jié)合性如下表所示。運算符結(jié)合性優(yōu)先級.、[]、()從左到右高低++、--、-、！、new、typeof從右到左*、/、%從左到右+、-從左到右＜、＜=、＞、＞=、in、instanceof從左到右==、!=、===、!==從左到右&&從左到右II從左到右?:從右到左=、*=、/=、％=、+=、-=、&=、^=、!=從右到左,從左到右說明：同一行的運算符優(yōu)先級相同；不同行的運算符，從下往上，優(yōu)先級由低到高依次排列。（2）表達式表達式是一組代碼的集合，它返回一個值。表達式既可以是一個數(shù)字、一個變量，也可以是多個連接在一起的變量關(guān)鍵字以及運算符。比如由算數(shù)運算符和操作數(shù)組成的表達式稱為算數(shù)表達式。根據(jù)參與組成表達式的的運算符不同，還有賦值表達式、邏輯表達式、條件表達式等。表達式可以實現(xiàn)對變量的賦值、修改、引用以及計算等操作6、流程控制語句流程控制語句主要有三種結(jié)構(gòu)，分別是順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，這三種結(jié)構(gòu)代表了代碼的三種執(zhí)行順序。順序結(jié)構(gòu)是程序中最基本的結(jié)構(gòu)，程序會按照代碼的先后順序依次執(zhí)行；分支結(jié)構(gòu)是根據(jù)條件判斷來決定要執(zhí)行的分支代碼；循環(huán)結(jié)構(gòu)則是根據(jù)條件判斷來決定是否重復(fù)執(zhí)行某一段代碼。7、分支結(jié)構(gòu)在代碼自上而下執(zhí)行過程中，根據(jù)不同的條件執(zhí)行不同的代碼，從而得到不同的結(jié)果，這樣的結(jié)構(gòu)就是分支結(jié)構(gòu)。JavaScript主要提供了以下幾種分支結(jié)構(gòu)。（1）if條件語句if語句也被稱為單分支語句，它先判斷給定條件表達式的值，根據(jù)判定結(jié)果來決定是否要執(zhí)行代碼，其基本結(jié)構(gòu)如下：if(條件表達式){ //語句塊；}（2）if...else語句if...else語句也被稱為雙分支語句，它先判斷給定條件表達式的值，條件滿足執(zhí)行一種處理，如果不滿足執(zhí)行另外一種處理，其基本結(jié)構(gòu)如下：if(條件表達式){ //語句塊1；}else{ //語句塊2；}當(dāng)if語句中的條件表達式為true時，執(zhí)行語句塊1，否則執(zhí)行語句塊2。（3）if...elseif語句這種形式也被稱為多條件判斷語句，其基本結(jié)構(gòu)如下：if(條件表達式1){ //語句塊1;}elseif(條件表達式2){ //語句塊2;}…elseif(條件表達式n){ //語句塊n;}else{ 語句塊n+1;}當(dāng)if…elseif語句執(zhí)行時，它先判斷給定條件表達式1的值，條件滿足執(zhí)行語句塊1，如果不滿足則繼續(xù)判斷給定條件表達式2的值，條件滿足則執(zhí)行語句塊2，不滿足則以此類推繼續(xù)判斷，直到上述條件都不滿足，則執(zhí)行最后一個語句塊n+1，如果最后沒有else分支，則程序什么也不執(zhí)行。（4）if語句的嵌套if語句可以單獨使用，也可以嵌套，所謂if嵌套是在if語句的語句塊部分再嵌套完整的if語句，此結(jié)構(gòu)用法與雙分支語句用法類似，在此不再贅述。（5）switch語句switch語句屬于典型的多分支語句，等價于嵌套的if語句，相比較而言，switch語句代碼更加清晰簡潔，比if語句的嵌套可讀性要更強。其基本結(jié)構(gòu)如下：switch(表達式){ case值1: 語句塊1; break; case值2: 語句塊2; break; ... default; 語句塊n;}執(zhí)行switch語句時，首先判斷表達式的值，然后將表達式的值自上向下依次與每個case的值進行比較，如果和某個case的值相同，則執(zhí)行該case后相應(yīng)的語句塊，直到執(zhí)行到break語句時，跳出整個switch語句；如果表達式的值與每個case的值都不相同，則執(zhí)行default后面的語句塊。四、任務(wù)實施1、添加HTML代碼打開詩歌賞析網(wǎng)站首頁index.html文件，在header部分的nav的最后加入顯示問候語的網(wǎng)頁結(jié)構(gòu)，即id值為“showTime”的div區(qū)塊。2、添加CSS樣式打開css文件夾中的header.css文件，在文件末尾添加美化問候語區(qū)塊的css樣式。3、添加JavaScript腳本再次打開詩歌賞析網(wǎng)站首頁index.html文件，在導(dǎo)航欄nav區(qū)塊之后添加顯示問候語功能的JavaScript代碼。4、保存并運行網(wǎng)頁。五、課堂實踐通過測試題的方式檢測學(xué)生知識學(xué)習(xí)，通過任務(wù)實踐掌握JavaScript的數(shù)據(jù)類型和分支語句。任務(wù)2.2格式化顯示星期——循環(huán)結(jié)構(gòu)和數(shù)組（4課時）一、復(fù)習(xí)鞏固教師通過任務(wù)2.1的完成情況和測試題的測試結(jié)果進行分析，對學(xué)生掌握薄弱的知識點和技能點進行復(fù)習(xí)鞏固。二、任務(wù)描述任務(wù)2.1完成了詩歌賞析網(wǎng)站時間和問候語的添加，在顯示星期幾的時候顯示的是阿拉伯?dāng)?shù)字，如“星期6”。對星期的顯示進行格式化處理，使之顯示成“星期六”的形式。三、任務(wù)分析利用JavaScript的數(shù)組和循環(huán)語句即可實現(xiàn)格式化星期的操作。JavaScript的數(shù)組與循環(huán)的配合使用是本任務(wù)實施的關(guān)鍵，由于循環(huán)次數(shù)是固定的，因此本任務(wù)中可以選擇使用for循環(huán)語句。由于本任務(wù)在實施時依舊沒有接觸函數(shù)的相關(guān)知識，因此頁面暫時不具備自動刷新功能，需要手動刷新操作來查看不同時間段的問候語和日期等，在后續(xù)知識的學(xué)習(xí)中，我們將對本任務(wù)做進一步的完善。四、知識點講解1、循環(huán)結(jié)構(gòu)循環(huán)結(jié)構(gòu)是滿足一定條件的情況下，重復(fù)地去執(zhí)行某個代碼段。在JavaScript中，常用的循環(huán)語句包括for、while和do…while三種循環(huán)。（1）for循環(huán)語句for循環(huán)又稱計次循環(huán)，是最常用的循環(huán)語句，一般用在循環(huán)次數(shù)已知的情況，其基本結(jié)構(gòu)如下：for(初始值語句①;條件表達式②;操作表達式③){ //循環(huán)體}for循環(huán)語句的執(zhí)行過程是，先執(zhí)行初始化語句①，再進行條件表達式②的判斷，如果判斷為false則直接退出循環(huán)，如果為true，則執(zhí)行循環(huán)體，然后再執(zhí)行操作表達式③改變循環(huán)變量的值，之后再次進行條件表達式②的判斷，如果還為true則再次執(zhí)行循環(huán)體，進行新一輪的循環(huán)，直到條件表達式②的值為false時循環(huán)結(jié)束。（2）while循環(huán)語句while循環(huán)又稱為前測試循環(huán)，其特點是先執(zhí)行后判斷，基本結(jié)構(gòu)如下：while(條件表達式){ //循環(huán)體}while循環(huán)語句首先判斷條件表達式，如果條件為false則退出while循環(huán)；如果為true則執(zhí)行循環(huán)體，然后再進行條件表達式的判斷，如果為true則進行新一輪循環(huán)，直到為false時結(jié)束循環(huán)。（3）do...while循環(huán)語句與while不同，do...while又稱為后測試循環(huán)語句，特點是先執(zhí)行后判斷，其基本結(jié)構(gòu)如下：do{ //循環(huán)體}while(條件表達式)do...while循環(huán)語句的執(zhí)行過程是，先執(zhí)行一次循環(huán)體，然后進行條件判斷，當(dāng)條件表達式為true時，繼續(xù)執(zhí)行循環(huán)體，否則退出循環(huán)。2、跳轉(zhuǎn)語句（1）continue語句continue語句用于終止當(dāng)前循環(huán)，并馬上進入下一輪循環(huán)，其基本結(jié)構(gòu)如下：continue;continue語句的執(zhí)行通常需要設(shè)定某個條件，當(dāng)滿足該條件時，執(zhí)行continue語句。值得注意的是，continue只能用在for、while、do…while或switch語句中。（2）break語句break語句的使用情況通常有兩種，一種是用在switch語句中退出switch；一種是用在循環(huán)語句中退出整個循環(huán)，其基本結(jié)構(gòu)如下：break;break語句和continue語句一樣，執(zhí)行也需要設(shè)定某個條件，當(dāng)滿足該條件時，執(zhí)行break語句。3、數(shù)組數(shù)組是JavaScript中最常用的數(shù)據(jù)類型之一，一個數(shù)組類型的變量可以保存一批數(shù)據(jù)，并且數(shù)據(jù)可以是任意類型，通過一個變量就可以訪問一組數(shù)據(jù)。利用數(shù)組可以很方便地對數(shù)據(jù)進行分類和批量處理。（1）創(chuàng)建數(shù)組在JavaScript中，可以通過兩種方式來創(chuàng)建數(shù)組，一種是實例化Array對象方式創(chuàng)建，另一種是直接使用“[]”字面量來創(chuàng)建數(shù)組，基本語法格式如下：vararrayObj=newArray(元素0,元素1,元素2…);//通過“newArray()”創(chuàng)建數(shù)組//或vararrayObj=[元素0,元素1,元素2…];//使用字面量創(chuàng)建數(shù)組（2）訪問數(shù)組元素在JavaScript中，可以借助數(shù)組名及其索引訪問數(shù)組元素，索引又稱下標，數(shù)組索引從0開始編號，之后的每個數(shù)組元素索引遞增加1，即索引0、索引1…以此類推。例如訪問已經(jīng)創(chuàng)建的數(shù)組元素，參考代碼如下：vararr1=newArray(1,2,3,'蘋果','香蕉','橘子');vars1=arr1[0];//訪問數(shù)組arr1的索引為0的第一個元素1vars2=arr1[3];//訪問數(shù)組arr1的索引為3的第四個元素“蘋果”（3）遍歷數(shù)組由于數(shù)組是一個變量存儲一組值，在實際應(yīng)用中，用戶需要訪問數(shù)組的每個元素，這就是遍歷數(shù)組。（4）操作數(shù)組元素操作數(shù)組元素包括查看或修改數(shù)組長度、添加或修改數(shù)組元素、刪除數(shù)組元素、截取或合并數(shù)組元素、設(shè)置數(shù)組元素的排序順序、將數(shù)組元素轉(zhuǎn)換成字符串等。①查看、修改數(shù)組長度使用數(shù)組的length屬性可以查看或修改數(shù)組的長度，查看或修改數(shù)組長度的語法格式如下：arrayObj.length②添加、修改數(shù)組元素使用數(shù)組索引可以添加或修改數(shù)組元素。如果給定的索引值超過了數(shù)組中的最大索引數(shù)，則表示添加新元素，否則表示修改元素。③刪除數(shù)組元素數(shù)組元素不僅可以查看、添加、修改，還可以根據(jù)需要進行刪除，刪除數(shù)組元素有三種情況。第一種情況，刪除數(shù)組中最后一個元素并返回該元素值。語法格式如下：arrayObj.pop();第二種情況，刪除最前面第一個元素并返回該元素值，數(shù)組中后面元素自動前移。語法格式如下：arrayObj.shift();第三種情況，刪除從指定位置開始的指定數(shù)量的元素，返回值為數(shù)組形式，包含所有刪除的元素，語法格式如下：arrayObj.splice(指定位置,個數(shù));④截取數(shù)組元素截取數(shù)組元素是指以數(shù)組的形式返回數(shù)組的一部分，通過slice()方法實現(xiàn)。其語法格式如下：arrayObj.slice(索引號開始位置,[索引號結(jié)束位置]);參數(shù)說明：截取不包括“索引號結(jié)束位置”對應(yīng)的元素，如果省略“索引號結(jié)束位置”將從“索引號開始位置”到數(shù)組結(jié)束的所有元素。如果“索引號結(jié)束位置”取值為負值，則將從數(shù)組尾部開始算起。⑤合并數(shù)組元素合并數(shù)組元素是指將其他數(shù)組連接到當(dāng)前數(shù)組的尾端，通過concat()方法實現(xiàn)。合并的多個數(shù)組可以是字符串，也可以是數(shù)組和字符串的混合，其語法格式如下：arrayObj.concat(數(shù)組1[,數(shù)