Microsoft Word - Part_III_JavaScript.doc

Size: px

Start display at page:

Download "Microsoft Word - Part_III_JavaScript.doc"

闽怪桂
4 years ago
Views:

1 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 i Table of Contents JavaScript 基本概念... 1 植入 JavaScript... 1 JavaScript 的變數觀念... 2 JavaScript 的值... 2 JavaScript 的變數... 2 JavaScript 的直接量... 3 特殊字元... 4 Unicode 字元編碼... 4 運算式和運算元... 6 運算式...6 運算元...6 運算元的優先順序... 6 賦值運算元... 7 比較運算元... 7 算術運算元... 8 移位運算元... 8 移位邏輯運算元... 9 移位運算符號... 9 邏輯運算元... 9 字串運算元特殊運算元規則運算式建立一個規則運算式編寫規則運算式簡單模型特殊字元圓括號的使用用規則運算式工作圓括號在子串代換的作用通配搜索和忽略大小寫 JavaScript 語句條件語句 :if...else 和 switch if...else 語句 switch 語句迴圈語句 :for while do while label break 和 continue for 語句... 20

2 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 ii do...while 語句 while 語句 label 語句 break 語句 continue 語句物件操作語句 :for...in 和 with for...in 語句 with 語句注釋函數定義函數呼叫函數使用 arguments 陣列預定義函數 eval isfinite isnan parseint 和 parsefloat Number 和 String escape 和 unescape 物件物件和屬性建立新物件使用物件初始化程式使用構造函數索引物件屬性為物件類定義屬性定義方法使用物件引用刪除物件預定義的內部物件 Array Boolean Date Function Math Number RegExp... 32

3 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 iii String 物件模型定義一個類別子類別和繼承添加和刪除屬性總結在 HTML 中植入 JavaScript 指定語言及版本指定 JavaScript 程式碼檔在 HTML 屬性值中使用 JavaScript 運算式引號標記事件定義事件處理器事件物件驗證表單輸入 JavaScript 的使用物件物件層次 Document 屬性 JavaScript 映射及 HTML 佈局關鍵物件 window 和 frame 物件 document 物件 form 物件 location 物件 history 物件 navigator 物件物件陣列 write 方法窗口和框架打開和關閉視窗打開視窗關閉窗口使用框架更新窗口在窗口和框架中導航特別功能使用 JavaScript 的 URL 使用用戶端圖像映射... 44

4 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 iv 使用伺服器圖像映射使用狀態列使用 Cookies 關於 Plug-ins mimetypes 陣列 JavaScript 的安全性同源安全機制源檢查和 document.domain 簽名的 Script 語句 LiveConnect 概述什麼是 LiveConnect? Java 控制臺 JavaScript 至 Java 的通信處理 Java 陣列控制 Java Applets Java 至 JavaScript 通信用 JSObject 訪問 JavaScript 在 Java 中處理 JavaScript 的異常瀏覽 JavaScript 的物件和屬性瀏覽 JavaScript 方法... 52

5 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 1 JavaScript 基本概念 JavaScript 是一種描述性語言, 它可以被嵌入 HTML 的檔之中通過 JavaScript 可以做到回應用戶的需求事件 ( 如表單的輸入 ), 這樣當一位使用者輸入一項資訊時, 它不需要通過網路傳送到伺服器端進行處理再傳回來的過程, 而可以直接在用戶端進行事件的處理 JavaScript 和 Java 很相似, 但它們卻是完全不同的語言! Java 是由 Sun Microsystem 公司開發的一種物件導向的程式設計語言, 類似於 C++, 它需要多種編譯器和支援檔才能運行 ; 但與 C++ 不同的是,Java 可以獨立於任何操作平臺, 因此它就在當今 Internet 網路各種操作平臺的基礎上得以迅速發展但它是一種比 JavaScript 複雜得多的標準程式語言 JavaScript 則是相對容易瞭解的函數式語言,JavaScript 創作者可以不那麼注重編程技巧, 例如聲明所有的變數類和方法, 也不必關心諸如 public private 或 protected 之類的費解的東西 ; 更重要的是, 它只能存在於一個 HTML Script 中, 而且只有在裝入一個相容的瀏覽器時才能運行, 所以許多 Java 的特性在 JavaScript 中並不支持網路程式語言分為三類 : 核心版用戶端和伺服器端 JavaScript, 僅涉及到用戶端, 完全相容於 ECMA-262 標準 ( 歐洲電腦製造協會的 JavaScript 標準 ); 如需瞭解的更多資訊, 請參閱 Netscape 的有關 Netscape JavaScript 的介紹 ( 微軟也有一個 JavaScript 的變種, 稱之為 JScript) 目前在 Internet 上已有很多寫好的 JavaScript 程式碼供參考植入 JavaScript JavaScript 只能在 HTML Script 中才能得以執行 ; 那麼, 如何在 HTML 語言中植入一個 JavaScript 語句呢? 一個完整的語句應像下面一樣 : <script language="javascript">  </script> LANGUAGE 指定了一個 JavaScript 語言, 但現在也可以不用寫該屬性, 因為目前幾乎所有的瀏覽器都將其設為內定值一段 JavaScript 程式碼可以放置於 HTML 中的任意部位, 但大多數情況下習慣將其放於 <head>...</head> 區段中, 因為一些程式碼可能需要在頁面裝載起始就開始運行但不必拘泥于這項規定, 願意如何放置都可以, 甚至可以在 HTML 外部裝入一個 JavaScript 程式, 如下例 : <script language="javascript" src="url">... </script> 這裏,url 是一個外部的 JavaScript 程式, 在 Netscape 承認以尾碼名為.js 的

6 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 2 程式, 而 IE 對這個要求就比較寬鬆, 只要它符合 MIME 格式就行了這樣, 如果有很多的頁面需要該段程式, 只需編寫一個外部程式就可以在多個頁面中進行呼叫, 是不是很方便在上例中,  標記, 為那些不支援 JavaScript 的瀏覽器提供了一個忽略它的方法, 而 // 標記則是一段注釋的開始 JavaScript 的變數觀念 JavaScript 的值 JavaScript 承認以下幾種值 : 數值 : 例如 85 或等 ; 邏輯 ( 布林 ) 值 : 如 true 和 false; 字串 : 如您好 "; null: 空值, 它是 JavaScript 的保留值, 因為 JavaScript 的大小寫敏感性, 因此它不同與如 Null 或 NULL 等其他變數 ; undefined: 值的頂級屬性是未定義的, 它也是一個保留值 JavaScript 是一種動態資料類型語言, 當宣告一個變數時不必指定資料的類型, 當程式執行時它會自動將其轉換為所需要的類型當在一個運算式中將一個字串類型的值和數值型的值進行 + 運算時, JavaScript 會將數值轉換為字串, 如下 : x="the answer is"+23 // 將傳回 "The answer is 23" 而在含別的運算元的語句中, 卻不會發生這種事情, 如 : x="23"-2 // 將傳回 21 JavaScript 的變數同其他語言一樣,VBScript 和 JavaScript 的原理都是一樣的, 不同的是這兩種語言對變數的表達方式並不相同, 在 JavaScript 宣告一個變數可以用下面的方法或直接給它賦值 : var Top, Bottom, Left, Right ; x=23; 在 JavaScript 中, 變數名是大小寫敏感的, 但也不儘然, 有一些瀏覽器並不這麼認為, 不過對變數的命名應該養成一個好習慣, 以便於自己和他人識別, 另外需注意它必須以字母或下劃線開始變數的作用範圍 : 當在一個函數 (function) 之外定義一個變數, 叫作總體變數, 它可用於當前所有的文檔 ; 而在 function 內部定義的變數則叫局部變數, 它只作用於函數內通過指定視窗或框架的名字, 還可以在另一個視窗或框架中呼叫總體變數, 例如 : 在一個框架文檔中定義了名為 phonenumber 的總體變數, 可以像這樣 parent.phonenumber 在子框架中引用該變數

7 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 3 JavaScript 的直接量在 JavaScript 我們用直接量 (Literals) 來描述數值它們是一些固定值, 並不是變數, 分為以下幾種 : 陣列直接量 (Array) 布林直接量 (Boolean) 浮點數直接量 (Float) 整數 (Integer) 物件直接量 (Object) 字串直接量 (String) 陣列直接量 - 一個陣列直接量是零或更多運算式的列表, 它包含在一對方括弧內 ([ ]) 用陣列直接量來新建一個陣列時, 元素和長度即由所指定的值進行初始化下面一個例子有三個元素, 長度為 3: coffees = ["French Roast", "Columbian", "Kona"] 不必在陣列直接量指定所有的元素如果在一行中間置入兩個逗號, 它會自動為未指定的元素留出空間 : fish = ["Lion",, "Angel"] 該陣列包含兩個元素值和一個空元素, 但要注意的是, 如果把逗號放到陣列的最後, 那它將會被忽略掉布林直接量 -Boolean 類型有兩種 literal 值 :true 和 false 浮點數直接量 - 一些浮點陣列的例子應象下面一樣 : , -3.1E12,.1e12 和 2E-12 指數部分是在一個整數後跟一個 e 或 E, 它可以是一個有符號的數一個浮點陣列必須包含一個數位, 一個小數點或 e ( 或 E ) 整數 - 一個整數可以是十進位十六進位和八進位數一個十進位直接量由一串數字序列組成, 它的第一個數字不能為 0; 如果第一個數字為 0, 則表示它是一個八進位數 ; 若為 0x, 則表示它為一個十六進位數物件直接量 - 物件直接量是零或幾對封裝在大括弧內的關聯物件值和屬性的列表, 在語句的開始不應當使用物件直接量, 這將導致一個錯誤下面的例子中,car 物件的第一個元素定義了一個屬性,myCar; 第二個元素,getCar 屬性呼叫一個函數 (Cars("honda")) 第三個元素, 用了一個已存在的變數指定的屬性 (Sales) var Sales = "Toyota"; function CarTypes(name) { if(name == "Honda") else return name; return "Sorry, we don't sell " + name + ".";

8 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 4 car = {mycar: "Saturn", getcar: CarTypes("Honda"), special: Sales document.write(car.mycar); // Saturn document.write(car.getcar); // Honda document.write(car.special); // Toyota 在物件內可以使用索引 (index) 索引屬性或進行物件的嵌套如下例: car = {manycars: {a: "Saab", b: "Jeep", 7: "Mazda" document.write(car.manycars.b); // Jeep document.write(car[7]); // Mazda 字串直接量 - 字串直接量是零或若干封裝在雙括弧 (") 或單括弧 (') 內的字元如下 : "fish" 'fish' "5467" "a line" 在字串直接量可以呼叫任何字元物件 "(String object) - JavaScript 自動轉換字串直接量到一個臨時字元直接量特殊字元除了普通的字元外, 還可以在字元中加入一些特殊的字元, 下表提供了一些特殊字元及含義 : 字元含義 \b 空格 \f 換頁 \n 換行 \r 回車 \t Tab \' \" 雙引號省略符號或單引號 \\ 反斜線符號 (\) \XXX \xxx \uxxxx 三個八進位數 ( 從 0 到 377) 的 Latin-1 編碼字元, 如 \251 即是版權符號的八進制碼兩個十六進位數 ( 從 00 到 FF) 的 Latin-1 編碼字元, 如 \xa9 即是版權符號的十六進位碼四個十六進位數的 Unicode 字元, 如 \u00a9 即是版權符號的 Unicode 編碼 Unicode 字元編碼 Unicode 是一種重要的交互和顯示的通用字元編碼標準, 它覆蓋了美國歐洲中東非洲印度亞洲和太平洋的語言, 以及古文和專業符號 Unicode 允許交換

9 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 5 處理和顯示多語言文本以及公用的專業和數學符號它希望能夠解決多語言的計算, 如不同國家的字元標準, 但並不是所有的現代或古文都能夠獲得支持 Unicode 字元可以適用於所有已知的編碼 Unicode 是繼 ASCII( 美國國家交互資訊標準編碼 ) 字元碼後的一種新字元編碼, 它為每一個符號定義一個數位和名稱, 並指定字元和它的數值 ( 碼位 ), 以及該值的二進位位元表示法, 通過一個十六進位數位和首碼 (U) 定義一個 16 位的數值, 如 :U+0041 表示 A, 其唯一的名稱是 LATIN CAPITAL LETTER A 但請注意:JavaScript 1.3 之前的版本並不支援 Unicode 編碼 Unicode 與 ASCII 和 ISO 的相容性 -Unicode 相容於 ASCII 字元並被大多數程式所支援, 前 128 個 Unicode 碼同 ASCII 碼具有同樣的位元組值 ;Unicode 字元從 U+0020 到 U+007E 等同與 ASCII 碼的 0x20 到 0x7E, 不同於支持拉丁字母的 7 位 ASCII,Unicode 對每個字元進行 16 位元值的編碼設置, 它允許幾萬個字元, 例如 Unicode 2.0 版包含 38,885 個字元, 它也可以進行擴展, 如 UTF-16 允許用 16 位元字元組合為一百萬或更多的字元,UTF 將編碼轉換為真實的二進位位元 Unicode 完全相容於國際標準 ISO/IEC ; 1993, 它是 ISO 的一個子集, 並支持用兩個八進位數的 ISO UCS-2(Universal Character Set) JavaScript 對 Unicode 的支援意味著可以任意地在程式中使用本地的字元以及特殊的科學符號 Unicode 提供了一種標準的方法來編碼多語言文本, 並且因為它相容於 ASCII, 也可以隨意使用 ASCII 字元 Unicode 轉義序列 - 在字元直接量中可以使用 Unicode 轉義序列, 該轉義序列由六個 ASCII 字元組成 :\u 加上一個四個數值的十六進位數如 :\u00a9 表示版權符號 JavaScript 裏的每一個 Unicode 轉義序列由一個字元所對應解釋下表是經常使用的特殊字元和它們的 Unicode 值類別 Unicode 值名稱格式名稱空白 (whitespace ) \u0009 跳位字元 <tab> \u000b 垂直跳位字元 <vt> \u000c 換頁符號 <ff> \u0020 空格號 <sp> 行結束符號值 \u000a 換行符號 <lf> \u000d 回車符號 <cr> 其他 Unicode 轉義序列值 \u000b 後退字元 <bs> \u0009 水平跳位字元 <ht> \u0022 雙引號 " \u0027 單引號 ' \u005c 反斜線 / JavaScript 對 Unicode 轉義序列的用法不同於 Java 首先, 在 JavaScript 中轉義序列並沒有解釋為一個特殊的字元例如 : 在一個字串中的換行符號轉義序列在函數被解譯前並不會終止該字串, 如果在注釋中使用轉義序列 JavaScript 將會忽略

10 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 6 它在 Java 中, 如果一個轉義序列被用於一個單獨的注釋行, 它將被解譯為一個 Unicode 字元對於一個字串直接量,Java 編譯器將首先解譯轉義序列例如 : 如果在 Java 中使用一個換行符號 (\u000a), 它將會終止該字串, 在 Java 中將導致一個錯誤, 因為在字串直接量中不允許換行, 必須使用 \n 符號 ; 而在 JavaScript 中, 這兩者之間並沒有區別用 Unicode 顯示字元 - 在不同的語言中可以使用 Unicode 來顯示字元或專業符號, 但這需要一個用戶端能夠支援 Unicode, 並且用戶端還得支援 Unicode 字體以及操作平臺的支援例如 Windows 95 它只支援部分的 Unicode, 另外, 為了輸入非 ASCII 字元, 還得有支援所有 Unicode 字元的輸入設備, 一個標準的擴展鍵盤不能夠做到這一點, 但可以用 Unicode 轉義序列來輸入 Unicode 字元運算式和運算元 JavaScript 的運算式和運算元, 包括賦值比較算術運算移位元運算邏輯運算字串和特殊運算元運算式運算式是由直接量變數或運算元所組成, 並生成一個單一值 ; 可以這麼說, 如果一個語句傳回一個值, 那麼它就是一個運算式 ; 該值可能是一個數值字串或一個邏輯值運算式有兩種類型 : 一為給變數賦一個值, 一為僅是一個簡單值如, 運算式簡單賦值為 7,3.14 也是一個運算式 ; 複雜一點的運算式 x = 7 即是給變數 x 賦值為 7 JavaScript 的運算式有如下幾種類型 : 數學運算式 : 計算值為數字, 如 8.45 字串運算式 : 計算值為一個字串, 如 "computer" 邏輯運算式 : 計算值為 true 或 false 運算元 JavaScript 具有一元和二元兩種運算元, 二元運算元有兩個操作物件, 如 3*4; 單項運算元只有一個操作物件, 如 x++ 或 ++x 另外 JavaScript 還有三元運算元, 它具有三個操作物件賦值運算元比較運算元算術運算元移位運算元邏輯運算元字串運算元特殊運算元運算元的優先順序優先順序指的是複合運算進行計算時的先後順序, 對於所有的二元運算都是從左到

11 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 7 右進行計算, 當然也可以用括號 () 來忽略優先順序 : 運算元類型運算元逗號, 賦值 = += -= *= /= %= <<= >>= >>>= &= ^= = 條件?: 邏輯或邏輯和 && 移位或移位異或 ^ 移位與 & 等於 ==!= 比較 < <= > >= 移位 << >> >>> 加 / 減 + - 乘 / 除 * / % 非 / 增減量! ~ typeof void delete 呼叫 ( ) 新建 new 成員. [] 賦值運算元賦值運算元是將右邊的運算元賦予左邊的操作物件, 如 x=y 為將 y 賦予 x 賦值運算元還具有簡寫形式, 請看下表 : 運算元縮寫含義 x += y x -= y x *= y x /= y x %= y x <<= y x >>= y x >>>= y x &= y x ^= y x = y x = x + y x = x y x = x * y x = x / y x = x % y x = x << y x = x >> y x = x >>> y x = x & y x = x ^ y x = x y 比較運算元比較運算元比較它的操作物件並傳回一個邏輯值 (true 或 false) 操作物件即可以

12 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 8 是數位也可以是字串值字串的比較使用 Unicode 值按照字母順序進行, 如下表 : 運算元描述實例等號 (==) 如果操作物件相等傳回 true, 如果兩個操作物件不為同一類型,JavaScript 嘗試轉換它們為一個適當的類型 3 == var1 "3" == var1 3 == '3' 不等於 (!=) 同上面相反, 兩個操作物件不相等傳回 true var1!= 4 var2!= "3" 絕對相等 (===) 如果操作物件相等並且類型相等傳回 true 3 === var1 絕對不等 (!==) 同上面相反, 如果操作物件不相等並且 / 或不是同一類型傳回 true var1!== "3" 3!== '3' 大於 (>) 如果左邊的操作物件大於右邊操作物件傳回 true var2 > var1 大於或等於 (>=) 如果左邊的操作物件大於或等於右邊操作物件傳回 true var2 >= var1 var1 >= 3 小於 (<) 如果左邊的操作物件小於右邊操作物件傳回 true var1 < var2 小於或等於 (<=) 如果左邊的操作物件小於或等於右邊操作物件傳回 true var1 <= var2 var2 <= 5 算術運算元算術運算元將數位值 ( 直接量或變數 ) 作為操作物件並傳回一個單一數位值算術運算元有以下一些 : 運算元描述實例 %( 取模 ) 二進位運算元, 傳回整數除法的餘數 12 % 5 傳回 2. ++( 增量 ) 單項運算元, 操作物件加一 ; 如果是前置 ++x, 傳回增量後的值, 如是後置 x++, 傳回增量前的值 -- ( 減量 ) 同上面相反, 只是操作物件進行減量運算, 即減一如 x 是 3,++x 傳回 4, 而 x++ 則傳回 3 如 x 是 3,--x 傳回 2, 而 x-- 則傳回 3 - ( 取反 ) 單項運算元, 傳回運算元的反數如 x 是 3, 那麼 -x 傳回 -3 移位運算元移位運算元對運算元進行 32 位元整數的位元層 (0 和 1) 運算, 它在比較兩個值之前先將它們轉化為 32 位元整數, 請看下表 : 運算元用法描述移位與 a & b 當兩個運算元的每個對應位都為 1 時傳回 1 移位或 a b 當兩個運算元的對應位任一個為 1 時傳回 1 移位異或 a ^ b 當兩個運算元的對應位其中一個但不全為 1 時傳回 1

13 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 9 移位非 ~ a 將運算元移位反轉左移 a << b 將二進位數字 a 左移 b 位, 右邊補零帶符號位元右移 a >> b 將二進位數字 a 右移 b 位, 丟棄移動位首位 0 填充右移 a >>> b 將二進位數字 a 右移 b 位, 丟棄移動位, 並左邊補零移位邏輯運算元運算元將轉化為 32 位元整數並由 0 或 1 表示 ; 第一個運算元與第二個運算元之間按對應位進行操作 ; 運算元按對應位進行運算, 結果移位配對例如, 下面是一些移位運算的例子 : 15 & 9 結果為 9 (1111 & 1001 = 1001) 15 9 結果為 15 ( = 1111) 15 ^ 9 結果為 6 (1111 ^ 1001 = 0110) 移位運算符號它包括兩個運算物件 : 第一個是被移位的量, 第二個指定第一個物件被移動的位元的數目移位運算元將運算元轉換為 32 位元整數, 並傳回同左邊類型相同的結果, 請看下表 : 運算元描述實例 << ( 左移 ) >> ( 帶符號位元右移 ) >>> ( 零填充右移 ) 運算元按指定的數目移位元左移第一個運算元, 左移多餘的位被丟棄, 右邊補零運算元按指定的數目移位元左移第一個運算元, 多餘位被丟棄, 最左邊的位移到左邊運算元按指定的數目移位元左移第一個運算元, 多餘位被丟棄, 從左邊補入 0 9<<2 結果為 36, 因為 1001 左移 2 位將變為 , 十進位為 36 9>> 2 結果為 2, 因為 1001 右移 2 位變為 10, 十進位數字為 2 同樣的,-9>>2 結果為 -3, 因為符號位元被保留了 19>>>2 結果為 4, 因為右移 2 位為 100, 十進位數字為 4 邏輯運算元一般來說, 邏輯運算元傳回一個布林值 ; 然而,&& 和運算元還可以是傳回其中一個指定的運算元的值, 因此如果非布林值運用這些運算元, 那麼它也將傳回一個非布林值, 如下表 : 運算元用法描述 && 運算式 1 && 運算式 2 邏輯與, 如果它能轉換為 false, 傳回運算式 1, 否則傳回運算式 2; 如果兩個運算式都為真,&& 傳回 true, 否則傳回 false

14 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 10 運算式 1 運算式 2 邏輯或, 如果它能轉換為 true, 傳回運算式 1, 否則傳回運算式 2; 如果兩個運算式都為真, 傳回 true, 否則傳回 false!! 運算式邏輯非, 如果運算式能轉換為 true, 將傳回 false, 否則傳回 true 能夠轉換為 false 的運算式的包括那些結果值為 null 0 空字元" " 或 undefined 如下 : a1=true && true // t && t 傳回 true a2=true && false // t && f 傳回 false a3=false && true // f && t 傳回 false a4=false && (3 == 4) // f && f 傳回 false a5="cat" && "Dog" // t && t 傳回 Dog a6=false && "Cat" // f && t 傳回 false a7="cat" && false // t && f 傳回 false o1=true true o2=false true o3=true false o4=false (3 == 4) o5="cat" "Dog" o6=false "Cat" o7="cat" false // t t 傳回 true // f t 傳回 true // t f 傳回 true // f f 傳回 false // t t 傳回 Cat // f t 傳回 Cat // t f 傳回 Cat n1=!true n2=!false n3=!"cat" //!t 傳回 false //!f 傳回 true //!t 傳回 false 字串運算元除了比較運算元外, 用於字串值的還有連結運算元 (+) 將兩個字串值連結在一起例如 : 我的 "+ 電腦 " 就傳回我的電腦 " 此外還可以使用簡寫的方式(+=) 來進行表達特殊運算元條件運算元 - 條件運算元僅用於有三個運算元的 JavaScript 運算元其語法為 : 條件? 值 1 : 值 2 如果條件為真, 結果值為值 1, 否則為值 2 您可以在任何標準的運算元場合使用條件運算元, 例如 : status = (age >= 18)? "adult" : "minor"

15 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 11 如果 age 大於等於 18, 那麼該語句將值 "adult" 賦予變數 status, 否則將值 "minor" 賦予變數 status 逗號運算元 - 逗號運算元 (,) 簡單地給兩個操作物件賦值並傳回第二個操作物件的值它主要用於迴圈語句中, 允許通過迴圈將多個變數進行更新例如 : 如果有一個含 10 個元素的二維陣列, 下面的程式碼將用逗號運算元進行增量運算 : for (var i=0, j=9; i <= 9; i++, j--) document.writeln("a["+i+","+j+"]= " + a[i,j]) delete-delete 刪除一個物件物件屬性或陣列中指定下標的元素語法為 : delete objectname delete objectname.property delete objectname[index] delete property // 僅在語句中合法可以用 delete 刪除隱式定義的變數, 而不是通過 var 語句定義的變數如果 delete 成功, 它將屬性或元素的記憶體空間清空如果運算正確,delete 傳回真, 否則傳回假 x=42 var y= 43 myobj=new Number() myobj.h=4 // 建立屬性 h delete x // 傳回真 ( 因為隱式地定義將被刪除 ) delete y // 傳回假 ( 因為用 var 定義將不能刪除 ) delete Math.PI // 傳回假 ( 不能刪除預定義屬性 ) delete myobj.h // 傳回真 ( 用戶定義屬性可以刪除 ) delete myobj // 傳回真 ( 用戶定義物件可以刪除 ) 刪除陣列元素 - 當刪除一個陣列元素時, 陣列長度將不會改變例如, 如果刪除了 a[3],a[4] 仍然是 a[4] 而 a[3] 為無定義 (undefined) 當 delete 移除一個陣列元素, 那麼元素將在陣列中不存在如果您希望一個陣列元素依然存在但為無定義值, 那麼可以用 undefined 關鍵字來代替 delete new- 可以用 new 來新建一個用戶定義物件類或預定義的物件類 ( 陣列布林型日期函數圖像數位物件選項 RegExp 或字串 ) 中的一個, 如下所示 : objectname = new objecttype ( 參數 1 [, 參數 2]...[, 參數 N] ) this- 可以用 this 關鍵字來引用當前物件, 通常 this 在方法中引用一個呼叫, 其用法如下 : this[.propertyname] 例一 : 假設一個函數呼叫 validate 確認一個物件值屬性 : function validate(obj, lowval, hival) {

16 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 12 if ((obj.value < lowval) (obj.value > hival)) alert("invalid Value!") 可以每次在表單元素的 onchange 事件處理器中呼叫 validate, 用 this 將它傳遞給表單元素如下 : <b>enter a number between 18 and 99: </b> <input type = "text" name = "age" size = 3 onchange="validate(this, 18, 99)"> 例二 : 當將表單屬性聯合時,this 可以引用當前物件的父表單在下例中, 表單 myform 包含一個文本物件和一個按鈕當用戶按下按鈕時, 文本物件的值被設為表單名字按鈕的 onclick 事件處理器用 this.form 來引用父表單 "myform" <form name="myform"> form name:<input type="text" name="text1" value="beluga"> <input name="button1" type="button" value="show form name" onclick="this.form.text1.value=this.form.name"> </form> typeof-typeof 可以有下面兩種用法 : typeof 運算元 typeof ( 運算元 ) typeof 傳回一個字串指示非計算運算元的類型運算元可以是字串變數關鍵字或物件, 圓括號是可選的下為變數的傳回結果 : typeof myfun 為物件 typeof shape 為字串 typeof size 為數字 typeof today 為物件 typeof dontexist 為未定義對於關鍵字 true 和 null, 傳回結果如下 : typeof true 為布林值 typeof null 為物件對於數字和字串, 傳回結果如下 : typeof 62 為數字 typeof 'Hello world' 為字串對於屬性值, 傳回結果如下 : typeof document.lastmodified 為字串 typeof window.length 為數字 typeof Math.LN2 為數字

17 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 13 對於方法和函數, 傳回結果如下 : typeof blur 為函數 typeof eval 為函數 typeof parseint 為函數 typeof shape.split 為函數對於預定義物件, 傳回結果如下 : typeof Date 為函數 typeof Function 為函數 typeof Math 為函數 typeof Option 為函數 typeof String 為函數 void-void 運算元有以下兩種表達方式 : void ( 運算式 ) void 運算式 void 運算元指定一個運算式沒有傳回值, 運算式是一個 JavaScript 計算式, 運算式外的圓括號是可選項, 但用這種方式具有較好的可讀性可以用 void 指定一個運算式作為超鏈結, 該運算式並非進行重載以代替當前文檔下面的程式碼將建立一個超鏈結, 但當用戶點擊它時不會發生任何事情, void(0) 傳回 0, 但它對 JavaScript 沒有影響 : <A HREF="javascript : void(0)">click here to do nothing</a> 而下面的程式碼將建立一個超鏈結, 當用戶點擊它時提交一個表單 : <A HREF="javascript:void(document.form.submit())"> Click here to submit</a> 規則運算式規則運算式是在字串中進行字元代換的模型, 在 JavaScript 中, 規則運算式也是一個物件這些模型由 RegExp 的 exec 和 test 方法, 以及 String 的 match replace search 和 split 方法組合而成建立一個規則運算式可以以下兩種方法來建立一個規則運算式 : 用一個物件初始化程式, 如 :re = /ab+c/ 執行時, 物件初始化程式對規則運算式進行編譯, 當規則運算式將保留常量時, 用這種方法可以有較好的執行效率呼叫 RegExp 物件的構造函數, 如 :re = new RegExp("ab+c") 使用構造函數將對規則運算式進行即時編譯當規則運算式模型會改變, 或模型從另一個未知的資料來源 ( 如用戶輸入 ) 使用構造函數一旦有了一個定義的規則運算式, 如果它通過使用, 或如果這個源被改變, 可以用 compile 方法

18 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 14 來編譯一個新的規則運算式編寫規則運算式一個規則運算式模型由簡單字元組成 ( 如 /abc/) 或簡單和複雜字元的組合 ( 如 /ab*c/ 或 /Chapter (\d+)\.\d*/) 簡單模型簡單模型由希望得到一個直接代換字元所構成, 如 : 模型 /abc/ 代換僅僅當字元 'abc' 同時出現在一個字串中且按同一順序時特殊字元當搜索一個代換需要的要素不再是直接代換時, 如搜索一個或多個 b 或搜索空白 (whitespace), 那麼該模型就包含特殊字元如模型 /ab*c/ 代換任何字串包含一個單字元 'a' 後跟 0 個或多個 'b' (* 意味著可有 0 或多少次 ) 然後緊跟著 'c', 如字元 "cbbabbbbcdebc", 該模型代換子字串 "abbbbc" 下面是能用於規則運算式的特殊字元列表及描述 : 字元描述 \ 有以下兩種 : 字元通常按字面處理, 指示下一個為特殊字元不必完全按字面解釋 ; 如 : /b/ 代換字元 'b', 通過在字元 b 前放置反斜線, 即 /\b/, 字元就成為特殊並代換一個單詞邊界字串中各字元的分界, 如空白和換行符號指示下一個字元不是特殊字元並按字面解釋 ; 如 : * 是一個特殊字元意味著前 0 個或多字元將代換, 如 /a*/ 意味著代換 0 或更多的 a, 為了按字面代換 *, 需在其前加反斜線 ( 如 /a\*/ 代表 'a*') ^ 代換輸入或行的開始, 如 /^A/ 不代換 "an A" 中的字元 'A', 但代換 "An A" $ 代換輸入或行的結尾, 如 /t$/ 不代換 "eater" 中的字元 't', 但代換 "eat" * 代換前 0 個或多個字元, 如 /bo*/ 代換 "A ghost booooed" 中的 'boooo' 和 "A bird warbled" 的 'b', 但在 "A goat grunted" 中無代換 + 代換前 1 個或多個字元, 等價於 {1,, 如 /a+/ 代換 "candy" 中的字元 'a', 以及 "caaaaaaandy" 中的所有 a? 代換前 0 個或 1 個字元, 如 /e?le?/ 代換 "angel" 中的 'el', 以及 "angle" 中的 'le'. 代換任何單一字元除了換行符號, 如 /.n/ 在語句 "nay, an apple is on the tree" 中代換 'an' 和 'on', 但不代換 'nay' (x) x y 代換 'x' 並存儲該代換, 如 : 在語句 "foo bar." 中 /(foo)/ 代換並存儲 'foo', 該代換子串可以被陣列元素 [1],..., [n] 中呼叫, 或從預定義 RegExp 物件屬性 $1,..., $9 中呼叫代換 'x' 或 'y', 如 :/green red/ 代換語句 "green apple" 中的 'green', 以及

19 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 15 語句 "red apple" 中的 'red' {n n 是一個正整數, 精確代換前 n 個出現的字元, 如 :/a{2/ 並不代換 "candy" 中的字元 'a', 但它代換 "caandy" 中的兩個 a, 以及 "caaandy" 中的第一和第二個字元 a {n, n 是一個正整數, 代換至少前 n 個出現的字元, 如 :/a{2,/ 不代換 "candy" 的字元 'a', 但代換 "caandy" 和 "caaaaaaandy" 中所有的字元 'a' {n,m n 和 m 是一個正整數, 代換至少前 n 個但最多 m 個的字元, 如 :/a{1,3/ 在 "cndy" 中無代換, 而代換 "candy" 中的 'a' "caandy" 中的第一和第二個 'a', 以及 "caaaaaaandy" 中第一到第三個 'a'( 即 "aaa"), 雖然原始字串中有更多個字元 'a' [xyz] 一個字元集合, 代換任一內附的字元, 也可以用連接符號指定一個字元範圍, 如 :[abcd] 等同於 [a-d] 它可以代換 "brisket" 中的 'b' 和 "ache" 中的 'c' [^xyz] 一個負數或補數字元集合, 它代換沒有內附在方框號中的任何字元, 同樣也可以用連接符號指定一個字元範圍, 如 :[^abc] 等同於 [^a-c], 它可以代換 "brisket" 中的 'r', 但不代換其中的 'b' [\b] 代換一個退格 backspace( 不要同 \b 搞混淆 ) \b 代換一個單詞邊界 ( 字串中各字元的分界, 如空白和換行符號 ), 如 :/\bn\w/ 代換 "noonday" 中的 'no',/\wy\b/ 代換 "possibly yesterday" 中的 'ly' \B 代換一個非單詞邊界, 如 :/\w\bn/ 代換 "noonday" 中的 'on',/y\b\w/ 代換 "possibly yesterday" 中的 'ye' \cx 此處 X 為一個控制字元, 它代換字串的控制字元, 如 /\cm/ 代換字串中的 control-m \d 代換一個數字元, 等同於 [0-9], 如 :/\d/ 或 /[0-9]/ 均代換 "B2 is the suite number" 中的 '2' \D 代換任何非數字元, 等同於 [^0-9], 如 :/\D/ 或 /[^0-9]/ 代換 "B2 is the suite number" 中的 'B' \f 代換換頁符號 \n 代換換行符號 \r 代換回車符號 \s 代換一個單獨空白字元, 包括空格跳位字元換頁換行, 等同於 [ \f\n\r\t\v], 如 :/\s\w*/ 代換 "foo bar" 中的 ' bar' \S 同上面相反, 它代換除了空白符號外的單一字元, 等同於 [^ \f\n\r\t\v], 如 : /\S\w*/ 代換 "foo bar" 中的 'foo' \t 代換一個跳位字元 \v 代換一個垂直跳位字元 \w 代換任何包含下劃線的字母和數位字元, 等同於 [A-Za-z0-9_], 如 :/\w/ 代換 "apple" 中的 'a',"$5.28" 是的 '5' 和 "3D" 中的 '3' \W 代換任何非字母和數字元, 等同於 [^A-Za-z0-9_], 如 :/\W/ 或

20 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 16 /[^$A-Za-z0-9_]/ 代換 "50%" 中的 '%' \n n 是一個正整數, 傳回存儲的代換引用, 如 :/apple(,)\sorange\1/ 代換 "apple, orange, cherry, peach" 中的 'apple, orange,' 注意 : 如果左邊的括弧少於 \n 中指定的數字,\n 作為一個八進制轉義字元 ( 見下行 ) \ooctal \ooctal 是一個八進制轉義字元值,\xhex 是一個十六進位轉義字元值, 允許 \xhex 您植入一個 ASCII 碼到規則運算式圓括號的使用圓括號包圍規則運算式的任一部位, 以便代換子串的一部分可以進行存儲, 這樣該子串就可以被別的物件所呼叫用規則運算式工作規則運算式用 RegExp 的 test 和 exec 方法以及 String 的 match replace search 和 split 方法進行工作方法描述 exec test match 在字串中執行搜索一個代換的 RegExp 方法, 它傳回查找結果的陣列在字串中測試一個代換的 RegExp 方法, 傳回 true 或 false 在字串中執行搜索一個代換的 String 方法, 傳回一個資訊的陣列或錯配後傳回一個 null search 在字串中測試一個代換的 String 方法, 傳回代換的索引, 或錯換後傳回 -1 replace 在字串中執行搜索一個代換的 String 方法, 並用另一個替換的該代換的子串 split 一個 String 方法, 用規則運算式或一個固定字串分離為子串的陣列下例中用 exec 方法在一個字串中搜索一個代換 : <script language="javascript1.2"> myre=/d(b+)d/g; myarray = myre.exec("cdbbdbsbz"); </script> 如果不需要定義規則運算式的屬性, 可以用下面的方法來代替 : <script language="javascript1.2"> myarray = /d(b+)d/g.exec("cdbbdbsbz"); <script> 如果希望能重編譯規則運算式, 也可以用下面的方法替換 : <script language="javascript1.2"> myre= new RegExp ("d(b+)d", "g:); myarray = myre.exec("cdbbdbsbz"); <script> 上面的程式碼成功進行了代換, 並傳回陣列和更新了下表中的屬性 :

21 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 17 物件屬性或索引描述本例 myarray 代換的字串並存儲子串 ["dbbd", "bb"] index 從零開始的字串代換索引 1 input 原始字串 "cdbbdbsbz" [0] 最後代換字元 "dbbd" myre lastindex 開始下一個代換的索引 ( 該屬性僅在用 5 g 選項時有效, 請參見通用搜索章節 ) source 模型的文本 "d(b+)d" RegExp lastmatch 最後代換字元 "dbbd" leftcontext 代換前最首個子串 "c" rightcontext 代換後的首個子串 "bsbz" RegExp.leftContext 和 RegExp.rightContext 可以用另外的值計算, RegExp.leftContext 等同於 : myarray.input.substring(0, myarray.index) RegExp.rightContext 等同於 : myarray.input.substring(myarray.index + myarray[0].length) 正如第二個例子, 可以不用給變數賦值的物件初始化程式建立一個規則運算式, 但這樣將不能定義規則運算式的屬性, 如下 : <script language="javascript1.2"> myre=/d(b+)d/g; myarray = myre.exec("cdbbdbsbz"); document.writeln("the value of lastindex is" + myre.lastindex); </script> 該程式碼顯示 :lastindex 的值為 5, 但如果用下面的程式碼 : <script language="javascript1.2"> myarray = /d(b+)d/g.exec("cdbbdbsbz"); document.writeln("the value of lastindex is " + /d(b+)d/g.lastindex); </script> lastindex 顯示的值為 0 這兩個語句中的 /d(b+)d/g 是兩個不同的規則運算式, 因此有不同的 lastindex 屬性值圓括號在子串代換的作用在一個規則運算式中使用圓括號將使會存儲對應的子串, 如 :/a(b)c/ 代換字元 'abc' 並存儲 'b', 可以用 RegExp 屬性 $1,..., $9 或陣列元素 [1],..., [n] 來呼叫它, 請看下面的例子 : 例一 : <script language="javascript1.2">

22 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 18 re = /(\w+)\s(\w+)/; str = "John Smith"; newstr = str.replace(re, "$2, $1"); document.write(newstr) </script > 它將顯示 "Smith, John" 例二 : <html> <script language="javascript1.2"> function getinfo(){ re = /(\w+)\s(\d+)/ re.exec(); window.alert(regexp.$1 + ", your age is " + RegExp.$2); </script> Enter your first name and your age, and then press Enter. <form> <input type="text" name="nameage" onchange="getinfo(this);"> </form> </html> 上例中,RegExp.input 由 Change 事件所設置, 在 getinfo 函數中,exec 方法用 RegExp.input 值作為它的參數例三 : <html> <script language="javascript1.2"> function getinfo(){ a = /(\w+)\s(\d+)/(); window.alert(a[1] + ", your age is " + a[2]); </script> enter your first name and your age, and then press enter. <form> <input type="text" name="nameage" onchange="getinfo(this);"> </form> </html> 例三同例二結果完全相同

23 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 19 通配搜索和忽略大小寫規則運算式有兩個選項標記, 以允許通配和忽略大小進行搜索進行通配用 g 標記, 忽略大小寫搜索用 i 標記, 如下 : <script language="javascript1.2"> re = /\w+\s/g; str = "fee fi fo fum"; myarray = str.match(re); document.write(myarray); </script> 它將顯示 ["fee ", "fi ", "fo "] JavaScript 語句條件語句 :if...else 和 switch if...else 語句如果條件為 true, 則執行 if 段語句, 若為 false 則執行 else 段語句, 用法如下 : if ( 條件 ) { 語句 1 [else { ] 語句 2 條件可以是任何結果值為 true 或 false 的 JavaScript 運算式, 語句可以是任何可執行的 JavaScript 語句, 它還可以任意層地被嵌套, 如果條件語句後面是單條語句, 那麼就不需要大括弧 { 請看下例: <SCRIPT> function checkdata () { if (document.form1.three.value.length == 3) alert("ok!"); else { alert(" 請輸入三個字元," + document.form1.three.value + " 無效!"); return false </SCRIPT> <form name="form1"><center> <input type="text" name="three" onchange="checkdata()"></center> </form>

24 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 20 switch 語句 switch 語句允許程式給運算式求值, 並用 case 標記來判別運算式可能的值 ; 如果判別成立, 程式將執行相應的語句, 用法如下 : switch ( 運算式 ){ case : 語句 ; break; case : 語句 ; break;... default : 語句 ; 通過 switch 語句執行流程如下 : 1. 求運算式的值並依次序查看 case, 直到找到一個判別 ; 2. 如果 case 的值等於運算式的值, 則執行它相應的語句 ; 3. 繼續執行, 直到遇到一個 break 語句, 或者 switch 語句結束這意味著如果沒有使用一個 break 語句, 則多個 case 塊被執行 4. 如果沒有 case 等於運算式的值, 則跳轉到 default; 如果沒有 default 情況, 則跳轉到最後一步 ; 5. 繼續執行緊接 switch 程式碼塊末尾的語句迴圈語句 :for while do while label break 和 continue for 語句一個 for 語句進行迴圈直到條件為 false, 用法如下 : for ([ 初始運算式 ]; [ 條件 ]; [ 增量運算式 ]) { 語句 ; 初始運算式是一個運算式, 該運算式只在執行迴圈前被執行一次 ; 條件是一個 Boolean 運算式 ; 如果是 true, 則語句被執行, 如果為 false, 則迴圈結束 ; 增量運算式在每次經過迴圈最後執行 ; 語句是 true 時要執行的語句, 它可以是複合語句如下例 : myarray = new Array(); for (i = 0; i < 10; i++) { myarray[i] = i;

25 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 21 do...while 語句一個 do...while 語句進行迴圈直到條件為 false, 用法如下 : do { 語句 ; while ( 條件 ) 首先執行一個語句塊, 然後重複迴圈的執行該語句塊, 直到條件運算式等於 false while 語句執行一個語句, 直到指定的條件為 false, 其用法如下 : while ( 條件 ) { 語句 ; 該語句與 do...while 語句不同的是, 它將在語句執行開始檢查條件是否為 true, 如是 false, 它將根本不會執行下面的語句 label 語句為語句提供一個識別字例如, 用 label 標識一個迴圈, 然後用 break 或 continue 語句來指示程式將在何處中斷或繼續, 其用法如下 : label : 語句 label 值可以是任何 JavaScript 識別字, 語句可以是任何合法的 JavaScript 語句, 如下例流程, 當判斷式為成立時執行 break, 否則回到 label 處執行 : markloop: while (themark == true) { x = dosomething(); if (x == 1) break ; continue markloop ; 結構化的設計中不鼓勵使用這樣的程式流程, 應儘量避免 break 語句用 break 語句中止一個迴圈 switch label 語句當在一個 while do-while for 或 switch 語句,break 立即終止最裏層的迴圈或 switch 語句並將控制權交給下面的語句 ; 當在一個封閉的 label 語句使用 break, 它將終止語句並將控制權交給下面語句 break [label];

26 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 22 其中 [label] 是可選的, 它指定中斷點處語句的標籤 continue 語句 continue 語句用於重新開始一個 while do-while for 或 label 語句, 用法為 : continue [label]; 其中 [label] 是可選的, 它指定中斷點處語句的標籤物件操作語句 :for...in 和 with for...in 語句對一個物件的所有屬性迭代 ( 重複 ) 一個指定的變數, 對每個不同的屬性,JavaScript 執行指定的語句, 其用法如下 : for (variable in object) { statements; 下面函數有兩個參數, 它迭代所有的物件屬性並傳回一個屬性名稱和其值的列表 : function dump_props(obj, obj_name) { var result = " " for (var i in obj) { result += obj_name + "." + i + " = " + obj[i] + "<br>" result += "<hr>" return result 如一個物件 car 有兩個屬性 :make 和 model, 那麼 result 可能為 : car.make = Ford car.model = Mustang with 語句 with 語句為一段語句建立內定的物件, 任何無物件的屬性引用, 都假定使用該內定的物件, 其用法如下 : with (object){ statements 下面的語句指定 Math 物件為內定的物件, 它包含的語句有 PI 屬性和 cos sin 方法, 而沒有指定物件,JavaScript 將假定引用 Math 物件 : var a, x, y; var r=10; with (Math) {

27 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 23 a = PI * r * r x = r * cos(pi) y = r * sin(pi/2) 注釋 JavaScript 支援 Java 類型的注釋 : 注釋一個簡短的一行注釋語句使用一個雙斜線 (//); 注釋一個較長的注釋語句使用 /* 和 */ 符號將其包含函數函數是 JavaScript 中最基本的建構成員, 函數是一個 JavaScript 過程它執行一個特定的任務 ; 為了能使用一個函數, 必須首先對它進行定義, 然後在程式中對它進行呼叫定義函數函數的定義由一系列 JavaScript 關鍵字所組成 : 函數的名稱 ; 函數的參數, 包含在由逗號分開的圓括號內 ; 函數的 JavaScript 語句, 包含在大括弧內 {, 該語句還可以呼叫另外的一個或多個函數通常, 可以在文檔的頭部定義函數, 以便當文檔被裝載時函數首先載入 ; 否則, 有可能在文檔正被載入時, 用戶觸發了一個事件控制碼而呼叫一個還沒有定義的函數, 導致一個錯誤的產生一個函數的原型應該象下面的語句一樣 : function square(number) { return number * number; 呼叫函數可以呼叫當前文檔中定義的函數, 也可以呼叫另一個視窗或框架定義的函數但一個定義的函數不能直接執行它, 定義一個函數只是簡單地為函數命名並告訴該函數會幹些什麼而呼叫一個函數需要用指定的參數來執行一個特殊的行為一個函數還可以進行遞迴, 也就是說自已呼叫自己使用 arguments 陣列函數的 arguments 傳回一個陣列, 包含了傳遞給當前執行函數的每個參數如 : arguments[i] 或 functionname.arguments[i] 在這裏 i 是一個序列數, 從零開始, 因此傳遞給函數的第一個參數應當是 arguments[0],arguments 的整個長度由 arguments.length 指定

28 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 24 通過 arguments 屬性, 函數可以很好地處理可變數量的參數當不知道有多少個參數將傳遞給函數時,arguments 是個有用的功能, 可以用 arguments.length 決定實際傳遞給函數的參數數目, 然後用 arguments 陣列嘗試每個參數預定義函數 JavaScript 有以下幾個預定義函數 : eval eval 函數對作為數位運算式的一個字串進行求值, 其語法為 : eval(expr) 此處 expr 是一個被求值的字串參數如果該字串是一個運算式,eval 求該運算式的值 ; 如果該參數代表一個或多個 JavaScript 語句, 那麼 eval 執行這些語句 eval 函數可以用來把一個日期從一種格式 ( 總是字串 ) 轉換為數值運算式或數位 isfinite isfinite 函數計算一個參數以確定它是否是一個有限數值其語法如下 : isfinite(number) 此處 number 是一個數值, 如果參數為 NaN( 非數字 ) 正無窮或負無窮, 該方法傳回 false, 否則傳回 true isnan isnan 函數計算一個參數以確定它是否是 NaN( 不是數字 )"; 其語法為 : isnan(testvalue) 此處 testvalue 是想要計算的值若結果為 "NaN" 則傳回 true, 否則為 false parseint 和 parsefloat 這兩個分析 (parse)" 函數將字串參數轉換為一個數值, 其語法為 : parsefloat(str) parseint(str [, radix]) parsefloat 分析它的字串參數 str, 並嘗試將其轉換為一個浮點數, 如果它碰到一個字元不是符號 (+ 或 -) 數字十進位小數點或指數, 那麼傳回值到那個位置為止, 而忽略所有後繼字元 ; 如果第一個字元不能轉換為一個數值 ( 即它是一個無效字元 ), 那它將傳回 NaN parseint 分析它的第一個參數 str, 並基於指定的基數 (radix) 或底數之上傳回一個整數例如 : 若基數為 10 則將其轉化為十進位, 為 8 則轉化為八進制, 為 16 則轉化為十六進位如果基數省略或它與首字元相矛盾時,JavaScript 假

29 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 25 定基數是基於字串的第一個字元, 如果第一個字元不能轉換為基於基數的數位時, 它將傳回 NaN Number 和 String Number 和 String 函數讓您將一個物件轉換為一個數位或字串, 其語法為 : Number(objRef) String(objRef) 此處 objref 是一個物件的引用下面的例子將一個 Date 物件轉換為一個可讀的字串 : D = new Date ( ) // 下面它將傳回為字串 : // "Thu Aug 18 19:37:43 UTC " x = String(D) escape 和 unescape escape 和 unescape 函數讓您將字串進行編碼或解碼, 其語法為 : escape(string) unescape(string) escape 函數將字串轉換為基於 ISO Latin 字元集的十六進位 ASCII 碼這個函數不與任何其他物件關聯, 但它實際上是 JavaScript 語言的一個固有部分, 對於字母數位字元將傳回它們自身, 而對於符號將傳回它們的 ASCII 碼, 其形式為 %xxx 例如語句 document.write(escape(hi!")) 的結果如下 : Hi%21 unescape 函數傳回一個基於其 ASCII 碼值的字元, 即對其進行解碼物件 JavaScript 是簡單地基於物件的程式, 物件由 JavaScript 的變數或其他物件的屬性方法所組成的集合方法是作為某個物件成員的函數, 屬性是作為物件成員的一個值或一組值 ( 陣列或物件的形式 ) 物件和屬性一個 JavaScript 物件具有許多的屬性, 可以用下面方法來定義一個物件的屬性 : objectname.propertyname 注意, 物件名和屬性名都是大小寫敏感的, 通過給屬性賦值來定義一個屬性 ; 例如, 假設有一個物件名為 mycar, 可以這樣來定義其屬性 : mycar.make = "Ford" mycar.model = "Mustang"

30 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 26 mycar.year = 1969; 陣列是用單一的變數名關聯數值的一個序列, 在 JavaScript 中屬性和陣列是密切相關的 ; 事實上, 它們具有不同的介面和相同的資料結構, 因此可以像下面一樣來定義 mycar 物件的屬性 : mycar["make"] = "Ford" mycar["model"] = "Mustang" mycar["year"] = 1967 這類陣列是一個關聯陣列 (associative array), 因為每個索引元素都通過一個字串值關聯 ; 為了舉例說明它是如何工作的, 下面的函數顯示物件的屬性, 並把物件和物件名作為參數傳遞給函數 : function show_props(obj, obj_name) { var result = " "; for (var i in obj) result += obj_name + "." + i + " = " + obj[i] + "\n"; return result; 因此如果函數呼叫 show_props(mycar, "mycar") 將傳回下面的結果 : mycar.make = Ford mycar.model = Mustang mycar.year = 1967 建立新物件從 JavaScript 1.2 開始, 可以用物件初始化程式建立物件, 另外, 可以首先新建一個構造函數並用 new 運算符來建立該物件的實例使用物件初始化程式除了用構造函數來建立物件, 可以用物件初始化程式建立物件, 物件初始化程式 (Object initializer) 技術是從 C++ 中引用來的, 它的用法如下 : objectname = {property1:value1, property2:value2,..., propertyn:valuen 這裏 objectname 是新物件的名字, 每個 propertyi 是一個識別字 ( 可能是一個名字數字或字串直接量 ), 每一個 valuei 是賦予屬性 propertyi 值的運算式 objectname 和賦值是可選項下面的例子建立有三個屬性的物件 myhonda, 注意屬性 engine 本身是具有它自己的兩個屬性物件 : myhonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2 使用構造函數另外還可以用構造函數來建立物件 :

31 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 27 用構造函數定義物件類 ; 用 new 運算符新建物件實例建立一個函數來指定物件的名字屬性和方法來定義物件類, 例如假設需要建立的物件類為 car, 它具有屬性 make model year 和 color, 可以這樣 : function car(make, model, year) { this.make = make this.model = model this.year = year 現在可以建立一個物件 :mycar, mycar = new car("eagle", "Talon TSi", 1993) 還可以給先前定義的物件添加一個屬性, 如 :mycar.color = "black", 然而它不會影響其他的同類物件索引物件屬性在 JavaScript 中, 物件也是一個陣列, 可以按名稱 ( 使用物件名稱, 後跟一個圓點和屬性的名稱 ) 來引用一個物件的任何成員 ( 屬性和方法 ), 也可以按其陣列下標索引來引用 JavaScript 中下標的是從 0 開始編號的, 也可以用其名稱來引用下標因此您可用多種方法來引用屬性, 如果某文檔有兩個表單, 其中第二個表單名為 myform 下面的方法是等價的 : document.myform document.forms[1] // [1] 是 HTML 源順序中屬性 forms 的索引 document.forms["myform"] 為物件類定義屬性可以用 prototype 屬性在先前定義的物件類中加入一個屬性, 它可以被所有指定的物件類所共用下面的程式碼為 car 類所有的物件添加一個 color 屬性, 並為 car1 的 color 屬性賦值 : Car.prototype.color=null car1.color="black" 定義方法方法 (method) 是物件的集合, 可以象定義標準函數一樣定義一個方法, 方法就是賦給某個物件的一個函數, 可以在物件構造函數中包含方法定義來定義物件類的方法, 例如 : function displaycar() { var result = "A Beautiful " + this.year + " " + this.make + " " + this.model;

32 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 28 pretty_print(result); 對於前面定義的 car 物件類, 就可以這樣來呼叫 car 物件類中每個物件的 displaycar 方法 : car1.displaycar() car2.displaycar() 使用物件引用 JavaScript 有一個特殊的關鍵字 :this, 用它可以在一個方法中來引用當前的物件當我們將其用於 form 屬性時,this 關鍵字引用當前物件的的父表單, 如下例當用戶按下按鈕時,text 物件內文本框內容將以其父表單的名字 myform 來代替原值 Beluga : <form name="myform"> form name:<input type="text" name="text1" value="beluga"> <input name="button1" type="button" value="show Form Name" </form> onclick="this.form.text1.value=this.form.name"> 刪除物件可以用 delete 運算符來刪除一個物件, 如下例 : myobj=new Number(); delete myobj; // 刪除物件並傳回 true 預定義的內部物件 Core JavaScript 中預定義的物件有 Array, Boolean, Date, Function, Math, Number, RegExp, String 等 Array JavaScript 沒有顯示的陣列資料類, 然而可以用預定義的 Array 物件及其方法提供對建立任何資料類型的陣列的支援陣列是一套數值的序列, 它用一個名字和索引所組成建立陣列 - 有兩種方法來定義一個陣列 : arrayobjectname = new Array(element0, element1,..., elementn) arrayobjectname = new Array(arrayLength) 這裏 arrayobjectname 即可以是存在的物件, 也可以是一個新的物件 element0, element1,..., elementn 是陣列元素的值,arrayLength 是陣列初始化的長度賦值及引用 - 可以這樣來給陣列賦值 :

33 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 29 emp[0] = "apple" 也可以在建立陣列時給它賦值 : emp = new Array(apple,orange,banana) 引用陣列的第二個元素 :emp[1] 注意: 所有的陣列元素第一個索引都是從零開始的, 引用上面的第一個元素應當是 emp[0] Array 方法方法描述 concat 合併兩個陣列並傳回一個新陣列 join 合併一個陣列內所有元素為一個字串 pop 刪除陣列內最後一個元素並傳回該元素 push 在陣列尾部增加一個或多個元素並傳回該陣列的新長度值 reverse 將陣列元素的位置進行反轉 shift 刪除陣列內第一個元素並傳回該元素 slice 抽取陣列內一部分元素並傳回一個新陣列 splice 從一個陣列中刪除元素添加新元素 sort 對陣列中的元素進行排序 unshift 加入一個或多個元素到陣列頂端並傳回陣列的新長度例如, 假設定義了下面一個陣列 : myarray = new Array("Wind","Rain","Fire") myarray.join() 傳回 "Wind,Rain,Fire"; myarray.reverse 調換陣列元素位置使 myarray[0] 為 "Fire",myArray[1] 為 "Rain", myarray[2] 為 "Wind"; myarray.sort 對陣列排序使 myarray[0] 為 "Fire",myArray[1] 為 "Rain",myArray[2] 為 "Wind" Boolean Boolean 物件是 Boolean 資料類型的包裝器每當 Boolean 資料類型轉換為 Boolean 物件時,JavaScript 都隱含地使用 Boolean 物件用下面的語法來建立一個 Boolean 物件 : booleanobjectname = new Boolean(value) 不要將原始 Boolean 的值 true 和 false 和 Boolean 物件的值 true 和 false 相混淆可選的 value 參數是新物件的初始 Boolean 值如果該值省略, 或者為 false undefined null NaN 以及空字串, 則該 Boolean 物件的初始值為 false; 否則, 初始值為 true 如: var b = new Boolean(false); if (b) // 該運算式為 true

34 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 30 Date JavaScript 沒有時間資料類, 但可以用 Date 物件及其方法來取得日期和時間 Date 物件有許多方法來設置提取和操作時間, 它沒有任何屬性 JavaScript 處理時間的方法類似於 Java Date 物件的範圍為相對於 1970 年 1 月 1 日的前後 100,000,000 天建立一個 Date 物件 : dateobjectname = new Date([parameters]) dateobjectname 是建立的 Date 物件名, 它可以是一個新物件或已存在物件的屬性,parameters 可以是以下幾種 : 空白 : 建立現在的日期和時間, 如 today = new Date(); 用字串描述時間 : 月日, 年小時分秒 ", 如 :Xmas95 = new Date("December 25, :30:00"), 如果您省略了時分或秒, 該值將設為零 ; 一串年, 月, 日的整數值, 如 Xmas95 = new Date(1995,11,25); 一串年, 月, 日, 小時, 分, 秒的整數值, 如 :Xmas95 = new Date(1995,11,25,9,30,0) Date 物件的方法方法描述 "set" 方法 "get" 方法 "to" 方法 parse and UTC 方法在 Date 物件中設置日期和時間在 Date 物件中提取日期和時間值從 Date 物件傳回字串值解析一個包含日期的字串, 主要用於給一個已存在的 Date 物件賦日期字串值 Function 預定義的 Function 物件指定一個 JavaScript 字串碼象函數一樣進行編譯, 其用法如下 : functionobjectname = new Function ([arg1, arg2,... argn], functionbody) functionobjectname 是一個變數名或一個已存在的物件屬性, 它也可以是一個物件後跟一個小寫的事件處理器名, 如 window.onerror;arg1, arg2,... argn 是可選的函數接收的參數名 functionbody 是包含呼叫該函數時被執行的 JavaScript 程式碼塊的字串下面的程式碼將一個函數賦予變數 setbgcolor, 該函數設置當前文檔的背景色 : var setbgcolor = new Function("document.bgColor='antiquewhite'") 為了呼叫 Function 物件, 可以指定該變數名好象它是一個函數, 如下 : var colorchoice="antiquewhite" if (colorchoice=="antiquewhite") {setbgcolor() 給事件處理器賦予一個函數有以下兩種方法 : 1. document.form1.colorbutton.onclick=setbgcolor;

35 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 <input name="colorbutton" type="button" value="change background color" onclick="setbgcolor()"> Math 預定義的 Math 物件具有數學常量和函數的屬性和方法, 可以用 Math.PI 來獲取圓周率同樣的, 標準的數學函數也是 Math 物件的方法, 可以使用 Math.sin(1.56) 來求取 1.56 的正弦值, 所有的三角函數的參數都為弧度, 請看下表 : 方法描述 abs sin, cos, tan 絕對值標準三角函數, 參數為弧度 acos, asin, atan 反三角函數, 傳回弧度 exp, log ceil floor min, max pow round sqrt 指數和自然對數, 基數為 e 傳回大於等於其數位參數的最小整數傳回小於等於其數位參數的最大整數傳回兩個參數的較大 / 較小者指數, 第一個參數為基數, 第二個為指數傳回最接近的整數平方根與別的物件不同是不能自已建立一個 Math 物件, 所有的 Math 物件都是預定義的, 可以這樣來使用多個的數學常量和方法 : with (Math) { a = PI * r*r y = r*sin(theta) x = r*cos(theta) Number Number 物件代表數值資料類型和提供數值常數的物件 Number 物件最主要的用途是將其屬性集中到一個物件中, 以及使數位能夠通過 tostring 方法轉換為字串下表為 Number 物件的屬性 : 方法描述 max_value min_value nan negative_infinity positive_infinity JavaScript 能表達的最大數, 約為 1.79E+308 JavaScript 能表達的最小數, 約為 2.22E-308 表示算術運算式傳回非數字值的特殊值特殊的負無窮大值, 傳回溢位特殊的正無窮大值, 傳回溢位

36 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 32 RegExp RegExp 物件用於規則運算式, 保存用於規則運算式模式查找的資訊 RegExp 物件不能直接建立, 但始終可以使用, 在完成成功的規則運算式查找完成之前其屬性值一直為 undefined 請參閱規則運算式有關說明 String String 物件可用於處理或格式化文本字串以及確定和定位字串中的子字串不要將它同字串直接量相混淆, 如下例中 s1 為字串直接量, 而 s2 為 String 物件 : s1 = "foo" s2 = new String("foo") 可以在一個字串直接量中呼叫任何 String 物件方法 JavaScript 自動將字串直接量轉換為一個臨時的 String 物件並呼叫其方法, 然後丟棄該臨時 String 物件, 也可以在一個字串直接量中使用 String.length 屬性首先使用字串直接量除非有特殊的需要, 因為 String 物件違反了直覺, 如 : s1 = "2 + 2" // 建立字串直接量 s2 = new String("2 + 2") eval(s1) // 傳回數值 4 eval(s2) // 傳回字串 "2 + 2" // 建立 String 物件物件模型基於類的面向物件的語言, 如 Java 和 C++, 建立於兩個不同的實體概念之上 : 類 (classes) 和實例 (instances) 一個類定義所有的描述物件集合的屬性 ( 如 Java 中的方法的域, 以及 C++ 中的成員及屬性 ), 它是個抽象的東西, 不象物件所描述的特定成員 ; 一個實例是類的實際表現, 即是它的成員基於原型的語言如 JavaScript, 沒有這種區別, 它只具有物件一個基於原型的語言具有原型物件的概念, 一個物件是一個範本, 它為一個新物件提供最初的屬性任何物件都可以指定它自己的屬性, 不管是建立的還是在運行時的另外, 任何物件都可以同另一個物件聯合為一個原型, 允許第二個物件分享第一個物件的屬性定義一個類別在基於類別的語言中, 類別的定義是在一個單獨的類別定義中進行, 在類別定義中可以指定其特有的方法, 稱為構造函數來建立類別的實例一個構造函數可以為實例的屬性指定初始值並在其建立時執行其他初始化工作可以用 new 操作符來動態地用構造函數建立類別的實例 JavaScript 具有類似的模型, 但沒有與構造函數分離的類別定義, 而是定義一個構造函數來建立具有特定屬性及其值的集合的物件任何 JavaScript 函數都可以用作構造函數, 您可以用 new 運算符和構造函數來建立一個新物件

37 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 33 子類別和繼承在一個基於類別的語言, 您可以通過類別定義建立一個類的層次 ; 在類定義中, 您可以指定一個新類別是一個已存在的類別的子類別子類別繼承了父類別的所有屬性並可以有自己特定的新屬性或修改它繼承的屬性例如輔乳動物類別有兩個屬性 : 會移動會產子, 而它的子類別貓類又有一個新屬性, 它會喵喵 " 叫, 那麼貓類就有三個屬性 : 會移動會產子會喵喵 " 叫 JavaScript 同樣具有繼承性, 它允許用構造函數來關聯原型, 但它與上例又有所不同, 以上例的輔乳類別來講 : 首先用構造函數定義輔乳動物, 指定會移動會產子兩個屬性 ; 接下來定義貓構造函數, 指定會喵喵 " 叫這個屬性, 最後為貓構造函數賦於一個新的輔乳動物物件, 這時就建立了一個新的貓物件, 它繼承了輔乳動物的兩個屬性添加和刪除屬性在基於類別的語言中是在編譯時建立一個類別, 而在編譯時或運行時來實例化一個類別的實例當定義了類別後您不能再改變類別屬性的數目和類型而在 JavaScript 中, 可以在運行時從任何物件中添加或刪除屬性, 如果為物件集合原型的一個物件添加了一個屬性, 那麼該原型的所有物件同時獲取了這個新屬性總結基於類別 (Java) 和基於原型 (JavaScript) 的物件體系比較 Java 類別和實例是不同的實體用類別定義定義類, 類別的實例化用構造函數方法用 new 操作符建立一個物件用類別定義來定義已存在的子類以構造一個物件的層次通過類別鏈來繼承屬性類別定義指定一個類中所有實例的屬性, 不能在運行時動態添加屬性 JavaScript 所有物件都是實例用構造函數定義和建立物件集合相同用構造函數關聯原型, 並通過把物件賦予原型建立物件層次通過原型鏈繼承屬性構造函數或原型指定一套初始屬性集合, 可以動態地為單獨物件或整個物件集合添加或刪除屬性在 HTML 中植入 JavaScript 可以簡單地像下面的語句一樣植入一個 JavaScript 程式碼 : <script> </script> JavaScript 語句... 一般習慣放在 <head></head> 標籤內, 而 Script 程式碼本身也可以另外轉寫並

38 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 34 以 js 為副檔名儲存在其他路徑下, 再利用 <script></script> 標籤呼叫指定語言及版本因為在不同的瀏覽器版本中支持不同版本的 JavaScript, 以及還有一些其他的 Script 語言如 :JScript VBScript 等等, 因此有必要在 <script> 標記中使用 language 屬性來指定所用的 script 語言及其版本, 這樣當用戶瀏覽器不支援該 script 語言時, <script> </script> 標記中的程式碼將會被忽略, 如下 : <SCRIPT LANGUAGE="JavaScript1.2"> 下表為 JavaScript 和 Navigator 版本的關係 Navigator 版本 JavaScript 版本支援的 <SCRIPT> 標記 Navigator 2.0 之前不支持 JavaScript 無 Navigator 2.0 JavaScript 1.0 <SCRIPT LANGUAGE="JavaScript"> Navigator 3.0 JavaScript 1.1 <SCRIPT LANGUAGE="JavaScript1.1"> 及之前 Navigator JavaScript 1.2 <SCRIPT LANGUAGE="JavaScript1.2"> 及之前 Navigator JavaScript 1.3 <SCRIPT LANGUAGE="JavaScript1.3"> 及之前還可以用 HTML 的注釋標記  將 JavaScript 程式碼隱藏起來, 而一個瀏覽器將會忽略它不認識的標記, 這樣 <script> 和 </script> 標記都會被忽略, 雖然那些不支援 <script> 標記可能已經絕跡, 您不必非得這樣做, 但這也是一個尊重用戶的好習慣指定 JavaScript 程式碼檔可以指定一個 JavaScript 原始檔案來代替在 HTML 檔中引用, 這樣就可以在不同的 HTML 檔中引用相同的 JavaScript 根源程式, 如 : <script src="common.js"></script> 一個外部的 JavaScript 檔不能包含任何 HTML 標記, 也不需要再用 <script></script> 標籤, 它的內容只能是 JavaScript 程式碼在 HTML 屬性值中使用 JavaScript 運算式使用 JavaScript 實體 (entities), 可以指定一個 JavaScript 運算式作為一個 HTML 屬性的值, 實體值是動態賦予的, 這就是說, 可以建立更靈活的 HTML 結構, 因為 HTML 元素的屬性依賴於頁內先前放置元素資訊可能對 HTML 的字元實體有所瞭解它用 (&) 符後接一個名稱並以分號 (;) 結束如一個版權符號的字元實體為等等類似的,JavaScript 實體也用 (&) 開始, 以分號 (;) 結束, 不同的是它以一個用大括弧 ({ ) 封裝的 JavaScript 運算式來代替其名稱和數位如, 假設定義了一個變數 barwidth, 那麼您可以將其用於水平尺規的寬度百分比屬

39 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 35 性中 : <hr width="&{barwidth;%" align="left> 引號標記當在一個字串直接量中需要一個引號字元時, 那麼用單引號 (') 來將其與字串直接量區分開來如下例中的函數 bar 包含一個在雙引號屬性值中的字串 left : function bar(widthpct) { document.write(" <hr align='left' width=' + widthpct + '%>") 又如 : <input type="button" value="press Me" onclick="myfunc('astring')"> 事件事件通常是當用戶在頁面上進行活動後產生的行為, 如按某個按鈕是一個事件, 以及改變了表單的文本域或在鏈結上移動滑鼠為了回應用戶的這些事件, 您必須首先定義事件處理器, 如 onchange 和 onclick 等等, 事件的指令如 onclick onchange 等不分大小寫以下則從幾個主題來詳細講述事件 : 定義事件處理器事件的物件事件的捕獲驗證表單輸入下表給出了 JavaScript 支持的一些事件 : 事件應用於發生條件事件處理器 Abort 圖像用戶中斷裝載圖像 ( 如點擊一個鏈結或點擊 STOP 鍵 ) Blur 視窗和所有表單元素用戶從視窗或表單中移開輸入焦點 Change text fields textareas select lists Click 按鈕單選框核取方塊 submit 按鈕 reset 按鈕鏈結用戶改變元素值用戶在表單元素或在鏈結上點擊 DragDrop 窗口用戶拖放一個物件到瀏覽器視窗, 如拖放一個檔到瀏覽器視窗 onabort onblur onchange onclick ondragdrop Error 圖像視窗裝載文檔或圖像時出錯 onerror Focus 視窗和所有表單元素用戶在視窗或表單元素 onfocus

40 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 36 上聚焦 KeyDown 文檔圖像鏈結表單文用戶按下一個鍵 onkeydown 本域 KeyPress 文檔圖像鏈結表單文用戶按下鍵並保持 onkeypress 本域 KeyUp 文檔圖像鏈結表單文本域用戶釋放按鍵 onkeyup Load 文檔體用戶裝載頁 onload MouseDow n 文檔按鈕鏈結用戶按下一個滑鼠鍵 onmousedown MouseMove 內定用戶移動遊標 onmousemove MouseOut 區域鏈結用戶在用戶端圖像映射 onmouseout 或鏈結中移出遊標 MouseOver 鏈結用戶在鏈結上移動遊標 onmouseover MouseUp 文檔按鈕鏈結用戶釋放滑鼠按鈕 onmouseup Move 窗口用戶或 Script 移動視窗 onmove Reset 表單用戶重置表單 ( 按 onreset Reset 按鈕 ) Resize 窗口用戶或 Script 改變視窗 onresize 大小 Select text fields textareas 用戶選擇表單元素的輸 onselect 入域 Submit 表單用戶提交表單 onsubmit Unload 文檔體用戶退出頁面 onunload 定義事件處理器我們定義一個事件處理器 ( 一個 JavaScript 函數或一些語句 ) 來處理一個事件事件處理器的名稱為事件的名稱加一個首碼 "on" 為了給 HTML 標記建立一個事件處理器, 需要為標記加入一個事件處理器屬性, 屬性值為雙引號包含的 JavaScript 程式碼例如建立了一個 JavaScript 函數名為 compute, 當用戶按下一個按鈕時, 通過呼叫按鈕的 onclick 事件處理器賦予函數值來呼叫該函數 : <input type="button" value="calculate" onclick="compute('mydoc.html', 'newwin')"> 可以為 onclick 賦予任何 JavaScript 語句來作為它的屬性值, 如果有多個 JavaScript 語句, 那麼您可以用分號來將其分隔開來, 上例中 onclick 事件處理器呼叫一個名為 compute 的函數當建立一個事件處理器時, 相應的 JavaScript 物件也同時獲取事件處理器的名字屬性, 該屬性允許瀏覽該物件的事件處理器

41 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 37 如上例中 JavaScript 建立一個 Button 物件, 它的 onclick 屬性值為 "compute(this.form)", 代表傳遞的參數為按鈕所存在的表單中, 而 compute 函式將引用該表單所提供的各種屬性值做相關的處理請注意此處引號的用法, 因為在 HTML 中事件處理器必須封裝於一個雙引號中, 那麼要用單引號來將它的字串參數分隔開來事件物件每個事件都有其相應的事件物件, 事件物件提供事件的有關資訊, 例如事件的類型和事件發生時滑鼠的位置當事件發生時, 或者是事件處理器寫入到事件控制碼時, 事件物件成為事件處理器的一個參數通常, 是事件發生的物件處理該事件, 例如當一個用戶按下一個按鈕, 它通常是按鈕處理事件的事件處理器有時可能需要 window 或 document 物件來處理某個事件而不是文檔中單一的部分, 例如可能想用 document 物件來處理 MouseDown 事件而不管它們發生於文檔的何處 JavaScript 事件捕獲模型允許在它們到達目標前定義捕獲和處理事件的方法, 這樣,window document 和 layer 物件可能使用下面的一些特定的事件方法 : captureevents - 捕獲特定類型的事件 ; releaseevents - 忽略對特定類型事件的捕獲 ; routeevent - 傳遞捕獲的事件到一個指定物件 ; handleevent - 處理捕獲的事件 ( 不是 layer 物件的方法 ) 假設需要捕獲一個視窗內發生的所有滑鼠點擊事件, 將進行以下幾個步驟的工作 : 1. 首先獲取事件的捕獲可以用下面的語句 : window.captureevents(event.click); 此處 captureevents 的參數是一個 event 物件的屬性並指示它是事件捕獲類型, 如果需要捕獲多個事件, 那麼參數應當用 ( ) 分隔開來, 如 : window.captureevents(event.click Event.MOUSEDOWN Event.MOUSEUP) 2. 第二步將定義事件處理器, 如 : function clickhandler(e) { window.document.links[0].handleevent(e); 3. 第三步註冊事件處理器, 如 : window.onclick = clickhandler; 驗證表單輸入 JavaScript 的一個最重要的用途是驗證輸入到基於伺服器端的程式如伺服器端 JavaScript 或 CGI 程式還記得在規則運算式的實例所用的一個例子嗎? 它實際上也是一個簡單的表單驗證的例子當然它還並不是一個輸入到伺服器端的表單驗證, 一個真正的表單驗證格式應當如下一樣 ( 此處假設 sample.html 是伺服器端的

42 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 38 一個應用程式 ): <form name="sample_order" action="sample.html" method="post"> JavaScript 的使用物件物件層次在層次結構中, 一個物件的子輩 " 是該物件的屬性 ; 例如, 一個名為 form1 的表單是一個物件, 它同時也是 document 物件的一個屬性, 應當像這樣來引用它 : document.form1 也就是說, 為了引用一個指定的屬性, 必須指定物件名及其父輩, 通常, 一個物件是從 HTML 標記中的 NAME 屬性獲得它的名字又如有一個表單名為 myform, 它的一個文本域為 text1, 為了引用它的 value 屬性可以用這樣的程式碼 :document.myform.text1.value Document 屬性 document 物件是 JavaScript 的基本物件之一, 因此一個 HTML 文檔中大多數都是它的屬性, 正如在物件層次中所看到的一樣例如程式碼 : document.myform.button1.value=document.title

43 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 39 document.title 的意思為獲取文檔的標題, 並將值 Document 屬性 " 賦予按鈕的 value 屬性中去 JavaScript 映射及 HTML 佈局 JavaScript 物件屬性值基於 HTML 文檔的內容, 可以稱為映射 (reflection), 因為屬性值映射到 HTML 為了更理解 JavaScript 映射, 須瞭解瀏覽器是如何進行頁面佈局的 : 通常, 瀏覽器從 HTML 檔的頂行開始往下讀入並執行其語句, 並順序將其顯示到螢幕上, 因為有這個向下 " 的過程, 僅僅當讀到它時 JavaScript 才對其映射, 例如只有當定義了一個表單後 JavaScript 才將表單元素視為其物件, 否則將會出錯同樣的, 一旦頁面佈局已經發生, 設置屬性並不會影響它本來的值或外觀在 Document 屬性章節中, 用了一個關於文檔的標題的例子, 然而卻不能更改文檔的標題, 如果在 JavaScript 程式碼中寫入 : document.title="document 屬性 " 那麼會得到一個錯誤資訊然而也有例外, 可以動態地改變表單元素的值, 正如前面用到的例子另外, 用事件處理器, 也可以在佈局完成後改變少數的其他屬性, 如 :document.bgcolor 關鍵物件 JavaScript 中最常用的幾個物件為 window Frame document Form location history 和 navigator window 和 frame 物件 window 物件是所有物件的父 " 物件, 可以在 JavaScript 應用程式中建立多個視窗 ;Frame 物件由框架文檔中的 FRAME 標記所定義,Frame 物件同 window 物件具有相同的屬性和方法, 所不同的是它們的顯示方式不同 window 物件有下面一些很有用的方法 : open 和 close: 打開和關閉瀏覽器視窗, 您可以指定視窗的尺寸內容以及是否有按鈕條位址框等屬性 ; alert: 顯示一個警告對話方塊 ; confirm: 顯示一個有 OK 和 Cancel 按鈕的確認對話方塊 ; prompt: 顯示一個輸入值文本域的提示對話方塊 ; blur 和 focus: 在視窗中移去或得到一個焦點 ; scrollto: 捲動視窗到指定的座標 ; setinterval: 在每個指定時間段對一個運算式賦值或呼叫一個函數 ; settimeout: 在指定的一段時間後對一個運算式賦值或呼叫一個函數 document 物件每一頁都有一個 document 物件因為它有 write 和 writeln 兩個方法產生

44 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 40 HTML, 因此它是一個最有用的物件 document 物件是文檔頁 Anchor Applet Area Form Image Layer Link 和 Plugin 物件的父輩 form 物件文檔內的每一個表單產生一個 form 物件, 又因為一個文檔可以包含多個表單, 因此 form 物件被儲存到一個叫 forms 的陣列中, 第一個表單 ( 頁面最上面一個 ) 為 forms[0], 第二個為 forms[1] 諸如此類 ; 如下可以這樣來引用文檔內第一個表單的第一個元素 : document.forms[0].elements[0] location 物件 location 物件具有基於當前 URL 的屬性, 例如 hostname 屬性是當前文檔伺服器和功能變數名稱它有兩個方法 : reload 強制窗口重載當前文檔 ; replace 從當前歷史記錄裝載指定的 URL history 物件 history 物件包含客戶曾經瀏覽過的 URL 列表, 可以用 current next 和 previous 屬性瀏覽當前下頁前頁的歷史記錄, 還可以用 history 陣列瀏覽別的歷史記錄值還可以用 go 方法來重定向客戶到任何歷史記錄, 例如下面的程式碼裝載客戶倒數第二個歷史記錄 : history.go(-2) navigator 物件 navigator 物件包含瀏覽器的版本資訊, 如 appname 屬性指定瀏覽器的名字, appversion 屬性指定瀏覽器的版本,navigator 有兩個方法 : javaenabled 指定 Java 是否有效 ; preference 用一個簽名的 Script 獲取或設置各種用戶參數 ;(JavaScript 1.2 及以後 ) 物件陣列一些物件具有一些屬性, 其值為它們自身陣列, 這些陣列用於存儲預先不能確定其值的資訊, 下表就是預定義的陣列 : 物件屬性描述 document anchors applets embeds forms 反映原始碼中包含 name 屬性的 <a> 標記反映原始碼中的 <applet> 標記反映原始碼中的 <embed> 標記反映原始碼中的 <form> 標記

45 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 41 images 反映原始碼中的 <applet> 標記 ( 不含由 image() 構造函數建立的圖像 ) layers 反映原始碼中的 <layer> 和 <ilayer> 標記 links 反映原始碼中的 <area href="..."> 標記 <a href=""> 標記以及由 link 方法建立的 link 物件 form elements 反映一個原始碼中的表單元素 function arguments 反映函數的參數 navigator mimetypes 反映客戶支持的所有 mime 類型 plugins 反映所有用戶安裝的插件程式 select options 反映原始碼中 select 物件的選項 window frames 反映原始碼中所有的 <frame> 標記 history 反映視窗的歷史記錄通過他們的序數或名字 ( 若已定義 ) 可以來索引這些陣列例如文檔中的第二個 <form> 標記有一個 name 屬性值 myform, 那麼可以有三種方法來引用該表單 : document.forms[1] document.forms["myform"] document.myform 所有預定義的 JavaScript 陣列均有一個 length 屬性用於指示陣列中元素的數目, 例如可以這樣來獲取文檔中有多少個表單 :document.forms.length write 方法文檔的 write 方法顯示輸出資訊, 在 Script 中可做所有在普通 HTML 不能完成的工作, 例如可以有條件地顯示正文或用變數因為這個原因,write 方法是最常用的 JavaScript 方法之一可以用字串的連結運算符 (+) 將幾個字元串連結為一個看看下面的一個例子 : <head> <script language="javascript"> <!-- // 該函數顯示一個指定寬度的水平線, 其中參數 widthpct 由正文指定 function bar(widthpct) { document.write("<hr align='left' width=" + widthpct + %>"); // 該函數顯示指定級的標題和文本, 三個參數分別為標題級正文正文 function output(headlevel, headtext, text) { // -- > document.write("<h", headlevel, ">", headtext, "</H",headLevel, "><P>", text);

46 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 42 </script> </head> <body> <script>  </script> </body> 當然這只是一個最簡單的例子, 只要發揮自己的想像力,JavaScript 可以讓網頁充滿了更多的誘惑力另外 write 還有一個相似的方法 :writeln, 只不過它增加了一個換行符, 但 HTML 忽略換行符, 因此除非它在 <PRE> 標記中使用才同 write 有所分別窗口和框架 JavaScript 可以讓相對於當前的 HTML 內容建立和操作視窗和框 window 物件是用戶端 JavaScript 層次結構的頂級物件, 而 Frame 物件近似於 window 物件, 但相當於在 FRAMESET 文檔中用 FRAME 標記建立的子視窗 " 打開和關閉視窗當瀏覽器調用時自動建立一個視窗, 您可以用瀏覽器的功能表項來新建另一個視窗, 也可以用它來關閉或退出然而我在這裏為大家講的是如何用 JavaScript 來打開和關閉視窗打開視窗用 JavaScript 來建立一個視窗我們要用到一個 open 方法, 下面的語句將建立一個視窗名為 msgwindow, 該視窗的內容是檔 sample.html: msgwindow=window.open("sample.html") 視窗可以有兩個名字, 如下例中的語句 ; 其中第一個名字 msgwindow 是引用 window 物件的一個變數, 該物件具有視窗的屬性方法和內容 (containership); 第二個名字 displaywindow 則是引用該視窗作為表單提交或超鏈結的目標視窗 : msgwindow=window.open("sample.html","displaywindow") 當然視窗的名字並不是必須的, 但當如果需要從另一個視窗瀏覽它時, 必須為它命名也可以指定該視窗的屬性 : 高度寬度以及是否包括工具條地址欄或捲軸, 詳情請參見 JavaScript 參考中的 open 方法

Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 43 關閉窗口 JavaScript 中是用 close 方法來關閉視窗的, 記住 : 不能在沒有關閉整個父視窗前關閉一個框架可以用以下三種方法來關閉視窗 : window.close() self.

frames[1] listframe:upperframe.frames[0] 或 top.frames[0].frames[0] contentframe:upperframe.frames[1] 或 top.frames[0].frames[1] 更新窗口可以用 location 屬性來設置 URL 以更新指定框架的內容, 例如如果在上面的框架集合中的某個文檔有一個 onclick 事件處理器 : onclick="top.

47 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 43 關閉窗口 JavaScript 中是用 close 方法來關閉視窗的, 記住 : 不能在沒有關閉整個父視窗前關閉一個框架可以用以下三種方法來關閉視窗 : window.close() self.close() close() 不過不要用第三個方法, 它只是一個事件處理器使用框架 frameset 是一種特殊類型的視窗, 它可以在一個螢幕中顯示多個獨立的可捲動框架, 每個框架都具有其獨立的 URL 現在假設我們有如下所示的一個框架集合: 可以這樣來引用子框架 : upperframe:top.frames[0] navigateframe:top.frames[1] listframe:upperframe.frames[0] 或 top.frames[0].frames[0] contentframe:upperframe.frames[1] 或 top.frames[0].frames[1] 更新窗口可以用 location 屬性來設置 URL 以更新指定框架的內容, 例如如果在上面的框架集合中的某個文檔有一個 onclick 事件處理器 : onclick="top.frames[0].location='artists.html'" 當該事件被觸發後, 將把名為 upperframe 的框架內容改變為 artists.html, 而 listframe 和 contentframe 框架將會關閉而不再存在在窗口和框架中導航可以同時打開多個視窗並通過點擊它們使其處於活動狀態, 或稱為聚焦視窗 (focus window) 當一個視窗被聚焦, 它將移至螢幕的最前面, 同時在視覺上發生一些變化, 如視窗標題顏色隨之變化可以用 Script 語句通過聚焦於某視窗內的一個物件, 或指定一個超鏈結的目標視窗來使一個視窗獲得焦點例如下面的例子 : checkboxwin=window.open("doc2.html")...

48 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 44 checkboxwin.document.form1.city.focus() 在上例中, 將聚焦於名為 checkboxwin 的視窗內的一個名為 city 的文本域物件, 這樣該視窗也同時獲得焦點變為活動同時您也可以用超鏈結來啟動視窗 : <a href="doc2.html" target="window2"> load a file into window2</a> 當用戶按下該鏈結, 焦點將轉向視窗 window2, 如果沒有該視窗, 瀏覽器將建立它特別功能使用 JavaScript 的 URL javascript 類型的的 URL, 簡單地說就是執行 JavaScript 語句來代替裝載文檔這只需用 javascript 開始, 並將其作為錨標記 (anchor) 的 HREF 屬性值, 如下例 : <a href="javascript:history.go(0)">reload now</a> 當按下超鏈結後, 將裝載前 0 個歷史記錄即當前頁通常可以在 javascirpt 字串後放入任何語句或函數調用使用用戶端圖像映射一個用戶端的圖像映射是由 MAP 標記所定義的, 它可以使在一幅圖像中定義不同的區域來指向不同的 URL, 這些區域可以是矩形圓形或多邊形 ; 同樣的, 也可以在一個用戶端的圖像映射中使用 JavaScript 的 URL, 如下例一樣 : <map name="buttonbar"> <area shape="rect" coords="0,0,16,14" href ="javascript:top.close(); window.location = newnav.html"> <area shape="rect" coords="0,0,85,46" </map> href="contents.html" target="javascript:alert('loading contents.'); top.location = contents.html"> 使用伺服器圖像映射用戶端的圖像映射提供了執行多個任務的功能, 然而一個伺服器端的圖像映射卻可以有更多的靈活性, 如 : <a href="img.html"><img src="about:logo" border=0 ismap></a> <script> str = location.search if (str == "") document.write("<p> 沒有指定座標值 ") else { commaloc = str.indexof(",") // 逗號的位置 document.write("<p>the x value is " + str.substring(1, commaloc) + "</p>")

49 Web Development Part III 客戶端頁面動態處理 -JavaScript 介紹 45 document.write("<p>the y value is " + str.substring(commaloc+1, str.length) + "</p>") </script> 當用戶用滑鼠點擊圖像某處, 瀏覽器將發出一個 URL 請求 :img.html:x,y 此處 URL 是由 HREF 屬性指定的文檔,x 和 y 是滑鼠的座標 ( 相對于圖像左上角的圖元值 ) 使用狀態列可以使用兩個視窗屬性 :status 和 defaultstatus, 以在瀏覽器視窗的底部顯示資訊當沒有別的東西時將顯示內定資訊 (defaultstatus), 而 status 屬性顯示的為過渡資訊, 如將滑鼠移至一個超鏈結上時可以設置這兩個屬性來顯示自定義的資訊, 如下例它將使文檔被完全裝載後狀態列顯示魔幻學堂 ": defaultstatus = " 魔幻學堂 "; 內定地, 當滑鼠移至一個超鏈結上時, 狀態列顯示該鏈結的目標 URL, 這時可以用 onmouseout 和 onmouseover 事件處理器來設置狀態列的顯示資訊, 注意 : 事件處理器必須返回 true 使用 Cookies cookies 是一個存貯在用戶端硬碟中一個名為 cookies.txt 中的一小段字串資訊, 它允許伺服器對客戶機提供個別的服務, 並保存客戶機的狀態 / 狀況資訊 ; 如有些站點必須得讓客戶打開 cookie 功能才能正常工作並提供服務詳細的內容請參見 JavaScript 參考 : name=value;expires=expdate; name 是存貯資料的名字,value 為其值, 如果 name 和 value 包含任何分號逗號或空白字元, 必須用 escape 函數將其編碼, 並用 unescape 函數解碼 ;expdate 為終止日期, 格式為格林威治時間 ;expires 是一個可選的參數, 如果沒有設置它, 那麼當用戶退出瀏覽站點後 cookie 將丟失 cookie 也有一些限制 : 1. 在 cookie 檔中不能超過 300 個 cookies; 2. 每個 cookie 為 4 K 位元組 ; 3. 每個伺服器或功能變數名稱只能有 20 個 cookies 關於 Plug-ins 可以用 JavaScript 來確定用戶是否已經安裝了某個 Plug-in, 在 Plug-in 已經安裝的情況下顯示置入的 Plug-in 資料, 也可以顯示一個可選的資訊 ( 如圖像或文本 ) 也可以確定用戶是否有能力處理一個特殊的 MIME 類型 (Multipart Internet Mail Extension) navigator 物件有兩個屬性來檢查已安裝的插件 :mimetypes 陣列和

展开

Microsoft Word - 01.DOC

Microsoft Word - 01.DOC 第 1 章 JavaScript 简介 JavaScript 是 NetScape 公司为 Navigator 浏览器开发的, 是写在 HTML 文件中的一种脚本语言, 能实现网页内容的交互显示当用户在客户端显示该网页时, 浏览器就会执行 JavaScript 程序, 用户通过交互式的