JavaScript入门：脚本嵌入、外部文件与执行顺序详解

在HTML中嵌入JavaScript脚本

要在HTML页面中运行JavaScript脚本，需使用<script>标签。用户可直接在该标签内编写JavaScript代码，具体操作如下。

第一步，创建一个新的HTML文档，并将其保存为test.html。

第二步，在HTML文档的<head>部分插入一个<script>标签。

第三步，为<script>标签添加type="text/javascript"属性。

现代浏览器默认将<script>标签内的脚本视为JavaScript，因此通常可以省略type属性；若需兼容旧版浏览器，则必须显式设置该属性。

第四步，在<script>标签内部输入JavaScript代码：document.write("<h1>Hi,JavaScript!</h1>")；

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>第一个JavaScript程序</title>
  <script type="text/javascript">
    document.write("<h1>Hi,JavaScript!</h1>");
  </script>
</head>
<body></body>
</html>

创建与引用外部JavaScript文件

创建独立的JavaScript文件

JavaScript代码不仅可以内嵌于HTML文档中，还可以单独存放在JavaScript文件中。

JavaScript文件本质上是文本文件，扩展名为.js，可使用任意文本编辑器进行编辑。创建JavaScript文件的步骤如下。

第一步，新建一个文本文件，并将其保存为test.js。请注意，扩展名必须为.js，以表明该文件属于JavaScript类型。

第二步，打开test.js文件，在其中编写以下JavaScript代码。

alert("Hi,JavaScript!");

在上述代码中，alert()是Window对象的一个方法，调用该方法会弹出一个提示对话框，显示参数字符串"Hi, JavaScript!"。

第三步，保存JavaScript文件。建议将JavaScript文件与网页文件放置在同一个目录下。

JavaScript文件无法独立运行，必须通过<script>标签导入到网页中，由浏览器执行。

第四步，新建一个HTML文档，并将其保存为test.html。

第五步，在<head>标签内插入一个<script>标签。定义src属性，将其值设置为指向外部JavaScript文件的URL字符串。代码如下：

<script type="text/javascript" src="test.js"></script>

第六步，保存网页文档，在浏览器中访问时会弹出提示框显示“Hi,JavaScript!”。

定义了src属性的<script>标签内部不应再包含JavaScript代码。

若在定义了src属性的<script>标签内嵌入了代码，浏览器将仅下载并执行外部JavaScript文件，而嵌入的代码会被忽略。

JavaScript脚本的执行顺序

JavaScript程序的执行机制

浏览器在解析HTML文档时，会按照文档流从上到下逐行解析并显示内容。

JavaScript代码作为HTML文档的一部分，其执行顺序取决于<script>标签在文档中的位置。

示例演示

使用浏览器测试以下示例，可以观察到JavaScript代码从上到下逐步被解析的过程。

<!DOCTYPE html>
<script>
  alert("顶部脚本");
</script>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script>
    alert("头部脚本");
  </script>
</head>
<body>
  <h1>网页标题</h1>
  <script>
    alert("页面脚本");
  </script>
  <p>正文内容</p>
</body>
<script>
  alert("底部脚本");
</script>
</html>

以上即为本次整理的全部相关知识点，希望能对您有所帮助。