当前位置：主页 > 查看内容

一篇文章带你了解JavaScript输出

发布时间：2021-07-14 00:00| 有 位朋友查看

简介：在某些情况下，您可能需要从JavaScript代码生成输出。例如，您可能想查看变量的值，或向浏览器控制台写一条消息，以帮助您调试正在运行的JavaScript代码中的问题，等等。 一、JavaScript显示能力 JavaScript可以使用不同的方法显示数据。 写入警报框, 使用 w……

 

在某些情况下，您可能需要从JavaScript代码生成输出。例如，您可能想查看变量的值，或向浏览器控制台写一条消息，以帮助您调试正在运行的JavaScript代码中的问题，等等。

一、JavaScript显示能力

JavaScript可以使用不同的方法“显示”数据。

写入警报框, 使用 window.alert()。写入HTML输出 使用 document.write()。写在HTML元素, 使用 innerHTML。写入浏览器控制台, 使用 console.log()。

二、分析方法

1. 使用 window.alert()

可以使用警报框来显示数据。

例：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9.   <h1>我的第一个Web页面</h1> 
  10.   <p>我的第一个段落.</p> 
  11.  
  12.   <script> 
  13.     window.alert(5 + 6); 
  14. </script> 
  15.  
  16. </body> 
  17. </html> 

显示结果：

2. 使用 document.write()

出于测试目的，使用document.write()更方便 。

例：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9.   <h1>我的第一个Web页面</h1> 
  10.   <p>我的第一个段落.</p> 
  11.  
  12.   <script> 
  13.     document.write(5 + 6); 
  14. </script> 
  15.  
  16. </body> 
  17. </html> 

使用document.write()后， HTML文档完全加载，将删除所有现有的HTML。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9.   <h1>我的第一个Web页面</h1> 
  10.   <p>我的第一个段落</p> 
  11.  
  12.   <button type="button" onclick="document.write(5 + 6)">试试</button> 
  13.  
  14. </body> 
  15. </html> 

图片注：

document.write()方法只用于测试。

3. 使用 innerHTML

访问一个HTML元素, JavaScript可以使用 document.getElementById(id) 方法。

id属性定义HTML元素. innerHTML 属性定义HTML内容。

例：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9.   <p>我的第二个段落.</p> 
  10.  
  11.   <p id="demo">结果：：</p> 
  12.  
  13.   <script> 
  14.   document.getElementById("demo").innerHTML = 50 + 6; 
  15. </script> 
  16.  
  17. </body> 
  18. </html> 

为了在HTML中"显示数据", (多数情况下) 你可以设置 innerHTML 属性。

4. 使用 console.log()

在你的浏览器，你可以使用console.log()方法显示数据。

例：

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <meta name="viewport" content="width=640, user-scalable=no"> 
  6.         <title>项目</title> 
  7.  
  8.     </head> 
  9. <body style="background-color: aqua;"> 
  10.  
  11.   <p>我的第一个段落.</p> 
  12.  
  13.   <p> 
  14.   在你的浏览器中打开调试窗口，使用F12，然后选择"Console"菜单项 
  15.   </p> 
  16.   <p>再点击运行(run).</p> 
  17.  
  18.   <script> 
  19.     console.log(5 + 6); 
  20. </script> 
  21.  
  22. </body> 
  23. </html>   

要访问Web浏览器的控制台，请先按F12键盘上的键以打开开发人员工具，然后单击控制台选项卡。

三、总结

本文基于JavaScript，介绍了常见4种的输出， “显示的方法” 。对每一种在实际应用的时候，需要注意什么，应该怎么去运用，做了详细的讲解。用丰富的效果图 能够让读者更好的理解。更直观，更明朗。

希望大家可以根据文章的内容，积极尝试，有时候看到别人实现起来很简单。但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望能够帮助你。

本文转载自微信公众号「前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。


本文转载自网络，原文链接：
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：学习编程中少走这5个弯路 下一篇：我是怎么学习Python的

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐