Web前端開發(fā)（JavaScript+jQuery）【教案】《WEB前端技術混合式教學設計方案》單元設計

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

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