JavaScript用法-带你详细解读​JavaScript的基本用法

那些正在考虑开始学习 JavaScript 或刚开始学习 JavaScript 的同学可能想知道首先在哪里编写 JavaScript。

准备运行JavaScript

在开始编码之前，我们需要准备运行一个用 JavaScript 编写的程序。这一次我将解释在哪里编写 JavaScript。让我们也检查一下执行结果。

写入 HTML 文件

作为最基本的方法，您可以直接在 HTML 文件中编写 JavaScript 代码。

script标签

在 HTML 中，各种标签用于创建页面结构和内容，但也提供了用于编写 JavaScript 的标签。要在 HTML 文件中编写 JavaScript，请使用 script 标签。

在HTML中使用各种各样的标签来制作页面的构成和内容，其中包括用于编写JavaScript的标签。要在HTML文件中编写JavaScript，请使用script标记。

<script>
  //在此编写代码
</script>

举个简单的例子，如果做控制台输出，可以这样写。

<script>
  console.log('控制台输出成功');
</script>

但是在HTML文件的哪里编写script标记呢，我们现在来看一下HTML文件的整体。

script标记的位置

在HTML文件中准备script标记来记述JavaScript时，在head标记或body标记中准备。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript编写位置</title>
<script>
  // 在head内编写
</script>
</head>
  <body>
    <h1>JavaScript编写位置</h1>
    <script>
      // 在body内编写
    </script>
  </body>
</html>

现在让我们将以下代码写入 html 文件并检查结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript编写位置</title>
<script>
  // 在head内编写
</script>
</head>
  <body>
  <h1>JavaScript编写位置</h1>
  <h2>准备script标签</h2>
  <p>一般在body标记结束之前放置</p>
  <script>
console.log('在HTML文件中编写')
  </script>
</body>
</html>

以下结果显示在浏览器中。

JavaScript用法-带你详细解读JavaScript的基本用法第1张

为什么将script标签写在body标签结束之前

严格来说，script标签应该放在 head 标签内还是放在 body 标签结束之前并没有规定。那么为什么在正文中说在标签结束之前添加script标签呢？

这是因为所有 HTML 元素都是在 JavaScript 执行之前加载的。

Web 浏览器通常从上到下加载 HTML。这个解析 HTML 的过程称为“HTML 解析”。

如果在途中发现了脚本标签或外部文件，HTML解析将被中断一次，优先执行脚本标签或外部文件中写入的处理。

因此通过在 head 标记中准备 script 标记，直到 JavaScript 处理完成后才会加载 HTML 元素。

结果即使用户访问网页，内容也可能不会立即显示在屏幕上。

另一个原因是您将无法访问脚本标记之后的 HTML 元素。

<body>
  <h1>JavaScript编写位置</h1>
  <h2>准备script标签</h2>
  <script>
    const el = document.getElementById('content'); //无法获取 js出错
    el.innerHTML = 'script标签之后的元素2';
  </script>
  <!-- 在script标签后面显示 -->
  <div id="content">script标签之后的元素1</div>
</body>

在script标签中编写的JavaScript代码可以访问标签之前的HTML元素，但不能访问标签之后的HTML元素。

这需要了解DOM概念，这个我们以后再讲。

另一方面，如果要先执行JavaScript后读取 body 标签中的内容，请在 head 标签中准备一个 script 标签。

根据 JavaScript 处理的内容，有必要使用准备脚本的位置，但在开始时，最好在body标签结束之前编写。

创建 JavaScript 文件

除了直接在 HTML 文件中编写 JavaScript 之外，还有一种方法是为 JavaScript 准备一个专用文件。

如果是简单的程序，直接在 HTML 文件中编写 JavaScript 代码是没有问题的，但是随着编写代码量的增加，HTML 文件本身的可读性下降，代码的维护也变得很麻烦。

因此通常准备一个带有“.js”扩展名的 JavaScript 文件。我们看一下下面的 HTML 文件中直接编写了 JavaScript，但重写为JavaScript代码创建文件的情况。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript编写位置</title>
</head>
  <body>
    <h1>JavaScript编写位置</h1>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

将上面的内容重写成一个 JavaScript 文件，我们可以这样写：在这里，我们创建了一个名为“main.js”的 JavaScript 文件。

// main.js
console.log('Hello World');

如果你准备一个单独的文件，则不需要写脚本标签。

然后从 HTML 文件加载 JavaScript 文件。

<script src="JavaScript文件路径"></script>

文件路径用于指定 JavaScript 文件所在的位置。

关于文件引用路径的知识可以阅读这篇文章【什么是相对路径和绝对路径？区别是什么？】

如果你的 HTML 和 JavaScript 文件在同一个目录（相同的层次结构），你可以这样写。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript编写位置</title>
</head>
<body>
<h1>JavaScript编写位置</h1>
<!-- 在body结束标记之前写入JavaScript文件 -->
<script src="./main.js"></script> 
</body>
</html>

现在让我们检查结果是否正确的加载了 JavaScript 代码。如果显示如下结果，则表示加载成功。

JavaScript用法-带你详细解读JavaScript的基本用法第2张

结语

本篇文章我们学习了 JavaScript 的用法。

一种是使用 script 标签直接在 HTML 文件中编写 JavaScript 的方法。另外一种是创建 JavaScript 文件的方法。