《交互式Web開(kāi)發(fā)》實(shí)驗(yàn)教學(xué)大綱

課程代碼3080000123課程名稱(chēng)交互式Web開(kāi)發(fā)適用專(zhuān)業(yè)軟件工程專(zhuān)業(yè)先修課程Web前端技術(shù)實(shí)驗(yàn)性質(zhì)非獨(dú)立設(shè)課開(kāi)設(shè)學(xué)期4實(shí)驗(yàn)方式上機(jī)操作周數(shù)（學(xué)時(shí)）24學(xué)分1課程目標(biāo)（1）職業(yè)規(guī)范與道德修養(yǎng)：通過(guò)學(xué)習(xí)JavaScript和jQuery的理論和實(shí)踐知識(shí)，培養(yǎng)學(xué)生的職業(yè)素養(yǎng)和工匠精神，樹(shù)立規(guī)則和大局觀意識(shí)。（2）分析與設(shè)計(jì)能力：能夠應(yīng)用JavaScript和jQuery基礎(chǔ)知識(shí)，分析WEB開(kāi)發(fā)交互環(huán)節(jié)的實(shí)際問(wèn)題，設(shè)計(jì)符合用戶需求和設(shè)計(jì)規(guī)范且具有交互功能的頁(yè)面，并能夠在設(shè)計(jì)環(huán)節(jié)中體現(xiàn)創(chuàng)新意識(shí)，考慮經(jīng)濟(jì)、社會(huì)、法律、文化等問(wèn)題。（3）綜合應(yīng)用能力：能夠基于項(xiàng)目分析，運(yùn)用HTML、CSS和JavaScript這3種語(yǔ)言，借助jQuery主流框架，實(shí)現(xiàn)項(xiàng)目Web前端的頁(yè)面結(jié)構(gòu)搭建、頁(yè)面樣式設(shè)置、頁(yè)面交互設(shè)計(jì)。（4）終身學(xué)習(xí)能力：能夠跟蹤Web開(kāi)發(fā)前沿，了解交互設(shè)計(jì)的趨勢(shì)，持續(xù)提高分析和編寫(xiě)代碼的能力，不斷拓展框架使用的手段和方法，提升職業(yè)素養(yǎng)，適應(yīng)Web開(kāi)發(fā)行業(yè)及相關(guān)職業(yè)發(fā)展。教學(xué)要求完成課程后，學(xué)生將具備以下能力：（1）能夠使用

JavaScrip及jQuery框架進(jìn)行Web開(kāi)發(fā),

增強(qiáng)網(wǎng)頁(yè)的交互性；（2）掌握綜合分析能力，解決專(zhuān)業(yè)相關(guān)實(shí)際問(wèn)題；（3）通過(guò)討論、實(shí)驗(yàn)實(shí)訓(xùn)、撰寫(xiě)報(bào)告等方式提升有效溝通；（4）理解并遵守Web開(kāi)發(fā)領(lǐng)域的職業(yè)道德和規(guī)范。一、實(shí)驗(yàn)的性質(zhì)、目的和任務(wù)1.

性質(zhì)本課程的實(shí)驗(yàn)性質(zhì)是非獨(dú)立設(shè)置實(shí)驗(yàn)課，在實(shí)驗(yàn)實(shí)訓(xùn)室中采用上機(jī)操作進(jìn)行。2.

目的通過(guò)開(kāi)展實(shí)驗(yàn)，可以讓學(xué)生掌握如何使用JavaScript實(shí)現(xiàn)良好的網(wǎng)頁(yè)交互、如何使用jQuery及插件高效開(kāi)發(fā)網(wǎng)頁(yè)，以及如何使用面向?qū)ο缶幊痰乃枷腴_(kāi)發(fā)項(xiàng)目。3.

任務(wù)（1）掌握VSCode工具下載、安裝和環(huán)境搭建方法。（2）掌握J(rèn)avaScript中變量、數(shù)據(jù)類(lèi)型、數(shù)組、程序控制流、函數(shù)等的基本使用。（3）掌握J(rèn)avaScript中對(duì)象的使用和基本操作、Math、Date和BOM等對(duì)象的使用、類(lèi)的聲明、定義、繼承以及原型鏈機(jī)制。（4）掌握DOM元素的獲取和節(jié)點(diǎn)的操作方法、事件的監(jiān)聽(tīng)方法和事件對(duì)象的使用。（6）掌握jQuery中選擇器的使用、選中結(jié)果集的管理方法、鏈?zhǔn)秸{(diào)用的方法。（7）掌握jQuery中控制元素屬性、樣式和內(nèi)容，操作頁(yè)面元素的方法。（8）掌握jQuery中設(shè)置事件監(jiān)聽(tīng)，事件對(duì)象的使用和觸發(fā)事件的方法。（9）掌握jQuery中制作自定義動(dòng)畫(huà)的方法。二、實(shí)驗(yàn)的基本內(nèi)容和要求序號(hào)實(shí)驗(yàn)項(xiàng)目天數(shù)（學(xué)時(shí)數(shù)）實(shí)驗(yàn)屬性內(nèi)容與要求1JavaScript中的對(duì)象6驗(yàn)證性內(nèi)容：在頁(yè)面中動(dòng)態(tài)顯示系統(tǒng)時(shí)間；使用數(shù)組方式實(shí)現(xiàn)省市級(jí)聯(lián)效果；使用字符串對(duì)象驗(yàn)證注冊(cè)頁(yè)面；制作彈窗效果；在標(biāo)題欄交替顯示學(xué)號(hào)姓名。要求：掌握對(duì)象的概念和創(chuàng)建方法；掌握Date對(duì)象、Math對(duì)象、String對(duì)象、Window對(duì)象常用方法和屬性；掌握J(rèn)avaScript中類(lèi)的聲明與定義、構(gòu)造函數(shù)的創(chuàng)建、函數(shù)的定義和調(diào)用；理解基于構(gòu)造函數(shù)和原型的面向?qū)ο髾C(jī)制。2DOM4驗(yàn)證性內(nèi)容：復(fù)選框全選效果；無(wú)刷新評(píng)論；使用HTMLDOM方式修改課堂案例。要求：掌握J(rèn)avaScript中訪問(wèn)DOM的方法，掌握HTMLDOM標(biāo)準(zhǔn)實(shí)現(xiàn)HTML元素內(nèi)容的修改，掌握事件、事件對(duì)象的概念、設(shè)置事件監(jiān)聽(tīng)函數(shù)的方法，熟悉表格的屬性和方法。3jQuery基礎(chǔ)6驗(yàn)證性內(nèi)容：編寫(xiě)一個(gè)jQuery程序；改變列表項(xiàng)背景色；雙色表格；圖書(shū)信息的收縮與展開(kāi)。要求：熟悉jQuery的選擇器；掌握jQuery的基本選擇器；掌握jQuery的層次選擇器；掌握jQuery的過(guò)濾選擇器；掌握jQuery的表單選擇器。4jQuery控制DOM4驗(yàn)證性內(nèi)容：制作圖片展示效果；增加購(gòu)物車(chē)商品信息。要求：掌握查找節(jié)點(diǎn)、創(chuàng)建節(jié)點(diǎn)、刪除節(jié)點(diǎn)；掌握復(fù)制節(jié)點(diǎn)、替換節(jié)點(diǎn)、遍歷節(jié)點(diǎn)；能夠根據(jù)需要?jiǎng)討B(tài)改變頁(yè)面元素的樣式；能夠動(dòng)態(tài)改變?cè)氐膶傩浴?jQuery事件4驗(yàn)證性內(nèi)容：制作登錄框特效；制作圖片提示效果；使用hover事件實(shí)現(xiàn)橫向?qū)Ш讲藛?。要求：掌握事件綁定方法；掌握獲得焦點(diǎn)和失去焦點(diǎn)事件；掌握文本框值的判斷；掌握事件對(duì)象的應(yīng)用；掌握合成事件hover的應(yīng)用；掌握addClass方法。三、主要儀器設(shè)備及材料實(shí)驗(yàn)實(shí)訓(xùn)室、多媒體計(jì)算機(jī)、VSCode軟件、谷歌瀏覽器、網(wǎng)絡(luò)環(huán)境四、實(shí)驗(yàn)的考核辦法實(shí)驗(yàn)考核內(nèi)容主要分為：實(shí)驗(yàn)過(guò)程、實(shí)驗(yàn)設(shè)計(jì)和實(shí)驗(yàn)報(bào)告三部分。實(shí)驗(yàn)過(guò)程考核主要考查學(xué)生課程出勤、實(shí)驗(yàn)態(tài)度、實(shí)驗(yàn)任務(wù)完成情況、實(shí)驗(yàn)過(guò)程中分析問(wèn)題和解決問(wèn)題的能力等方面；實(shí)驗(yàn)設(shè)計(jì)考核主要考查學(xué)生設(shè)計(jì)的規(guī)范性、合理性和美觀性等方面；實(shí)驗(yàn)報(bào)告考核主要是考查實(shí)驗(yàn)報(bào)告內(nèi)容的完整性、正確性和規(guī)范性等方面。以上三部分分別占三分之一的分?jǐn)?shù)。考核采用分組形式進(jìn)行，同一小組成員分工不同，統(tǒng)一打分。五、指導(dǎo)書(shū)與參考資料指導(dǎo)書(shū)：《JavaScript+jQueryWeb開(kāi)發(fā)案例教程》，前沿科技溫謙編著，人民郵電出版社，2022年5月第1版。參考資