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

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

新課第一個JavaScript小程序了解JavaScript什么是JavaScript為什么要學JavaScriptJavaScript執(zhí)行原理在腳本的執(zhí)行過程中，瀏覽器客戶端與應用服務器采用請求/響應模式進行交互分解這個過程為1）瀏覽器接收用戶的請求：2）向服務器請求某個包含JavaScript腳本的頁面3）應用服務器端向瀏覽器發(fā)送響應信息，即把含有腳本的HTML文件發(fā)送到瀏覽器客戶端，然后由瀏覽器從上到下逐條解析HTML標簽和JavaScript腳本，并顯示頁面效果呈現(xiàn)給用戶。使用客戶端腳本的好處有以下兩點：a）含腳本的頁面只要下載一次，減少不必要的網(wǎng)絡通信。b）腳本程序是瀏覽器客戶端執(zhí)行，而不是由服務器執(zhí)行，因此可以減輕服務器端的壓力。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工作任務3：寫出第一個含有JavaScript的html，功能是彈出一個對話框，并調試成功！講授20知識擴展：無練習或訓練工作任務3：寫出第一個含有JavaScript的html，功能是彈出一個對話框，并調試成功！注意Dreamweaver的使用和JavaScript調試方法40課后小結15布置器課后實戰(zhàn)題15常州機電職業(yè)技術學院普通類課程教案

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

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

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

新課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)場教學20知識擴展：無練習或訓練用while循環(huán)語句將指定的字符串進行輸出堅持就是勝利整持就是勝利堡特就是隹利利用腳本實現(xiàn)寶石圖形。40課后小結15才iF課后實戰(zhàn)題3.45常州機電職業(yè)技術學院普通類課程教案

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

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

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

點擊超鏈接實現(xiàn)按鈕功能，改變html的頁面背景色?，F(xiàn)場教學40新課練習或訓練課后小結布置作業(yè)函數(shù)除了可以在響應事件中被調用之外，還可以在鏈接中被調用。在<a>標簽中的href標記中使用點擊超鏈接實現(xiàn)按鈕功能，改變html的頁面背景色?，F(xiàn)場教學40新課練習或訓練課后小結布置作業(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è)技術學院普通類課程教案

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

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

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

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

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

新課全局變量和局部變量的概念onLoad事件是“頁面加載完成”事件，當頁面加載完了之后發(fā)生此事件，如果想要在打開網(wǎng)頁的時候就調用JavaScript函數(shù)，可以響應此事件。setTimeout("函數(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)場教學40知識擴展：無練習或訓練實現(xiàn)網(wǎng)頁顏色每過一秒鐘就變一種顏色，總共5種顏色。使用onLoad事件和setTimeout方法。20課后小結15布置位課后實戰(zhàn)題25常州機電職業(yè)技術學院普通類課程教案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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