程式語言教學誌 FB, YouTube: PYDOING: JavaScript 快速導覽

JavaScript 為由瀏覽器 (browser) 所執行的腳本語言 (script language) ，其原始碼 (source code) 會隨網頁下載到瀏覽器之中，於網路上的客戶端 (client) 執行。因此，學習 JavaScript 只需有一般通用的網頁瀏覽器即可，編輯程式原始碼則可利用一般的文字編輯器 (text editor) 。

JavaScript 最早由網景公司所開發，加入到 Netscape 瀏覽器之中，使網頁在客戶端增加許多動態功能，微軟公司後來推出相似功能的腳本語言 JScript ，後來兩者都交由 ECMA 國際建立 ECMA-262 標準，因此目前兩者都屬於 ECMAScript 的實作。

JavaScript 不是 Java ！ JavaScript 當初的確參考 Java 的語法所設計，取名 JavaScript 主要也是為了行銷的考量，但 JavaScript 與 Java 是兩種完全不同的程式語言 (programming language) 。

通常 JavaScript 寫在 HTML 文件的 <head></head> 標籤 (tag) 區域之內，利用 <script></script> 夾住 JavaScript 的程式碼，如

<html>
 
<head>
<title>JavaScript Demo</title>
<script type="text/javascript">
function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var message = "Hello, JavaScript!";
    n.appendChild(document.createTextNode(message));
    c.appendChild(n);
}
</script>
</head>
 
<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body
 
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：jsexample01.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

我們暫不詳細解釋這個 JavaScript 程式。先開啟網頁，會出現個 RUN 按鈕

點擊 RUN 按鈕就會印出訊息

這個 JavaScript 程式就是在網頁中印出 Hello, JavaScript! 的文字。

JavaScript 也可以放在 <body></body> 標籤區域之內，例如

<html>
 
<head>
<title>JavaScript Demo</title>
</head>
 
<body>
<input id="b" type="button" value="RUN" onclick="run();">
<script type="text/javascript">
function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var message = "Hello, JavaScript!";
    n.appendChild(document.createTextNode(message));
    c.appendChild(n);
}
</script>
<div id="content"></div>
</body
 
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：jsexample02.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

這個功能會完全一樣的。

或是外連， JavaScript 程式儲存成副檔名為 .js 的檔案，如

function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var message = "Hello, JavaScript!";
    n.appendChild(document.createTextNode(message));
    c.appendChild(n);
}
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：run.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 */

然後在 HTML 文件中 <head> 區域的 <script> 標籤以 src 屬性 (attribute) 引入這個 run.js 檔案

<html>
 
<head>
<title>JavaScript Demo</title>
<script src="run.js" type="text/javascript"></script>
</head>
 
<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body
 
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：jsexample03.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

讀者可自行儲存以上 run.js 與 jsexample03.html 兩個檔案，放置於相同資料夾，然後於瀏覽器開啟，點擊 RUN 按鈕同樣都會顯示 Hello, JavaScript 的文字訊息。

往後的範例程式碼，我們會把 JavaScript 與 HTML 文件的檔案分開，使焦點得以集中在 JavaScript 程式碼上。若讀者不是很熟悉 HTML 文件所採用的標記語言 (markup language) ，可參考本站另一份 HTML 快速導覽。

中英文術語對照
瀏覽器	browser
腳本語言	script language
原始碼	source code
客戶端	client
文字編輯器	text editor
程式語言	programming language
標籤	tag
屬性	attribute
標記語言	markup language