一篇文章帶你了解avaScript輸出
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
在某些情況下，您可能需要從JavaScript代碼生成輸出。例如，您可能想查看變量的值，或向?yàn)g覽器控制臺(tái)寫一條消息，以幫助您調(diào)試正在運(yùn)行的JavaScript代碼中的問題，等等。
一、JavaScript顯示能力
JavaScript可以使用不同的方法“顯示”數(shù)據(jù)。
寫入警報(bào)框, 使用 window.alert()。寫入HTML輸出 使用 document.write()。寫在HTML元素, 使用 innerHTML。寫入瀏覽器控制臺(tái), 使用 console.log()。
二、分析方法
1. 使用 window.alert()
可以使用警報(bào)框來顯示數(shù)據(jù)。
例：
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目title>head><body style="background-color: aqua;"><h1>我的第一個(gè)Web頁面h1><p>我的第一個(gè)段落.p><script>window.alert(5 + 6);script>body>html>
顯示結(jié)果：
2. 使用 document.write()
出于測試目的，使用document.write()更方便 。
例：
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目title>head><body style="background-color: aqua;"><h1>我的第一個(gè)Web頁面h1><p>我的第一個(gè)段落.p><script>document.write(5 + 6);script>body>html>
使用document.write()后， HTML文檔完全加載，將刪除所有現(xiàn)有的HTML。
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目title>head><body style="background-color: aqua;"><h1>我的第一個(gè)Web頁面h1><p>我的第一個(gè)段落p><button type="button" onclick="document.write(5 + 6)">試試button>body>html>
注：
document.write()方法只用于測試。
3. 使用 innerHTML
訪問一個(gè)HTML元素, JavaScript可以使用 document.getElementById(id) 方法。
id屬性定義HTML元素. innerHTML 屬性定義HTML內(nèi)容。
例：
<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ù)。
例：
<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>在你的瀏覽器中打開調(diào)試窗口，使用F12，然后選擇"Console"菜單項(xiàng)p><p>再點(diǎn)擊運(yùn)行(run).p><script>console.log(5 + 6);script>body>html>
要訪問Web瀏覽器的控制臺(tái)，請先按F12鍵盤上的鍵以打開開發(fā)人員工具，然后單擊控制臺(tái)選項(xiàng)卡。
三、總結(jié)
本文基于JavaScript，介紹了常見4種的輸出， “顯示的方法” 。對每一種在實(shí)際應(yīng)用的時(shí)候，需要注意什么，應(yīng)該怎么去運(yùn)用，做了詳細(xì)的講解。用豐富的效果圖 能夠讓讀者更好的理解。更直觀，更明朗。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡單。但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡單，希望能夠幫助你。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請?jiān)诤笈_(tái)回復(fù)【入群】
萬水千山總是情，點(diǎn)個(gè)【在看】行不行