JavaScript jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）-教案全套 劉凡馨

PAGE2/22/2教案課程名稱JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（微課版）課程代碼系(部)教研室(實驗室)授課教師職稱年月PAGE9課程名稱JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（微課版）總計：64學(xué)時課程類別專業(yè)課課程代碼講授：42學(xué)時實驗：20學(xué)時其他：學(xué)時授課教師學(xué)分授課對象教材和主要參考資料教材：劉凡馨夏幫貴，《JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（微課版）》，人民郵電出版社，2024.8參考資料：[美]達(dá)克特（JonDuckett）著《JaveScript&jQuery交互式Web前端開發(fā)》第2版，清華大學(xué)出版社，2015.6課程簡介本課程注重基礎(chǔ)、循序漸進(jìn)，系統(tǒng)地講述了JavaScript和jQuery前端開發(fā)的相關(guān)基礎(chǔ)知識。JavaScript部分涵蓋了JavaScript簡介、核心語法基礎(chǔ)、數(shù)組和函數(shù)、異常和事件處理、JavaScript對象、瀏覽器對象等主要內(nèi)容。jQuery部分涵蓋了jQuery簡介、選擇器和過濾器、操作頁面元素、jQuery事件處理、jQuery特效、jQueryAJAX等主要內(nèi)容。最后綜合應(yīng)用本書介紹的各種知識，實現(xiàn)一個在線咨詢服務(wù)系統(tǒng)。對于每一個知識點(diǎn)，都盡量結(jié)合實例幫助讀者學(xué)習(xí)理解。第1～12章的每章最后部分還給出了一個編程實踐來說明本章知識的使用。教學(xué)難點(diǎn)重點(diǎn)第1章JavaScript簡介JavaScript簡介、JavaScript編程工具、在HTML中使用JavaScript、JavaScript基本語法第2章JavaScript核心語法基礎(chǔ)數(shù)據(jù)類型和變量、運(yùn)算符與表達(dá)式、流程控制語句第3章數(shù)組和函數(shù)數(shù)組、函數(shù)、內(nèi)置函數(shù)第4章異常和事件處理異常處理、事件處理處理第5章JavaScript對象對象、原型對象和繼承、內(nèi)置對象、類第6章瀏覽器對象Window對象、Document對象、表單對象第7章jQuery簡介了解jQuery、jQuery資源、使用jQuery第8章jQuery選擇器和過濾器基礎(chǔ)選擇器、層級選擇器、過濾器第9章操作頁面元素元素內(nèi)容操作、插入內(nèi)容、包裝內(nèi)容、替換內(nèi)容、刪除內(nèi)容、復(fù)制內(nèi)容、樣式操作教學(xué)難點(diǎn)重點(diǎn)第10章jQuery事件處理jQuery事件對象、附加和解除事件處理函數(shù)、事件快捷方法第11章jQuery特效簡單特效、透明度特效、滑動特效、自定義動畫、動畫相關(guān)的屬性和方法第12章AJAX使用XMLHTTPRequest、使用jQuery加載服務(wù)器數(shù)據(jù)、get()和post()方法、獲取JSON數(shù)據(jù)、獲取腳本、事件處理第13章在線咨詢服務(wù)系統(tǒng)系統(tǒng)設(shè)計、安裝和使用MySQL、系統(tǒng)實現(xiàn)授課題目：第1章JavaScript基礎(chǔ)授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：2實驗課：2教學(xué)大綱要求：讓學(xué)生了解JavaScript版本、特點(diǎn)，掌握J(rèn)avaScript編程工具VisualStudioCode，熟悉JavaScript基本語法。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：JavaScript編程工具VisualStudioCode、JavaScript基本語法難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：1.1JavaScript簡介1.1.1JavaScript版本 1.1.2JavaScript特點(diǎn)1.2JavaScript編程工具1.2.1下載安裝VisualStudioCode1.2.2使用VisualStudioCode1.2.3使用瀏覽器開發(fā)人員工具1.3在HTML中使用JavaScript 1.3.1嵌入式JavaScript腳本1.3.2鏈接JavaScript腳本1.4JavaScript基本語法1.4.1區(qū)分大小寫 1.4.2可忽略空格、換行符和制1.4.3不強(qiáng)制使用語句結(jié)束符號1.4.4注釋 1.4.5標(biāo)識符命名規(guī)則 1.4.6輸入和輸出語句 實驗課內(nèi)容：1.5編程實踐：在頁面中輸出唐詩授課題目：第2章JavaScript核心語法基礎(chǔ)授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：4實驗課：1教學(xué)大綱要求：讓學(xué)生掌握數(shù)據(jù)類型和變量、運(yùn)算符與表達(dá)式、流程控制語句。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：數(shù)據(jù)類型和變量、運(yùn)算符與表達(dá)式難點(diǎn)：流程控制語句作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：2.1數(shù)據(jù)類型和變量2.1.1數(shù)據(jù)類型2.1.2數(shù)據(jù)類型轉(zhuǎn)換2.1.3變量 2.2運(yùn)算符與表達(dá)式2.2.1算術(shù)運(yùn)算符2.2.2字符串運(yùn)算符2.2.3關(guān)系運(yùn)算符2.2.4邏輯運(yùn)算符2.2.5位運(yùn)算符2.2.6賦值運(yùn)算符2.2.7特殊運(yùn)算符2.2.8運(yùn)算符的優(yōu)先級2.2.9表達(dá)式中的數(shù)據(jù)類型2.3流程控制語句2.3.1if語句2.3.2switch語句2.3.3for循環(huán)2.3.4while循環(huán)2.3.5do/while循環(huán)2.3.6continue語句2.3.7break語句實驗課內(nèi)容：2.4編程實踐：根據(jù)用戶選擇顯示名著作者授課題目：第3章數(shù)組和函數(shù)授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：5實驗課：1教學(xué)大綱要求：讓學(xué)生掌握數(shù)組、函數(shù)和內(nèi)置函數(shù)。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：數(shù)組、函數(shù)和內(nèi)置函數(shù)難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：3.1數(shù)組 3.1.1創(chuàng)建數(shù)組 3.1.2使用數(shù)組 3.1.3數(shù)組的屬性 3.1.4操作數(shù)組的方法3.2函數(shù) 3.2.1定義函數(shù) 3.2.2調(diào)用函數(shù) 3.2.3帶參數(shù)的函數(shù) 3.2.4嵌套函數(shù) 3.2.5遞歸函數(shù) 3.3內(nèi)置函數(shù) 實驗課內(nèi)容：3.4編程實踐：模擬漢諾塔移動授課題目：第4章異常和事件處理授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：2實驗課：1教學(xué)大綱要求：讓學(xué)生掌握異常處理、事件處理。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：異常處理、事件處理難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：4.1異常處理4.1.1捕獲和處理異常4.1.2拋出異常4.2事件處理4.2.1理解事件 4.2.2注冊事件處理程序 4.2.3事件處理程序的調(diào)用 4.2.4阻止事件傳播4.2.5頁面加載與卸載事件4.2.6鼠標(biāo)事件4.2.7鍵盤事件4.2.8表單提交事件實驗課內(nèi)容：4.3編程實踐：響應(yīng)鼠標(biāo)操作授課題目：第5章JavaScript對象授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：2實驗課：2教學(xué)大綱要求：讓學(xué)生掌握使用對象、原型對象和繼承、內(nèi)置對象、類。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：使用對象、原型對象和繼承、內(nèi)置對象難點(diǎn)：原型對象和繼承、類作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：5.1對象 5.1.1創(chuàng)建對象 5.1.2使用對象屬性 5.1.3對象的方法 5.1.4構(gòu)造函數(shù) 5.1.5with語句 5.2原型對象和繼承 5.3內(nèi)置對象 5.3.1Math對象 5.3.2Date對象 5.3.3String對象 5.4類 5.4.1使用工廠函數(shù)定義類 5.4.2使用構(gòu)造函數(shù)定義類 5.4.3使用class關(guān)鍵字定義類 5.4.4為類添加和修改方法 5.4.5子類 實驗課內(nèi)容：5.4編程實踐：輸出隨機(jī)素數(shù)授課題目：第6章瀏覽器對象授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：2實驗課：1教學(xué)大綱要求：讓學(xué)生掌握Window對象、Document對象和表單對象。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：Window對象、Document對象和表單對象難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：6.1Window對象6.1.1Window對象層次結(jié)構(gòu)6.1.2Window對象的常用屬性和方法6.1.3定時操作6.1.4錯誤處理 6.1.5Navigator對象6.1.6Screen對象 6.1.7窗口操作 6.1.8用ID引用HTML標(biāo)記6.2Document對象6.2.1常用屬性和方法6.2.2動態(tài)輸出文檔6.2.3了解DOM 6.2.4獲得HTML標(biāo)記的引用 6.2.5遍歷文檔結(jié)點(diǎn) 6.2.6訪問HTML標(biāo)記屬性 6.2.7訪問HTML標(biāo)記內(nèi)容6.2.8創(chuàng)建、添加和刪除結(jié)點(diǎn)6.3表單對象 6.3.1引用表單和表單元素6.3.2表單事件實驗課內(nèi)容：6.4編程實踐：選項卡切換授課題目：第7章jQuery簡介授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：1實驗課：1教學(xué)大綱要求：讓學(xué)生了解jQuery、jQuery資源，掌握如何在頁面中使用jQuery教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：掌握如何在頁面中使用jQuery難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：7.1了解jQuery 7.1.1jQuery主要功能 7.1.2jQuery主要特點(diǎn) 7.2jQuery資源 7.2.1下載jQuery 7.2.2查看jQuery文檔 7.2.3jQuery學(xué)習(xí)中心 7.2.4中文學(xué)習(xí)資源 7.3使用jQuery 7.3.1引入jQuery 7.3.2jQuery語法 7.3.3選取HTML標(biāo)記 7.3.4上下文 7.3.5將HTML標(biāo)記轉(zhuǎn)換為jQuery對象 7.3.6使用鏈接方法調(diào)用 7.3.7jQuery命名空間 實驗課內(nèi)容：7.4編程實踐：在頁面加載視頻授課題目：第8章jQuery選擇器和過濾器授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：4實驗課：2教學(xué)大綱要求：讓學(xué)生掌握基礎(chǔ)選擇器、層級選擇器和過濾器。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：基礎(chǔ)選擇器、層級選擇器和過濾器難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：8.1基礎(chǔ)選擇器 8.1.1ID選擇器 8.1.2類名選擇器 8.1.3元素選擇器 8.1.4復(fù)合選擇器 8.1.5通配符選擇器 8.2層級選擇器 8.2.1祖孫選擇器 8.2.2父子選擇器 8.2.3相鄰節(jié)點(diǎn)選擇器 8.2.4兄弟節(jié)點(diǎn)選擇器 8.3過濾器 8.3.1基礎(chǔ)過濾器 8.3.2內(nèi)容過濾器 8.3.3子元素過濾器 8.3.4可見性過濾器 8.3.5表單過濾器 8.3.6屬性過濾器 實驗課內(nèi)容：8.5編程實踐：動態(tài)提示授課題目：第9章操作頁面元素授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：4實驗課：2教學(xué)大綱要求：讓學(xué)生掌握元素內(nèi)容操作、插入結(jié)點(diǎn)、包裝結(jié)點(diǎn)、替換結(jié)點(diǎn)、刪除結(jié)點(diǎn)、復(fù)制結(jié)點(diǎn)和樣式操作。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：掌握元素內(nèi)容操作、插入內(nèi)容、包裝內(nèi)容、替換內(nèi)容、刪除內(nèi)容、復(fù)制內(nèi)容和樣式操作難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：9.1元素內(nèi)容操作 9.1.1html()和text()方法 9.1.2val()方法 9.1.3attr()方法 9.2插入內(nèi)容9.2.1append()和appendTo()方法 9.2.2prepend()方法和prependTo()方法 9.2.3after()方法和insertAfter()方法 9.2.4before()方法和insertBefore()方法9.3包裝內(nèi)容 9.3.1wrap()方法 9.3.2wrapAll()方法 9.3.3wrapInner()方法 9.3.4unwrap()方法 9.4替換內(nèi)容 9.4.1replaceWith()方法 9.4.2replaceAll()方法 9.5刪除內(nèi)容 9.5.1empty()方法 9.5.2remove()方法 9.5.3detach()方法 9.6復(fù)制內(nèi)容 9.7樣式操作 9.7.1css()方法 9.7.2CSS類操作方法 實驗課內(nèi)容：9.8編程實踐：jQuery版的選項卡切換授課題目：第10章jQuery事件處理授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：2實驗課：1教學(xué)大綱要求：讓學(xué)生掌握jQuery事件對象、附加和解除事件處理函數(shù)、事件快捷方法。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：掌握jQuery事件對象、附加和解除事件處理函數(shù)、事件快捷方法難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：10.1jQuery事件對象 10.1.1事件對象構(gòu)造函數(shù) 10.1.2事件對象屬性 10.1.3事件對象方法 10.2附加和解除事件處理函數(shù)10.2.1附加事件處理函數(shù)10.2.2解除事件處理函數(shù)10.3事件快捷方法 10.3.1瀏覽器事件快捷方法10.3.2表單事件快捷方法10.3.3鍵盤事件快捷方法 實驗課內(nèi)容：10.4編程實踐：jQuery版的自由拖放授課題目：第11章jQuery特效授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：4實驗課：2教學(xué)大綱要求：讓學(xué)生掌握簡單特效、透明度特效、滑動特效、自定義動畫、動畫相關(guān)的屬性和方法。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：簡單特效、透明度特效、滑動特效、自定義動畫、動畫相關(guān)的屬性和方法難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：11.1簡單特效 11.1.1隱藏元素 11.1.2顯示元素 11.1.3隱藏/顯示切換 11.2透明度特效 11.2.1淡入效果 11.2.2淡出效果 11.2.3調(diào)整透明度 11.2.4淡入淡出切換 11.3滑動特效 11.3.1滑入效果 11.3.2滑出效果 11.3.3滑入滑出切換效果 11.4自定義動畫 11.4.1字面量動畫 11.4.2相對量動畫 11.4.3自定義顯示或隱藏 11.4.4位置動畫 11.5動畫相關(guān)的屬性和方法 11.5.1動畫延時 11.5.2停止動畫 11.5.3結(jié)束動畫 11.5.4禁止動畫效果 實驗課內(nèi)容：11.6編程實踐：動態(tài)顯示和隱藏選項卡內(nèi)容授課題目：第12章AJAX授課方式（請打√）理論課□討論課□實驗課□習(xí)題課□其他□課時安排理論課：6實驗課：2教學(xué)大綱要求：讓學(xué)生掌握加載服務(wù)器數(shù)據(jù)、get()和post()方法、獲取JSON數(shù)據(jù)、獲取腳本、事件處理。教學(xué)重點(diǎn)及難點(diǎn)：重點(diǎn)：加載服務(wù)器數(shù)據(jù)、get()和post()方法、獲取JSON數(shù)據(jù)、獲取腳本、事件處理難點(diǎn)：作業(yè)、討論題、思考題：課后習(xí)題課后總結(jié)分析：教學(xué)內(nèi)容備注理論課主要教學(xué)內(nèi)容：12.1使用XMLHttpRequest 12.1.1AJAX概述 12.1.2部署服務(wù)