Javascript函数和事件
一、默認函數(shù)
JavaScript提供了一些默認的函數(shù)
?
編碼函數(shù)escape():將非字母、數(shù)字字符轉(zhuǎn)換成ASCII碼
譯碼函數(shù)unescape():將ASCII碼轉(zhuǎn)換成字母、數(shù)字字符
求值函數(shù)eval()
數(shù)值判斷函數(shù)isNaN():判斷一個值是否為非數(shù)值類型
整數(shù)轉(zhuǎn)換函數(shù)parseInt():將不同進制(二、八、十六進制)的數(shù)值轉(zhuǎn)換成十進制整數(shù)
浮點數(shù)轉(zhuǎn)換函數(shù)parseFloat():將數(shù)值字串轉(zhuǎn)換成浮點數(shù)
1、eval()函數(shù)
求值函數(shù)eval()的格式為:eval(<表達式>)
下面的例子將用eval函數(shù)得到一個文本框的值,
然后通過點擊按鈕彈出一個對話框?qū)⑵漭敵觥?/span>
<script>
function?show(obj)
{
??? var?str=eval("document.Form."+obj+".value");
??? alert(“你輸入的姓名是:”+str);
}
</script>
<form?name="Form"?id="Form">
????姓名:
????<input?name="name"?type="text"?value="韋小寶">
???<input?name="button"?type="button"?value="提交"?onClick=show("name")>
</form>
?
2、isNaN()函數(shù)
數(shù)值判斷函數(shù)isNaN()的格式:isNaN(<量>)
?
???????下例中isNaN函數(shù)將判斷變量是否不是數(shù)值,并輸出判斷結(jié)果。
<script>
????var?x=15;
????var?y="黃雅玲";
??? document.write("<LI>x不是數(shù)值嗎?",isNaN(x));
??? document.write("<LI>y不是數(shù)值嗎?",isNaN(y));
</script>
3、parseInt()函數(shù)
???????整數(shù)轉(zhuǎn)換函數(shù)parseInt()的功能是將不同進制(二、八、十六)的數(shù)值轉(zhuǎn)換成十進制整數(shù)。
???????格式:parseInt(數(shù)值字串[,底數(shù)])
???????下面演示了將一個二進制數(shù)和一個十六進制數(shù)轉(zhuǎn)換成十進制數(shù)。
?
<script>
??? document.write("1101<sub>2</sub>=",parseInt("1101",2),"<sub>10</sub><br>");
??? document.write("BFFF<sub>16</sub>=",parseInt("BFFF",16),"<sub>10</sub><br>");
</script>
4、parseFloat()函數(shù)
parseFloat()是浮點數(shù)轉(zhuǎn)換函數(shù),它將數(shù)值字串轉(zhuǎn)換成浮點數(shù)。
???????格式:parseFloat(數(shù)值字串)
<script>
??? document.write(parseInt("3.1234A56"),"<br>");
??? document.write(parseFloat("3.1234A56"),"<br>");
</script>
5、自定義函數(shù)
函數(shù)是獨立于主程序的、具有特定功能的一段程序代碼塊。
?
JavaScript函數(shù)定義
?
function?函數(shù)名(參數(shù)表,變元)
{
???????函數(shù)體;
?????? return?表達式;
}
?
說明:
·當調(diào)用函數(shù)時,所用變量或字面量均可作為變元傳遞。
·函數(shù)由關(guān)鍵字function定義。
·函數(shù)名:定義自己函數(shù)的名字。
·參數(shù)表,是傳遞給函數(shù)使用或操作的值,其值可以是常量、變量或其它表達式。
·通過指定函數(shù)名(實參)來調(diào)用一個函數(shù)。
·函數(shù)的返回值是可選項,如果需要返回值,就必須使用return語句將值返回。
·函數(shù)名對大小寫是敏感的。
約定:
·函數(shù)名:易于識別(同變量命名規(guī)則)。
·程序代碼:模塊化設(shè)計。
·函數(shù)位置:按邏輯順序,集中置頂。
?
6、函數(shù)中的形式參數(shù)
在函數(shù)的定義中,我們看到函數(shù)名后有參數(shù)表,這些參數(shù)變量可能是一個或幾個。那么怎樣才能確定參數(shù)變量的個數(shù)呢?在JavaScript中可通過arguments.length來檢查參數(shù)的個數(shù)。
<script>
???????function?function_Name(exp1,exp2,exp3,exp4)
?????? Number =function_Name.arguments.length;
???????if(Number>1)
?????????? document.wrile(exp2);
???????if(Number>2)
?????????? document.write(exp3);
???????if(Number>3)
?????????? document.write(exp4);
????</script>
函數(shù)的調(diào)用
格式:函數(shù)名([參數(shù)[,參數(shù)...]])
下面的例子演示了沒有返回值的函數(shù)的定義及調(diào)用。
?
<script>
????function?showName(name)
????{
???????document.write("我是"+name);
????}
????showName("玲玲");?//函數(shù)調(diào)用
</script>
???????上例中的function showName(name)為函數(shù)定義,其中括號內(nèi)的name是函數(shù)的形式參數(shù),這一點與C語言是完全相同的,而showName(“玲玲”)則是對函數(shù)的調(diào)用,用于實現(xiàn)需要的功能。
???????下面的例子演示了帶返回值的函數(shù)的定義及調(diào)用。
<script>
????function?showName(name)
????{
???????str="我是"?+name;
???????return?str;
????}
????document.write(showName("周伯通"));
</script>
?
二、函數(shù)與事件
事件驅(qū)動及事件處理的基本概念
?
?????? JavaScript是基于對象(Object-Based)的語言,這與Java不同,Java是面向?qū)ο蟮恼Z言。而基于對象的基本特征,就是采用事件驅(qū)動(Event Driven)。通常鼠標或熱鍵的動作我們稱之為事件(Event),而由鼠標或熱鍵引發(fā)的一連串程序的動作,稱之為事件驅(qū)動(Event Driver)。而對事件進行處理的程序或函數(shù),我們稱之為事件處理程序(Event Handler)。
事件處理程序
???????瀏覽器響應某個事件,實現(xiàn)用戶的交互操作而進行的處理(過程)。
???????事件處理程序的調(diào)用:瀏覽器等待用戶的交互操作,并在事件發(fā)生時,自動調(diào)用事件處理程序(函數(shù)),完成事件處理過程。
?
?????? HTML標簽屬性:
???????格式:<tag on事件=“<語句組>|<函數(shù)名>”>
由于在JavaScript中對象事件的處理通常由函數(shù)(function)來完成,且其基本格式與函數(shù)一樣,所以可以將前面所介紹的所有函數(shù)作為事件處理程序。
格式如下:
function?事件處理名(參數(shù)表)
{
???????事件處理語句集;
?????? ……
}
三、事件驅(qū)動
JavaScript事件驅(qū)動中的事件是通過鼠標或熱鍵的動作引發(fā)的。它主要有以下幾個事件:
單擊事件onClick
改變事件onChange
選中事件onSelect
獲得焦點事件onFocus
失去焦點onBlur
載入文件onLoad
鼠標指示事件onMouseOver
提交事件onSubmit
1、單擊事件onClick
???????當用戶單擊鼠標按鈕時,產(chǎn)生onClick事件。同時onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。通常在下列基本對象中產(chǎn)生單擊事件:
button(按鈕對象)
checkbox(復選框)或(檢查列表框)
radio(單選鈕)
reset buttons(重要按鈕)
submit buttons(提交按鈕)
比如,可以通過下面的按鈕激活change()函數(shù),當然change()函數(shù)是需要另外提供的:
?
<form>
????<input?type="button"?value=“”?onClick="change()">
</form>
在onClick等號后,可以使用自己編寫的函數(shù)作為事件處理程序,也可以使用JavaScript的內(nèi)部函數(shù),還可以直接使用JavaScript的代碼等。
<body>
????<form>
???????請輸入基本資料:<br>
???????姓名:
???????<input?type="text"?name="usr"?size="8">
???????<input?type="button"?value="請單擊" ??????????????onClick="alert('謝謝你的填寫...')">
????</form>
</body>點擊“請單擊”按鈕后將引發(fā)onClick事件,即彈出“謝謝你的填寫...”的對話框。
2、改變事件onChange
???????當一個text或textarea域失去焦點并更改值時觸發(fā)onChange事件,當select下拉選項中的一個選項狀態(tài)改變后也會引發(fā)該事件。
???????事件適用對象fileUpload、select、text、textarea。
???????下面的例子在文本框的內(nèi)容改變后,將彈出一個顯示“內(nèi)容即將改變!”的對話框:
???????<form>
???????<input?type="text"?name="Test"?value="Test" ????????????????onChange="alert('內(nèi)容即將改變!')">
????</form>
?
???????頁面運行后在文本框中輸入內(nèi)容,即內(nèi)容發(fā)生改變,然后將鼠標拖走,就會引發(fā).
3、onChange事件
選中事件onSelect
???????當text或textarea對象中的文字被選中后(文字高亮顯示),引發(fā)該事件。
???????下面的例子中,當文本框的內(nèi)容被選中后,將彈出一個顯示“內(nèi)容已被選中!”的對話框:
???????<form>
???????<input?type="text"?name="Test"?value="Test" ????????????onSelect="alert('內(nèi)容已被選中!')">
????</form>
4、獲得焦點事件onFocus
當用戶單擊text或textarea以及select對象時,產(chǎn)生該事件。此時該對象成為前臺對象。
?
???????該事件適用對象:button,checkbox,fileUpload,layer,password,radio,reset,select,submit,text,textarea,window。
?
???????下面的例子中,當鼠標移到文本域的地方即獲得焦點時,立刻彈出一個提示“已經(jīng)獲得焦點!”的對話框:
???????<input?type="textarea"?value=""?name="valueField"?onFocus="alert('已經(jīng)獲得焦點!')">
5、失去焦點onBlur
當text對象或textarea對象以及select對象不再擁有焦點、而退到后臺時,引發(fā)該事件,onBlur事件與onFocus事件是一個對應的關(guān)系。
???????該事件適用對象:button,checkbox,fileUpload,layer,password,radio,reset,select,submit,text,textarea,window。
?
???????下面的例子中,瀏覽器的起始背景色為“l(fā)ightgrey”,當鼠標移到文本域的地方即獲得焦點時,瀏覽器的背景色變?yōu)?/span>“red”,當鼠標焦點移動到瀏覽器的其他地方時,瀏覽器的背景色變?yōu)?/span>“white”。
<body?bgColor="lightgrey">
????<form>
???????<input?type="text" ???????????????????????onFocus="document.bgColor='red'"?????? ????onBlur="document.bgColor='white'"?>
????</form>
</body>
6、載入文件onLoad
當文件載入時,產(chǎn)生該事件。onLoad的作用就是在首次載入一個文檔時檢測cookie的值,并用一個變量為其賦值,使它可以被源代碼使用。
???????下面的代碼在文檔打開時,將彈出提示“建議瀏覽器的分辨率:800x600”的對話框。
<script>
????function?show()
????{
?????? var?str="建議瀏覽器的分辨率:800x600";
?????? alert(str);
????}
</script>
<body?onload="show();">
7、鼠標指示事件onMouseOver
當鼠標指到相應的位置時引發(fā)的事件。
事件適用對象:layer,link。
???????下面的例子中,用href給“Click me”加上一個超鏈接,當鼠標指到超鏈接“Click me”時,將在狀態(tài)欄提示“Click this if you dare!”。
<a?href="http://www.myhome.com/"
????onMouseOver="window.status='Click this if you dare!'; return true">
Click me
</a>
當鼠標指到文字“Click me”上時,將在狀態(tài)欄顯示提示文字“Click this if you dare!”
8、提交事件onSubmit
它是在點擊提交按鈕時引發(fā)的事件。
事件適用的對象:form
語法:onSubmit="handlerText"
???????下面的例子中,在點擊“提交”按鈕時,就會彈出一個“你確認提交嗎?”的提示對話框。
<form?onSubmit="alert('你確認提交嗎?')">
???????<input?type="text"?name="txt"?value="測試文本">
???????<input?type="submit"?value="提交">
????</form>
補充:定時器
定時器是用以指定在一段特定的時間后執(zhí)行某段程序。常用的定時器函數(shù)有以下幾個:
setTimeout():定時器
clearTimeout():終止定時器
setInterval():設(shè)置定時器
clearInterval():取消使用setInterval()設(shè)置的定時器
總結(jié)
以上是生活随笔為你收集整理的Javascript函数和事件的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaScript绑定事件的方法[3种
- 下一篇: 好用的Eclipse 插件