【前端技术文章】JavaScript脚本文件引入方法讲解

更新时间:2020-11-13 来源:黑马程序员浏览量:

　　JavaScript脚本文件的引入方式和CSS样式文件类似。在HTML文档中引入JavaScript文件主要有三种，即行内式、嵌入式、外链式。接下来，我们将对JavaScript的三种引入方式做详细讲解。

　　1. 行内式

　　行内式是将JavaScript代码作为HTML标签的属性值使用。例如，单击“test”时，弹出一个警告框提示“Happy”，具体示例如下：

<a href="javascript:alert('Happy');"> test </a>

　　JavaScript还可以写在HTML标签的事件属性中，事件是JavaScript中的一种机制。例如，单击网页中的一个按钮时，就会触发按钮的单击事件，具体示例如下：

<input type="button" onclick="alert('Happy'); "value="test" >

上述代码实现了单击“test”按钮时，弹出一个警告框提示“Happy”。

　　值得一提的是，网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码。避免直接写在HTML标签的属性中，从而有利于维护。因此在实际开发中并不推荐使用行内式。

　　2. 嵌入式

　　在HTML中运用<script>标签及其相关属性可以嵌入JavaScript脚本代码。嵌入JavaScript代码的基本格式如下：

<script type="text/javascript">

    JavaScript语句;

</script>

<script>

    JavaScript语句;</script>

在上面的语法格式中，省略了type="text/JavaScript"，这是因为新版本的浏览器一般将嵌入的脚本语言默认为JavaScript，因此在编写JavaScript代码时可以省略type属性。

JavaScript可以放在HTML中的任何位置，但放置的地方会对 JavaScript脚本代码的执行顺序会有一定影响。因此在实际工作中一般将JavaScript脚本代码放置于HTML文档的 <head></head> 标签之间。由于浏览器载入HTML 文档的顺序是从上到下，将JavaScript脚本代码放置于<head></head> 标签之间，可以确保在使用脚本之前，JavaScript脚本代码就已经被载入，下面展示的就是一段放置了JavaScript的示例代码。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>嵌入式</title>

<script type=" text/javascript">

  alert("我是JavaScript脚本代码！")

</script>

</head>

<body>

</body>

</html>

　　在上面的示例代码中，<script>标签包裹的就是JavaScript脚本代码。

　　3. 外链式

　　外链式是将所有的JavaScript代码放在一个或多个以“.js”为扩展名的外部JavaScript文件中，通过<src >标签将这些JavaScript文件链接到HTML文档中，其基本语法格式如下：

<script type="text/Javascript" src="脚本文件路径" >

</script>

　　上述格式中，src是script标签的属性，用于指定外部脚本文件的路径。同样的，在外链式的语法格式中，我们也可以省略type属性，将外链式的语法简写为：

<script src="脚本文件路径 " >

</script>

　　需要注意的是，调用外部JavaScript文件时，外部的JavaScript文件中可以直接书写JavaScript脚本代码，不需要写<script>引入标签。

　　在实际开发中，当需要编写大量、逻辑复杂的JavaScript代码时，推荐使用外链式。相比嵌入式，外链式的优势可以总结为以下两点：

　　1) 利于后期修改和维护

　　嵌入式会导致HTML与JavaScript代码混合在一起，不利用代码的修改和维护，外链式会将HTML、CSS、JavaScript三部分代码分离开来，利于后期的修改和维护。

　　2) 减轻文件体积、加快页面加载速度

　　嵌入式会将使用的JavaScript代码全部嵌入到HTML页面中，这就会增加HTML文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存，将需要多次用到的JavaScript脚本代码重复利用，既减轻了文件的体积，也加快了页面的加载速度。例如，在多个页面中引入了相同的JavaScript文件时，打开第1个页面后，浏览器就将JavaScript文件缓存下来，下次打开其他引用该JavaScript文件的页面时，浏览器就不用重新加载JavaScript文件了。

　　在上面的示例代码中，直接省略掉var，通过赋值的方式声明变量。需要注意的是。由于JavaScript采用的是动态编译，程序运行时不容易发现代码中的错误，所以本书仍然推荐读者使用显式声明变量的方法。

上一篇：表单的构成是什么？如何创建表单 下一篇：页面布局的排列规则是什么？怎样清除浮动标签？