【原】一篇文章带你了解avaScript输出

Python进阶者 2023-02-10 发布于广东

展开全文

回复“前端”即可获赠前端相关学习资料

今

日

鸡

汤

疾风知劲草，板荡识诚臣。

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

一、JavaScript显示能力

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

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

二、分析方法

1. 使用 window.alert()

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

例：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>项目</title></head><body style="background-color: aqua;">
  <h1>我的第一个Web页面</h1>  <p>我的第一个段落.</p>
  <script>    window.alert(5 + 6);</script>
</body></html>

显示结果：

2. 使用 document.write()

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

例：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>项目</title></head><body style="background-color: aqua;">
  <h1>我的第一个Web页面</h1>  <p>我的第一个段落.</p>
  <script>    document.write(5 + 6);</script>
</body></html>

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

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

注：

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

3. 使用 innerHTML

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

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

例：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>项目</title></head><body style="background-color: aqua;">
  <p>我的第二个段落.</p>
  <p id="demo">结果：：</p>
  <script>  document.getElementById("demo").innerHTML = 50 + 6;</script>
</body></html>

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

4. 使用 console.log()

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

例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=640, user-scalable=no">        <title>项目</title>
    </head><body style="background-color: aqua;">
  <p>我的第一个段落.</p>
  <p>  在你的浏览器中打开调试窗口，使用F12，然后选择"Console"菜单项  </p>  <p>再点击运行(run).</p>
  <script>    console.log(5 + 6);</script>
</body></html>