本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

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 行都有使用 varvar 也是 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






2 則留言:

俊傑 提到...

atribute -> attribute

Kaiching Chang 提到...

這地方打錯字了,已修改,感謝指正 :)