JavaScript|输出显示

1.显示数据

JavaScript 可以通过不同的方式来输出数据：

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

2.window.alert()

可以弹出警告框来显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输出</title>
</head>
<body>

<script>.alert('提示信息')</script>

</body>
</html>

效果：

JavaScript|输出显示_html

3.innerHTML

如果需要从JavaScript中访问某个元素，可以使用document.getElementByld(id)方法，id属性用来表示HTML元素，并innerHTML来获取或插入元素内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输出</title>
</head>
<body>
    
<h1 id="sun">太阳</h1>
<script>.getElementById("sun").innerHTML = "月亮";</script>

</body>
</html>

这样就能把h1的内容修改为月亮：

JavaScript|输出显示_提示信息_02

4.document.write()

在月亮之后显示时间：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输出</title>
</head>
<body>

<script>// 弹出警告信息
  window.alert('提示信息');</script>

<h1 id="sun">太阳</h1>
<script>.getElementById("sun").innerHTML = "月亮";
  document.write(Date());</script>

</body>
</html>

效果：

JavaScript|输出显示_提示信息_03

5.console.log()

如果浏览器支持调试，可以使用 console.log() 方法在浏览器中显示JavaScript值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输出</title>
</head>
<body>

<script>// 弹出警告信息
  window.alert('提示信息');</script>

<h1 id="sun">太阳</h1>
<script>.getElementById("sun").innerHTML = "月亮";
  document.write(Date());
  a = 5;
  b = 6;
  c = a + b;
  console.log(c);</script>

</body>
</html>

将a+b的值写到控制台：

JavaScript|输出显示_提示信息_04

人生没有白走的路，每一步都算数！