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

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

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

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

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

授課章節(jié)1.6.3邏輯控制語句1.6.4注釋授課形式現(xiàn)場教學(xué)授課時間第2周周 2_（9月6日）第7至8 節(jié)教學(xué)目標(biāo)知識目標(biāo)：掌握分支語句和循環(huán)語句的語法結(jié)構(gòu)。能力目標(biāo)：編寫調(diào)用簡單的JS代碼，實現(xiàn)分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。素質(zhì)目標(biāo)：能靈活運用分支和循環(huán)結(jié)構(gòu)解決實際編程問題。教學(xué)重點使用分支語句使用循環(huán)語句教學(xué)難點循環(huán)語句和分支語句補充內(nèi)容無教學(xué)場地及教具使用多媒體教室電腦投影pptdreamweaverMx2004教學(xué)過程方法手段時間分配導(dǎo)入組織教學(xué),點名JavaScrip用的變量聲明和ava中的區(qū)別是什么，什么樣|名字可以作為變量名使用JavaScrip語言區(qū)分大小寫嗎JavaScrip有哪些賦值符號。的講述10常州機電職業(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)場教學(xué)20知識擴展：無練習(xí)或訓(xùn)練用while循環(huán)語句將指定的字符串進行輸出堅持就是勝利整持就是勝利堡特就是隹利利用腳本實現(xiàn)寶石圖形。40課后小結(jié)15才iF課后實戰(zhàn)題3.45常州機電職業(yè)技術(shù)學(xué)院普通類課程教案

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

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

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

點擊超鏈接實現(xiàn)按鈕功能，改變html的頁面背景色?，F(xiàn)場教學(xué)40新課練習(xí)或訓(xùn)練課后小結(jié)布置作業(yè)函數(shù)除了可以在響應(yīng)事件中被調(diào)用之外，還可以在鏈接中被調(diào)用。在<a>標(biāo)簽中的href標(biāo)記中使用點擊超鏈接實現(xiàn)按鈕功能，改變html的頁面背景色。現(xiàn)場教學(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"}}知識擴展：無把建議購物車的“計算金額”按鈕變成超鏈接看能否實20現(xiàn)相同的效果？15P80常州機電職業(yè)技術(shù)學(xué)院普通類課程教案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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