JavaScript輸出 · 跟濤哥學前端

[TOC] * * * * * # JavaScript 輸出 JavaScript 沒有任何打印或者輸出的函數。 JavaScript 顯示數據 JavaScript 可以通過不同的方式來輸出數據： * 使用 window.alert() 彈出警告框。 * 使用 document.write() 方法將內容寫到 HTML 文檔中。 * 使用 innerHTML 寫入到 HTML 元素。 * 使用 console.log() 寫入到瀏覽器的控制臺。 ### 使用 window.alert() ~~~ <!DOCTYPE html> <html> <body> <h1>我的第一個頁面</h1> <p>我的第一個段落。</p> <script> window.alert(5 + 6); </script> </body> </html> ~~~ 學習第一個語句，就是alert語句。 ~~~ <script type="text/javascript"> alert("今天我們開始學習javascript"); alert("哈哈哈，我很高興和大家一起學習"); </script> ~~~ alert就是英語里面的“警報”的意思。用途就是彈出“警告框”： ![](https://box.kancloud.cn/978a8139138ba46242b1e855b3d77e1b_494x257.png)<br/> 如果我們想彈出兩次警告框，那么就要寫兩條語句： ~~~ <script type="text/javascript"> alert("今天天氣真好"); alert("哈哈哈哈"); </script> ~~~ 學習程序，是有規律可循的，就是程序是有相同的部分，這些部分就是一種規定，不能更改的，我們成為：語法。至于為什么alert后面有一個圓括號，為什么里面又有引號，我們現在先不管。因為你知道，只要我按照這個語法書寫，功能就會實現。世界上不管什么編程語言，都有一個規定，程序是一句一句執行，執行完上面的語句，才能之后下面的語句： ~~~ <script type="text/javascript"> alert("今天天氣真好"); alert("哈哈哈哈"); </script> ~~~ ### 操作 HTML 元素如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。請使用 "id" 屬性來標識 HTML 元素，并 innerHTML 來獲取或插入元素內容： ~~~ <!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <p id="demo">我的第一個段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html> ~~~ 以上 JavaScript 語句（在 <script> 標簽中）可以在 web 瀏覽器中執行： document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼。 innerHTML = "段落已修改。" 是用于修改元素的 HTML 內容(innerHTML)的 JavaScript 代碼。 ### 寫到 HTML 文檔出于測試目的，您可以將JavaScript直接寫在HTML 文檔中： ~~~ <!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <p>我的第一個段落。</p> <script> document.write(Date()); </script> </body> </html> ~~~ ~~~ !DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <p>我的第一個段落。</p> <button onclick="myFunction()">點我</button> <script> function myFunction() { document.write(Date()); } </script> </body> </html> ~~~ ### 寫到控制臺如果您的瀏覽器支持調試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。瀏覽器中使用 F12 來啟用調試模式，在調試窗口中點擊 "Console" 菜單。 ~~~ <!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html> ~~~ ![](https://box.kancloud.cn/803dd18390049a731ccad11e3d6c6c40_345x118.png)