1.2.javascript怎样输出数据

前言

在浏览器中我们可以打开各种各样的网页，网页中有很多文字或其它内容(图片，音频，视频）。javascript(简称js)同样也可以输出文字或其他内容，那么js代码怎么把内容(文字）输出到网页中，或者在浏览器页面中怎么显示出来内容(文字）呢？本文介绍js输出数据的几种方式

一、js代码输出数据（在网页中显示数据）有下面几种办法

1.1.document.write(数据内容);

在网页中直接输出数据内容;

1.2.alert(数据内容);

在页面中弹出一个警告框，显示数据内容。

1.3.console.log(数据内容);

在调试窗口(浏览器按F12键)中显示数据内容。

1.4.element.innerHTML(数据内容);

在某个元素element中输出数据内容。

二、js数据输出方法document.write(数据内容)

2.1.document.write(数据内容);表示把数据内容输出到网页正文中

在网页中直接输出数据内容;

2.2.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">
    <title>js数据输出方法-document.write的用法</title>
    <script>
        document.write("今天我学了js代码：");//输出一个字符串数据
        document.write(33);//输出一个数字数据
        document.write(true);//输出一个布尔值数据-true
        document.write(false);//输出一个布尔值数据-false
        document.write(null);//输出一个空数据
        document.write("<h1>今天学习js数据输出</h1>");//输出一个带标签的数据
    </script>
</head>
<body>
</body>
</html>

#打印结果：
在网页正文中输出了对应的数据内容，查看效果。

2.3.上文代码显示效果;

2.3.1.如上图上面1-6的序号分别代表了6句document.write代码输出的内容。前五个只是输出了文字内容，没有任何格式，第6个加了一个html标签h1，让文字占用了一整行。

2.3.2.用document.write()输出内容时，它显示在了网页正文中。

三、js数据输出方法alert(数据内容)

3.1.alert(数据内容);表示把数据内容输出到弹出框中

在网页的弹出框中输出数据内容;

3.2.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">
    <title>js数据输出方法-document.write的用法</title>
    <script>
        alert("今天我学了js代码alert方法：");//输出一个字符串数据
        alert(33);//输出一个数字数据
        alert(true);//输出一个布尔值数据-true
        alert(false);//输出一个布尔值数据-false
        alert(null);//输出一个空数据
        alert("<h1>今天学习js数据输出</h1>");//输出一个带标签的数据
    </script>
</head>
<body>
</body>
</html>

#打印结果：
在网页弹出框中显示了对应的数据内容，查看效果。

3.3.上文代码显示效果，每点一次确定，就跳到下一个图中,一共弹出6次;

3.3.1.如上面六张图分别代表了6句alert代码执行后输出的内容。弹出框的内容不会解析html代码，原生态输出字符串内容。

3.3.2.用alert()输出内容时，内容显示在了弹出框中。

四、js数据输出方法console.log(数据内容)

4.1.console.log(数据内容);表示把数据内容输出到网页调试窗口中

打开网页，点击键盘F12，在调试窗口中找到console窗口，内容会输出到这个窗口;

4.2.console.log(数据内容)案例(照下面的代码敲击，并在网页中查看效果);

<!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">
    <title>js数据输出方法-document.write的用法</title>
    <script>
        console.log("现在我练习的了console.log代码：");//输出一个字符串数据
        console.log(33);//输出一个数字数据
        console.log(true);//输出一个布尔值数据-true
        console.log(false);//输出一个布尔值数据-false
        console.log(null);//输出一个空数据
        console.log("<h1>今天学习js数据输出</h1>");//输出一个带标签的数据
    </script>
</head>
<body>
</body>
</html>

#打印结果：
在网页调试窗口(控制台)输出了对应的数据内容，查看效果。

4.3.上文代码显示效果;

4.3.1.如上图在调试窗口（控制台）中显示了console.log代码输出的内容。在调试窗口中h1标签也没有被解析。

4.3.2.用console.log()输出内容时，它显示在了调试窗口中。

4.3.3.如上图，打开该文档，键盘上按F12键，找到并点击Console按钮，就可以进入调试窗口查看输出结果了。

五、js数据输出方法element.innerHTML(数据内容)

5.1.element.innerHTML(数据内容);表示把数据内容输出到网页中的html标签element中