JAVASCRIPT（二）--- JAVASCRIPT四種輸出方式

時間 2019-12-08

標籤 javascript 四種輸出方式欄目 JavaScript 简体版

原文原文鏈接

JavaScript 沒有任何打印或者輸出的函數。html

JavaScript 能夠經過不一樣的方式來輸出數據：瀏覽器

一、使用 window.alert() 彈出警告框。函數

二、使用 document.write() 方法將內容寫到 HTML 文檔中。spa

三、使用 innerHTML 寫入到 HTML 元素。調試

四、使用 console.log() 寫入到瀏覽器的控制檯。code

如下將詳細解釋：orm

一、使用 window.alert()

你能夠彈出警告框來顯示數據：htm

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <h1>個人第一個頁面</h1>
 5 <p>個人第一個段落。</p>
 6 <script>
 7 window.alert(5 + 6);//會計算出結果11
 8 </script>
 9 </body>
10 </html>

二、使用 document.write()

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <h1>個人第一個 Web 頁面</h1>
 5 <p>個人第一個段落。</p>
 6 <script>
 7 document.write(Date());
 8 </script>
 9 </body>
10 </html>

請使用 document.write() 僅僅向文檔輸出寫內容。若是在文檔已完成加載後執行 document.write（在函數中使用），整個 HTML 頁面將被覆蓋。blog

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>菜鳥教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 <script>
 9   var carname1="Volvo XC60";
10   var carname2='Volvo XC60';
11   var answer1='It\'s alright';
12   var answer2="He is called \"Johnny\"";
13   var answer3='He is called "Johnny"';
14   document.write(carname1 + "<br>"+ "11111"+"222222")
15   document.write(carname2 + "<br>")
16   document.write(answer1 + "<br>")
17   document.write(answer2 + "<br>")
18   document.write(answer3 + "<br>")
19 </script>
20 </body>
21 </html>

關於單引號和雙引號的區別：教程

結論：（1）只使用字符的字符串，單引號和雙引號沒有區別

　（2）在單引號包括的字符串中能夠直接用雙引號，在雙引號包括的字符串中能夠直接用單引號

　（3）若是在雙引號包括的字符串中用雙引號，須要用反斜槓轉義，注意是"\" ;一樣在單引號包括的字符串中用單引號，也須要轉義

　（4）若是要用反斜槓，則輸入‘\\’

三、使用 innerHTML 寫入到 HTML 元素

如需從 JavaScript 訪問某個 HTML 元素，您能夠使document.getElementById(id) 方法。請使用 "id" 屬性來標識 HTML 元素，並 innerHTML 來獲取或插入元素內容

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <h1>個人第一個 Web 頁面</h1>
 5 <p id="demo">個人第一個段落</p>
 6 <script>
 7 document.getElementById("demo").innerHTML = "段落已修改。";//修改p的字段
 8 </script>
 9 </body>
10 </html>

四、寫到控制檯

若是您的瀏覽器支持調試，你能夠使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。瀏覽器中使用 F12 來啓用調試模式，在調試窗口中點擊 "Console" 菜單

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <h1>個人第一個 Web 頁面</h1>
 5 <script>
 6 a = 5;
 7 b = 6;
 8 c = a + b;
 9 console.log(c);
10 </script>
11 </body>
12 </html>