第1章
步入JavaScript編程世界——JavaScript初探

◎本章教學微視頻：13個　34分鐘

學習指引

JavaScript是互聯網上最流行的腳本語言，這門語言可用于HTML和Web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。本章將詳細介紹JavaScript的相關基礎知識，主要內容包括JavaScript概述、JavaScript應用初體驗、網頁中的JavaScript等。

重點導讀

• 了解JavaScript。
• 掌握JavaScript應用初體驗。
• 掌握網頁中執行JavaScript的方法。
• 掌握JavaScript清新體驗的實例。

1.1　JavaScript概述

JavaScript是一種由Netscape公司的LiveScript發展而來的面向過程的客戶端腳本語言，為客戶提供更流暢的瀏覽效果。另外，由于Windows操作系統對其擁有較為完善的支持，并提供二次開發的接口來訪問操作系統中各個組件，從而可實現相應的管理功能。

1.1.1　JavaScript能做什么

JavaScript是一種解釋性的、基于對象的腳本語言（Object-based Scripting Language），其主要是基于客戶端運行的，用戶單擊帶有JavaScript腳本的網頁，網頁里的JavaScript就會被傳到瀏覽器，由瀏覽器對此做處理。如下拉菜單、驗證表單有效性等大量互動性功能，都是在客戶端完成的，不需要和Web 服務器進行任何數據交換。因此，不會增加Web 服務器的負擔。幾乎所有瀏覽器都支持JavaScript，如Internet Explorer（IE）、Firefox、Netscape、Mozilla、Opera等。

在互聯網上可看到很多應用了JavaScript的實例，下面介紹一些JavaScript的典型應用。

• 改善導航功能。JavaScript最常見的應用就是網站導航系統，可以使用JavaScript創建一個導航工具。如用于選擇下一個頁面的下拉菜單，或者當鼠標移動到某導航鏈接上時所彈出的子菜單。只要正確應用，此類JavaScript交互功能就能使瀏覽網站更方便，而且該功能在不支持JavaScript的瀏覽器上也是可以使用的。
• 驗證表單。驗證表單是JavaScript一個比較常用的功能。使用一個簡單腳本就可以讀取用戶在表單中輸入的信息，并確保輸入格式的正確性，如要保證輸入的是電話號碼或者是電子郵箱。該項功能可提醒用戶注意一些常見的錯誤并加以改正，而不必等待服務器的響應。
• 特殊效果。JavaScript一個最早的應用就是創建引人注目的特殊效果，如在瀏覽器狀態行顯示滾動的信息，或者讓網頁背景顏色閃爍。
• 遠程腳本技術（Ajax）。長期以來，JavaScript最大的限制是不能和Web服務器進行通信，如可以用JavaScript確保電話號碼的位數正確，但不能利用電話號碼來查找用戶在數據庫中的位置。

綜上所述，JavaScript是一種新的描述語言，它可以被嵌入到HTML文件中。JavaScript可以做到回應使用者的需求事件（如form的輸入），而不用任何網絡來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過傳給服務器端處理再傳回來的過程，而直接可以被客戶端的應用程序所處理。

1.1.2　JavaScript與Java的關系

Java是SUN公司推出的新一代面向對象的程序設計語言，特別適合于Internet應用程序開發；而JavaScript則是Netscape公司的產品，是為了擴展Netscape Navigator功能而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言。Java的前身是Oak，而JavaScript的前身則是LiveScript。

下面對兩種語言間的異同做如下比較。

• 基于對象和面向對象。Java是一種真正的面向對象的語言，即使是開發簡單的程序，也必須設計對象。而JavaScript是一種腳本語言，它可以用來制作與網絡無關的、與用戶交互作用的復雜軟件。它是一種基于對象（Object Based）和事件驅動（Event Driver）的編程語言，因而本身提供了非常豐富的內部對象供設計人員使用。
• 解釋和編譯。兩種語言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶端執行之前，必須經過編譯，因而客戶端上必須具有相應平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言，其源代碼在發往客戶端執行之前不需要經過編譯，而是將文本格式的字符代碼發送給客戶端由瀏覽器解釋執行。
• 強變量和弱變量。兩種語言所采取的變量是不一樣的。Java采用強類型變量，即所有變量在編譯之前必須聲明。JavaScript中的變量聲明采用弱類型，即變量在使用前不需要事先聲明，而是解釋器在運行時檢查其數據類型。
• 代碼格式。Java的代碼是一種與HTML無關的格式，必須通過像HTML中引用外媒體那樣進行裝載，其代碼以字節代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式，可直接嵌入HTML文檔并可動態裝載，編寫HTML文檔就像編輯文本文件一樣方便。
• 嵌入方式不一樣。在HTML文檔中，兩種編程語言的標識不同。JavaScript使用<script>和</script>標簽對來標識，而Java使用<applet>和</applet>標簽對來標識。
• 靜態聯編和動態聯編。Java采用靜態聯編，即Java的對象引用必須在編譯時進行，以使編譯器能夠實現強類型檢查。而JavaScript采用動態聯編，即JavaScript的對象引用在運行時進行檢查，如不經編譯則無法實現對象引用的檢查。

1.1.3　JavaScript的基本特點

JavaScript的主要作用是與HTML、Java 腳本語言（Java小程序）一起實現在一個Web頁面中連接多個對象、與Web客戶端交互作用，從而可以開發客戶端的應用程序等。它是通過嵌入或調入到標準的HTML中實現的。它彌補了HTML的缺陷，是Java與HTML折中的選擇，具有如下基本特點。

• 腳本編寫語言。JavaScript是一種采用小程序段方式來實現編程的腳本語言。同其他腳本語言一樣，JavaScript是一種解釋性語言，在程序運行過程中被逐行地解釋。此外，它還可與HTML標識結合在一起，從而方便用戶的使用。
• 基于對象的語言。JavaScript是一種基于對象的語言，同時可以看作一種面向對象的語言。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。
• 簡單性。JavaScript的簡單性主要體現在：首先，它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計，從而對于學習Java是一種非常好的過渡；其次，它的變量類型是采用弱類型，并未使用嚴格的數據類型。
• 安全性。JavaScript是一種安全性語言。它不允許訪問本地硬盤，并不能將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據丟失。
• 動態性。JavaScript是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它采用以事件驅動的方式對用戶的反映做出響應。
• 跨平臺性。JavaScript依賴于瀏覽器本身，與操作環境無關。只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執行。

1.2　JavaScript應用初體驗

JavaScript是一種腳本語言，需要瀏覽器進行解釋和執行。下面通過一個簡單的例子來體驗一下JavaScript腳本程序語言。創建一個HTML文件，示例如下。

【例1-1】實例文件：ch01\Chap1.1.html）Hello World的顯示。

將此文件保存為Chap1.1.html文件。使用Microsoft公司的Internet Explorer（IE）瀏覽器打開這個文件之后，會顯示如圖1-1所示的顯示效果。

1.2.1　瀏覽器之爭

在1995年JavaScript 1.0發布時，Netscape公司的Navigator統治著瀏覽器市場。隨著Microsoft公司的加入，瀏覽器市場的競爭變得激烈起來。1996年二者的第三個版本的瀏覽器都不同程度地支持JavaScript 1.1版本。在1997年，兩家公司都發布了各自瀏覽器的第四個版本，擴展了DOM（文檔對象模型），使得JavaScript的功能大大增強。但是各自的DOM卻不兼容，帶來了后續的發展問題。而隨著Windows操作系統的普及，Microsoft公司的Internet Explorer逐漸取得了壓倒性的優勢，乃至今天Netscape公司的Navigator已經逐漸消失在人們的視線中。

除了Microsoft公司的Internet Explorer，后來逐漸發展起來了更多的瀏覽器客戶端，如Mozilla公司的Firefox、Google公司的Chrome、Apple公司的Safari以及Opera等。伴隨著Google公司的強勁發展，Chrome也得到了快速的發展。Microsoft公司的Internet Explorer瀏覽器也漸漸地被后起之秀Chrome超越。而成就Chrome大業的就是它對JavaScript的良好支持以及快速執行能力。

其實對于上述例子，如果使用Chrome打開的話，會出現如圖1-2所示的顯示效果。而在Firefox瀏覽器中，顯示的是另一番效果，如圖1-3所示。

除了在桌面終端的競爭之外，各個瀏覽器在智能終端領域也是你爭我搶，競爭日趨激烈。眾多的瀏覽器給了客戶更多的選擇余地，同時，各個瀏覽器對JavaScript以及DOM的標準支持的不一致，也使得開發者在創建應用程序的時候，需要根據不同的瀏覽器做出不同的反應，增加了開發、測試和維護成本，也使得瀏覽器對標準的嚴格遵從成了一種發展趨勢。

1.2.2　DHTML

DHTML的全稱是Dynamic HTML，就是動態的HTML。DHTML是相對傳統的靜態的HTML而言的一種制作網頁的概念。嚴格地說，其實它并不是新的語言，而是由HTML、CSS和JavaScript這三種技術集成的產物。

DHTML不是一種技術、標準或規范，只是將目前已有的網頁技術、語言標準的整合運用。它利用HTML把網頁標簽為各種元素；利用CSS設計各有關元素的排版樣式；利用JavaScript實時地操控和改變各有關樣式。

1.2.3　探討瀏覽器之間的沖突

由于各個瀏覽器對DOM支持的不一致性，導致了相同的代碼在不同瀏覽器下不能執行的局面。程序員在編寫DOM代碼時，為了對應多個瀏覽器，需要判斷它們的運行環境，根據環境的差別編寫代碼。雖然DOM帶來了便利，但是瀏覽器之間的沖突也給開發者帶來了磨難。

1.2.4　標準的制定

為了解決各個瀏覽器對DOM實現的不一致性，W3C推出了標準化的DOM，而相競爭的瀏覽器廠商如Microsoft、Netscape公司以及其他瀏覽器制造商也攜手參與制定，于1998年推出了DOM 1。

DOM 1由兩部分組成，分別是DOM核心與DOM HTML。其中，DOM核心負責映射以XML為基礎的文檔結構，允許獲取和操作文檔；DOM HTML通過HTML專用的對象與函數對DOM核心進行了擴展。標準的制定，一定程度上改善了瀏覽器之間的競爭，同時也催生了更多瀏覽器的產生。

1.3　網頁中的JavaScript

在網頁中添加JavaScript代碼，需要使用標簽來標識腳本代碼的開始和結束。該標簽就是<script>，它告訴瀏覽器，在<script>標簽和</script>標簽之間的文本塊并不是要顯示的網頁內容，而是需要處理的腳本代碼。

1.3.1　執行代碼

在網頁中執行JavaScript代碼可以分為以下幾種情況，分別是在網頁頭中執行、在網頁中執行、在網頁的元素事件中執行JavaScript代碼，在網頁中調用已經存在的JavaScript文件，以及通過JavaScript偽URL引入JavaScript腳本代碼。

1．在網頁頭中執行JavaScript代碼

如果不是通過JavaScript腳本生成HTML網頁的內容，JavaScript腳本一般放在HTML網頁的頭部的<head>與</head>標簽對之間。這樣，不會因為JavaScript影響整個網頁的顯示結果。執行JavaScript的格式如下：

在<script>與</script>標簽對中添加相應的JavaScript腳本，這樣就可以直接在HTML文件中調用JavaScript代碼，以實現相應的效果。

2．在網頁中執行JavaScript代碼

當需要使用JavaScript腳本生成HTML網頁內容時，如某些JavaScript實現的動態樹，就需要把JavaScript放在HTML網頁主題部分的<body>與</body>標簽對中。執行JavaScript的格式如下：

另外，JavaScript代碼可以在同一個HTML網頁的頭部與主題部分同時嵌入，并且在同一個網頁中可以多次嵌入JavaScript代碼。

3．在網頁的元素事件中執行JavaScript代碼

在開發Web應用程序的過程中，開發者可以給HTML文檔設置不同的事件處理器，一般是設置某HTML元素的屬性來引用一個腳本，如可以是一個簡單的動作，該屬性一般以on開頭，如按下鼠標事件OnClick()等。這樣，當需要對HTML網頁中的該元素進行事件處理（驗證用戶輸入的值是否有效）時，如果事件處理的JavaScript代碼量較少，就可以直接在對應的HTML網頁的元素事件中嵌入JavaScript代碼。

4．在網頁中調用已經存在的JavaScript文件

如果JavaScript的內容較長，或者多個HTML網頁中都調用相同的JavaScript程序，可以將較長的JavaScript或者通用的JavaScript寫成獨立的JavaScript文件，直接在HTML網頁中調用。執行JavaScript代碼的格式如下：

5．通過JavaScript偽URL引入JavaScript腳本代碼

在多數支持JavaScript腳本的瀏覽器中，可以通過JavaScript偽URL地址調用語句來引入JavaScript腳本代碼。偽URL地址的一般格式為：

由上可知，偽URL地址語句一般以JavaScript開始，后面就是要執行的操作。

1.3.2　函數

函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。在代碼中，函數就是包含在花括號中的代碼塊，前面使用了關鍵詞function。格式如下：

當調用該函數時，會執行函數內的代碼，可以在某事件發生時直接調用函數（如當用戶單擊按鈕時），并且可由JavaScript在任何位置進行調用。

注意：JavaScript對大小寫敏感，關鍵詞function必須是小寫的，并且必須以與函數名稱相同的大小寫來調用函數。

1.3.3　對象

JavaScript對象是擁有屬性和方法的數據。在JavaScript中，對象是非常重要的，當你理解了對象，就可以了解JavaScript。對象也是一個變量，但對象可以包含多個值或多個變量。

例如下面一段代碼：

其中，3個值（"Fiat"、500、"white"）賦予變量car。3個變量（type、model、color）也賦予變量car。

另外，JavaScript對象可以使用字符來定義和創建，例如下面一段代碼，就是創建了一個人對象，包括姓名、年齡等屬性。

1.3.4　JavaScript編碼規范

JavaScript編碼規范包括以下幾個方面，分別是文件組織規范、格式化規范、命名規范、注釋規范和其他編碼規范。

1．文件組織規范

• 所有的JavaScript文件都要放在項目公共的script文件夾下。
• 使用的第三方庫文件放置在script/lib文件夾下。
• 可以復用的自定義模塊放置在script/commons文件夾下，復用模塊如果涉及多個子文件，需要單獨建立模塊文件夾。
• 單獨頁面模塊使用的JavaScript文件放置在script/{module_name}文件夾下。
• 項目模擬的JSON數據放置在script/json文件夾下，按照頁面單獨建立子文件夾。
• JavaScript應用MVC框架時，使用的模板文件放置在script/templates文件夾下，按照頁面單獨建立子文件夾。

2．格式化規范

• 始終使用var定義變量，例如：

• 始終使用分號結束一行聲明語句。
• 對于數組和對象不要使用多余的“,”（兼容IE），例如：

• 定義頂級命名空間，如inBike，在頂級命名空間下自定義私有命名空間，根據模塊分級。
• 所有的模塊代碼放在匿名自調用函數中，通過給window對象下的自定義命名空間賦值暴露出來，例如：

• 綁定事件代碼需要放置在準備好的文檔對象模型函數中執行，例如：

• 將自定義模塊方法放置在對象中，方法名緊挨“:”，“:”與function之間空一格，function()與后面的“{”之間空一格，例如：

• 字符串使用單引號，例如：

• 所用的變量使用之前需要定義，定義之后立即初始化，例如：

• 使用瀏覽器Console工具之前先要判斷是否支持，例如：

3．命名規范

• 使用駝峰法命名變量和方法名，首字母使用小寫；對于類名，首字母大寫，例如：

• 使用$name命名jQuery對象，原生dom元素使用dom開頭，對象中私有變量以下畫線開頭，例如：

4．注釋規范

• 多使用單行注釋表明邏輯塊的意義，例如：

• 指明類的構造方法，例如：

• 標注枚舉常量的類型和意義，例如：

• 使用注釋標識方法或者變量的可見性，方便靜態檢查，例如：

5．其他編碼規范

• 避免使用eval。
• 對于對象避免使用with，對于數組避免使用for…in。
• 謹慎使用閉包，避免循環引用。
• 警惕this所處的上下文，例如：

• 盡量使用短碼，如三目運算符、邏輯開關、自增運算等，例如：

• 不要在塊級作用域中使用function，例如：

• 在父節點上綁定事件監聽，根據事件源分別響應。
• 對于復雜的頁面模塊使用依賴管理庫，如SeaJS、RequireJS、MVC框架Backbone、Knockout、Stapes等。

1.4　JavaScript清新體驗

通過上面的介紹，相信大家對JavaScript有了大概的認識，下面通過兩個實際的例子來體驗一下JavaScript在網頁中的整體效果。

1.4.1　案例1——定時打開窗口

定時打開新窗口，通過JavaScript操作BOM對象，打開一個新窗口。有關詳細的JavaScript以及BOM、DOM對象的介紹請參考后面的章節，這里不做過于詳細的解釋，目的是給大家一個初步的印象，看看JavaScript是怎么和HTML、BOM、DOM交互操作的。相關的示例請參考Chap1.2.html文件。

【例1-2】（實例文件：ch01\Chap1.2.html）定時打開窗口。

主要功能實現是通過網頁在裝載的時候，調用openWindow()來實現打開新窗口，如圖1-4所示。

1.4.2　案例2——日期選擇器

日期選擇器在網頁中經常出現，主要用于日期的方便選擇，取代手工輸入。實現的代碼稍微有些長，功能雖然單一，但是卻用到了很多JavaScript技術。日期選擇器一般包括年份選擇、月份選擇；要能夠根據相應的月份顯示對應月份的日期和星期幾；對于相應的日期，要能夠通過相應的單擊操作，以便最后的選擇日期能顯示在想要的位置，如文本框中。

【例1-3】（實例文件：ch01\Chap1.3.html）日期選擇器。

相關的示例請參考Chap1.3.html文件。在IE瀏覽器里面運行的結果如圖1-5所示。

對于上述兩個例子，大家看了之后會對JavaScript有個初步的印象。

1.5　就業面試技巧與解析

1.5.1　面試技巧與解析（一）

面試官：有些程序員認為JavaScript是Java的變種。你如何看待這個問題？

應聘者：就我個人理解來說，JavaScript不是Java的變種。雖然，JavaScript最初的確是受Java啟發而開始設計的，而且設計的目的之一就是“看上去像Java”，因此語法上有很多類似之處，許多名稱和命名規范也借自Java。但實際上，JavaScript的主要設計原則源自Self和Scheme，它與Java本質上是不同的。它與Java名稱上的近似，是當時開發公司為了營銷考慮與SUN公司達成協議的結果。其實，從本質上講，JavaScript更像是一門函數式編程語言，而非面向對象的語言，它使用一些智能的語法和語義來仿真高度復雜的行為，對象模型極為靈活、開放和強大。

1.5.2　面試技巧與解析（二）

面試官：你認為什么是腳本語言？

應聘者：就我個人理解來說，腳本語言是由傳統編程語言簡化而來的語言，它與傳統編程語言有很多相似之處，也有不同之處。腳本語言的最顯著特點是：①它不需要編譯成二進制，以文本的形式存在。②腳本語言一般都需要其他語言的調用執行，不能獨立運行。