前端基础（11）：html/JSP语法（7）：<script>标签的用法与解释

2018年2月11日

【1】前言

      使用jQuery框架，需要导入使用jquery-3.3.1.js；在网上寻找方法很久但是依旧报错，因此研究了<script>标签的属性和用法，以下做个总结；

【2】用法

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

定义和用法

src 属性规定外部脚本文件的 URL。

有时，我们需要在网站的多个页面中运行 JavaScript。不需要重复编写相同的脚本，只需在单独的文件中创建 JavaScript，并以 .js 为后缀保存，然后使用 <script> 标签中的 src 属性引用该文件即可。

注释：外部文件不能包含 <script> 标签！

语法

<script src="value">

属性值

值	描述
URL	外部脚本的 URL。可能的值有： 绝对 URL - 指向其他站点（比如 src="www.example.com/example.js"） 相对 URL - 指向站点内的文件（比如 src="/scripts/example.js"）

【3】详解

       向HTML页面中插入JavaScript 的主要方法，就是使用<script>元素。

       这个元素由Netscape 创造并在Netscape Navigator 2 中首先实现。后来，这个元素被加入到正式的HTML 规范中。

       HTML4.01为<script>定义了下列五个属性：
1、charset：可选。表示通过src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值因此这个属性很少有人用。
2、defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。
3、language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript 、JavaScript1.2或VBScript）。 大多数浏览器会忽略这个属性，因此也没有必要再用了。
4、src：可选。表示包含要执行代码的外部文件。
5、type：必需。可以看成是language 的替代属性，表示编写代码使用的脚本语言的内容类型（也称为MIME 类型）。

       虽然text/javascript 和text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都还是text/javascript。

       实际上，服务端在传送JavaScript 文件时使用的 MIME 类型通常是application/x-javascript，但在type中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：application/javascript 和application/ecmascript。

       考虑到约定成俗和最大限度的浏览器兼容性，目前type 属性的值依旧还是text/javascript。

使用<script>元素的方式有两种：直接在页面中嵌入JavaScript 代码和包含外部JavaScript 文件。

【3/1】在使用<script>元素嵌入JavaScript 代码时，只须为<script>指定type属性。

<script type="text/javascript">
function sayHi(){
    alert("Hi !");
}
</script>

解释：在使用<script>嵌入JavaScript 代码肘，记住不要在代码中的任何地方出现"</script>" 字符串。

【3/2】如果要通过<script>元素来包含外部JavaScript 文件，那么src 属性就是必需的

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

解释：

1、在这个例子中，外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>之间的那些JavaScript 代码即可。与解析嵌入式JavaScript 代码一样，在解析外部JavaScript 文件（包括下裁该文件）时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的</script>标签，例如：

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

2、需要注意的是，带有src属性的<script>元素不应该在<script>和</script>标签之间再包含额外的JavaScript 代码。

3、按照惯例，外部JavaScript 文件带有js 扩展名。但这个扩展名不是必需的，因为浏览器不会检查包含JavaScript 的文件的扩展名。这样一来，使用JSP 、PHP或其他服务器端语言动态生成JavaScript 代码也就成为了可能。

【3/3】通过<script>元素的src属性还可以包含来自外部域的JavaScript 文件。

       这一点既使<script>元素倍显强大，又让它备受争议。在这一点上，<script>与<img>元索非常相似，即它的src属性可以是指向当前HTML 页面所在域之外的某个域中的URL ，例如：

<script type="text/javascript" src="http://www.somewhere .com/afile.js"></script>

     这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点就可以在必要时通过不同的域来提供JavaScript 文件。不过，在访问自己不能控制的服务器上的JavaScript 文件时则要多加小心。如果不幸遇到了怀有恶意的程序员，那他们随时都可能替换该文件中的代码。因此，如果想包含来自不同域的代码，要么你是那个域的所有者，要么那个域的所有者值得信赖。

     无论如何包含代码，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析，然后才是第三个、第四个…….