Web前端開(kāi)發(fā)（JavaScript+jQuery）【教案】《WEB前端技術(shù)混合式教學(xué)設(shè)計(jì)方案》單元設(shè)計(jì)

寧波城市職業(yè)技術(shù)學(xué)院混合式教學(xué)設(shè)計(jì)方案（2023～2024學(xué)年第2學(xué)期）課程名稱：WEB前端技術(shù) 課程負(fù)責(zé)人： **** 開(kāi)課學(xué)院（部）：******************** 聯(lián)系電話：*************** 教務(wù)處制二○二*年*月課程基本情況網(wǎng)絡(luò)教學(xué)平臺(tái)超星學(xué)習(xí)通課程網(wǎng)址/mycourse/teachercourse?moocId=97062332&clazzid=27497035&edit=true&v=0&cpi=0&pageHeader=0聯(lián)系方式電話箱：luqiujin@課程加入方式：二維碼或直接導(dǎo)入教學(xué)實(shí)施進(jìn)程表(整個(gè)學(xué)期)序號(hào)周次課時(shí)數(shù)項(xiàng)目任務(wù)名稱授課方式以及線上線下課時(shí)分配1第01周4JavaScript入門線上1+線下32第02周4JavaScript基礎(chǔ)線上1+線下33第03周4數(shù)組線上1+線下34第04周4函數(shù)線上1+線下35第05周4對(duì)象線上1+線下36第06周4BOM線上1+線下37第07周4DOM線上1+線下38第08周4JavaScript事件線上1+線下39第09周4jQuery基礎(chǔ)線上1+線下310第10周4jQuery選擇器線上1+線下312第11周4jQuery操作DOM線上1+線下312第12周4jQuery事件處理機(jī)制線上1+線下313第13周4jQuery動(dòng)畫線上1+線下314第14周4綜合案例線上1+線下315第15周4綜合實(shí)訓(xùn)線上1+線下316第16周4測(cè)試與作品提交線上1+線下3混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱JavaScript入門課程類型線上+線下授課時(shí)間第1周授課地點(diǎn)*****班級(jí)*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)熟悉JavaScript的用途和發(fā)展?fàn)顩r理解JavaScript與ECMAScript的關(guān)系掌握J(rèn)avaScript的基本使用方法能力目標(biāo)掌握變量的定義與賦值掌握數(shù)據(jù)類型與運(yùn)算符的使用條件語(yǔ)句的使用素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容在Web前端開(kāi)發(fā)中，HTML、CSS和JavaScript是開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)所必備的技術(shù)。在掌握了HTML和CSS技術(shù)之后，已經(jīng)能夠編寫出各式各樣的網(wǎng)頁(yè)了，但若想讓網(wǎng)頁(yè)具有良好的交互性，JavaScript就是一個(gè)極佳的選擇。本章將介紹JavaScript的基本概念，變量定義、數(shù)據(jù)類型、運(yùn)算符等基礎(chǔ)語(yǔ)法進(jìn)行詳細(xì)講解。并通過(guò)實(shí)踐案例來(lái)體驗(yàn)JavaScript編程。教學(xué)重點(diǎn)JavaScript引入方式、語(yǔ)法風(fēng)格、注釋、輸出語(yǔ)句教學(xué)難點(diǎn)數(shù)據(jù)類型轉(zhuǎn)換、字符串/賦值/邏輯運(yùn)算符、運(yùn)算符優(yōu)先級(jí)教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑指定安裝軟件為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧10分鐘線下1.什么是JavaScript；2.JavaScript的由來(lái)與發(fā)展；3.JavaScript的特點(diǎn)；4.開(kāi)發(fā)工具介紹什么是JavaScript作用：開(kāi)發(fā)交互式的Web頁(yè)面。分工：HTML負(fù)責(zé)結(jié)構(gòu)，CSS負(fù)責(zé)樣式，JavaScript負(fù)責(zé)行為。JavaScript可以嵌入到網(wǎng)頁(yè)中。應(yīng)用：演示JavaScript在網(wǎng)頁(yè)開(kāi)發(fā)中的應(yīng)用，如輪播圖、選項(xiàng)卡、地圖、表單驗(yàn)證、百度搜索框等。優(yōu)點(diǎn)：可以使網(wǎng)頁(yè)的互動(dòng)性更強(qiáng)，用戶體驗(yàn)更好。JavaScript的由來(lái)與發(fā)展由來(lái)：1995年網(wǎng)景公司開(kāi)發(fā)的LiveScript。名稱改變：借用Java名氣，改名為JavaScript，兩者其實(shí)是不同的語(yǔ)言。設(shè)計(jì)初衷：嵌入到網(wǎng)頁(yè)中的編程語(yǔ)言，用來(lái)控制瀏覽器的行為。濫用現(xiàn)象：廣告、彈窗、惡意代碼、安全漏洞。里程碑：Ajax技術(shù)的流行與發(fā)展。未來(lái)發(fā)展：服務(wù)器端Node.js、移動(dòng)端開(kāi)發(fā)、全棧開(kāi)發(fā)。JavaScript的特點(diǎn)JavaScript是腳本語(yǔ)言，具有腳本語(yǔ)言的一些特點(diǎn)：簡(jiǎn)單、易學(xué)、易用。JavaScript可以跨平臺(tái)，開(kāi)發(fā)和使用都非常方便，支持PC和移動(dòng)端。JavaScript支持面向?qū)ο螅Q生了許多庫(kù)和框架，提高開(kāi)發(fā)速度，能夠用來(lái)解決復(fù)雜問(wèn)題。開(kāi)發(fā)工具——瀏覽器介紹常見(jiàn)的瀏覽器和其開(kāi)發(fā)廠商。了解常見(jiàn)瀏覽器的特點(diǎn)。注意老版本IE瀏覽器的市場(chǎng)占有率和兼容性問(wèn)題。重點(diǎn)介紹標(biāo)準(zhǔn)瀏覽器——Chrome、火狐。介紹瀏覽器的引擎，并列舉常見(jiàn)瀏覽器和與之相對(duì)應(yīng)的引擎。理解瀏覽器引擎與瀏覽器、開(kāi)發(fā)人員的關(guān)系。熟悉瀏覽器的兼容問(wèn)題。熟悉Chrome瀏覽器的開(kāi)發(fā)者工具。開(kāi)發(fā)工具——代碼編輯器了解常見(jiàn)的代碼編輯器。選擇一種代碼編輯器進(jìn)行詳細(xì)講解。掌握代碼編輯器的安裝和使用方法，并掌握基本的配置。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教學(xué)演示學(xué)生練習(xí)30分鐘線下創(chuàng)建一個(gè)JavaScript程序創(chuàng)建網(wǎng)頁(yè)并設(shè)置編碼創(chuàng)建hello.html文件。將編碼設(shè)置為UTF-8無(wú)BOM格式。補(bǔ)充講解常見(jiàn)字符集、編碼格式，如ANSI、GB2312、GBK、Unicode、UTF-8，以及UTF-8的BOM的含義。將JavaScript嵌入到HTML思考如何在HTML中嵌入JavaScript，引出“落腳點(diǎn)”的概念。思考JavaScript代碼應(yīng)該寫在什么位置。講解JavaScript標(biāo)記——<script>。介紹一個(gè)基本函數(shù)alert()的使用，輸出一個(gè)字符串。講解語(yǔ)句的概念，以及“;”的作用。測(cè)試網(wǎng)頁(yè)程序使用瀏覽器打開(kāi)hello.html。觀察程序運(yùn)行結(jié)果?？偨Y(jié)JavaScript基本語(yǔ)法規(guī)則JavaScript嚴(yán)格區(qū)分大小寫，演示將alert改成Alert觀察效果。JavaScript對(duì)空格、換行、縮進(jìn)不敏感，一條語(yǔ)句可以分成多行書寫。演示將alert后面的括號(hào)“()”換到下一行，觀察程序是否正確執(zhí)行。JavaScript的分號(hào)可以省略，但要注意什么情況下可以省略，什么情況下不能省略。并指出代碼風(fēng)格的重要性，不建議省略分號(hào)。使學(xué)生掌握J(rèn)avaScript的整體結(jié)構(gòu)環(huán)節(jié)四：教師演示學(xué)生練習(xí)45分鐘線下JavaScript的三種引入方式JavaScript引入方式——嵌入式<script>標(biāo)記、type屬性的作用。JavaScript引入方式——外鏈?zhǔn)窖菔就怄準(zhǔn)降膶?shí)現(xiàn)方式，以及代碼書寫的細(xì)節(jié)。復(fù)習(xí)相對(duì)路徑、絕對(duì)路徑、URL地址的概念。比較外鏈?zhǔn)胶颓度胧降膬?yōu)缺點(diǎn)，以及適合的應(yīng)用場(chǎng)景。JavaScript引入方式——行內(nèi)式了解行內(nèi)式的代碼書寫方式。了解行內(nèi)式的應(yīng)用場(chǎng)景。JavaScript引入方式——異步加載講解JavaScript在網(wǎng)頁(yè)中的加載順序，以及代碼阻塞的問(wèn)題。演示<script>的屬性async和defer的作用，比較兩者的區(qū)別。掌握J(rèn)avaScript的三種引入方式環(huán)節(jié)五：教學(xué)演示學(xué)生練習(xí)20分鐘線下JavaScript的常用輸出語(yǔ)句；JavaScript中在注釋的使用；JavaScript中數(shù)據(jù)的簡(jiǎn)單運(yùn)算；注釋理解注釋的作用，為什么要在代碼中使用注釋。演示單行注釋的基本代碼。演示多行注釋的基本代碼，注意嵌套問(wèn)題。比較單行注釋和多行注釋，掌握各自的特點(diǎn)。6.數(shù)據(jù)與運(yùn)算演示如何利用JavaScript實(shí)現(xiàn)加、減、乘、除運(yùn)算。演示如何利用JavaScript比較兩個(gè)數(shù)字的大小。熟悉字符串的概念，演示如何使用字符串來(lái)保存數(shù)據(jù)。演示使用比較運(yùn)算符“==”比較兩個(gè)字符串是否相同。演示字符串與數(shù)字拼接的細(xì)節(jié)問(wèn)題，“+”針對(duì)數(shù)字和字符串操作的區(qū)別。演示如何根據(jù)比較的不同結(jié)果，執(zhí)行不同的代碼。掌握J(rèn)avaScript的常用輸出語(yǔ)句；學(xué)會(huì)是還有注釋；掌握簡(jiǎn)單的數(shù)據(jù)運(yùn)算。環(huán)節(jié)六：教學(xué)演示學(xué)生練習(xí)20分鐘線下8.數(shù)據(jù)類型的分類9.數(shù)據(jù)類型轉(zhuǎn)換10表達(dá)式、算術(shù)運(yùn)算符、字符串運(yùn)算符、賦值運(yùn)算符、比較運(yùn)算符主要掌握數(shù)據(jù)類型及轉(zhuǎn)換；條件語(yǔ)句的使用；環(huán)節(jié)七：課程小結(jié)等5分鐘線下涵蓋本單元所有教學(xué)內(nèi)容。老師對(duì)本任務(wù)所學(xué)的基本知識(shí)及軟件操作方法進(jìn)行總結(jié)?？偨Y(jié)有助于學(xué)生對(duì)本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)八：課程任務(wù)5分鐘線上教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通過(guò)平臺(tái)提交給老師?！緞?dòng)手實(shí)踐】條件語(yǔ)句的實(shí)現(xiàn)--學(xué)生成績(jī)等級(jí)的實(shí)現(xiàn)通過(guò)測(cè)試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識(shí)作業(yè)考核評(píng)價(jià)60分鐘線上教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)錯(cuò)誤的地方，并給與解答。有問(wèn)題的同學(xué)點(diǎn)對(duì)點(diǎn)溝通指導(dǎo)反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱JavaScript基礎(chǔ)課程類型線上+線下授課時(shí)間第2周授課地點(diǎn)*****班級(jí)*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)1.掌握基本處理流程。2.掌握幾種常用的循環(huán)語(yǔ)句能力目標(biāo)1.掌握流程控制語(yǔ)句的使用 2.掌握變量的基本使用素質(zhì)目標(biāo)1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道教學(xué)內(nèi)容JavaScript條件語(yǔ)句多分支判斷語(yǔ)句的使用JavaScript循環(huán)語(yǔ)句(while,dowhile,for)for循環(huán)嵌套語(yǔ)句的使用教學(xué)重點(diǎn)ifelseif，switch的異同dowhile,while語(yǔ)句的異同for循環(huán)嵌套語(yǔ)句的使用教學(xué)難點(diǎn)ifelseif，switch的異同dowhile,while語(yǔ)句的異同for循環(huán)嵌套語(yǔ)句的使用教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧5分鐘線下1.JavaScript表達(dá)式的使用；2.JavaScript的特點(diǎn)；3.開(kāi)發(fā)工具的使用（1）思考如何將現(xiàn)實(shí)生活中的判斷（假如..否則…等）以及只要符合某要求就重復(fù)執(zhí)行某些操作的關(guān)系在程序中表示出來(lái)。流程控制語(yǔ)句：順序、選擇和循環(huán)。選擇結(jié)構(gòu)語(yǔ)句指的就是需要對(duì)一些條件進(jìn)行判斷，從而決定執(zhí)行指定的代碼。循環(huán)語(yǔ)句就是可以實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行，如計(jì)算給定區(qū)間內(nèi)的偶數(shù)等。（2）明確學(xué)習(xí)方向。掌握選擇結(jié)構(gòu)語(yǔ)句if、switch的使用方法。掌握循環(huán)結(jié)構(gòu)語(yǔ)句while、do…while、for的使用方法。掌握跳轉(zhuǎn)語(yǔ)句break、continue的使用方法。重點(diǎn)介紹標(biāo)準(zhǔn)瀏覽器——Chrome、火狐。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教學(xué)演示學(xué)生練習(xí)25分鐘線下1.選擇結(jié)構(gòu)語(yǔ)句分類：?jiǎn)畏种В╥f）、雙分支（if…else）和多分支（if…elseif…else），switch也屬于多分支。2.選擇結(jié)構(gòu)——單分支if作用：當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理。演示單分支的語(yǔ)法結(jié)構(gòu)，繪制流程圖，以及示例代碼。3選擇結(jié)構(gòu)——雙分支if…else作用：當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理，否則進(jìn)行另一種處理。演示雙分支的語(yǔ)法結(jié)構(gòu)，繪制流程圖，以及示例代碼。主要掌握數(shù)據(jù)類型及轉(zhuǎn)換；條件語(yǔ)句的使用；環(huán)節(jié)四：教學(xué)演示學(xué)生練習(xí)20分鐘線下4.選擇結(jié)構(gòu)——多分支if…elseif…else作用：針對(duì)不同情況進(jìn)行不同的處理。通過(guò)多分支語(yǔ)句，為學(xué)生的考試成績(jī)劃分等級(jí)，如優(yōu)秀、良好、及格等。演示多分支的語(yǔ)法結(jié)構(gòu)，繪制流程圖。注意“elseif”中間有空格，如果遺漏，會(huì)造成語(yǔ)法錯(cuò)誤。5.選擇結(jié)構(gòu)——多分支switchswitch語(yǔ)句也是多分支語(yǔ)句，功能與if系列條件語(yǔ)句相同。switch選擇結(jié)構(gòu)語(yǔ)句的特點(diǎn)就是代碼更加清晰簡(jiǎn)潔、便于閱讀。區(qū)分switch與if的不同。switch只能針對(duì)某個(gè)表達(dá)式的值進(jìn)行判斷，從而決定執(zhí)行哪一段代碼。注意在switch中，break和default的作用，以及在省略情況下的細(xì)節(jié)問(wèn)題。主要掌握數(shù)據(jù)類型及轉(zhuǎn)換；條件語(yǔ)句的使用；環(huán)節(jié)五：教學(xué)演示學(xué)生練習(xí)25分鐘線下循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語(yǔ)句循環(huán)結(jié)構(gòu)語(yǔ)句作用：實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行，例如連續(xù)輸出1~100之間的數(shù)字。。分類：while、do…while和for循環(huán)語(yǔ)句。循環(huán)結(jié)構(gòu)——while講解while的語(yǔ)法結(jié)構(gòu)，繪制流程圖。通過(guò)編寫代碼演示while的應(yīng)用。應(yīng)注意，若循環(huán)條件永遠(yuǎn)為true時(shí)，則會(huì)出現(xiàn)死循環(huán)。案例：將while與if結(jié)合起來(lái)，實(shí)現(xiàn)計(jì)算100以內(nèi)的奇數(shù)和。循環(huán)結(jié)構(gòu)——do…while講解do…while的語(yǔ)法結(jié)構(gòu)，繪制流程圖。比較while與do…while的異同。while是先判斷條件后執(zhí)行循環(huán)體，而do...while會(huì)無(wú)條件執(zhí)行一次循環(huán)體后再判斷條件，決定是否執(zhí)行下次循環(huán)。掌握循環(huán)語(yǔ)句的幾種使用方法環(huán)節(jié)六：教學(xué)演示學(xué)生練習(xí)15分鐘線下循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語(yǔ)句跳轉(zhuǎn)語(yǔ)句作用：實(shí)現(xiàn)程序執(zhí)行過(guò)程中的流程跳轉(zhuǎn)。分類：break和continue語(yǔ)句。break：在switch中終止當(dāng)前語(yǔ)句的執(zhí)行，或在循環(huán)語(yǔ)句中跳出循環(huán)。continue語(yǔ)句用于結(jié)束本次循環(huán)的執(zhí)行，開(kāi)始下一輪循環(huán)的執(zhí)行操作。以在for循環(huán)中跳出為例，編寫代碼演示break的使用。將break換成continue，觀察程序的運(yùn)行結(jié)果。break可在死循環(huán)中使用，當(dāng)滿足一定條件時(shí)跳出循環(huán)。掌握循環(huán)語(yǔ)句的幾種使用方法環(huán)節(jié)七：教學(xué)演示學(xué)生練習(xí)35分鐘線下循環(huán)語(yǔ)句的應(yīng)用【案例】打印金字塔介紹for語(yǔ)句的用法分析案例的功能和實(shí)現(xiàn)思路觀察金字塔的顯示效果，分析其基本規(guī)律。每層中星星的數(shù)量=當(dāng)前層數(shù)*2-1。例如，當(dāng)前為第4層，則星星數(shù)=4*2-1=7。每層星星前的空格=金字塔層數(shù)-當(dāng)前層數(shù)。例如，當(dāng)前行數(shù)為第3層，則空格數(shù)=5-3=2。編寫代碼完成案例的開(kāi)發(fā)通過(guò)prompt()提示用戶輸入金字塔的層數(shù)。判斷用戶輸入是否為一個(gè)合法的數(shù)字，如果不是則報(bào)錯(cuò)提示。編寫外層for循環(huán)，遍歷金字塔的層數(shù)。編寫內(nèi)層第1個(gè)for循環(huán)，輸出星星前的空格。編寫內(nèi)層第2個(gè)for循環(huán)，輸出指定數(shù)量的“*”。在一行輸出結(jié)束后，使用“<br>”來(lái)進(jìn)行換行。通過(guò)瀏覽器訪問(wèn)測(cè)試，觀察運(yùn)行結(jié)果。學(xué)以致用，使學(xué)生掌握循環(huán)語(yǔ)句的使用。環(huán)節(jié)八：課程小結(jié)等5分鐘線下涵蓋本單元所有教學(xué)內(nèi)容。老師對(duì)本任務(wù)所學(xué)的基本知識(shí)及軟件操作方法進(jìn)行總結(jié)?？偨Y(jié)有助于學(xué)生對(duì)本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)九：課程任務(wù)5分鐘線上教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通過(guò)平臺(tái)提交給老師?！緞?dòng)手實(shí)踐】九九乘法表的實(shí)現(xiàn)通過(guò)測(cè)試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識(shí)作業(yè)考核評(píng)價(jià)60分鐘線上教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)錯(cuò)誤的地方，并給與解答。有問(wèn)題的同學(xué)點(diǎn)對(duì)點(diǎn)溝通指導(dǎo)反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱數(shù)組課程類型線上+線下授課時(shí)間第3周授課地點(diǎn)*****班級(jí)*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)掌握數(shù)組的創(chuàng)建掌握數(shù)組的訪問(wèn)與遍歷掌握數(shù)組的屬性與方法能力目標(biāo)能夠創(chuàng)建數(shù)組；能夠?qū)?shù)組進(jìn)行基本的操作素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容數(shù)組是JavaScript中最常用的數(shù)據(jù)類型之一，它屬于對(duì)象類型中的內(nèi)置對(duì)象。相比前面學(xué)習(xí)過(guò)的基本數(shù)據(jù)類型，一個(gè)數(shù)組類型的變量可以保存一批數(shù)據(jù)，并且數(shù)據(jù)可以是任意類型，例如字符串、數(shù)字、數(shù)組或?qū)ο蟮?。因此，利用?shù)組可以很方便地對(duì)數(shù)據(jù)進(jìn)行分類和批量處理。本章將圍繞數(shù)組的使用進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)創(chuàng)建數(shù)組、數(shù)組的訪問(wèn)與遍歷、元素的添加與修改、二維數(shù)組的創(chuàng)建與遍歷、數(shù)組檢索方法教學(xué)難點(diǎn)數(shù)組的訪問(wèn)與遍歷、二維數(shù)組的創(chuàng)建與遍歷、數(shù)組棧方法、數(shù)組檢索方法教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧10分鐘線下提出需求，導(dǎo)入學(xué)習(xí)任務(wù)（1）回顧一下數(shù)據(jù)類型在程序開(kāi)發(fā)中起到的作用。針對(duì)需要保存的數(shù)據(jù)的特點(diǎn)，選擇合適的數(shù)據(jù)類型。基本數(shù)據(jù)類型只能保存一個(gè)數(shù)據(jù)，復(fù)合數(shù)據(jù)類型則適合對(duì)數(shù)據(jù)進(jìn)行分類或批量處理，如一個(gè)班級(jí)的學(xué)生信息，包括每個(gè)學(xué)生的名字、性別、年齡、愛(ài)好等。（2）明確學(xué)習(xí)方向。數(shù)組的分類。數(shù)組的定義。數(shù)組的訪問(wèn)。數(shù)組的遍歷。數(shù)組的刪除。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教師演示學(xué)生練習(xí)35分鐘線下初識(shí)數(shù)組、創(chuàng)建數(shù)組、數(shù)組的基本操作以實(shí)例形式進(jìn)行知識(shí)講解理解數(shù)組的用處在學(xué)習(xí)數(shù)組之前，若要操作一批數(shù)據(jù)，如一個(gè)班級(jí)的所有學(xué)生，為了保存他們的相關(guān)信息，則每一條信息都需要一個(gè)變量去保存。缺點(diǎn)：麻煩，容易出錯(cuò)，又不合理。數(shù)組就是一個(gè)可以存儲(chǔ)一組或一系列數(shù)值的變量。通俗的講，使用一個(gè)數(shù)組類型的變量可以保存一批數(shù)據(jù)，優(yōu)點(diǎn)方便操作管理。數(shù)組的組成結(jié)構(gòu)數(shù)組是由一個(gè)或多個(gè)數(shù)組元素組成的。每個(gè)數(shù)組元素由“索引下標(biāo)”和“值”構(gòu)成?！八饕聵?biāo)”用于識(shí)別元素，用數(shù)字表示，從0開(kāi)始遞增。“值”為元素的內(nèi)容，可以是任意類型的數(shù)據(jù)?！八饕聵?biāo)”和“值”之間存在一種對(duì)應(yīng)關(guān)系，稱之為映射。3.數(shù)組的分類根據(jù)數(shù)組的維數(shù)可劃分為一維數(shù)組、二維數(shù)組、三維數(shù)組等多維數(shù)組。二維數(shù)組是指數(shù)組元素的“值”是一個(gè)一維數(shù)組當(dāng)一個(gè)數(shù)組的值又是一個(gè)數(shù)組時(shí)，就可以形成多維數(shù)組4.數(shù)組的索引教師展示數(shù)組的內(nèi)存分配圖，或通過(guò)繪制的方式一一講解。主要適用于利用位置（0、1、2……）來(lái)標(biāo)識(shí)數(shù)組元素的情況。數(shù)組的索引下標(biāo)也可以自己指定。5.多維數(shù)組一維數(shù)組就是指數(shù)組的“值”是非數(shù)組類型的數(shù)據(jù)。二維數(shù)組是指數(shù)組元素的“值”是一個(gè)一維數(shù)組。多維數(shù)組指的是一個(gè)數(shù)組元素的值又是一個(gè)數(shù)組（一維、二維、三維…）。Array對(duì)象創(chuàng)建數(shù)組通過(guò)newArray()創(chuàng)建數(shù)組。數(shù)組元素可以是字符串、數(shù)值、混合型等。可以創(chuàng)建一個(gè)空數(shù)組。通過(guò)console.log()查看創(chuàng)建的數(shù)組的下標(biāo)。使用“[]”語(yǔ)法創(chuàng)建數(shù)組對(duì)比newArray()和“[]”兩種方式的區(qū)別。獲取數(shù)組長(zhǎng)度訪問(wèn)Array對(duì)象的length屬性獲取數(shù)組元素個(gè)數(shù)。對(duì)于保存了undefined的元素，也會(huì)占用元素的個(gè)數(shù)。設(shè)置數(shù)組元素通過(guò)數(shù)組的length屬性還可以設(shè)置數(shù)組元素個(gè)數(shù)。對(duì)于空數(shù)組，設(shè)置length屬性后，會(huì)占用存儲(chǔ)位置。如果設(shè)置length屬性小于數(shù)組原有長(zhǎng)度，則多余元素舍棄。如果length屬性大于數(shù)組原有長(zhǎng)度，則不足的存儲(chǔ)位置會(huì)被占用。訪問(wèn)數(shù)組元素通過(guò)“數(shù)組名[下標(biāo)]”的方式來(lái)獲取指定索引下標(biāo)數(shù)組元素的值。使用console.log()將訪問(wèn)的數(shù)組元素打印到控制臺(tái)，查看效果。遍歷數(shù)組使用for的方式，利用自增的變量“i”訪問(wèn)數(shù)組中的每一個(gè)元素。使用for…in的方式實(shí)現(xiàn)數(shù)組的遍歷。使用for…of的方式實(shí)現(xiàn)數(shù)組的遍歷。對(duì)比f(wàn)or…in和for…of的區(qū)別。添加與修改通過(guò)“數(shù)組名[下標(biāo)]”的方式對(duì)數(shù)組中的元素進(jìn)行添加或修改。當(dāng)下標(biāo)不連續(xù)時(shí)，將會(huì)被空存儲(chǔ)位置暫用。刪除元素值通過(guò)delete關(guān)鍵字刪除數(shù)組元素解構(gòu)賦值演示ES6新增的數(shù)組解構(gòu)賦值的方式。利用解構(gòu)賦值方式實(shí)現(xiàn)交換兩個(gè)變量。使學(xué)生掌握創(chuàng)建數(shù)組、數(shù)組的基本操作環(huán)節(jié)四：教學(xué)演示學(xué)生練習(xí)45分鐘線下常見(jiàn)二維數(shù)組操作、數(shù)組排序1.二維數(shù)組的創(chuàng)建回顧一維數(shù)組創(chuàng)建的兩種方式。引出二維數(shù)組的創(chuàng)建，只需將數(shù)組元素設(shè)置為數(shù)組即可。給出示例演示如何利用Array和[]如何創(chuàng)建二維數(shù)組。引申出多維數(shù)組的創(chuàng)建方式，即將數(shù)組元素設(shè)置為數(shù)組。2.二維數(shù)組的遍歷回顧一維數(shù)組的遍歷方式，for、for…in或for…of（ES6提供）。引出二維數(shù)組的遍歷，只需在遍歷數(shù)組后，再次遍歷數(shù)組的元素即可。通過(guò)案例二維數(shù)組求和演示二維數(shù)組的創(chuàng)建和遍歷指出在開(kāi)發(fā)中為多維空數(shù)組添加元素時(shí)，要保證添加的元素已被定義為數(shù)組，防止程序報(bào)錯(cuò)。為便于閱讀、調(diào)試和維護(hù)，推薦使用三維及以下的數(shù)組保存數(shù)據(jù)。3.【案例】二維數(shù)組轉(zhuǎn)置分析什么是二維數(shù)組轉(zhuǎn)置。通過(guò)畫圖的方式，演示二維數(shù)組的行、列矩陣效果。演示如何進(jìn)行行列位置交換。先利用兩層for循環(huán)遍歷二維數(shù)組中所有的元素。準(zhǔn)備一個(gè)空數(shù)組，用于保存轉(zhuǎn)置后的數(shù)組結(jié)果。在內(nèi)層for循環(huán)開(kāi)始前，為保存結(jié)果的數(shù)組添加元素。將原數(shù)組的行的下標(biāo)作為新數(shù)組的列的下標(biāo)。將原數(shù)組的列的下標(biāo)作為新數(shù)組的行的下標(biāo)。輸出數(shù)組，查看二維數(shù)組轉(zhuǎn)置后的結(jié)果。4.5.冒泡排序冒泡排序是計(jì)算機(jī)科學(xué)領(lǐng)域中較簡(jiǎn)單的排序算法。實(shí)現(xiàn)原理：在冒泡排序的過(guò)程中，按照要求從小到大排序或從大到小排序，不斷比較數(shù)組中相鄰兩個(gè)元素的值，較小或較大的元素前移。展示或繪制冒泡法的過(guò)程圖。總結(jié)冒泡排序的規(guī)律：冒泡排序比較的輪數(shù)是數(shù)組長(zhǎng)度減1，每輪比較的對(duì)數(shù)等于數(shù)組的長(zhǎng)度減當(dāng)前的輪數(shù)。演示冒泡排序法的代碼實(shí)現(xiàn)。5.插入排序插入排序是一種直觀的簡(jiǎn)單排序算法。實(shí)現(xiàn)原理：通過(guò)構(gòu)建有序數(shù)組元素的存儲(chǔ)，對(duì)于未排序數(shù)組元素的，在已排序的數(shù)組中從最后一個(gè)元素向第一個(gè)元素遍歷，找到相應(yīng)位置并插入。其中，待排序數(shù)組的第1個(gè)元素會(huì)被看作是一個(gè)有序的數(shù)組，從第2個(gè)至最后一個(gè)元素會(huì)被看作是一個(gè)無(wú)序數(shù)組。展示或繪制快速法的過(guò)程圖?？偨Y(jié)插入排序的規(guī)律：插入排序比較的次數(shù)與無(wú)序數(shù)組的長(zhǎng)度相等，每次無(wú)序數(shù)組元素與有序數(shù)組中的所有元素進(jìn)行比較，比較后找到對(duì)應(yīng)位置插入，最后即可得到一個(gè)有序的數(shù)組。演示插入排序法的代碼實(shí)現(xiàn)。使學(xué)生掌握常見(jiàn)二維數(shù)組操作、數(shù)組排序環(huán)節(jié)五：教學(xué)演示教師指導(dǎo)學(xué)生練習(xí)35分鐘線下【案例】猴子選大王案例分析介紹“猴子選大王”的游戲規(guī)則。代碼實(shí)現(xiàn)將可控的量分為“猴子的總數(shù)”和“每次踢出第幾只猴子”。利用for循環(huán)，根據(jù)猴子的總數(shù)來(lái)創(chuàng)建猴子數(shù)組。遍歷猴子數(shù)組，利用shift()方法從前往后依次取出猴子。判斷當(dāng)前未達(dá)到踢出猴子的數(shù)量時(shí)，通過(guò)push()方法將前面取出的猴子放入數(shù)組尾部。如果達(dá)到了數(shù)量，則跳過(guò)不進(jìn)行處理，從而實(shí)現(xiàn)踢出猴子。在循環(huán)結(jié)束直到數(shù)組的長(zhǎng)度等于1時(shí)，最后剩下的這個(gè)猴子就是我們要的結(jié)果了。學(xué)以致用環(huán)節(jié)六：課程小結(jié)等10分鐘線下涵蓋本單元所有教學(xué)內(nèi)容。總結(jié)有助于學(xué)生對(duì)本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)七：課程任務(wù)10分鐘線上教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通過(guò)平臺(tái)提交給老師。【動(dòng)手實(shí)踐】省份城市的三級(jí)聯(lián)動(dòng)通過(guò)測(cè)試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識(shí)作業(yè)考核評(píng)價(jià)60分鐘線上教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)錯(cuò)誤的地方，并給與解答。有問(wèn)題的同學(xué)點(diǎn)對(duì)點(diǎn)溝通指導(dǎo)反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱函數(shù)課程類型線上+線下授課時(shí)間第4周授課地點(diǎn)*****班級(jí)*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)掌握函數(shù)的使用方法掌握變量的作用域掌握匿名函數(shù)與閉包函數(shù)能力目標(biāo)能夠進(jìn)行函數(shù)的調(diào)用能夠書寫函數(shù)表達(dá)式素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容函數(shù)是JavaScript中最常用的功能之一，它可以避免相同功能代碼的重復(fù)編寫，將程序中的代碼模塊化，提高程序的可讀性，減少開(kāi)發(fā)者的工作量，便于后期的維護(hù)。例如，在計(jì)算班級(jí)學(xué)生的平均分時(shí)，每計(jì)算一個(gè)學(xué)生的平均分，都要編寫一段功能相同的代碼，這樣會(huì)導(dǎo)致代碼量大大增加。為此，JavaScript提供了函數(shù)，通過(guò)函數(shù)可以將計(jì)算平均分的代碼進(jìn)行封裝，在使用時(shí)直接調(diào)用即可，無(wú)需重復(fù)編寫。本章將針對(duì)函數(shù)的內(nèi)容進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)函數(shù)的創(chuàng)建和使用、變量的作用域、匿名與回調(diào)函數(shù)、閉包函數(shù)教學(xué)難點(diǎn)函數(shù)嵌套與作用域鏈、閉包函數(shù)教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧10分鐘線下回顧上節(jié)課，引出本節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。前面學(xué)習(xí)了PHP的一些基本語(yǔ)法，包括變量、表達(dá)式、數(shù)據(jù)類型、運(yùn)算符、流程控制語(yǔ)句等，這些是最基本又很重要的內(nèi)容。然后學(xué)習(xí)了數(shù)組，用來(lái)存儲(chǔ)和管理大量的數(shù)據(jù)。接下來(lái)，本節(jié)將針對(duì)函數(shù)進(jìn)行詳細(xì)講解，掌握函數(shù)的具體使用細(xì)節(jié)，使程序代碼模塊化，提高程序的可讀性和后期的可維護(hù)性。（3）明確學(xué)習(xí)方向。能夠充分理解函數(shù)的概念。能夠獨(dú)立的完成函數(shù)的定義。熟練掌握函數(shù)的各種參數(shù)設(shè)置。理解函數(shù)中變量的作用域機(jī)制。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教師演示學(xué)生練習(xí)35分鐘線下初識(shí)函數(shù)、參數(shù)設(shè)置、函數(shù)的調(diào)用、變量的作用域初識(shí)函數(shù)回顧之前學(xué)過(guò)的函數(shù)，如parseFlost()、isNan()、parseInt()等?；仡欀熬帉戇^(guò)的自定義函數(shù)。請(qǐng)學(xué)生講出自己對(duì)函數(shù)的理解，引出函數(shù)的含義、作用、以及其好處?？偨Y(jié)自定義函數(shù)的語(yǔ)法結(jié)構(gòu)，以及返回值。注意函數(shù)的命名規(guī)則，不能使用數(shù)字開(kāi)頭。編寫代碼實(shí)現(xiàn)求最大值、最小值等功能。編寫一個(gè)$()函數(shù)，封裝document.getElementById()方法，從而更方便的獲取DOM對(duì)象。函數(shù)的參數(shù)設(shè)置按照參數(shù)劃分，函數(shù)分為：無(wú)參函數(shù)和有參函數(shù)。理解形參、實(shí)參的概念，演示函數(shù)參數(shù)的傳遞。函數(shù)的形參可以不設(shè)置，在函數(shù)內(nèi)通過(guò)arguments即可獲取調(diào)用函數(shù)時(shí)傳遞的具體參數(shù)。通過(guò)arguments.length可獲取參數(shù)的數(shù)量。在ES6中，定義函數(shù)的語(yǔ)法得到了加強(qiáng)，可以為函數(shù)參數(shù)設(shè)置默認(rèn)值，或在參數(shù)數(shù)量不確定時(shí)，利用“…變量名”的方式動(dòng)態(tài)的接收參數(shù)。函數(shù)的調(diào)用講解函數(shù)調(diào)用的語(yǔ)法，實(shí)參列表的概念。通過(guò)求和的案例，演示函數(shù)的調(diào)用，以及arguments的使用。提出問(wèn)題：函數(shù)的聲明與調(diào)用的順序，可以先調(diào)用后聲明。【案例】字符串大小寫轉(zhuǎn)換效果分析分析案例的實(shí)現(xiàn)效果，通過(guò)單擊網(wǎng)頁(yè)上的按鈕，實(shí)現(xiàn)對(duì)文本框內(nèi)的文本進(jìn)行大寫、小寫轉(zhuǎn)換，將轉(zhuǎn)換結(jié)果顯示在另一個(gè)文本框中。代碼實(shí)現(xiàn)編寫基本頁(yè)面。為按鈕添加deal()事件函數(shù)，用于單擊后調(diào)用函數(shù)執(zhí)行轉(zhuǎn)換操作。為deal()函數(shù)傳遞參數(shù)（upper、lower），表示執(zhí)行轉(zhuǎn)大寫還是轉(zhuǎn)小寫的操作。在deal()函數(shù)中，通過(guò)switch判斷操作類型。分析如何實(shí)現(xiàn)字符串大小寫轉(zhuǎn)換，利用str.toLowerCase()、str.toUpperCase()方法來(lái)實(shí)現(xiàn)具體功能。使學(xué)生對(duì)函數(shù)、參數(shù)設(shè)置、函數(shù)的調(diào)用、變量的作用域有一個(gè)初步的認(rèn)識(shí)環(huán)節(jié)四：教學(xué)演示學(xué)生練習(xí)45分鐘線下函數(shù)表達(dá)式、匿名函數(shù)、回調(diào)函數(shù)函數(shù)表達(dá)式講解什么是函數(shù)表達(dá)式，函數(shù)表達(dá)式的代碼如何編寫。注意函數(shù)表達(dá)式與函數(shù)聲明的區(qū)別，若函數(shù)表達(dá)式寫在函數(shù)調(diào)用的前面，將無(wú)法被調(diào)用。匿名函數(shù)作用：沒(méi)有名稱的函數(shù)，可避免全局變量命名污染即函數(shù)沖突問(wèn)題。演示匿名函數(shù)的3種實(shí)現(xiàn)方式，方式1：省略函數(shù)名，方式2：自調(diào)用，方式3：處理事件時(shí)寫的函數(shù)。分析3種方式的優(yōu)缺點(diǎn)，以及應(yīng)用場(chǎng)景。箭頭函數(shù)作用：ES6新增的語(yǔ)法，方便代碼書寫。演示箭頭函數(shù)的4種用法。對(duì)比講解箭頭函數(shù)代碼與普通函數(shù)的代碼。通過(guò)代碼演示箭頭函數(shù)的使用，設(shè)置1個(gè)參數(shù)與設(shè)置2個(gè)參數(shù)的語(yǔ)法?；卣{(diào)函數(shù)作用：將函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)，然后調(diào)用這個(gè)函數(shù)。特點(diǎn)：根據(jù)傳入的函數(shù)不同，執(zhí)行結(jié)果不同。通過(guò)代碼演示的具體實(shí)現(xiàn)。在JavaScript中，有一些數(shù)組方法支持使用回調(diào)函數(shù)，如find()、every()、some()、forEach()、map()、reduce()、reduceRight()等。演示這些方法的使用。使學(xué)生掌握函數(shù)表達(dá)式、匿名函數(shù)、回調(diào)函數(shù)的基本情況環(huán)節(jié)五：教學(xué)演示教師指導(dǎo)學(xué)生練習(xí)35分鐘線下什么是閉包函數(shù)、閉包函數(shù)的實(shí)現(xiàn)、動(dòng)手實(shí)踐：網(wǎng)頁(yè)計(jì)算器什么是閉包函數(shù)特點(diǎn)：內(nèi)嵌函數(shù)可以訪問(wèn)定義在外層函數(shù)中的所有變量和函數(shù)，并包括其外層函數(shù)能訪問(wèn)的所有變量和函數(shù)。但是在函數(shù)外部則不能訪問(wèn)函數(shù)的內(nèi)部變量和嵌套函數(shù)。作用1：可以在函數(shù)外部讀取函數(shù)內(nèi)部的變量。作用2：可以讓變量的值保持在內(nèi)存中。閉包函數(shù)的實(shí)現(xiàn)在函數(shù)中，通過(guò)return返回一個(gè)函數(shù)，然后在調(diào)用函數(shù)時(shí)，接收這個(gè)返回的函數(shù)。此時(shí)，就可以實(shí)現(xiàn)在函數(shù)外調(diào)用函數(shù)內(nèi)部定義的函數(shù)。三、【動(dòng)手實(shí)踐】網(wǎng)頁(yè)計(jì)算器案例分析展示案例完成后的效果，對(duì)功能進(jìn)行分析。代碼實(shí)現(xiàn)設(shè)計(jì)網(wǎng)頁(yè)計(jì)算器的基本頁(yè)面。提供兩個(gè)文本框，用來(lái)輸入數(shù)字，然后提供4個(gè)按鈕，分別表示加、減、乘、除，用來(lái)對(duì)數(shù)字進(jìn)行計(jì)算。編寫add()、sub()、mul()、div()這4個(gè)函數(shù)，分部用于加法、減法、乘法、除法的運(yùn)算。編寫calc()函數(shù)，當(dāng)單擊按鈕時(shí)，通過(guò)onclick事件調(diào)用此函數(shù)。該函數(shù)的參數(shù)func是一個(gè)回調(diào)函數(shù)，用來(lái)根據(jù)回調(diào)函數(shù)執(zhí)行具體的計(jì)算。例如，當(dāng)單擊“加”按鈕時(shí)，就調(diào)用calc()函數(shù)并將add函數(shù)作為參數(shù)傳入，注意傳入add函數(shù)時(shí)不要加小括號(hào)，否則就變成了調(diào)用add()將其返回值作為參數(shù)傳入了，通過(guò)瀏覽器訪問(wèn)測(cè)試，觀察運(yùn)行結(jié)果。學(xué)以致用動(dòng)手實(shí)踐環(huán)節(jié)六：課程小結(jié)等10分鐘線下涵蓋本單元所有教學(xué)內(nèi)容?；仡櫳险n前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。老師對(duì)本任務(wù)所學(xué)的基本知識(shí)點(diǎn)及操作方法進(jìn)行總結(jié)。使學(xué)生對(duì)本次課所學(xué)知識(shí)有一個(gè)整體的把握環(huán)節(jié)七：課程任務(wù)5分鐘線上發(fā)布課后任務(wù)教師發(fā)放本章相關(guān)資料和素材，學(xué)生進(jìn)行上機(jī)練習(xí)，以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。上機(jī)練習(xí)完成后將報(bào)告通過(guò)平臺(tái)提交給老師?？偨Y(jié)有助于學(xué)生對(duì)本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。作業(yè)考核評(píng)價(jià)60分鐘線上教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通過(guò)平臺(tái)提交給老師。教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)錯(cuò)誤的地方，并給與解答。有問(wèn)題的同學(xué)點(diǎn)對(duì)點(diǎn)溝通指導(dǎo)通過(guò)測(cè)試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識(shí)反思與改進(jìn)教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)bug的地方，并給與解答。錯(cuò)誤比較多的同學(xué)進(jìn)行點(diǎn)對(duì)點(diǎn)，一對(duì)一指導(dǎo)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱對(duì)象課程類型線上+線下授課時(shí)間第5周授課地點(diǎn)*****班級(jí)*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)理解面向?qū)ο笏枷?，能夠說(shuō)出面向?qū)ο笈c面向過(guò)程的區(qū)別掌握J(rèn)avaScript常用內(nèi)置對(duì)象的使用方法掌握自定義對(duì)象的定義和基本操作，理解構(gòu)造函數(shù)的概念掌握封裝、繼承、多態(tài)的設(shè)計(jì)思想，理解原型鏈機(jī)制熟悉錯(cuò)誤的處理，掌握如何在瀏覽器中調(diào)試JavaScript程序能力目標(biāo)能夠使用常用內(nèi)置對(duì)象能夠進(jìn)行對(duì)象的基本操作能夠在瀏覽器中調(diào)試JavaScript程序素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容本章將圍繞JavaScript開(kāi)發(fā)中的面向?qū)ο笤O(shè)計(jì)思想，以及對(duì)象相關(guān)的一些原理和應(yīng)用進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)構(gòu)造函數(shù)、String對(duì)象、Math對(duì)象、Date對(duì)象、原型、繼承教學(xué)難點(diǎn)深拷貝與淺拷貝、構(gòu)造函數(shù)、原型、繼承、原型鏈教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。

三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧10分鐘線下（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。在第1章已經(jīng)介紹過(guò)面向?qū)ο蟮幕靖拍?，本章將?duì)JavaScript面向?qū)ο筮M(jìn)行更深入和細(xì)致地講解。（3）明確學(xué)習(xí)方向。理解面向?qū)ο笏枷氤霈F(xiàn)的原因。能夠說(shuō)出面向?qū)ο笈c面向過(guò)程的區(qū)別。掌握對(duì)象的定義語(yǔ)法。掌握對(duì)象成員的訪問(wèn)方法。掌握對(duì)象成員的遍歷。理解對(duì)象的深拷貝與淺拷貝機(jī)制。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教師演示學(xué)生練習(xí)35分鐘線下面向?qū)ο蟾攀觥⒚嫦驅(qū)ο蟮奶卣?、?duì)象的定義、訪問(wèn)對(duì)象成員、對(duì)象成員遍歷、深拷貝與淺拷貝實(shí)例講解知識(shí)點(diǎn)1.為什么學(xué)習(xí)面向?qū)ο螽?dāng)軟件開(kāi)發(fā)規(guī)模達(dá)到一定程度時(shí)，面向?qū)ο笏枷肟梢愿玫慕鉀Q問(wèn)題。面向?qū)ο罂梢詰?yīng)用到許多領(lǐng)域，這里學(xué)習(xí)的重點(diǎn)是面向?qū)ο缶幊獭?區(qū)分面向過(guò)程與面向?qū)ο竺嫦蜻^(guò)程：注重具體步驟，凡事都靠自己完成。面向?qū)ο螅鹤⒅鼐唧w對(duì)象，指揮對(duì)象去完成任務(wù)。注意：如果對(duì)象一開(kāi)始不存在，那就需要手動(dòng)創(chuàng)造一個(gè)對(duì)象，將面向過(guò)程的代碼封裝起來(lái)，形成對(duì)象。創(chuàng)造對(duì)象的意義：當(dāng)?shù)谝淮斡玫侥硞€(gè)功能的時(shí)候，將代碼封裝成對(duì)象，下次再需要用到這個(gè)功能時(shí)，直接調(diào)用對(duì)象就能完成任務(wù)，不需要重復(fù)編寫代碼。3面向?qū)ο蟮奶卣鞣庋b性：隱藏內(nèi)部實(shí)現(xiàn)，對(duì)外開(kāi)放接口。繼承性：不改變另一個(gè)對(duì)象的前提下進(jìn)行擴(kuò)展。多態(tài)性：為不同的對(duì)象提供相同的接口（歸一化設(shè)計(jì)），降低使用難度。4對(duì)象的定義使用“{}”來(lái)定義一個(gè)對(duì)象。對(duì)象的成員以鍵值對(duì)的形式保存，多個(gè)成員用逗號(hào)分隔。對(duì)象的成員可以是屬性或方法，相當(dāng)于變量和函數(shù)。對(duì)象的字面量語(yǔ)法，還常用于數(shù)據(jù)交互，稱為JSON數(shù)據(jù)格式。5訪問(wèn)對(duì)象成員創(chuàng)建對(duì)象后，通過(guò)“.”來(lái)訪問(wèn)對(duì)象的成員。如果一個(gè)對(duì)象沒(méi)有成員，可以手動(dòng)賦值來(lái)添加成員。對(duì)象成員訪問(wèn)支持使用“[]”語(yǔ)法，相比“.”語(yǔ)法其命名可更加隨意。通過(guò)例5-1演示如何在HTML頁(yè)面中動(dòng)態(tài)為對(duì)象增加成員。6對(duì)象成員遍歷回顧數(shù)組的遍歷，利用for…in語(yǔ)法對(duì)數(shù)組進(jìn)行遍歷。使用for…in語(yǔ)法可以遍歷對(duì)象，其代碼與遍歷數(shù)組類似。使用“obj[k]”語(yǔ)法來(lái)訪問(wèn)對(duì)象中的元素，可以用“obj[k]()”調(diào)用方法。7判斷對(duì)象成員是否存在使用“in”可以判斷對(duì)象中是否存在某個(gè)成員。8深拷貝與淺拷貝對(duì)于基本數(shù)據(jù)類型，在進(jìn)行賦值時(shí)，執(zhí)行的是拷貝（復(fù)制）操作。對(duì)于復(fù)合數(shù)據(jù)類型（如數(shù)組、對(duì)象），在進(jìn)行賦值時(shí)，執(zhí)行的是淺拷貝操作。通過(guò)代碼演示淺拷貝的情況，分析為什么會(huì)出現(xiàn)這種情況。通過(guò)文件夾、快捷方式的例子，來(lái)比較對(duì)象與普通數(shù)據(jù)的區(qū)別。分析為什么會(huì)出現(xiàn)淺拷貝機(jī)制：節(jié)省內(nèi)存開(kāi)銷。對(duì)象可以保存大量的數(shù)據(jù)，因此更加占用內(nèi)存。當(dāng)在程序中操作對(duì)象時(shí)，（如將對(duì)象放入函數(shù)參數(shù)中傳遞），如果直接創(chuàng)建副本，會(huì)多占用一份內(nèi)存空間。在實(shí)際開(kāi)發(fā)中，也會(huì)遇到完全復(fù)制一個(gè)對(duì)象的需求，即深拷貝，這就需要自己動(dòng)手來(lái)實(shí)現(xiàn)深拷貝的效果。動(dòng)手編寫deepCopy()函數(shù)實(shí)現(xiàn)對(duì)象的深拷貝。使學(xué)生對(duì)面向?qū)ο笥幸粋€(gè)初步的認(rèn)識(shí)環(huán)節(jié)四：教學(xué)演示學(xué)生練習(xí)45分鐘線下為什么使用構(gòu)造函數(shù)，內(nèi)置構(gòu)造函數(shù)、自定義構(gòu)造函數(shù)、私有成員、函數(shù)中的this指向1.為什么使用構(gòu)造函數(shù)介紹傳統(tǒng)面向?qū)ο缶幊陶Z(yǔ)言中的類與對(duì)象的概念。類的作用：創(chuàng)建對(duì)象的模板，用來(lái)創(chuàng)建一些具有相同特征的對(duì)象。通過(guò)類創(chuàng)建對(duì)象的過(guò)程，稱為實(shí)例化，創(chuàng)建對(duì)來(lái)的對(duì)象稱為類的實(shí)例。JavaScript一開(kāi)始沒(méi)有class關(guān)鍵字（ES6新增了該語(yǔ)法），若要以模板的方式實(shí)例化對(duì)象，可以將創(chuàng)建對(duì)象的過(guò)程封裝成函數(shù)，通過(guò)函數(shù)創(chuàng)建對(duì)象。分析這種方式的缺點(diǎn)：無(wú)法區(qū)分對(duì)象的類型。引出：利用構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象。2使用JavaScript內(nèi)置的構(gòu)造函數(shù)在學(xué)習(xí)自定義構(gòu)造函數(shù)前，先來(lái)看一下內(nèi)置構(gòu)造函數(shù)如何使用。演示如何通過(guò)“new構(gòu)造函數(shù)名()”來(lái)創(chuàng)建對(duì)象。通過(guò)constructor查看對(duì)象是由哪個(gè)構(gòu)造函數(shù)創(chuàng)建的。字面量“{}”創(chuàng)建的對(duì)象，實(shí)際上是Object對(duì)象的實(shí)例。3自定義構(gòu)造函數(shù)通過(guò)代碼演示如何自定義一個(gè)構(gòu)造函數(shù)?？偨Y(jié)自定義構(gòu)造函數(shù)的注意事項(xiàng)。注意在構(gòu)造函數(shù)中，this在成員方法內(nèi)，和成員方法外的區(qū)別。ES6新增的class關(guān)鍵字為什么新增class關(guān)鍵字：該關(guān)鍵字是Java、PHP等編程語(yǔ)言中有的，而JavaScript一開(kāi)始沒(méi)有。為了方便Java、PHP等Web開(kāi)發(fā)程序員更方便地使用JavaScript來(lái)進(jìn)行面向?qū)ο缶幊?，因此加入了該關(guān)鍵字的支持。注意class關(guān)鍵字本質(zhì)上是一個(gè)語(yǔ)法糖，可以用構(gòu)造函數(shù)語(yǔ)法替代。私有成員在一些使用class關(guān)鍵字的編程語(yǔ)言中，可以用public、private關(guān)鍵字設(shè)定對(duì)象成員的可訪問(wèn)性，即劃分公有成員和私有成員。在JavaScript中沒(méi)有這些關(guān)鍵字，其實(shí)現(xiàn)方法是，在構(gòu)造函數(shù)中使用this添加的成員相當(dāng)于公有成員，而直接用var定義的變量相當(dāng)于私有成員。什么情況下使用公有成員，什么情況下使用私有成員：為了體現(xiàn)面向?qū)ο蟮姆庋b性，隱藏程序內(nèi)部實(shí)現(xiàn)細(xì)節(jié)，僅對(duì)外開(kāi)放接口，防止內(nèi)部成員被外界隨意訪問(wèn)。在函數(shù)中使用return關(guān)鍵字在構(gòu)造函數(shù)中可以用return關(guān)鍵字，在使用時(shí)與普通函數(shù)有一定區(qū)別。在構(gòu)造函數(shù)中使用return關(guān)鍵字時(shí)，有兩種情況，一種是返回復(fù)合類型數(shù)據(jù)，一種是返回基本類型數(shù)據(jù)，這兩種方式對(duì)返回的處理有區(qū)別。通過(guò)代碼對(duì)比演示兩種情況的具體區(qū)別。函數(shù)中的this指向分析this指向，分3種情況：①使用“new構(gòu)造函數(shù)”實(shí)例化對(duì)象時(shí)；②直接通過(guò)函數(shù)名調(diào)用函數(shù)時(shí)；③將函數(shù)作為對(duì)象方法調(diào)用時(shí)。通過(guò)代碼演示不同情況下this指向的具體是哪個(gè)對(duì)象。更改this指向（演示apply()、call()方法的使用，并對(duì)比兩個(gè)方法的區(qū)別）。補(bǔ)充講解ES5新增的bind()方法。使學(xué)生掌握，內(nèi)置構(gòu)造函數(shù)、自定義構(gòu)造函數(shù)、私有成員、函數(shù)中的this指向用法環(huán)節(jié)五：教學(xué)演示教師指導(dǎo)學(xué)生練習(xí)35分鐘線下案例：制作年歷1.輸入需要生成的年份通過(guò)輸入框提示用戶輸入年份。2.編寫calendar()函數(shù)生成指定年份的年歷提供參數(shù)y表示指定的年份。返回生成的HTML結(jié)果。編寫for循環(huán)遍歷12個(gè)月份利用<table>進(jìn)行頁(yè)面布局，每個(gè)月份用一個(gè)<table>實(shí)現(xiàn)。利用CSS實(shí)現(xiàn)根據(jù)頁(yè)面寬度進(jìn)行排版，表格可以自動(dòng)換到下一行。獲取指定年份1月1日的星期值通過(guò)Date()實(shí)例化對(duì)象并調(diào)用getDay()方法來(lái)實(shí)現(xiàn)。獲取每個(gè)月共有多少天通過(guò)Date()實(shí)例化對(duì)象并調(diào)用getDate()獲得最大天數(shù)利用for循環(huán)從第1天遍歷到最后1天。在循環(huán)中，控制星期值在0~6范圍內(nèi)變動(dòng)。將每一天的數(shù)字拼接到表格中根據(jù)當(dāng)前月份的第1天是星期幾，來(lái)填充幾個(gè)空白單元格。利用<td>單元格的colspan來(lái)實(shí)現(xiàn)填充空白單元格。遍歷到星期六時(shí)，如果不是該月最后一天，則需要換行。如果到達(dá)該月最后一天，則閉合標(biāo)簽。測(cè)試程序通過(guò)瀏覽器訪問(wèn)，觀察程序運(yùn)行結(jié)果是否正確。掌握編程實(shí)現(xiàn)年歷的制作，能夠根據(jù)指定年份生成年歷。熟練掌握Date對(duì)象的使用環(huán)節(jié)六：課程小結(jié)等10分鐘線下對(duì)本章節(jié)知識(shí)點(diǎn)進(jìn)行總結(jié)，使學(xué)生對(duì)面向?qū)ο笥幸粋€(gè)清晰的認(rèn)識(shí)，并把握好重難點(diǎn)。使學(xué)生能夠獨(dú)立進(jìn)行頁(yè)面排版環(huán)節(jié)七：課程任務(wù)10分鐘線上涵蓋本單元所有教學(xué)內(nèi)容。老師對(duì)本任務(wù)所學(xué)的基本知識(shí)點(diǎn)及操作方法進(jìn)行總結(jié)?？偨Y(jié)有助于學(xué)生對(duì)本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。作業(yè)考核評(píng)價(jià)60分鐘線上教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通過(guò)平臺(tái)提交給老師。上機(jī)測(cè)試主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在代碼中容易出錯(cuò)的操作步驟。通過(guò)上機(jī)測(cè)試可以考察同學(xué)對(duì)“面向?qū)ο蟆钡戎R(shí)點(diǎn)的掌握程度。通過(guò)測(cè)試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識(shí)反思與改進(jìn)教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)bug的地方，并給與解答。針對(duì)錯(cuò)誤比較多的同學(xué)進(jìn)行一對(duì)一指導(dǎo)。混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱BOM課程類型線上+線下授課時(shí)間第6周授課地點(diǎn)*****班級(jí)課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)了解BOM的組成結(jié)構(gòu)掌握定時(shí)器的操作熟悉location與history對(duì)象能力目標(biāo)能夠操作BOM對(duì)象能夠使用定時(shí)器制作倒計(jì)時(shí)能夠進(jìn)窗口的操作素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容BOM（BrowerObjectModel）指的是瀏覽器對(duì)象模型，DOM（DocumentObjectModel）指的是文檔對(duì)象模型。那么接下來(lái)將在本章首先針對(duì)BOM的使用進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)BOM組成結(jié)構(gòu)、BOM常用對(duì)象和方法、定時(shí)器教學(xué)難點(diǎn)窗口位置和大小、框架操作、history、screen教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧10分鐘線下回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。在前面的學(xué)習(xí)中，用到的alert()、prompt()函數(shù)其實(shí)是window對(duì)象的方法，關(guān)于window對(duì)象具體如何使用，它有哪些常用的屬性和方法，將在本節(jié)進(jìn)行具體講解。（3）明確學(xué)習(xí)方向。理解什么是BOM。掌握BOM的基本結(jié)構(gòu)。理解window對(duì)象與其他BOM對(duì)象的關(guān)系。掌握如何彈出對(duì)話框和窗口。掌握如何控制窗口位置和大小。掌握如何進(jìn)行框架操作。掌握定時(shí)器的使用方法。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教師演示學(xué)生練習(xí)35分鐘線下什么是BOM對(duì)象、window對(duì)象1.什么是BOMJavaScript是由ECMAScript、BOM和DOM組成的。BOM是指瀏覽器對(duì)象模型（BrowserObjectModel），DOM是指文檔對(duì)象模型（DocumentObjectModel）。2.BOM的作用JavaScript經(jīng)常需要操作瀏覽器窗口及窗口上的控件，實(shí)現(xiàn)用戶和頁(yè)面的動(dòng)態(tài)交互。為此，瀏覽器提供了一系列內(nèi)置對(duì)象，統(tǒng)稱為瀏覽器對(duì)象。各內(nèi)置對(duì)象之間按照某種層次組織起來(lái)的模型統(tǒng)稱為BOM。3.BOM的結(jié)構(gòu)window對(duì)象是BOM的頂層（核心）對(duì)象，其他的對(duì)象都是以屬性的方式添加到window對(duì)象下，也可以稱為window的子對(duì)象。4.BOM與DOM的關(guān)系DOM是W3C標(biāo)準(zhǔn)，是所有瀏覽器公共遵守的規(guī)則。而B(niǎo)OM是各瀏覽器根據(jù)DOM在各自瀏覽器上的實(shí)現(xiàn)，主要處理瀏覽器的窗口和框架。區(qū)別：DOM處理網(wǎng)頁(yè)內(nèi)容，BOM與瀏覽器進(jìn)行交互。5.常用BOM對(duì)象介紹document對(duì)象：即DOM對(duì)象，用來(lái)處理網(wǎng)頁(yè)內(nèi)容。history對(duì)象：記錄瀏覽器的訪問(wèn)歷史記錄，常用于開(kāi)發(fā)前進(jìn)與后退功能。location對(duì)象：用于控制URL地址欄。navigator對(duì)象：獲取瀏覽器的相關(guān)信息，如名稱、版本等。screen對(duì)象：獲取與屏幕相關(guān)的信息，如屏幕分辨率，坐標(biāo)等。6.腳下留心BOM沒(méi)有相關(guān)標(biāo)準(zhǔn)，每個(gè)瀏覽器都有其自己對(duì)BOM的實(shí)現(xiàn)方式。而各瀏覽器間共有的對(duì)象就成為了事實(shí)上的標(biāo)準(zhǔn)。在利用BOM實(shí)現(xiàn)具體功能時(shí)要根據(jù)實(shí)際的開(kāi)發(fā)情況考慮瀏覽器之間的兼容問(wèn)題，否則會(huì)出現(xiàn)不可預(yù)料的情況。7.全局作用域window對(duì)象的特點(diǎn)：它是一個(gè)全局對(duì)象，定義在全局作用域中的變量、函數(shù)以及內(nèi)置函數(shù)等，都可以被window對(duì)象調(diào)用。區(qū)別1：在JavaScript中直接使用一個(gè)未聲明的變量會(huì)報(bào)語(yǔ)法錯(cuò)誤，但是使用“window.變量名”的方式則不會(huì)報(bào)錯(cuò)，而是獲得一個(gè)undefined結(jié)果。區(qū)別2：delete關(guān)鍵字僅能刪除window對(duì)象自身的屬性，對(duì)于定義在全局作用域下的變量不起作用。8.彈出對(duì)話框和窗口除了前面學(xué)過(guò)的alert()、prompt()，還有許多其他的屬性和方法。列舉常用的屬性和方法。簡(jiǎn)單演示其具體使用。利用open()方法打開(kāi)窗口，介紹該方法的常用可選參數(shù)。利用close()方法關(guān)閉打開(kāi)的窗口。9.窗口位置和大小介紹window對(duì)象獲取窗口位置和大小的常用屬性和方法。演示如何獲取這些信息。注意window.open()方法打開(kāi)的窗口和選項(xiàng)卡（Tab），F(xiàn)ireFox和Chrome瀏覽器才支持口位置和大小的調(diào)整。10.框架操作回顧HTML中的框架的使用。利用JavaScript來(lái)對(duì)框架進(jìn)行操作。注意JavaScript對(duì)框架操作的限制，無(wú)法讀寫跨域內(nèi)容。11.定時(shí)器介紹常用的定時(shí)器方法，注意setInterval()和setTimeout()的區(qū)別。講解并演示如何取消定時(shí)器。通過(guò)計(jì)數(shù)器案例，演示定時(shí)器的使用。在網(wǎng)頁(yè)中提供兩個(gè)按鈕，一個(gè)用于開(kāi)始計(jì)數(shù)，一個(gè)用于停止計(jì)數(shù)當(dāng)開(kāi)始計(jì)數(shù)時(shí)，啟動(dòng)定時(shí)器，利用定時(shí)器更新頁(yè)面中顯示的數(shù)值。當(dāng)停止計(jì)數(shù)時(shí)，取消定時(shí)器?！景咐肯迺r(shí)秒殺開(kāi)發(fā)背景電子商務(wù)網(wǎng)站，如淘寶、京東，商家經(jīng)常會(huì)策劃促銷活動(dòng)，限時(shí)秒殺是一種常見(jiàn)的手段。案例展示展示案例完成后的效果，在網(wǎng)頁(yè)中顯示倒計(jì)時(shí)。代碼編寫設(shè)計(jì)限時(shí)秒殺的頁(yè)面。通過(guò)JavaScript實(shí)現(xiàn)倒計(jì)時(shí)效果。測(cè)試程序。使學(xué)生對(duì)盒子模型有一個(gè)初步的認(rèn)識(shí)環(huán)節(jié)四：教學(xué)演示學(xué)生練習(xí)35分鐘線下location對(duì)象、案例：定時(shí)跳轉(zhuǎn)、history對(duì)象1.認(rèn)識(shí)URL回顧URL的基本概念。URL的組成：網(wǎng)絡(luò)協(xié)議、服務(wù)器主機(jī)名、端口號(hào)、URI、參數(shù)以及錨點(diǎn)。通過(guò)具體URL演示其組成部分。2.更改URL列舉相關(guān)方法assign()、reload()、replace()，并比較其區(qū)別。通過(guò)具體案例來(lái)實(shí)現(xiàn)URL的更改。3.獲取URL參數(shù)以一個(gè)具體的URL為例，演示如何獲取URL中的參數(shù)。使用“l(fā)ocation.href”也可以更改URL地址。4.history對(duì)象原本用于在瀏覽器中對(duì)訪問(wèn)過(guò)的URL歷史記錄進(jìn)行操作。但用戶的瀏覽歷史是用戶的隱私，且有可能會(huì)泄露網(wǎng)站的一些安全信息。出于安全考慮，history對(duì)象不能直接獲取用戶瀏覽過(guò)的URL。history對(duì)象可以控制瀏覽器前進(jìn)、后退，或跳轉(zhuǎn)到歷史列表中的第幾個(gè)頁(yè)面。通過(guò)案例演示history對(duì)象的使用?！景咐慷〞r(shí)跳轉(zhuǎn)開(kāi)發(fā)背景用戶執(zhí)行一個(gè)操作后，顯示執(zhí)行結(jié)果，在頁(yè)面中停留5秒，然后自動(dòng)跳轉(zhuǎn)到其他頁(yè)面。開(kāi)發(fā)思路通過(guò)定時(shí)器和location來(lái)實(shí)現(xiàn)跳轉(zhuǎn)功能。代碼編寫使學(xué)生掌計(jì)時(shí)器的用法環(huán)節(jié)五：教學(xué)演示學(xué)生練習(xí)45分鐘線下navigator對(duì)象、screen對(duì)象1.navigator對(duì)象該對(duì)象用于獲取瀏覽器的相關(guān)信息。通過(guò)具體代碼演示該對(duì)象常用屬性和方法的使用。更換不同的瀏覽器，觀察輸出結(jié)果的變化。2.screen對(duì)象該對(duì)象用于獲取網(wǎng)頁(yè)所在窗口與屏幕相關(guān)的信息，如寬度和高度等。通過(guò)具體代碼演示該對(duì)象的常用屬性。使學(xué)生能夠掌握navigator對(duì)象、screen對(duì)象用法環(huán)節(jié)六：課程小結(jié)等10分鐘線下回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)?？偨Y(jié)有助于學(xué)生對(duì)本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)七：課程任務(wù)10分鐘線上教師發(fā)放本章相關(guān)資料和素材，學(xué)生進(jìn)行上機(jī)練習(xí)，以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。上機(jī)練習(xí)完成后將報(bào)告通過(guò)平臺(tái)提交給老師。作業(yè)考核評(píng)價(jià)60分鐘線上教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通過(guò)平臺(tái)提交給老師。上機(jī)測(cè)試主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在代碼中容易出錯(cuò)的操作步驟。通過(guò)上機(jī)測(cè)試可以考察同學(xué)對(duì)“計(jì)時(shí)器”等知識(shí)點(diǎn)的掌握程度。通過(guò)測(cè)試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識(shí)反思與改進(jìn)教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)bug的地方，并給與解答。針對(duì)錯(cuò)誤比較多的同學(xué)進(jìn)行一對(duì)一指導(dǎo)?；旌鲜浇虒W(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱DOM課程類型線上+線下授課時(shí)間第7周授課地點(diǎn)*****班級(jí)*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)了解什么是DOM掌握元素與樣式的操作掌握節(jié)點(diǎn)的操作能力目標(biāo)能夠進(jìn)行元素操作。能夠進(jìn)行節(jié)點(diǎn)的操作。能夠獲取元素、添加節(jié)點(diǎn)素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容DOM（DocumentObjectModel）文檔對(duì)象模型可以用于完成HTML和XML文檔的操作。其中，在JavaScript中利用DOM操作HTML元素和CSS樣式則是最常用的功能之一，例如，改變盒子的大小、標(biāo)簽欄的切換、購(gòu)物車等。本章將針對(duì)如何在JavaScript中進(jìn)行DOM操作進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)獲取元素、元素操作、節(jié)點(diǎn)操作教學(xué)難點(diǎn)獲取節(jié)點(diǎn)、節(jié)點(diǎn)追加教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧10分鐘線下回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。在前面講解了BOM對(duì)象的使用，BOM對(duì)瀏覽器進(jìn)行操作，而DOM用來(lái)對(duì)文檔進(jìn)行操作，因此本節(jié)課將會(huì)講解如何利用DOM對(duì)象來(lái)對(duì)文檔進(jìn)行操作。明確學(xué)習(xí)方向。了解什么是DOM，DOM的版本和發(fā)展歷史。掌握HTML節(jié)點(diǎn)樹(shù)的概念，能夠說(shuō)出節(jié)點(diǎn)之間的關(guān)系。認(rèn)識(shí)常用的DOM對(duì)象，能夠區(qū)分元素與節(jié)點(diǎn)。掌握節(jié)點(diǎn)的類型。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教師演示學(xué)生練習(xí)35分鐘線下認(rèn)識(shí)DOM、獲取元素、內(nèi)容操作、屬性操作、樣式操作什么是DOMDOM（DocumentObjectModel），即文檔對(duì)象模型。一套規(guī)范文檔內(nèi)容的通用型標(biāo)準(zhǔn)。簡(jiǎn)要介紹DOM的發(fā)展歷史。簡(jiǎn)要介紹DOM第1級(jí)、第2級(jí)、第3級(jí)的主要變化。主要用途：操作HTML、XML文檔。DOMHTML節(jié)點(diǎn)樹(shù)DOM中為操作HTML文檔提供了一些屬性和方法，將HTML文檔以節(jié)點(diǎn)樹(shù)的形式進(jìn)行操作。演示如何將一段HTML代碼轉(zhuǎn)換成節(jié)點(diǎn)樹(shù)。區(qū)分各個(gè)節(jié)點(diǎn)的關(guān)系，什么是根節(jié)點(diǎn)、子節(jié)點(diǎn)、父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)。DOM對(duì)象的繼承關(guān)系分析document對(duì)象的繼承關(guān)系。分析document.getElementById()返回的元素對(duì)象的繼承關(guān)系。區(qū)分document對(duì)象、Node對(duì)象、Element對(duì)象的區(qū)別和關(guān)系。通過(guò)代碼演示節(jié)點(diǎn)操作與元素操作的區(qū)別。列舉常見(jiàn)節(jié)點(diǎn)類型，通過(guò)代碼演示如何比較兩個(gè)對(duì)象節(jié)點(diǎn)類型是否相同。獲取操作的元素在操作元素前，需要先獲取元素。document提供了一些方法，用來(lái)根據(jù)id、name和class屬性以及標(biāo)簽名的方式獲取元素。通過(guò)代碼演示常用獲取元素方法的使用。注意返回的對(duì)象可能有一個(gè)或多個(gè)。當(dāng)返回的是對(duì)象集合時(shí)，通過(guò)“[下標(biāo)]”的方式來(lái)獲取其中的對(duì)象。補(bǔ)充講解HTML5新增的獲取元素的方法。列舉document中的一些用于獲取元素的屬性。演示這些屬性的使用方法。通過(guò)代碼驗(yàn)證利用document的屬性獲取到的對(duì)象，與通過(guò)方法獲取到的對(duì)象是否是同一個(gè)對(duì)象。除了使用document對(duì)象可以獲取對(duì)象，通過(guò)元素對(duì)象也可以獲取對(duì)象。通過(guò)代碼演示如何通過(guò)元素對(duì)象來(lái)獲取對(duì)象，并注意與document對(duì)象獲取對(duì)象時(shí)的區(qū)別，元素對(duì)象這種方式通常只用于獲取該元素內(nèi)部的對(duì)象。演示如何通過(guò)元素對(duì)象的children屬性來(lái)獲取該元素的子元素。補(bǔ)充講解HTMLCollection與NodeList的區(qū)別。元素內(nèi)容操作列舉Element對(duì)象提供的操作元素內(nèi)容的屬性。列舉document對(duì)象提供的操作元素內(nèi)容的方法。通過(guò)代碼演示這些屬性和方法的具體使用。對(duì)比innerHTML、innerText和textContent屬性的區(qū)別。對(duì)比innerHTML屬性和document.write()方法的區(qū)別。元素屬性操作列舉常用的元素屬性操作的屬性和方法。通過(guò)代碼演示元素屬性的獲取、修改、移除等操作。元素樣式操作演示元素樣式操作的基本語(yǔ)法。講解如何將CSS樣式名轉(zhuǎn)換成style的屬性名。列舉常見(jiàn)的style屬性名。通過(guò)代碼演示如何對(duì)元素的樣式進(jìn)行添加。注意float樣式在不同瀏覽器中的處理方案。演示通過(guò)className屬性對(duì)元素的class屬性進(jìn)行操作。演示通過(guò)classList屬性對(duì)元素的class屬性進(jìn)行操作。通過(guò)具體代碼實(shí)現(xiàn)修改class、切換class、刪除class等效果?！景咐繕?biāo)簽欄切換效果開(kāi)發(fā)背景標(biāo)簽欄在網(wǎng)頁(yè)中使用非常普遍。其優(yōu)勢(shì)在于可以在有限的空間內(nèi)展示多塊的內(nèi)容。案例分析用戶可以通過(guò)標(biāo)簽在多個(gè)內(nèi)容塊之間進(jìn)行切換。代碼實(shí)現(xiàn)編寫HTML頁(yè)面，準(zhǔn)備4個(gè)標(biāo)簽，和對(duì)應(yīng)的4個(gè)<div>內(nèi)容。利用JavaScript獲取元素，并添加鼠標(biāo)滑過(guò)事件。當(dāng)鼠標(biāo)滑過(guò)某個(gè)元素時(shí)，對(duì)所有標(biāo)簽進(jìn)行遍歷，通過(guò)樣式操作實(shí)現(xiàn)標(biāo)簽的選中效果，并控制對(duì)應(yīng)內(nèi)容的顯示或隱藏。測(cè)試程序。使學(xué)生掌握HTML節(jié)點(diǎn)樹(shù)的概念，能夠說(shuō)出節(jié)點(diǎn)之間的關(guān)系。能夠區(qū)分元素與節(jié)點(diǎn)。掌握節(jié)點(diǎn)的類型。環(huán)節(jié)四：教學(xué)演示學(xué)生練習(xí)45分鐘線下獲取節(jié)點(diǎn)、節(jié)點(diǎn)追加、節(jié)點(diǎn)刪除1.獲取節(jié)點(diǎn)列舉獲取節(jié)點(diǎn)的相關(guān)屬性。注意節(jié)點(diǎn)操作與元素操作的區(qū)別，對(duì)比childNodes和children，節(jié)點(diǎn)操作會(huì)包含文本節(jié)點(diǎn)等其他類型的節(jié)點(diǎn)。對(duì)比節(jié)點(diǎn)操作和元素操作，獲取到的是否為同一個(gè)對(duì)象。通過(guò)案例演示節(jié)點(diǎn)的查看獲取。2.節(jié)點(diǎn)追加document對(duì)象提供了一些創(chuàng)建節(jié)點(diǎn)的方法，可以創(chuàng)建元素、文本、屬性等類型的節(jié)點(diǎn)。通過(guò)節(jié)點(diǎn)追加相關(guān)方法，可以在指定節(jié)點(diǎn)的子節(jié)點(diǎn)末尾添加一個(gè)節(jié)點(diǎn)，或者將某個(gè)節(jié)點(diǎn)插入到指定節(jié)點(diǎn)之前。對(duì)于屬性節(jié)點(diǎn)也可以對(duì)其進(jìn)行獲取或設(shè)置操作。通過(guò)代碼演示節(jié)點(diǎn)創(chuàng)建、節(jié)點(diǎn)追加、屬性節(jié)點(diǎn)操作方法的使用。3.節(jié)點(diǎn)刪除列舉常用的節(jié)點(diǎn)刪除方法。通過(guò)代碼演示節(jié)點(diǎn)刪除，以及屬性節(jié)點(diǎn)刪除使學(xué)生掌握節(jié)點(diǎn)方式訪問(wèn)節(jié)點(diǎn)的常用屬性的使用。掌握節(jié)點(diǎn)追加的相關(guān)方法的使用。掌握節(jié)點(diǎn)刪除操作。環(huán)節(jié)五：教學(xué)演示教師指導(dǎo)學(xué)生練習(xí)35分鐘線下動(dòng)手實(shí)踐：購(gòu)物車1.案例分析購(gòu)物車是電子商務(wù)網(wǎng)站的常見(jiàn)功能。利用購(gòu)物車，可以保存用戶選購(gòu)的多件商品。在購(gòu)物車頁(yè)面中，可以進(jìn)行商品數(shù)量的添加與減少，選中與取消選中（選中表示本次購(gòu)買，未選中表示以后再購(gòu)買），從購(gòu)物車中刪除等。顯示每件商品的小計(jì)價(jià)格。顯示購(gòu)物車已選擇商品數(shù)量和總計(jì)價(jià)格。2.準(zhǔn)備工作編寫HTML代碼，設(shè)計(jì)購(gòu)物車的結(jié)構(gòu)和顯示樣式。封裝ShopCart()函數(shù)，第1個(gè)參數(shù)表示class前綴，第2個(gè)參數(shù)表示頁(yè)面打開(kāi)后顯示在購(gòu)物車中的商品數(shù)據(jù)。封裝Find()構(gòu)造函數(shù)，用來(lái)查找元素。3.添加購(gòu)物車商品編寫Cart()構(gòu)造函數(shù)，用來(lái)創(chuàng)建購(gòu)物車。將需要操作的對(duì)象保存到成員屬性中，方便在成員方法中使用。在Ctotype對(duì)象中編寫add()方法，用來(lái)向購(gòu)物車中添加一件商品。讀取網(wǎng)頁(yè)中的模板元素，新添加的商品基于模板克隆。編寫Item()構(gòu)造函數(shù)，用來(lái)創(chuàng)建購(gòu)物車中的商品對(duì)象。通過(guò)成員屬性data保存商品數(shù)據(jù)（數(shù)量、價(jià)格等）。在Itotype對(duì)象中編寫updateSubtotal()方法，用來(lái)獲取小計(jì)。4.修改商品修改商品包括商品數(shù)量修改以及刪除商品操作。為元素添加事件，通過(guò)調(diào)用對(duì)象的屬性和方法完成具體操作。為商品數(shù)量按鈕添加事件，每當(dāng)商品數(shù)量發(fā)生變化時(shí)，更新小計(jì)和總計(jì)。為商品刪除鏈接添加事件，每當(dāng)商品刪除時(shí)，更新總計(jì)。5.實(shí)現(xiàn)總計(jì)、全選與刪除在Ctotype對(duì)象中編寫updateTotal()方法，用于更新購(gòu)買數(shù)量和總計(jì)。實(shí)現(xiàn)全選功能、刪除商品功能。拓展：以后可以學(xué)習(xí)artTemplate模板引擎來(lái)更方便的處理頁(yè)面代碼。使學(xué)生掌握 掌握DOM操作的綜合運(yùn)用。 掌握購(gòu)物車功能的開(kāi)發(fā)。環(huán)節(jié)六：課程小結(jié)等10分鐘線下涵蓋本單元所有教學(xué)內(nèi)容。老師對(duì)本任務(wù)所學(xué)的基本知識(shí)點(diǎn)及操作方法進(jìn)行總結(jié)。總結(jié)有助于學(xué)生對(duì)本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)八：課程任務(wù)10分鐘線上教師發(fā)放測(cè)試題目及案例素材，學(xué)生進(jìn)行上機(jī)測(cè)試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)的掌握情況。測(cè)試完成后將作品通過(guò)平臺(tái)提交給老師。上機(jī)測(cè)試主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在代碼中容易出錯(cuò)的操作步驟。通過(guò)上機(jī)測(cè)試可以考察同學(xué)對(duì)“元素的浮動(dòng)屬性”、“清除浮動(dòng)”及“overflow屬性”使用的熟練程度，以及對(duì)如何使用“元素的定位屬性”、“元素的類型與轉(zhuǎn)換”等知識(shí)點(diǎn)的掌握程度。作業(yè)考核評(píng)價(jià)60分鐘線上教師對(duì)學(xué)生的提交的上機(jī)測(cè)試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)bug的地方，并給與解答。通過(guò)測(cè)試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識(shí)反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目（任務(wù)）名稱JavaScript事件課程類型線上+線下授課時(shí)間第8周授課地點(diǎn)*****班級(jí)*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)（用詞表述要準(zhǔn)確，可測(cè)量、可評(píng)價(jià)，建議根據(jù)布魯姆教育目標(biāo)分類法）素質(zhì)目標(biāo)包含課程思政內(nèi)容知識(shí)目標(biāo)掌握事件的綁定方式熟悉事件對(duì)象的使用掌握常用事件的實(shí)現(xiàn)能力目標(biāo)能夠進(jìn)行事件綁定。能夠獲取事件對(duì)象能夠?qū)⑹录?duì)象應(yīng)在網(wǎng)頁(yè)中素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容事件被看作是JavaScript與網(wǎng)頁(yè)之間交互的橋梁，當(dāng)事件發(fā)生時(shí)，可以通過(guò)JavaScript代碼執(zhí)行相關(guān)的操作。例如，用戶可以通過(guò)鼠標(biāo)拖拽登錄框，改變登錄框的顯示位置；或者在閱讀文章時(shí)，選中文本后自動(dòng)彈出分享、復(fù)制選項(xiàng)。本章將對(duì)JavaScript中的事件進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)事件的綁定方式、事件對(duì)象、鼠標(biāo)事件、鍵盤事件教學(xué)難點(diǎn)事件的綁定方式、頁(yè)面事件、鼠標(biāo)事件教學(xué)重難點(diǎn)解決方法措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示：任務(wù)1:觀看2個(gè)視頻（共計(jì)15分鐘）任務(wù)2：完成課前測(cè)試，共計(jì)5個(gè)單項(xiàng)選擇題（共計(jì)5分鐘）發(fā)布時(shí)間：發(fā)布時(shí)間：202*年2月21日，截至?xí)r間：202*年06月30日。2.課前學(xué)習(xí)任務(wù)完成情況分析提示（實(shí)施完成后填寫）：本次課前學(xué)習(xí)任務(wù)共有人完成視頻觀看，個(gè)同學(xué)未觀看視頻。本次課前測(cè)試共有個(gè)同學(xué)參加測(cè)試，從測(cè)試的結(jié)果來(lái)看，XX知識(shí)點(diǎn)掌握情況較好，XX知識(shí)點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過(guò)程教學(xué)環(huán)節(jié)（線上/線下）教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一：課前任務(wù)20分鐘線上觀看視頻完成課前測(cè)試在線答疑為上課做準(zhǔn)備，對(duì)課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二：課前回顧10分鐘線下回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。在前面的課程中，許多案例的實(shí)現(xiàn)都離不開(kāi)事件，例如鼠標(biāo)單擊onclick、下拉菜單發(fā)生改變onchange、鼠標(biāo)滑過(guò)onmouseover等。利用事件可以實(shí)現(xiàn)各種交互效果。本節(jié)將圍繞事件進(jìn)行詳細(xì)講解。明確學(xué)習(xí)方向。了解事件處理程序、事件驅(qū)動(dòng)式、事件流的基本概念。掌握早期版本IE瀏覽器與標(biāo)準(zhǔn)瀏覽器在事件處理上的差別。掌握如何獲取事件對(duì)象。掌握事件對(duì)象的常用屬性和方法。掌握案例“緩動(dòng)的小球”開(kāi)發(fā)。對(duì)線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對(duì)線上所學(xué)知識(shí)的理解。在此基礎(chǔ)上老師深入講解，學(xué)生進(jìn)行操作，使學(xué)生的知識(shí)與能力得到進(jìn)一步提升。環(huán)節(jié)三：教師演示學(xué)生練習(xí)35分鐘線下事件概述、事件的綁定方式、獲取事件對(duì)象、常用屬性和方法事件概述事件可以用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)交互。事件處理程序指的就是JavaScript為響應(yīng)用戶行為所執(zhí)行的程序代碼。JavaScript可以用來(lái)開(kāi)發(fā)事件驅(qū)動(dòng)式的程序。當(dāng)事件發(fā)生時(shí)，有一個(gè)事件流機(jī)制。有事件捕獲和事件冒泡兩種形式。事件的綁定方式行內(nèi)綁定式：通過(guò)HTML標(biāo)簽的屬性實(shí)現(xiàn)。動(dòng)態(tài)綁定式：為DOM元素對(duì)象添加事件處理程序。關(guān)于行內(nèi)綁定式和動(dòng)態(tài)綁定式，在前面都已經(jīng)用過(guò)。注意在事件處理程序中，this的指向問(wèn)題。以上兩種方式的局限：同一個(gè)DOM對(duì)象的同一個(gè)事件只能有一個(gè)事件處理程序。事件監(jiān)聽(tīng)：可以為同一個(gè)DOM對(duì)象添加多個(gè)事件處理程序。對(duì)比早期版本的IE瀏覽器和標(biāo)準(zhǔn)瀏覽器的區(qū)別。獲取事件對(duì)象事件對(duì)象類似