JAVASCRIPT(二)--- JAVASCRIPT四种输出方式

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来输出数据:

1、使用 window.alert() 弹出警告框。

2、使用 document.write() 方法将内容写到 HTML 文档中。

3、使用 innerHTML 写入到 HTML 元素。

4、使用 console.log() 写入到浏览器的控制台。

以下将详细解释:

1、使用 window.alert()

你可以弹出警告框来显示数据:

 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>

2、使用 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 页面将被覆盖。

 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)如果要用反斜杠,则输入‘\\’

3、使用 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>

4、写到控制台

如果您的浏览器支持调试,你可以使用 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>
posted on 2017-12-15 16:47  qwert50298  阅读(848)  评论(0编辑  收藏  举报