一、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中

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

5.2.element.innerHTML(数据内容)案例(照下面的代码敲击,并在网页中查看效果);

<!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>

</head>
<body>

  <h1></h1>
  <p></p>
  <div></div>
  <a></a>
  <span><span>
  <ul>
  <li></li>
  </li>
    <script>
        var h1 = document.getElementsByTagName('h1')[0];//找到html中的h1代码,这个方法document.getElementsByTagName以后会学
        h1.innerHTML = "现在我练习的了console.log代码:";//输出一个字符串数据
        var p = document.getElementsByTagName('p')[0];//找到html中的p代码,这个方法document.getElementsByTagName以后会学
        p.innerHTML = 33;//输出一个数字数据
        var div = document.getElementsByTagName('div')[0];//找到html中的div代码,这个方法document.getElementsByTagName以后会学
        div.innerHTML = true;//输出一个布尔值数据-true
        var a = document.getElementsByTagName('a')[0];//找到html中的div代码,这个方法document.getElementsByTagName以后会学
        a.innerHTML = false;//输出一个布尔值数据-false
        var span = document.getElementsByTagName('span')[0];//找到html中的span代码,这个方法document.getElementsByTagName以后会学
        span.innerHTML = null;//输出一个空数据
        var li = document.getElementsByTagName('li')[0];//找到html中的li代码,这个方法document.getElementsByTagName以后会学
        li.innerHTML = "<h1>今天学习js数据输出</h1>";//输出一个带标签的数据
    </script>
</body>
</html>

#打印结果:
在网页调试窗口输出了对应的数据内容,查看效果。

5.3.上文代码在页面中显示效果;

5.3.1.如上图在页面正文区域中,把数据内容显示在了对应的html元素中。html元素让文本格式化显示,null代表是空数据所以没有显示出来。

5.3.2.用element.innerHTML输出内容时,内容被插入到html标签中格式化(例如:p和h1标签默认给文字增加边距),然后显示在页面中。

 

 

本课程知识点:

  1. 浏览器页面正文
  2. 浏览器控制台
  3. js数据输出方法document.write()
  4. js数据输出方法alert()
  5. js数据输出方法console.log()
  6. js数据输出方法element.innerHTML = 内容

 

博主联系方式:

  • 微信:34419369
  • QQ: 34419369
  • 公众号:前方录
  • 有什么不懂的地方欢迎联系我,帮到你是我会很开心
  • 学习方法:务必照着本文代码多敲打几遍,并且在浏览器中查看对应效果,深入理解。

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注