JavaScript 簡介

JavaScript 是網際網路上最流行的指令碼語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。

JavaScript 是指令碼語言

JavaScript 是一種輕量級的程式語言。

JavaScript 是可插入 HTML 頁面的程式設計程式碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

JavaScript 很容易學習。

您將學到什麼

下面是您將在本教程中學到的主要內容。

JavaScript：直接寫入 HTML 輸出流

例項

document.write("<h1>這是一個標題</h1>"); document.write("<p>這是一個段落。</p>");

嘗試一下 ?

您只能在 HTML 輸出中使用 document.write。如果您在文件載入後使用該方法，會覆蓋整個文件。

JavaScript：對事件的反應

例項

<button type="button" onclick="alert('歡迎!')">點我!</button>

嘗試一下 ?

alert() 函式在 JavaScript 中並不常用，但它對於程式碼測試非常方便。

onclick 事件只是您即將在本教程中學到的眾多事件之一。

JavaScript：改變 HTML 內容

使用 JavaScript 來處理 HTML 內容是非常強大的功能。

例項

x=document.getElementById("demo"); //查詢元素 x.innerHTML="Hello JavaScript"; //改變內容

嘗試一下 ?

您會經常看到 document.getElementById("some id")。這個方法是 HTML DOM 中定義的。

DOM (Document Object Model)（文件物件模型）是用於訪問 HTML 元素的正式 W3C 標準。

您將在本教程的多個章節中學到有關 HTML DOM 的知識。

JavaScript：改變 HTML 影象

本例會動態地改變 HTML <image> 的來源（src）：

點亮燈泡

<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src=https://www.itread01.com/js/"/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

點選以下燈泡檢視效果：

點選燈泡就可以開啟或關閉這盞燈


嘗試一下 ?

以上例項中程式碼 element.src.match("bulbon") 的作用意思是：檢索 <img id="myimage" onclick="changeImage()" src="/upfile/2021/0518/358792181801221.gif" width="100" height="180"> 裡面 src 屬性的值有沒有包含 bulbon 這個字串，如果存在字串 bulbon，圖片 src 更新為 bulboff.gif，若匹配不到 bulbon 字串，src 則更新為 bulbon.gif

JavaScript 能夠改變任意 HTML 元素的大多數屬性，而不僅僅是圖片。

JavaScript：改變 HTML 樣式

改變 HTML 元素的樣式，屬於改變 HTML 屬性的變種。

例項

x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改變樣式

嘗試一下 ?

JavaScript：驗證輸入

JavaScript 常用於驗證使用者的輸入。

例項

if isNaN(x) { alert("不是數字"); }

嘗試一下 ?

以上例項只是普通的驗證，如果要在生產環境中使用，需要嚴格判斷，如果輸入的空格，或者連續空格 isNaN 是判別不出來的。可以新增正則來判斷（後續章節會說明）：

例項

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){ alert("不是數字"); }

嘗試一下 ?

您知道嗎？

JavaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設計上。
Java（由 Sun 發明）是更復雜的程式語言。

ECMA-262 是 JavaScript 標準的官方名稱。

JavaScript 由 Brendan Eich 發明。它於 1995 年出現在 Netscape 中（該瀏覽器已停止更新），並於 1997 年被 ECMA（一個標準協會）採納。

ECMAScript 版本

JavaScript 已經由 ECMA（歐洲電腦製造商協會）通過 ECMAScript 實現語言的標準化。

年份 名稱 描述
1997 ECMAScript 1第一個版本
1998 ECMAScript 2版本變更
1999 ECMAScript 3新增正則表示式
新增 try/catch
ECMAScript 4沒有釋出
2009 ECMAScript 5新增 "strict mode"，嚴格模式
新增 JSON 支援
2011 ECMAScript 5.1版本變更
2015 ECMAScript 6新增類和模組
2016 ECMAScript 7增加指數運算子 (**)
增加 Array.prototype.includes

ECMAScript 6 也稱為 ECMAScript 2015。

ECMAScript 7 也稱為 ECMAScript 2016。