首頁 > 開發者 > JavaScript
從大學開始學習網頁製作就開始接觸到JavaScript，一直到現在只是感覺JavaScript就是一個簡單的指令碼語言，而且大多我們用的JavaScript都只是一些很簡單的應用背景，後來在查閱一些資料的時候，才感覺我們走了很多彎路，也許很多時候只需要簡短的JavaScript代碼就能夠實現的東西，我們卻一直找不到解決方案。【JavaScript學習系列】主要詳細記錄自己的JavaScript學習路程，如果有同道中人，如果有希望儘早學習JavaScript的都可以從這一系列教材找到自己要的答案。
本章先預熱一下，主要介紹：
【JavaScript學習系列】(1)——JavaScript語言概述JavaScript是目前Web應用程式開發人員使用最為廣泛的用戶端指令碼程式設計語言，它不僅可以用來開發互動Web頁面，更重要的是它將HTML、XML和Java applet、Flash等功能強大的Web對象有機結合起來，是開發人員能快捷產生Internet或Intranet上使用的分布式應用程式。
一、JavaScript是什麼應用程式開發人員在學習一門新語言之前，興趣肯定聚焦在諸如“它是什嗎？”、“它能夠做什嗎？”等問題，而不是“如何開發？”等問題上面，所以我們首先介紹一下：JavaScript是什麼玩意。
1.1 JavaScript的特點JavaScript是一種基於對象和事件驅動並具有相對安全性的用戶端指令碼語言，主要用於建立具有互動性較強的動態網頁面，主要具有如下特點：
1、基於對象：JavaScript能通過DOM(文檔結構模型)及自身提供的對象及操作方法來實現所需的功能。
2、事件驅動：JavaScript採用事件驅動方式，能響應鍵盤事件、滑鼠事件及瀏覽器視窗事件等，並執行指定的操作。
3、解釋性語言：JavaScript無須專門編譯器編譯，而是嵌入JavaScript指令碼的HTML文檔載入時被瀏覽器逐行的解釋，大量節省用戶端與伺服器端進行資料互動的時間。
4、即時性：JavaScript無須經伺服器就可以直接對用戶端的事件做出響應，並用處理結果即時更新目標頁面。
5、動態性：JavaScript提供簡單高效的語言流程，靈活處理對象的各種方法和屬性，同時及時響應文檔頁面事件，實現頁面的互動性和動態性。
6、跨平台：JavaScript指令碼的正確運行依賴於瀏覽器，而與具體的作業系統無關。只要用戶端裝有支援JavaScript指令碼的瀏覽器，JavaScript指令碼運行結果就能正確反映在用戶端瀏覽器平台上。
7、開發使用簡單：JavaScript基本結構類似C語言，採用小程式段的方式編程，並提供了簡易的開發平台和便捷的開發流程，就可以嵌入到HTML文檔中供瀏覽器解釋執行，同時JavaScript的變數類型是弱類型，使用不嚴格。
8、相對安全性：JavaScript是用戶端指令碼，通過瀏覽器解釋執行。它不允許訪問本地的硬碟，並且不能將資料存入到伺服器上，不允許對網路文檔進行修改和刪除，只能通過瀏覽器實現資訊瀏覽或動態互動，從而有效地防止資料的丟失。
綜上所述，JavaScript是一種有較強生命力和發展潛力的指令碼描述語言，它可以被直接嵌入到HTML文檔中，供瀏覽器解釋執行，直接相應用戶端事件，如：驗證資料表單合法性，並調用相應的處理方法，迅速返回處理結果並更新頁面，實現Web互動性和動態要求，同時將大部分工作交給用戶端處理，將Web伺服器的資源消耗降到最低。
1.2 JavaScript能做什麼JavaScript指令碼由於其效率高、功能強大等特點，在表單資料合法性驗證、網頁特效、互動式菜單、動態網頁面、數值計算等方面都獲得廣泛的應用，甚至出現了完全使用JavaScript編寫的基於Web瀏覽器的類UNIX作業系統JS/UNIX和無須安裝即可使用的中文IME程式JustInput，可見JavaScript指令碼編程能力不容小視！下面介紹JavaScript的常用功能：
1、表單資料合法性驗證
使用JavaScript指令碼語言能有效驗證用戶端提交的表單上資料的合法性，如資料合法則執行下一步操作，否則返回錯誤提示資訊。
2、網頁特效
使用JavaScript指令碼語言，結合DOM和CSS能建立絢麗多彩的網頁特效，如火焰狀閃爍文字、文字圍繞游標旋轉等。
3、互動式菜單
使用JavaScript指令碼可以建立具有動態效果的互動式菜單，完全可以與Flash製作的頁面導覽功能表相媲美。
4、動態網頁面
使用JavaScript指令碼可以對Web頁面的所有元素對象進行訪問並使用對象的方法訪問並修改其屬性實現動態網頁面效果，其典型應用如網頁版俄羅斯方塊、撲克牌遊戲等。
5、數值計算
JavaScript指令碼將資料類型作為對象，並提供豐富的操作方法使得JavaScript用於數值計算。
二、JavaScript編程起步JavaScript指令碼已經成為Web應用程式開發的一門炙手可熱的語言，成為用戶端指令碼的首選，網路上充斥著形態各異的JavaScript指令碼實現不同的功能，但是使用者也許並不瞭解JavaScript指令碼是如何被瀏覽器中解釋執行，更不知如何開始編寫自己的JavaScript指令碼來實現自己想要實現的效果。本節將學習JavaScript指令碼語言編程的基本知識。
2.1 "Hello World"程式任何一門新型語言的學習，都開始於"Hello World"，JavaScript也不例外。代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>Hello World</title><br /></head></p><p><body><br /><br /><br /><center><br /><script language="javascript"type="text/javascript"><br />document.write("Hello World!");<br /></script><br /></center><br /></body><br /></html><br />
儲存為Helloworld.html，直接點擊後可以查看到頁面顯示Hello World!資訊。
2.2 JavaScript指令碼編程步驟JavaScript指令碼編程一般分為如下步驟：
1、選擇JavaScript指令碼語言編輯器編輯指令碼代碼；
2、嵌入該JavaScript指令碼代碼到HTML文檔中；
3、選擇支援JavaScript指令碼的瀏覽器瀏覽該HTML文檔；
4、如果錯誤則檢查並修正原始碼，重新瀏覽，此過程重複直至代碼正確為止；
5、處理不支援JavaScript指令碼的情況。
由於JavaScript指令碼代碼是嵌入到HTML文檔中被瀏覽器解釋執行，所以開發JavaScript指令碼代碼並不需要特殊的編程環境，只需要普通的文字編輯器和支援JavaScript指令碼的瀏覽器即可，那麼又如何選擇JavaScript指令碼編輯器呢？
2.3 選擇JavaScript指令碼編輯器編寫JavaScript指令碼代碼可以選擇普通的文字編輯器，如Windows Notepad、UltraEdit等，只要所選編輯器能將所編輯的代碼最終儲存為HTML文件類型(.html、htm等)即可。
雖然Dreamweaver、Microsoft FrontPage等專業網頁開發工具套件內部整合了JavaScript指令碼的開發環境，但筆者依然建議JavaScript指令碼程式開發人員在起步階段使用最基本的文字編輯器，如Notepad、UltraEdit等進行開發，以便把注意力放在JavaScript指令碼語言而不是開發環境上。
同時，如果指令碼代碼出現錯誤，可用該編輯器開啟源檔案(.html、.htm或.js)修改後儲存，並重新使用瀏覽器瀏覽，重複此過程直到沒有錯誤出現為止。
2.4 引入JavaScript指令碼代碼到HTML文檔中將JavaScript指令碼嵌入到HTML文檔中有4中標準方法：
1、程式碼封裝含於<script>和</script>標記對，然後嵌入到HTML文檔中；
2、通過<script>標記的src屬性連結外部的JavaScript指令檔；
3、通過JavaScript偽URL地址引入；
4、通過HTML文檔時間處理常式引入；
下面分別介紹JavaScript指令碼的幾種標準引入方法：
【1】通過<script>和</script>標記對引入
在前面的原始碼中，除了<script>和</script>標記對之間的內容外，都是最基本的HTML代碼，可見<script>和</script>標記對將JavaScript指令碼代碼封裝到HTML文檔中：
document.write("Hello World!");
瀏覽器載入嵌有JavaScript指令碼的HTML文檔時，能自動識別JavaScript指令碼代碼起始標記<script>和結果標記</script>，並將其間的代碼按照解釋JavaScript指令碼代碼的方法加以解釋，然後將解釋結果返回HTML文檔並在瀏覽器視窗顯示。
我們再來看看下面的代碼：
<script language="javascript"type="text/javascript"><br />document.write("Hello World!");<br /></script>
首先，<script>和</script>標記對將JavaScript指令碼代碼封裝，同時告訴瀏覽器期間的代碼為JavaScript指令碼代碼，然後調用document文檔對象的write()方法寫字串到HTML文檔中。
下面重點介紹<script>標記的幾個屬性：
【2】通過<script>標記的src屬性引入
將HTML文檔中的<script></script>修改為：
<script language="javascript"type="text/javascript"src="1.js"></script>
同時在文字編輯器中編輯如下代碼並將其儲存為1.js:
document.write("Hello World!");
運行修改後的頁面時，結果跟前面相同，同樣的輸出Hello World!
【3】通過JavaScript偽URL引入
在多數支援JavaScript指令碼的瀏覽器中，可以通過JavaScript偽URL地址調用語句來引入JavaScript指令碼代碼。偽URL地址的一般格式如下：
JavaScript:alert("Hello World!")
一般以"javascript:"開始，後面緊跟要執行的操作。下面的代碼示範如何使用偽URL地址來引入JavaScript代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>JavaScript偽URL引入</title><br /></head></p><p><body><br /><br /><br /><center><br /><form name="MyForm"></p><p><input type=text name="MyText" value="滑鼠點擊" onclick="javascript:alert('滑鼠已點擊')"><br /></form><br /></center><br /></body><br /></html><br />
在瀏覽器查看該頁面時，滑鼠點擊文字框後，彈出警告對話方塊。
【4】通過HTML文檔事件處理常式引入
在開發Web應用程式的過程中，開發人員可以給HTML文檔中設定不同的事件處理器，通常是設定某HTML元素的屬性來引用一個指令碼(可以是一個簡單的動作或者函數)，屬性一般以on開頭，如滑鼠移動onmousemove()等。
下面的程式示範如何使用JavaScript指令碼對按鈕單擊事件進行響應：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>Sample Page</title><br /><mce:script type="text/javascript"><!--<br />function ClickMe()<br />{<br /> alert("滑鼠已單擊按鈕");<br />}<br />// --></mce:script><br /></head></p><p><body><br /><br /><br /><center><br /><p>通過文檔事件處理常式引入JavaScript指令碼程式碼範例：</p><br /><form name="MyForm"><br /><input type=button name="MyButton" value="滑鼠點擊" onclick="ClickMe()"><br /></form><br /></center><br /></body><br /></html><br />
程式運行後，在原始頁面單擊“按一下滑鼠”按鈕，會出現“滑鼠已被點擊”的警告對話方塊。
2.5 嵌入JavaScript指令碼代碼位置JavaScript指令碼代碼可放在HTML文檔任何需要的位置，一般來說，可以在<head>與</head>標記對、<body>與</body>標記對之間按需要放置JavaScript指令碼代碼。
【1】<head>與</head>標記對之間放置
放置在】<head>與</head>標記對之間的JavaScript指令碼代碼一般用於提前載入以響應使用者的動作，一般不影響HTML文檔的瀏覽器顯示內容。如下是其基本文檔結構。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>Sample Page</title><br /><script type="text/javascript"><br /> //指令碼語句<br /></script><br /></head></p><p><body><br /></body><br /></html>
【2】<body>與</body>標記對之間放置
如果需要在頁面載入時運行JavaScript指令碼產生網頁內容，應將指令碼代碼放置在<body>與</body>標記對之間，可根據需要編寫多個獨立的指令碼代碼並與HTML代碼結合在一起，如下是其基本文檔結構：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>Sample Page</title><br /></head><br /><body><br /><mce:script type="text/javascript"><!--<br /> //指令碼語句<br />// --></mce:script></p><p><mce:script type="text/javascript"><!--<br /> //指令碼語句<br />// --></mce:script><br /></body><br /></html><br />
【3】在兩個標記對之間混合放置
如果既需要提前載入指令碼代碼以響應使用者的事件，又需要在頁面載入時使用指令碼產生頁面內容，可以綜合以上兩種方式，如下是其基本文檔結構：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>Sample Page</title><br /><mce:script type="text/javascript"><!--<br /> //指令碼語句<br />// --></mce:script><br /></head><br /><body><br /><mce:script type="text/javascript"><!--<br /> //指令碼語句<br />// --></mce:script><br /></body><br /></html><br />
在HTML文檔中何種位置嵌入JavaScript指令碼代碼應由其實際功能需求來決定，嵌入指令碼的HTML文檔編輯完成。
2.6 處理不支援JavaScript指令碼的情況用戶端瀏覽器不支援當前JavaScript指令碼存在如下三種可能：
以上三種情況總結起來，就是瀏覽器對當前指令碼不能解釋出正確的結果，在編寫指令碼代碼時如不進行相關處理，使用者使用該瀏覽器帶有該指令碼的文檔將出現警告框。可以通過以下兩種方法解決。
通過前面的學習，我們得知ECMAScript是JavaScript指令碼的基石，但並不是使用JavaScript指令碼開發過程中應唯一特別值得關注的部分。實際上，一個完整的JavaScript指令碼應包含以下三部分：
本章主要介紹了JavaScript指令碼的基本知識，同時示範了如何編寫自己的“Hello World!”程式，兼顧JavaScript及瀏覽器的版本差異性提出相應的編程策略；講述了JavaScript指令碼語言的實現基礎，同時大家一定在使用過程中要區分JavaScript與JScript、VBScript的區別，以及JavaScript與Java、Java Applet概念的異同。
至此我們的JavaScript入門篇就結束了，後面的章節會詳細介紹JavaScript的語言基礎等內容。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
