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

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