技術標籤：JavaScriptjavascriptjquerycsscss3html

今天我們分享關於JavaScript的內容。

早期的web，內容主要是文字，現在的web則完全不同，它包含了聲音、視訊、動畫、互動導航等元素，在這其中JavaScript扮演著很重要的角色。

JavaScript常見功能包括：

1、以指定尺寸、位置和樣式開啟新窗體；

2、提供使用者友好的導航幫助，如下拉選單等；

3、檢驗web表單輸入的資料，以保證向伺服器提交的資料是有效的格式；

4、在事件發生時，改變頁面元素的外觀與行為；

5、檢測和發現特定瀏覽器支援的高階功能，比如第三方外掛的支援。

由於JavaScript程式碼只在使用者瀏覽器內部執行，頁面對指令做出的相應快速，這樣就增強了使用者的體驗感，彷彿web應用程式是在本地計算機執行的程式。

JavaScript起源：

20世紀90年代，首先是Netscape Navigator 2 引入了1.0版本。

隨後，歐洲計算機制造商協會ECMA開始介入，制定了ECMAScript規範，從而奠定了JavaScript的發展基礎。同時呢，微軟也開發了自己版本的JavaScript，叫做JScript，並在其自己的IE瀏覽器上適配。

20世紀90年代後期，Netscape Navigator 4 和 IE4都宣佈對JavaScript提供更好的支援，但是兩組開發人員卻走上了不同的道路，他們分別給JavaScript語言本身和web頁面的互動，定義了自己的規範，從而導致了開發者的混亂，開發人員在開發程式碼時總是需要編寫更多的程式碼來適應兩種規範。

後期，經過網際網路聯盟W3C的努力，通過DOM規範了瀏覽器製造商對頁面互動方式的定義和操作。（網際網路聯盟W3C，全稱是 World Wide Web Consortium，是一個國際組織，致力於指定開放標準來支撐網際網路的發展。）

<script>標籤：

在HTML裡使用<script>和</script>標籤，來定義JavaScript的語句。

語法：

<script>......Javascriptstatements程式碼</script>

JavaScript是一種解釋性語言，無需編譯，不像C++或Java語言，需要編譯才可以執行。JavaScript指令以純文字的形式傳送給瀏覽器，然後依次解釋執行。正是由於這個特點，JavaScript程式便於閱讀，也便於編輯，在本地就可以進行測試。

本次分享的程式碼都是符合HTML5規範的，即在<script>元素中沒有任何必須設定的屬性，但是如果是在HTML4.01或XHTML頁面中宣告JavaScript，就需要使用type屬性了。比如

​​​​​​​

<script type="text/javascript">  .....程式碼</script>

但是在早期的頁面開發中，我們還能夠見到屬性language="JavaScript"，這種方式已經被棄用了，除非是需要支援非常古老的瀏覽器，否則程式碼不必這樣寫的。

在程式碼分享過程中，為了便於學習和理解，我會把Javascript程式碼放在body部分中，但是實際開發中都是在head部分，進行引用的，這個需要大家瞭解。

DOM簡介：

文件物件模型，英文簡稱Document Object Model，是對文件及其內容的抽象表示。

每次瀏覽器在載入和顯示頁面時，都需要解析頁面的HTML程式碼，在解析過程中，瀏覽器建立一個內部模型來表示文件裡的內容，這個模型就是DOM。

在早期，JavaScript只能對web頁面的某部分進行基本的訪問，所以web開發人員有時把這樣的情形稱為0級DOM，以便與W3C的1級DOM向下相容。

window和document物件：

在DOM裡，頁面的元素具有一個邏輯化、層級化的結構，就像相互關聯的父物件和子物件組成一個樹形結構。這個層級樹的最頂端是瀏覽器window物件，它是頁面DOM中一切物件的父物件。

window物件包含，document，location，history，navigator。

物件表示法：

在這個樹形結構中，表示父與子的關係，如下：

parent.child

這個學習過c語言或者c++，java的同學，對這種表示方式很熟悉。

如果需要多層次的表示父子關係，如下：

object1.object2.object3

表示object3，其父物件是object2，而object2,又是object1的子物件。

在HMTL頁面的body部分，如果需要使用DOM表示，如下：

window.document.body

需要表示一個物件的屬性或者方法，可以這樣：

​​​​​​​

object1.object2.property屬性object1.object2.method方法

簡潔寫法：

window物件始終包含當前瀏覽器視窗，所以使用window.document就可以訪問文件，作為簡化表示，就可以直接使用document來訪問文件。

​​​​​​​

window.document 簡化 document

與使用者互動：

在介紹window和document物件之前，我們先介紹兩個非常常用的方法，這個是與使用者互動的最便捷手段。

提示框：

window.alert("提示內容");

很多時候，我們除錯程式時，需要輸出一個變數的值，來觀察程式的正確與否，通常會使用提示框，觀察結果。

​​​​​​​

<script>  window.alert("提示內容");</script>

同樣可以簡潔寫法：

​​​​​​​

<script>alert("提示內容");</script>

這裡需要注意一點，要顯示的文字必須位於引號之中。引號可以是雙引號，也可以是單引號。

頁面輸出：

語法：

​​​​​​​

<script>window.document.write("輸出內容");</script>

這個方法的功能是，直接向頁面輸出HTML文件內容的。