JavaScript 基础用法与输出

吐槽君发布于 3年前分类：javascript

HTML 中的脚本必须位于标签之间。
脚本可被放置在 HTML 页面的和部分中,甚至在html中的任何位置
JavaScript 没有任何打印或者输出的函数, 但是JavaScript 可以通过不同的方式来输出数据

使用 window.alert() 弹出警告框

使用 innerHTML 写入到 HTML 元素

使用 document.write() 方法将内容写到 HTML 文档中

使用 console.log() 写入到浏览器的控制台

用法

script 标签

如需在 HTML 页面中插入 JavaScript，请使用会告诉 JavaScript 在何处开始和结束。
之间的代码行包含了 JavaScript:

<script>
alert("我的第一个 JavaScript");
</script>

⚠️ 浏览器会解释并执行位于之间的 JavaScript 代码, 那些老旧的实例可能会在

内嵌的JavaScript

您可以在 HTML 文档中放入不限数量的脚本
脚本按规范一般位于HTML 的或部分中，或者同时存在于两个部分中,
通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容

head 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的部分
该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>JavaScript 入门教程</title>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";
      }
    </script>
  </head>

  <body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
  </body>

</html>

尝试一下 »

body 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的部分。
该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript 入门教程</title>
  </head>

  <body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">一个段落。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";
      }
    </script>
  </body>

</html>

尝试一下 »

在本例中，JavaScript 会在页面加载时向 HTML 的写文本：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript 入门教程</title>
  </head>

  <body>
    <p> JavaScript 能够直接写入 HTML 输出流中： </p>

    <script>
      document.write("<h1>这是一个标题</h1>");
      document.write("<p>这是一个段落。</p>");
    </script>

    <p>
      您只能在 HTML 输出流中使用 <strong>document.write</strong>。
      如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>
  </body>
  
</html>

尝试一下 »

外联的 JavaScript

也可以把脚本保存到外部文件中, 外部文件通常包含被多个网页使用的代码
外部 JavaScript 文件的文件扩展名是 .js
如需使用外部文件，请在

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript 入门教程</title>
  </head>

  <body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
    <script src="myScript.js"></script>
  </body>

</html>

你可以将脚本放置于或者中，放在

function myFunction() {
  document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";
}

尝试一下 »

输出

window.alert() 弹出提示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 入门教程</title>
</head>

  <body>
    <h1>我的第一个页面</h1>
    <p>我的第一个段落</p>
  
    <script>
      window.alert(5 + 6);
    </script>
  </body>

</html>

尝试一下 »

console.log() 写到控制台

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

<!DOCTYPE html>
<html>
  <body>
    
    <h1>我的第一个 Web 页面</h1>

    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>

  </body>
</html>

尝试一下 »

document.write() 写到 HTML 文档

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript 入门教程</title>
  </head>

  <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>

尝试一下 »

innerHTML 操作 HTML 元素

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

<!DOCTYPE html>
<html>
  <body>
    
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">我的第一个段落</p>

    <script>
      setTimeout(() => {
        document.getElementById("demo").innerHTML = new Date() + "段落已修改";
      }, 1000);
    </script>
    
  </body>
</html>

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

尝试一下 »

作者：掘金-JavaScript 基础用法与输出

我来回复

暂无回复内容