版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
寧波城市職業(yè)技術(shù)學(xué)院混合式教學(xué)設(shè)計(jì)方案(2023~2024學(xué)年第2學(xué)期)課程名稱:WEB前端技術(shù) 課程負(fù)責(zé)人: **** 開課學(xué)院(部):******************** 聯(lián)系電話:*************** 教務(wù)處制二○二*年*月課程基本情況網(wǎng)絡(luò)教學(xué)平臺超星學(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é)期)序號周次課時(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對象線上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測試與作品提交線上1+線下3混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱JavaScript入門課程類型線上+線下授課時(shí)間第1周授課地點(diǎn)*****班級*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(biāo)熟悉JavaScript的用途和發(fā)展?fàn)顩r理解JavaScript與ECMAScript的關(guān)系掌握J(rèn)avaScript的基本使用方法能力目標(biāo)掌握變量的定義與賦值掌握數(shù)據(jù)類型與運(yùn)算符的使用條件語句的使用素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團(tuán)隊(duì)合作意識具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容在Web前端開發(fā)中,HTML、CSS和JavaScript是開發(fā)一個(gè)網(wǎng)頁所必備的技術(shù)。在掌握了HTML和CSS技術(shù)之后,已經(jīng)能夠編寫出各式各樣的網(wǎng)頁了,但若想讓網(wǎng)頁具有良好的交互性,JavaScript就是一個(gè)極佳的選擇。本章將介紹JavaScript的基本概念,變量定義、數(shù)據(jù)類型、運(yùn)算符等基礎(chǔ)語法進(jìn)行詳細(xì)講解。并通過實(shí)踐案例來體驗(yàn)JavaScript編程。教學(xué)重點(diǎn)JavaScript引入方式、語法風(fēng)格、注釋、輸出語句教學(xué)難點(diǎn)數(shù)據(jù)類型轉(zhuǎn)換、字符串/賦值/邏輯運(yùn)算符、運(yùn)算符優(yōu)先級教學(xué)重難點(diǎn)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑指定安裝軟件為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧10分鐘線下1.什么是JavaScript;2.JavaScript的由來與發(fā)展;3.JavaScript的特點(diǎn);4.開發(fā)工具介紹什么是JavaScript作用:開發(fā)交互式的Web頁面。分工:HTML負(fù)責(zé)結(jié)構(gòu),CSS負(fù)責(zé)樣式,JavaScript負(fù)責(zé)行為。JavaScript可以嵌入到網(wǎng)頁中。應(yīng)用:演示JavaScript在網(wǎng)頁開發(fā)中的應(yīng)用,如輪播圖、選項(xiàng)卡、地圖、表單驗(yàn)證、百度搜索框等。優(yōu)點(diǎn):可以使網(wǎng)頁的互動(dòng)性更強(qiáng),用戶體驗(yàn)更好。JavaScript的由來與發(fā)展由來:1995年網(wǎng)景公司開發(fā)的LiveScript。名稱改變:借用Java名氣,改名為JavaScript,兩者其實(shí)是不同的語言。設(shè)計(jì)初衷:嵌入到網(wǎng)頁中的編程語言,用來控制瀏覽器的行為。濫用現(xiàn)象:廣告、彈窗、惡意代碼、安全漏洞。里程碑:Ajax技術(shù)的流行與發(fā)展。未來發(fā)展:服務(wù)器端Node.js、移動(dòng)端開發(fā)、全棧開發(fā)。JavaScript的特點(diǎn)JavaScript是腳本語言,具有腳本語言的一些特點(diǎn):簡單、易學(xué)、易用。JavaScript可以跨平臺,開發(fā)和使用都非常方便,支持PC和移動(dòng)端。JavaScript支持面向?qū)ο?,誕生了許多庫和框架,提高開發(fā)速度,能夠用來解決復(fù)雜問題。開發(fā)工具——瀏覽器介紹常見的瀏覽器和其開發(fā)廠商。了解常見瀏覽器的特點(diǎn)。注意老版本IE瀏覽器的市場占有率和兼容性問題。重點(diǎn)介紹標(biāo)準(zhǔn)瀏覽器——Chrome、火狐。介紹瀏覽器的引擎,并列舉常見瀏覽器和與之相對應(yīng)的引擎。理解瀏覽器引擎與瀏覽器、開發(fā)人員的關(guān)系。熟悉瀏覽器的兼容問題。熟悉Chrome瀏覽器的開發(fā)者工具。開發(fā)工具——代碼編輯器了解常見的代碼編輯器。選擇一種代碼編輯器進(jìn)行詳細(xì)講解。掌握代碼編輯器的安裝和使用方法,并掌握基本的配置。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教學(xué)演示學(xué)生練習(xí)30分鐘線下創(chuàng)建一個(gè)JavaScript程序創(chuàng)建網(wǎng)頁并設(shè)置編碼創(chuàng)建hello.html文件。將編碼設(shè)置為UTF-8無BOM格式。補(bǔ)充講解常見字符集、編碼格式,如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è)字符串。講解語句的概念,以及“;”的作用。測試網(wǎng)頁程序使用瀏覽器打開hello.html。觀察程序運(yùn)行結(jié)果??偨Y(jié)JavaScript基本語法規(guī)則JavaScript嚴(yán)格區(qū)分大小寫,演示將alert改成Alert觀察效果。JavaScript對空格、換行、縮進(jìn)不敏感,一條語句可以分成多行書寫。演示將alert后面的括號“()”換到下一行,觀察程序是否正確執(zhí)行。JavaScript的分號可以省略,但要注意什么情況下可以省略,什么情況下不能省略。并指出代碼風(fēng)格的重要性,不建議省略分號。使學(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í)相對路徑、絕對路徑、URL地址的概念。比較外鏈?zhǔn)胶颓度胧降膬?yōu)缺點(diǎn),以及適合的應(yīng)用場景。JavaScript引入方式——行內(nèi)式了解行內(nèi)式的代碼書寫方式。了解行內(nèi)式的應(yīng)用場景。JavaScript引入方式——異步加載講解JavaScript在網(wǎng)頁中的加載順序,以及代碼阻塞的問題。演示<script>的屬性async和defer的作用,比較兩者的區(qū)別。掌握J(rèn)avaScript的三種引入方式環(huán)節(jié)五:教學(xué)演示學(xué)生練習(xí)20分鐘線下JavaScript的常用輸出語句;JavaScript中在注釋的使用;JavaScript中數(shù)據(jù)的簡單運(yùn)算;注釋理解注釋的作用,為什么要在代碼中使用注釋。演示單行注釋的基本代碼。演示多行注釋的基本代碼,注意嵌套問題。比較單行注釋和多行注釋,掌握各自的特點(diǎn)。6.數(shù)據(jù)與運(yùn)算演示如何利用JavaScript實(shí)現(xiàn)加、減、乘、除運(yùn)算。演示如何利用JavaScript比較兩個(gè)數(shù)字的大小。熟悉字符串的概念,演示如何使用字符串來保存數(shù)據(jù)。演示使用比較運(yùn)算符“==”比較兩個(gè)字符串是否相同。演示字符串與數(shù)字拼接的細(xì)節(jié)問題,“+”針對數(shù)字和字符串操作的區(qū)別。演示如何根據(jù)比較的不同結(jié)果,執(zhí)行不同的代碼。掌握J(rèn)avaScript的常用輸出語句;學(xué)會是還有注釋;掌握簡單的數(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)換;條件語句的使用;環(huán)節(jié)七:課程小結(jié)等5分鐘線下涵蓋本單元所有教學(xué)內(nèi)容。老師對本任務(wù)所學(xué)的基本知識及軟件操作方法進(jìn)行總結(jié)。總結(jié)有助于學(xué)生對本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)八:課程任務(wù)5分鐘線上教師發(fā)放測試題目及案例素材,學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。測試完成后將作品通過平臺提交給老師?!緞?dòng)手實(shí)踐】條件語句的實(shí)現(xiàn)--學(xué)生成績等級的實(shí)現(xiàn)通過測試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識作業(yè)考核評價(jià)60分鐘線上教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)錯(cuò)誤的地方,并給與解答。有問題的同學(xué)點(diǎn)對點(diǎn)溝通指導(dǎo)反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱JavaScript基礎(chǔ)課程類型線上+線下授課時(shí)間第2周授課地點(diǎn)*****班級*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(biāo)1.掌握基本處理流程。2.掌握幾種常用的循環(huán)語句能力目標(biāo)1.掌握流程控制語句的使用 2.掌握變量的基本使用素質(zhì)目標(biāo)1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語言表達(dá)能力,以及規(guī)范書寫代碼的習(xí)慣;4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道教學(xué)內(nèi)容JavaScript條件語句多分支判斷語句的使用JavaScript循環(huán)語句(while,dowhile,for)for循環(huán)嵌套語句的使用教學(xué)重點(diǎn)ifelseif,switch的異同dowhile,while語句的異同for循環(huán)嵌套語句的使用教學(xué)難點(diǎn)ifelseif,switch的異同dowhile,while語句的異同for循環(huán)嵌套語句的使用教學(xué)重難點(diǎn)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧5分鐘線下1.JavaScript表達(dá)式的使用;2.JavaScript的特點(diǎn);3.開發(fā)工具的使用(1)思考如何將現(xiàn)實(shí)生活中的判斷(假如..否則…等)以及只要符合某要求就重復(fù)執(zhí)行某些操作的關(guān)系在程序中表示出來。流程控制語句:順序、選擇和循環(huán)。選擇結(jié)構(gòu)語句指的就是需要對一些條件進(jìn)行判斷,從而決定執(zhí)行指定的代碼。循環(huán)語句就是可以實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行,如計(jì)算給定區(qū)間內(nèi)的偶數(shù)等。(2)明確學(xué)習(xí)方向。掌握選擇結(jié)構(gòu)語句if、switch的使用方法。掌握循環(huán)結(jié)構(gòu)語句while、do…while、for的使用方法。掌握跳轉(zhuǎn)語句break、continue的使用方法。重點(diǎn)介紹標(biāo)準(zhǔn)瀏覽器——Chrome、火狐。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教學(xué)演示學(xué)生練習(xí)25分鐘線下1.選擇結(jié)構(gòu)語句分類:單分支(if)、雙分支(if…else)和多分支(if…elseif…else),switch也屬于多分支。2.選擇結(jié)構(gòu)——單分支if作用:當(dāng)滿足某種條件時(shí),就進(jìn)行某種處理。演示單分支的語法結(jié)構(gòu),繪制流程圖,以及示例代碼。3選擇結(jié)構(gòu)——雙分支if…else作用:當(dāng)滿足某種條件時(shí),就進(jìn)行某種處理,否則進(jìn)行另一種處理。演示雙分支的語法結(jié)構(gòu),繪制流程圖,以及示例代碼。主要掌握數(shù)據(jù)類型及轉(zhuǎn)換;條件語句的使用;環(huán)節(jié)四:教學(xué)演示學(xué)生練習(xí)20分鐘線下4.選擇結(jié)構(gòu)——多分支if…elseif…else作用:針對不同情況進(jìn)行不同的處理。通過多分支語句,為學(xué)生的考試成績劃分等級,如優(yōu)秀、良好、及格等。演示多分支的語法結(jié)構(gòu),繪制流程圖。注意“elseif”中間有空格,如果遺漏,會造成語法錯(cuò)誤。5.選擇結(jié)構(gòu)——多分支switchswitch語句也是多分支語句,功能與if系列條件語句相同。switch選擇結(jié)構(gòu)語句的特點(diǎn)就是代碼更加清晰簡潔、便于閱讀。區(qū)分switch與if的不同。switch只能針對某個(gè)表達(dá)式的值進(jìn)行判斷,從而決定執(zhí)行哪一段代碼。注意在switch中,break和default的作用,以及在省略情況下的細(xì)節(jié)問題。主要掌握數(shù)據(jù)類型及轉(zhuǎn)換;條件語句的使用;環(huán)節(jié)五:教學(xué)演示學(xué)生練習(xí)25分鐘線下循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語句循環(huán)結(jié)構(gòu)語句作用:實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行,例如連續(xù)輸出1~100之間的數(shù)字。。分類:while、do…while和for循環(huán)語句。循環(huán)結(jié)構(gòu)——while講解while的語法結(jié)構(gòu),繪制流程圖。通過編寫代碼演示while的應(yīng)用。應(yīng)注意,若循環(huán)條件永遠(yuǎn)為true時(shí),則會出現(xiàn)死循環(huán)。案例:將while與if結(jié)合起來,實(shí)現(xiàn)計(jì)算100以內(nèi)的奇數(shù)和。循環(huán)結(jié)構(gòu)——do…while講解do…while的語法結(jié)構(gòu),繪制流程圖。比較while與do…while的異同。while是先判斷條件后執(zhí)行循環(huán)體,而do...while會無條件執(zhí)行一次循環(huán)體后再判斷條件,決定是否執(zhí)行下次循環(huán)。掌握循環(huán)語句的幾種使用方法環(huán)節(jié)六:教學(xué)演示學(xué)生練習(xí)15分鐘線下循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語句跳轉(zhuǎn)語句作用:實(shí)現(xiàn)程序執(zhí)行過程中的流程跳轉(zhuǎn)。分類:break和continue語句。break:在switch中終止當(dāng)前語句的執(zhí)行,或在循環(huán)語句中跳出循環(huán)。continue語句用于結(jié)束本次循環(huán)的執(zhí)行,開始下一輪循環(huán)的執(zhí)行操作。以在for循環(huán)中跳出為例,編寫代碼演示break的使用。將break換成continue,觀察程序的運(yùn)行結(jié)果。break可在死循環(huán)中使用,當(dāng)滿足一定條件時(shí)跳出循環(huán)。掌握循環(huán)語句的幾種使用方法環(huán)節(jié)七:教學(xué)演示學(xué)生練習(xí)35分鐘線下循環(huán)語句的應(yīng)用【案例】打印金字塔介紹for語句的用法分析案例的功能和實(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。編寫代碼完成案例的開發(fā)通過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>”來進(jìn)行換行。通過瀏覽器訪問測試,觀察運(yùn)行結(jié)果。學(xué)以致用,使學(xué)生掌握循環(huán)語句的使用。環(huán)節(jié)八:課程小結(jié)等5分鐘線下涵蓋本單元所有教學(xué)內(nèi)容。老師對本任務(wù)所學(xué)的基本知識及軟件操作方法進(jìn)行總結(jié)。總結(jié)有助于學(xué)生對本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)九:課程任務(wù)5分鐘線上教師發(fā)放測試題目及案例素材,學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。測試完成后將作品通過平臺提交給老師。【動(dòng)手實(shí)踐】九九乘法表的實(shí)現(xiàn)通過測試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識作業(yè)考核評價(jià)60分鐘線上教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)錯(cuò)誤的地方,并給與解答。有問題的同學(xué)點(diǎn)對點(diǎn)溝通指導(dǎo)反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱數(shù)組課程類型線上+線下授課時(shí)間第3周授課地點(diǎn)*****班級*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(biāo)掌握數(shù)組的創(chuàng)建掌握數(shù)組的訪問與遍歷掌握數(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)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團(tuán)隊(duì)合作意識具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容數(shù)組是JavaScript中最常用的數(shù)據(jù)類型之一,它屬于對象類型中的內(nèi)置對象。相比前面學(xué)習(xí)過的基本數(shù)據(jù)類型,一個(gè)數(shù)組類型的變量可以保存一批數(shù)據(jù),并且數(shù)據(jù)可以是任意類型,例如字符串、數(shù)字、數(shù)組或?qū)ο蟮?。因此,利用?shù)組可以很方便地對數(shù)據(jù)進(jìn)行分類和批量處理。本章將圍繞數(shù)組的使用進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)創(chuàng)建數(shù)組、數(shù)組的訪問與遍歷、元素的添加與修改、二維數(shù)組的創(chuàng)建與遍歷、數(shù)組檢索方法教學(xué)難點(diǎn)數(shù)組的訪問與遍歷、二維數(shù)組的創(chuàng)建與遍歷、數(shù)組棧方法、數(shù)組檢索方法教學(xué)重難點(diǎn)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧10分鐘線下提出需求,導(dǎo)入學(xué)習(xí)任務(wù)(1)回顧一下數(shù)據(jù)類型在程序開發(fā)中起到的作用。針對需要保存的數(shù)據(jù)的特點(diǎn),選擇合適的數(shù)據(jù)類型?;緮?shù)據(jù)類型只能保存一個(gè)數(shù)據(jù),復(fù)合數(shù)據(jù)類型則適合對數(shù)據(jù)進(jìn)行分類或批量處理,如一個(gè)班級的學(xué)生信息,包括每個(gè)學(xué)生的名字、性別、年齡、愛好等。(2)明確學(xué)習(xí)方向。數(shù)組的分類。數(shù)組的定義。數(shù)組的訪問。數(shù)組的遍歷。數(shù)組的刪除。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教師演示學(xué)生練習(xí)35分鐘線下初識數(shù)組、創(chuàng)建數(shù)組、數(shù)組的基本操作以實(shí)例形式進(jìn)行知識講解理解數(shù)組的用處在學(xué)習(xí)數(shù)組之前,若要操作一批數(shù)據(jù),如一個(gè)班級的所有學(xué)生,為了保存他們的相關(guān)信息,則每一條信息都需要一個(gè)變量去保存。缺點(diǎn):麻煩,容易出錯(cuò),又不合理。數(shù)組就是一個(gè)可以存儲一組或一系列數(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ù)字表示,從0開始遞增。“值”為元素的內(nèi)容,可以是任意類型的數(shù)據(jù)?!八饕聵?biāo)”和“值”之間存在一種對應(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)存分配圖,或通過繪制的方式一一講解。主要適用于利用位置(0、1、2……)來標(biāo)識數(shù)組元素的情況。數(shù)組的索引下標(biāo)也可以自己指定。5.多維數(shù)組一維數(shù)組就是指數(shù)組的“值”是非數(shù)組類型的數(shù)據(jù)。二維數(shù)組是指數(shù)組元素的“值”是一個(gè)一維數(shù)組。多維數(shù)組指的是一個(gè)數(shù)組元素的值又是一個(gè)數(shù)組(一維、二維、三維…)。Array對象創(chuàng)建數(shù)組通過newArray()創(chuàng)建數(shù)組。數(shù)組元素可以是字符串、數(shù)值、混合型等??梢詣?chuàng)建一個(gè)空數(shù)組。通過console.log()查看創(chuàng)建的數(shù)組的下標(biāo)。使用“[]”語法創(chuàng)建數(shù)組對比newArray()和“[]”兩種方式的區(qū)別。獲取數(shù)組長度訪問Array對象的length屬性獲取數(shù)組元素個(gè)數(shù)。對于保存了undefined的元素,也會占用元素的個(gè)數(shù)。設(shè)置數(shù)組元素通過數(shù)組的length屬性還可以設(shè)置數(shù)組元素個(gè)數(shù)。對于空數(shù)組,設(shè)置length屬性后,會占用存儲位置。如果設(shè)置length屬性小于數(shù)組原有長度,則多余元素舍棄。如果length屬性大于數(shù)組原有長度,則不足的存儲位置會被占用。訪問數(shù)組元素通過“數(shù)組名[下標(biāo)]”的方式來獲取指定索引下標(biāo)數(shù)組元素的值。使用console.log()將訪問的數(shù)組元素打印到控制臺,查看效果。遍歷數(shù)組使用for的方式,利用自增的變量“i”訪問數(shù)組中的每一個(gè)元素。使用for…in的方式實(shí)現(xiàn)數(shù)組的遍歷。使用for…of的方式實(shí)現(xiàn)數(shù)組的遍歷。對比for…in和for…of的區(qū)別。添加與修改通過“數(shù)組名[下標(biāo)]”的方式對數(shù)組中的元素進(jìn)行添加或修改。當(dāng)下標(biāo)不連續(xù)時(shí),將會被空存儲位置暫用。刪除元素值通過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分鐘線下常見二維數(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ù)組的元素即可。通過案例二維數(shù)組求和演示二維數(shù)組的創(chuàng)建和遍歷指出在開發(fā)中為多維空數(shù)組添加元素時(shí),要保證添加的元素已被定義為數(shù)組,防止程序報(bào)錯(cuò)。為便于閱讀、調(diào)試和維護(hù),推薦使用三維及以下的數(shù)組保存數(shù)據(jù)。3.【案例】二維數(shù)組轉(zhuǎn)置分析什么是二維數(shù)組轉(zhuǎn)置。通過畫圖的方式,演示二維數(shù)組的行、列矩陣效果。演示如何進(jìn)行行列位置交換。先利用兩層for循環(huán)遍歷二維數(shù)組中所有的元素。準(zhǔn)備一個(gè)空數(shù)組,用于保存轉(zhuǎn)置后的數(shù)組結(jié)果。在內(nèi)層for循環(huán)開始前,為保存結(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)域中較簡單的排序算法。實(shí)現(xiàn)原理:在冒泡排序的過程中,按照要求從小到大排序或從大到小排序,不斷比較數(shù)組中相鄰兩個(gè)元素的值,較小或較大的元素前移。展示或繪制冒泡法的過程圖??偨Y(jié)冒泡排序的規(guī)律:冒泡排序比較的輪數(shù)是數(shù)組長度減1,每輪比較的對數(shù)等于數(shù)組的長度減當(dāng)前的輪數(shù)。演示冒泡排序法的代碼實(shí)現(xiàn)。5.插入排序插入排序是一種直觀的簡單排序算法。實(shí)現(xiàn)原理:通過構(gòu)建有序數(shù)組元素的存儲,對于未排序數(shù)組元素的,在已排序的數(shù)組中從最后一個(gè)元素向第一個(gè)元素遍歷,找到相應(yīng)位置并插入。其中,待排序數(shù)組的第1個(gè)元素會被看作是一個(gè)有序的數(shù)組,從第2個(gè)至最后一個(gè)元素會被看作是一個(gè)無序數(shù)組。展示或繪制快速法的過程圖??偨Y(jié)插入排序的規(guī)律:插入排序比較的次數(shù)與無序數(shù)組的長度相等,每次無序數(shù)組元素與有序數(shù)組中的所有元素進(jìn)行比較,比較后找到對應(yīng)位置插入,最后即可得到一個(gè)有序的數(shù)組。演示插入排序法的代碼實(shí)現(xiàn)。使學(xué)生掌握常見二維數(shù)組操作、數(shù)組排序環(huán)節(jié)五:教學(xué)演示教師指導(dǎo)學(xué)生練習(xí)35分鐘線下【案例】猴子選大王案例分析介紹“猴子選大王”的游戲規(guī)則。代碼實(shí)現(xiàn)將可控的量分為“猴子的總數(shù)”和“每次踢出第幾只猴子”。利用for循環(huán),根據(jù)猴子的總數(shù)來創(chuàng)建猴子數(shù)組。遍歷猴子數(shù)組,利用shift()方法從前往后依次取出猴子。判斷當(dāng)前未達(dá)到踢出猴子的數(shù)量時(shí),通過push()方法將前面取出的猴子放入數(shù)組尾部。如果達(dá)到了數(shù)量,則跳過不進(jìn)行處理,從而實(shí)現(xiàn)踢出猴子。在循環(huán)結(jié)束直到數(shù)組的長度等于1時(shí),最后剩下的這個(gè)猴子就是我們要的結(jié)果了。學(xué)以致用環(huán)節(jié)六:課程小結(jié)等10分鐘線下涵蓋本單元所有教學(xué)內(nèi)容??偨Y(jié)有助于學(xué)生對本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)七:課程任務(wù)10分鐘線上教師發(fā)放測試題目及案例素材,學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。測試完成后將作品通過平臺提交給老師?!緞?dòng)手實(shí)踐】省份城市的三級聯(lián)動(dòng)通過測試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識作業(yè)考核評價(jià)60分鐘線上教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)錯(cuò)誤的地方,并給與解答。有問題的同學(xué)點(diǎn)對點(diǎn)溝通指導(dǎo)反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱函數(shù)課程類型線上+線下授課時(shí)間第4周授課地點(diǎn)*****班級*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(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)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團(tuán)隊(duì)合作意識具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容函數(shù)是JavaScript中最常用的功能之一,它可以避免相同功能代碼的重復(fù)編寫,將程序中的代碼模塊化,提高程序的可讀性,減少開發(fā)者的工作量,便于后期的維護(hù)。例如,在計(jì)算班級學(xué)生的平均分時(shí),每計(jì)算一個(gè)學(xué)生的平均分,都要編寫一段功能相同的代碼,這樣會導(dǎo)致代碼量大大增加。為此,JavaScript提供了函數(shù),通過函數(shù)可以將計(jì)算平均分的代碼進(jìn)行封裝,在使用時(shí)直接調(diào)用即可,無需重復(fù)編寫。本章將針對函數(shù)的內(nèi)容進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)函數(shù)的創(chuàng)建和使用、變量的作用域、匿名與回調(diào)函數(shù)、閉包函數(shù)教學(xué)難點(diǎn)函數(shù)嵌套與作用域鏈、閉包函數(shù)教學(xué)重難點(diǎn)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧10分鐘線下回顧上節(jié)課,引出本節(jié)課內(nèi)容(1)對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。(2)回顧前面學(xué)過的內(nèi)容,引出本節(jié)課主題。前面學(xué)習(xí)了PHP的一些基本語法,包括變量、表達(dá)式、數(shù)據(jù)類型、運(yùn)算符、流程控制語句等,這些是最基本又很重要的內(nèi)容。然后學(xué)習(xí)了數(shù)組,用來存儲和管理大量的數(shù)據(jù)。接下來,本節(jié)將針對函數(shù)進(jìn)行詳細(xì)講解,掌握函數(shù)的具體使用細(xì)節(jié),使程序代碼模塊化,提高程序的可讀性和后期的可維護(hù)性。(3)明確學(xué)習(xí)方向。能夠充分理解函數(shù)的概念。能夠獨(dú)立的完成函數(shù)的定義。熟練掌握函數(shù)的各種參數(shù)設(shè)置。理解函數(shù)中變量的作用域機(jī)制。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教師演示學(xué)生練習(xí)35分鐘線下初識函數(shù)、參數(shù)設(shè)置、函數(shù)的調(diào)用、變量的作用域初識函數(shù)回顧之前學(xué)過的函數(shù),如parseFlost()、isNan()、parseInt()等?;仡欀熬帉戇^的自定義函數(shù)。請學(xué)生講出自己對函數(shù)的理解,引出函數(shù)的含義、作用、以及其好處??偨Y(jié)自定義函數(shù)的語法結(jié)構(gòu),以及返回值。注意函數(shù)的命名規(guī)則,不能使用數(shù)字開頭。編寫代碼實(shí)現(xiàn)求最大值、最小值等功能。編寫一個(gè)$()函數(shù),封裝document.getElementById()方法,從而更方便的獲取DOM對象。函數(shù)的參數(shù)設(shè)置按照參數(shù)劃分,函數(shù)分為:無參函數(shù)和有參函數(shù)。理解形參、實(shí)參的概念,演示函數(shù)參數(shù)的傳遞。函數(shù)的形參可以不設(shè)置,在函數(shù)內(nèi)通過arguments即可獲取調(diào)用函數(shù)時(shí)傳遞的具體參數(shù)。通過arguments.length可獲取參數(shù)的數(shù)量。在ES6中,定義函數(shù)的語法得到了加強(qiáng),可以為函數(shù)參數(shù)設(shè)置默認(rèn)值,或在參數(shù)數(shù)量不確定時(shí),利用“…變量名”的方式動(dòng)態(tài)的接收參數(shù)。函數(shù)的調(diào)用講解函數(shù)調(diào)用的語法,實(shí)參列表的概念。通過求和的案例,演示函數(shù)的調(diào)用,以及arguments的使用。提出問題:函數(shù)的聲明與調(diào)用的順序,可以先調(diào)用后聲明。【案例】字符串大小寫轉(zhuǎn)換效果分析分析案例的實(shí)現(xiàn)效果,通過單擊網(wǎng)頁上的按鈕,實(shí)現(xiàn)對文本框內(nèi)的文本進(jìn)行大寫、小寫轉(zhuǎn)換,將轉(zhuǎn)換結(jié)果顯示在另一個(gè)文本框中。代碼實(shí)現(xiàn)編寫基本頁面。為按鈕添加deal()事件函數(shù),用于單擊后調(diào)用函數(shù)執(zhí)行轉(zhuǎn)換操作。為deal()函數(shù)傳遞參數(shù)(upper、lower),表示執(zhí)行轉(zhuǎn)大寫還是轉(zhuǎn)小寫的操作。在deal()函數(shù)中,通過switch判斷操作類型。分析如何實(shí)現(xiàn)字符串大小寫轉(zhuǎn)換,利用str.toLowerCase()、str.toUpperCase()方法來實(shí)現(xiàn)具體功能。使學(xué)生對函數(shù)、參數(shù)設(shè)置、函數(shù)的調(diào)用、變量的作用域有一個(gè)初步的認(rèn)識環(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)用的前面,將無法被調(diào)用。匿名函數(shù)作用:沒有名稱的函數(shù),可避免全局變量命名污染即函數(shù)沖突問題。演示匿名函數(shù)的3種實(shí)現(xiàn)方式,方式1:省略函數(shù)名,方式2:自調(diào)用,方式3:處理事件時(shí)寫的函數(shù)。分析3種方式的優(yōu)缺點(diǎn),以及應(yīng)用場景。箭頭函數(shù)作用:ES6新增的語法,方便代碼書寫。演示箭頭函數(shù)的4種用法。對比講解箭頭函數(shù)代碼與普通函數(shù)的代碼。通過代碼演示箭頭函數(shù)的使用,設(shè)置1個(gè)參數(shù)與設(shè)置2個(gè)參數(shù)的語法?;卣{(diào)函數(shù)作用:將函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù),然后調(diào)用這個(gè)函數(shù)。特點(diǎn):根據(jù)傳入的函數(shù)不同,執(zhí)行結(jié)果不同。通過代碼演示的具體實(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)頁計(jì)算器什么是閉包函數(shù)特點(diǎn):內(nèi)嵌函數(shù)可以訪問定義在外層函數(shù)中的所有變量和函數(shù),并包括其外層函數(shù)能訪問的所有變量和函數(shù)。但是在函數(shù)外部則不能訪問函數(shù)的內(nèi)部變量和嵌套函數(shù)。作用1:可以在函數(shù)外部讀取函數(shù)內(nèi)部的變量。作用2:可以讓變量的值保持在內(nèi)存中。閉包函數(shù)的實(shí)現(xiàn)在函數(shù)中,通過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)頁計(jì)算器案例分析展示案例完成后的效果,對功能進(jìn)行分析。代碼實(shí)現(xiàn)設(shè)計(jì)網(wǎng)頁計(jì)算器的基本頁面。提供兩個(gè)文本框,用來輸入數(shù)字,然后提供4個(gè)按鈕,分別表示加、減、乘、除,用來對數(shù)字進(jìn)行計(jì)算。編寫add()、sub()、mul()、div()這4個(gè)函數(shù),分部用于加法、減法、乘法、除法的運(yùn)算。編寫calc()函數(shù),當(dāng)單擊按鈕時(shí),通過onclick事件調(diào)用此函數(shù)。該函數(shù)的參數(shù)func是一個(gè)回調(diào)函數(shù),用來根據(jù)回調(diào)函數(shù)執(zhí)行具體的計(jì)算。例如,當(dāng)單擊“加”按鈕時(shí),就調(diào)用calc()函數(shù)并將add函數(shù)作為參數(shù)傳入,注意傳入add函數(shù)時(shí)不要加小括號,否則就變成了調(diào)用add()將其返回值作為參數(shù)傳入了,通過瀏覽器訪問測試,觀察運(yùn)行結(jié)果。學(xué)以致用動(dòng)手實(shí)踐環(huán)節(jié)六:課程小結(jié)等10分鐘線下涵蓋本單元所有教學(xué)內(nèi)容?;仡櫳险n前的學(xué)習(xí)目標(biāo),對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。老師對本任務(wù)所學(xué)的基本知識點(diǎn)及操作方法進(jìn)行總結(jié)。使學(xué)生對本次課所學(xué)知識有一個(gè)整體的把握環(huán)節(jié)七:課程任務(wù)5分鐘線上發(fā)布課后任務(wù)教師發(fā)放本章相關(guān)資料和素材,學(xué)生進(jìn)行上機(jī)練習(xí),以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。上機(jī)練習(xí)完成后將報(bào)告通過平臺提交給老師。總結(jié)有助于學(xué)生對本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。作業(yè)考核評價(jià)60分鐘線上教師發(fā)放測試題目及案例素材,學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。測試完成后將作品通過平臺提交給老師。教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)錯(cuò)誤的地方,并給與解答。有問題的同學(xué)點(diǎn)對點(diǎn)溝通指導(dǎo)通過測試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識反思與改進(jìn)教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)bug的地方,并給與解答。錯(cuò)誤比較多的同學(xué)進(jìn)行點(diǎn)對點(diǎn),一對一指導(dǎo)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱對象課程類型線上+線下授課時(shí)間第5周授課地點(diǎn)*****班級*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(biāo)理解面向?qū)ο笏枷?,能夠說出面向?qū)ο笈c面向過程的區(qū)別掌握J(rèn)avaScript常用內(nèi)置對象的使用方法掌握自定義對象的定義和基本操作,理解構(gòu)造函數(shù)的概念掌握封裝、繼承、多態(tài)的設(shè)計(jì)思想,理解原型鏈機(jī)制熟悉錯(cuò)誤的處理,掌握如何在瀏覽器中調(diào)試JavaScript程序能力目標(biāo)能夠使用常用內(nèi)置對象能夠進(jìn)行對象的基本操作能夠在瀏覽器中調(diào)試JavaScript程序素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團(tuán)隊(duì)合作意識具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容本章將圍繞JavaScript開發(fā)中的面向?qū)ο笤O(shè)計(jì)思想,以及對象相關(guān)的一些原理和應(yīng)用進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)構(gòu)造函數(shù)、String對象、Math對象、Date對象、原型、繼承教學(xué)難點(diǎn)深拷貝與淺拷貝、構(gòu)造函數(shù)、原型、繼承、原型鏈教學(xué)重難點(diǎn)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。
三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧10分鐘線下(1)對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。(2)回顧前面學(xué)過的內(nèi)容,引出本節(jié)課主題。在第1章已經(jīng)介紹過面向?qū)ο蟮幕靖拍?,本章將對JavaScript面向?qū)ο筮M(jìn)行更深入和細(xì)致地講解。(3)明確學(xué)習(xí)方向。理解面向?qū)ο笏枷氤霈F(xiàn)的原因。能夠說出面向?qū)ο笈c面向過程的區(qū)別。掌握對象的定義語法。掌握對象成員的訪問方法。掌握對象成員的遍歷。理解對象的深拷貝與淺拷貝機(jī)制。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教師演示學(xué)生練習(xí)35分鐘線下面向?qū)ο蟾攀觥⒚嫦驅(qū)ο蟮奶卣?、對象的定義、訪問對象成員、對象成員遍歷、深拷貝與淺拷貝實(shí)例講解知識點(diǎn)1.為什么學(xué)習(xí)面向?qū)ο螽?dāng)軟件開發(fā)規(guī)模達(dá)到一定程度時(shí),面向?qū)ο笏枷肟梢愿玫慕鉀Q問題。面向?qū)ο罂梢詰?yīng)用到許多領(lǐng)域,這里學(xué)習(xí)的重點(diǎn)是面向?qū)ο缶幊獭?區(qū)分面向過程與面向?qū)ο竺嫦蜻^程:注重具體步驟,凡事都靠自己完成。面向?qū)ο螅鹤⒅鼐唧w對象,指揮對象去完成任務(wù)。注意:如果對象一開始不存在,那就需要手動(dòng)創(chuàng)造一個(gè)對象,將面向過程的代碼封裝起來,形成對象。創(chuàng)造對象的意義:當(dāng)?shù)谝淮斡玫侥硞€(gè)功能的時(shí)候,將代碼封裝成對象,下次再需要用到這個(gè)功能時(shí),直接調(diào)用對象就能完成任務(wù),不需要重復(fù)編寫代碼。3面向?qū)ο蟮奶卣鞣庋b性:隱藏內(nèi)部實(shí)現(xiàn),對外開放接口。繼承性:不改變另一個(gè)對象的前提下進(jìn)行擴(kuò)展。多態(tài)性:為不同的對象提供相同的接口(歸一化設(shè)計(jì)),降低使用難度。4對象的定義使用“{}”來定義一個(gè)對象。對象的成員以鍵值對的形式保存,多個(gè)成員用逗號分隔。對象的成員可以是屬性或方法,相當(dāng)于變量和函數(shù)。對象的字面量語法,還常用于數(shù)據(jù)交互,稱為JSON數(shù)據(jù)格式。5訪問對象成員創(chuàng)建對象后,通過“.”來訪問對象的成員。如果一個(gè)對象沒有成員,可以手動(dòng)賦值來添加成員。對象成員訪問支持使用“[]”語法,相比“.”語法其命名可更加隨意。通過例5-1演示如何在HTML頁面中動(dòng)態(tài)為對象增加成員。6對象成員遍歷回顧數(shù)組的遍歷,利用for…in語法對數(shù)組進(jìn)行遍歷。使用for…in語法可以遍歷對象,其代碼與遍歷數(shù)組類似。使用“obj[k]”語法來訪問對象中的元素,可以用“obj[k]()”調(diào)用方法。7判斷對象成員是否存在使用“in”可以判斷對象中是否存在某個(gè)成員。8深拷貝與淺拷貝對于基本數(shù)據(jù)類型,在進(jìn)行賦值時(shí),執(zhí)行的是拷貝(復(fù)制)操作。對于復(fù)合數(shù)據(jù)類型(如數(shù)組、對象),在進(jìn)行賦值時(shí),執(zhí)行的是淺拷貝操作。通過代碼演示淺拷貝的情況,分析為什么會出現(xiàn)這種情況。通過文件夾、快捷方式的例子,來比較對象與普通數(shù)據(jù)的區(qū)別。分析為什么會出現(xiàn)淺拷貝機(jī)制:節(jié)省內(nèi)存開銷。對象可以保存大量的數(shù)據(jù),因此更加占用內(nèi)存。當(dāng)在程序中操作對象時(shí),(如將對象放入函數(shù)參數(shù)中傳遞),如果直接創(chuàng)建副本,會多占用一份內(nèi)存空間。在實(shí)際開發(fā)中,也會遇到完全復(fù)制一個(gè)對象的需求,即深拷貝,這就需要自己動(dòng)手來實(shí)現(xiàn)深拷貝的效果。動(dòng)手編寫deepCopy()函數(shù)實(shí)現(xiàn)對象的深拷貝。使學(xué)生對面向?qū)ο笥幸粋€(gè)初步的認(rèn)識環(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言中的類與對象的概念。類的作用:創(chuàng)建對象的模板,用來創(chuàng)建一些具有相同特征的對象。通過類創(chuàng)建對象的過程,稱為實(shí)例化,創(chuàng)建對來的對象稱為類的實(shí)例。JavaScript一開始沒有class關(guān)鍵字(ES6新增了該語法),若要以模板的方式實(shí)例化對象,可以將創(chuàng)建對象的過程封裝成函數(shù),通過函數(shù)創(chuàng)建對象。分析這種方式的缺點(diǎn):無法區(qū)分對象的類型。引出:利用構(gòu)造函數(shù)來創(chuàng)建對象。2使用JavaScript內(nèi)置的構(gòu)造函數(shù)在學(xué)習(xí)自定義構(gòu)造函數(shù)前,先來看一下內(nèi)置構(gòu)造函數(shù)如何使用。演示如何通過“new構(gòu)造函數(shù)名()”來創(chuàng)建對象。通過constructor查看對象是由哪個(gè)構(gòu)造函數(shù)創(chuàng)建的。字面量“{}”創(chuàng)建的對象,實(shí)際上是Object對象的實(shí)例。3自定義構(gòu)造函數(shù)通過代碼演示如何自定義一個(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等編程語言中有的,而JavaScript一開始沒有。為了方便Java、PHP等Web開發(fā)程序員更方便地使用JavaScript來進(jìn)行面向?qū)ο缶幊?,因此加入了該關(guān)鍵字的支持。注意class關(guān)鍵字本質(zhì)上是一個(gè)語法糖,可以用構(gòu)造函數(shù)語法替代。私有成員在一些使用class關(guān)鍵字的編程語言中,可以用public、private關(guān)鍵字設(shè)定對象成員的可訪問性,即劃分公有成員和私有成員。在JavaScript中沒有這些關(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é),僅對外開放接口,防止內(nèi)部成員被外界隨意訪問。在函數(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ù),這兩種方式對返回的處理有區(qū)別。通過代碼對比演示兩種情況的具體區(qū)別。函數(shù)中的this指向分析this指向,分3種情況:①使用“new構(gòu)造函數(shù)”實(shí)例化對象時(shí);②直接通過函數(shù)名調(diào)用函數(shù)時(shí);③將函數(shù)作為對象方法調(diào)用時(shí)。通過代碼演示不同情況下this指向的具體是哪個(gè)對象。更改this指向(演示apply()、call()方法的使用,并對比兩個(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.輸入需要生成的年份通過輸入框提示用戶輸入年份。2.編寫calendar()函數(shù)生成指定年份的年歷提供參數(shù)y表示指定的年份。返回生成的HTML結(jié)果。編寫for循環(huán)遍歷12個(gè)月份利用<table>進(jìn)行頁面布局,每個(gè)月份用一個(gè)<table>實(shí)現(xiàn)。利用CSS實(shí)現(xiàn)根據(jù)頁面寬度進(jìn)行排版,表格可以自動(dòng)換到下一行。獲取指定年份1月1日的星期值通過Date()實(shí)例化對象并調(diào)用getDay()方法來實(shí)現(xiàn)。獲取每個(gè)月共有多少天通過Date()實(shí)例化對象并調(diào)用getDate()獲得最大天數(shù)利用for循環(huán)從第1天遍歷到最后1天。在循環(huán)中,控制星期值在0~6范圍內(nèi)變動(dòng)。將每一天的數(shù)字拼接到表格中根據(jù)當(dāng)前月份的第1天是星期幾,來填充幾個(gè)空白單元格。利用<td>單元格的colspan來實(shí)現(xiàn)填充空白單元格。遍歷到星期六時(shí),如果不是該月最后一天,則需要換行。如果到達(dá)該月最后一天,則閉合標(biāo)簽。測試程序通過瀏覽器訪問,觀察程序運(yùn)行結(jié)果是否正確。掌握編程實(shí)現(xiàn)年歷的制作,能夠根據(jù)指定年份生成年歷。熟練掌握Date對象的使用環(huán)節(jié)六:課程小結(jié)等10分鐘線下對本章節(jié)知識點(diǎn)進(jìn)行總結(jié),使學(xué)生對面向?qū)ο笥幸粋€(gè)清晰的認(rèn)識,并把握好重難點(diǎn)。使學(xué)生能夠獨(dú)立進(jìn)行頁面排版環(huán)節(jié)七:課程任務(wù)10分鐘線上涵蓋本單元所有教學(xué)內(nèi)容。老師對本任務(wù)所學(xué)的基本知識點(diǎn)及操作方法進(jìn)行總結(jié)??偨Y(jié)有助于學(xué)生對本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。作業(yè)考核評價(jià)60分鐘線上教師發(fā)放測試題目及案例素材,學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。測試完成后將作品通過平臺提交給老師。上機(jī)測試主要針對本章中需要重點(diǎn)掌握的知識點(diǎn),以及在代碼中容易出錯(cuò)的操作步驟。通過上機(jī)測試可以考察同學(xué)對“面向?qū)ο蟆钡戎R點(diǎn)的掌握程度。通過測試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識反思與改進(jìn)教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)bug的地方,并給與解答。針對錯(cuò)誤比較多的同學(xué)進(jìn)行一對一指導(dǎo)?;旌鲜浇虒W(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱BOM課程類型線上+線下授課時(shí)間第6周授課地點(diǎn)*****班級課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(biāo)了解BOM的組成結(jié)構(gòu)掌握定時(shí)器的操作熟悉location與history對象能力目標(biāo)能夠操作BOM對象能夠使用定時(shí)器制作倒計(jì)時(shí)能夠進(jìn)窗口的操作素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團(tuán)隊(duì)合作意識具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容BOM(BrowerObjectModel)指的是瀏覽器對象模型,DOM(DocumentObjectModel)指的是文檔對象模型。那么接下來將在本章首先針對BOM的使用進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)BOM組成結(jié)構(gòu)、BOM常用對象和方法、定時(shí)器教學(xué)難點(diǎn)窗口位置和大小、框架操作、history、screen教學(xué)重難點(diǎn)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧10分鐘線下回顧前面學(xué)過的內(nèi)容,引出本節(jié)課主題。(1)對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。(2)回顧前面學(xué)過的內(nèi)容,引出本節(jié)課主題。在前面的學(xué)習(xí)中,用到的alert()、prompt()函數(shù)其實(shí)是window對象的方法,關(guān)于window對象具體如何使用,它有哪些常用的屬性和方法,將在本節(jié)進(jìn)行具體講解。(3)明確學(xué)習(xí)方向。理解什么是BOM。掌握BOM的基本結(jié)構(gòu)。理解window對象與其他BOM對象的關(guān)系。掌握如何彈出對話框和窗口。掌握如何控制窗口位置和大小。掌握如何進(jìn)行框架操作。掌握定時(shí)器的使用方法。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教師演示學(xué)生練習(xí)35分鐘線下什么是BOM對象、window對象1.什么是BOMJavaScript是由ECMAScript、BOM和DOM組成的。BOM是指瀏覽器對象模型(BrowserObjectModel),DOM是指文檔對象模型(DocumentObjectModel)。2.BOM的作用JavaScript經(jīng)常需要操作瀏覽器窗口及窗口上的控件,實(shí)現(xiàn)用戶和頁面的動(dòng)態(tài)交互。為此,瀏覽器提供了一系列內(nèi)置對象,統(tǒng)稱為瀏覽器對象。各內(nèi)置對象之間按照某種層次組織起來的模型統(tǒng)稱為BOM。3.BOM的結(jié)構(gòu)window對象是BOM的頂層(核心)對象,其他的對象都是以屬性的方式添加到window對象下,也可以稱為window的子對象。4.BOM與DOM的關(guān)系DOM是W3C標(biāo)準(zhǔn),是所有瀏覽器公共遵守的規(guī)則。而BOM是各瀏覽器根據(jù)DOM在各自瀏覽器上的實(shí)現(xiàn),主要處理瀏覽器的窗口和框架。區(qū)別:DOM處理網(wǎng)頁內(nèi)容,BOM與瀏覽器進(jìn)行交互。5.常用BOM對象介紹document對象:即DOM對象,用來處理網(wǎng)頁內(nèi)容。history對象:記錄瀏覽器的訪問歷史記錄,常用于開發(fā)前進(jìn)與后退功能。location對象:用于控制URL地址欄。navigator對象:獲取瀏覽器的相關(guān)信息,如名稱、版本等。screen對象:獲取與屏幕相關(guān)的信息,如屏幕分辨率,坐標(biāo)等。6.腳下留心BOM沒有相關(guān)標(biāo)準(zhǔn),每個(gè)瀏覽器都有其自己對BOM的實(shí)現(xiàn)方式。而各瀏覽器間共有的對象就成為了事實(shí)上的標(biāo)準(zhǔn)。在利用BOM實(shí)現(xiàn)具體功能時(shí)要根據(jù)實(shí)際的開發(fā)情況考慮瀏覽器之間的兼容問題,否則會出現(xiàn)不可預(yù)料的情況。7.全局作用域window對象的特點(diǎn):它是一個(gè)全局對象,定義在全局作用域中的變量、函數(shù)以及內(nèi)置函數(shù)等,都可以被window對象調(diào)用。區(qū)別1:在JavaScript中直接使用一個(gè)未聲明的變量會報(bào)語法錯(cuò)誤,但是使用“window.變量名”的方式則不會報(bào)錯(cuò),而是獲得一個(gè)undefined結(jié)果。區(qū)別2:delete關(guān)鍵字僅能刪除window對象自身的屬性,對于定義在全局作用域下的變量不起作用。8.彈出對話框和窗口除了前面學(xué)過的alert()、prompt(),還有許多其他的屬性和方法。列舉常用的屬性和方法。簡單演示其具體使用。利用open()方法打開窗口,介紹該方法的常用可選參數(shù)。利用close()方法關(guān)閉打開的窗口。9.窗口位置和大小介紹window對象獲取窗口位置和大小的常用屬性和方法。演示如何獲取這些信息。注意window.open()方法打開的窗口和選項(xiàng)卡(Tab),F(xiàn)ireFox和Chrome瀏覽器才支持口位置和大小的調(diào)整。10.框架操作回顧HTML中的框架的使用。利用JavaScript來對框架進(jìn)行操作。注意JavaScript對框架操作的限制,無法讀寫跨域內(nèi)容。11.定時(shí)器介紹常用的定時(shí)器方法,注意setInterval()和setTimeout()的區(qū)別。講解并演示如何取消定時(shí)器。通過計(jì)數(shù)器案例,演示定時(shí)器的使用。在網(wǎng)頁中提供兩個(gè)按鈕,一個(gè)用于開始計(jì)數(shù),一個(gè)用于停止計(jì)數(shù)當(dāng)開始計(jì)數(shù)時(shí),啟動(dòng)定時(shí)器,利用定時(shí)器更新頁面中顯示的數(shù)值。當(dāng)停止計(jì)數(shù)時(shí),取消定時(shí)器?!景咐肯迺r(shí)秒殺開發(fā)背景電子商務(wù)網(wǎng)站,如淘寶、京東,商家經(jīng)常會策劃促銷活動(dòng),限時(shí)秒殺是一種常見的手段。案例展示展示案例完成后的效果,在網(wǎng)頁中顯示倒計(jì)時(shí)。代碼編寫設(shè)計(jì)限時(shí)秒殺的頁面。通過JavaScript實(shí)現(xiàn)倒計(jì)時(shí)效果。測試程序。使學(xué)生對盒子模型有一個(gè)初步的認(rèn)識環(huán)節(jié)四:教學(xué)演示學(xué)生練習(xí)35分鐘線下location對象、案例:定時(shí)跳轉(zhuǎn)、history對象1.認(rèn)識URL回顧URL的基本概念。URL的組成:網(wǎng)絡(luò)協(xié)議、服務(wù)器主機(jī)名、端口號、URI、參數(shù)以及錨點(diǎn)。通過具體URL演示其組成部分。2.更改URL列舉相關(guān)方法assign()、reload()、replace(),并比較其區(qū)別。通過具體案例來實(shí)現(xiàn)URL的更改。3.獲取URL參數(shù)以一個(gè)具體的URL為例,演示如何獲取URL中的參數(shù)。使用“l(fā)ocation.href”也可以更改URL地址。4.history對象原本用于在瀏覽器中對訪問過的URL歷史記錄進(jìn)行操作。但用戶的瀏覽歷史是用戶的隱私,且有可能會泄露網(wǎng)站的一些安全信息。出于安全考慮,history對象不能直接獲取用戶瀏覽過的URL。history對象可以控制瀏覽器前進(jìn)、后退,或跳轉(zhuǎn)到歷史列表中的第幾個(gè)頁面。通過案例演示history對象的使用?!景咐慷〞r(shí)跳轉(zhuǎn)開發(fā)背景用戶執(zhí)行一個(gè)操作后,顯示執(zhí)行結(jié)果,在頁面中停留5秒,然后自動(dòng)跳轉(zhuǎn)到其他頁面。開發(fā)思路通過定時(shí)器和location來實(shí)現(xiàn)跳轉(zhuǎn)功能。代碼編寫使學(xué)生掌計(jì)時(shí)器的用法環(huán)節(jié)五:教學(xué)演示學(xué)生練習(xí)45分鐘線下navigator對象、screen對象1.navigator對象該對象用于獲取瀏覽器的相關(guān)信息。通過具體代碼演示該對象常用屬性和方法的使用。更換不同的瀏覽器,觀察輸出結(jié)果的變化。2.screen對象該對象用于獲取網(wǎng)頁所在窗口與屏幕相關(guān)的信息,如寬度和高度等。通過具體代碼演示該對象的常用屬性。使學(xué)生能夠掌握navigator對象、screen對象用法環(huán)節(jié)六:課程小結(jié)等10分鐘線下回顧上課前的學(xué)習(xí)目標(biāo),對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)??偨Y(jié)有助于學(xué)生對本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)七:課程任務(wù)10分鐘線上教師發(fā)放本章相關(guān)資料和素材,學(xué)生進(jìn)行上機(jī)練習(xí),以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。上機(jī)練習(xí)完成后將報(bào)告通過平臺提交給老師。作業(yè)考核評價(jià)60分鐘線上教師發(fā)放測試題目及案例素材,學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。測試完成后將作品通過平臺提交給老師。上機(jī)測試主要針對本章中需要重點(diǎn)掌握的知識點(diǎn),以及在代碼中容易出錯(cuò)的操作步驟。通過上機(jī)測試可以考察同學(xué)對“計(jì)時(shí)器”等知識點(diǎn)的掌握程度。通過測試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識反思與改進(jìn)教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)bug的地方,并給與解答。針對錯(cuò)誤比較多的同學(xué)進(jìn)行一對一指導(dǎo)?;旌鲜浇虒W(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱DOM課程類型線上+線下授課時(shí)間第7周授課地點(diǎn)*****班級*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(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)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團(tuán)隊(duì)合作意識具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容DOM(DocumentObjectModel)文檔對象模型可以用于完成HTML和XML文檔的操作。其中,在JavaScript中利用DOM操作HTML元素和CSS樣式則是最常用的功能之一,例如,改變盒子的大小、標(biāo)簽欄的切換、購物車等。本章將針對如何在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)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧10分鐘線下回顧前面學(xué)過的內(nèi)容,引出本節(jié)課主題。在前面講解了BOM對象的使用,BOM對瀏覽器進(jìn)行操作,而DOM用來對文檔進(jìn)行操作,因此本節(jié)課將會講解如何利用DOM對象來對文檔進(jìn)行操作。明確學(xué)習(xí)方向。了解什么是DOM,DOM的版本和發(fā)展歷史。掌握HTML節(jié)點(diǎn)樹的概念,能夠說出節(jié)點(diǎn)之間的關(guān)系。認(rèn)識常用的DOM對象,能夠區(qū)分元素與節(jié)點(diǎn)。掌握節(jié)點(diǎn)的類型。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教師演示學(xué)生練習(xí)35分鐘線下認(rèn)識DOM、獲取元素、內(nèi)容操作、屬性操作、樣式操作什么是DOMDOM(DocumentObjectModel),即文檔對象模型。一套規(guī)范文檔內(nèi)容的通用型標(biāo)準(zhǔn)。簡要介紹DOM的發(fā)展歷史。簡要介紹DOM第1級、第2級、第3級的主要變化。主要用途:操作HTML、XML文檔。DOMHTML節(jié)點(diǎn)樹DOM中為操作HTML文檔提供了一些屬性和方法,將HTML文檔以節(jié)點(diǎn)樹的形式進(jìn)行操作。演示如何將一段HTML代碼轉(zhuǎn)換成節(jié)點(diǎn)樹。區(qū)分各個(gè)節(jié)點(diǎn)的關(guān)系,什么是根節(jié)點(diǎn)、子節(jié)點(diǎn)、父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)。DOM對象的繼承關(guān)系分析document對象的繼承關(guān)系。分析document.getElementById()返回的元素對象的繼承關(guān)系。區(qū)分document對象、Node對象、Element對象的區(qū)別和關(guān)系。通過代碼演示節(jié)點(diǎn)操作與元素操作的區(qū)別。列舉常見節(jié)點(diǎn)類型,通過代碼演示如何比較兩個(gè)對象節(jié)點(diǎn)類型是否相同。獲取操作的元素在操作元素前,需要先獲取元素。document提供了一些方法,用來根據(jù)id、name和class屬性以及標(biāo)簽名的方式獲取元素。通過代碼演示常用獲取元素方法的使用。注意返回的對象可能有一個(gè)或多個(gè)。當(dāng)返回的是對象集合時(shí),通過“[下標(biāo)]”的方式來獲取其中的對象。補(bǔ)充講解HTML5新增的獲取元素的方法。列舉document中的一些用于獲取元素的屬性。演示這些屬性的使用方法。通過代碼驗(yàn)證利用document的屬性獲取到的對象,與通過方法獲取到的對象是否是同一個(gè)對象。除了使用document對象可以獲取對象,通過元素對象也可以獲取對象。通過代碼演示如何通過元素對象來獲取對象,并注意與document對象獲取對象時(shí)的區(qū)別,元素對象這種方式通常只用于獲取該元素內(nèi)部的對象。演示如何通過元素對象的children屬性來獲取該元素的子元素。補(bǔ)充講解HTMLCollection與NodeList的區(qū)別。元素內(nèi)容操作列舉Element對象提供的操作元素內(nèi)容的屬性。列舉document對象提供的操作元素內(nèi)容的方法。通過代碼演示這些屬性和方法的具體使用。對比innerHTML、innerText和textContent屬性的區(qū)別。對比innerHTML屬性和document.write()方法的區(qū)別。元素屬性操作列舉常用的元素屬性操作的屬性和方法。通過代碼演示元素屬性的獲取、修改、移除等操作。元素樣式操作演示元素樣式操作的基本語法。講解如何將CSS樣式名轉(zhuǎn)換成style的屬性名。列舉常見的style屬性名。通過代碼演示如何對元素的樣式進(jìn)行添加。注意float樣式在不同瀏覽器中的處理方案。演示通過className屬性對元素的class屬性進(jìn)行操作。演示通過classList屬性對元素的class屬性進(jìn)行操作。通過具體代碼實(shí)現(xiàn)修改class、切換class、刪除class等效果?!景咐繕?biāo)簽欄切換效果開發(fā)背景標(biāo)簽欄在網(wǎng)頁中使用非常普遍。其優(yōu)勢在于可以在有限的空間內(nèi)展示多塊的內(nèi)容。案例分析用戶可以通過標(biāo)簽在多個(gè)內(nèi)容塊之間進(jìn)行切換。代碼實(shí)現(xiàn)編寫HTML頁面,準(zhǔn)備4個(gè)標(biāo)簽,和對應(yīng)的4個(gè)<div>內(nèi)容。利用JavaScript獲取元素,并添加鼠標(biāo)滑過事件。當(dāng)鼠標(biāo)滑過某個(gè)元素時(shí),對所有標(biāo)簽進(jìn)行遍歷,通過樣式操作實(shí)現(xiàn)標(biāo)簽的選中效果,并控制對應(yīng)內(nèi)容的顯示或隱藏。測試程序。使學(xué)生掌握HTML節(jié)點(diǎn)樹的概念,能夠說出節(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ū)別,對比childNodes和children,節(jié)點(diǎn)操作會包含文本節(jié)點(diǎn)等其他類型的節(jié)點(diǎn)。對比節(jié)點(diǎn)操作和元素操作,獲取到的是否為同一個(gè)對象。通過案例演示節(jié)點(diǎn)的查看獲取。2.節(jié)點(diǎn)追加document對象提供了一些創(chuàng)建節(jié)點(diǎn)的方法,可以創(chuàng)建元素、文本、屬性等類型的節(jié)點(diǎn)。通過節(jié)點(diǎn)追加相關(guān)方法,可以在指定節(jié)點(diǎn)的子節(jié)點(diǎn)末尾添加一個(gè)節(jié)點(diǎn),或者將某個(gè)節(jié)點(diǎn)插入到指定節(jié)點(diǎn)之前。對于屬性節(jié)點(diǎn)也可以對其進(jìn)行獲取或設(shè)置操作。通過代碼演示節(jié)點(diǎn)創(chuàng)建、節(jié)點(diǎn)追加、屬性節(jié)點(diǎn)操作方法的使用。3.節(jié)點(diǎn)刪除列舉常用的節(jié)點(diǎn)刪除方法。通過代碼演示節(jié)點(diǎn)刪除,以及屬性節(jié)點(diǎn)刪除使學(xué)生掌握節(jié)點(diǎn)方式訪問節(jié)點(diǎn)的常用屬性的使用。掌握節(jié)點(diǎn)追加的相關(guān)方法的使用。掌握節(jié)點(diǎn)刪除操作。環(huán)節(jié)五:教學(xué)演示教師指導(dǎo)學(xué)生練習(xí)35分鐘線下動(dòng)手實(shí)踐:購物車1.案例分析購物車是電子商務(wù)網(wǎng)站的常見功能。利用購物車,可以保存用戶選購的多件商品。在購物車頁面中,可以進(jìn)行商品數(shù)量的添加與減少,選中與取消選中(選中表示本次購買,未選中表示以后再購買),從購物車中刪除等。顯示每件商品的小計(jì)價(jià)格。顯示購物車已選擇商品數(shù)量和總計(jì)價(jià)格。2.準(zhǔn)備工作編寫HTML代碼,設(shè)計(jì)購物車的結(jié)構(gòu)和顯示樣式。封裝ShopCart()函數(shù),第1個(gè)參數(shù)表示class前綴,第2個(gè)參數(shù)表示頁面打開后顯示在購物車中的商品數(shù)據(jù)。封裝Find()構(gòu)造函數(shù),用來查找元素。3.添加購物車商品編寫Cart()構(gòu)造函數(shù),用來創(chuàng)建購物車。將需要操作的對象保存到成員屬性中,方便在成員方法中使用。在Ctotype對象中編寫add()方法,用來向購物車中添加一件商品。讀取網(wǎng)頁中的模板元素,新添加的商品基于模板克隆。編寫Item()構(gòu)造函數(shù),用來創(chuàng)建購物車中的商品對象。通過成員屬性data保存商品數(shù)據(jù)(數(shù)量、價(jià)格等)。在Itotype對象中編寫updateSubtotal()方法,用來獲取小計(jì)。4.修改商品修改商品包括商品數(shù)量修改以及刪除商品操作。為元素添加事件,通過調(diào)用對象的屬性和方法完成具體操作。為商品數(shù)量按鈕添加事件,每當(dāng)商品數(shù)量發(fā)生變化時(shí),更新小計(jì)和總計(jì)。為商品刪除鏈接添加事件,每當(dāng)商品刪除時(shí),更新總計(jì)。5.實(shí)現(xiàn)總計(jì)、全選與刪除在Ctotype對象中編寫updateTotal()方法,用于更新購買數(shù)量和總計(jì)。實(shí)現(xiàn)全選功能、刪除商品功能。拓展:以后可以學(xué)習(xí)artTemplate模板引擎來更方便的處理頁面代碼。使學(xué)生掌握 掌握DOM操作的綜合運(yùn)用。 掌握購物車功能的開發(fā)。環(huán)節(jié)六:課程小結(jié)等10分鐘線下涵蓋本單元所有教學(xué)內(nèi)容。老師對本任務(wù)所學(xué)的基本知識點(diǎn)及操作方法進(jìn)行總結(jié)。總結(jié)有助于學(xué)生對本任務(wù)所學(xué)內(nèi)容進(jìn)行梳理。環(huán)節(jié)八:課程任務(wù)10分鐘線上教師發(fā)放測試題目及案例素材,學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對相關(guān)知識點(diǎn)的掌握情況。測試完成后將作品通過平臺提交給老師。上機(jī)測試主要針對本章中需要重點(diǎn)掌握的知識點(diǎn),以及在代碼中容易出錯(cuò)的操作步驟。通過上機(jī)測試可以考察同學(xué)對“元素的浮動(dòng)屬性”、“清除浮動(dòng)”及“overflow屬性”使用的熟練程度,以及對如何使用“元素的定位屬性”、“元素的類型與轉(zhuǎn)換”等知識點(diǎn)的掌握程度。作業(yè)考核評價(jià)60分鐘線上教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評,指出代碼中容易出現(xiàn)bug的地方,并給與解答。通過測試及動(dòng)手制作使學(xué)生鞏固課堂學(xué)的知識反思與改進(jìn)混合式教學(xué)單元設(shè)計(jì)方案一、教學(xué)基本情況項(xiàng)目(任務(wù))名稱JavaScript事件課程類型線上+線下授課時(shí)間第8周授課地點(diǎn)*****班級*****課時(shí)線上1+線下3二、教學(xué)目標(biāo)和內(nèi)容教學(xué)目標(biāo)(用詞表述要準(zhǔn)確,可測量、可評價(jià),建議根據(jù)布魯姆教育目標(biāo)分類法)素質(zhì)目標(biāo)包含課程思政內(nèi)容知識目標(biāo)掌握事件的綁定方式熟悉事件對象的使用掌握常用事件的實(shí)現(xiàn)能力目標(biāo)能夠進(jìn)行事件綁定。能夠獲取事件對象能夠?qū)⑹录ο髴?yīng)在網(wǎng)頁中素質(zhì)目標(biāo)養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣養(yǎng)成良好書寫代碼的習(xí)慣養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團(tuán)隊(duì)合作意識具有吃苦耐勞的品質(zhì)具有良好的網(wǎng)絡(luò)素養(yǎng)教學(xué)內(nèi)容事件被看作是JavaScript與網(wǎng)頁之間交互的橋梁,當(dāng)事件發(fā)生時(shí),可以通過JavaScript代碼執(zhí)行相關(guān)的操作。例如,用戶可以通過鼠標(biāo)拖拽登錄框,改變登錄框的顯示位置;或者在閱讀文章時(shí),選中文本后自動(dòng)彈出分享、復(fù)制選項(xiàng)。本章將對JavaScript中的事件進(jìn)行詳細(xì)講解。教學(xué)重點(diǎn)事件的綁定方式、事件對象、鼠標(biāo)事件、鍵盤事件教學(xué)難點(diǎn)事件的綁定方式、頁面事件、鼠標(biāo)事件教學(xué)重難點(diǎn)解決方法措施:通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。三、課前學(xué)習(xí)情況分析1.課前學(xué)習(xí)任務(wù)布置及推送提示:任務(wù)1:觀看2個(gè)視頻(共計(jì)15分鐘)任務(wù)2:完成課前測試,共計(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é)未觀看視頻。本次課前測試共有個(gè)同學(xué)參加測試,從測試的結(jié)果來看,XX知識點(diǎn)掌握情況較好,XX知識點(diǎn)需要進(jìn)一步講解分析。四、教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)(線上/線下)教學(xué)內(nèi)容教學(xué)活動(dòng)設(shè)計(jì)意圖環(huán)節(jié)一:課前任務(wù)20分鐘線上觀看視頻完成課前測試在線答疑為上課做準(zhǔn)備,對課中內(nèi)容有一個(gè)整體的把握環(huán)節(jié)二:課前回顧10分鐘線下回顧前面學(xué)過的內(nèi)容,引出本節(jié)課主題。在前面的課程中,許多案例的實(shí)現(xiàn)都離不開事件,例如鼠標(biāo)單擊onclick、下拉菜單發(fā)生改變onchange、鼠標(biāo)滑過onmouseover等。利用事件可以實(shí)現(xiàn)各種交互效果。本節(jié)將圍繞事件進(jìn)行詳細(xì)講解。明確學(xué)習(xí)方向。了解事件處理程序、事件驅(qū)動(dòng)式、事件流的基本概念。掌握早期版本IE瀏覽器與標(biāo)準(zhǔn)瀏覽器在事件處理上的差別。掌握如何獲取事件對象。掌握事件對象的常用屬性和方法。掌握案例“緩動(dòng)的小球”開發(fā)。對線上學(xué)習(xí)情況的回顧與總結(jié)能夠加深學(xué)生對線上所學(xué)知識的理解。在此基礎(chǔ)上老師深入講解,學(xué)生進(jìn)行操作,使學(xué)生的知識與能力得到進(jìn)一步提升。環(huán)節(jié)三:教師演示學(xué)生練習(xí)35分鐘線下事件概述、事件的綁定方式、獲取事件對象、常用屬性和方法事件概述事件可以用來實(shí)現(xiàn)網(wǎng)頁交互。事件處理程序指的就是JavaScript為響應(yīng)用戶行為所執(zhí)行的程序代碼。JavaScript可以用來開發(fā)事件驅(qū)動(dòng)式的程序。當(dāng)事件發(fā)生時(shí),有一個(gè)事件流機(jī)制。有事件捕獲和事件冒泡兩種形式。事件的綁定方式行內(nèi)綁定式:通過HTML標(biāo)簽的屬性實(shí)現(xiàn)。動(dòng)態(tài)綁定式:為DOM元素對象添加事件處理程序。關(guān)于行內(nèi)綁定式和動(dòng)態(tài)綁定式,在前面都已經(jīng)用過。注意在事件處理程序中,this的指向問題。以上兩種方式的局限:同一個(gè)DOM對象的同一個(gè)事件只能有一個(gè)事件處理程序。事件監(jiān)聽:可以為同一個(gè)DOM對象添加多個(gè)事件處理程序。對比早期版本的IE瀏覽器和標(biāo)準(zhǔn)瀏覽器的區(qū)別。獲取事件對象事件對象類似
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 陶瓷廠給水管道施工合同
- 印刷廠紙張物料員聘用合同
- 2024年版高級酒店宴會廳租賃合同范本版B版
- 2024年版城市基礎(chǔ)設(shè)施建設(shè)項(xiàng)目承包合同
- 建筑節(jié)能工程成本管理
- 2024年標(biāo)準(zhǔn)機(jī)器人服務(wù)合同模板版B版
- 侵權(quán)責(zé)任律師聘用合同
- 珠寶行業(yè)稅務(wù)登記流程
- 2024年新型蔬菜種植項(xiàng)目承包經(jīng)營協(xié)議3篇
- 交通運(yùn)輸行業(yè)職工聘用合同
- 中班科學(xué)教案:省力的輪子
- 改革開放史智慧樹知到期末考試答案2024年
- 建筑工程鋼結(jié)構(gòu)焊接變形的控制措施
- 文化傳媒公司招聘筆試題
- 零售業(yè)收銀員操作培訓(xùn)
- 信息安全職業(yè)生涯規(guī)劃
- 新能源技術(shù)的前沿研究與應(yīng)用探索
- 裝配式結(jié)構(gòu)監(jiān)理細(xì)則
- 工作無紙化總結(jié)匯報(bào)
- 初中美術(shù)八年級上冊服裝設(shè)計(jì)(全國一等獎(jiǎng))
- 導(dǎo)醫(yī)接待與患者情緒管理
評論
0/150
提交評論