# Javascript 輸出 ## 1.Javascripts顯示方案 Javascripts能以不同方式顯示數據 * 使用 window.alert() 寫入警告框 * 使用 document.write() 寫入 HTML 输出 * 使用 innerHTML 寫入 HTML 元素 * 使用 console.log() 寫入瀏覽器控制台 ## 2.使用 innerHTML 如需訪問 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。 id 屬性定義 HTML 元素。innerHTML 属性定義 HTML 内容： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>我的段落</p> <p id="demo"></p> <button onclick="test()">按鈕</button> <script> function test() { document.getElementById('demo').innerHTML = 5 + 6 } </script> </body> </html> ``` ## 3.使用 document.write() 出于測試目的，使用 document.write() 比較方便： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>我的段落</p> <script> document.write(5 + 7) </script> </body> </html> ``` **注意：在 HTML 文檔完全加載後使用 document.write() 將删除所有已有的 HTML ：** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>我的段落</p> <button onclick="document.write(5+6)">按下去所有html都會洗掉</button> </body> </html> ``` ## 4.使用 window.alert() 你能夠使用警告框來顯示數據 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>警告框會顯示數據</p> <script> window.alert(5 + 6) </script> </body> </html> ``` ## 5.使用 console.log() 在瀏覽器中，您可使用 console.log() 方法来顯示數據。(按下F12在案console) ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>警告框會顯示數據</p> <script> console.log(5 + 6) </script> </body> </html> ```