JavaScript基础：如何显示数据

2020-04-30 本文已影响0人烂笔头2020

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

1、使用 window.alert()

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个页面</h1>
    <p>我的第一个段落。</p>

    <script>
      window.alert("这是一个警告框");
    </script>

  </body>
</html>

2、操作 HTML 元素

从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。
这里要用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
  <body>
    <p id="demo">我的第一个段落</p>
    <script>
      document.getElementById("demo").innerHTML = "段落已修改。";
    </script>
  </body>
</html>

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

3、写到 HTML 文档

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <script>
      document.write(Date());
    </script>
  </body>
</html>

使用 document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖.。

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <button onclick="myFunction()">点我</button>
    <script>
      function myFunction() {document.write(Date());}
    </script>
  </body>
</html>

4、写到控制台

可以使用 console.log() 方法在浏览器中显示 JavaScript 值，浏览器中使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
  <body>

      <h1>我的第一个 Web 页面</h1>
      <p>浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。</p>
      <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>

  </body>
</html>