本站電子書

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

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






3 則留言:

俊傑 提到...
作者已經移除這則留言。
俊傑 提到...

broswer -> browser

Kaiching Chang 提到...

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