Web前端開發(fā)（JavaScript+jQuery）【教案】 Web前端技術(shù)整體設(shè)計

編寫說明：正文內(nèi)容格式不限，此格式僅供參考課程教學(xué)設(shè)計（202*～202*學(xué)年第2學(xué)期）課程名稱：Web前端技術(shù)開課學(xué)院（部）******8制定人：******合作人：制定時間：202*年2月PAGEPAGE5Web前端技術(shù)課程整體教學(xué)設(shè)計課程信息課程代碼：032W36學(xué)分：3學(xué)時：64授課對象：*******課程類型：專業(yè)必修課課程性質(zhì)：理實一體化二、課程目標(biāo)設(shè)計整體目標(biāo)：《WEB前端技術(shù)》課程計算機網(wǎng)絡(luò)技術(shù)專業(yè)的崗位群平臺課，旨在“有趣、有效、只學(xué)有用的”原則上，結(jié)合學(xué)生的認知規(guī)律和現(xiàn)狀，使得學(xué)生能夠在有限的課時內(nèi)“專業(yè)”和“深入”地學(xué)習(xí)與WEB前端技術(shù)相關(guān)知識。課程始終以“社會主義核心價值觀”為引領(lǐng)，秉承校訓(xùn)“尚德明責(zé)，篤學(xué)強能”的理念，通過案例教學(xué)和任務(wù)實踐，引導(dǎo)學(xué)生在“學(xué)中做”、“做中學(xué)”，把基礎(chǔ)知識的學(xué)習(xí)和基本技能的掌握有機地結(jié)合在一起，從具體操作中培養(yǎng)應(yīng)用能力、解決復(fù)雜問題的綜合能力和高級思維，并引導(dǎo)學(xué)生逐步養(yǎng)成精益求精，追求卓越的品質(zhì)。由于本課程界面變現(xiàn)的特點，更多的是將思政內(nèi)容融入網(wǎng)頁變現(xiàn)內(nèi)容上，同時將含有思政元素的內(nèi)容作為課程素材提供給學(xué)生，通過思政與專業(yè)知識的結(jié)合，使學(xué)生逐步樹立正確的價值觀，做一個新時代愛祖國、愛人民，具有愛國情懷和社會責(zé)任感的合格‘匠人’。課程面向職業(yè)崗位采用基于任務(wù)的方式，以項目開發(fā)為主線，循序漸進的闡述Web前端的各項知識，通過三大模塊WEB知識儲備、WEB案例提高、WEB實戰(zhàn)演練，分別完成知識點講解、案例講解、項目實戰(zhàn)三大步驟，幫助學(xué)生把握前端的核心技術(shù)HTML5、CS3S、JavaScript，將其納入真實的項目場景中，幫助學(xué)生更好的理解和應(yīng)用這些技術(shù)。明確的學(xué)習(xí)目標(biāo)及循序漸進的知識體系，使理論知識和實踐技能同步提高。通過本課程的學(xué)習(xí)，能夠使學(xué)習(xí)者熟悉WEB頁面制作流程、掌握常見的頁面布局效果、學(xué)會設(shè)計制作各種具有動態(tài)特效的網(wǎng)站。課程結(jié)構(gòu)如圖1所示。圖1課程內(nèi)容結(jié)構(gòu)圖知識目標(biāo)掌握JavaScript的概念、應(yīng)用與特點；掌握JavaScript的3種引入方式，了解每種方式的特點和應(yīng)用場景；掌握JavaScript的語法、數(shù)據(jù)類型、基本的算數(shù)和邏輯運算操作；掌握JavaScript中條件分支語句和循環(huán)語句的使用；了解關(guān)鍵字與保留字；了解數(shù)據(jù)類型的分類；掌握基本數(shù)據(jù)類型的使用；掌握數(shù)組的定義；理解并能實現(xiàn)冒泡排序；理解并能實現(xiàn)插入排序；其他常用的數(shù)組操作方法；了解JavaScript函數(shù)的基本概念，掌握函數(shù)的基本代碼；熟練掌握函數(shù)的各種參數(shù)設(shè)置；了解函數(shù)表達式的概念，能夠區(qū)分函數(shù)表達式和普通函數(shù)的區(qū)別；理解函數(shù)嵌套調(diào)用的概念；掌握函數(shù)遞歸調(diào)用的原理與實現(xiàn)；理解閉包函數(shù)的特點和應(yīng)用場景；掌握對象的定義語法；理解對象的深拷貝與淺拷貝機制；理解為什么使用構(gòu)造函數(shù)；掌握如何自定義構(gòu)造函數(shù)；理解私有成員的概念；掌握String、Number、Math、Date等對象的使用；掌握JavaScript如何進行錯誤處理；了解常見的錯誤類型。能夠區(qū)分語法錯誤與普通錯誤；掌握如何在Chrome瀏覽器中調(diào)試JavaScript；掌握如何利用對象來保存數(shù)據(jù)；掌握BOM的基本結(jié)構(gòu)；理解window對象與其他BOM對象的關(guān)系；掌握navigator對象的常用屬性和方法；掌握screen對象的常用屬性和方法；掌握HTML節(jié)點樹的概念，能夠說出節(jié)點之間的關(guān)系；認識常用的DOM對象，能夠區(qū)分元素與節(jié)點；掌握節(jié)點的類型；掌握節(jié)點方式訪問節(jié)點的常用屬性的使用；運用面向?qū)ο缶幊谈玫亟M織代碼；掌握事件對象的常用屬性和方法；掌握頁面加載事件的機制；理解什么是jQuery庫；了解jQuery的優(yōu)勢和設(shè)計理念；掌握jQuery的下載與引入；了解jQuery代碼與JavaScript代碼的區(qū)別；理解jQuery選擇器的作用和設(shè)計思想；掌握jQuery操作頁面元素；掌握jQuery操作DOM節(jié)點的方法；了解jQuery的事件觸發(fā)機制；熟悉jQuery事件綁定和事件解綁的方法；熟悉jQuery事件對象的屬性和方法的使用；掌握jQuery事件冒泡的概念；熟悉jQuery中常用動畫的使用；掌握熟練運用jQuery動畫于網(wǎng)頁中；掌握jQuery的常用工具函數(shù)；掌握移動端響應(yīng)式布局的實現(xiàn)方法。（2）技能目標(biāo)能夠掌握JavaScript的3種引入方式；能夠正確使用常用輸出語句；能夠進行JavaScript的簡單數(shù)據(jù)運算操作；能夠?qū)ψ兞窟M行賦值操作；能夠掌握各種運算符的使用；能夠使用判斷結(jié)構(gòu)語句；能夠使用while、do…while、for等循環(huán)結(jié)構(gòu)語句；能夠掌握跳轉(zhuǎn)語句break、continue的使用方法；能夠創(chuàng)建、刪除數(shù)組；能夠?qū)?shù)組進行遍歷；能夠正確使用函數(shù)；能夠定義對象；能夠訪問與遍歷對象成員；能夠使用JavaScript內(nèi)置構(gòu)造函數(shù)實例化對象；能夠自定義構(gòu)造函數(shù)；能夠掌握常用對象的使用方法；能夠操作彈出對話框和窗口；能夠使用瀏覽器對象模型“BOM”與瀏覽器“對話；能夠?qū)Υ翱谖恢煤痛笮∵M行控制；能夠使用定時器；能夠使用location對象更改URL；能夠使用history對象實現(xiàn)歷史記錄跳轉(zhuǎn)；能夠增加、刪除、創(chuàng)建節(jié)點；能夠運用DOM的方法和屬性獲取網(wǎng)頁中的元素；能夠掌握如何獲取事件對象；能夠掌握頁面加載事件的機制；能夠為頁面中的元素綁定鍵盤或鼠標(biāo)事件；能夠正確的引用jQuery文件；能夠使用jQuery遍歷頁面元素；能夠使用jQuery操作頁面樣式、屬性、內(nèi)容等方法；能夠熟練運用jQuery動畫創(chuàng)建動態(tài)頁面；能夠運用jQuery進行自定義動畫效果；能夠運用jQuery操作DOM節(jié)點的方法；能夠掌握jQuery事件冒泡及阻止事件冒泡的方式；能夠使用JQuery庫實現(xiàn)網(wǎng)頁特效；能收集、整理、處理信息，并對網(wǎng)頁所需素材進行加工處理；能利用表單、網(wǎng)絡(luò)編程技術(shù)及數(shù)據(jù)庫技術(shù)建立網(wǎng)頁的交互式頁面，實現(xiàn)簡單的前后臺數(shù)據(jù)傳遞功能。（3）素質(zhì)目標(biāo)具有勤奮學(xué)習(xí)、嚴謹求實的態(tài)度；具有勤精益求精、創(chuàng)新的工作作風(fēng)；具有良好的心理素質(zhì)和職業(yè)道德素養(yǎng)；具有高度責(zé)任心和良好的團隊合作意識和創(chuàng)新精神；具有科學(xué)思維方式和一定的唯物辯證法思想；具有發(fā)現(xiàn)美、創(chuàng)造美的審美能力；具有較強的網(wǎng)頁設(shè)計創(chuàng)意思維、藝術(shù)設(shè)計素質(zhì)；具有一定的表達溝通能力和組織協(xié)調(diào)能力；具有良好的編寫代碼的習(xí)慣。三、課程教學(xué)活動設(shè)計基于混合式教學(xué)新需求，將紙質(zhì)教材、在線課程、網(wǎng)站和教學(xué)資源庫的線上線下教育資源有機銜接起來，結(jié)合《高等學(xué)校課程思政建設(shè)指導(dǎo)綱要》要求，全面融入“思政要求、崗位職業(yè)標(biāo)準、技能競賽標(biāo)準、1+X證書職業(yè)技能等級標(biāo)準”，以項目為載體,以任務(wù)為驅(qū)動，以學(xué)生為主體，構(gòu)建了‘教學(xué)做比評’五位一體的教學(xué)模式，創(chuàng)建了基于翻轉(zhuǎn)課堂需求的碎片化教學(xué)資源。以此把學(xué)生組織起來、把學(xué)習(xí)過程完善起來、讓學(xué)生參與課堂、讓學(xué)習(xí)主導(dǎo)課堂、增加課堂的吸引力、拓展課堂教學(xué)寬度。潤物無聲地將課程思政育人貫穿其中，充分運用在線學(xué)習(xí)平臺優(yōu)化課堂教學(xué)過程，針對重點和難點，創(chuàng)建基于翻轉(zhuǎn)課堂需求的碎片化教學(xué)資源。結(jié)合產(chǎn)教融合真實案例，運用任務(wù)驅(qū)動和頭腦風(fēng)暴，將自主學(xué)習(xí)和小組合作探究相結(jié)合，借助信息化手段，在教學(xué)實施過程中，理論-實踐-課程思政環(huán)環(huán)相扣。（1）教學(xué)組織安排1）讓學(xué)生參與課堂。關(guān)注學(xué)生課堂學(xué)習(xí)，更關(guān)注他們的生活與實踐；關(guān)注學(xué)生綜合素質(zhì)的發(fā)展，又關(guān)注學(xué)生的特長發(fā)展及在日常生活與社會實踐中的表現(xiàn)，提升學(xué)生課堂參與度。2）讓學(xué)習(xí)主導(dǎo)課堂。先學(xué)后教，讓教有針對性；以學(xué)定教，讓教有有效性。壓縮教學(xué)時間，保障學(xué)生學(xué)習(xí)時間，提前發(fā)布課程學(xué)習(xí)任務(wù)單，通過在線評比等手段，促使學(xué)生主動學(xué)在教學(xué)之前。3）把學(xué)生組織起來。挖掘同學(xué)之間的學(xué)習(xí)資源，營造互幫互助共同受益的學(xué)習(xí)氛圍。教師精準把握學(xué)生學(xué)習(xí)狀況，分組分任務(wù)，充分調(diào)動學(xué)生，有效地把學(xué)生組織起來。4）把學(xué)習(xí)過程完善起來。注重預(yù)習(xí)的重要性，使學(xué)生對整個學(xué)習(xí)過程負起責(zé)任。根據(jù)學(xué)生學(xué)習(xí)進度，及時給予幫助指導(dǎo)，借助實時通訊軟件答疑解惑。5）增加課堂的吸引力。課堂設(shè)計具有啟發(fā)性、趣味性，同時注意語言的藝術(shù)性。借助教學(xué)手段創(chuàng)設(shè)教學(xué)情境，讓學(xué)生更樂意于上課，課堂教學(xué)才能富有吸引力。6）拓展課堂教學(xué)寬度。借助信息化手段，聯(lián)合企業(yè)行業(yè)專家，加大實踐力度，延伸課堂高度，拓展教學(xué)寬度，提升學(xué)生自主學(xué)習(xí)與自主探究能力。（2）教學(xué)活動過程課前自主學(xué)習(xí)：借助于新的互動性較強的網(wǎng)絡(luò)學(xué)習(xí)平臺，構(gòu)建在線學(xué)習(xí)視頻供學(xué)生自主學(xué)習(xí)，培養(yǎng)學(xué)生自主學(xué)習(xí)能力，樹立大局意識。課中知識內(nèi)化：采用“教-學(xué)-做-比-評”五位一體的課堂教學(xué)方式，培養(yǎng)學(xué)生發(fā)現(xiàn)問題、分析問題及解決問題的能力。在這個過程中以社會主義核心價值觀為引領(lǐng)，引導(dǎo)學(xué)生去思考，培養(yǎng)學(xué)生的創(chuàng)新創(chuàng)作能力和團隊合作意識。課后鞏固提高：借助互動交流平臺和資源庫，拓展學(xué)習(xí)實踐空間，滿足個性化學(xué)習(xí)需求，課后實踐作業(yè)用以鞏固課堂知識、拓展視野、與時俱進，以增強學(xué)生的創(chuàng)新能力和精益求精的品質(zhì)。（3）學(xué)習(xí)考核評價動態(tài)評價，量化結(jié)果——建立人文性、多元性課程評價體系：基于學(xué)習(xí)效果，由任課教師、小組、學(xué)生本人組成評價主體，區(qū)分“課前”“課中”“課后”不同時間節(jié)點的動態(tài)評價，構(gòu)建主體多元化、過程動態(tài)化、結(jié)果可視化的層級設(shè)計評價，突出學(xué)習(xí)參與度、思政心得、發(fā)帖數(shù)量與質(zhì)量、團隊合作等方面考核權(quán)重，實現(xiàn)客觀量化評價與主觀效度檢驗統(tǒng)一，側(cè)面實時了解學(xué)生思想反映，達到精準掌握學(xué)生思想、素質(zhì)、知識、技能育人的目標(biāo)。課程評價貫穿課前（30%）、課中（30%）、課后（40%）全過程；評價內(nèi)容包括理論測試（10%）、線上學(xué)習(xí)（10%）、項目作業(yè)（40%）和期末測評（40%）四個維度。2．課程教學(xué)標(biāo)準課程標(biāo)準建設(shè)應(yīng)注重課程目標(biāo)的明確、課程內(nèi)容的更新拓展、教學(xué)方法的多樣化、教學(xué)資源的豐富化和課程評價的科學(xué)化等方面的工作，以適應(yīng)行業(yè)發(fā)展和市場需求的變化，不斷提高課程的教學(xué)質(zhì)量和水平。本課程標(biāo)準建設(shè)從課程性質(zhì)與任務(wù)、課程培養(yǎng)目標(biāo)（基本知識教學(xué)目標(biāo)、職業(yè)能力培養(yǎng)目標(biāo)、素質(zhì)教育目標(biāo)）、設(shè)計思路、課程內(nèi)容要求及教學(xué)設(shè)計、課程實施建議（教材建議、任課教師建議、教學(xué)方法建議、教學(xué)評價建議、課程診改建議）、課程資源建設(shè)等方面進行課程標(biāo)準的制定，規(guī)范各項教學(xué)要求，以提高教學(xué)質(zhì)量與水平。根據(jù)專業(yè)培養(yǎng)目標(biāo)、理論教學(xué)目標(biāo)和實踐教學(xué)目標(biāo)及用人單位對于“前端設(shè)計師”的要求，修訂了《Web前端技術(shù)》課程教學(xué)大綱，并制定了本課程的教學(xué)標(biāo)準。通過本課程的教學(xué)，逐漸培養(yǎng)學(xué)生科學(xué)的思維方法和創(chuàng)新思維能力，使學(xué)生的操作能力、分析問題和解決問題的能力、獲取新知識的能力、團結(jié)協(xié)作的能力得以提高。通過本課程的學(xué)習(xí)，使學(xué)生能夠具備以下四方面的能力：1)Web站點的規(guī)劃、構(gòu)建與發(fā)布的能力；2)網(wǎng)頁與圖形圖像創(chuàng)意、設(shè)計和制作的能力；3)動畫創(chuàng)意、設(shè)計和制作的能力；4)考取前端設(shè)計師證書的能力。3．課程體系結(jié)構(gòu)內(nèi)容課程面向職業(yè)崗位采用基于任務(wù)的方式，以項目開發(fā)為主線，循序漸進的闡述Web前端的各項知識，通過三大模塊（圖2）Web知識儲備、Web案例提高、Web實戰(zhàn)演練，分別完成知識點講解、案例講解、項目實戰(zhàn)三大步驟，幫助學(xué)生把握前端的核心技術(shù)HTML5、CSS3、JavaScript，嵌入企業(yè)項目真實案例，應(yīng)用全新教材，依托行業(yè)企新技術(shù)，力求打造適應(yīng)新形勢，具有互聯(lián)網(wǎng)思維和技能的IT技術(shù)人才。本門課程總學(xué)時為64學(xué)時，3學(xué)分。圖2課程內(nèi)容思維導(dǎo)圖四、課程設(shè)計及安排序號項目名稱工作任務(wù)知識、能力、素質(zhì)教學(xué)情景或教學(xué)設(shè)計結(jié)果（作業(yè)、報告等）課時素質(zhì)內(nèi)容和要求知識內(nèi)容和要求技能內(nèi)容和要求1Web前端概述Web發(fā)展歷程Web前端當(dāng)前就業(yè)前景3.Web前端架構(gòu).4.Web前端開發(fā)工具1.逐步培養(yǎng)細心、耐心的工作態(tài)度。2.培養(yǎng)團隊協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語言表達能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握HTTP協(xié)議格式2.了解HTTP狀態(tài)碼識別3.什么是Web前端開發(fā)4.Web前端開發(fā)工具有哪些5.了解瀏覽器兼容性問題1.掌握HTTP協(xié)議格式2.代碼的書寫合適格式3.Web前端開發(fā)工具的使用該學(xué)習(xí)項目的教學(xué)環(huán)境是教學(xué)做一體化機房。學(xué)習(xí)環(huán)節(jié)1：通過分析，使學(xué)生了解Web前端技術(shù)相關(guān)軟件及其使用；學(xué)習(xí)環(huán)節(jié)2：學(xué)會利用圖形編輯軟件、Hbuilder設(shè)計制作Web前端頁面。作業(yè)：Web前端開發(fā)的構(gòu)成要素12Javascript入門JavaScript引入方式、語法風(fēng)格、注釋、輸出語句1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣具體團隊合作意識4.具有吃苦耐勞的品質(zhì)5.具有良好的網(wǎng)絡(luò)素養(yǎng)1.熟悉JavaScript的用途和發(fā)展?fàn)顩r2.理解JavaScript與ECMAScript的關(guān)系3.掌握JavaScript的基本使用方法1.掌握變量的定義與賦值2.掌握數(shù)據(jù)類型與運算符的使用學(xué)習(xí)環(huán)節(jié)1：什么是JavaScript；2.JavaScript的由來與發(fā)展；3.JavaScript的特點；4.開發(fā)工具介紹學(xué)習(xí)環(huán)節(jié)2：JavaScript的特點；JavaScript是腳本語言，具有腳本語言的一些特點：簡單、易學(xué)、易用。JavaScript可以跨平臺，開發(fā)和使用都非常方便，支持PC和移動端。JavaScript支持面向?qū)ο螅Q生了許多庫和框架，提高開發(fā)速度，能夠用來解決復(fù)雜問題。JavaScript與ECMAScript的關(guān)系；ECMAScript是一種規(guī)范標(biāo)準，用于統(tǒng)一JavaScript同類的語言，如JScript。學(xué)習(xí)環(huán)節(jié)3：【案例】第一個JavaScript程序?qū)W習(xí)環(huán)節(jié)4：JavaScript引入方式；學(xué)習(xí)環(huán)節(jié)5：JavaScript基本應(yīng)用--【動手實踐】驗證用戶輸入的密碼基本的算術(shù)運算2+13JavaScript基本語法1.網(wǎng)頁模塊拆分2.DIV標(biāo)簽的使用3.CSS3新增屬性4.盒子模型5.JavaScript中腳本的基本結(jié)構(gòu)6.JavaScript中語句的輸入輸出1.逐步培養(yǎng)細心、耐心的工作態(tài)度。2.培養(yǎng)團隊協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語言表達能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.理解標(biāo)識符的概念。2.熟悉關(guān)鍵字與保留字。1.掌握變量的定義與賦值2.掌握數(shù)據(jù)類型與運算符的使用3.掌握流程控制語句的使用 4.掌握變量的基本使用學(xué)習(xí)環(huán)節(jié)1：熟悉關(guān)鍵字與保留字；掌握變量的基本使用；掌握變量的賦值操作。學(xué)習(xí)環(huán)節(jié)2：數(shù)據(jù)類型分類、基本數(shù)據(jù)類型、數(shù)據(jù)類型檢測、數(shù)據(jù)類型轉(zhuǎn)換學(xué)習(xí)環(huán)節(jié)3：表達式、算術(shù)運算符、字符串運算符、賦值運算符、比較運算符學(xué)習(xí)環(huán)節(jié)4：邏輯運算符、三元運算符、位運算符、運算符優(yōu)先級、選擇結(jié)構(gòu)；學(xué)習(xí)環(huán)節(jié)5：循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語句學(xué)習(xí)環(huán)節(jié)6：【案例】打印金字塔。九九乘法口訣表的實現(xiàn)3+14函數(shù)函數(shù)的創(chuàng)建和使用、變量的作用域、匿名與回調(diào)函數(shù)、閉包函數(shù)1.逐步培養(yǎng)細心、耐心的工作態(tài)度。2.培養(yǎng)團隊協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語言表達能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握函數(shù)的使用方法2.掌握變量的作用域3.掌握匿名函數(shù)與閉包函數(shù)1.能夠進行函數(shù)的調(diào)用2.能夠書寫函數(shù)表達式學(xué)習(xí)環(huán)節(jié)1：對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進行答疑解惑；回顧前面學(xué)過的內(nèi)容，引出本節(jié)課主題；明確學(xué)習(xí)方向。學(xué)習(xí)環(huán)節(jié)2：初識函數(shù)、參數(shù)設(shè)置、函數(shù)的調(diào)用、變量的作用域?qū)W習(xí)環(huán)節(jié)3：函數(shù)表達式、匿名函數(shù)、回調(diào)函數(shù)學(xué)習(xí)環(huán)節(jié)4：函數(shù)嵌套與作用域鏈、遞歸調(diào)用學(xué)習(xí)環(huán)節(jié)5：什么是閉包函數(shù)、閉包函數(shù)的實現(xiàn)、動手實踐：網(wǎng)頁計算器簡易購物計算器的實現(xiàn)3+15BOMBOM組成結(jié)構(gòu)、BOM常用對象和方法、定時器窗口位置和大小、框架操作、history、screen1.逐步培養(yǎng)細心、耐心的工作態(tài)度。2.培養(yǎng)團隊協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語言表達能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.了解BOM的組成結(jié)構(gòu)2.掌握定時器的操作3.熟悉location與history對象1.能夠操作BOM對象2.能夠使用定時器制作倒計時3.能夠進窗口的操作學(xué)習(xí)環(huán)節(jié)1：（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進行答疑解惑。（2）回顧前面學(xué)過的內(nèi)容，引出本節(jié)課主題。在前面的學(xué)習(xí)中，用到的alert()、prompt()函數(shù)其實是window對象的方法，關(guān)于window對象具體如何使用，它有哪些常用的屬性和方法，將在本節(jié)進行具體講解。（3）明確學(xué)習(xí)方向。理解什么是BOM。掌握BOM的基本結(jié)構(gòu)。理解window對象與其他BOM對象的關(guān)系。掌握如何彈出對話框和窗口。掌握如何控制窗口位置和大小。掌握如何進行框架操作。掌握定時器的使用方法。學(xué)習(xí)環(huán)節(jié)2：什么是BOM對象、window對象學(xué)習(xí)環(huán)節(jié)3：【案例】限時秒殺學(xué)習(xí)環(huán)節(jié)4：location對象、案例：定時跳轉(zhuǎn)、history對象學(xué)習(xí)環(huán)節(jié)5：【案例】定時跳轉(zhuǎn)紅綠燈效果的實現(xiàn)3+16DOM獲取元素、元素操作、節(jié)點操作獲取節(jié)點、節(jié)點追加1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.了解什么是DOM2.掌握元素與樣式的操作3.掌握節(jié)點的操作1.能夠進行元素操作。2.能夠進行節(jié)點的操作。3.能夠獲取元素、添加節(jié)點學(xué)習(xí)環(huán)節(jié)1：在前面講解了BOM對象的使用，BOM對瀏覽器進行操作，而DOM用來對文檔進行操作，因此本節(jié)課將會講解如何利用DOM對象來對文檔進行操作。明確學(xué)習(xí)方向。 了解什么是DOM，DOM的版本和發(fā)展歷史。掌握HTML節(jié)點樹的概念，能夠說出節(jié)點之間的關(guān)系。認識常用的DOM對象，能夠區(qū)分元素與節(jié)點。掌握節(jié)點的類型。學(xué)習(xí)環(huán)節(jié)2：認識DOM、獲取元素、內(nèi)容操作、屬性操作、樣式操作學(xué)習(xí)環(huán)節(jié)3：獲取節(jié)點、節(jié)點追加、節(jié)點刪除學(xué)習(xí)環(huán)節(jié)4：動手實踐：購物車的實現(xiàn)網(wǎng)絡(luò)購物車的實現(xiàn)3+17JavaScript事件事件的綁定方式、事件對象、鼠標(biāo)事件、鍵盤事件1.逐步培養(yǎng)細心、耐心的工作態(tài)度。2.培養(yǎng)團隊協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語言表達能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握事件的綁定方式2.熟悉事件對象的使用3.掌握常用事件的實現(xiàn)1.能夠進行事件綁定。2.能夠獲取事件對象3.能夠?qū)⑹录ο髴?yīng)在網(wǎng)頁中學(xué)習(xí)環(huán)節(jié)1：回顧前面學(xué)過的內(nèi)容，引出本節(jié)課主題。學(xué)習(xí)環(huán)節(jié)2：事件概述、事件的綁定方式、獲取事件對象、常用屬性和方法；學(xué)習(xí)環(huán)節(jié)3：頁面事件、焦點事件、鼠標(biāo)事件學(xué)習(xí)環(huán)節(jié)4：【案例】：鼠標(biāo)拖拽特效學(xué)習(xí)環(huán)節(jié)5：鍵盤事件、表單事件、動手實踐：圖片放大特效鼠標(biāo)經(jīng)過效果的實現(xiàn)3+18jQuery基礎(chǔ)調(diào)試工具的使用，jQuery的下載、jQuery的引入方式j(luò)Query對象與DOM對象的轉(zhuǎn)換jQuery基本選擇器的使用1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.掌握jQuery的概念及優(yōu)勢2.掌握jQuery的下載和引入3.掌握jQuery對象與DOM對象的轉(zhuǎn)換4.熟悉開發(fā)和調(diào)試工具的使用5.掌握jquery基本選擇器1.能夠正確引入jQuery2.能夠書寫基本的jQuery代碼。3.能夠正確使用jQuery基本選擇器學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：jQuery的概念和版本介紹學(xué)習(xí)環(huán)節(jié)3：選擇器概念和基本選擇器學(xué)習(xí)環(huán)節(jié)4：學(xué)習(xí)環(huán)節(jié)5：jQuery基礎(chǔ)選擇器的使用3+19jQuery層級選擇器通過向$()方法中傳入選擇器來獲取元素。本章將通過分類的方式系統(tǒng)而全面深入地講解jQuery選擇器。1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.了解jQuery選擇器的優(yōu)勢2.掌握jQuery基本選擇器的使用3.掌握jQuery層次選擇器的使用4.熟悉jQuery過濾選擇器的使用1.能夠使用jQuery的層級選擇器進行頁面操作學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：層級選擇器和折疊式菜單學(xué)習(xí)環(huán)節(jié)3：基本過濾選擇器、可見性過濾選擇器和內(nèi)容過濾選擇器學(xué)習(xí)環(huán)節(jié)4：屬性過濾選擇器學(xué)習(xí)環(huán)節(jié)5：【案例】精品展示購物展示菜單的實現(xiàn)3+110jQuery操作DOMjQuery操作元素樣式的方法jQuery操作元素屬性的方法1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.掌握jQuery操作元素樣式的方法2.掌握jQuery操作元素屬性的方法3.掌握jQuery操作元素內(nèi)容的方法1.能夠使用jQuery操作元素樣式2.能夠使用jQuery操作元素屬性學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：jQuery操作元素樣式的方法學(xué)習(xí)環(huán)節(jié)3：jQuery操作元素屬性和內(nèi)容學(xué)習(xí)環(huán)節(jié)4：【案例】留言板理論知識測試3+111jQuery操作DOMjQuery操作元素內(nèi)容的方法jQuery操作DOM節(jié)點的方法jQuery操作元素屬性的方法1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)掌握jQuery操作DOM節(jié)點的方法了解jQuery鏈式編程的使用能夠使用jQuery操作元素內(nèi)容能夠使用jQuery操作DOM節(jié)點學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：jQuery操作DOM學(xué)習(xí)環(huán)節(jié)3：【案例】高亮顯示圖片的實現(xiàn)學(xué)習(xí)環(huán)節(jié)4：動手實踐：權(quán)限選擇案例權(quán)限選擇：全選與單選的實現(xiàn)3+112jQuery事件處理機制jQuery常用事件的使用方法jQuery事件冒泡的概念以及阻止事件冒泡的方式1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.了解jQuery的事件觸發(fā)機制2.熟悉jQuery事件綁定和事件解綁的方法3.熟悉jQuery事件對象的屬性和方法的使用4.掌握jQuery常用事件的使用方法5.掌握jQuery事件冒泡的概念以及阻止事件冒泡的方式1.能夠使用jQuery進行事件綁定與解綁2.能夠操作jQuery事件的對象屬性3.能夠?qū)Query事件應(yīng)用與頁面學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：頁面加載事件、鼠標(biāo)事件學(xué)習(xí)環(huán)節(jié)3：焦點事件、改變事件、星級評價案例星級評價案例的實現(xiàn)3+113jQuery事件處理機制jQuery常用事件的使用方法jQuery事件冒泡的概念以及阻止事件冒泡的方式1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.掌握jQuery綁定事件的方式2.掌握jQuery觸發(fā)事件的方式1.能夠使用jQuery進行事件綁定與解綁2.能夠操作jQuery事件的對象屬性3.能夠?qū)Query事件應(yīng)用與頁面學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：動態(tài)添加和刪除表格學(xué)習(xí)環(huán)節(jié)3：用戶單擊“添加數(shù)據(jù)”按鈕，彈出表單讓用戶輸入“課程名稱”、“所屬學(xué)院”；學(xué)習(xí)環(huán)節(jié)4：用戶在填入相關(guān)信息之后通過單擊“添加”按鈕讓表格添加一行新數(shù)據(jù)學(xué)習(xí)環(huán)節(jié)5：用戶單擊每一行末的“刪除”元素，將這一行數(shù)據(jù)刪除。動態(tài)添加和刪除表格的實現(xiàn)3+114jQuery動畫元素的顯示和隱藏、元素的淡入和淡出元素上滑和下滑、星空閃爍案例自定義動畫、停止元素動畫的方法判斷元素是否是動畫狀態(tài)、無縫輪播效果的實現(xiàn)1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.培養(yǎng)學(xué)生嚴謹求實的學(xué)習(xí)態(tài)度4.培養(yǎng)學(xué)生規(guī)范化的職業(yè)習(xí)慣5.培養(yǎng)學(xué)生相關(guān)協(xié)助的團隊意識6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.熟悉jQuery中常用動畫的使用2.掌握jQuery中如何自定義動畫3.掌握jQuery中停止動畫的作用及使用1.能夠使用jQuery動畫進行頁面操作2.能夠使用jQuery中的animate()創(chuàng)建自定義動畫3.能夠使用jQuery中的stop()方法停止動畫學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：元素的顯示和隱藏、元素的淡入和淡出學(xué)習(xí)環(huán)節(jié)3：元素上滑和下滑、星空閃爍案例學(xué)習(xí)環(huán)節(jié)4：自定義動畫、停止元素動畫的方法學(xué)習(xí)環(huán)節(jié)5：判斷元素是否是動畫狀態(tài)、無縫輪播效果的實現(xiàn)圖片輪播效果的實現(xiàn)3+115綜合信息網(wǎng)站的實現(xiàn)DIV的標(biāo)記；jQuery滾動圖片效果的實現(xiàn)；Bootstrap開源框架JavaScript表單驗證1.養(yǎng)成細心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁、發(fā)布網(wǎng)頁的習(xí)慣4.具體團隊合作意識5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)掌握.jQuery滾動圖片效果的實現(xiàn)；學(xué)會Bootstrap開源框架基本結(jié)構(gòu)的使用掌握JavaScript表單驗證的方法學(xué)會使用DIV的標(biāo)記；掌握jQuery滾動圖片效果的實現(xiàn)方式；了解Bootstrap開源框架學(xué)會使用JavaScript表單驗證學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：綜合信息網(wǎng)站框架的實現(xiàn)學(xué)習(xí)環(huán)節(jié)3：頁面頭部、banner及導(dǎo)航具體實現(xiàn)學(xué)習(xí)環(huán)節(jié)4：圖片瀏覽及新聞欄實現(xiàn)；學(xué)習(xí)環(huán)節(jié)5：房產(chǎn)、教育等信息欄的具體實現(xiàn)頁腳及W3C驗證；綜合信息網(wǎng)的實現(xiàn)6+216綜合項目實踐自行設(shè)計一款主題網(wǎng)站畫出頁面布局圖DIV劃分布局模塊實現(xiàn)頁面布局圖1.逐步培養(yǎng)細心、耐心的工作態(tài)度。2.培養(yǎng)團隊協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語言表達能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握CSS控制背景、超鏈接、列表樣式2.掌握使用jQuery元素的選取的使用3.掌握jQuery元素控制及CSS樣