JavaScript 运行

JavaScript脚本一般被嵌入到HTML文档中使用。

HTML 如何嵌入 JavaScript 脚本

目前有两种方式将JavaScript脚本嵌入到HTML内。

1.使用一对<script>标签包裹 JavaScript 代码块:

<!DOCTYPE html>
<html>
   <head>
        <script>
            alert('Hello JavaScript');
        </script>
   </head>
   <body>
     ...
   </body>
</html>

2.如果JavaScript代码较多,直接嵌入 HTML 文档并不是一个好的选择。我们可以单独写一个 js脚本文件,然后利用<script>src属性将这个文件引进来:

<!DOCTYPE html>
<html>
   <head>
       <script src="outer.js"></script>
   </head>
   <body>
    ...
   </body>
</html>
// 当前路径下的 outer.js
alert('Hello JavaScript');

<script>标签对可以放置在任何地方

HTML并没有限制 <script> 标签对放置的位置,它可以出现在任何地方:

将脚本放置在<head>标签内:

<head>
    <script>
        alert('JavaScript 脚本放置在 head 标签内');
    </script>
</head>

将脚本放置在<body>标签内:

<body>
    <script>
        alert('JavaScript 脚本放置在 body 标签内');
    </script>
</body>

甚至,你可以将脚本放置在<html>标签外部:

<html>
    <head>...</head>
    <body>...</body>
</html>
<script>
     alert('JavaScript 脚本放置在 html 标签外部');
</script>

<script>标签可以重复出现

多个 <script> 标签可以重复出现,并且标签中的代码块将从上到下执行:

<head>
    <script>
        alert('这里的 JavaScript 脚本 先执行');
    </script>
</head>
<body>
    <script>
        alert('这里的 JavaScript 脚本 后执行');
    </script>
</body>
虽然多个<script>标签对将JavaScript脚本分成了多个代码块,但这些代码块中的变量是共享的。

JavaScript脚本何时执行

当HTML解释器解析到<script>标签时,会调用JS引擎编译并执行其中的JavaScript代码。(如果引用了外部JS文件,那么会先调用加载线程加载目标资源)

注意1:JavaScript脚本的执行会阻塞HTML的继续解析。

注意2:JS引擎对每个<script>代码块中的代码单独进行编译执行。看下面的例子:

<body>
    <script>
        <!--执行这段代码时,变量 foo 未编译-->
        console.log(foo); // Uncaught ReferenceError: foo is not defined
    </script>
    
    <script>
        <!--执行这段代码时,变量 foo 已编译 但赋值-->
        console.log(foo); // undefined
        var foo = 'JavaScript';
         <!--执行这段代码时,变量 foo 已赋值-->
        console.log(foo) // JavaScript
    </script>
</body>

JavaScript运行示例

向网页中插入一段动态文本

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

点击按钮出现提示框

<!DOCTYPE html>
<html>
<body>
<button id="btn">click me</button>
</body>
</html>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    alert('Hello World');
});
</script>

总结

通过本文,你理解了以下几个知识点:

  1. HTML 有两种嵌入 JavaScript 脚本的方式。
  2. <script> 标签对可以出现在HTML的任何位置。
  3. <script> 标签对不限制数量。
  4. JavaScript执行的时机。