JavaScript交互式网页设计（微课版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3.2 在HTML中使用JavaScript

JavaScript是通过script标签插入HTML页面中的。将script标签与其他标签结合使用，可引入保存在外部文件中的JavaScript代码，还可以动态加载JavaScript代码。推荐使用引入外部文件的方法，这样更方便维护代码，下载的文件可以实现缓存。为了解决加载JavaScript代码导致的页面渲染明显延迟问题，现在的Web应用程序通常将JavaScript引用放在body元素中页面内容的后面。

1.在HTML文档中嵌入脚本

script标签是HTML为引入脚本而定义的一个双标签。插入脚本的方法是将script标签置于HTML文档的head标签或body标签中，然后在其中写入脚本部分。语法格式如下。

<script>
    //JavaScript脚本部分
</script>

【训练1-1】在HTML文档中嵌入JavaScript脚本，代码如下。代码清单为code1-1.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title></title>
</head>
<body>
    <script>alert("Hello World!")</script>
</body>
</html>

利用浏览器打开code1-1.html，即可看到网页的效果。

2.引入外部文件的JavaScript脚本

引入外部文件的JavaScript脚本的方法是使用script标签的src属性来指定外部文件的URL（Uniform Resource Locator，统一资源定位符）。语法格式如下。

<script src = "url"></script>

在使用src属性时，script标签之间的任何内容都将被忽略。在默认情况下，脚本的执行是同步和阻塞的。

【训练1-2】在HTML文档中引入外部文件的JavaScript脚本。

①编写HTML文档，代码如下。代码清单为code1-2.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>在 HTML文档中引入外部文件的JavaScript脚本</title>
</head>
<body>
    <script src = "js/hello.js"></script>
</body>
</html>

②编写JavaScript脚本，代码如下。代码清单为js/hello.js。

alert("Hello World!");

③利用浏览器打开code1-2.html，即可看到网页的效果。

3.在HTML标签的事件中嵌入脚本

使用HTML标签可以将事件以属性的形式引入，然后将JavaScript脚本写在相应事件的事件处理程序中。例如，在button标签的事件中嵌入脚本，语法格式如下。

<button onclick="fnc"></button>

【训练1-3】在HTML标签的事件中嵌入JavaScript脚本，代码如下。代码清单为code1-3.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title></title>
</head>
<body>
    <button onclick="alert('Hello World!')">点我</button>
</body>
</html>

4.引入模块的脚本

如果想在HTML页面中使用import命令，需要使用script标签的类型指定属性type。语法格式如下。

<script type = "module">...</script>

另一种形式如下。

<script type = "module" src="url"></script>

使用“type="module"”会默认产生跨域请求，在本地打开文件的file协议并不支持该请求。使用“file://”访问文件和使用“http://”访问文件是不同的。

5.延迟执行的脚本

HTML4.01为script标签定义了defer属性，HTML5规定此属性只用于引入外部脚本。这个属性表示浏览器可以在下载脚本时继续解析和渲染文档，直到文档的载入和解析完成，脚本才可以执行，相当于告诉浏览器立即下载并延迟执行脚本。语法格式如下。

<script defer src = "url"></script>

6.异步执行的脚本

HTML5为script标签定义了async属性（布尔属性，没有值），并规定此属性只用于引入外部脚本。这个属性表示浏览器可以在下载脚本时继续解析和渲染文档，告诉浏览器尽快执行脚本，不会在下载脚本时阻塞文档解析。异步脚本在HTML页面的load事件前执行。语法格式如下。

<scritp async src = "url"></script>

7.动态加载的脚本

JavaScript还可以通过向DOM中动态添加script标签来加载指定的脚本。

【训练1-4】在HTML文档中动态加载脚本，代码如下。代码清单为code1-4.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title></title>
</head>
<body>
    <script>
        let script = document.createElement('script');
        script.src = './js/hello.js';
        script.async = false;
        document.head.appendChild(script);
    </script>
</body>
</html>
上一章目录下一章