第一篇 JavaScript基礎篇

第1章 JavaScript概述

“千里之行，始于足下”。這句千古遺訓蘊含著深刻的道理，在計劃安排停當之后需要開始落實行動。只有從現在的腳下開始出發，才能達千里之外的目的地。學習JavaScript最好從了解它的起源開始，了解其產生的背景，為了什么產生，從而知道其主要應用場合，對今后的學習和目標的建立有莫大的幫助。本章將向讀者講解JavaScript的背景和現在的狀況，以及未來可能的發展方向。通過本章的學習，讀者將學會編寫一個最簡單的JavaScript程序并知道如何運行。

● 了解JavaScript產生的背景

● 了解JavaScript和其他腳本語言的異同

● 了解如何編寫一個JavaScript程序并運行它

● 牢記編寫JavaScript程序的注意事項

以上幾點是對讀者在學習本章內容時所提出的基本要求，也是本章希望能夠達到的目的。讀者在學習本章內容時可以將其作為學習的參照。

1.1 初識JavaScript

JavaScript是世界上使用人數最多的程序語言之一，幾乎每一個普通用戶的電腦上都存在JavaScript程序的影子。然而絕大多數用戶卻不知道它的起源，以及如何發展至今。JavaScript程序設計語言在Web領域的應用越來越火，未來它將會怎樣發展，本節將對這部分內容分別講述。

1.1.1 理解JavaScript的歷史

在互聯網形成的初期，Web技術遠遠沒有像今天這樣豐富以至于讓人難以選擇。當時，最基本的在Web客戶端進行數據有效性驗證都非常麻煩，瀏覽器端的用戶體驗效果非常單調，幾乎沒有交互性。今天所看到的全動態Flash、SilverLight、JavaScript等精彩應用在當時都沒有，有的只是純HTML靜態頁。

基于這樣的現狀，Netscape公司在它的Navigator Web瀏覽器中增加了腳本功能，以簡單的方式實現瀏覽器中的數據驗證，該腳本名為LiveScript。與此同時，Java技術也逐漸紅火，其特點也正好能彌補Web客戶端交互性方面的不足。Netscape公司在其Navigator瀏覽器中支持JavaApplet時，考慮JavaApplet與LiveScript目標的相似性，將LiveScript更名JavaScript，可以理解為其欲借Java之勢以求發展。

JavaScript語言剛推出就在市場獲得巨大的成功，這表現在Navigator瀏覽器的用戶量上。當JavaScript語言的使用形成一種大趨勢之后，微軟的IE瀏覽器也增加對JavaScript語言的支持，這加快了JavaScript語言發展的速度。

微軟公司的IE瀏覽器搭乘Windows操作系統這艘巨艦在市場上獲得了空前的成就，同時微軟也實現了一門兼容JavaScript的腳本語言，命名為JScript。如今對JavaScript的支持已經成為Web瀏覽器中不可缺少的技術。

1.1.2 JavaScript標準

眾多Web瀏覽器對JavaScript的支持也很不一致，相同的語言特性在不同的瀏覽器中會有所差異。這種差異對開發者影響極大，開發時不得不為不同的瀏覽器編寫不同的代碼，這種難堪的局面一直持續到JavaScript標準的制定。1997年發布了ECMA-262語言規范，將JavaScript語言標準化并重命名為ECMAScript，現在各種瀏覽器都以該規范作為標準。

1.1.3 JavaScript的現況

隨著Ajax的技術大潮，JavaScript重新受到Web開發者的重視。在此之前JavaScript主要應用還是在客戶端實現一些數據驗證等簡單工作，多媒體交互應用被類似Flash的技術搶占了市場。正當JavaScript處于低潮的時候，Ajax技術被開發出來了，簡單地說就是利用JavaScript的異步更新機制實現Web頁的局部刷新。當一個頁面不需要全部重新加載，只要加載部分數據即可的時候，互聯網的運行速度便大大加快了。JavaScript因此在Web開發中站在了一個更加重要的位置。如圖1-1所示是JavaScript在瀏覽器中的層次結構。

圖1-1 瀏覽器中的JavaScript

很多開發者開始挖掘JavaScript其他方面的潛力，打算發現類似Ajax那樣令人吃驚的東西。結合W3C現行的DOM規范，JavaScript表現出了驚人的魅力，涌現出很多基于Web的應用程序，這是在Web客戶端方面。在服務器端技術中，微軟公司也將JavaScript納入了.NET語言的范疇，使其成了ASP.NET的語言工具，開發者不必重新學習語言即可運用ASP.NET技術。如今基于JavaScript的應用不勝枚舉，讀者朋友大可上互聯網去了解更多的信息。

1.1.4 JavaScript的發展趨勢

語言永遠被當做工具，這一點從來都沒有被改變過，以后也不會，語言是使用及和其他技術進行交流的方式和手段。例如，在Windows平臺上，使用ADODB組件可以使JavaScript能處理支持SQL的數據庫中的數據，使用FSO組件可以實現本地文件IO功能。這一切都說明了JavaScript位于應用開發的最頂端，其與低層技術的實現無關，層次結構如圖1-2所示。

盡管平臺技術不斷發生變化，JavaScript仍將以不變的形式去使用平臺提供的能力從而適應新的需求。未來的一段時間內，Web開發將是開發者眾聚之地，也是JavaScript變得紫紅的時代。

圖1-2 JavaScript在系統中的位置

1.2 簡單的腳本語言

JavaScript是一門腳本語言，它如導演手中的劇本命令一樣，使原來獨立零散的演員按劇情協調組織表演從而獲得觀眾的掌聲。腳本需要簡單易懂，有針對性以能運用于一個特定的場合。本節將向讀者介紹更多有關腳本的知識。

1.2.1 認識腳本語言

腳本語言是一種應用程序擴展語言，用于系統的擴展，使其按用戶的意愿去運行。所有的基礎功能由系統提供，腳本語言在更高層次描述如何調用系統的接口。和其他編程語言不同，腳本語言通常不需要經歷編譯和鏈接這些階段，大都直接解釋執行。也有的語言需要編譯，但這是為了執行得更快一點。

1.2.2 腳本語言的分類

如今成熟的腳本語言非常多，根據使用方式的不同分成嵌入式和非嵌入式兩類。嵌入式腳本語言，這類語言通常為了應用程序的擴展而開發出來。解釋器通常嵌入在被擴展的應用程序中，成為宿主程序的一部分。例如Lua語言、Python語言的嵌入性也比較好，如今這兩者在游戲開發領域應用較多，通常作為游戲軟件的腳本系統或配置文件。根據筆者的經驗，Lua語言無論在嵌入性和運行效率上都遠超過其他語言，將Python語言納入嵌入式語言分類中有些勉強，因為其更像其他獨立運行的語言。

非嵌入式腳本語言，這類語言無須嵌入其他程序中，例如本書所講的JavaScript語言。這些語言主要應用不是作為系統擴展，而是實現一般的任務控制。

1.2.3 JavaScript的作用

JavaScript主要運用在瀏覽器端，處理用戶的輸入實現交互功能。例如在會員注冊頁面將數據發送到服務器前，使用JavaScript程序檢查用戶輸入的數據是否符合要求。可以使用JavaScript通過DOM對象操作HTML頁中的各個節點元素，動態修改HTML文檔的內容，實現基于Web的應用。JavaScript可以結合數據庫組件、文件系統組件等擴展組件實現任何想要的功能。

1.2.4 JavaScript和其他語言的異同

JavaScript和其他語言腳本語言一樣，都應用于高級任務控制，大多都是解釋執行，都屬于弱類型語言，數據類型在運行時決定，實現自動內存管理機制，資源的分配策略相似。但不同的是，JavaScript運行于瀏覽器中，主要用于Web開發，這方面它和VBScript一樣；而其他眾多腳本語言都運用于特定的軟件環境以幫助實現任務自動化，例如3DS Max的MaxScript，使用該腳本語言可以使3DS Max產生和手動操作圖形界面命令一樣的效果，這就是任務的自動化。

1.2.5 JavaScript與Java的異同

令知情人士難以忍受的是很多不了解的人都以為JavaScript和Java存在莫大的關系，事實上二者毫無關系。勉強的說法就是這兩者都屬于編程語言，都帶有“Java”字樣。而實際上， JavaScript是一門基于Web瀏覽器、解釋執行、輕量級編程語言；Java則是運行于Java虛擬機、編譯執行、重量級編程語言。有關JavaScript的背景知識已經介紹了不少，在此不再贅述。

Java是一個龐大復雜的技術體系及其開發工具的總稱，Java語言是使用Java技術的主要工具。Java語言編寫的程序通過編譯器編譯為字節碼目標程序，執行時交由Java虛擬機處理，其具有非常強大的跨平臺特性，這些和JavaScript截然不同。

1.3 第一個JavaScript程序

學習每一門新語言，大致了解了它的背景之后，最想做的莫過于先寫一個最簡單的程序并成功運行。如果最初連續幾個程序都無法成功編譯或運行，初學者學習的信心多少會受些打擊，這是正常現象。本節將帶領讀者對JavaScript進行第一次實踐嘗試，用它編寫一個最簡單且流行了幾十年的“HelloWorld”程序。

1.3.1 預備知識

JavaScript程序運行于瀏覽器中，因此這里的“HelloWorld”程序將嵌入在HTML文檔里，使用document對象的write方法將字符串“Hello World”輸出顯示在瀏覽器客戶區里。另一種常用的信息輸出方法是使用window對象的alert方法，以消息框的形式輸出信息。JavaScript程序嵌入HTML文檔的常用方式就是將代碼放在“<script>”標簽對中，代碼如下所示。

        01  <html>                     <!---------HTML文檔開始----- --------------->
        02       <head>                <!---------文檔頭開始------- ------------------->
        03           <title>           <!---------標題開始------- ---------------------->
        04           </title>          <!---------標題結束--------- -------------------->
        05       </head>               <!---------文檔頭結束------- ------------------->
        06       <body>                <!---------文檔體開始------- ------------------->
        07           <script language="JavaScript">
                                       <!---------腳本程序------- ---------------------->
        08               // JavaScript程序語句       // JavaScript程序語句
        09               // ……                     // 更多的JavaScript程序語句
        10           </script>         <!---------腳本結束-------- --------------------->
        11       </body>               <!---------文檔體結束------- ------------------->
        12  </html>                    <!---------HTML文檔結束----- --------------->

另一種方式是將JavaScript代碼直接嵌入HTML標簽中，代碼如下所示。

        01  <html>                    <!---------HTML文檔開始----- --------------->
        02       <head>                <!---------文檔頭開始------ -------------------->
        03           <title>          <!---------標題開始------ ----------------------->
        04           </title>         <!---------標題結束------ ----------------------->
        05       </head>               <!---------文檔頭結束------- ------------------->
        06       <body>                <!---------文檔體開始------- ------------------->
        07           <input type="button" value="按鈕" onclick="alert('嵌入在HTML標簽中的
                    JavaScript程序');"/>
        08       </body>               <!---------文檔體結束------- ------------------->
        09  </html>                   <!---------HTML文檔結束----- --------------->

第三種方式是將JavaScript程序以外部文件的形式鏈接到當前HTML文檔中，本書不使用這種方式，限于篇幅在此不作講解，讀者可以查閱相關資料。

1.3.2 選擇JavaScript編輯器

JavaScript源程序是文本文件，因此可以使用任何文本編輯器來編寫程序源代碼，例如Windows操作系統里的“記事本”程序。為了更快速地編寫程序并且降低出錯的幾率，通常會選擇一些專業的代碼編輯工具。專業的代碼編輯器有代碼提示和自動完成功能，筆者推薦使用Aptana Studio，它是一款很不錯的JavaScript代碼編輯器，其安裝初始界面如圖1-3所示。

圖1-3 開始安裝Aptana Studio

安裝完畢后運行Aptana Studio，即可進入程序的主界面，如圖1-4所示，使用Aptana Studio可以快速編寫JavaScript程序。如果使用的是Firefox瀏覽器，還可以在該軟件中調試JavaScript程序。

圖1-4 Aptana Studio主界面

1.3.3 編寫“Hello World”程序

下面正式開始編寫Hello World程序，推薦使用記事本或上一節介紹的Aptana IDE。為簡單起見，這里使用記事本編寫程序。

【范例1-1】編寫并運行最經典的入門程序，輸出“Hello World!”。打開記事本，輸入如示例代碼1-1所示的代碼并將文件另存為網頁文件“helloworld.htm”。

示例代碼1-1

        01  <html>                    <!---------HTML文檔開始----------- --------->
        02  <body>                    <!---------文檔體開始------------ -------------->
        03  <script language="JavaScript">
                                      <!---------腳本程序------------ ----------------->
        04       document.write("Hello World!");    // 輸出經典的Hello World
        05  </script>                 <!---------腳本結束----------- ------------------>
        06  </body>                   <!---------文檔體結束------------ -------------->
        07  </html>                   <!---------HTML文檔結束------------- ------->

【運行結果】雙擊網頁文件運行程序，其結果如圖1-5所示。

圖1-5 Hello World程序的運行結果

【代碼解析】第4行是JavaScript程序代碼，第3、5行是標準HTML標簽，該標簽用于在HTML文檔中插入腳本程序。其中的“language”屬性指明了“<script>”標簽對間的代碼是JavaScript程序。第4行調用document對象的write方法將字符串“Hello World！”輸出到HTML文本流中。

1.3.4 瀏覽器對JavaScript的支持

在互聯網發展的過程中，幾大主要瀏覽器之間也存在激烈的競爭。JavaScript是Netscape公司的技術，其他瀏覽器并不能和Navigator一樣良好地支持JavaScript，因為得不到使用許可。微軟公司為能使其IE瀏覽器能搶占一定市場份額，于是在IE中實現了稱為JScript的腳本語言，其兼容JavaScript，但是和JavaScript間仍然存在版本差異。因此，編程人員在編碼時仍然須考慮不同瀏覽器間的差別。

為能使JavaScript腳本語言標準化，Netscape、微軟等公司和其他一些團體打算建立一個語言標準。1997年發表了第一套腳本語言規范，即ECMA-262。新語言規范下的JavaScript命名為ECMAScript，因為“JavaScript”這名字也存在許可的問題。現在的瀏覽器都以ECMAScript為規范，這樣可以大大減少編程人員的負擔，不過差別總還是存在的，因此編程時還得引起注意，現舉例如何查詢當前正在使用的瀏覽器類型。

【范例1-2】檢測當前瀏覽器的信息，輸出瀏覽器的名稱、版本號、發行代號，如示例代碼1-2所示。

示例代碼1-2

        01  <script language="JavaScript">                      // 程序開始
        02    document.write("名稱：" + navigator.appName+"<br>");// 瀏覽器名稱
        03    document.write("版本號：" + navigator.appVersion+"<br>");
                                                                // 瀏覽器版本號
        04    document.write("發行代號："+navigator.appCodeName+"<br>");
                                                                // 瀏覽器的內部發行代號
        05  </script>                                           // 程序結束

【運行結果】在瀏覽器中打開網頁文件運行程序，其結果如圖1-6所示。

圖1-6 瀏覽器信息

【代碼解析】該示例讀取navigator對象的相關屬性以取得當前瀏覽器的信息。第2行讀取appName取得瀏覽器名稱，第3、4行分別取得版本號和發行代號。

1.4 注意事項

JavaScript程序的書寫有些許需要注意的地方，如大小寫敏感、單行和多行、分號的運用等。初學者在編寫程序時通常會觸犯這些規則，應該盡力避免。用戶自定義的標識符不能與語言保留的關鍵字同名，通過使用一些專業的編輯器可以幫助消除語法錯誤。

1.4.1 大小寫敏感

JavaScript代碼是大小寫敏感的，Name和name是不同的標識符，編碼時應當予以注意。同一個詞如果各個字母間大小寫不同，系統將當做不同的標識符來處理，相互之間沒有任何聯系。現舉例說明，代碼如下所示。

        01  Name = "sunsir";                   // 大寫字母開頭
        02  name = "foxsir";                   // 小寫字母開頭

此時Name的值仍然是“sunsir”，對name進行操作并不影響到變量Name，它們是不同的變量，因為在JavaScript中所有的代碼都區分大小寫。

1.4.2 注意空格與換行

代碼中多余的空格會被忽略，同一個標識符的所有字母必須連續。一行代碼可以分成多行書寫，例如以下代碼的書寫都正確。單行書寫如下：

        if(1==1 && 6>3 ){alert("return true");}else{alert( "return false" );}
                                                  // 代碼寫于一行中，用分號作為語句結束標志分成多行、規范的書寫如下：
        01  if( 1==1 && 6>3 )                      // 如果1等于1，且6大于3，則
        02  {
        03       alert("return true" );             // 輸出“true”
        04  }
        05  else                                   // 否則
        06  {
        07       alert( "return false" );           // 輸出“false”
        08  }

也可以在代碼中的標識符間任意添加空格，多余的空格會被忽略，例如以下代碼效果與上述代碼完全一樣。

        01  if   (           1                     // 一個語句分多行書寫
        02  ==1                                    // 將一行代碼分成多行
        03  && 6>         3                        // 將一行代碼分成多行
        04  )                                      // 將一行代碼分成多行
        05  { alert(                               // 將一行代碼分成多行
        06  "return true"); }else                  // 將一行代碼分成多行
        07  {                                      // 將一行代碼分成多行
        08       alert( "return false" );           // 將一行代碼分成多行
        09  }                                      // 將一行代碼分成多行

雖然代碼可以分成任意多行去寫，但是對于字符串卻不一樣。要將一個字符串分成多行，須將每一行作為一個單獨的字符串，再使用“+”運行符將位于不同行的字符串連接起來。代碼如下所示。

        01  var Message = "JavaScript編程，簡單，有趣！";     // 單行中的字符串
        02  var message = "JavaScript編程，" +              // 多行中的字符串
        03               "簡單，有趣！";

1.4.3 分號可有可無

JavaScript程序可以使用分號作為一個語句的結束標志，分號之后是新語句的開始。這樣可以將多個語句放在一行中，該特性在一些場合中非常有用，比如將JavaScript程序寫在一個字符串中以構造函數對象。當一行只有一個程序語句時，結尾可以不使用分號。反之，當不使用分號時，一行被認為是一個程序語句，代碼如下所示。

        01  <script language="JavaScript">                      // 腳本開始
        02       var name = "Sunsir"                             // 名字
        03       var age = 25                                    // 年齡
        04       alert( "Sunsir's age:" + age )                  // 輸出信息
        05  </script>                                           // 腳本結束

1.5 小結

本章向讀者介紹了JavaScript語言產生的背景、發展的過程及如何使用。現行的JavaScript是以ECMAScript為語言標準的，常見的瀏覽器基本上都實現了ECMA-262語言規范。對于不同瀏覽器間的一些微小的差別讀者仍需要注意，可以在程序中判斷當前瀏覽器并編寫與之適應的代碼。JavaScript程序以文本的形式嵌入或鏈接到HTML文檔中，其代碼標識符大小寫敏感。一個程序語句可以分成多行書寫，可以使用分號作為一個語句的結束。如果讀者對本章內容還有什么疑問，可以參考《JavaScript實例自學手冊：通過486個例子掌握Web開發捷徑》（電子工業出版社，吳雪）和《完全手冊：HTML+CSS+JavaScript實用詳解》（電子工業出版社，葉青）等書籍。

1.6 習題

一、常見面試題

1.簡述Java與JavaScript的區別。

【解析】本題考核應聘者對于兩種語言的了解。其實JavaScript和Java沒有任何關系（除了名字）JavaScript的命名是為了沾Java的光，還仿照了一些Java的結構語法。JavaScript是瀏覽器的腳本語言，Java是編寫應用程序的高級語言。

2.什么是腳本語言。

【解析】本題主要考查的是對腳本語言和高級語言的認識。腳本語言是一種應用程序擴展語言，用于系統的擴展，使其按用戶的意愿去運行。所有的基礎功能由系統提供，腳本語言在更高層次描述如何調用系統的接口。和其他編程語言不同，腳本語言通常不需要經歷編譯和鏈接這些階段，大都直接解釋執行。

二、簡答題

1.簡述JavaScript的發展史，以及它的未來。

2.簡述JavaScript語言的一些特點。

三、綜合練習

1.編寫程序，在瀏覽器中顯示用戶的名字。

【提示】對Hello World程序稍加修改即可實現，差別只是輸出不同的字符串。參考代碼如下：

        01  <script language="JavaScript">                      // 腳本開始
        02       name = "Sunsir";                                // 名字
        03       document.write( name );                         // 在瀏覽器中輸出
        04  </script>                                           // 腳本結束

【運行結果】打開網頁運行程序，結果如圖1-7所示。

圖1-7 輸出字符串

2.檢測當前運行程序所用的瀏覽器，輸出瀏覽器的程序名。

【提示】模仿范例1-2，讀取navigator對象的appName屬性的值，所得數據即為瀏覽器的程序名，參考代碼如下：

        01  <script language="JavaScript">                      // 程序開始
        02       document.write( navigator.appName );            // 在瀏覽器中輸出
        03  </script>                                           // 程序結果

【運行結果】打開網頁運行程序，結果如圖1-8所示。

圖1-8 輸出瀏覽器名稱

四、編程題

1.寫一個簡單的“Hello World”程序并運行。

【提示】可以參照1.3.3節進行。

2.計算兩個數相加，并將結果輸出。

【提示】可以定義三個變量，兩個作為加數，一個作為總數。