網頁前端新手上路辛酸史

這次來講一下JS用不同方式來做輸出數據

Preview:

1.  window.alert();

2. document.write();

3. innerHTML改寫HTML元素

4. console.log()寫入控制台

第一個  wondow.alert();

這個方法使用window內建元素alert來彈出警告視窗

ex:

使用alert();瀏覽器視窗會彈出下圖的警告視窗。

但就算把12行的window刪掉，一樣可以顯示出相同的效果。(這部分有待商確 )

=> 

window 是 JavaScript 在瀏覽器環境下的全域物件， window.alert 是 WebAPI 定義的方法

JS 有範圍鏈的特性，遇到執行環境中沒有的物件就會不斷的向上層查詢，

而 window 就是最上層的全域物件，所以不管你在哪裡呼叫 alert 都會一路尋找到 window.alert 這個方法

以上 感謝強大的網友

第二個  document.write();

如同之前文章所提到的，這個方法有一個重點需要注意。

如果在文檔已經加載完成後執行document.write(); 那麼整個HTML會被覆蓋  

如果有疑問可以看我之前寫的這個文章  這邊

這邊就不贅述，只探討如何用docement.write();寫入HTML中

但別忘了，如果要寫入的是字串，記得加上雙引號

第三個 innerHTML改寫HTML元素

說實在一開始我有一個很愚蠢的想法，既然我要改寫HTML內的文字資料，

為何不一開始在寫HTML時直接將要修改的內容直接寫入。(到底要奪蠢)

後來知個方法可以大量的被廣用，最簡單的說明，

利用button或是onclick的觸發事件來變化HTML的內容。

那我們先從基本開始，不需要任何的觸發事件，直接改寫HTML內容

從以上的例子來看，在HTML內將第9行的p寫 First Paragraph (就先忽略拼錯的問題吧)

但是在第12行，直接指向id為first的p元素，將內文的HTML文字修改為 Final Resolt

但這個方法在前台並不會被發現，畢竟沒有前後比對的問題

這邊多補充一個利用按鈕來實現這個方法

會發現一開始載入資料時p還是first paragraph，但在script裡我新增了一個叫change的function功能

一旦buttont觸發(onclick)就會執行change的這個function

這樣就會看到前後的比較

第四個 console.log()寫入控制台

這個方法大多時候是用來在寫程式中來測試用的。需要知道結果的值。

基本上不可能在前台看見console的結果