一篇文章帶你了解JavaScript輸出
在某些情況下，您可能需要從JavaScript代碼生成輸出。例如，您可能想查看變量的值，或向?yàn)g覽器控制臺(tái)寫(xiě)一條消息，以幫助您調(diào)試正在運(yùn)行的JavaScript代碼中的問(wèn)題，等等。
一、JavaScript顯示能力
JavaScript可以使用不同的方法“顯示”數(shù)據(jù)。
寫(xiě)入警報(bào)框, 使用 window.alert()。寫(xiě)入HTML輸出 使用 document.write()。寫(xiě)在HTML元素, 使用 innerHTML。寫(xiě)入瀏覽器控制臺(tái), 使用 console.log()。
二、分析方法
1. 使用 window.alert()
可以使用警報(bào)框來(lái)顯示數(shù)據(jù)。
例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <h1>我的第一個(gè)Web頁(yè)面</h1>
- <p>我的第一個(gè)段落.</p>
- <script>
- window.alert(5 + 6);
- </script>
- </body>
- </html>
顯示結(jié)果：
2. 使用 document.write()
出于測(cè)試目的，使用document.write()更方便 。
例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <h1>我的第一個(gè)Web頁(yè)面</h1>
- <p>我的第一個(gè)段落.</p>
- <script>
- document.write(5 + 6);
- </script>
- </body>
- </html>
使用document.write()后， HTML文檔完全加載，將刪除所有現(xiàn)有的HTML。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <h1>我的第一個(gè)Web頁(yè)面</h1>
- <p>我的第一個(gè)段落</p>
- <button type="button" onclick="document.write(5 + 6)">試試</button>
- </body>
- </html>
圖片注：
document.write()方法只用于測(cè)試。
3. 使用 innerHTML
訪問(wèn)一個(gè)HTML元素, JavaScript可以使用 document.getElementById(id) 方法。
id屬性定義HTML元素. innerHTML 屬性定義HTML內(nèi)容。
例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <p>我的第二個(gè)段落.</p>
- <p id="demo">結(jié)果：：</p>
- <script>
- document.getElementById("demo").innerHTML = 50 + 6;
- </script>
- </body>
- </html>
為了在HTML中"顯示數(shù)據(jù)", (多數(shù)情況下) 你可以設(shè)置 innerHTML 屬性。
4. 使用 console.log()
在你的瀏覽器，你可以使用console.log()方法顯示數(shù)據(jù)。
例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=640, user-scalable=no">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <p>我的第一個(gè)段落.</p>
- <p>
- 在你的瀏覽器中打開(kāi)調(diào)試窗口，使用F12，然后選擇"Console"菜單項(xiàng)
- </p>
- <p>再點(diǎn)擊運(yùn)行(run).</p>
- <script>
- console.log(5 + 6);
- </script>
- </body>
- </html>
要訪問(wèn)Web瀏覽器的控制臺(tái)，請(qǐng)先按F12鍵盤上的鍵以打開(kāi)開(kāi)發(fā)人員工具，然后單擊控制臺(tái)選項(xiàng)卡。
三、總結(jié)
本文基于JavaScript，介紹了常見(jiàn)4種的輸出， “顯示的方法” 。對(duì)每一種在實(shí)際應(yīng)用的時(shí)候，需要注意什么，應(yīng)該怎么去運(yùn)用，做了詳細(xì)的講解。用豐富的效果圖 能夠讓讀者更好的理解。更直觀，更明朗。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單。但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望能夠幫助你。
本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。
