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

我們重新看一次印出 Hello, JavaScript! 的簡單範例，點擊 RUN 按鈕就印出訊息， HTML 文件如下

<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 月 -->

第 9 行

<input id="b" type="button" value="RUN" onclick="run();" />

<input /> 作為輸入的標籤 (tag) ， type 屬性 (attribute) 標明這是一個 button ，也就是按鈕， onclick 屬性則讓使用者按下按鈕的動作與 JavaScript 程式產生關聯，屬性值 "run();" 表示呼叫 (call) 並且執行 run() 函數 (function) 。

函數是 JavaScript 中功能群組的單位，最簡單直接由瀏覽器 (browser) 顯示結果的程式不需要用到函數，但程式若要與 HTML 元素 (element) 有所互動，例如這個例子讓使用者按下按鈕，然後在瀏覽器中顯示訊息，這時候便需要定義所需的函數。事實上，函數在 JavaScript 中相當常用而且普遍。

我們來看看這個 run() 函數的定義，在檔案 run.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 月 */

第 1 行

function run() {

function 為 JavaScript 的關鍵字 (keyword) 之一，也是預設的保留字 (reserved word) ，表示其後的 run() 為函數名稱。函數名稱為自行命名的識別字 (identifier) ，隨後的小括弧可放置參數 (parameter) ，這是說可把數值以參數的型式交給函數進行計算，計算也是函數的重要功能之一。

第 1 行到第 7 行是用成對的大括弧圍起來的區域，這是函數定義的部份，函數的所有功能都在這裡定義，因此，這個例子中，當使用者按下 RUN 按鈕便是呼叫 run() 函數，瀏覽器便會執行 run() 函數中的五行程式碼。

第 2 行到第 4 行都有使用 var ， var 也是 JavaScript 的關鍵字之一，表示其後的 c 、 n 、 message 為變數 (variable) ，變數名稱亦為自行命名的識別字。

第 2 行

var c = document.getElementById("content");

document 為 JavaScript 的 DOM 物件 (object) ， DOM 表示文件物件模型 (document oject model) ，代表執行此 JavaScript 程式的 HTML 文件，可由 document 來存取文件中各個元素。常見瀏覽器都有支援此一文件物件模型，這是由 W3C 所推薦的標準。這一行的意思是由變數 c 取得 id 屬性為 content 的 HTML 元素控制權

第 3 行

var n = document.createElement("p");

這是由 document 物件新建一個 <p> 段落元素，由變數 n 保有控制權。

第 4 行

var message = "Hello, JavaScript!";

這是建立一個內容為 "Hello, JavaScript!" 字串 (string) 字面常數 (literal) 的物件變數 message 。

第 5 行

n.appendChild(document.createTextNode(message));

這是將 message 附加到 n 之中，也就是在 <p> 段落元素中加入文字。

第 6 行

c.appendChild(n);

這是將變數 n ，也就是 <p> 段落元素附加到 c 之中，由於 c 為 <div> 區塊元素，因此每按一次按鈕，就會增加一個含有 Hello, JavaScript! 字串的 <p> 段落元素。

先知道這個程式怎麼運作的就好，細節我們往後會再繼續討論。另外，注意 run() 中每一行都以分號 ; 結尾，這表示該行為陳述 (statement) ，陳述為程式依次執行的單位。

第 9 行以後

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：run.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 */

利用 /* 到 */ 圍起來的地方，這是 JavaScript 提供的跨行註解 (comment) 方式。註解也可以是單行的，利用 // ，如

var message = "Hello, JavaScript!"; //建立印出訊息的變數

中英文術語對照
標籤	tag
屬性	attribute
函數	function
瀏覽器	browser
元素	element
關鍵字	keyword
保留字	reserved word
識別字	identifier
參數	parameter
物件	object
文件物件模型	document oject model
字串	string
字面常數	literal
陳述	statement
註解	comment