HTML5 APP开发从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.1 在网页中使用JavaScript

在HTML页面中嵌入JavaScript脚本需要使用<script>标签，在<script>标签中可以直接编写JavaScript代码，也可以编写单独的JavaScript文件，然后通过<script>标签导入HTML文档。

3.1.1 编写脚本

使用<script>标签有两种方式：在页面中嵌入JavaScript代码和导入外部JavaScript文件。

【示例1】直接在页面中嵌入JavaScript代码。

第1步，新建HTML文档，保存为test.html，然后在<head>标签内插入一个<script>标签。

第2步，为<script>标签指定type属性值为"text/javascript"。现代浏览器默认<script>标签的类型为JavaScript脚本，因此省略type属性依然能够被正确执行。

第3步，直接在<script>标签内部输入JavaScript代码：

上面的JavaScript脚本先定义了一个hi()函数，该函数被调用后会在页面中显示“Hello,World!”。document表示DOM网页文档对象，document.write()表示调用Document对象的write()方法，在当前网页源代码中写入HTML字符串"<h1>Hello,World!</h1>"。

调用hi()函数，浏览器将在页面中显示一级标题“Hello,World!”。

第4步，保存网页文档，在浏览器中预览，显示效果如图3.1所示。

图3.1 第一个JavaScript程序

【示例2】页面导入外部JavaScript文件。

第1步，新建文本文件，保存为test.js。注意，扩展名为.js，它表示该文本文件是JavaScript类型的文件。

第2步，打开test.js文本文件，在其中编写下面的代码，定义简单的输出函数。

     function hi(){
         alert("Hello,World!");
     }

在上面的代码中，alert()表示Window对象的方法，调用该方法将弹出一个提示对话框，显示参数字符串“Hello,World!”。

第3步，保存JavaScript文件，注意其与网页文件的位置关系。这里JavaScript文件位置与调用该文件的网页文件应位于相同目录下。

第4步，新建HTML文档，保存为test1.html，然后在<head>标签内插入一个<script>标签。定义src属性，设置属性值为指向外部JavaScript文件的URL。代码如下所示。

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

第5步，在上面<script>标签的下一行继续插入一个<script>标签，直接在<script>标签内部输入JavaScript代码，调用外部JavaScript文件的hi()函数。

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     <title>test</title>
     <script type="text/javascript" src="test.js"></script>
     <script type="text/javascript">
     hi(); //调用外部JavaScript文件的函数
     </script>
     </head>
     <body>
     </body>
     </html>

第6步，保存网页文档，在浏览器中预览，显示效果如图3.2所示。

图3.2 调用外部函数弹出提示对话框

3.1.2 脚本在网页中的位置

所有<script>标签都会按照它们在HTML中出现的先后顺序依次被浏览器解析。在不使用<script>标签的defer和async属性的情况下，浏览器只有在解析完前面<script>标签中的代码之后，才会开始解析后面的代码。

【示例1】在默认情况下，所有<script>标签都应该放在页面头部的<head>标签中。

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     <title>test</title>
     <script type="text/javascript" src="test.js"></script>
     <script type="text/javascript">
     hi();
     </script>
     </head>
     <body>
     <!-- 网页内容 -->
     </body>
     </html>

这样就可以把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。但是，文档的<head>标签包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，页面的内容才能开始呈现。如果页面需要很多JavaScript代码，无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间浏览器窗口中将是一片空白。

【示例2】为了避免延迟问题，现代Web应用程序一般都把全部JavaScript引用放在<body>标签中页面的内容后面。

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     </head>
     <body>
     <!-- 网页内容 -->
     <<title>test</title>
     <script type="text/javascript" src="test.js"></script>
     <script type="text/javascript">
     hi();
     </script>
     /body>
     </html>
     </html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中，同时打开页面的速度会加快。

【拓展】

<script>标签还有很多高级用法和需要注意的问题，感兴趣的读者可以扫码阅读。

本周热推：
Python王者归来深入浅出Rust大话设计模式Docker技术入门与实战（第3版）零基础学Pine Script：基于TradingView平台的量化分析
上一章目录下一章