JavaScript 簡介
JavaScript 是什么?
JavaScript 是一種廣泛應(yīng)用于客戶端網(wǎng)頁(瀏覽器)開發(fā)的腳本語言,如用來給 HTML 網(wǎng)頁添加動態(tài)功能,比如響應(yīng)用戶的各種操作等。
JavaScript 是一種基于對象(Object)和事件驅(qū)動(Event Driven)并具有安全性能的腳本語言,大部分情況下是由網(wǎng)頁瀏覽器來執(zhí)行的。
JavaScript 是美國 Sun 公司的注冊商標,目前 Javascript 的最新版本為 1.9 版,遵循 Ecma 國際(前身為歐洲計算機制造商協(xié)會)的 ECMA-262標準(即ECMAScript),該版本還在不斷發(fā)展中。
JavaScript 特點
腳本編寫語言
JavaScript 是一種腳本語言,它采用小程序段的方式實現(xiàn)編程。像其它腳本語言一樣,JavaScript 是一種解釋性語言,在瀏覽器執(zhí)行的時候被逐行的翻譯。
基于對象的語言
JavaScript 是一種基于對象的語言,同時也可以看作是面向?qū)ο蟮?,這意味著它能運用自己已經(jīng)創(chuàng)建的對象。因此,許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。
簡單性
要使用了編寫 JavaScript 是非常簡單的,您無需安裝特定的開發(fā)環(huán)境,只需要一個簡單的記事本即可編寫 JavaScript 腳本。它具有基本的程序語法和語言結(jié)構(gòu)以及弱數(shù)據(jù)類型,而這些都是很容易學習和使用的。
安全性
JavaScript 是一種安全性語言,它不允許訪問本地的硬盤,并不能將數(shù)據(jù)存入到服務(wù)器上,不允許對網(wǎng)絡(luò)文檔進行修改和刪除,只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互,從而有效地防止數(shù)據(jù)的丟失。
動態(tài)性
JavaScript 是動態(tài)的,它可以直接對用戶的輸入做出響應(yīng),無須經(jīng)過 Web 服務(wù)程序。它對用戶的反映響應(yīng),是采用以事件驅(qū)動的方式進行的。所謂事件驅(qū)動,是指在網(wǎng)頁中執(zhí)行了某種操作所產(chǎn)生的動作,就稱為“事件”(Event):比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發(fā)生后,可能會引起相應(yīng)的 JavaScript 事件響應(yīng)。
跨平臺性
JavaScript 是由網(wǎng)頁瀏覽器來執(zhí)行,與操作系統(tǒng)環(huán)境無關(guān),只要能運行瀏覽器的計算機,并支持 JavaScript 的瀏覽器就可正確執(zhí)行。
直接寫入 HTML 輸出
<html> <head> <script> alert('Hello, world'); </script> </head> <body> <p>...</p> </body> </html>
對事件的反應(yīng)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <button type="button" onclick="alert('你好!')">點我!</button> </body> </html>
改變 HTML 內(nèi)容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"> 內(nèi)容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改變內(nèi)容 } </script> <button type="button" onclick="myFunction()">點擊這里</button> </body> </html>
改變 HTML 圖像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> <p>點擊燈泡查看效果</p> </body> </html>
改變 HTML 樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"> 改變 HTML 的樣式。 </p> <script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="blue"; // 改變樣式 } </script> <button type="button" onclick="myFunction()">點擊這里</button> </body> </html>
驗證輸入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>