了解JavaScript（1）- Hello World

JavaScript 簡介

JavaScript 是一種可以給網頁增加互動性的程式設計語言。
熟悉 JavaScript 的好方法是“站在其他程式員肩膀上”，即Web 上有大量 JavaScript 代碼，複制一下并稍作修改，就可以供自己使用。
JavaScript 腳本語言，在 HTML 頁面内容是包圍在 <script> 标簽中，不用使用 type=”text/javascript”屬性。JavaScript 是所有現代浏覽器以及 HTML5 中預設的腳本語言。
JavaScript 與 Java 無關，市場營銷。
JavaScript 的微軟版本稱為 JScript，ASP 中可以使用 JScript 腳本語言。

Hello, World

老習慣，我們第一個 JavaScript 是向浏覽器視窗輸出“Hello, World!”，腳本代碼（HelloWorld.html）如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World!</title>
<script>
  function SayHello(){
    document.getElementById("myMessage").innerHTML = "Hello, World!";  
  }
</script>
</head>
<body>
<script>
  document.write("<h1>我們的第一個 JavaScript 程式</h1>");
  document.write("<p id=\"myMessage\">哦， 試試下面的按鈕...</p>");
</script>
<button type="button" onClick="SayHello()">嘗試一下</button>
</body>
</html>

Firefox 40.0.2 輸出效果如下圖：

了解JavaScript（1）- Hello World - pchmonster

點選“嘗試一下”按鈕後，<p> 标簽的内容發生了變化，如下圖：

我們看到了 document.getElementById()，這個方法是 HTML DOM 中定義的。

DOM（Document Object Model）文檔對象模型，是用于通路 HTML 元素的正式 W3C 标準。

JavaScript 的局限性

不允許寫伺服器上的檔案。
不能關閉不是由它自己打開的視窗。
不能從來自另外一個伺服器的已經打開的頁面中讀取資訊。

使用外部腳本

也可以把腳本儲存在外部檔案中。外部檔案通常包含被多個網頁使用的代碼，會使站點更容易維護。

外部 JavaScript 檔案的擴充名是 .js。

如果需要使用外部檔案，請在 <script> 标簽中使用 “src”屬性中設定，如下：

<!doctype html>
<html>
<head>
<script src="myScript.js"></script>
</head>
<body>
</body>
</html>

在這個外部腳本示範程式中，script_001.html 中引用了外部檔案 script_001.js。

script_001.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>外部腳本的使用</title>
  <script src="script_001.js"></script>
</head>
<body>
  <h1 id="helloMessage"></h1>
</body>
</html>

script_001.js

// JavaScript Document
window.onload = writeMessage;

function writeMessage(){
  document.getElementById("helloMessage").innerHTML = "Hello, World!";
}

windows.onload 是一個事件處理程式，意思是當視窗完成加載時，運作 writeMessage 函數。

示例下載下傳

HelloWorld.RAR