《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》教學(xué)大綱（32課時）

JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版教學(xué)大綱（32課時版）課程名稱:JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計一、課程概況課程編號：20231201001開課部門：XX系學(xué)分：X學(xué)分學(xué)時：32學(xué)時（其中理論學(xué)時：20學(xué)時上機(jī)學(xué)時：12學(xué)時）先修課程：計算機(jī)基礎(chǔ)、計算機(jī)網(wǎng)絡(luò)、計算機(jī)應(yīng)用后續(xù)課程：數(shù)據(jù)庫應(yīng)用、軟件開發(fā)等適用專業(yè)：信息技術(shù)及其計算機(jī)相關(guān)專業(yè)二、課程描述JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計是學(xué)習(xí)Web前端開發(fā)的必修課程。本課程介紹了開發(fā)Web前端網(wǎng)頁應(yīng)具備的基礎(chǔ)知識，包括JavaScript技術(shù)入門以及jQuery選擇器與過濾器、事件、特效等知識。通過理論教學(xué)和上機(jī)練習(xí)訓(xùn)練學(xué)生編寫程序的熟練度和規(guī)范性；在項目經(jīng)驗的積累方面，通過完成項目案例，增加對實際軟件項目開發(fā)的經(jīng)驗。三、課程目標(biāo)知識目標(biāo)：了解Web原理基礎(chǔ)和前端新技術(shù)的由來，掌握J(rèn)avaScript數(shù)據(jù)類型與運(yùn)算符、語句與函數(shù)、BOM和DOM的應(yīng)用，掌握jQuery選擇器與過濾器、事件、特效、DOM、遍歷以及jQueryAJAX技術(shù)。技能目標(biāo)：能綜合應(yīng)用HTML5、CSS3與JavaScript技術(shù)開發(fā)Web項目，能夠在開發(fā)過程中熟練掌握J(rèn)avaScript函數(shù)的封裝和使用、jQuery各類選擇器的使用和樣式的表達(dá)，以及jQueryAJAX技術(shù)的應(yīng)用，提高開發(fā)者網(wǎng)頁前端實戰(zhàn)項目分析能力以及強(qiáng)化綜合應(yīng)用能力。四、教學(xué)要求一、嚴(yán)格按照課表規(guī)定的時間、地點(diǎn)上課，不遲到、不早退。二、根據(jù)大綱要求，認(rèn)真?zhèn)湔n完成教案與講稿編寫等各項課前準(zhǔn)備工作；授課過程力求內(nèi)容充實、概念準(zhǔn)確、思路清晰、詳略得當(dāng)、邏輯性強(qiáng)、重難點(diǎn)突出，力戒平鋪直敘、照本宣科，三、重視對學(xué)生的學(xué)習(xí)方法指導(dǎo)和課堂教學(xué)效果信息的反饋，實現(xiàn)教與學(xué)的雙向互動；四、做好考核內(nèi)容設(shè)計，并嚴(yán)格按照大綱要求做好出勤率統(tǒng)計、作業(yè)評價。五、學(xué)生根據(jù)課程大綱要求制定本門課程學(xué)習(xí)計劃，加強(qiáng)學(xué)業(yè)管理，嚴(yán)格自我要求，提升自主學(xué)習(xí)能力，主動適應(yīng)課程學(xué)習(xí)要求。參與課堂教學(xué)活動不遲到、不早退，無正當(dāng)理由不請假，上課認(rèn)真聽講，不做任何與課堂教學(xué)無關(guān)事宜，不使用手機(jī)，積極與授課教師進(jìn)行教學(xué)互動，同時利用課余時間做好預(yù)習(xí)、復(fù)習(xí)、課外書籍閱讀等工作，主動與同學(xué)開展合作學(xué)習(xí)，認(rèn)真完成任課教師布置的課程作業(yè)。五、課程內(nèi)容第1章 概述一、教學(xué)目標(biāo)：1. 了解JavaScript的概念與特點(diǎn)；2. 了解jQuery的概念與特點(diǎn)；3. 掌握任意一款Web開發(fā)工具。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：熟悉JavaScript和jQuery的概念與特點(diǎn)；難點(diǎn)：jQuery的版本比較。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章是全書的緒論部分，主要介紹JavaScript、jQuery概述以及Web開發(fā)工具的選擇。JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術(shù)，當(dāng)今所有瀏覽器都支持JavaScript，無需額外安裝第三方插件。而jQuery是一個輕量級的跨平臺JavaScript函數(shù)庫，它化簡了JavaScript代碼復(fù)雜度，其語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實現(xiàn)JavaScript特效與動畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。第2章 JavaScript入門一、教學(xué)目標(biāo)：1. 了解JavaScript的使用方式；2. 了解JavaScript的基本語法規(guī)則；3. 熟悉JavaScript的變量聲明與命名規(guī)范。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：了解JavaScript的基本語法規(guī)則；難點(diǎn)：JavaScript的使用方式（內(nèi)部和外部的用法）。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要內(nèi)容是JavaScript基礎(chǔ)知識，包括JavaScript的使用方式、語法規(guī)則、變量聲明與明明規(guī)范等內(nèi)容。第3章 JavaScript數(shù)據(jù)類型與運(yùn)算符一、教學(xué)目標(biāo)：1. 掌握J(rèn)avaScript的基本數(shù)據(jù)類型與對象類型；2. 掌握J(rèn)avaScript類型轉(zhuǎn)換方法；3. 掌握J(rèn)avaScript運(yùn)算符的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：JavaScript的基本數(shù)據(jù)類型與對象類型；難點(diǎn)：JavaScript類型轉(zhuǎn)換方法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要內(nèi)容是JavaScript基礎(chǔ)知識，包括JavaScript的使用、語法、變量等內(nèi)容?；緮?shù)據(jù)類型、對象、類型轉(zhuǎn)換、運(yùn)算符、條件和循環(huán)語句、函數(shù)、DOM與BOM的用法。第4章 JavaScript語句與函數(shù)一、教學(xué)目標(biāo)：1. 掌握J(rèn)avaScript條件語句的用法；2. 掌握J(rèn)avaScript循環(huán)語句的用法；3. 掌握J(rèn)avaScript函數(shù)的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：JavaScript語句；難點(diǎn)：JavaScript函數(shù)的使用。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要內(nèi)容是JavaScript語句與函數(shù)，包括JavaScript的條件語句、循環(huán)語句的使用，以及JavaScript函數(shù)的應(yīng)用。第5章 JavaScriptBOM和DOM一、教學(xué)目標(biāo)：1. 掌握J(rèn)avaScriptDOM的用法；2. 掌握J(rèn)avaScriptBOM的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：JavaScriptDOM的用法；難點(diǎn)：JavaScriptBOM的用法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要內(nèi)容是JavaScript文檔對象模型DOM和瀏覽器對象模型BOM的用法，在DOM部分主要包括對HTML元素的查找、動態(tài)創(chuàng)建、內(nèi)容/屬性修改，以及事件和節(jié)點(diǎn)；在BOM部分主要包括了5種常用對象。第6章jQuery入門一、教學(xué)目標(biāo)：1. 了解jQuery的下載與使用；2. 掌握jQuery的基礎(chǔ)語法結(jié)構(gòu)；3. 掌握jQuery文檔就緒函數(shù)的用法；4. 掌握jQuery名稱沖突的解決方案。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery的基礎(chǔ)語法結(jié)構(gòu)；難點(diǎn)：jQuery名稱沖突的解決方案。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹jQuery基礎(chǔ)知識入門，包括jQuery的下載和使用、jQuery基礎(chǔ)語法結(jié)構(gòu)、jQuery文檔就緒函數(shù)以及jQuery名稱沖突的解決方案。第7章jQuery選擇器與過濾器一、教學(xué)目標(biāo)：1. 理解jQuery選擇器和過濾器的作用；2. 掌握jQuery選擇器的常見用法；3. 掌握jQuery過濾器的常見用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery選擇器的用法；難點(diǎn)：jQuery過濾器的用法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹jQuery選擇器與jQuery過濾器的相關(guān)知識。jQuery選擇器包括基礎(chǔ)選擇器、屬性選擇器、表單選擇器、層次選擇器以及CSS選擇器；jQuery過濾器包括基礎(chǔ)過濾器、子元素過濾器、內(nèi)容過濾器和可見性過濾器。第8章jQuery事件一、教學(xué)目標(biāo)：1. 了解jQuery事件的基礎(chǔ)語法格式；2. 掌握常見jQuery文檔/窗口事件的用法；3. 掌握常見jQuery鍵盤事件的用法；4. 掌握常見jQuery鼠標(biāo)事件的用法；5. 掌握常見jQuery表單事件的用法；6. 掌握jQuery事件綁定與解除的用法；7. 掌握jQuery臨時事件的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery的各類事件（文檔/窗口、鍵盤、鼠標(biāo)、表單）；難點(diǎn)：jQuery事件綁定與解除。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹jQuery事件的相關(guān)知識，包括jQuery事件的含義及語法格式、常用jQuery事件以及jQuery事件的綁定與解除。第9章jQuery特效一、教學(xué)目標(biāo)：1. 掌握jQuery隱藏/顯示相關(guān)函數(shù)hide()、show()和toggle()的用法；2. 掌握jQuery淡入/淡出相關(guān)函數(shù)fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法；3. 掌握jQuery滑動相關(guān)函數(shù)slideDown()、slideUp()、slideToggle()的用法；4. 掌握jQuery動畫（Animation）的用法；5. 掌握jQuery方法鏈接（Chaining）的用法；6. 掌握jQuery停止動畫相關(guān)函數(shù)stop()的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery常用特效（隱藏/顯示、淡入淡出、滑動）；難點(diǎn)：jQuery動畫和方法鏈接的用法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹jQuery常用特效，包括jQuery隱藏和顯示、淡入和淡出、滑動、動畫、方法鏈接以及停止動畫效果。第10章jQueryHTMLDOM一、教學(xué)目標(biāo)：1. 掌握jQuery獲取和設(shè)置相關(guān)函數(shù)text()、html()、val()、attr()、css()的使用；2. 掌握jQuery添加相關(guān)函數(shù)append()和prepend()、after()和before()的使用；3. 掌握jQuery刪除相關(guān)函數(shù)remove()、empty()和removeAttr()的使用；4. 掌握jQuery類屬性設(shè)置相關(guān)函數(shù)addClass()、removeClass()和toggleClass()的使用；5. 掌握jQuery尺寸相關(guān)width()、height()系列函數(shù)的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery常用DOM函數(shù)的用法（獲取/設(shè)置、添加、刪除）；難點(diǎn)：jQuery類屬性設(shè)置相關(guān)函數(shù)的使用。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：DOM指的是DocumentObjectModel（文檔對象模型），jQuery提供了一系列與DOM相關(guān)的方法能讓用戶更方便的選擇和操作HTML文檔中的元素及其屬性。本章主要內(nèi)容是jQueryHTMLDOM技術(shù)的應(yīng)用，包括jQuery獲取和設(shè)置、添加、刪除、類屬性設(shè)置以及尺寸相關(guān)函數(shù)的應(yīng)用。第11章jQuery遍歷一、教學(xué)目標(biāo)：1. 了解什么是HTML家族樹結(jié)構(gòu)；2. 掌握jQuery后代遍歷相關(guān)函數(shù)children()、find()的使用；3. 掌握jQuery同胞遍歷相關(guān)函數(shù)siblings()、next()系列函數(shù)、prev()系列函數(shù)的使用；4. 掌握jQuery祖先遍歷相關(guān)函數(shù)parent()、parents()、parentsUntil()的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery后代和同胞遍歷相關(guān)函數(shù)的用法；難點(diǎn)：jQuery祖先遍歷相關(guān)函數(shù)的用法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：jQuery遍歷指的是在HTML頁面上沿著某個指定元素節(jié)點(diǎn)位置進(jìn)行移動，直到查找到需要的HTML元素為止。本章主要內(nèi)容是jQuery遍歷技術(shù)的應(yīng)用，包括HTML家族樹概念的介紹、jQuery后代遍歷、同胞遍歷以及祖先遍歷的相關(guān)函數(shù)用法。第12章jQueryAJAX技術(shù)一、教學(xué)目標(biāo)：1. 了解什么是AJAX以及AJAX技術(shù)的組成部分；2. 了解什么是jQueryAJAX；3. 掌握jQueryload()、get()、post()以及ajax()等常用方法的使用；4. 掌握jQueryAJAX事件的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：掌握jQueryAJAX常用方法（load、get、post和ajax）；難點(diǎn)：jQueryAJAX事件的用法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：AJAX是一種可以與服務(wù)器異步交互數(shù)據(jù)的網(wǎng)頁開發(fā)技術(shù)，使用該技術(shù)可以在不重新加載整個頁面的前提下直接更新當(dāng)前頁面中的指定內(nèi)容。本章主要內(nèi)容是jQueryAJAX技術(shù)的應(yīng)用，包括jQueryAJAX技術(shù)簡介、常用方法和事件處理三個部分組成。第13章天氣預(yù)報查詢的設(shè)計與實現(xiàn)一、教學(xué)目標(biāo)：1. 學(xué)習(xí)掌握第三方服務(wù)平臺密鑰申請和調(diào)用方法；2. 學(xué)習(xí)掌握J(rèn)avaScript和jQuery基礎(chǔ)知識；3. 學(xué)習(xí)掌握jQueryAJAX的用法實現(xiàn)服務(wù)器請求和回調(diào)處理。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery中ID選擇器、類選擇器等各類選擇器的綜合應(yīng)用；難點(diǎn)：jQueryajax()方法的理解與應(yīng)用。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章將從零開始詳解如何調(diào)用第三方服務(wù)平臺接口制作一款天氣預(yù)報查詢程序。通過對完整項目實例的解析與實現(xiàn)，提高開發(fā)者項目分析能力以及強(qiáng)化對于JavaScript和jQuery的綜合應(yīng)用能力。第14章思政答題程序的設(shè)計與實現(xiàn)一、教學(xué)目標(biāo)：1. 學(xué)習(xí)掌握服務(wù)器的部署和啟停；2. 學(xué)習(xí)掌握J(rèn)SON格式文件制作題庫數(shù)據(jù)和接口的編寫；3. 學(xué)習(xí)掌握J(rèn)avaScript和jQuery基礎(chǔ)知識；4. 學(xué)習(xí)掌握jQueryAJAX的用法實現(xiàn)服務(wù)器請求和回調(diào)處理。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQueryAJAX的用法實現(xiàn)服務(wù)器請求和回調(diào)處理；難點(diǎn)：JSON格式文件制作題庫數(shù)據(jù)和接口的編寫。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章將從零開始詳解如何開發(fā)實現(xiàn)一個基于Windows+Apache/Nginx+PHP服務(wù)器環(huán)境的思政答題程序。通過對完整項目實例的解析與實現(xiàn)，提高開發(fā)者項目分析能力以及強(qiáng)化對于JavaScript和jQuery的綜合應(yīng)用能力。六、實驗環(huán)節(jié)本課程建議課內(nèi)上機(jī)12個學(xué)時，針對每章節(jié)知識點(diǎn)進(jìn)行基礎(chǔ)項目案例開發(fā)訓(xùn)練。教師可根據(jù)實際情況從相關(guān)章節(jié)的階段案例一節(jié)選取上機(jī)的具體內(nèi)容。該書除了概述和入門介紹章節(jié)外，其余每章節(jié)均配有一個階段案例，外加本書的最后2章均為綜合案例，教師可每次選擇對應(yīng)章節(jié)中一個案例作為上機(jī)課主題，最后2章綜合案例作為期末課程實訓(xùn)（可選）的內(nèi)容。具體安排見下表。章節(jié)上機(jī)課時實驗內(nèi)容第1章概述0無第2章JavaScript入門1JavaScript彈窗第3章JavaScript數(shù)據(jù)類型與運(yùn)算符1生肖計算第4章JavaScript語句和函數(shù)1猜數(shù)字小游戲第5章JavaScriptDOM和BOM1Nim博弈小游戲第6章jQuery入門1jQuery的下載和使用第7章jQuery選擇器與過濾器1網(wǎng)頁一鍵換膚第8章jQuery事件2鼠標(biāo)懸停切換圖片第9章jQuery特效動態(tài)下拉菜單特效第10章jQueryHTMLDOM2簡易留言版第11章jQuery遍歷仿電商購物車效果第12章jQueryAJAX2簡易單詞查詢第13章綜合設(shè)計示例1（選學(xué)）課程實訓(xùn)天氣預(yù)報查詢第14章綜合設(shè)計示例2（選學(xué)）課程實訓(xùn)思政答題平臺上機(jī)實驗環(huán)節(jié)可以鞏固學(xué)生對理論知識的理解，提高學(xué)生的實