实例代码详细介绍JavaScript中的输出数据多种方式

导读 本篇文章给大家带来了关于javascript的相关知识,在JavaScript中,不像Java等语言.....
这篇文章给你带来了关于javascript相关知识,在 JavaScript 中,不像 Java 没有任何打印或输出语言的方法js通过四种方式输出数据,本文通过实例代码给大家详细介绍,希望对大家有所帮助。

【相关推荐:javascript视频教程、web前端】

前言

在 JavaScript 中,不像 Java 没有任何打印或输出方法,通常使用以下语言 4 输出数据的方出数据。

  • 使用 window.alert() 弹出警告框
  • 使用 document.write() 写入内容 HTML 文档中
  • 使用 innerHTML 写入到 HTML 元素
  • 使用 console.log() 控制台写入浏览器

用它们来展示一个例子。

window.alert()

新建一个 HTML 然后使用文件 VSCode 写下以下代码。

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">         <title>window.alert()</title>     </head>     <body>         <p>弹窗显示</p>         <script type="text/javascript">             window.alert("这是弹窗测试!");         </script>      </body> </html>

接着用浏览器打开上述文件,打开时就会显示如下弹窗,点击确定后弹窗关闭,然后在网页中显示内容。

document.write()

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">         <title>document.write()</title>     </head>     <body>         <p>写入 HTML 文档</p>         <script type="text/javascript">             document.write(Date());         </script>      </body> </html>

新建 HTML 浏览器打开文件并写入上述内容后,页面将显示以下内容 document.write() 写入当前时间是成功的。但需要注意的是,如果 document.write() 在内容加载前与其他内容同时加载,可与其他内容一起显示。但是,如果页面内容在加载后执行 document.write(),那么之前页面加载完的内容都将被写入的内容所覆盖。

同时展示

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">         <title>document.write()</title>     </head>     <body>         <p>写入 HTML 文档</p>         <button onclick="showDate()">展示时间</button>         <script type="text/javascript">             function showDate() {                 document.write(Date());             }         </script>     </body> </html>

以下是页面加载完成后的执行 document.write() 前后对比,说明页面加载后调用 document.write() 覆盖以前的页面内容。

前后

image-20220228153609330

innerHTML

JavaScript 若要访问某一个 HTML 此时可以使用元素 document.getElementById(id) 然后可以使用方法 innerHTML 获取或插入元素内容。

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">         <title>innerHTML</title>     </head>     <body>         <p id="inner">操纵 HTML 元素</p>         <button onclick="changeContext()">点击修改上述内容</button>          <script type="text/javascript">             function changeContext() {                 document.getElementById("inner").innerHTML = "修改后的内容";             }         </script>      </body> </html>

修改前修改后

console.log()

要使用 console.log() 该方法需要我们的浏览器来支持调试一般推荐使用 Chrome。然后使用 F12 打开键打开调试模式,切换到调试窗口 Console 菜单。因为我在这里用的是 Edge,所以显示的是控制台,主要自己的喜好选择浏览器,但一般更推荐 Chrome。

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">         <title>console.log</title>     </head>     <body>         <p>查看浏览器调试模式</p>         <script type="text/javascript">             var num1 = 11;             var num2 = 10;             console.log(num1   num2);         </script>     </body> </html>

总结

以上是关于的 JavaScript 虽然输出的相关内容不同 Java 那样有类似 System.out.println() 打印和输出方法,但使用上述方法 4 基本满足日常开发需求的方法。

【相关推荐:javascript视频教程、web前端】

以上是实例代码的详细介绍JavaScript请更多关注输出数据多种方式的详细内容。php中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-08-06 00:00:37

猜你喜欢

最新文章