函數(shù)和事件專題知識講座市公開課獲獎?wù)n件

1、第二章函數(shù)和事件第1頁第1頁課程目的熟悉JavaScript默認(rèn)函數(shù)，包括eval()函數(shù)、isNaN()函數(shù)、parseInt()函數(shù)、parseFloat()函數(shù)掌握J(rèn)avaScript自定義函數(shù)結(jié)構(gòu)、參數(shù)及調(diào)用熟悉定期器相關(guān)操作，包括setTimeout()、clearTimeout() 、setInterval()、clearInterval()等函數(shù)使用理解JavaScript函數(shù)及慣用事件使用第2頁第2頁體驗項目 你想在自己網(wǎng)頁上放一個比較符合中國人習(xí)慣時間顯示器嗎？一個隨時改變時鐘，顯示效果如圖所表示： 我們能夠用JavaScript實現(xiàn)文字循環(huán)滾動顯示功效，顯示效果以下圖所表示

2、第3頁第3頁默認(rèn)函數(shù) JavaScript提供了一些默認(rèn)函數(shù) 編碼函數(shù)escape()：將非字母、數(shù)字字符轉(zhuǎn)換成ASCII碼譯碼函數(shù)unescape()：將ASCII碼轉(zhuǎn)換成字母、數(shù)字字符求值函數(shù)eval()數(shù)值判斷函數(shù)isNaN()：判斷一個值是否為非數(shù)值類型整數(shù)轉(zhuǎn)換函數(shù)parseInt()：將不同進(jìn)制（二、八、十六進(jìn)制）數(shù)值轉(zhuǎn)換成十進(jìn)制整數(shù)浮點數(shù)轉(zhuǎn)換函數(shù)parseFloat()：將數(shù)值字串轉(zhuǎn)換成浮點數(shù)本節(jié)只簡介后四種函數(shù) 第4頁第4頁eval()函數(shù) 求值函數(shù)eval()格式為：eval() 下面例子將用eval函數(shù)得到一個文本框值，然后通過點擊按鈕彈出一個對話框?qū)⑵漭敵觥?functio

3、n show(obj)var str=eval(document.Form.+obj+.value);alert(“你輸入姓名是:”+str); 姓名： 提交第5頁第5頁isNaN()函數(shù) 數(shù)值判斷函數(shù)isNaN()格式：isNaN() 下例中isNaN函數(shù)將判斷變量是否不是數(shù)值，并輸出判斷結(jié)果。var x=15;var y=黃雅玲;document.write(x不是數(shù)值嗎？,isNaN(x);document.write(y不是數(shù)值嗎？,isNaN(y);第6頁第6頁parseInt()函數(shù) 整數(shù)轉(zhuǎn)換函數(shù)parseInt()功效是將不同進(jìn)制（二、八、十六）數(shù)值轉(zhuǎn)換成十進(jìn)制整數(shù)。格式：par

4、seInt(數(shù)值字串，底數(shù))下面演示了將一個二進(jìn)制數(shù)和一個十六進(jìn)制數(shù)轉(zhuǎn)換成十進(jìn)制數(shù)。document.write(11012=,parseInt(1101,2),10);document.write(BFFF16=,parseInt(BFFF,16),10);第7頁第7頁parseFloat()函數(shù) parseFloat()是浮點數(shù)轉(zhuǎn)換函數(shù)，它將數(shù)值字串轉(zhuǎn)換成浮點數(shù)。格式：parseFloat(數(shù)值字串) document.write(parseInt(3.1234A56),);document.write(parseFloat(3.1234A56),);第8頁第8頁自定義函數(shù) 函數(shù)是獨立于主

5、程序、含有特定功效一段程序代碼塊。 JavaScript函數(shù)定義function 函數(shù)名（參數(shù)表，變元）函數(shù)體;return 表示式;第9頁第9頁闡明：當(dāng)調(diào)用函數(shù)時，所用變量或字面量均可作為變元傳遞。函數(shù)由關(guān)鍵字function定義。函數(shù)名：定義自己函數(shù)名字。參數(shù)表，是傳遞給函數(shù)使用或操作值，其值能夠是常量、變量或其它表示式。通過指定函數(shù)名（實參）來調(diào)用一個函數(shù)。函數(shù)返回值是可選項，假如需要返回值，就必須使用return語句將值返回。函數(shù)名對大小寫是敏感。 商定：函數(shù)名：易于辨認(rèn)（同變量命名規(guī)則）。程序代碼：模塊化設(shè)計。函數(shù)位置：按邏輯順序，集中置頂。第10頁第10頁函數(shù)中形式參數(shù) 在函數(shù)定義

6、中，我們看到函數(shù)名后有參數(shù)表，這些參數(shù)變量也許是一個或幾種。那么如何才干擬定參數(shù)變量個數(shù)呢？在JavaScript中可通過arguments.length來檢查參數(shù)個數(shù)。function function_Name(exp1,exp2,exp3,exp4)Number =function_Name.arguments.length;if(Number1)document.wrile(exp2);if(Number2)document.write(exp3);if(Number3)document.write(exp4); 獲取形參個數(shù)第11頁第11頁函數(shù)調(diào)用 格式：函數(shù)名(參數(shù)，參數(shù).)下面例

7、子演示了沒有返回值函數(shù)定義及調(diào)用。 function showName(name)document.write(我是+name);showName(玲玲); /函數(shù)調(diào)用第12頁第12頁上例中function showName(name)為函數(shù)定義，其中括號內(nèi)name是函數(shù)形式參數(shù)，這一點與C語言是完全相同，而showName(“玲玲”)則是對函數(shù)調(diào)用，用于實現(xiàn)需要功效。下面例子演示了帶返回值函數(shù)定義及調(diào)用。function showName(name)str=我是 +name;return str;document.write(showName(周伯通);第13頁第13頁函數(shù)與事件 事件驅(qū)動及

8、事件處理基本概念 JavaScript是基于對象（Object-Based）語言，這與Java不同，Java是面向?qū)ο笳Z言。而基于對象基本特性，就是采取事件驅(qū)動（Event Driven）。通常鼠標(biāo)或熱鍵動作我們稱之為事件（Event），而由鼠標(biāo)或熱鍵引發(fā)一連串程序動作，稱之為事件驅(qū)動（Event Driver）。而對事件進(jìn)行處理程序或函數(shù)，我們稱之為事件處理程序（Event Handler）。第14頁第14頁事件處理程序 瀏覽器響應(yīng)某個事件，實現(xiàn)用戶交互操作而進(jìn)行處理（過程）。事件處理程序調(diào)用：瀏覽器等待用戶交互操作，并在事件發(fā)生時，自動調(diào)用事件處理程序（函數(shù)），完畢事件處理過程。HTML標(biāo)

9、簽屬性：格式：tag on事件=“|”第15頁第15頁由于在JavaScript中對象事件處理通常由函數(shù)（function）來完畢，且其基本格式與函數(shù)同樣，因此能夠?qū)⑶懊嫠喗樗泻瘮?shù)作為事件處理程序。 格式下列：function 事件處理名（參數(shù)表）事件處理語句集；第16頁第16頁事件驅(qū)動 JavaScript事件驅(qū)動中事件是通過鼠標(biāo)或熱鍵動作引起。它主要有下列幾種事件 ：單擊事件onClick改變事件onChange選中事件onSelect取得焦點事件onFocus失去焦點onBlur載入文獻(xiàn)onLoad鼠標(biāo)批示事件onMouseOver提交事件onSubmit第17頁第17頁單擊事件on

10、Click 當(dāng)用戶單擊鼠標(biāo)按鈕時，產(chǎn)生onClick事件。同時onClick指定事件處理程序或代碼將被調(diào)用執(zhí)行。通常在下列基本對象中產(chǎn)生單擊事件： button（按鈕對象）checkbox（復(fù)選框）或（檢查列表框）radio（單選鈕）reset buttons（主要按鈕）submit buttons（提交按鈕）第18頁第18頁比如，能夠通過下面按鈕激活change()函數(shù)，當(dāng)然change()函數(shù)是需要另外提供：在onClick等號后，能夠使用自己編寫函數(shù)作為事件處理程序，也能夠使用JavaScript內(nèi)部函數(shù)，還能夠直接使用JavaScript代碼等。 第19頁第19頁請輸入基本資料：姓名：

11、點擊“請單擊”按鈕后將引起onClick事件，即彈出“謝謝你填寫.”對話框。第20頁第20頁改變事件onChange 當(dāng)一個text或textarea域失去焦點并更改值時觸發(fā)onChange事件，當(dāng)select下拉選項中一個選項狀態(tài)改變后也會引起該事件。事件合用對象、select、text、textarea。下面例子在文本框內(nèi)容改變后，將彈出一個顯示“內(nèi)容即將改變！”對話框：第21頁第21頁頁面運營后在文本框中輸入內(nèi)容，即內(nèi)容發(fā)生改變，然后將鼠標(biāo)拖走，就會引起onChange事件 將內(nèi)容改成“Test1”后將鼠標(biāo)拖走，即彈出對話框。第22頁第22頁選中事件onSelect 當(dāng)text或text

12、area對象中文字被選中后（文字高亮顯示），引起該事件。下面例子中，當(dāng)文本框內(nèi)容被選中后，將彈出一個顯示“內(nèi)容已被選中!”對話框： 選中文本框中內(nèi)容后，就會彈出對話框 第23頁第23頁取得焦點事件onFocus 當(dāng)用戶單擊text或textarea以及select對象時，產(chǎn)生該事件。此時該對象成為前臺對象。該事件合用對象：button，checkbox，layer，password，radio，reset，select，submit，text，textarea，window。下面例子中，當(dāng)鼠標(biāo)移到文本域地方即取得焦點時，立刻彈出一個提醒“已經(jīng)取得焦點!”對話框： 第24頁第24頁失去焦點onB

13、lur 當(dāng)text對象或textarea對象以及select對象不再擁有焦點、而退到后臺時，引起該事件，onBlur事件與onFocus事件是一個相應(yīng)關(guān)系。該事件合用對象：button，checkbox，layer，password，radio，reset，select，submit，text，textarea，window。 下面例子中，瀏覽器起始背景色為“l(fā)ightgrey”，當(dāng)鼠標(biāo)移到文本域地方即取得焦點時，瀏覽器背景色變?yōu)椤皉ed”，當(dāng)鼠標(biāo)焦點移動到瀏覽器其它地方時，瀏覽器背景色變?yōu)椤皐hite”。第25頁第25頁運營后，文本框取得焦點后頁面顯示效果如圖所表示： 第26頁第26頁載入文

14、獻(xiàn)onLoad 當(dāng)文獻(xiàn)載入時，產(chǎn)生該事件。onLoad作用就是在初次載入一個文檔時檢測cookie值，并用一個變量為其賦值，使它能夠被源代碼使用。下面代碼在文檔打開時，將彈出提醒“提議瀏覽器分辨率：800 x600”對話框。function show()var str=提議瀏覽器分辨率：800 x600;alert(str); 第27頁第27頁鼠標(biāo)批示事件onMouseOver 當(dāng)鼠標(biāo)指到相應(yīng)位置時引起事件。事件合用對象：layer，link。下面例子中，用href給“Click me”加上一個超鏈接，當(dāng)鼠標(biāo)指到超鏈接“Click me”時，將在狀態(tài)欄提醒“Click this if you

15、dare!”。Click me 當(dāng)鼠標(biāo)指到文字“Click me”上時，將在狀態(tài)欄顯示提醒文字“Click this if you dare!” 第28頁第28頁提交事件onSubmit 它是在點擊提交按鈕時引起事件。事件合用對象：form語法：onSubmit=handlerText下面例子中，在點擊“提交”按鈕時，就會彈出一個“你確認(rèn)提交嗎?”提醒對話框。 在點擊“提交”按鈕后，將引起onSubmit事件，從而彈出提醒對話框 第29頁第29頁定期器 定期器是用以指定在一段特定期間后執(zhí)行某段程序。慣用定期器函數(shù)有下列幾種：setTimeout()：定期器clearTimeout()：終止定期器setInterval()：設(shè)置定期器clearIn