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>