自學如何選擇入門的程式語言

JavaScript 的 Hello 程式

以下的 JavaScript 程式會在瀏覽器 (browser) 中顯示 Hello JavaScript!

document.write("Hello JavaScript!")

/* 《程式語言教學誌》的範例程式
    https://kaiching.org/
    檔名:hello.js
    功能:示範印出 Hello
    作者:張凱慶 */

從語法高亮度可以窺看各部分程式碼的功能,以上執行部分的程式碼只有一行

document.write("Hello JavaScript!")

document 為 HTML DOM 物件 (object) , DOM 為 Document Object Model 的頭字母縮寫詞,中文為文件物件模型,這是說瀏覽器預設整份 HTML 文件為物件,可由 HTML DOM 物件的預設變數 document 控制整份文件。

這個範例是利用 HTML DOM 物件的 write() 方法 (method) ,將字串 (string) "Hello JavaScript!" 顯示在瀏覽器頁面上。

HTML DOM 物件是已經設計好的物件,在瀏覽器打開網頁就會自動載入,某種程度上來說, HTML DOM 就是 JavaScript 內建的程式庫。

最後,綠色是註解 (comment) ,註解是程式中不會被執行的部分

/* 《程式語言教學誌》的範例程式
    https://kaiching.org/
    檔名:hello.js
    功能:示範印出 Hello
    作者:張凱慶 */

以上的 JavaScript 程式用以下的 HTML 文件載入

<!DOCTYPE html>

<html>
    <head>
        <script src="hello.js"></script>
        <title>Hello JavaScript!</title>
    </head>
    <body>
    </body>
</html>

<!-- 《程式語言教學誌》的範例程式
      https://kaiching.org/
      檔名:hello.html
      功能:示範印出 Hello
      作者:張凱慶 -->

其中 <script> 標籤的 src 屬性用來引入 JavaScript 檔案

<script src="hello.js"></script>

利用瀏覽器打開 hello.html ,執行結果直接顯示在瀏覽器視窗中

Hello JavaScript!

由上可知,想要學會 JavaScript 的 Hello 程式要經過以下幾個步驟

  1. 學會用 document 物件的 write() 方法 ,也就是學會用程式庫中定義好的內容。
  2. 將 JavaScript 程式引入到 HTML 文件中,然後用瀏覽器打開 HTML 文件執行程式。

下一頁 Hello Perl!
回討論頁
回關於自學首頁
回程式語言教材首頁
中英文術語對照
瀏覽器browser
註解comment
方法method
物件object
字串string