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

1、授課章節(jié)第一章第一個JavaScript小程序了解JavaScriptJavaScript執(zhí)行原理JavaScript的版本腳本編寫工具編寫第一個JAVASCRIPT授課形式講授授課時間第1周周_28月30日第7至8節(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ù)。補(bǔ)充內(nèi)容無教學(xué)場地電腦投影ppt

2、dreamweaverMx2004教學(xué)過程方法手段時間分配導(dǎo)入組織教學(xué)，點名回顧HTML,它的基本元素。JS?講述10新課第一個JavaScript小程序了解JavaScript什么是JavaScript為什么要學(xué)JavaScriptJavaScript執(zhí)行原理在腳本的執(zhí)行過程中，瀏覽器客戶端與應(yīng)用服務(wù)器采用請求/口應(yīng)模式進(jìn)行交互分解這個過程為1）瀏覽器接收用戶的請求：2）向服務(wù)器請求某個包含JavaScript腳本的頁面3）應(yīng)用服務(wù)器端向瀏覽器發(fā)送響應(yīng)信息，即把含有腳本的HTML文件發(fā)送到瀏覽器客戶端，然后由瀏覽器從上到下逐條解析HTML標(biāo)簽和JavaScript腳本，并顯示頁面效果呈現(xiàn)給用

3、戶。使用客戶端腳本的好處有以下兩點：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寫第一個Ja

4、vaScript工作任務(wù)3：寫出第一個含有JavaScript的html，功能是彈出一個對話框，并調(diào)試成功！講授20知識擴(kuò)展：無練習(xí)或訓(xùn)練工作任務(wù)3：寫出第一個含有JavaScript的html，功能是彈出一個對話框，并調(diào)試成功！注意DreamweaverJavaScript調(diào)試方法40課后小結(jié)15布置作業(yè)15授課章節(jié)1.6JavaScript的基本語法變量聲明和賦值運算符號授課形式現(xiàn)場教學(xué)授課時間第1周周4(9月1日第5至6節(jié)教學(xué)目標(biāo)知識目標(biāo)：掌握變量聲明和賦值方法。能力目標(biāo)：編寫調(diào)用簡單的JS代碼，完成一定功能。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實踐完成。教學(xué)重點運用變量聲明和賦

5、值知識，編寫調(diào)用簡單的JS代碼，完成一定功能。教學(xué)難點能根據(jù)功能分析出編程步驟，并在規(guī)定實踐完成。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配導(dǎo)入組織教學(xué)，點名回顧JS基本知識。JavaScript?JavaScript?常用的JavaScript?如何調(diào)試JavaScript程序？講述101.6Javascript的基本語法現(xiàn)場教學(xué)1.6.120在JavaScript中，變量的命名規(guī)則與Java相同。JavaScript是一種弱類型語言，也就是在變量聲明時不需要指定變量類型，變量的類型會由賦給變量的值決定。1.6.2運算符號：1)算術(shù)運算符用于連接運算

6、表達(dá)式。算術(shù)運算符包括加(+)、新口(-)、口(*)、除(/)、取口()、自加(+)、自減(-)u等運算符課2)比較運算符用來連接操作數(shù)來組成比較表達(dá)式。比較運算符的基本操作過程是：首先對操作數(shù)進(jìn)行比較，然后返回一個布爾值true或false。包括、=、=、=、！=3)JavaScript支持的常用邏輯運算符，包括！口|、&4)賦值運算符，包括二、十二、二、*二、/=變量聲明和賦值知識擴(kuò)展：無使用變量和運算符，實現(xiàn)如下運算40a=1,b=2,練a+b=3習(xí)c二”hello”或訓(xùn)d二”you”練c+d二”helloyou”e二false!e=true課15后小結(jié)布25置作業(yè)授課章節(jié)1.6.31.

7、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)語句和分支語句補(bǔ)充內(nèi)容無教學(xué)場地電腦投影pptdreamweaverMx2004教學(xué)過程方法手段時間分配導(dǎo)入組織教學(xué)，點名JavaScript中的變量聲明和Java中的區(qū)別是什么，什么樣的?JavaScript語言區(qū)分大小寫嗎？JavaScript哪些賦值符號。講述10新1.6.311條件語句if語句是最基本、最常用的條件控制語

8、句，語法：if(expression)statement2)switchDOswitch是典型的多路分支語句語法：switch(expression)casejudgementl:statementl;break;default:defaultstatement;break;forDOwhileDOwhileDO是基本的循環(huán)DO,也是條件判斷DO。語法：while(expression)statement現(xiàn)場教學(xué)20知識擴(kuò)展：無練用while循環(huán)語句將指定的字符串進(jìn)行輸出堅持就是勝利磐持就是勝利里邦就是度相利用腳本實現(xiàn)寶石圖形。40課15布課后實戰(zhàn)題3.45授課章節(jié)2.1函數(shù)基礎(chǔ)2.2什么是函

9、數(shù)2.3簡易購物車實現(xiàn)授課形式現(xiàn)場教學(xué)授課時間第_2周周4(9月8日第5至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ī)定實踐完成。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配導(dǎo)入,?,?,?講述102.1函數(shù)基礎(chǔ)現(xiàn)場教學(xué)工作任務(wù)120編寫函數(shù)functionsum(number1,number2)求兩數(shù)之和，彈出結(jié)果。并調(diào)用之。2.2什么是函數(shù)函數(shù)實質(zhì)上就

10、是可以作為一個邏輯單元對待的一組相關(guān)JavaScriptDOD在JavaScript程序中使用函數(shù)可以使代碼更為簡潔并具有重用性能。2.2.1函數(shù)的定義函數(shù)是由關(guān)鍵字function、函數(shù)名加一組參數(shù)以及置于大括號新中需要執(zhí)行的一段語句定義的。函數(shù)與其他的JavaScript代碼一樣，必須位于SCRIPT/SCRIPT標(biāo)記之間，函數(shù)的基本語課法。D2.2.2函數(shù)調(diào)用函數(shù)調(diào)用的語法2.3簡易購物車實現(xiàn)知識擴(kuò)展：無練|簡昌啊御車|40習(xí)肉品名稱題:量1件單飾(美元)叵寄f美元,都十|或訓(xùn)|跑距道具|11美元練20課后小結(jié)1布置作業(yè)授課章節(jié)2.4四則運算計算器授課形式現(xiàn)場教學(xué)授課時間第3周周2(9月

11、13日第7至8節(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ī)定實踐完成。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配導(dǎo)入,JavaScriptJavaScript函數(shù)講述10新課制作四則運算計算器。:摘痂外E引柏力鼠蛀3HI-二，rS?013,睡tq相聯(lián)社漉E施船邂|卿敬加寸/:小I；1丫回里手SB翳本題需要使用函數(shù)參數(shù)傳遞。料.啕、在JavaScript中定

12、義函數(shù)的完整格式如下：語法十Efunction自定義函數(shù)名（形參H,fr02,）,函數(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)用時也必須給出多少個實參（這里需要注意的是，在實參之間也必須用逗號0,0000）functioncompute（op）.這里op代表進(jìn)行何

13、種運算。所以調(diào)用的時候，也相應(yīng)的給予參數(shù)onClick=compute（+）現(xiàn)場教學(xué)20知識擴(kuò)展叫練計算劇的冏長和面積豐徑，湎-周民.吐面積卜|3JJM實現(xiàn)特效40課15布25授課章節(jié)2.5用鏈接代替按鈕響應(yīng)點擊事件授課形式講授+現(xiàn)場教學(xué)授課時間第3周周4(9月15日第5至6節(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é)難點無。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配,Java

14、Script?講述15導(dǎo)入點擊超鏈接實現(xiàn)按鈕功能，改變html的頁面背景色。H迎夠,“她口藐=gfivi燉nil1口1*/08Qb時般看匈忌好之象算苦器.理望場.瞳記盤鐲:窿，“1H三|口西二，口庇心.|%xgSffiHlX現(xiàn)場教學(xué)40新課函數(shù)除了可以在響應(yīng)事件中被調(diào)用之外，還可以在鏈接中被調(diào)用。在標(biāo)簽中的href標(biāo)記中使用javascript:關(guān)鍵字調(diào)用函數(shù)，當(dāng)用戶單擊這個鏈接時，相關(guān)函數(shù)將被執(zhí)行。functionchange(color)if(color=r)ocument-bgColr-ed;elseif(color=b)document.bgColor=blue;elseif(colo

15、r=g)document.bgColor=green”知識擴(kuò)展：無練?20課15布P80一二5授課章節(jié)2.6JavascriPT置函數(shù)授課形式現(xiàn)場教學(xué)授課時間第_周2(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é)難點無。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配導(dǎo),不帶參數(shù)的函數(shù)，帶參數(shù)的函數(shù)定義，函數(shù)調(diào)用的注

16、意點如何響應(yīng)按鈕點擊事件？口鏈接可以取代按鈕嗎？講述10工作任務(wù)5編寫個人所得稅計算器。月收入所得稅計算的方式：(月收入-現(xiàn)場教學(xué)起征額)*所得稅率。收入多出起征額1000以內(nèi)，稅率為0.05，20新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ù)字的進(jìn)制數(shù)。這個參數(shù)在函數(shù)中不是必須的。2)parseFloat()

17、函數(shù)該函數(shù)主要將首位為數(shù)字的字符串轉(zhuǎn)化成浮點型數(shù)字，如果字符串不是以數(shù)字開頭，那么將返回NaN。語法：parseFloat(StringNum)StringNum：需要轉(zhuǎn)換為浮點型的字符串。3)isNaN()函數(shù)該函數(shù)主要用于檢驗?zāi)硞€值是否為NaN。語法：isNaN(Num)Num：需要驗證的數(shù)字。如果參數(shù)Num為NaN，函數(shù)返回值為true；如果參數(shù)NaN，函數(shù)返回值為false。4)isFinite()函數(shù)該函數(shù)主要用于檢驗?zāi)硞€表達(dá)式是否為無窮大。語法：isFinite(Num)Num：需要驗證的數(shù)字。Num不是課如果參數(shù)Num為無窮大，函數(shù)返回值為true；如果參數(shù)Num不為無窮大，函數(shù)

18、返回值為false。知識擴(kuò)展：無練4用入加五目啟日年的中哼可：40習(xí)11或訓(xùn)實現(xiàn)閏年的判斷練課后小結(jié)20布30置作業(yè)授課章節(jié)3.1DOM模型3.2WINDOW象編程授課形式現(xiàn)場教學(xué)授課時間第4周周49月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é)難點無。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配導(dǎo)入,函數(shù)parseFloat(StringNum)的功能是什么？?講述

19、10引入：1)HTMLDODD現(xiàn)場教學(xué)任何一篇HTML文檔被瀏覽器加載到計算機(jī)的內(nèi)存后，都會被解40口為一顆內(nèi)存樹。如圖3.2所示。這顆樹是由一個一個的節(jié)點構(gòu)成的。其中節(jié)點有12種類型，但是最常用的只有3種，分別是元素節(jié)點、屬性節(jié)點、文本節(jié)點。2）節(jié)點和節(jié)點的引用在DOM中，每個對象都稱為一個節(jié)點。DOM對象模型瀏覽器對象是一個分層結(jié)構(gòu)，也稱為文檔對象模型。window對象編程新打開頁面，先看到瀏覽器窗口，即window窗口，windowDOO的是瀏覽器本身。其次就是我們看到的網(wǎng)頁文檔內(nèi)容，口課documentODD它包含一個最主要的內(nèi)容表單。假設(shè)myform表單中有一個文本框textl,定位

20、次文本框時，就應(yīng)該從上到下定位：window.document.myform.textl因為windowD象是所有頁面內(nèi)容的根節(jié)點，所以可以省略document.myform.textl瀏覽器DODD中除了document文檔對象,還有l(wèi)ocation和history。知識擴(kuò)展：無工作任務(wù)220練習(xí)頁面加載時彈出廣告頁面?；蛴?xùn)練20課后小結(jié)10布置作業(yè)授課章節(jié)3.2.3動態(tài)秒表授課形式講授授課時間第5周周29月27日第7至8節(jié)教學(xué)目標(biāo)知識目標(biāo)：全局變量的使用onLoad事件響應(yīng)setTimeout定時函數(shù)能力目標(biāo)：能使用setTimeout()方法實現(xiàn)定時特效。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步

21、驟，并在規(guī)定實踐完成。教學(xué)重點全局變量的使用，setTimeout()方法應(yīng)用。教學(xué)難點無。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配導(dǎo)入,回顧簡述DOM頁面加載時彈出廣告頁面的主要步驟。講述10onLoad,JavaScript,現(xiàn)場教學(xué)40setTimeout（“函數(shù)，毫秒數(shù)）可以設(shè)置定時器：經(jīng)過指定毫秒值后執(zhí)行某個函數(shù)。我們可以利用它實現(xiàn)一個每1秒就遞增的秒表。vart=1;functiontick()新document.form1.tick.value=t;課t+;UsetTimeout(tick(),1000);知識擴(kuò)展：無，總共5種顏色。2

22、0練使用onLoad事件和setTimeout方法。訓(xùn)練15課后小結(jié)25布置作業(yè)授課章節(jié)3.3document對象編程document授課形式現(xiàn)場教學(xué)授課時間第5周周4(9月29日第5至6節(jié)教學(xué)目標(biāo)知識目標(biāo)：document對象的常用屬性和方法能力目標(biāo)：能document提供的方法實現(xiàn)特效。素質(zhì)目標(biāo)：能根據(jù)功能分析出編程步驟，并在規(guī)定實踐完成。教學(xué)重點Document.getElementsByName()獲得控件數(shù)組的概念教學(xué)難點無。補(bǔ)充內(nèi)容無教學(xué)場地機(jī)房電腦dreamweaverMX2004教學(xué)過程方法手段時間分配導(dǎo)入,onLoad事件是什么事件？setTimeout(方法的目的是實現(xiàn)什么

23、功能？講述10新課document對象編程document對象常用屬性和方法表3.3document常用屬性現(xiàn)場教學(xué)20名稱說明bgColor設(shè)置或檢索Document對象的背景色常用方法document對象常用方法如表3.4所示。表3.4document常用方法名稱說明getElementByID()getElementsByName()根據(jù)HTML元素指定的ID，D00一的一個HTML元素。如：訪問DIV層對象、圖片Img對象根據(jù)HTML元素指定的name，DO相同名稱的一組元素。如：訪問表單元素(全選功能)漂浮廣告制作布局：在頁面中插入層，z軸設(shè)為1,然后在層中插入圖片。編寫腳本：使用getElementByID()方法獲取層對象，捕獲鼠標(biāo)滾動事件，改變層對象的位置坐標(biāo)。常見的頁面坐標(biāo)的介紹，如表3.5所示：表3.5常見頁面坐標(biāo)top:pixelTop:left:scrolltop:指定元素的上邊界位置。設(shè)置或返回元素