首頁 > 開發者 > JavaScript
1.1 什麼是JavaScript
JavaScript是一種描述性語言，也是一種基於對象（Object）和事件驅動（Event Driven）的，並具有安全效能的指令碼語言。它與HTML超文字標記語言 (HTML)一起，在一個Web頁面中連結多個對象，與Web客戶實現互動。無論是在用戶端還是在伺服器端，JavaScript應用程式都要下載到瀏覽器的用戶端執行，從而減輕了伺服器端的負擔。
1992年，一家Nombas的公司開發了一種叫做Cmm的嵌入式指令碼語言，並把它捆綁在一個叫做CEnvi的產品中。它首次向人們展示了這種語言的威力，之後Nombas把Cmm的名字改成了ScriptEase。
當Netscape在1995年把JavaScript首次運用在互連網上時，因為它可以同時在瀏覽器和伺服器端使用，所以立即得到了人們的認可，從此JavaScript變成了互連網的必備組件。隨著用戶端指令碼的需求逐漸增大，微軟進軍瀏覽器，發布了IE 3.0，並搭載了一個JavaScript的複製版，叫做JScript。此時，有三種不同的JavaScript版本同時存在，Netscape的JavaScript、IE的JScripte和CEnvi的ScriptEase。
JavaScript沒有一個標準來統一其文法或特性，而這三種不同的版本恰恰突出了這個問題。為瞭解決這一問題，JavaScript 1.1作為一個草案提交給歐洲電腦製造商協會（ECMA），最終ECMA-262標準應運而生，該標準定義了叫做ECMAScript的指令碼語言。之後國際標準組織及國際電子電機委員會（ISO/IEC）也採納ECMAScript作為標準，從此JavaScript開始踏入了標準時代。
1.2 JavaScript的組成
①ECMAScript標準
儘管ECMAScript是一個重要的標準，但它並不是JavaScript唯一的部分，當然也不是唯一被標準化的部分。實際上，一個完整的JavaScript是由以下三個不同的部分組成的。
①核心文法（ECMAScript）②瀏覽器物件模型（BOM）③文件物件模型（DOM）
ECMAScript標準
ECMAScript的一種開放的、國際上廣為接受的、標準的的指令碼語言規範。它不與任何具體的瀏覽器綁定，實際上，它也沒有提到用於任何使用者輸入輸出的方法。那麼ECMAScript標準主要對哪些內容實行了規範呢？簡單地說，ECMAScript主要描述了一下內容。
①文法。
②變數和資料類型。
③運算子。
④邏輯控制語句。
⑤關鍵字、保留字。
⑥對象。
ECMAScript是一個描述，規定了指令碼語言的所有屬性、方法和對象的標準，因此在使用Web用戶端指令碼語言編碼時一定要遵循ECMAScript標準。
②瀏覽器物件模型（BOM）
BOM是Browser Object Model(瀏覽器物件模型)的簡稱，提供了獨立於內容與瀏覽器視窗進行互動的對象，使用瀏覽器物件模型可以實現與HTML的互動。它的作用是將相關的元素組織封裝起來，提供給程式設計人員使用，從而減輕開發人員的勞動，提高設計Web頁面的能力。BOM是一個分層結構，如所示
Window
║
╭═════════════════════════════╮
history document
location
║
╭═════════════════════════════╮
link form
anchor
║
╭═════════════════════════════╮
botton checkbox text …… textarea radio select
可以看到，Window對象是整個BOM的核心，在瀏覽器中開啟網頁後，我們首先看到的瀏覽器視窗，即最頂層的Window對象。其次就是我們看到的網頁文檔內容，即Document文檔，它的內容包括一些超連結（link）、表單（form）、錨（anchor）等，表單由文字框（Text）、選項按鈕（radio）、按鈕（button）等表單元素組成。在瀏覽器對象結構中，除了document文檔對象外，Window對象之下還有兩個對象：地址對象（location）和曆史對象（history），它們對應於IE瀏覽器中的地址欄和前進/後退按鈕，我們可以利用這些對象的方法，實作類別似的功能。因此使用BOM通常可實現如下功能。
①彈出新的瀏覽器視窗。
②移動、關閉瀏覽器視窗以及調整視窗的大小。
③在瀏覽器視窗中實現頁面的前進、後退功能。
③文件物件模型（DOM）
DOM是Document Object Model(文件物件模型)的簡稱，是HTML文件物件模型（HTML DOM）定義的一套標準方法，用來訪問和操縱HTML文檔。DOM由全球資訊網聯盟（World Wide Web Consortium,W3C）定義，最新的瀏覽器都支援第一級和第二級DOM（第一級和第二級DOM是一種標準），這樣使用JavaScript就可以控制整個網頁。
自從W3C建立了DOM標準(W3C DOM)以及DOM得到所有瀏覽器的支援以來，DOM在實際應用中越來越廣泛。DOM提供了一組按樹狀結構組織的HTML文檔，樹狀結構中每一個對象稱為一個節點，每一個對象都有一個或多個屬性和方法。如所示
文檔：document
║
根節點：<HTML>
║
╭═════════════════════════════╮
元素：<head> 元素：<body>
║ ╭═════════╮
元素：<title> 屬性：href═══元素<a> 元素<h1>
║ ║
║
文本：“文檔標題” 文本:我的連結 文本:我的標題
在DOM中，無論對象是什麼，每一個對象都被稱為一個節點。節點又分為根節點、父節點、子節點、兄弟節點和葉子節點。最頂層的節點稱作根節點，如所示，這裡的根節點是<html>、<head>和<body>是父節點<heml>的兩個子節點。擁有相同的父節點的兩個或兩個以上的節點稱作兄弟節點，如<head>和<body>就是一對兄弟節點。位於樹狀結構底部的節點稱作葉子節點，如"文檔標題"、"href"、"我的串連"、"我的標題"。除了根節點和葉子節點外，其他每個節點都有一個父節點、一個或多個子節點。
1.3 指令碼的基本結構
通常，JavaScript代碼是用<script>標籤嵌入HTML文檔中的。可以將多個指令碼嵌入到一個文檔中，只需將每個指令碼都封裝在<script>標籤中即可。瀏覽器在遇到<script>標籤時，將逐行讀取內容，直到遇到</script>結束標籤為止。然後，瀏覽器將檢查JavaScript語句的文法，如果有任何錯誤，就會在警告框中顯示；如果沒有錯誤，瀏覽器將編譯並執行。
1.指令碼的基本結構
指令碼的基本結構如下：
<script type="text/JavaScript">
<!--JavaScript語句；
-->
</script>
<!--語句-->是注釋標籤。這些標籤用於告知不支援JavaScript瀏覽器忽略標籤中包含的語句。<!--表示開始注釋標籤,-->則表示結束注釋標籤。這些標籤是可選的，但最好在指令碼中使用這些標籤。目前大多數瀏覽器都支援JavaScript，但使用注釋標籤可以確保不支援JavaScript的瀏覽器會忽略嵌入。到HTML文檔中的JavaScript語句。
2.指令碼的執行原理
在指令碼的執行過程中，瀏覽器用戶端與應用伺服器端採用請求/響應模式進行互動。
(1)瀏覽器接受使用者的請求：一個使用者在瀏覽器的地址欄中輸入要訪問的頁面（頁面中包含JavaScript指令碼程式）。
(2)向伺服器端請求某個包含JavaScript指令碼的頁面，瀏覽器把請求訊息（要開啟的頁面資訊）發送到應用伺服器端，等待伺服器端的響應。
(3)應用伺服器端響應訊息，既包含有指令碼的HTML文本發送到瀏覽器用戶端，然後由瀏覽器從上至下逐條解析HTML標籤和JavaScript指令碼，並將頁面效果呈現給使用者。
使用用戶端指令碼的好處有以下兩點。
(1)含指令碼的頁面只要下載一次即可，這樣能減少不必要的網路通訊。
(2)指令碼程式是由瀏覽器用戶端執行，而不是由伺服器端執行，因此能減輕伺服器端的壓力。
3.在網頁中引用JavaScript的方式
(1)使用<Script>標籤
(2)使用外部JavaScript檔案
(3)直接在HTML中使用：<input name="btn" type="button" value="彈出訊息框" onclick="JavaScript:alert("歡迎你")">
1.4 JavaScript核心文法
1.JavaScript是一種弱類型語言，沒有明確的資料類型，也就是說，在聲明變數時，不需要指定變數類型，變數的類型由賦給變數的值決定。這一點不象JAVA和C#那樣，在聲明變數的同時需指定變數的資料類型。
在JavaScript中，變數是使用關鍵字var聲明的。下面是JavaScript聲明變數的文法格式。
var 合法的變數名;
其中，var是聲明變數所使用關鍵字;"合法的變數名"是遵循JavaScript中變數名規則的變數名，JavaScript中的變數名與java變數的命名規則相同。可以在聲明變數的同時為變數賦值，這叫做變數的初始化；也可以在稍後的指令碼中為變數賦值。
聲明變數的同時為變數賦值，例如：
var width = 20; //在聲明變數的同時賦值
var x,y,z=10;//一次聲明多個變數時，使用逗號分隔
需要強調的是：JavaScript區分大小寫，所以大小寫不同的變數名表示不容的變數。另外，由於JavaScript是一種弱類型語言，所以允許不聲明變數而直接使用，系統將會自動聲明該變數。例如
var=88； //沒用聲明變數X，直接使用。
變數可以不經聲明而直接使用，但這種方法很容易出錯，也很難尋找排錯，不推薦使用。在使用變數之前，請先聲明後使用，這是良好的編程習慣。
2.資料類型
雖然JavaScript是一種弱類型語言，在聲明變數時不需要聲明變數的資料類型，而是由賦給變數的值決定，但有時也需要檢測變數的具體資料類型（通過typtof運算子）。在JavaScript中，提供了常用的基礎資料型別 (Elementary Data Type)，這些資料類型如下所示。
(1)typeof運算子
ECMAScript提供了typeof運算子來判斷一個值或者變數究竟屬於哪種資料類型。文法為：typeof(變數或值)
(2)undefined（未定義類型）
undefined類型只有一個值，即undefined。當聲明的變數為初始化時，該變數的預設值是undefined。
(3)null（空類型）
只有一個值的類型是null，是一個表示"什麼都沒有"的預留位置，可以用來檢測某個變數是否被賦值。值undefined實際上是值null派生來的，因此ECMAScript把他們定義為相當的。
(4)number（數實值型別）
ECMA-262中定義的最特殊的類型是number類型，這種類型既可以表示32位的整數，還可以表示64位的浮點數。下面的代碼聲明了存放整數值和浮點數值的變數。
var iNum = 23;
var iNum = 23.0;
整數也可以表示為八進位或十六進位，八進位首數字必須是0，其後的數字可以是任何八位元字（0-7），十六進位首數字也必須是0，後面是任意的十六進位數字和字母（0-9和A-F）。
var iNum = 070； //070等於十進位的56
var iNum = 0x1f; //0x1f等於十進位的31
對於非常大或非常小的數，可以用科學計數法表示浮點數，也是number類型。另外一個特殊值NaN(Not a Number)表示非數，它是number類型；
(5)string（字串類型）
在JavaScript中，字串是一組被引號（單引號或雙引號）括起來的文本。
(6)boolean（布爾類型）
boolean型資料被稱為布爾型資料或者邏輯型資料，boolean類型是ECMAScript中最常用的類型之一，它只有兩個值true和false。
2.1 運算子號
常用的運算子
類別 運算子號
算數運算子 +、-、*、/、%、++、--
比較子 >、<、>=、<=、==、！=
邏輯運算子 &&、||、！
賦值運算子 =
2.2 常用的輸入/輸出
1.警告(alert)
alert()方法會建立一個特殊的小視窗，該視窗帶有一個字串和一個"確定"按鈕
alert()方法的基本文法格式如下：
alert("提示資訊")
該方法將彈出一個警告對話方塊，其內容可以是一個變數的值，也可以是一個運算式的值，如果顯示其他類型的值，需要將其轉換為字串型。
警告對話方塊是當前啟動並執行網頁彈出的，在對該對話方塊做出處理前。當前網頁將不可用，後面的代碼也不會被執行，只有對警告的對話方塊進行處理後(單擊"確定"按鈕或直接關閉),當前網頁才會繼續顯示後面的內容。
2.提示(prompt)
prompt()方法會彈出一個提示對話方塊，等待使用者輸入一行資料
prompt()方法的基本文法格式為：
prompt("提示資訊","輸入框的預設資訊");
該方法的傳回值也可以被引用或儲存到變數中，例如：
var color=prompt("請輸入你喜歡的顏色","紅色");
prompt()方法的第一個參數text顯示在對話方塊上，通常是一些提示資訊:第二個參數出現在使用者輸入的文字框中，且被選中，作為預設值使用。如果省略第二個參數，提示對話方塊的輸入行中會出現"undefined"，可以將第二個參數的值設定為空白字串，例如：var color=prompt("請輸入你喜歡的顏色","");
如果使用者單擊"取消"按鈕或直接關閉提示對話方塊，該方法將返回Null;如果使用者單擊"確定"按鈕,該方法將返回一個字串型資料。
----------------------------------總結--------------------------------------
1.JavaScript由三部分組成，分別是ECMAScript、DOM和BOM，其中ECMAScript是JavaScript的標準規範，BOM與瀏覽器視窗進行互動，DOM可以控制頁面中的每一個元素，實現頁面中的各種動態效果。
2.在HTML頁面中JavaScript有三種方式，直接把JavaScript代碼寫在標籤<script>和</script>之間，使用外部JavaScript檔案或直接把簡短的JavaScript代碼寫在HTML標籤中。
3.JavaScript的核心文法有變數的聲明和賦值、資料類型、邏輯控制語句、注釋，在JavaScript中代碼區分大小寫，並且建議每一句的末尾使用分號(;)結束。
4.在JavaScript中待用的輸入/輸出是prompt()方法和alert()方法。
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
