Java Script初探
1.JavaScript:寫入HTML輸出
示例：
document.write("<h1>thisis a heading</h1>");注意：document.write()僅僅向文件輸出寫內容。
如果在文件已完成載入後執行document.write，整個 HTML 頁面將被覆蓋
2.alert();函式對事件作出反應
在JavaScript中並不常用，通常用於對程式碼的測試。
示例：
<button type="button" onclick='' alert('welcome!’)/>點選彈出對話方塊</button3.JavaScript：改變HTML的內容
示例：
X = document.getElementById("myId"); <!--通過ID獲得元素-->
X.innerHTML = “helloworld”; <!--改變內容-->4.JavaScript：改變HTML影象
示例：
<script> functionimageChange(){ element =document.getElementById("myimage"); If(element.src.match("bulbon")){<!--判斷src中是否有bulbon欄位，如果有就返回true--> element.src = "i/eg_bulboff.gif";<!--設定路徑--> }else{<!--如果路徑中沒有bulbon欄位就返回false--> element.src = "i/eg_bulbon.gif";<!--設定路徑--> } } </script> <body> <img id = "myimage" onclick = "imageChange()" src= "i/eg_bulbon.gif"> </body>
5.JavaScript：改變HTML樣式
示例：
<script> function changeStyle(){ element = document.getElementById("myStyle"); element.style.color="#ff0000";<!--改變id為myStyle的元素的顏色--> } </script> <body> <p id = "myStyle">測試JavaScript改變HTML樣式</p> <button type = "button" onclick = "changeStyle()"></button> </body>
6.JavaScript：驗證使用者的輸入
示例：
<script>
function verifIcation(){
var x;
x = document.getElementById("myInput").value;
If(x == "" || isNaN(x)){
Alert("您輸入的不是數字");
}<!--判斷id為myInput的輸入框元素是否為數字-->
}
</script>
<body>
<input id = "myInput" type = "text">
<button type = "button" onclick = "verifIcation()"></button>
</body>7. JavaScript的重新宣告
var carname="test";
var carname;
Alert(carname);//顯示的值依舊是test8.JavaScript：動態型別
JavaScript 擁有動態型別。這意味著相同的變數可以用作不同的型別：
示例：
var x; //值為undefined
var x = 6; //值為數字
var x = "test"; //值為字串9.JavaScript：數字
JavaScript 只有一種數字型別，數字型別可以帶小數點，也可以不帶。
10 JavaScript：布林
JavaScript 布林（邏輯）只能有連哥哥值： true 或 false
11.JavaScript：陣列
示例：
//示例1
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
//示例2
var cars = new array("Audi","BMW","Volvo");
//示例3
var cars = ["Audi","BMW","Volvo"];
12.JavaScript：物件
示例：
var person = {name:"zhangsan", age:18, sex:"man"}
//取值方式
1. name = person.name;
2. name = person["name"]
13.JavaScript：new
示例：
var carname = new String; //宣告為字串型別
var x = new Number; //宣告為數字型別
var y = new Boolean; //宣告為布林型別
var cars = new Array; //宣告為陣列
var person = new Object; // 宣告為物件14.JavaScript：函式
示例：
function functionName(){};1. JavaScript對大小寫非常敏感，關鍵詞 function 必須要小寫，並且必須以與函式名稱相同的大小寫來呼叫函式。
2.返回和推出方式： return
3.在JavaScript函式中內部宣告的變數是區域性變數，外部宣告的變數是全域性變數。
4.變數的生命週期：
生命週期從宣告開始；
區域性變數在函式執行結束後被刪除；
全域性變數在頁面關閉後被刪除；
如果給一個未宣告的變數賦值，該變數自動成為全域性變數，即使在函式的內部；
示例： carname = "Audi";
15.JavaScript：運算子
JavaScript的運算子分為算術運算子和賦值運算子；
16.JavaScript：for迴圈
示例：
var a = new array(1,2,3,4,5,6);
For(i=0;a.lengh;i++){
document.write(a[i] + "<br>");
}1. for — 迴圈程式碼塊一定的次數；
2. for/in — 迴圈遍歷物件的屬性；
示例：
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
txt=txt + person[x];
}3. while — 當指定條件為 true 時迴圈指定的程式碼塊；
while(條件){
//需要執行的程式碼
} 4. do/while — 同樣當指定的條件為 true 時迴圈指定的程式碼塊；
do{
//需要迴圈的程式碼
}while(條件)；注意：該迴圈至少會執行一次，即使條件為false，隱藏程式碼塊會在條件被執行前執行；
關鍵字：
continue：跳過本次迴圈，執行下一次迴圈；
Break：跳出當前迴圈；
17. JavaScript：標籤
如果需要對一個JavaScript預計進行標記，在其之前加上冒號 ":" 標記後可以用break跳轉到標記的位置；
示例：
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}18. JavaScript：異常捕獲 try catch throw
示例： try catch
try{
//在這裡執行程式碼
}catch(err){
//在這裡處理錯誤
} <script>
function myFunction(){
try{
var x=document.getElementById("demo").value;
if(x=="") throw "值為空";
if(isNaN(x)) throw "不是數字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}catch(err){
var y=document.getElementById("mess");
y.innerHTML="錯誤：" + err + "。";輸入值為空時列印結果“錯誤：值為空。”
}
}
</script>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">測試輸入值</button>
<p id="mess"></p>19.通過ID查詢Html元素
var x = document.getElementById("myId");
var y =x.getElementsByTagName("P");釋義：1.獲得id=myId下的元素，2.查詢id=myId的元素下所有<p>
20.JavaScript:事件
1.onclick
2.onload、onunload
2.1 onload和 onunload 事件會在使用者進入或離開頁面時被觸發。
2.2 onload事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本，並基於這些資訊 來載入網頁的正確版本。
2.3 onload和 onunload 事件可用於處理 cookie。
//示例：
<body onload="checkCookies()">3.Onchange
示例：當用戶改變輸入欄位的內容時，呼叫upperCase() 函式。
4.onmouseover、onmouseout
示例：當滑鼠在元素上方或離開時出發函式；
5.onmousedown、onmouseup
示例：onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時，會觸發onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件，最後，當完成滑鼠點選時，會觸發 onclick 事件。
21. JavaScript：新增（HTML元素）
示例：
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div> <script>
//建立一個新的<p>元素para
var para=document.createElement("p");
//建立一個新的文字節點node
var node=document.createTextNode("這是新段落。");
//將文字節點node加入到<p> 元素para中
para.appendChild(node);
//通過id獲得元素
var element=document.getElementById("div1");
//將<p>元素para新增至id=div1的元素中
element.appendChild(para);
</script>22.JavaScript刪除（HTML元素）
示例：
//（方法一）
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
//獲得要刪除的節點的父類元素
var parent=document.getElementById("div1");
//獲得要刪除的元素
var child=document.getElementById("p1");
//刪除元素
parent.removeChild(child);
</script>
//（方法二）
var child = document.getElementById("p1");
child.parentNode.removeChild(child);