JavaScript學習筆記+常用js用法、範例

 

Java Script 基礎
一、 JS的簡介
JavaScript是一種網頁程式設計技術，經常用於建立動態互動網頁
JavaScript是一種基於物件和事件驅動的解釋性指令碼語言，類似C語言和Java的語法
事先不編譯；逐行執行；無需進行嚴格的變數宣告；內建大量現成物件，編寫少量程式可以完成目標
不同的瀏覽器甚至同一瀏覽器的不同版本對JavaScript的支援程度都不一樣

二、 JS的基本語法
0. 有兩種JavaScript寫法：
a. 直接在 html 中嵌入，程式寫法:
<script type="text/javascript" language="JavaScript" charset="UTF-8">
<!--
...javaScript程式...
// -->
</script>
b. 呼叫獨立JavaScript檔案：在html中寫 <script type="text/javascript" src="test1.js"> </script>
<script> 不能用空標誌。 JS指令碼檔案中不需要指令碼開始和結束宣告，直接寫 function

1. 在HTML中大小寫是不敏感的，但標準的JavaScript是區分大小寫的

2. 分號表示語句結束。有換行，分號允許不加(建議加上，以免錯誤和歧義)
程式忽略縮排：提倡加上空格或TAB增強程式可讀性

3. 識別符號：成份是 不以數字開頭的字母、數字 和下劃線(_)、美元符($)
ECMA v3標準保留的JavaScript的關鍵字：
break case catch continue default delete do else false finally
for function if in instanceof new null return switch this
throw true try typeof var void while with

4. 變數的宣告： var x,y; (變數沒型別；未宣告的變數也可以用，且是全域性的；函式體內宣告的變數則是區域性的)
x=1; y="hello world!"; (變數的型別由所賦的值決定)

5. 函式： function 函式名 (引數){ 函式體; return 返回值;}
引數沒型別或順序，且可變長；可以使用變數、常量或表示式作為函式呼叫的引數
宣告函式時，引數可不明寫，呼叫時用 arguments[number] 接收。引數是值傳遞的。
函式由關鍵字 function 定義； 函式名的定義規則與識別符號一致，大小寫是敏感的
返回任意型別(不需寫返回型別)； 返回值必須使用return
//引數數量是可變的,若要限定引數數量,如下做法: (指定引數數量為0)
if ( arguments.length !== 0 ) throw Error.parameterCount();
caller: 呼叫此函式的函式。沒有被呼叫則此變數為 null
arguments: 此函式的引數列表。
arguments.caller: 呼叫此函式的引數列表,沒有被呼叫則為 undefined
arguments.callee: 此函式本身的一個引用。在匿名函式裡會需要用到。

6. 資料型別：
基本型別: Number：數字、 String：字串、 Boolean：布林
特殊型別: Null：空、 Undefined：未定義
組合型別: Array：陣列、 Object：物件

7. Number 數值型別：所有數字都採用64位浮點格式儲存，相當於Java和C語言中的double格式
能表示的最大值是 ±1.7976931348623157 x 10^308；能表示的最小值是 ±5 x 10^ -324
10進位制的整數的精確表達的範圍是 -9007199254740992 (-2^53) 到 9007199254740992 (2^53)
16進位制資料前面加上0x，八進位制前面加0
保留多少位小數： var a = 111.115555; var b = a.toFixed(2); alert(b + ' : ' + typeof b); // 111.12 : string

8. String 型別：字串常量首尾由單引號或雙引號括起
沒有字元，只有字串(所有字元都按字串處理)
常用轉義符： \n換行 \'單引號 \"雙引號 \\右斜杆 (字串中部分特殊字元必須加上右劃線\)
漢字常使用特殊字元寫，如： \u4f60 -->"你" \u597d -->"好" (可避免亂碼)

9. Boolean 型別：僅有兩個值：true和false，實際運算中true=1,false=0
也可以看作on/off、yes/no、1/0對應true/false；主要用於JavaScript的控制語句

10.null, undefine 型別：
null 在程式中代表變數沒有值；或者不是一個物件
undefined 代表變數的值尚未指定；或者物件屬性根本不存在
有趣的比較：
null 與空字串: 不相等, null 代表什麼也沒有，空字串則代表一個為空的字串
null 與 false : 不相等, 但是 !null 等於 true
null 與 0 : 不相等，(但是在C++等其它語言中是相等的)
null 與 undefined : 相等，但是 null 與 undefined 並不相同

11.資料型別轉換：JavaScript屬於鬆散型別的程式語言
變數在宣告的時候並不需要指定資料型別；變數只有在賦值的時候才會確定資料型別
表示式中包含不同型別資料則在計算過程中會強制進行類別轉換(優先順序：布林-->數字-->字元)
數字 + 字串：數字轉換為字串
數字 + 布林值：true轉換為1，false轉換為0
字串 + 布林值：布林值轉換為字串true或false
函式 parseInt: 強制轉換成整數(如果包含字串，則轉換到字串為止，後面不再理) //如 parseInt("13a2")=13
函式 parseFloat: 強制轉換成浮點數
函式 eval: 將字串強制轉換為表示式並返回結果，亦可將位元組或變數轉成數值。
函式 typeof: 查詢資料當前型別(string / number / boolean / object ) ，未定義則返回“undefined”

12.運算子：(同java)
算術運算子: 加/字元連線(+)、 減/負號(-)、 乘(*) 、除(/)、 餘數(% )； 遞增(++)、 遞減(--)
邏輯運算子: 等於( == )、 不等於( != ) 、 大於( > ) 、 小於( < ) ； 大於等於(>=) 、小於等於(<=)
與(&&) 、或(||) 、非(!) ； 恆等(===)、不恆等(!==)
位運算子: 左移(<<) 、有符號右移(>>)；無符號右移(>>>)
位與(&) 、位或(|)、異或(^) 、NOT (~)
賦值運算子: 賦值(=) 、複合賦值(+= -= *= /= %= &= )
(先執行完右邊的，再跟左邊的進行賦值運算；如 var i=10;i-=5-3;結果8)

13.選擇控制語句(同java)
if(...){...} else{...} if 語句允許不使用else子句；允許進行巢狀
switch(表示式){case 值1:語句1;break; case 值2:語句2;break; default:語句3;}

14.迴圈控制語句(類似java)
for (初始化;條件;增量){ 語句1; ... }
for-each遍歷: for(var key in objs){var element=objs[key];...} // 注意: in 前面的是 key,而不是下標或者集合裡面的元素,獲取集合裡的元素要使用 集合[key]
while (條件){ 語句1; ... }
do{語句1; ...}while(條件);
break, continue 跳出迴圈；還可配合標籤使用

15.物件：JavaScript是一種基於物件語言，物件是JavaScript中最重要的元素
物件由屬性和方法封裝而成
javaScript包含四種物件:
內建物件 Date
自定義物件 Cart
瀏覽器物件 window
ActiveX物件 ActionXObject

16. 異常處理：
try{ ... } catch( e ) { ... } finally { ... }
try{ throw new Error("Err0"); } catch( e ) { alert(e.description); } finally { ... }
try{ throw "Err1"; } catch( e ) { if(e == "Err1") alert("錯誤！"); }
try{ ... } catch( e ) { alert(e.message || e.description); } // 查看出錯提示

17.選取頁面的物件:
var obj = document.forms["FormName"].elements["elementName"];
var obj = document.forms[x].elements[y]; //x和y 是int型別，表示第幾個表單，第幾個元素
var obj = document.FormName.elementName;
var obj = document.all["elementName"];
var obj = document.all["elementID"];
var obj = document.getElementById("elementID");
var obj = document.getElementsByName("elementName"); //返回陣列
var obj = document.getElementsByTagName("TagName"); //返回陣列

18. typeof 檢視型別:
undefined, null, boolean, number, string, object, function
也就是 typeof 返回的值只能是上面的其中一個(字串型別)。
注意:以上單詞都是小寫，不要與內建物件 Number, String, Object, Function 等混淆。
null: typeof(null) 返回 "object", 但null並非object, 具有 null 值的變數也並非object。未定義的返回"undefined"
number: typeof(NaN) 和 typeof(Infinity) 都返回 number; NaN參與任何數值的計算結果都是NaN,且 NaN != NaN, Infinity / Infinity = NaN

19.instanceof 判斷型別:
instanceof 返回一個 boolean 值, 指出物件是否是特定類的一個例項, 實際上就是檢測例項是否有繼承某類的原型鏈。
對於 Array, null 等特殊物件 typeof 一律返回 object，這正是 typeof 的侷限性。
instanceof 用於判斷一個變數是否某個物件的例項,或者子類,如: var a=new Array();alert(a instanceof Array);會返回 true, 而 alert(a instanceof Object)也會返回 true
再如: function test(){};var a=new test();alert(a instanceof test)返回 true, alert(test instanceof Function)返回 true, 但 alert(a instanceof Function)返回 false(不明白什麼原因)
注意: function 的 arguments, 使用(arguments instanceof Array)返回 false,儘管看起來很像。
另外: (window instanceof Object)返回 false, 這裡的 instanceof 測試的 Object 是指js中的物件,不是dom模型物件。而 typeof(window) 會得 "object"

20.in 用法:
通常使用在 for 迴圈中,作 foreach 用,像 for(var i in obj)...
也可以用在類中,判斷類裡面是否有此 key。但注意不能有效用在陣列中。
如: var ar = {a:false, b:2}; alert('a' in ar)返回 true;因為 ar['a'] 存在。
在陣列中使用時,如: var arr=[4,5,6]; alert(2 in arr)會返回 true,因為 arr[2] 存在。而 alert(5 in arr)會返回 false,arr[5] 不存在。
if (key in obj) 相當於 if(!!obj[key])。
陣列中也可以使用 for in,如: var array = ['a', 'b', 'c', 'd'];for(var item in array){alert(array[item]);}
值得注意的是,如果對類進行 .prototype.函式 來擴充套件, for in 時會受到影響,把擴充套件的內容也迴圈出來。
所以不贊成對 Object 類進行擴充套件,也不贊成陣列使用 for in(因為陣列有可能被擴充套件了)

21.閉包(closure)
是一個擁有許多變數和綁定了這些變數的環境的表示式(通常是一個函式)，因而這些變數也是該表示式的一部分。
1) 變數的作用域
函式內部可以直接讀取全域性變數。(函式內部宣告變數的時候，一定要使用var命令。如果不用的話，你實際上聲明瞭一個全域性變數！)
在函式外部無法讀取函式內的區域性變數。
鏈式作用域(chain scope):子物件會一級一級地向上尋找所有父物件的變數。所以，父物件的所有變數，對子物件都是可見的，反之則不成立。
2) 閉包就是能夠讀取其他函式內部變數的函式。
由於在Javascript語言中，只有函式內部的子函式才能讀取區域性變數，因此可以把閉包簡單理解成"定義在一個函式內部的函式"。
所以，在本質上，閉包就是將函式內部和函式外部連線起來的一座橋樑。
3) 閉包的最大用處有兩個，一個是可以讀取函式內部的變數，另一個就是避免外部修改這些變數的值。
4) 注意:
閉包使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，不能濫用，否則影響效能，可能導致記憶體洩露。解決方法是，在退出函式之前，將不使用的區域性變數全部刪除。
閉包會在父函式外部，改變父函式內部變數的值。所以，如果你把父函式當作物件(object)使用，把閉包當作它的公用方法(Public Method)，把內部變數當作它的私有屬性(private value)，這時一定要小心，不要隨便改變父函式內部變數的值。

22.比較運算
1)“==” 與 “===” 的區別
“==” 雙等號, 用於比較時會忽略型別, 字串可以與數字相等, null 與 undefined 相等
“===” 三等號, 用於比較時嚴格區分型別,型別不相同的不會認為相等
同理還有不等於( “!=” 與 “!==” ),比較規則與上面的一樣

示例:
alert( '22' == 22 ); // true
alert( '22' === 22 ); // false
alert( null == undefined ); // true
alert( null === undefined ); // false
alert( 0 == null ); // false, 注: null, undefined 這兩者與其它的比較都為false
alert( 1 == true ); // true
alert( 1 === true ); // false
alert( 0 == '' ); // true
alert( 0 === '' ); // false
alert( ' \t\r\n ' == 0 ); // true, 注: 空格、跳格、換行, 都會轉成 0 來處理
alert( [10] == 10 ); // true,注: 物件與基本型別比較時，會先把物件轉成基本型別。
alert( [10] == '10' ); // true
alert( /\d/ > 0 || /\d/ <= 0 ); // false, 無法轉換正則為數字
alert( {} > 0 || {} <= 0 ); // false, 無法轉換Object為數字
alert( NaN == NaN ); // false, NaN 與所有值都不相等，包括它自己。
alert( NaN > 0 || NaN <= 0 ); // false, NaN的比較都為false
alert( NaN > NaN || NaN <= NaN ); // false

2) 比較法則(僅忽略型別的比較,不是嚴格比較,比較運算子有: >, >=, <, <=, ==, !=):
對於基本型別 Boolean, Number, String 三者之間做比較時，總是向 Number進行型別轉換，然後再比較(String 型別的如果沒法轉成數字,則轉成 NaN)；
如果有Object，那麼將Object轉化成這三者，再進行比較(可以轉成數字的，優先轉成數字,像Date就轉成數字)；
對於 null 和 undefined, 只有兩個都是它們時才相同，其他都為false。
比較物件、陣列和函式時，進行引用比較，只有引用的是相同地址才認為相同，否則即使擁有相同的屬性和函式都認為不相同。
如果不能轉成數值，或者是NaN，則比較結果為false

三、 JS的內建物件
11種內建物件：Array, Boolean, Date, Math, Number , String
Error, Function, Global , Object, RegExp
在JavaScript中除了null和undefined以外其它的資料型別都被定義成了物件
可以用建立物件的方法定義變數； String、Math、Array、Date、RegExp是JavaScript中常用的物件
內建物件的分類：
資料物件: Number資料物件； String字串物件； Boolean布林值物件
組合物件: Array陣列物件； Math數學物件； Date日期物件
高階物件: Object自定義物件；Error錯誤物件；Function函式物件； RegExp正則表示式物件；Global全域性物件
自動建立物件:呼叫字串的物件屬性或方法時自動建立物件，用完就丟棄。 如： var str1="hello world";
手工建立物件:採用new建立字串物件str1，全域性有效。 如：var str1= new String("hello word");

1. String 字串物件：
格式編排:anchor()錨、blink()閃爍、fixed()固定、bold()粗體、italics()斜體、strike()刪除線
big()字變大、small()字變小、sub()下標、sup()上標；
fontcolor(color)字型顏色、fontsize(size)字型大小、link(url)超連結
大小寫轉換: toLowerCase()返回小寫字串、toUpperCase()返回大寫字串
獲取指定字元:charAt(index)返回指定位置字元、charCodeAt(index)返回指定位置字元Unicode編碼
用法：str1.bold();//字型變粗；相當於“<b>str1</b>“ str1.anchor(); //把str1標識為錨
子字串處理:
擷取:str1.substr(start,length); //返回從索引位置start開始長為length的子字串
str1.substring(start,end); //返回start開始end結束的子字串,不包括最後的一個
str1.slice(start,end); //同substring，但允許使用負數表示從後計算位置,不包括最後的一個
替換:str1.replace(findstr,tostr); //返回替換finstr為tostr之後的字串
分割:str1.split(bystr); //返回由bystr分割成的字串陣列(通常bystr是連線符號，如逗號或橫杆)
連線:str1.concat(string2); //返回 str1 與 string2 連線後的字串
查詢字串: indexOf(findstr,index)返回正向的索引位置、lastIndexOf(findstr)返回反向的索引位置
match(regexp)返回匹配的字串、search(regexp)返回找到字串的首字元索引
用法：
str1.indexOf(findstr,index);//查詢字串findstr;從index位置開始的索引，省略index則從0開始找;類似下一句
str1.lastIndexOf(findstr); //從後面找起;返回findstr在str1中出現的首字元位置下標，沒有找到返回-1
str1.match(regexp); //regexp代表正則表示式或字串;返回匹配字串的陣列，如果沒有匹配則返回null
str1.search(regexp); //返回匹配字串的首字元位置下標;作用同indexOf方法,但可寫正則表示式
str1.length; //獲取字串長度；漢字、字母長度均為1；返回大於或等於0的整數
2. Array 陣列物件：
1) 建立陣列：
var a = new Array(); a[0] = "元素1"; a[1] = "元素2";
var a = new Array(){"元素1", "元素2"};
var a = new Array("元素1","元素2"); //一維陣列，效果同上
var a = new Array(); a[0] = new Array(); //二維陣列
簡略的陣列建立方法：
var a = ['元素1', '元素2']; // 效果等同於: var a = new Array("元素1","元素2");
2) 刪除陣列： delete 陣列名;
3) 陣列操作：
arr.length; //獲取陣列元素的個數；返回大於或等於0的整數
連線陣列： (原陣列不變)
arr.join(bystr); //把陣列的各元素由bystr連線起來作為字串；與字串的split功能剛好相反
arr.toString(); //返回由逗號(,)連線陣列元素組成的字串
document.write(v.toString());document.write(v); //這兩句效果一樣
arr2 = arr.concat(元素, ...); //把元素新增到陣列尾端後，返回另一陣列；在引數裡填入另一陣列，返回合併陣列
陣列排序： (返回排序後的陣列；改變原陣列)
arr.reverse(); //按原順序倒著排序
arr.sort(); //按字典順序排序
獲取子陣列： (返回被刪/被擷取的元素陣列)
arr.slice(start,end); //從start下標開始，擷取到end；返回被擷取的元素陣列；不改變原陣列
//start和end可用負數表倒數(-1代表最後一個元素)；end<start時不擷取；忽略end，擷取start後的所有元素
arr.splice(start,n,value, ...); //從start下標開始刪除n個，再插入value(可理解為替換)；改變原陣列
//start為負數時表倒數；n<1表不刪除；可忽略value(不插入)；可忽略n，表刪除後面所有；返回被刪元素陣列
4) 棧：(陣列的基礎； 改變原陣列)
arr.pop(); //刪最後的一個元素；返回刪除的元素
arr.push(元素, ...); //新增元素到最後位置；返回陣列長度; 等價於: arr[length] = newValue;
arr.unshift(元素, ...); //新增元素到最前位置(多個引數，則按引數順序同時插入)；返回陣列長度
arr.shift(); //刪最前的一個元素；返回被刪除的元素
5) toString 和 valueOf
把每一項都呼叫 toString 方法，然後用半形逗號(,)連線每一項。
如: var arr = [1,2,3,4,5]; alert(arr); //output:1,2,3,4,5
toLocaleString 方法在這裡不做詳細說明了，他的效果與 toString 方法類似，只是每項呼叫 toLocateString 方法。
4. Math 數學物件：
都是數學常數：(可直接用)
Math.E (自然數) Math.LN2 (ln2) Math.LN10 (ln10) Math.LOG2E (log 2e)
Math.LOG10E (log e) Math.PI (圓周率) Math.SQRT1_2 (根號1/2) Math.SQRT2 (根號2)
三角函式：
Math.sin(x) 計算正弦值； (x在0~2π之間，返回值-1~1)
Math.cos(x) 計算餘弦值； (x在0~2π之間，返回值-1~1)
Math.tan(x) 計算正切值； (x在0~2π之間，返回正切值)
反三角函式：
Math.asin(x) 計算反正弦值；(x在 -1與1之間，返回0~2π)
Math.acos(x) 計算反餘弦值；(x在 -1與1之間，返回0~2π)
Math.atan(x) 計算反正切值；(x可以為任意值，返回 -π/2 ~π/2)
Math.atan2(y,x) 計算從X軸到一個點的角度；(y,x分別為點的縱座標和橫座標，返回-π ~π)
計算函式：
Math.sqrt(x) 計算平方根
Math.pow(x,y) 計算x^y
Math.exp(x) 計算e的指數 e^x
Math.log(x) 計算自然對數 (x為大於0的整數)
數值比較函式：
Math.abs(x) 計算絕對值
Math.max(x,y,...) 返回引數中最大的一個
Math.min(x,y,...) 返回引數中最小的一個
* Math.random() 返回0~1之間的一個隨機數 //若要整數時，如0~99的隨機數： n=parseInt(Math.random()*100);
Math.round(x) 返回舍入為最接近的整數(四捨五入，負數時五舍六入)
* Math.floor(x) 返回下舍入整數 (結果不大於x；正數時直接捨去小數，負數時 -1.1==-2 )
Math.ceil(x) 返回上舍入整數 (結果大於等於x)
5. Date 時間物件：
建立日期物件：
a.不指定引數時： var nowd1=new Date();document.write(nowd1.toLocaleString( ));
//顯示當前時間，如：2008年11月24日 星期一 19時23分21秒
//不用"toLocaleString()"則顯示： Mon Nov 24 2008 19:23:21 GMT+0800 (CST)
b.引數為日期字串： var nowd2=new Date("2008/3/20 11:12");alert(nowd2.toLocaleString());
//顯示： 2008年03月20日 星期六 11時12分00秒
var nowd3=new Date("08/03/20 11:12");alert(nowd3.toLocaleString( ));
//顯示： 1920年08月03日 星期六 11時12分00秒 //按 月、日、年 的順序
c.引數為毫秒數： var nowd3=new Date(5000); alert(nowd3.toLocaleString( ));
//顯示： 1970年01月01日 星期四 08時00分05秒 //顯示本國的時間
alert(nowd3.toUTCString()); //顯示西方的時間： Thu, 01 Jan 1970 00:00:05 GMT
d.引數為年月日小時分鐘秒毫秒： var nowd4=new Date(2008,10,24,11,12,0,300);
alert(nowd4.toLocaleString( )); //毫秒並不直接顯示；月份引數從0~11，所以這裡10對應11月份
//顯示： 2008年11月24日 星期一 11時12分00秒
獲取和設定日期、時間的方法：
getDate() setDate(day_of_month) 日期 (1~31)
getDay() 星期 (1~7; 沒set方法)
getMonth() setMonth (month) 月份 (0~11; 別忘加1)
getFullYear() setFullYear (year) 完整年份(-271820~275760)
getYear() setYear(year) 年 (範圍同上； 1900年計算為0)
getHours() setHours (hour) 小時 (0~23)
getMinutes() setMinutes (minute) 分鐘 (0~59)
getSeconds() setSeconds (second) 秒 (0~59)
getMilliseconds() setMillliseconds (ms) 毫秒(0-999)
getTime() setTime (allms) 累計毫秒數(從1970/1/1 00:00:00開始)
注意：set方法對任意整數有效，影響上一級的數；如setDate(-1)設為上個月30號。 但對小數沒效。
日期和時間的轉換：
getTimezoneOffset() 返回本地時間與GMT的時間差，以分鐘為單位(中國為-480；差8小時)
toUTCString() 返回國際標準時間字串(預設)
toLocalString() 返回本地格式時間字串
Date.parse(x) 返回累計毫秒數(從1970/1/1 00:00:00到x的本地時間，忽略秒以下的數字)
Date.UTC(x) 返回累計毫秒數(從1970/1/1 00:00:00到x的UTC時間) 不明UTC是什麼

四、 自定義物件
1. 基本語法：
使用 function 指令定義。其屬性用“this.屬性名”定義。
如： function ObjectName(yName,yAge) {
this.name = yName;
this.age = yAge;
}
呼叫時：
var myObject = new ObjectName("kk",80); // ObjectName 裡面的函式會被執行
document.write("name = " + myObject.name + "<br> age = " + myObject.age);

2. 使用簡略語句快速建立物件
1) 類
正常寫法：
var car = new Object();
car.color = "red";
car.wheels = 4;
car.hubcaps = "spinning";
簡略寫法：
var car = {
color: "red",
wheels:4,
hubcaps:"spinning"
}
物件 car 就此建立，不過需要特別注意，結束花括號前一定不要加 ";" 否則在 IE 會遇到很大麻煩。

2) 陣列
正常陣列是這樣寫的： var movies = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4');
更簡潔的寫法是： var movies = ['Transformers', 'Transformers2', 'Avatar', 'Indiana Jones 4'];

3)關聯陣列
這樣一個特別的東西。 你會發現很多程式碼是這樣定義物件的：
var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
//遍歷的時候
for ( var key in car ) { alert(key + " : " + car[key]); }

3.匿名函式
var myFun = function(args1, args2){ alert('haha'); }
變數 myFun 指向一個匿名函式,這相當於建立函式 function myFun(args1, args2){ alert('haha'); }
由於 javascript 沒有型別,所以變數可以指向任意型別,也可以指向一個函式,對它來說都只是一片記憶體空間而已
匿名函式一般用在只有一次使用的情況下,也是可以傳遞引數的
如: element.onclick = function(){ alert(0); }

4.JavaScript原生函式
//要找一組數字中的最大數,如下，可以用一個迴圈
var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){ if(numbers[i] > max){max = numbers[i];} }
alert(max);
//也可以用排序實現同樣的功能：
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
//而最簡潔的寫法是：
Math.max(12,123,3,2,433,4); // returns 433
//你甚至可以使用Math.max來檢測瀏覽器支援哪個屬性：
var scrollTop = Math.max( document.documentElement.scrollTop, document.body.scrollTop );

5.如果你想給一個元素增加class樣式，可能原始的寫法是這樣的：
function addclass(elm,newclass) {
var c = elm.className;
elm.className = (c === '') ? newclass : c+' '+newclass;
}
//而更優雅的寫法是：
function addclass(elm,newclass){
var classes = elm.className.split(' ');
classes.push(newclass);
elm.className = classes.join(' ');
}

6.物件的繼承，一般的做法是複製所有屬性，但還有種方法，就是: Function.apply
函式的 apply 方法能劫持另外一個物件的方法，繼承另外一個物件的屬性
Function.apply(obj,args) 方法接收兩個引數
obj：這個物件將代替Function類裡this物件
args：這個是陣列，它將作為引數傳給Function（args-->arguments）

示範如：
function Person(name,age){ // 定義一個類，人類
this.name=name; //名字
this.age=age; //年齡
this.sayhello=function(){alert("hello " + this.name);};
}
function Print(){ // 顯示類的屬性
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //學生類
Person.apply(this,arguments); // this 繼承 Person,具備了它的所有方法和屬性
Print.apply(this,arguments); // this 繼承 Print,具備了它的所有方法和屬性
this.grade=grade; //年級
this.school=school; //學校
}
var p1=new Person("jake",10);
p1.sayhello();
var s1=new Student("tom",13,6,"清華小學");
s1.show();
s1.sayhello();

JavaScript技術
一、 使用DHtml
DHTML
定義：使用JavaScript和CSS級聯樣式表操作HTML創造出各種動態視覺效果統稱為DHTML
DHTML = CSS + Html + JS
是一種瀏覽器端的動態網頁技術
DHTML物件模型(DOM)
將HTML標記、屬性和CSS樣式都物件化
可以動態存取HTML文件中的所有元素
可以使用屬性name或id來存取或標記物件
改變元素內容或樣式後瀏覽器中顯示效果即時更新
DHTML物件模型包括瀏覽器物件模型和Document物件模型

Window物件的常用屬性：
* document 物件，代表視窗中顯示的HTML文件
frames 視窗中框架物件的陣列
* history 物件，代表瀏覽過視窗的歷史記錄
* location 物件，代表視窗檔案地址，修改屬性可以調入新的網頁
* status (defaultStatus)視窗的狀態列資訊
closed 視窗是否關閉，關閉時該值為true
* name 視窗名稱，用於標識該視窗物件
opener 物件，是指開啟當前視窗的window物件，如果當前視窗被使用者開啟，則它的值為null
parent 物件，當前視窗是框架頁時指的是包含該框架頁的上一級框架視窗
top 物件，當前視窗是框架頁時指的是包含該框架頁的最外部的框架視窗
self 物件，指當前Window物件
window 物件，指當前Window物件，同self

Window物件的常用方法：
(使用這些方法時，通常不加window也沒區別；但在特定情況下必須加，如在內嵌頁面用open();)
* alert(sMsg); 彈出簡單對話方塊
confirm(sMsg); 選擇對話方塊
prompt(sMsg, sInit); 彈出輸入對話方塊
* close(); 關閉視窗
open(sURL, sName, sFeatures, bReplace); 開啟視窗
print(); 列印視窗中網頁的內容
focus(); 設定焦點並執行 onfocus 事件的程式碼。
blur(); 失去焦點並觸發 onblur 事件。
moveBy(iX, iY); 將視窗的位置移動指定 x 和 y 偏移值。
moveTo(iX, iY); 將視窗左上角的螢幕位置移動到指定的 x 和 y 位置。
resizeBy(iX, iY); 更改視窗的當前位置縮放指定的 x 和 y 偏移量。
resizeTo(iWidth, iHeight); 將視窗的大小更改為指定的寬度和高度值。
scrollBy(iX, iY); 將視窗滾動 x 和 y 偏移量。
scrollTo(iX, iY); 將視窗滾動到指定的 x 和 y 偏移量。
* setInterval(vCode,iMilliSeconds,sLanguage); 每經過指定毫秒值後執行一段程式碼。
clearInterval(iIntervalID); 取消 setInterval 方法的事件。
* setTimeout(vCode,iMilliSeconds,sLanguage); 經過指定毫秒值後執行一段程式碼。(一次性)
clearTimeout(iTimeoutID); 取消 setTimeout 方法設定的超時事件。

window主要功能：
1.視窗的開啟和關閉
window.open(url,name,config) 開啟新視窗；url:開啟的超連結，name:視窗的名稱，返回新視窗物件
config為視窗的配置引數：menubar 選單條、toolbar 工具條、location 位址列、directories 連結、
status 狀態列、scrollbars 滾動條、resizeable 可調整大小(以上引數值為yes或no，預設yes)；
width 視窗寬，以畫素為單位；height 視窗高，以畫素為單位(引數值為數值)
* window.close() 關閉視窗
2.對話方塊
簡單對話方塊：
alert(str) 提示框，顯示str字串的內容；按[確定]關閉對話方塊
confirm(str) 確認對話方塊，顯示str字串的內容；按[確定]按鈕返回true，[取消]返回false
prompt(str,value) 輸入對話方塊，顯示str的內容；按[確定]按鈕返回輸入值，[取消]關閉，返回null
視窗對話方塊：
showModalDialog(url,arguments,config) IE4或更高版本支援該方法
showModelessDialog(url,arguments,config) IE5或更高版本支援該方法
引數:url 開啟連結，arguments 傳入引數名，config 視窗配置引數
config 外觀配置引數：status、resizable、help 是否顯示標題欄中的問號按鈕、center 是否在桌面中間
dialogWidth 對話方塊寬、dialogHeight 對話方塊高、(上一行引數值為yes或no，這兩行引數為多少畫素)
dialogTop 對話方塊左上角的y座標、dialogLeft 對話方塊左上角的x座標
3.狀態列
window.status 狀態列中的字串資訊允許進行設定或讀取
4.定時器
tID1=setInterval(exp,time) 週期性執行exp程式碼；exp 程式碼塊名，time 週期(毫秒)，返回啟動的定時器
clearInterval(tID1) 停止週期性的定時器
tID2=setTimeout(exp,time) 一次性觸發執行程式碼exp；返回已經啟動的定時器
clearTimeout(tID2) 停止一次性觸發的定時器
5.內容滾動
window.scroll(x,y) 滾動視窗到指定位置；單位為畫素
window.scrollTo(x,y) 同scroll方法
window.scrollBy(ax,ay) 從當前位置開始，向右滾動ax畫素，向下滾動ay畫素
6.調整視窗大小和位置
window.moveTo(x,y) 移動視窗到指定位置；單位為畫素
window.moveBy(ax,ay) 向右移動ax畫素，向下移動ay畫素，引數為負數表示反方向移動
window.resizeTo(width,height) 調整視窗大小為指定大小
window.resizeBy(ax,ay) 放大或縮小視窗；引數為負數表示縮小
7.Screen物件 // 螢幕資訊(屬於window的子物件；常用於獲取螢幕的解析度和色彩)
screen.width 螢幕解析度的寬度，例如1024*768解析度下寬度為1024
screen.height 類似上面，螢幕解析度的高度
screen.availWidth 螢幕中可用的寬 //排除 Windows 工作列
screen.availHeight 螢幕中可用的高 //排除 Windows 工作列
screen.colorDepth 螢幕的色彩數
8.History物件 // 視窗的訪問歷史資訊(屬於window的子物件,常用於返回到已經訪問過的頁面)
history.length 歷史記錄數
history.foward() 向下一頁
history.back() 返回上一頁
history.go(0) 重新整理。括號裡填"-1"就是返回上一頁，填"1"就是下一頁；其它數字類推

9.Navigator物件 瀏覽器和OS(系統)的資訊 陣列
10.Location物件 瀏覽器位址列的資訊 如： location.href="http://www.google.com/";
location.assign(href); 前往新地址，在歷史記錄中，用 Back 和 Forward 按鈕可回到之前的地址
location.replace(href); 替代當前文檔案，在歷史記錄中也回不到之前的地址
location.reload(true); 類似重新整理，預設 false
// location 各屬性的用途
location.href 整個URl字串(在瀏覽器中就是完整的位址列),如: "http://www.test.com:8080/test/view.htm?id=209&dd=5#cmt1323"
location.protocol 返回scheme(通訊協議)，如: "http:", "https:", "ftp:", "maito:" 等等(後面帶有冒號的)
location.host 主機部分(域名+埠號)，埠號是80時不顯示，返回值如："www.test.com:8080", "www.test.com"
location.port 埠部分(字串型別)。如果採用預設的80埠(即使添加了:80)，那麼返回值並不是預設的80而是空字元。
location.pathname 路徑部分(就是檔案地址)，如: "/test/view.htm"
location.search 查詢(引數)部分。如: "?id=209&dd=5"
location.hash 錨點，如: "#cmt1323"
不包含引數的地址： location.protocol + '//' + location.host + location.pathname;

應用例子：視窗最大化
window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);
或者： moveTo(0,0); resizeTo(screen.width, screen.height);
//採用screen物件的解析度屬性和resizeTo方法來動態確定視窗最大長度和寬度

二、 Dom 元素
處理 XML 檔案的 DOM 元素屬性：
<element>.childNodes 返回目前元素所有子元素的陣列
<element>.children 返回目前元素所有子元素的陣列(這個在IE、火狐上也可以用)
<element>.firstChild 返回目前元素的第一個子元素
<element>.lastChild 返回目前元素的最後一個子元素
<element>.nodeValue 指定表示元素值的讀/寫屬性
<element>.parentNode 返回元素的父節點
<element>.previousSibling 返回緊鄰目前元素之前的元素
<element>.nextSibling 返回目前元素的後面的元素
<element>.tagName 返回目前元素的標籤名(大寫)

沿 XML 檔案來回移動的 DOM 元素方法：
document.getElementById(id) 取得有指定唯一ID屬性值檔案中的元素
document.getElementsByTagName(name) 返回目前元素中有指定標籤名的子元素的陣列
<element>.hasChildNodes() 返回布林值，表示元素是否有子元素
<element>.getAttribute(name) 返回元素的屬性值，屬性由name指定

動態建立內容時所用的 W3C DOM 屬性和方法：
document.createElement(tagName) 建立由tagName指定的元素。比如以"div"作為引數，則生成一個div元素。
document.createTextNode(text) 建立一個包含靜態文字的節點。
<element>.appendChild(childNode) 將指定節點增加到目前元素的子節點中。例如：select中增加option子節點
<element>.getAttribute(name) 取得元素中的name屬性的值
<element>.setAttribute(name,value) 設定元素中的name屬性的值
<element>.insertBefore(Node1,Node2) 將節點Node1作為目前元素的子節點插到Node2元素前面。
<element>.removeAttribute(name) 從元素中刪除屬性name
<element>.removeChild(childNode) 從元素中刪除子元素childNode
<element>.replaceChild(newN,oldN) 將節點oldN替換為節點newN
<element>.hasChildnodes() 返回布林值，表示元素是否有子元素

注意：文字實際上是父元素的一個子節點，所以可以使用firstChild屬性來存取元素的文位元組點。
有了文位元組點後，可以參考文位元組點的nodeValue屬性來得到文字。
讀取XML時，須考慮它的空格和換行符也作為子節點。

處理 HTML DOM 元素中3個常用的屬性: nodeName、 nodeValue 以及 nodeType
nodeName 屬性(只讀)含有某個節點的名稱:
元素節點的 nodeName 是標籤名稱(永遠是大寫的)
屬性節點的 nodeName 是屬性名稱
文字節點的 nodeName 永遠是 #text
文件節點的 nodeName 永遠是 #document

nodeValue / data
對於文字節點，nodeValue 屬性包含文字。可增刪改
對於屬性節點，nodeValue 屬性包含屬性值。
nodeValue 屬性對於文件節點和元素節點是不可用的。會返回 null
data同樣是文字的內容,這個屬性下同樣可以增刪改。對於文件節點和元素節點不可用,返回 undefine

nodeType 屬性返回節點的型別。節點型別是：
元素型別 節點型別
ELEMENT_NODE : 1 // 元素
ATTRIBUTE_NODE : 2 // 屬性
TEXT_NODE : 3 // 文字
CDATA_SECTION_NODE : 4
ENTITY_REFERENCE_NODE : 5
ENTITY_NODE : 6
PROCESSING_INSTRUCTION_NODE : 7
COMMENT_NODE : 8 // 註釋
DOCUMENT_NODE : 9 // 文件,即 document
DOCUMENT_TYPE_NODE : 10
DOCUMENT_FRAGMENT_NODE : 11
NOTATION_NODE : 12

注： 對於屬性節點，可使用 “attr.nodeName”和“attr.nodeValue”來檢視或者賦值, 也可以使用“attr.name”和“attr.value”。
只是, attr.nodeValue 會返回真實型別,如 bool,number,string,object 等； 而 attr.value 全是 string 型別(null 則返回"null")

判斷是否 dom 元素，一些特殊節點只有nodeName，沒有tagName，比如document的nodeName為“#document”，tagName為空值。

三、跨瀏覽器
1.瀏覽器判斷：
//如果是火狐等瀏覽器則為“true”
var isNav = (navigator.appName.indexOf("Netscape") != -1);
//如果是IE瀏覽器則為“true”
var isIE = (navigator.appName.indexOf("Microsoft") != -1); // navigator.appName == "Microsoft Internet Explorer"
var isIE = (navigator.appVersion.indexOf("MSIE") != -1);
//判斷IE6
var isIE6 = (navigator.userAgent && navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")!="-1");
//如果是Opera瀏覽器則為“true”
var isOpera = (navigator.userAgent.indexOf("Opera") != -1);
//瀏覽器執行的平臺，是 windows 則返回 true
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1);

2.event 事件
在 IE4+ 和 Firefox下的 event
function doEventThing(event)
{
//獲取不同瀏覽器的 event
event = event || window.event; // window.event for IE; 引數event for firefox
//獲取不同瀏覽器的鍵盤輸入記錄
var currentKey = event.keyCode || event.charCode; // keyCode 目前相容了
//獲取不同瀏覽器的事件源
var eventSource = event.target || event.srcElement; // srcElement for IE; target for firefox
var target = event.relatedTarget || event.toElement; // 將會去到的元素,像 onmouseout 會觸發
//遮蔽Form提交事件
//if ( event.returnValue ) event.returnValue = false; // for IE
//if ( event.preventDefault ) event.preventDefault(); // for firefox
( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);
//新增事件
if ( event.attachEvent ) {
event.attachEvent('onclick', func ); // for IE; 需要加上“on”,如 onmouseover
} else if ( event.addEventListener ) {
event.addEventListener('clcik', func, false); // for firefox; 不需要加上“on”,直接寫“click”
}
//改變事件; 但上面的繫結事件方法並不改變原有的onclick事件，而是新增事件
event.onclick = func;
}
//Firefox 下必須手動輸入引數,呼叫時如: <input type="button" onclick="doEventThing(event);"/>

3. firefox 的 click() 事件,由於 firefox 不支援 click() 事件,代替方式：
// 獲取需要觸發 onclick() 的元素
var element = document.getElementsByTagName('a')[0];
// For IE
if ( document.all ) {
element.click();
// FOR DOM2
} else if ( document.createEvent ) {
var ev = document.createEvent('MouseEvents'); //'MouseEvents' 改成 'HTMLEvents' 的話,firfox2不通過
ev.initEvent('click', false, true);
element.dispatchEvent(ev);
}

4. 跨瀏覽器技巧：
1) IE不能用setAttribute設定class屬性。
解決方法1: 同時使用 setAttribute("class","newClassName") 和 setAttribute("className","newClassName")
解決方法2: <element>.className = "newClassName"
2) IE中不能使用setAttribute設定style屬性。即 <element>.setAttribute("style","fontweight:bold;") 不相容。
解決方法：使用 <element>.style.cssText = "fontweight:bold;"
3) 使用appendChild將<tr>元素直接增加到<table>中，則在IE中這一行並不出現，但其它瀏覽器卻會出現。
解決方法：在<table>下增加<tbody>元素，再新增<tr>
4) IE不能直接新增按鈕處理事件。如：addButton.setAttribute("onclick","addEmployee('unid');");不適用。
解決方法：addButton.onclick = function() { addEmployee('unid'); };//用匿名函式呼叫addEmployee()函式。
此外,onmouseover,onmouseout 等事件也要使用此方法。
5) firefox 不支援 document.all
解決方法: 用 document.getElementsByTagName("*") 替代,可以得到得到所有元素的集合
6) 設定元素的id
同時使用 .id 和 setAttribute 來設定
var div = document.createElement('div');
div.id="btc";
div.setAttribute("id","btc");

5.Firefox註冊innerText寫法
if ( (navigator.appName.indexOf("Netscape") != -1) )
{
//註冊 Getter
HTMLElement.prototype.__defineGetter__("innerText", function(){
var anyString = "";
var childS = this.childNodes;
for ( var i=0; i < childS.length; i++ ) {
if ( childS[i].nodeType == 1 )
anyString += childS[i].tagName == "BR" ? '\n' : childS[i].innerText;
else if(childS[i].nodeType == 3 ) {
anyString += childS[i].nodeValue;
}
}
return anyString;
});

//註冊 Setter
HTMLElement.prototype.__defineSetter__("innerText",
function ( sText ) { this.textContent = sText; }
);
}
//在非IE瀏覽器中使用 textContent 代替 innerText

6.長度：FireFox長度必須加“px”，IE無所謂
解決方法：統一使用 obj.style.height = imgObj.height + "px";
7.父控制元件下的子控制元件：IE是“children”，FireFox是“childNodes”
8.XmlHttp
在IE中，XmlHttp.send(content)方法的content可以為空，而firefox則不能為空，應該用send(" ")，否則會出現411錯誤

9.event.x 與 event.y 問題
問題： 在IE中，event 物件有x,y屬性，FF中沒有
解決方法：
在FF中，與 event.x 等效的是 event.pageX ，但event.pageX IE中沒有
故採用 event.clientX 代替 event.x ，在IE中也有這個變數
event.clientX 與 event.pageX 有微妙的差別，就是滾動條
要完全一樣，可以這樣：
mX = event.x ? event.x : event.pageX;

10.禁止選取網頁內容
問題：FF需要用CSS禁止，IE用JS禁止
解決方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

11.各種瀏覽器的特徵及其userAgent。
IE
只有IE支援建立ActiveX控制元件，因此她有一個其他瀏覽器沒有的東西，就是 window.ActiveXObject 函式。
IE各個版本典型的userAgent如下(其中，版本號是MSIE之後的數字)：
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

Firefox
Firefox中的DOM元素都有一個getBoxObjectFor函式，用來獲取該DOM元素的位置和大小(IE對應的中是getBoundingClientRect函式)。這是Firefox獨有的，判斷它即可知道是當前瀏覽器是Firefox。
Firefox幾個版本的userAgent大致如下(其中，版本號是Firefox之後的數字)：
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12

Opera
Opera提供了專門的瀏覽器標誌，就是 window.opera 屬性。
Opera典型的userAgent如下(其中，版本號是Opera之後的數字)：
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0

Safari
Safari瀏覽器中有一個其他瀏覽器沒有的openDatabase函式，可做為判斷Safari的標誌。
Safari典型的userAgent如下(其版本號是Version之後的數字)：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Chrome
Chrome有一個 window.MessageEvent 函式，但Firefox也有。不過，好在Chrome並沒有Firefox的getBoxObjectFor函式，根據這個條件還是可以準確判斷出Chrome瀏覽器的。
目前，Chrome的userAgent是(其中，版本號在Chrome之後的數字)：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

下面是判斷瀏覽器的程式碼：
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/i)[1];
else if (document.getBoxObjectFor) // 火狐判斷出錯
Sys.firefox = ua.match(/firefox\/([\d.]+)/i)[1];
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/i)[1];
else if (window.MessageEvent)
Sys.chrome = ua.match(/chrome\/([\d.]+)/i)[1];
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/i)[1];

//以下進行測試
if(Sys.ie) alert('IE: '+Sys.ie);
if(Sys.firefox) alert('Firefox: '+Sys.firefox);
if(Sys.chrome) alert('Chrome: '+Sys.chrome);
if(Sys.opera) alert('Opera: '+Sys.opera);
if(Sys.safari) alert('Safari: '+Sys.safari);

四、 摘錄：
1. 省略物件名稱，用 with() 命令。
如: document.write(".....<br/>");
document.write(".....<br/>");
可省略寫為：
with (document) {
write(".....<br/>");
write(".....<br/>");
} //把相同的 document 省略掉。
省略物件名稱，變數。
如： document.myForm.myText.value;
可省略寫為： f = document.myForm; f.myText.value;

2.頁面除錯
javascript 加入如下語句，出錯時會提示
注意： chrome、opera 和 safari 等瀏覽器不支援 window.onerror 事件(w3c標準沒有此事件),需另外捕獲出錯資訊
<script type="text/javascript">
/**
* 這是出錯除錯程式碼
* 當頁面發生錯誤時，提示錯誤資訊
* @param msg 出錯資訊
* @param url 出錯檔案的地址
* @param sLine 發生錯誤的行
* @return true 讓出錯時不顯示出錯圖示
*/
window.onerror = function ( msg, url, sLine ) {
var hostUrl = window.location.href;
// 判斷網址,測試時可以提示出錯資訊;正式釋出時不提示
if ( hostUrl.indexOf("http://localhost") === 0 || hostUrl.indexOf("http://127.0.0.1") === 0 ||
hostUrl.indexOf("http://192.168.") === 0 || hostUrl.indexOf("file://") === 0 )
{
var errorMsg = "當前頁面的指令碼發生錯誤.\n\n";
errorMsg += "錯誤: " + msg + "\n";
errorMsg += "URL: " + url + "\n";
errorMsg += "行: " + sLine + "\n\n";
errorMsg += "點選“確定”消去此錯誤，“取消”保留此錯誤。\n\n";
return window.confirm( errorMsg );
}
// 返回true,會消去 IE下那個惱人的“網頁上有錯誤”的提示
return true;
};
</script>

3.把數值變成 奇 \ 偶數(利用位運算)
n = n | 1 ; //一定得到奇數。如果原本是偶數則加一。
n = (n >> 1) <<1; //一定得到偶數。如果原本是奇數則減一。
n = n ^ 1; //奇偶互換。對偶數加一，對奇數減一。

4.取出數值的整數部分(取整)。
// 以下第一種方法不受瀏覽器和版本的影響，後兩種受版本影響。
n = ( n > 0 ) ? Math.floor(n) : Math.ceil(n);
n = Number ( (String(n).split("."))[0]);
n = parseInt(n,10);
// 下面做法更簡便高效,用位運算來做(右移0位,或者兩次取反),且非數值型的值會轉成0
alert(5>>0); alert(~~5); // 值為 5
alert(5.55>>0); alert(~~5.55); // 值為 5
alert(-98.4>>0); alert(~~-98.4); // 值為 -98
alert('absd'>>0); alert(~~'absd'); // 值為 0
alert(null>>0); alert(~~null); // 值為 0
alert('34.5'>>0); alert(~~'34.5'); // 值為 34

5.取出數值的小數部分。
須先檢查小數點是否存在。但有時會發生運算誤差。
n = Math.abs(n); if(n>0) n = n - Math.floor(n); else n = 0;
n = parseInt(n,10) - parseFloat(n);
if((""+n).indexOf(".") > -1) n = Number("0."+(String(n).split("."))[1]); else n = 0;

6.在任意位置插入一行js(單行程式)：
<script type="text/javascript">alert("中斷一下");</script>
<input type="button" onclick="javascript:formName.DataName.value='';formName.DataName.focus();" />

7.設定焦點：
//document.all["DateID"].onfocus;
document.all["DateID"].focus();
formName.DataName.focus();

8.預設引數：
function show() {
alert( arguments[0] );
}
這個函式會alert出第一個引數，如呼叫時： show("haha")，則alert("haha");

9.禁止 confirm 與 alert
window.confirm = function(str){return true;};
window.alert = function(str){};

10.獲取下拉選單的內容
<select name="seleName" >
<option value="value1">Text</option>
</select>
獲取選中的下拉選單的內容：
var seleElement = document.formName.seleName;
var optionText = seleElement.options[seleElement.selectedIndex].text;

11.設定預設值:
edittype = edittype || "text"; //edittype預設為 text
上面一句: 如果 edittype 之前有值,則取之前的值; 之前沒有值,則取預設值

12.數值的擷取:
numObj.toFixed([fractionDigits])
//numObj:必選項。一個 Number 物件。
//fractionDigits:可選項。小數點後的數字位數。其值必須在 0 – 20 之間，包括 0 和 20。 預設為0
toFixed 方法返回一個以定點表示法表示的數字的字串形式。對數值進行四捨五入擷取到指定位數的小數
如: 55.3654.toFixed(2) //返回55.37

13.IE上的關閉視窗時不提示
window.opener = null; // 關閉IE6不提示
window.open("","_self"); // 關閉IE7不提示
//關閉視窗
window.close();

14.重新整理頁面的幾種方法：
history.go(0);
window.navigate(location);
document.URL = location.href;
document.execCommand('Refresh'); //火狐不能用
location.reload();
location = location;
location.href = location.href;
location.assign(location);
location.replace(location);

15.頁面跳轉：
location.href = "yourURL"
window.location = 'url'
window.location.href = "yourURL"
window.navigate("top.jsp");
self.location = 'top.htm' //令所在框架頁面跳轉，大框架不變
top.location = 'xx.jsp'; //在框架內令整個頁面跳轉

16.頁面跳轉/重新整理 的注意：
需要先執行其他程式碼，然後再頁面跳轉或者重新整理。因為頁面跳轉或者重新整理後不再執行下面的程式碼。
如：alert('請先登入'); window.location.href = 'index.jsp';

17.改變標題(即改變<title>標籤的內容)
document.title = "title_content";

18.if 判斷物件是否存在
一般可以用 if 判斷物件是否存在,但直接寫“ if(物件名){...} ”判斷時,如果物件不存在則瀏覽器會拋異常。
這裡建議用“ if(window['物件名']){...} ”的寫法來判斷
當確認物件已經存在時,用“物件名.變數名”跟“物件名['變數名']”沒什麼區別。
如： var c = new Object(); // 假如這是寫在另一個js檔案裡的變數,下面用的時候需要判斷這物件是否存在
if (c) {alert('c存在');} // 如果這物件確實存在，則沒有問題。但物件不存在時會拋異常
if (window['c']){alert('c存在');}; if (window.c){alert('c存在');} // 推薦用這兩種寫法之一,不管物件是否存在,都不會拋異常,且存在時可正常使用。

五、JavaScript 技巧
1.獲取表單的內容
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aa(){
//var value=document.all("td1").value; //.innerHTML
var value=document.getElementById("td1").value;//上句也可行
document.all("ta").value=value;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<input id="td1" name="haha" type="text" onkeydown="if(13==event.keyCode){aa();return false;}"/><br/>
<INPUT TYPE="button" NAME="" value="引用" onclick="aa()"><br/>
<TEXTAREA id="ta" ROWS="15" COLS="20"></TEXTAREA>
</BODY>
</HTML>

2. IE3.0 和 NN2.0(Netscape Navigator)上能同時運作的程式
為照顧不同的瀏覽器和版本，只好多作幾次判斷。看程式中的幾個 if 實現的是同一功能就明白。
<html>
<head>
<title>寫能同時在IE和NN上執行的程式</title>
<script language="JavaScript">
<!--
x = 0;
function moveLayer() {
x = x + 2;
if(document.all) {document.all["myLay"].style.left = x;} //IE4以上版本可用，IE4之前和NN上都沒有 all
if(document.layers) {document.layers["myLay"].left = x;} //僅NN4上執行，NN4外沒有layers物件
/* 下面這句僅NN6以後版本可用。
因為document.getElementById()在IE5.x上有，所以需 " !document.all " */
if(!document.all && document.getElementById) {document.getElementById("myLay").style.left = x;}
}
// -->
</script>
</head>
<body bgcolor = "white" onLoad="setInterval('moveLayer()',1000)">
<div id="myLay" style="position:absolute;left:0px"> <img src="btn1.gif"></div>
</body>
</html>

3. 讀取 Behavior 文件 (任意標籤都可觸發 onclick 事件) (IE5.0以上可用)
//在 html 檔案上寫：
<html>
<head>
<title>讀取 Behavior 檔案</title>
<style type="text/css">
<!--
div { behavior:url(a.htc); }
-->
</style>
<script language="JavaScript">
<!--
function testA() { alert("haha"); } //<a>標籤的 onclick事件
function check() { //獲取 id 和 class 名稱
alert("id = "+document.all["myObj"].id+"; className="+document.all["myObj"].className);
}
// -->
</script>
</head>
<body bgcolor = "white"><center>
<div>點選文字</div><br/><br/>
<a href="JavaScript:testA()">sample</a><br/><br/><br/>
<input id="myObj" class="mz" type=button value="test" onclick="check()" />
</center></body>
</html>

//在此 html 檔案的同一目錄下的 a.htc 檔案裡寫：
<script language="JavaScript">
<!--
attachEvent("onclick",msg);
function msg() { alert("oh!");}
// -->
</script>

4.定時器，每隔一段時間進行處理(IE3.0以上，NN2.0以上可用)
<html>
<head>
<title>定時器</title>
<script language="JavaScript">
<!--
var timerId;
var n = 0;
function timerUpdate(){
window.document.myForm.result.value = n++ ;
//這是個一次性觸發的方法，這裡以反覆呼叫來實現週期性觸發
timerId = setTimeout("timerUpdate()",100); //第一個引數是要執行的函式,也可以直接寫匿名函式而不用字串
}
function timerStart() {
//防止連續多次點選，導致計數器速度迭加
document.getElementById("StartCount").onclick = "";
setTimeout("timerUpdate()",1);
}
function timerEnd() {
clearTimeout(timerId);
//這兩句的效果一樣。
//clearInterval(timerId);
//還原 "StartTime"按鈕 的點選能力
document.getElementById("StartCount").onclick = timerStart;
}
// -->
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="result"/><br/><br/>
</form>
<input type="button" id="StartCount" value="StartTime" onclick="timerStart()"/>
<input type="button" value="EndTime" onclick="timerEnd()"/>
</body>
</html>

5.根據 javaScript 的開閉狀態來顯示網頁(適用IE3.0和NN2.0以上版本)
以 <meta> 配合 location.href 來實現。
下面的 <meta> 裡的content的5表示當javascript關閉時，5秒後跳轉到closeJavaScript.html 頁面。
location.href="openJavaScript.html"; 表示當javascript可用時，跳轉到 openJavaScript.html 頁面。
在 html 里加入"<noscript>您使用的瀏覽器不支援或者禁止了Javascript</noscript>"則在本頁面提示。

<meta http-equiv="refresh" content="5; url=closeJavaScript.html">
<script language="JavaScript">
<!--
location.href="openJavaScript.html";
// -->
</script>

7.淡入/淡出效果(背景色適用IE3.0和NN2.0以上版本，文字色適用IE4以上版本)
<body bgcolor="black" onLoad="newCount('bgColor'); fade('0123456789ABCDEF')">
<script language="JavaScript">
var count = 0 ;
var obj = null ;
function fade(str){
c = str.charAt(count++);
if (obj=='bgColor') {document.bgColor = "#"+c+c+c+c+c+c+c+c;} //改變背景顏色，顏色碼8位
if (obj=='word') {document.all["strId"].style.color = "#"+c+c+"0000";} //改變文字顏色，顏色碼6位
if(count < str.length) setTimeout("fade('"+str+"')",250);
}
function newCount(object){ count = 0 ; obj = object ; }
</script>
<input type="button" value="toWhite" onclick="newCount('bgColor'); fade('0123456789ABCDEF')"/>
<input type="button" value="toBlack" onclick="newCount('bgColor'); fade('fedcba9876543210')"/><br/><br/>
<span id="strId" onMouseover="newCount('word'); fade('fedcba9876543210')">點選淡入淡出的文字</span>
</body>

8.視窗的振動效果(適用IE4.0和NN4.0以上版本)
<script language="JavaScript">
//指定視窗的錯位。
x = new Array( 10, 3, -6, 8, -10, -7, 5, -3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
y = new Array(-12, 6, -3, 10, -9, -2, 8, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
count = 0;
function purupuruWin() {
if(x[count] != 0) moveBy(x[count], y[count]); //視窗的振動
count++;
if(count >= x.length )count = 0;
setTimeout("purupuruWin()",100);
}
</script>
<input type="button" name="" value="StartPuru" onclick="purupuruWin()">

9.檢查電子郵件地址是否正確(適用IE4.0和NN3.0以上版本)
<script language="JavaScript">
function checkMailAddr(dstText){
var data = dstText.match(/^\[email protected]\S+\.\S+$/); //檢查是否郵件的表示式
if(!data || !dstText ) alert('電子郵件地址不正確！'); else alert('電子郵件地址正確！');
}
</script>
<form>
電子郵件：<input type="text" name="address" />
<input type="button" value="check" onclick="checkMailAddr(this.form.address.value)"/>
</form>

10. cookie 的使用。顯示訪問次數。(適用IE3.0和NN2.0以上版本)
<script language="JavaScript">
if ( !navigator.cookieEnabled ) alert("can not use cookie");
//在 cookie 中儲存訪問次數。
function setCount(n){
var theDay = 30;
var setDay = new Date();
setDay.setTime(setDay.getTime()+(theDay*1000*60*60*24));
document.cookie = "count=" + n + ";expires=" + setDay.toGMTString();
}
function getCount() {
var theName = "count=";
var theCookie = document.cookie + ";" ;
var start = theCookie.indexOf(theName); //沒有cookie時返回“-1”
if (start != -1) { //這是對第2次以後的訪問的處理
var end = theCookie.indexOf(";",start);
var count = eval(unescape(theCookie.substring(start+theName.length,end)));
document.write("這是第 "+count+" 次訪問本頁面");
setCount(count+1);
} else { //這是對第1次訪問的處理
document.write("這是第1次訪問本頁面");
setCount(2);
}
}
getCount();
</script>

11.簡單的預防二次提交 (適用IE3.0和NN3.0以上版本)
<script language="JavaScript">
var flag = false;
function send() {
if (flag) { alert("提交完畢！"); return false; }
flag = true ; return true;
}
function send2(form) {
if ( !flag ){ form.submit(); }
}
</script>
<form name="myForm" method="post" action="send.html" enctype="text/plain" onSubmit="return send()">
<