document.write() 這個指令用的法， 跟 alert() 一樣，
但卻又比 alert() 還要更強大，
因此它們雖然使用的方式在某些時候是一樣的，
可是使用的時機就不一樣，
這就得要依靠我們大家的經驗累積才能理解。
如果只單純要提醒網頁使用者某個信息，
用 alert() 便可，
但是要在網頁呈現大量資料內容的話，
一定得要用到 document.write() 這個指令不可。
本文我們先做一簡單說明，
在後續的許多程式分享中，
我們會大量使用到 document.write()。

首先請想想， 假如要把「歡迎蒞臨本站」這六個字呈現在網頁上，
只使用以下指令：

alert("歡迎蒞臨本站");

這樣只不過是彈出一個小視窗罷了， 然而，
在網頁裡頭除了顯示歡迎信息之外，
當然還會呈現更多我們希望給網頁使用者閱讀的內容。
你或許可使用彈出小視窗的方式，
把短信息事先通告使用者知道，
但其餘更多的網頁內容我們又該如何處理呢？

除了一些文字敘述之外， 在網頁裡頭還有許多超連結，
要讓網頁吸引更多的觀光客蒞臨，
插入圖形、音樂、動畫是少不了的。
為了達到能與網頁使用者的互動關係，
我們還需要在網頁使用各種文字輸入欄，
或者一些按鈕、核取方塊、下拉式方塊、選擇鈕等等這些表單標籤，
在 .html 檔案裡頭經常會用到上面所提到的各種標籤。
如果要做一些特殊效果，
學習使用程式化的處理能力是非常必要的，
所以我們才會在這個部落格學習寫劇本。

請注意！ html 的標籤也是字串哦！
也可以設定給變數處理，
當然這樣的變數，
就得用 document.write() 來處理囉！
以下我們來寫一個小程式，
除了要呈現一個信息視窗，
為了提醒鄭處於富足安樂的朋友們時時保持居安思危的警惕心理，
我還要在網頁裡頭加入幾個超連結跟文字內容，
使頁面資訊看起來比較豐富。。
為了讓網頁可以顯得比較溫馨一點，，
我也特地找到了這首曲子，
作為這個網頁的背景音樂，
讓我們順便學習如何在網頁插入音樂效果，
讓背景音樂把網頁襯托得更豐富，
祝福那些正處於災難中的朋友們早日恢復平時的生活。

本程式共有三十五行， 除了在執行的時候記得把每行的行號刪除之外，
請視障朋友特別留意程式敘述中的斷行問題。
本程式有幾行敘述因為內容過長，
感覺起來似乎有兩行，
實際上那只是一行被自動分行的敘述，
注意一下每個敘述的行號便可明白了。
此外，
在這裡我還使用特別的方式來做字串連接，
此類的運用觀念，
後續文章我們惠在運算符號學習的時候，
做更進一步探討。
感謝惠顧！

[code]

01 <script> 02 // 宣告變數<br> 03 var welcome;<br> 04 // 定義變數<br> 05 welcome = "歡迎蒞臨本站"; <br> 06 // 以上第2 3 這兩行可以寫在同一個敘述<br> 07<br> 08 // 把 welcome 變數丟到彈出的信息視窗裡頭<br> 09 alert(welcome);<br> 10 // 注意：上一行 alert() 小括號裡頭，如果用引號把 welcome 包住， welcome 就變成字串了 <br> 11<br> 12 // 以下是本頁的主要內容，請仔細閱讀<br> 13 // 宣告與定義變數<br> 14 var body = "<p>歡迎蒞臨本站<br>"; 15 // 接續前一個變數的定義<br> 16 body = body + "最近世界發生了許多意外災害！";<br> 17 body = body + "我在這裡以這個網頁，";<br> 18 body = body + "表達對正在受苦難的人們一點哀痛與懲治的祝福，";<br> 19 body += "希望他們早日脫離災難所帶來的苦楚！";<br> 20 document.write(body);<br> 21<br> 22 var music = "http://coscell.molerat.net/abc/files/%A5i%B6Q%AA%BA%A4%CD%B1%A1.mid";<br> 23 // 產生背景音效的標籤<br> 24 document.write("<bgsound src=" + music + ">"); 25<br> 26 // 一些想要呈現在螢幕上的文字內容<br> 27 document.write("<p>在可貴的友情音樂聲中，"); 28 document.write ("以下我做幾個關於地震的超連結，盼望大家隨時居安思危：<br>"); 29<br> 30 // 請注意以下變數運用方式<br> 31 var lnk = "<a href=http://citytalk.tw/sns/forum.php?mod=viewthread&tid=35787>重要! 地震來時，躲在「生命三角」內存活機會最大！ - 知識百科Citytalk城市通</a> | "; 32 lnk += "<a href=http://www.youtube.com/watch?v=QGRWSAEQNXA>[影音] 生命三角的求生方法</a> |　"; 33 lnk += "<a href=http://www.youtube.com/watch?v=LTPM5kAYDds>採訪視頻：九歲小男孩林浩在地震中勇救兩 ...</a>";　 34 document.write(lnk);<br> 35 </script>
[/code]