JavaScript 輸出顯示內(nèi)容(document.write、alert、innerHTML、console.log)
JavaScript 輸出
JavaScript 沒有任何打印或者輸出的函數(shù)。
JavaScript 顯示數(shù)據(jù)
JavaScript 可以通過不同的方式來輸出數(shù)據(jù)：
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺。
使用 window.alert()
你可以彈出警告框來顯示數(shù)據(jù)：
<!DOCTYPE html> <html> <body> <h1>我的第一個頁面</h1> <p>我的第一個段落。</p> <script> window.alert(5 + 6); </script> </body> </html>
操作 HTML 元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
請使用 "id" 屬性來標(biāo)識 HTML 元素，并 innerHTML 來獲取或插入元素內(nèi)容：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p id="demo">我的第一個段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
以上 JavaScript 語句（在 <script> 標(biāo)簽中）可以在 web 瀏覽器中執(zhí)行：
document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 內(nèi)容(innerHTML)的 JavaScript 代碼。
在本教程中
在大多數(shù)情況下，在本教程中，我們將使用上面描述的方法來輸出：
下面的例子直接把 id="demo" 的 <p> 元素寫到 HTML 文檔輸出中：
寫到 HTML 文檔
出于測試目的，您可以將JavaScript直接寫在HTML 文檔中：
<!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <p>我的第一個段落。</p> <script> document.write(Date()); </script> </body> </html>
請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。
如果在文檔已完成加載后執(zhí)行 document.write，整個 HTML 頁面將被覆蓋。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p>我的第一個段落。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>
寫到控制臺console.log()
如果您的瀏覽器支持調(diào)試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來啟用調(diào)試模式， 在調(diào)試窗口中點(diǎn)擊 "Console" 菜單。
<!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
實(shí)例 console 截圖：
程序中調(diào)試是測試，查找及減少bug(錯誤)的過程。
注意這個console.log() 對于ie8及以下版本會報錯，測試后注意注釋掉。
相關(guān)文章
在js中，創(chuàng)建對象的方式有工廠模式和構(gòu)造函數(shù)模式等,但是，構(gòu)造函數(shù)中的每個方法都需要在實(shí)例對象中重新創(chuàng)建一遍，不能復(fù)用，就需要使用原型模式來創(chuàng)建對象。下面我們來了解一下吧2019-05-05
關(guān)于js中alert彈出窗口文本換行問題簡單詳細(xì)說明
js中alert彈出窗口文本換行是一個小問題，本人很是郁悶，于是搜集整理下，曬出來和大家分享2012-12-12
JavaScript實(shí)現(xiàn)的GBK、UTF8字符串實(shí)際長度計算函數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的GBK、UTF8字符串實(shí)際長度計算函數(shù),需要的朋友可以參考下2014-08-08
簡介JavaScript中setUTCSeconds()方法的使用
這篇文章主要介紹了簡介JavaScript中setUTCSeconds()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
深入理解JavaScript系列（22）：S.O.L.I.D五大原則之依賴倒置原則DIP詳解
這篇文章主要介紹了深入理解JavaScript系列（22）：S.O.L.I.D五大原則之依賴倒置原則DIP詳解,本文講解了DIP and JavaScript、何時依賴注入等內(nèi)容,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄狫avascript操作dom對象之select全面解析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
我的網(wǎng)頁的圖片較多，而服務(wù)器也不是很好，所以每次打開網(wǎng)頁后總有一、兩幅圖片無法顯示，但刷新一遍后又全部可顯示了,這種問題相信每個人都遇到過，接下來介紹詳細(xì)解決方法2012-12-12
這篇文章主要介紹了JQueryDOM之樣式操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript中Number.MIN_VALUE屬性的使用示例
這篇文章主要介紹了JavaScript中Number.MIN_VALUE屬性的使用示例,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了javascript 實(shí)現(xiàn)原路返回的方法,需要的朋友可以參考下2015-01-01