《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》教案 第10周 ? 使用JavaScript腳本（6.1-6.3節(jié)）_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》教案 第10周 ? 使用JavaScript腳本（6.1-6.3節(jié)）_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》教案 第10周 ? 使用JavaScript腳本（6.1-6.3節(jié)）_第3頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

《網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)》電子教案（第10周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)??教學(xué)課時(shí)??：理論2學(xué)時(shí)+實(shí)踐1學(xué)時(shí)??授課對(duì)象??：計(jì)算機(jī)相關(guān)專業(yè)學(xué)生/Web前端開(kāi)發(fā)初學(xué)者??教材章節(jié)??：第6章使用JavaScript腳本（6.1-6.3節(jié)）二、教學(xué)目標(biāo)（一）知識(shí)目標(biāo)了解JavaScript的起源、特點(diǎn)及核心功能（頁(yè)面交互、數(shù)據(jù)驗(yàn)證、動(dòng)態(tài)效果等）。掌握在網(wǎng)頁(yè)中引入JavaScript的三種方式（內(nèi)嵌腳本、外部腳本文件、事件屬性/href值）及代碼規(guī)范。熟悉JavaScript基本元素：變量（var/let）、常量（const）、數(shù)據(jù)類型（number、string、boolean、null、undefined、object）、運(yùn)算符（算術(shù)、賦值、比較、邏輯等）及數(shù)據(jù)類型轉(zhuǎn)換方法。理解DOM0級(jí)事件的概念，掌握常見(jiàn)事件（onclick、onmouseenter等）的綁定與解綁方法。掌握操作HTML元素屬性（常規(guī)屬性、自定義屬性）及CSS樣式（內(nèi)聯(lián)樣式、類名操作）的常用方法。（二）思政目標(biāo)通過(guò)規(guī)范編寫(xiě)JavaScript代碼（如變量命名、注釋規(guī)范），培養(yǎng)嚴(yán)謹(jǐn)、細(xì)致的編碼習(xí)慣。結(jié)合事件交互案例，理解“用戶為中心”的開(kāi)發(fā)理念，培養(yǎng)關(guān)注細(xì)節(jié)的工匠精神。在屬性與樣式操作實(shí)踐中，體會(huì)“結(jié)構(gòu)-樣式-行為”分離的模塊化思維，提升代碼可維護(hù)性意識(shí)。三、教學(xué)重難點(diǎn)（一）教學(xué)重點(diǎn)JavaScript的三種引入方式及適用場(chǎng)景（內(nèi)嵌腳本用于局部功能、外部腳本用于多頁(yè)面復(fù)用）。變量和常量聲明（var/let/const的區(qū)別）及數(shù)據(jù)類型的判斷與轉(zhuǎn)換。DOM0級(jí)事件的綁定（如element.onclick=function()）及事件觸發(fā)邏輯。元素屬性操作（getAttribute/setAttribute）與CSS樣式控制（style屬性、className）。（二）教學(xué)難點(diǎn)var/let/const的作用域差異（函數(shù)作用域與塊級(jí)作用域）。事件冒泡現(xiàn)象（如子元素事件觸發(fā)父元素事件）及處理思路。內(nèi)聯(lián)樣式操作中CSS屬性的駝峰命名法（如backgroundColor對(duì)應(yīng)background-color）。自定義屬性與JS對(duì)象屬性的區(qū)別（是否顯式存在于HTML標(biāo)簽中）。四、教學(xué)方法講授法：系統(tǒng)講解JavaScript基礎(chǔ)概念、語(yǔ)法規(guī)則及操作方法。案例演示法：結(jié)合教材示例（如例6-1至例6-20），實(shí)時(shí)演示代碼效果，對(duì)比不同寫(xiě)法的差異。對(duì)比分析法：對(duì)比var/let/const的作用域、不同事件綁定方式的優(yōu)劣，加深理解。任務(wù)驅(qū)動(dòng)法：實(shí)踐課通過(guò)“互動(dòng)按鈕面板”制作任務(wù)，綜合應(yīng)用屬性操作、事件綁定和樣式控制。五、教學(xué)過(guò)程（一）第一學(xué)時(shí)：JavaScript基礎(chǔ)與事件（40分鐘）導(dǎo)入（5分鐘）展示靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)的對(duì)比（如按鈕點(diǎn)擊無(wú)反應(yīng)vs彈出提示），提問(wèn)：“如何讓網(wǎng)頁(yè)‘動(dòng)起來(lái)’？”引出JavaScript的作用。簡(jiǎn)要介紹本節(jié)課內(nèi)容：JavaScript的引入方式、代碼規(guī)范及事件處理。初識(shí)JavaScript（15分鐘）核心概念：解釋JavaScript的跨平臺(tái)特性、與Java的區(qū)別，及ECMAScript、DOM、BOM的組成關(guān)系。引入方式：內(nèi)嵌腳本：在<script>標(biāo)簽中直接編寫(xiě)代碼（例6-1），說(shuō)明可放置在<head>或<body>的注意事項(xiàng)。外部腳本：創(chuàng)建.js文件，通過(guò)<scriptsrc="路徑">引入（例6-2），強(qiáng)調(diào)src屬性與標(biāo)簽內(nèi)代碼不可共存。事件屬性/href值：如<buttononclick="alert('hi')">或<ahref="javascript:alert('hi')">（例6-3）。代碼規(guī)范：強(qiáng)調(diào)大小寫(xiě)敏感、分號(hào)使用、注釋（//單行、/**/多行）的重要性。彈窗調(diào)試與DOM0級(jí)事件（15分鐘）彈窗工具：演示alert()（警告框）、confirm()（確認(rèn)框，返回布爾值）、prompt()（提示框，接收輸入）的用法，及console.log()在開(kāi)發(fā)者工具中的調(diào)試應(yīng)用（例6-5）。DOM0級(jí)事件：事件綁定：通過(guò)element.事件名=函數(shù)綁定（如btn.onclick=function(){}），演示單擊、鼠標(biāo)移入/移出事件（例6-10）。事件解綁：賦值null（如btn.onclick=null）。小結(jié)（5分鐘）回顧引入方式的適用場(chǎng)景及事件綁定的基本語(yǔ)法。布置思考題：“外部腳本文件與內(nèi)嵌腳本相比，優(yōu)勢(shì)是什么？”（二）第二學(xué)時(shí)：基本元素與樣式操作（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查學(xué)生對(duì)事件綁定的掌握：“如何實(shí)現(xiàn)按鈕點(diǎn)擊后隱藏自身？”引出本節(jié)課內(nèi)容：變量、數(shù)據(jù)類型及元素屬性與樣式操作。JavaScript基本元素（15分鐘）變量與常量：var（函數(shù)作用域、變量提升）、let（塊級(jí)作用域、不可重復(fù)聲明）、const（常量，不可修改）的對(duì)比。變量命名規(guī)則：字母/下劃線/$開(kāi)頭，區(qū)分大小寫(xiě)，避免關(guān)鍵字。數(shù)據(jù)類型：基本類型：number（數(shù)值）、string（字符串）、boolean（布爾）、null（空對(duì)象）、undefined（未定義）。引用類型：object（對(duì)象，含數(shù)組、自定義對(duì)象）。類型判斷：typeof操作符（注意typeofnull返回object的特殊性）。運(yùn)算符與類型轉(zhuǎn)換：算術(shù)、賦值、比較（==

vs

===）、邏輯運(yùn)算符的用法。顯式轉(zhuǎn)換：Number()、parseInt()、String()（例6-14）；隱式轉(zhuǎn)換：如"5"-2結(jié)果為3。操作元素屬性與CSS樣式（15分鐘）屬性操作：常規(guī)屬性：element.id、element.className（注意class屬性用className訪問(wèn)）。自定義屬性：setAttribute("屬性名","值")與getAttribute("屬性名")（例6-16）。樣式操作：內(nèi)聯(lián)樣式：element.style.屬性名（如div.style.color="red"），強(qiáng)調(diào)駝峰命名（例6-20）。類名操作：element.className="類名"（添加預(yù)定義樣式，如6.3.4節(jié)的案例實(shí)踐）。案例：實(shí)現(xiàn)鼠標(biāo)移入元素時(shí)改變背景色，移出時(shí)恢復(fù)（結(jié)合onmouseenter/onmouseleave事件）。小結(jié)（5分鐘）梳理變量聲明、類型轉(zhuǎn)換、屬性與樣式操作的核心要點(diǎn)。預(yù)告實(shí)踐課任務(wù)：制作包含動(dòng)態(tài)樣式和事件響應(yīng)的交互面板。（三）實(shí)踐學(xué)時(shí)：互動(dòng)按鈕面板制作（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：制作一個(gè)包含3個(gè)按鈕的互動(dòng)面板，功能如下：按鈕1：點(diǎn)擊后彈出輸入框，將輸入內(nèi)容顯示在面板的文本區(qū)域（用prompt()和innerHTML）。按鈕2：鼠標(biāo)移入時(shí)背景色變?yōu)樗{(lán)色，移出時(shí)恢復(fù)（用onmouseenter/onmouseleave和style屬性）。按鈕3：點(diǎn)擊后切換面板的自定義屬性data-status值（用setAttribute），并根據(jù)值切換面板邊框樣式（用className）。學(xué)生實(shí)踐（30分鐘）教師巡回指導(dǎo)，重點(diǎn)解決：let聲明變量時(shí)的塊級(jí)作用域問(wèn)題（如循環(huán)中綁定事件的變量引用）

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論