JavaScript 入門指南 - 認識 JavaScript 語言

使用 JavaScript 語言寫程式，最簡單的方式就是開啟文字編輯器 (text editor) ，然後將原始程式碼逐字元一個一個打進文字編輯器中，然後依純文字檔案的編碼儲存檔案， JavaScript 程式的原始碼檔案採用 .js 的副檔名。




也可以利用具有語法高亮度顯示的文字編輯器，或是整合開發環境 (Integrated Development Environment, IDE) ，如下圖為 Mac 系統的 Xcode



或是使用本站的語法高亮度顯示，此範例程式 demo.js 如下
document.write("<br / >");
document.write(document + "<br / >");
document.write("↑↑ 上面是 document 的字串形式<br / >");
document.write("<br / >");
document.write("程式執行結束 ...<br / >");

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


document 是一種特別的內建變數 (variable) ，表示整份 HTML 文件，這是說， document 為使用此 JavaScript 程式的 HTML 文件物件 (object) 。


document 的詳細介紹請參考


由於 JavaScript 為物件導向程式語言 (object-oriented programming language) ，我們使用 JavaScript 寫程式很多使用都是利用物件具有的屬性 (attribute) 與方法 (method) ，此例即利用 document 的 write() 方法，將字串 (string) 寫進瀏覽器 (broswer) 裡
document.write("<br / >");


這裡的字串內容使用 <br / > ，此為 HTML 新行的標籤 (tag) ，碰到這個標籤就會分行。


字串是用一種特殊顏色標記
"<br / >"
"↑↑ 上面是 document 的字串形式<br / >"
"程式執行結束 ...<br / >"


這是字串字面常數 (string literal) ，所謂的字串就是文字資料，其為雙引號或單引號圍起來內容，可以是任何輸入字元。


註解 (comment) 在語法高亮度系統也有特殊的顏色，連續兩個斜線為單行的注釋，斜線、星號開始到另一組星號、斜線結束的範圍則為多行的註解
/* 《程式語言教學誌》的範例程式
   http://pydoing.blogspot.com/
   檔名：demo.js
   功能：示範 JavaScript 程式
   作者：張凱慶
   時間：西元 2012 年 12 月 */


這個範例很簡單，印出一些訊息到瀏覽器，連續呼叫 5 次 document 的 write()
document.write("<br / >");
document.write(document + "<br / >");
document.write("↑↑ 上面是 document 的字串形式<br / >");
document.write("<br / >");
document.write("程式執行結束 ...<br / >");


第 2 行比較特別一點，其餘都直接將字串內容寫到瀏覽器裡
document.write(document + "<br / >");


document 後面用數學的加號 + ，這會直接轉換 document 成字串，然後與加號後的字串連接。在 JavaScript 中，加號 + 對數字是相加，例如 1 + 1 等於 2 ，但是對字串就是連接了，例如 "1" + "1" 等於 "11" 。


其實物件直接作為 write() 參數時，該物件就會直接轉換成字串形式。


因此這個程式會先印出一個空白行，然後 document 的字串形式，然後字串訊息，然後空白行，然後另一個字串訊息，最後也是個空白行。


程式很簡單，接下來，我們繼續來看看如何執行 Javascript 程式吧！


中英文術語對照
文字編輯器text editor
整合開發環境Integrated Development Environment, IDE
變數variable
物件object
物件導向程式語言object-oriented programming language
屬性attribute
方法method
字串string
瀏覽器broswer
標籤tag
字串字面常數string literal
註解comment


您可以繼續參考
基礎篇


相關目錄
回 JavaScript 入門指南
回 JavaScript 教材
回首頁


參考資料
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/JavaScript_Overview
http://www.w3schools.com/JS/js_intro.asp
http://www.tutorialspoint.com/javascript/javascript_overview.htm
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)