主題
JavaScript是什麼
JavaScript程式碼應該放置在哪裡
JavaScript語言
JavaScript函式
JavaScript事件
JavaScript物件
JavaScript HTML DOM 物件
一、JavaScript是什麼
JavaScript用來給HTML頁面增加互動性
JavaScript是一種指令碼語言（輕量級的程式設計語言）
JavaScript通常被嵌入到HTML頁面中
JavaScript是一種解釋語言（無須預先編譯，邊解釋邊執行）
二、JavaScript能做些什麼
JavaScript給HTML設計者提供了一個程式設計工具
JavaScript能動態的向HTML頁面中加入文字
JavaScript能夠響應事件
JavaScript能夠讀寫HTML元素
JavaScript能夠用來驗證資料
JavaScript能夠探測訪問者的瀏覽器
JavaScript能夠用來建立cookies
三、JavaScript程式碼放在哪裡，該如何放
使用標記（可以使用該標記的type屬性定義使用的指令碼語言，如VBScript）
<html>
<head>
<script type=”text/javascript”>
…
</script>
</head>
<body>
<script type=”text/javascript”>
…
</script>
</body>
</html>
複製程式碼指令碼能夠放在＜head＞ 或者＜body＞部分，譯者注：當然放在＜head＞ 部分的一般是函式，或者是列印HTML頭部元素，而在＜body＞部分可以是任意的JavaScript程式碼，只要輸出的text符合HTML規範。也可以將JavaScript程式碼與頁面分離，使用＜script＞標記的src 屬性來定義要引入的JavaScript程式碼檔案（.js檔案）。
譯註：在IE6.0和Firefox中測試，type=”text/javascript”將影響指令碼的執行，建議刪除。而用language=”javascript”代替
<html>
<head>
<script language=”JavaScript”
Src=”http://somesite/myOwn JavaScript.js”>
</script>
<script language=”JavaScript”
Src=”http://somesite/myOwn 2ndJavaScript.js”>
</script>
</head>
複製程式碼四、JavaScript變數
你可以使用var或者根本不需要就可以直接建立一個變數
Var straname=some value
Strid=some value
複製程式碼如果你在一個函式中宣告一個變數，那麼該變數只在函式範圍內有效
如果你在函式外宣告一個變數，在你頁面中的所有的函式都可以使用它
變數的生命週期是從你開始宣告它開始，直到頁面被關閉而結束
五、JavaScript訊息框
u 警告框
使用者只有按了“OK”後才能繼續：alert(“sometext”)
u 確認框
使用者只有按了“OK”或“Cancel”後才能繼續：confirm(“cometext”)
譯註：如果使用者選擇不同的按鈕將返回不同的值，“OK”返回true，“Cancel”返回false你可以獲取該值進行判斷。
u 互動框
使用者輸入一個值後，再按“OK”或“Cancel”後才能繼續: prompt(“sometext”,”defaultcalue”) 譯註：將返回使用者輸入的值。
六、JavaScript語句
條件語句if,if..else,switch
迴圈語句 for loop,while loop
Try…catch
Throw
譯註：此與java類同，除後兩條外與C類同
七、JavaScript函式
函式包含的程式碼只有在一個事件或者一個呼叫發生的時候才會被執行。
譯註：如果你把程式碼寫在＜script＞中，而不寫在函式中，那麼頁面一裝載，程式碼就會被立即執行，所以我們可以將程式碼放入函式中， 然後用HTML事件來呼叫。
你也可以在頁面任何地方呼叫你的函式
函式例項
<html>
<head>
<script language=”JavaScript” >
// 如果Alert(“Hello World!”)不是寫在下面的函式中，頁面一裝載時，程式碼就會被立即執行
Function diaplaymessage(){
Alert(“Hello World!”)
}
</script>
</head>
<body>
<form>
<input type=”button” calue=”Click Me!” onclick=”diaplaymessage()”>
</form>
</body>
</html>
複製程式碼注意：JavaScript程式碼關鍵字是區分大小寫的，如上程式碼儘量寫小寫（這裡是word自動將首字母改為了大寫）。
八、事件和事件處理器
每一個web頁面都包含有各種各樣的事件，來激發事件處理函式
為了定義事件和事件處理函式，我們可以在HTML標記中插入各種事件屬性
各種事件的例子：
滑鼠點選
一個網頁或圖片的裝載
在HTML表單中選擇一個輸入框
按下鍵盤…
HTML中的各種事件屬性：
Onabort 圖片裝入的時候被中斷
Onblur 一個元素失去焦點
Onchange 域的內容被改變
Onclick 滑鼠單擊一個物件
Ondblclick 滑鼠雙擊
Onerror 當裝載文件或圖片的時候發生錯誤
Onfocus 一個元素獲得焦點
Onkeydown 一個鍵盤鍵被按下
Onkeypress 一個鍵盤鍵被按下或者保持在下
Onkeyup 一個鍵盤鍵被釋放
Onload 一個頁面或者圖片完成裝載
Onmousedown 滑鼠鍵被按下
Onmousemove 滑鼠移動
Onmouseout 滑鼠移出某個元素
Onmouseup 釋放滑鼠鍵
Onreset 點選了reset按鈕
Onresize 視窗被改變大小
Onselect 文字被選擇
Onsubmit 點選了submit按鈕
Onunload 使用者退出頁面
l Onload和unload事件
這兩個事件當使用者進入或者離開頁面時被觸發，onload事件一般用來檢查訪問者瀏覽器的型別和版本，然後根據這些來裝載合適的web頁面。這兩個事件一般用來在當使用者進入或退出頁面時處理一些需要設定的cookies。
l Onfocus、onblur和onchange事件
這三個事件一般聯合起來進行表單驗證，例如當使用者改變域中的內容時，checkEmail()函式將被呼叫：＜input type=”text” size=”30” id=”email” onchange=”checkEmail()”＞
Onblur演示例子：
<html><head>
<script language=”javascript”>
Function uppercase(){
Var x=document.getElementById(“fname”).value
Document.getElementById(“fname”).value=x.toUpperCase()
}
</script>
</head>
<body>
Enter your name:
<input type=”text” id=”fname” onblur=”uppercase()”>
</body>
</html>
複製程式碼Onsubmit演示例子：
<html><head>
<script language=”javascript”>
Function validate(){
//基於驗證邏輯返回true 或者false
}
</script>
</head>
<body>
<form action=”tryjs_submitpage.htm” onsubmit=”return validate()”>
Name(最多10個字元)<input type=”text” id=”fname” size=”20” ><br/>
Age(從1到100)(最多10個字元)<input type=”text” id=”age” size=”20” ><br/>
Email:<input type=”text” id=”email” size=”20” ><br/>
<br/>
<input type=”submit” value=”遞交” >
</body>
</html>
複製程式碼l onMouseOver和onMouseOut事件
這兩個事件一般用來建立動畫按鈕，下面是一個關於onMouseOver事件的例子，當該事件被探測到時，出現一個警告框：
<a href=http://www.xgtimes.com onmouseover=”alert(‘一個onmouseover事件’);return false” >
<img src=”xgtimeslogo.gif” width=”100” height=”30”></a>
複製程式碼九、JavaScript物件
n JavaScript是一種物件導向的變成語言，一個JavaScript物件有屬性和方法：
例如：String 物件有length屬性和oUpperCase()方法：
<script language=” JavaScript”>
Var txt=”hello world!”
Document.write(txt.length)
Document.write(txt.roUpperCase())
</script>
複製程式碼n JavaScript內建物件
u String
u Date
u Araay
u Boolean
u Math
n 建立你自己的JavaScript物件
u 兩種不同的方法
l 建立一個物件的直接例項
l 建立一個物件的模板
u 建立一個物件的直接例項
n 建立一個物件的例項，增加四個屬性
personObj=new Object()
personObj.firstname=”john”
personObj.lastname=”doe”
personObj.age=50
personObj.eyecolor=”blue”
複製程式碼n 增加一個eat的方法，這eat()是一個已經定義或需要定義的函式，這與java 中方法的定義是有很大不同的
personObj.eat=eat
u 建立一個物件的模板
n 模板定義了JavaScript物件的結構
Function person(firstname,lastname,age,eyecolor){
This.firstname=firstname;
This.lastname=lastname;
This.age=age;
This.eyecolor=eyecolor;
}
複製程式碼注意模板僅僅是個函式
q 一旦你有了模板，你就可以建立新的物件例項
myFather=new person(“John”,”Doe”,50,”blue”);
myMother=new person(“Sally”,”Rally”,48,”green”);
複製程式碼q 你也能增加一些方法到person物件，這也是在模板中完成的。
Function person(firstname,lastname,age,eyecolor){
This.firstname=firstname;
This.lastname=lastname;
This.age=age;
This.eyecolor=eyecolor;
This.newlastname=newlastname;
}
複製程式碼方法就是JavaScript函式
Function newlastname(new_lastname){
This.lastname=new_lastname
}
複製程式碼十、HTML DOM
HTML DOM為HTML定義了一個標準的物件集，和一個標準的訪問和操作HTML文件的方法。只要它們包含文字和屬性，所有的HTML元素都可以通過DOM訪問，包括刪除修改內容，建立元素。HTML DOM 是一個獨立的平臺和語言。它可以在任何象Java,JavaScript,VBScript語言中使用。
u HTML DOM 物件：
u Anchor物件
u Document物件
u Event物件
u Form和form Input物件
u Frame,Frameset和IFrame物件
u Image物件
u Location物件
u Navigator物件
u Option和Select物件
u Screen物件
u Table,TableHeader,TableRow,TableData物件
u Window物件
十一、document物件
寫入文字到輸出流：
<html>
<body>
<script language=”javascript”>
Document.write(“hello world”)
</script>
</body>
</html>
寫入格式化文字到輸出流：
<html>
<body>
<script language=”javascript”>
Document.write(“<h1>hello world<h1>”)
</script>
</body></html>
使用getElementById()
<html>
<body>
<script language=”javascript”>
Function getElement(){
Var x=document. getElementById(“myHeader”)
Alert(“I am a ” + x.tagName + “ element”)
}
</script>
<h1 id=”myHeader” onclick=”getElement()”>點我看我是什麼元素
</body>
</html>
使用getElementsByName()
<html>
<head>
<script language=”javascript”>
Function getElements(){
Var x=document. getElementByName(“myInput”)
Alert(x.length + “ elements!”)
}
</script>
</head>
<body>
<input name=”myInput” type=”text” size=”20”><br/>
<input name=”myInput” type=”text” size=”20”><br/>
<input name=”myInput” type=”text” size=”20”><br/>
<br/
<input type=”text” onclick=”getElements” value=”有多少元素命名為’myInput’”><br/>
</body>
</html>
返回文件中第一個錨點的innerHTML（內部文字）
<html>
<body>
<a name=”first”>first anchor</a><br/>
<a name=”second”>second anchor</a><br/>
<a name=”third”>third anchor</a><br/>
</br>
複製程式碼文件中第一個錨點的InnerHTML ：
<script language=”javascript”>
Document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>
訪問集合中的一項：
<html>
<body>
<form id=”Form1” name=”Form1”>
名字：<input type=”text”>
</form>
<p>你可以使用專案的數字或者名稱訪問集合中的項：
</p>
<script language=”javascipt”>
Document.write(“<p>第一個表單的名字是：”+document.forms[0].name+”</p>”)
Document.write(“<p>第一個表單的名字是：”+document.getElementById(“form1”). name+”</p>”)
</body>
</html>
複製程式碼十二、事件物件
u 什麼是游標的位置
<html>
<head>
<script language=”javascript”>
Function show_coords(event){
X=event.clientx
Y=event.clientY
alert("x:"+X+" y:"+Y)
}
</script>
</head>
<body onmousedown=”show_coords(event)”>
<p>點選文件，將出現一個警告框來顯示游標的X，Y座標</p>
</body>
</html>
u 什麼是被按下鍵的unicode碼
<html>
<head>
<script language=”javascript”>
Function whichButton(event){
Alert(event.keyCode)
}
</script>
</head>
<body onkeyup=”whichButton(event)”>
<p>注意：當測試該例時，保證正確的視窗處於焦點狀態，按下鍵後，一個警告框顯示按下去的那鍵的unicode碼</p>
</body></html>
複製程式碼u 哪一個元素被單擊
<html>
<head>
<script language=”javascript”>
Function whichElement(e){
Var targ
If(!e) var e=window.event
If(e.target) targ=e.target
Else if(e.srcElement) targ=e.srcElement
If(targ.nodeType==3) targ=targ.parentNode
Var tname
Tname=targ.tagName
Alert(“你單擊了一個” + tname + “ element.”)
}
</script>
</head>
<body onmousedown=”whichElement(event)”>
<p>單擊文件的任何地方，一個警告框顯示你單擊餓元素的標記名</p>
<h3>this is a header</h3>
<p>這是一個段落</p>
<img src=”ball.gif” width=”29” height=”28” alt=”ball”>
</body></html>
複製程式碼u 哪種型別事件被髮生
<html>
<head>
<script language=”javascript”>
Function whichType(event){
Alert(event.type)
}
</script>
</head>
<body onmousedown=”whichType(event)”>
u <p>單擊文件，一個警告框顯示哪種型別事件被髮生
</p>
</body></html>
複製程式碼