JavaScript網(wǎng)特效案例教程教案普通班

授課章節(jié)第一章第一個(gè)JavaScript小程序了解星JavaScriptJavaScript執(zhí)行原理JavaScript的版本腳本編寫工具編寫第一個(gè)JavaScript授課形式講授授課時(shí)間第」—周周上 （8月30日） 第」 至父 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握腳本的基本結(jié)構(gòu)（Script標(biāo)簽）簡(jiǎn)單記憶基本語法變量的定義與賦值數(shù)據(jù)類型與轉(zhuǎn)換parseFloat等運(yùn)算符和控制語句同Java靈活運(yùn)用高級(jí)語法一自定義函數(shù)function能力目標(biāo)：掌握函數(shù)的用法。素質(zhì)目標(biāo)：能根據(jù)功能分析出哪里需要添加函數(shù)。教學(xué)重點(diǎn)回顧靜態(tài)網(wǎng)頁相關(guān)知識(shí)。掌握函數(shù)的用法。教學(xué)難點(diǎn)能根據(jù)功能分析出哪里需要添加函數(shù)。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用多媒體教室電腦投影pptdreamweaverMx2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名回顧HTML，它的基本元素。為什么還要學(xué)習(xí)JS？講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課第一個(gè)JavaScript小程序了解JavaScript什么是JavaScript為什么要學(xué)JavaScriptJavaScript執(zhí)行原理在腳本的執(zhí)行過程中，瀏覽器客戶端與應(yīng)用服務(wù)器采用請(qǐng)求/響應(yīng)模式進(jìn)行交互分解這個(gè)過程為1）瀏覽器接收用戶的請(qǐng)求：2）向服務(wù)器請(qǐng)求某個(gè)包含JavaScript腳本的頁面3）應(yīng)用服務(wù)器端向?yàn)g覽器發(fā)送響應(yīng)信息，即把含有腳本的HTML文件發(fā)送到瀏覽器客戶端，然后由瀏覽器從上到下逐條解析HTML標(biāo)簽和JavaScript腳本，并顯示頁面效果呈現(xiàn)給用戶。使用客戶端腳本的好處有以下兩點(diǎn)：a）含腳本的頁面只要下載一次，減少不必要的網(wǎng)絡(luò)通信。b）腳本程序是瀏覽器客戶端執(zhí)行，而不是由服務(wù)器執(zhí)行，因此可以減輕服務(wù)器端的壓力。JavaScript的版本JavaScript語言最初在Netscape2.0上發(fā)布，此后不斷發(fā)展，陸續(xù)推出了多個(gè)版本：JavaScript1.0到JavasScript1.6。其中JavaScript1.5,InternetExplorer6.0支持，Netscape6.0和Firefox1.0支持。JavaScript1.6目前有firefox1.5支持。腳本編寫工具記事本FrontPageDreamweaver寫第一個(gè)JavaScript工作任務(wù)3：寫出第一個(gè)含有JavaScript的html，功能是彈出一個(gè)對(duì)話框，并調(diào)試成功！講授20知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練工作任務(wù)3：寫出第一個(gè)含有JavaScript的html，功能是彈出一個(gè)對(duì)話框，并調(diào)試成功！注意Dreamweaver的使用和JavaScript調(diào)試方法40課后小結(jié)15布置器課后實(shí)戰(zhàn)題15常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)1.6JavaScript的基本語法變量聲明和賦值運(yùn)算符號(hào)授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第」—周周4 （9月1日） 第」—至6節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握變量聲明和賦值方法。能力目標(biāo)：編寫調(diào)用簡(jiǎn)單的JS代碼，完成一定功能。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)運(yùn)瞪量聲明和賦值知識(shí)，編寫調(diào)用簡(jiǎn)單的JS代碼，完成一定功能。教學(xué)難點(diǎn)能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名回顧JS基本知識(shí)。JavaScript的執(zhí)行原理是什么？分成幾個(gè)步驟？大家簡(jiǎn)述一下JavaScript腳本的基本結(jié)構(gòu)？常用的JavaScript編寫工具是什么？如何調(diào)試JavaScript程序？講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課1.6Javascript的基本語法變量的聲明和賦值在JavaScript中，變量的命名規(guī)則與Java相同。JavaScript是一種弱類型語言，也就是在變量聲明時(shí)不需要指定變量類型，變量的類型會(huì)由賦給變量的值決定。運(yùn)算符號(hào)運(yùn)算符對(duì)一個(gè)或多個(gè)變量或值（操作數(shù)）進(jìn)行運(yùn)算，并返回一個(gè)新值根據(jù)所執(zhí)行的運(yùn)算，運(yùn)算符可分為以下類別：1）算術(shù)運(yùn)算符用于連接運(yùn)算表達(dá)式。算術(shù)運(yùn)算符包括加+）、減（-）、乘（*）、除（/）、取模（％）、自加（++）、自減（--）等運(yùn)算符2）比較運(yùn)算符用來連接操作數(shù)來組成比較表達(dá)式。比較運(yùn)算符的基本操作過程是：首先對(duì)操作數(shù)進(jìn)行比較，然后返回一個(gè)布爾值true或false。包括＞、＜、＞=、＜=、==、!=3）JavaScript支持的常用邏輯運(yùn)算符，包括!、||、&&4）賦值運(yùn)算符，包括=、+=、一=、*=、/=變量聲明和賦值現(xiàn)場(chǎng)教學(xué)20知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練使用變量和運(yùn)算符,實(shí)現(xiàn)如下運(yùn)算a=1,b=2,a+b=3c="hello”d="you”c+d=”helloyou”e=false!e=true40課后小結(jié)15布置器課后實(shí)戰(zhàn)題25常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)1.6.3邏輯控制語句1.6.4注釋授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第2周周 2_（9月6日）第7至8 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：掌握分支語句和循環(huán)語句的語法結(jié)構(gòu)。能力目標(biāo)：編寫調(diào)用簡(jiǎn)單的JS代碼，實(shí)現(xiàn)分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。素質(zhì)目標(biāo)：能靈活運(yùn)用分支和循環(huán)結(jié)構(gòu)解決實(shí)際編程問題。教學(xué)重點(diǎn)使用分支語句使用循環(huán)語句教學(xué)難點(diǎn)循環(huán)語句和分支語句補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用多媒體教室電腦投影pptdreamweaverMx2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué),點(diǎn)名JavaScrip用的變量聲明和ava中的區(qū)別是什么，什么樣|名字可以作為變量名使用JavaScrip語言區(qū)分大小寫嗎JavaScrip有哪些賦值符號(hào)。的講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課1.6.3邏輯控制語句1)條件語句if語句是最基本、最常用的條件控制語句，語法：if(expression){statement)2)switch語句switch是典型的多路分支語句語法：switch(expression){casejudgementl:statementl;break;…default:defaultstatement;break;)4)for語句5)while語句while語句是基本的循環(huán)語句，也是條件判斷語句。語法：while(expression){statement)現(xiàn)場(chǎng)教學(xué)20知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練用while循環(huán)語句將指定的字符串進(jìn)行輸出堅(jiān)持就是勝利整持就是勝利堡特就是隹利利用腳本實(shí)現(xiàn)寶石圖形。40課后小結(jié)15才iF課后實(shí)戰(zhàn)題3.45常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)函數(shù)基礎(chǔ)什么是函數(shù)簡(jiǎn)易購物車實(shí)現(xiàn)授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第N 周周4 （9月8日）第」_至_6_節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：定義函數(shù)、調(diào)用函數(shù)、能實(shí)現(xiàn)事件響應(yīng)能力目標(biāo)：編寫調(diào)用簡(jiǎn)單的JS函數(shù)，完成一定功能。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)編寫調(diào)用簡(jiǎn)單的JS函數(shù)，完成一定功能。教學(xué)難點(diǎn)能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名根據(jù)分?jǐn)?shù)給出學(xué)生獲得的等級(jí)，使用什么結(jié)構(gòu)？實(shí)現(xiàn)連續(xù)十個(gè)學(xué)生的等級(jí)評(píng)價(jià)，使用什么結(jié)構(gòu)？觀看一個(gè)購物車特效，可以自動(dòng)計(jì)算購物金額，如何實(shí)現(xiàn)呢？引出函數(shù)的概念和函數(shù)調(diào)用的概念。講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課函數(shù)基礎(chǔ)工作任務(wù)1編與函數(shù)functionsum（number1,number2）求兩數(shù)之和，彈出結(jié)果。并調(diào)用之。什么是函數(shù)函數(shù)實(shí)質(zhì)上就是可以作為一個(gè)邏輯單元對(duì)待的一組相關(guān)JavaScript語句。在JavaScript程序中使用函數(shù)可以使代碼更為簡(jiǎn)潔并具有重用性能。函數(shù)的定義函數(shù)是由關(guān)鍵字function,函數(shù)名加一組參數(shù)以及置于大括號(hào)中需要執(zhí)行的一段語句定義的。函數(shù)與其他的JavaScript代碼一樣，必須位于<SCRIPT></SCRIPT>標(biāo)記之間，函數(shù)的基本語法。。函數(shù)調(diào)用函數(shù)調(diào)用的語法簡(jiǎn)易購物車實(shí)現(xiàn)現(xiàn)場(chǎng)教學(xué)20知識(shí)擴(kuò)展：無40至離曷睥蝴車 I旦訓(xùn)3KII至商且名稱數(shù)量（件） 單價(jià)（美元）胞跑苣具| |\11 KSI齊<I百卜吉20才i1F課后實(shí)戰(zhàn)題1常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)2.4四則運(yùn)算計(jì)算器授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第3周周二_（9月13日） 第」 至芷 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：有參函數(shù)的定義和調(diào)用，事件響應(yīng)能力目標(biāo)：編寫調(diào)用簡(jiǎn)單的有參數(shù)JS函數(shù)，完成一定功能。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)編寫調(diào)用簡(jiǎn)單的JS函數(shù)，完成一定功能。教學(xué)難點(diǎn)能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名JavaScript函數(shù)定義和調(diào)用的語法點(diǎn)擊按鈕實(shí)現(xiàn)功能如何調(diào)用JavaScript函數(shù)講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案制作四則運(yùn)算計(jì)算器。現(xiàn)場(chǎng)教學(xué)20練習(xí)或訓(xùn)練課后小結(jié)布置作業(yè)本題需要使用函數(shù)參數(shù)傳遞。在JavaScript中定義函數(shù)的完整格式如下：制作四則運(yùn)算計(jì)算器。現(xiàn)場(chǎng)教學(xué)20練習(xí)或訓(xùn)練課后小結(jié)布置作業(yè)本題需要使用函數(shù)參數(shù)傳遞。在JavaScript中定義函數(shù)的完整格式如下：語法function自定義函數(shù)名（形參1,形參2,……）{函數(shù)體}在定義函數(shù)時(shí)，在函數(shù)名后面的圓括號(hào)內(nèi)可以指定一個(gè)或多個(gè)參數(shù)（用逗號(hào)“，”分隔）。指定參數(shù)的作用在于當(dāng)調(diào)用函數(shù)時(shí)可以為被調(diào)用的函數(shù)傳遞一個(gè)或多個(gè)值。我們把定義函數(shù)時(shí)指定的參數(shù)稱為形式參數(shù)，簡(jiǎn)稱形參；而把調(diào)用函數(shù)時(shí)實(shí)際傳遞的值稱為實(shí)際參數(shù)，簡(jiǎn)稱實(shí)參。如果定義的函數(shù)有參數(shù)，那么對(duì)這種函數(shù)的調(diào)用形式就是：函數(shù)名（實(shí)參1，實(shí)參2，……）通常，如果在定義函數(shù)時(shí)使用了多少個(gè)形參，那么在函數(shù)調(diào)用時(shí)也必須給出多少個(gè)實(shí)參（這里需要注意的是，在實(shí)參之間也必須用逗號(hào):分隔。）functioncompute（op）{…….）這里op代表進(jìn)行何種運(yùn)算。所以調(diào)用的時(shí)候，也相應(yīng)的給予參數(shù)onClick="compute（'+'）知識(shí)擴(kuò)展：無計(jì)枕閽的冏K和酊根半他面1匍快卜畫一鑿松? |33JM—^-1 實(shí)現(xiàn)特效課后實(shí)戰(zhàn)題240常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案授課章節(jié)2.5用鏈接代替按鈕響應(yīng)點(diǎn)擊事件授課形式講授+現(xiàn)場(chǎng)教學(xué)授課時(shí)間第3周周4 （9月15日）第 5_至」 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：超鏈接如何實(shí)現(xiàn)像按鈕一樣的功能。能力目標(biāo)：編寫調(diào)用簡(jiǎn)單的有參數(shù)JS函數(shù)，用超鏈接點(diǎn)擊實(shí)現(xiàn)響應(yīng)，完成一定功能。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)用超鏈接實(shí)現(xiàn)按鈕一樣的功能。教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名JavaScript中如何定義和調(diào)用有參函數(shù)。按鈕點(diǎn)擊調(diào)用函數(shù)如何實(shí)現(xiàn)？如何用超鏈接取代按鈕？講述15常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

點(diǎn)擊超鏈接實(shí)現(xiàn)按鈕功能，改變html的頁面背景色。現(xiàn)場(chǎng)教學(xué)40新課練習(xí)或訓(xùn)練課后小結(jié)布置作業(yè)函數(shù)除了可以在響應(yīng)事件中被調(diào)用之外，還可以在鏈接中被調(diào)用。在<a>標(biāo)簽中的href標(biāo)記中使用點(diǎn)擊超鏈接實(shí)現(xiàn)按鈕功能，改變html的頁面背景色?，F(xiàn)場(chǎng)教學(xué)40新課練習(xí)或訓(xùn)練課后小結(jié)布置作業(yè)<ahref="javascript:change('b')">functionchange(color){if(color=="r"){document.bgColor="red";}elseif(color=="b"){document.bgColor="blue";}elseif(color=="g"){document.bgColor="green"}}知識(shí)擴(kuò)展：無把建議購物車的“計(jì)算金額”按鈕變成超鏈接看能否實(shí)20現(xiàn)相同的效果？15P80常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)2.6Javascrtp由勺內(nèi)置函數(shù)授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第—匕周周二_(9月20日)第7至8 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：常見函數(shù)parseInt()，isNaN()和parseFloat()能力目標(biāo)：能使用內(nèi)置函數(shù)實(shí)現(xiàn)數(shù)值轉(zhuǎn)換，獲得表單元素。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)能利用內(nèi)置函數(shù)判斷輸入是否為數(shù)值，能將字符串轉(zhuǎn)換為整數(shù)或浮點(diǎn)數(shù)教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名不帶參數(shù)的函數(shù)，帶參數(shù)的函數(shù)定義，函數(shù)調(diào)用的注意點(diǎn)如何響應(yīng)按鈕點(diǎn)擊事件？超鏈接可以取代按鈕嗎？講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課工作任務(wù)5編寫個(gè)人所得稅計(jì)算器。月收入所得稅計(jì)算的方式：(月收入-起征額產(chǎn)所得稅率。收入多出起征額1000以內(nèi)，稅率為0.05,1000到3000為0?1，以上為0.5。如果輸入非數(shù)字，彈出錯(cuò)誤提示。否則給出結(jié)果。1)parseInt()函數(shù)該函數(shù)主要將首位為數(shù)字的字符串轉(zhuǎn)化成數(shù)字，如果字符串不是以數(shù)字開頭，那么將返回NaN。語法：parseInt(StringNum,[n])StringNum：需要轉(zhuǎn)換為整型的字符串。n：提供在2?36之間的數(shù)字表示所保存數(shù)字的進(jìn)制數(shù)。這個(gè)參數(shù)在函數(shù)中不是必須的。parseFloat()函數(shù)該函數(shù)主要將首位為數(shù)字的字符串轉(zhuǎn)化成浮點(diǎn)型數(shù)字，如果字符串不是以數(shù)字開頭，那么將返回NaN。語法：parseFloat(StringNum)5面口心口皿：需要轉(zhuǎn)換為浮點(diǎn)型的字符串。isNaN()函數(shù)該函數(shù)主要用于檢驗(yàn)?zāi)硞€(gè)值是否為NaN。語法：isNaN(Num)Num：需要驗(yàn)證的數(shù)字。如果參數(shù)Num為NaN,函數(shù)返回值為true；如果參數(shù)Num不是NaN,函數(shù)返回值為false。isFinite()函數(shù)該函數(shù)主要用于檢驗(yàn)?zāi)硞€(gè)表達(dá)式是否為無窮大。語法：isFinite(Num)Num：需要驗(yàn)證的數(shù)字。如果參數(shù)Num為無窮大，函數(shù)返回值為true；如果參數(shù)Num不為無窮大，函數(shù)返回值為false?，F(xiàn)場(chǎng)教學(xué)20知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練1謂將入需費(fèi)列用閏年的年同二計(jì)?」實(shí)現(xiàn)閏年的判斷40課后小結(jié)20才iF課后是實(shí)戰(zhàn)題30常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)3.1DOM模型3.2windoW寸象編程授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第4周周」—(9月22日)第5至6 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：DOM模型Window對(duì)象常用屬性和方法能力目標(biāo)：能使用內(nèi)置函數(shù)實(shí)現(xiàn)數(shù)值轉(zhuǎn)換，獲得表單元素。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)編寫調(diào)用簡(jiǎn)單的JS函數(shù)，實(shí)現(xiàn)廣告窗口的彈出教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名函數(shù)parseFloat(StringNum)的功能是什么？實(shí)現(xiàn)一個(gè)四則運(yùn)算器的基本思路是什么？講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課引入：1)HTML樹狀結(jié)構(gòu)任何一篇HTML文檔被瀏覽器加載到計(jì)算機(jī)的內(nèi)存后，都會(huì)被解析為一顆內(nèi)存樹。如圖3.2所示。這顆樹是由一個(gè)一個(gè)的節(jié)點(diǎn)構(gòu)成的。其中節(jié)點(diǎn)有12種類型，但是最常用的只有3種，分別是元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)。2)節(jié)點(diǎn)和節(jié)點(diǎn)的引用在DOM中，每個(gè)對(duì)象都稱為一個(gè)節(jié)點(diǎn)。DOM對(duì)象模型瀏覽器對(duì)象是一個(gè)分層結(jié)構(gòu)，也稱為文檔對(duì)象模型。window對(duì)象編程打開頁面，先看到瀏覽器窗口，即window窗口，window對(duì)象指的是瀏覽器本身。其次就是我們看到」的網(wǎng)頁文檔內(nèi)容，即document文檔。它包含一個(gè)最主要的內(nèi)容表單。假設(shè)myform表單中有一個(gè)文本框text1，定位次文本框時(shí)，就應(yīng)該從上到下定位：window.document.myform.text1因?yàn)閣indow對(duì)象是所有頁面內(nèi)容的根節(jié)點(diǎn)，所以可以省略document.myf0rm.text1瀏覽器對(duì)象結(jié)構(gòu)中除了document文檔對(duì)象，還有l(wèi)ocation和historyo現(xiàn)場(chǎng)教學(xué)40知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練工作任務(wù)2頁面加載時(shí)彈出廣告頁面。20課后小結(jié)20布置位課后實(shí)戰(zhàn)題10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)3.2.3 動(dòng)態(tài)秒表授課形式講授授課時(shí)間第5周周_2—(9月27日)第7至8節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：全局變量的使用onLoad事件響應(yīng)setTimeout定時(shí)函數(shù)能力目標(biāo)：能使用setTimeout()方法實(shí)現(xiàn)定時(shí)特效。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)全局變量的使用，setTimeout()方法應(yīng)用。教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名回顧簡(jiǎn)述DOM的基本概念。頁面加載時(shí)彈出廣告頁面的主要步驟。講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課全局變量和局部變量的概念onLoad事件是“頁面加載完成”事件，當(dāng)頁面加載完了之后發(fā)生此事件，如果想要在打開網(wǎng)頁的時(shí)候就調(diào)用JavaScript函數(shù)，可以響應(yīng)此事件。setTimeout("函數(shù)"，毫秒數(shù))可以設(shè)置定時(shí)器：經(jīng)過指定毫秒值后執(zhí)行某個(gè)函數(shù)。我們可以利用它實(shí)現(xiàn)一個(gè)每1秒就遞增的秒表。vart=1;functiontick()(document.form1.tick.value=t;t++;setTimeout('tick()',1000);)<bodyonload="tick()”>現(xiàn)場(chǎng)教學(xué)40知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練實(shí)現(xiàn)網(wǎng)頁顏色每過一秒鐘就變一種顏色，總共5種顏色。使用onLoad事件和setTimeout方法。20課后小結(jié)15布置位課后實(shí)戰(zhàn)題25常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)3.3document對(duì)象編程document對(duì)象常用屬性和方法3.3.2漂浮廣告制作授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第呃—周周上—（9月29日） 第」—至」 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：document對(duì)象的常用屬性和方法能力目標(biāo)：能document提供的方法實(shí)現(xiàn)特效。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實(shí)踐完成。教學(xué)重點(diǎn)Document.getElementsByName()獲得控件數(shù)組的概念教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入組織教學(xué)，點(diǎn)名onLoad事件是什么事件？setTimeout（?法的目的是實(shí)現(xiàn)什么功能？簡(jiǎn)述動(dòng)態(tài)秒表的實(shí)現(xiàn)步驟。講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課document對(duì)象編程document對(duì)象常用屬性和方法表3.3document常用屬性現(xiàn)場(chǎng)教學(xué)20名稱說明bgColor設(shè)置或檢索Document對(duì)象的背景色常用方法document對(duì)象常用方法如表3.4所示。表3.4document常用方法名稱說明getElementByID()getElementsByName()根據(jù)HTML兀素指定的ID，獲得唯一的一個(gè)HTML元素。如：訪問DIV層對(duì)象、圖片Img對(duì)象根據(jù)HTML元素指定的name，獲得相同名稱的一組元素。如：訪問表單元素(全選功能)漂浮廣告制作布局：在頁面中插入層，z軸設(shè)為1，然后在層中插入圖片。編寫腳本：使用getElementByID()方法獲取層對(duì)象，捕獲鼠標(biāo)滾動(dòng)事件，改變層對(duì)象的位置坐標(biāo)。常見的頁面坐標(biāo)的介紹,如表3.5所示：表3.5常見頁面坐標(biāo)top:pixelTop:left:scrolltop:指定兀素的上邊界位置。設(shè)置或返回兀素的上邊界。指定元素的左邊界位置。頁面滾動(dòng)的高度知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練設(shè)計(jì)會(huì)漂浮的廣告頁面。40課后小結(jié)20布置位課后實(shí)戰(zhàn)題30常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)3.4history對(duì)象和LOCATION對(duì)象授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第一周周 （月日）第 至—節(jié)教學(xué)目標(biāo)實(shí)現(xiàn)有返回，前進(jìn)，刷新功能的頁面教學(xué)重點(diǎn)history對(duì)象和location對(duì)象的屬性和方法教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入Document對(duì)象的屬性和方法有哪些？漂浮廣告制作的步驟使用網(wǎng)頁上的前進(jìn)后退效果時(shí)間分講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課history>location對(duì)象常用屬性和方法history常用方法history對(duì)象常用方法如表3.6所示表3.6history對(duì)象常用方法現(xiàn)場(chǎng)教學(xué)40名稱說明back()forward()go("url"ornumber)加載History列表中的上一個(gè)URL。加載History列表中的下一個(gè)URL。加載History列表中的一個(gè)URL，或要求瀏覽器移動(dòng)指定的頁面數(shù)。back()方法相當(dāng)于后退按鈕forward()方法相當(dāng)于前進(jìn)按鈕go⑴代表前進(jìn)1頁，等價(jià)于forward()方法；go(-1)代表后退1頁，等價(jià)于back()方法；location常用屬性location對(duì)象常用屬性如表3.7所示。表3.7location對(duì)象常用屬性名稱說明hosthostnamehref設(shè)置或檢索位置或URL的主機(jī)名和端口號(hào)設(shè)置或檢索位置或URL的主機(jī)名部分設(shè)置或檢索完整的URL字符串location常用方法location對(duì)象常用方法如表3.8所示。表3.8location對(duì)象常用方法名稱說明assign("url")reload()replace("url")加載URL指定的新的HTML文檔。重新加載當(dāng)前頁通過加載URL指定的文檔來替換當(dāng)前文檔知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練前進(jìn)后退實(shí)現(xiàn)20課后小結(jié)Location的屬性和方法History的屬性和方法20布置位課后實(shí)戰(zhàn)提40常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)第四章內(nèi)置對(duì)象什么是對(duì)象Date對(duì)象編程—顯示日期、動(dòng)態(tài)時(shí)鐘授課形式講授授課時(shí)間第一周周一（月日）第 至 節(jié)教學(xué)目標(biāo)了解什么叫對(duì)象會(huì)使用Date對(duì)象實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘教學(xué)重點(diǎn)Date對(duì)象的使用教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入什么是對(duì)象網(wǎng)頁上的動(dòng)態(tài)時(shí)鐘如何實(shí)現(xiàn)？講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課什么是對(duì)象創(chuàng)建和刪除對(duì)象對(duì)象的屬性和方法Date對(duì)象編程一顯示日期、動(dòng)態(tài)時(shí)鐘工作任務(wù)1實(shí)現(xiàn)當(dāng)前的日期和時(shí)間：5月13日13時(shí)45分51秒。工作任務(wù)2實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘Date的屬性和方法方法組Date對(duì)象方法組如表4.1所示。表4.1Date對(duì)象方法組現(xiàn)場(chǎng)教學(xué)40方法分組說明setXxxgetXxx這些方法用于設(shè)置時(shí)間和日期值這些方法用于獲取時(shí)間和日期值知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練制作動(dòng)態(tài)時(shí)鐘特效20課后小結(jié)對(duì)象是什么Date對(duì)象的屬性和方法20布置位無0常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)4.3 String對(duì)象String對(duì)象的常用屬性和方法對(duì)電子郵箱的格式進(jìn)行驗(yàn)證授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第 周周 （月日）第 至 節(jié)教學(xué)目標(biāo)掌握String對(duì)象的常用屬性和方法使用String對(duì)象實(shí)現(xiàn)電子郵箱格式驗(yàn)證教學(xué)重點(diǎn)掌握String對(duì)象的常用屬性和方法教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時(shí)間分配導(dǎo)入常見的電子郵箱驗(yàn)證存在哪些驗(yàn)證內(nèi)容？講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案String對(duì)象工作任務(wù)3驗(yàn)證用戶信息。如圖4.1所示?，F(xiàn)場(chǎng)教學(xué)40您的電子照件亡…皿4■必埴注卅String對(duì)象的常用屬性和方法名稱說明String對(duì)象工作任務(wù)3驗(yàn)證用戶信息。如圖4.1所示。現(xiàn)場(chǎng)教學(xué)40您的電子照件亡…皿4■必埴注卅String對(duì)象的常用屬性和方法名稱說明屬length獲取字符串字性符的個(gè)數(shù)方indexOf(“子字符串”，起始位查找子字符串法置)的位置charAt(index)獲取位于指定索引位置的字符substring(index1,index2)求子串toLowerCase()將字符串轉(zhuǎn)換成小寫toUpperCase()將字符串轉(zhuǎn)換成大寫表4.3String對(duì)象常用方法屬性知識(shí)擴(kuò)展：無練制作電子郵件簡(jiǎn)單驗(yàn)證特效習(xí)或20課后小結(jié)String對(duì)象的屬性方法如何驗(yàn)證字符串中是否存在@字符?15布置作業(yè)常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案授課章節(jié)4.4Math對(duì)象Math常用方法 4.4.2隨機(jī)產(chǎn)生4位驗(yàn)證碼授課形式講授授課時(shí)間第 周周 （月日）第 至—節(jié)教學(xué)目標(biāo)?SMath常用方法會(huì)利用Math產(chǎn)生四位驗(yàn)證碼教學(xué)重點(diǎn)會(huì)利用Math產(chǎn)生四位驗(yàn)證碼教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入如何驗(yàn)證字符串中是否存在@字符？網(wǎng)頁中登陸功能除了使用用戶名和密碼，往往還要輸入驗(yàn)證碼。我們可以用JavaScript來模擬隨機(jī)數(shù)的產(chǎn)生嗎？時(shí)間講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

現(xiàn)場(chǎng)教學(xué)40Math現(xiàn)場(chǎng)教學(xué)40工作任務(wù)4隨機(jī)出現(xiàn)四位驗(yàn)證碼，如圖4.2所示。5013匚二堂期朝4恒要避謔碼.j圖4.2工作任務(wù)4運(yùn)行結(jié)果Math常用方法新課名稱說明abs方法acos方法asin方法atan方法atan2方法ceil方法cos方法exp方法floor方法log方法max方法min方法pow方法random方法round方法sin方法sqrt方法tan方法計(jì)算指定參數(shù)的絕對(duì)值返回指定參數(shù)的反余弦值返回指定參數(shù)的反正弦值返回指定參數(shù)的反正切值根據(jù)指定的坐標(biāo)返回一個(gè)弧度值返回大于或等于指定參數(shù)的最小整數(shù)計(jì)算指定參數(shù)的余弦值以e為基數(shù)的指數(shù)函數(shù)返回小于或等于指定參數(shù)的最大整數(shù)以e為基數(shù)的自然對(duì)數(shù)返回兩個(gè)或多個(gè)參數(shù)中的最大值返回兩個(gè)或多個(gè)參數(shù)中的最小值幕運(yùn)算產(chǎn)生0到1之間的隨機(jī)數(shù)取整運(yùn)算計(jì)算指定參數(shù)的正弦值開平方運(yùn)算計(jì)算指定參數(shù)的正切值補(bǔ)充練習(xí)或訓(xùn)練產(chǎn)生四位隨即碼20課后小結(jié)Math對(duì)象的常用方法5常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)4.5Array對(duì)象一維數(shù)組杳看課程介紹二維數(shù)組二維數(shù)組輸出學(xué)生的成績(jī)表。二維數(shù)組實(shí)現(xiàn)級(jí)聯(lián)菜單授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第 周周 （月日）第 至 節(jié)教學(xué)目標(biāo)掌握Array對(duì)象的常用方法一維數(shù)組和二維數(shù)組的初始化和遍歷教學(xué)重點(diǎn)一維數(shù)組和二維數(shù)組的初始化和遍歷教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法導(dǎo)入Math對(duì)象的常用方法一維數(shù)組是如何定義和使用的手講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

現(xiàn)場(chǎng)教學(xué)20Array現(xiàn)場(chǎng)教學(xué)20工作任務(wù)5請(qǐng)選擇課程J皿武似務(wù)實(shí),請(qǐng)選擇課程J皿武似務(wù)實(shí),這里將為您介紹課程一維數(shù)組可以把數(shù)組看作一個(gè)單行表格，該表格的每一個(gè)單元格中都可以存儲(chǔ)一個(gè)數(shù)據(jù)，而且各單元格中存儲(chǔ)的數(shù)據(jù)類型可以不同，這些單元格被稱為數(shù)組元素。每個(gè)數(shù)組元素都有一個(gè)索引號(hào)，通過索引號(hào)可以方便地引用數(shù)組元素。數(shù)組JavaScript中唯一用來存儲(chǔ)和操作有序數(shù)據(jù)集的數(shù)據(jù)結(jié)構(gòu)。二維數(shù)組工作任務(wù)6考試申請(qǐng)考試申請(qǐng)考試申請(qǐng)學(xué)期第一學(xué)期丁學(xué)期第二學(xué)期▼學(xué)期第二學(xué)年▼課程Jwa ▼t累程JavaScript▼課程StrutstJavaScript■...SqlSumcr基礎(chǔ)SqlServer高線ASP.WETC#.WETAjasHTMLJSFSpring：圖4.4工作任務(wù)6運(yùn)行結(jié)果知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)課程介紹和選課級(jí)聯(lián)菜單練習(xí)或訓(xùn)課程介紹和選課級(jí)聯(lián)菜單掌握Array對(duì)象的常用方法課后小結(jié)一維數(shù)組和二維數(shù)組的初始化和遍歷課后小結(jié)常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)第五章常用事件什么是事件事件處理程序的調(diào)用鍵盤鼠標(biāo)事件按下按鈕隨機(jī)改變頁面的背景顏色授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間/Q、///、1 1■。第一周周 （月日）第 至—節(jié)教學(xué)目標(biāo)了解事件的概念掌握事件調(diào)用函數(shù)的機(jī)制掌握鍵盤事件教學(xué)重點(diǎn)掌握鍵盤事件教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入復(fù)習(xí)掌握Array對(duì)象的常用方法一維數(shù)組和二維數(shù)組的初始化和遍歷引導(dǎo)第一章學(xué)習(xí)的四則運(yùn)算計(jì)算器響應(yīng)的是什么時(shí)事件時(shí)間講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課什么是事件事件是用戶在訪問頁面時(shí)執(zhí)行的操作。當(dāng)瀏覽器探測(cè)到一個(gè)事件時(shí)，比如鼠標(biāo)點(diǎn)擊或按鍵，它可以觸發(fā)與這個(gè)事件相關(guān)聯(lián)的JavaScript對(duì)象，這些對(duì)象稱為事件處理程序。事件處理是一項(xiàng)重要技術(shù)，它包含了用戶與頁面的所有交互。事件處理程序的調(diào)用在使用事件處理程序?qū)撁孢M(jìn)行操作時(shí)，最主要的是如何通過對(duì)象的事件來指定事件處理程序，鍵盤鼠標(biāo)事件現(xiàn)場(chǎng)教學(xué)20事件描述onClickonDblClickonMouseDownonMouseUponMouseOveronMouseOutonKeyPressonKeyDownonKeyUp鼠標(biāo)點(diǎn)擊事件，多用在某個(gè)對(duì)象控制的范圍內(nèi)的鼠標(biāo)點(diǎn)擊鼠標(biāo)雙擊事件鼠標(biāo)上的按鈕被按下了鼠標(biāo)按下后，松開時(shí)激發(fā)的事件當(dāng)鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)觸發(fā)的事件當(dāng)鼠標(biāo)離開某對(duì)象范圍時(shí)觸發(fā)的事件當(dāng)鍵盤上的某個(gè)鍵被按下并且釋放時(shí)觸發(fā)的事件.［注意：頁面內(nèi)必須有被聚焦的對(duì)象］當(dāng)鍵盤上某個(gè)按鍵被按下時(shí)觸發(fā)的事件［注意:頁面內(nèi)必須有被聚焦的對(duì)象］當(dāng)鍵盤上某個(gè)按鍵被按放開時(shí)觸發(fā)的事件［注意:頁面內(nèi)必須有被聚焦的對(duì)象］知識(shí)擴(kuò)展：無練練或訓(xùn)按下按鈕隨機(jī)改變頁面的背景顏色40課后小結(jié)了解事件的概念掌握事件調(diào)用函數(shù)的機(jī)制掌握鍵盤事件10布業(yè)置作無0常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)鼠標(biāo)按下改變鏈接的顏色鼠標(biāo)的移入移出改變圖片的隹點(diǎn)八\、八、、鼠標(biāo)移動(dòng)事件獲取鼠標(biāo)的坐標(biāo)授課形式講授授課時(shí)間第一周周一（月日）第 至 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：了解鍵盤鼠標(biāo)事件技能目標(biāo)：實(shí)現(xiàn)鍵盤鼠標(biāo)事件的特效素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到鍵盤鼠標(biāo)事件特效教學(xué)重點(diǎn)實(shí)現(xiàn)鍵盤鼠標(biāo)事件的特效教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入了解事件的概念掌握事件調(diào)用函數(shù)的機(jī)制掌握鍵盤事件時(shí)間講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課工作任務(wù)2用onmousedown和onmouseup事件將文本制作成類似于<a>（超鏈接）標(biāo)記的功能，也就是在文本上按下鼠標(biāo)時(shí)，改變文本的顏色，當(dāng)在文本上松開鼠標(biāo)時(shí)，恢復(fù)文本的默認(rèn)顏色，并彈出一個(gè)空頁（可以鏈接任意網(wǎng)頁）。鼠標(biāo)的按下或松開事件分別是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠標(biāo)按下時(shí)觸發(fā)事件處理程序，onmouseup事件是在鼠標(biāo)松開時(shí)觸發(fā)事件處理程序。在用鼠標(biāo)單擊對(duì)象時(shí)，可以用這兩個(gè)事件實(shí)現(xiàn)其動(dòng)態(tài)效果。工作任務(wù)3鼠標(biāo)在圖片上移入或移出時(shí)，動(dòng)態(tài)改變圖片的焦點(diǎn)，主要是用onmouseover和onmouseout事件來兀成鼠標(biāo)的移入和移出動(dòng)作。工作任務(wù)4鼠標(biāo)在頁面中移動(dòng)時(shí)，在頁面的狀態(tài)欄中顯示當(dāng)前鼠標(biāo)在頁面上的位置，也就是（x,y）值。鍵盤控制小魚游泳實(shí)現(xiàn)上下左右鍵控制魚上下左右游動(dòng)。Document的onkeydown事件可以記錄鍵盤上按鍵的ASCII碼。普通鍵盤上下左右鍵對(duì)應(yīng)87，83，65，68。根據(jù)鍵值修改fish距離頁面上下左右的距離。現(xiàn)場(chǎng)教學(xué)20知識(shí)擴(kuò)展：無練練或訓(xùn)課堂練習(xí)3.440課后小結(jié)鍵盤鼠標(biāo)事件中常用的有哪些？意義？如何實(shí)現(xiàn)記錄鼠標(biāo)坐標(biāo)？Event是什么？15布置位5常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)5.4 頁面相關(guān)事件5.4.1 可以改變大小的圖像授課形式現(xiàn)場(chǎng)教學(xué)5.4.2一直出現(xiàn)在屏幕兩側(cè)的漂浮廣告授課時(shí)間第 周周 （月日）第 至 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：了解頁面相關(guān)事件技能目標(biāo)：實(shí)現(xiàn)頁面事件的特效素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到頁面事件特效教學(xué)重點(diǎn)實(shí)現(xiàn)頁面事件的特效教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無。教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入鍵盤鼠標(biāo)事件中常用的有哪些？意義？如何實(shí)現(xiàn)記錄鼠標(biāo)坐標(biāo)？Event是什么？時(shí)間講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課頁面相關(guān)事件：事件」描述F 現(xiàn)場(chǎng)0nAhort.t圖片在下毒時(shí)被用戶中斷.， 教學(xué)onBefjreUnlomd.】當(dāng)前頁面的內(nèi)存捋要披皿時(shí)油發(fā)的事伴’ 20onError.n楠抓當(dāng)前頁面因打某種原因而出現(xiàn)的輜誤，如腳本輜誤包外部整據(jù)引用的錯(cuò)誤cinLoad.!頁面內(nèi)空充成傳送到謝宛翳時(shí)帔發(fā)的事件,包括畀部交件引人光成onMo^fe!j瀏覽耨的窿口掖杼勁則用!發(fā)的車件onElesiEe.1當(dāng)瀏覽翳的窗口式小被山變時(shí)池發(fā)的事件onScroll.T瀏簾繇曲液晶蔡柯嗇壽比磁北忖軸游的事祚0nStop.r瀏覽翳的伸止按缸掖按下時(shí)觸發(fā)的事件或梢正在下戴的文件掖中斷onUiiload.T當(dāng)前頁面海掖改變時(shí)觸發(fā)的事傳工作任務(wù)6實(shí)現(xiàn)圖片的大小改變。當(dāng)鼠標(biāo)沒有關(guān)注此圖片時(shí)為小圖，鼠標(biāo)進(jìn)入圖片區(qū)域變?yōu)榇髨D。工作任務(wù)7瀏覽覽器的滾動(dòng)條位置發(fā)生變化時(shí)，討厭的廣告圖跟隨飄動(dòng)知識(shí)擴(kuò)展：無川練練習(xí)或課堂練習(xí)1—340課后小結(jié)漂浮廣告實(shí)現(xiàn)的步驟？20業(yè)布置無0常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)5.5表單事件 5.5.1文本框獲得焦點(diǎn)變色授課形式講授授課時(shí)間第 周周一（月日）第 至 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：了解表單相關(guān)事件技能目標(biāo)：實(shí)現(xiàn)表單事件的特效素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到表單事件特效教學(xué)重點(diǎn)實(shí)現(xiàn)表單事件的特效教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無。教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入制作漂浮廣告的布局使用什么容器？響應(yīng)的是什么事件？Style是表示什么屬性？時(shí)間講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案表單事件耳件」描述一耳件」描述一&nBlur.i當(dāng)?shù)膔三去免去臼.占住婦登的李什：及后身建專的的女的可：.711cL,皿爐.1當(dāng)?shù)娜鞒糁更c(diǎn)并且三發(fā)的才稱整生出變下粗淺區(qū)字件［配而三弟盅狗觸發(fā)均可］□nF。-i三果十元案更得華；.時(shí)后及肚年件，3nE.e5et.T當(dāng)去用中定ESET的愕咬社患及歸目發(fā)的奉件」□nSubmit1一卜莖聿襤連至心抬當(dāng)?shù)氖露罚F(xiàn)場(chǎng)教學(xué)40新課?工作任務(wù)8?新課?工作任務(wù)8?在登錄網(wǎng)站時(shí)，在填寫某個(gè)文本框的時(shí)候，該框會(huì)變色，等填寫完了又變回原樣，是如何實(shí)現(xiàn)的？用戶名二密科二真實(shí)姓名二性別：郵箱：知識(shí)擴(kuò)展：無或訓(xùn)課后小結(jié)布置作業(yè)練課堂練習(xí)8習(xí)表單事件常用的有哪些?或訓(xùn)課后小結(jié)布置作業(yè)練課堂練習(xí)8習(xí)表單事件常用的有哪些?2015常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案授課章節(jié)5.6編輯事件動(dòng)態(tài)修改文本的樣式支持原創(chuàng)杜絕Coqv支持原創(chuàng)杜絕黏貼授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第 周周 （11月13日）第 至 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：了解編輯相關(guān)事件技能目標(biāo)：實(shí)現(xiàn)編輯事件的特效素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到編輯事件特效教學(xué)重點(diǎn)實(shí)現(xiàn)編輯事件的特效教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無。教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入表單事件常用的有哪些？如何實(shí)現(xiàn)表單驗(yàn)證的提示顏色？時(shí)間講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案課后小結(jié)布置作業(yè)動(dòng)態(tài)修改文本的樣式工作任務(wù)9 現(xiàn)場(chǎng)當(dāng)列表菜單中的值發(fā)生改變時(shí)，文本域中的字體大小和字體顏色教學(xué)發(fā)生改變 20詁看這邊課后小結(jié)布置作業(yè)動(dòng)態(tài)修改文本的樣式工作任務(wù)9 現(xiàn)場(chǎng)當(dāng)列表菜單中的值發(fā)生改變時(shí)，文本域中的字體大小和字體顏色教學(xué)發(fā)生改變 20詁看這邊字體大小和號(hào)▼字體顏色S3工作任務(wù)10不允許復(fù)制。有些成果是自己辛苦寫出來，想與別人共享卻不愿被竊取，怎么辦呢？剪切事件是在瀏覽器中剪切被選中的內(nèi)容時(shí)觸發(fā)事件處理程序，剪切事件有onbeforecut和oncut兩個(gè)事件，onbeforecut事件是當(dāng)頁面中的一部分或全部?jī)?nèi)容被剪切到瀏覽者系統(tǒng)剪貼板時(shí)觸發(fā)事件處理程序，oncut事件是當(dāng)頁面中被選擇的內(nèi)容被剪切時(shí)觸發(fā)事件處理程序。工作任務(wù)11老師布置了一篇作業(yè)在網(wǎng)上完成，怎么樣防止學(xué)生都是黏貼來的呢？知識(shí)擴(kuò)展：無練任務(wù)10,11為或編輯事件中比較常見的有哪些？如何實(shí)現(xiàn)防止拷貝和黏貼的網(wǎng)頁?4020常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案授課章節(jié)第八章CSS樣式表css樣式表基石礎(chǔ)常用樣式授課形式講授授課時(shí)間第 周周 （月日）第 至 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：樣式表基礎(chǔ)和常用樣式技能目標(biāo)：實(shí)現(xiàn)網(wǎng)頁細(xì)邊框和圖片按鈕素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到相關(guān)特效教學(xué)重點(diǎn)實(shí)現(xiàn)網(wǎng)頁細(xì)邊框和圖片按鈕教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無。教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入在網(wǎng)頁上找到細(xì)邊框的文本框，沒有下劃線的超鏈接和圖片按鈕。查找CSS的相關(guān)資訊。了解CSS的幾種形式。時(shí)間講述10常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課css樣式表基礎(chǔ)樣式定義的格式定義CSS的語句形式如下：語法selector{property:value;property:value;…}SELECTOR：選擇符。PROPERTY：就是那些將要被修改的屬性，例如color。VALUE：PROPERTY的值，比如color的屬性值可以是red。樣式表位置分類1）嵌入樣式表2）鏈接外部樣式表3）引入外部的樣式表4）內(nèi)嵌樣式常用樣式文本屬性css改變超鏈接字體大小工作任務(wù)1改變超鏈接的字體大小。工作任務(wù)2實(shí)現(xiàn)如下圖的樣式：細(xì)邊框樣式、圖片按鈕樣式、超鏈接樣式。現(xiàn)場(chǎng)教學(xué)20知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練課堂練習(xí)1，240課后小如何實(shí)現(xiàn)網(wǎng)頁上的細(xì)邊框特效，圖片按鈕特效和超鏈接特效？20布置位無0常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)6.3 層的顯示隱藏效果點(diǎn)擊按鈕隱藏顯示層授課形式現(xiàn)場(chǎng)教學(xué)6.3.2用層和超鏈接動(dòng)態(tài)獲得地址授課時(shí)間第 周周一（月日）第 至 節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：層的運(yùn)用技能目標(biāo)：實(shí)現(xiàn)層的顯示和隱藏素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到相關(guān)特效教學(xué)重點(diǎn)實(shí)現(xiàn)層的顯示和隱藏教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無。教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入如何實(shí)現(xiàn)網(wǎng)頁上的細(xì)邊框特效，圖片按鈕特效和超鏈接特效？時(shí)間10分鐘常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課層的顯示隱藏效果參數(shù)值 描述block 默認(rèn)值。按塊顯示，換行顯示.用該值為對(duì)象之后添加新行none 不顯示，隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏對(duì)象保留其物理空間。inline 按行顯示，和其他元素同一行顯示。顯示屬性display適用于所有HTML標(biāo)簽，常用于層DIV、圖片Img的顯示和隱藏。點(diǎn)擊按鈕隱藏/顯示層工作任務(wù)4實(shí)現(xiàn)如下特效，按按鈕打開層和關(guān)閉層。工作任務(wù)5實(shí)現(xiàn)如下圖的特效。點(diǎn)擊地點(diǎn)選擇按鈕，出現(xiàn)選擇卡，點(diǎn)擊“廣州”，卡片消失，按鈕值變成“廣州”。20分鐘［快速圖索器 i電點(diǎn)：睡■■懶躁 運(yùn)樹肺猊GT 盤插/愉、 二BJK 蹣惻 一，知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練階段練習(xí)4,540分鐘課后小對(duì)編程共性問題進(jìn)行講解層有哪幾種常用的顯示方式？15分鐘布置位5分鐘常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)實(shí)現(xiàn)樹形菜單授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第 周周 （月日）第 至—節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：層的運(yùn)用技能目標(biāo)：實(shí)現(xiàn)層的顯示和隱藏素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到相關(guān)特效教學(xué)重點(diǎn)用表格的線顯示屬性實(shí)現(xiàn)樹狀菜單教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無。教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入層的現(xiàn)實(shí)方式有幾種？這些方式適用于哪些網(wǎng)頁元素？時(shí)間分10分鐘常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

新課工作任務(wù)6實(shí)現(xiàn)如下圖的樹形菜單：如圖6.6所示?，F(xiàn)場(chǎng)教學(xué)20分鐘我要買我要賣我的店鋪倉庫里的寶貝出售的寶貝我要買我的收藏我的帳戶我的購物車我要賣我的店鋪倉庫里的寶貝出售的寶貝display適用于所有HTML標(biāo)簽。本題直接在table中使用該屬性，實(shí)現(xiàn)下級(jí)菜單的顯示和隱藏。知識(shí)擴(kuò)展：無練習(xí)或訓(xùn)練階段練習(xí)640分鐘課后小編程共性問題講解。樹形菜單適用什么實(shí)現(xiàn)的？為什么這里沒有用到層呢？15分鐘布置位5分鐘常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案

授課章節(jié)6.3.4 卡片切換特效授課形式現(xiàn)場(chǎng)教學(xué)授課時(shí)間第 周周一（月日）第 至—節(jié)教學(xué)目標(biāo)知識(shí)目標(biāo)：圖片的運(yùn)用技能目標(biāo)：實(shí)現(xiàn)圖片的顯示和隱藏素質(zhì)目標(biāo)：在商業(yè)網(wǎng)站上能找到相關(guān)特效教學(xué)重點(diǎn)實(shí)現(xiàn)圖片的顯示和隱藏教學(xué)難點(diǎn)無。補(bǔ)充內(nèi)容無。教學(xué)場(chǎng)地及教具使用機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段導(dǎo)入樹形菜單適用什么實(shí)現(xiàn)的？為什么這里沒有用到層呢？display適用于所有HTML標(biāo)簽。時(shí)間分10分鐘常州機(jī)電職業(yè)技術(shù)學(xué)院普通類課程教案工作任務(wù)7可以使用DIV中插入圖片來實(shí)現(xiàn)，但更簡(jiǎn)潔的辦法是直接使用圖片的display屬性訪問圖片Img對(duì)象的方法：現(xiàn)場(chǎng)教學(xué)20分鐘工作任務(wù)7可以使用DIV中插入圖片來實(shí)現(xiàn)，但更簡(jiǎn)潔的辦法是直接使用圖片的display屬性訪問圖片Img對(duì)象的方法：現(xiàn)場(chǎng)教學(xué)20分鐘document.getElementByld（"圖片ID"）首先用表格布局如圖6.8的這6張主要的圖。使4個(gè)小圖按照“游戲點(diǎn)卡