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

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