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