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

沒有留言: