網頁前端新手上路辛酸史

學習網址: http://www.runoob.com/js/js-intro.html

今天在學JS第一章的時候看到一句令人疑惑的話

" 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档 "

看到我都傻了，完全不懂什麼意思。甚麼叫做文檔加載後使用該方法?

上網做了一下功課，稍微整理出一個頭緒，總結的來說:

HTML是屬於網頁加載後由上而下透過原始碼來呈現的靜態網頁語言，

而JS可以搭配HTML及CSS做動態反應。但tricky的是JS不單單只是可以呈現動態效果，當然靜態頁面也可以達成。

( 我想這就是很多新手覺得難學的地方，因為code從來不是只有一個方法可以解決你的的效果。)

回歸問題，我們分兩個案例來觀察:

第一個: 用JS來呈現靜態文字

結果如下:

很明顯的，我使用的JS並沒有覆蓋整個頁面，畢竟write本身就是JS裡的功能。

透過document.write();可以輕鬆的將要表達的字串呈現在頁面上。

如果要將一段文字或字串在葉面上表達出來，最簡單的方式當然是HTML，

但JS的document.write();也可以辦到。

那到底甚麼是文檔加載後?  我們來看看第二個範例:

顯示結果如下:

看出來差別了嗎?

主要多了一個function函數，並且將document.write();寫在函數裡。

如果點擊button會發生甚麼事情?

這絕對不是超連結，這就是所謂的覆蓋整個頁面。

總結來說:JS裡面的function函數屬於被動功能，所以一開始在載入頁面的時候瀏覽器只會知道被定義了這個function，

並沒有發現function裡面有document.write();這個函式，

所以依但透過button trigger後，就會覆蓋掉整個上面的HTML內容。