茄糞男

這其實是做了兩年的 workshop, 都沒有認真考慮過的問題.

JavaScript 的 Hello World 應該是怎樣才好呢?

一直以來, 我都是用最初學到的一套, 就是用 document.write():

<script type="text/javascript">
<!--
	document.write("Hello World!");
// -->
</script>

這個Hello World 的最大問題, 就是在實際應用之中, 其實甚少會使用 document.write(). document.write() 大部份情況下只適用於當文件正在生成之時. 當文件已經顯示出來之後, 基乎都不會再用. 再者, 現時一般的做法, 都是等待文件載入後才開始執行 JavaScript (onload event), 若果一開始就著重使用 document.write(), 初學者很容易錯誤地依賴這個做法, 結果要改正回來時只會弄得一頭霧水.

事實上, 在這兩年的 workshop 之中, 儘管我已經多番強調 document.write() 的問題, 結果還是有不少人留戀於 document.write(), 當需要改正過來時就非常苦惱.

所以我想, 既然是這樣, 那一開始就改正過來好了. 其中一個想法是改用 alert():

<head>
<script type="text/javascript">
<!--
	function helloWorld() {
		alert("Hello World");
	}
// -->
</script>
</head>
<body onload="helloWorld()">

這個例子示範了兩個重點: 一、把 function 定義在 <head> 之內, 需要時再執行, 二、用 onload event, 等文件完全載入後才開始執行 JavaScript

不過, 這個方法還是沒有解決最初的其中一個問題: alert() 本身也不是甚麼常用的 function, 現在甚至乎被 DHTML 的 popup 取代了.. 而且, 既然之後一定會認識 DHTML, 倒不如一開始就接觸 DOM 吧?

<head>
<script type="text/javascript">
<!--
	function helloWorld() {
		document.getElementById("helloworld").innerHTML = "Hello World!";
	}
// -->
</script>
</head>
<body onload="helloWorld()">
	<div id="helloworld"></div>

這樣很好, 把 getElementById() 及 innerHTML 都介紹出來了. <div> 加上 id 然後用 getElementById() 拿回來 update, 是一個很常用的 DHTML model. 不過, 作為 DHTML, 還有一點不太完美, 就是那個在 HTML 內的 onload. DHTML 的其中一個理念, 是把 behaviour 從 content 之中分割出來. 在這個例子, onload 這個 behaviour 仍然在 HTML 的 content 之內.

那就分割出來吧? 結果變成這樣:

<head>
<script type="text/javascript">
<!--
	function helloWorld() {
		document.getElementById("helloworld").innerHTML = "Hello World!";
	}
	window.onload = helloWorld;
-->
</script>
</head>
<body>
	<div id="helloworld"></div>

很完美呢, 不過, 作為一個 helloWorld, 會不會太複雜呢? 這裡面要解釋的也實在太多了, event, function (as variable), DOM, etc..

不過, 回想最初學 C 的時候, 還不是不明所以的出現 #include, int main() 之類的嗎? Java 的 Hello World 還不是一開始就要用嚇死人的 System.out.println()? 若果把這個 hello world 作為日後的 template, 比起用 document.write() 這種簡單但誤導的 example 好吧, 最低限度, 初學者不會再誤以為 document.write() 是萬能的.

有 4 則回應 »

(回應)

suk

2010-06-24 15:56:47

(學生問)
window.onload = helloWorld;
呢句不太明

唔明點解放係head入面, 因為話 ‘把 function 定義在 head 之內, 需要時再執行’ , 咁就唔明點解window.onload = helloWorld係咪都算一種function定義….如果window.onload 唔係 helloWorld 咁default係乜
如果唔將behaviour 從 content 分出來, 會有乜野唔好?

2010-06-24 15:59:53

(學生再問)
helloWorld定義左之後, 係咪suppose會係body入面call黎用?
定係一般會好以呢個example咁, 係head入面用佢?