JS高程系列笔记--脚本引入及其位置

2017-05-23 本文已影响0人总有贱婢想害朕

向HTML页面中插入JavaScript脚本的主要方法有三种：

页面嵌入<script>标签内联

页面嵌入<script>标签外联

直接在HTML元素中加入

嵌入<script>标签内联

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

当浏览器执行到上述<script>标签时，会暂停页面其他部分的加载。

在使用<script>嵌入JavaScript代码时，不要在代码中的任何地方出现"</script>"字符串，会被认为是代码结束的标志：

<script type="text/javascript">
    function sayScript() {
        alert("</script>");//错误
    }
    sayScript();
</script>

但是可以将它分成两部分，如：

<script type="text/javascript">
    function sayScript() {
        alert("<\/script>");//或alert('<'+'/script>');alert('</'+'script>');等
    }
    sayScript();
</script>

页面嵌入<script>标签外联

此时需要指定src属性：

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

可以是来自本地的js文件，也可以是外部域中的：

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

当src指定外部js文件地址后，<script>标签内部就不应再包含额外脚本。即使包含了额外的脚本，也会被忽略。

<script>元素的属性

async属性：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或者等待加载其他脚本。只对外部脚本有效。
charset属性：可选。表示通过src属性指定的代码的字符集。
defer属性：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
language属性：已废弃，原来用于表示编写代码使用的脚本语言（如JavaScript、JvavScript1.2等）。大多数浏览器都会忽略这个属性，因此也木有必要用了。
src属性：可选。表示包含要执行代码的外部文件。
type属性：可选。可以看成是language属性的替代属性；表示编写代码使用的脚本语言的内容类型。虽然text/javascript和text/ecmascript都已经不被推荐使用，但是考虑到浏览器兼容等，目前type的值依然可以是text/javascript。但并非是必须的。

无论是内联还是外联脚本，只要不存在defer和async属性，浏览器都会按照<script>出现的先后顺序对它们依次进行解析。

直接在HTML元素中加入

<button type="submit" onclick="alert('clicked me')">提交</button>

<script>标签的位置

按照惯例，<script>元素应该放在页面的<head>元素中，和<link>位置类似，这样做的目的就是把所有的外部文件（CSS和JavaScript）都放在同样的位置。但是这样会导致页面内容出现延迟。所以一般<script>标签都放在<body>元素中内容的最后也就是</body>之前。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>This is a para.</p>
    <button type="submit">提交</button>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

延迟脚本

既然有defer属性的存在，那么就可以把<script>元素放在页面的<head>标签内，相当于提醒浏览器立即下载但是延迟执行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js" type="text/javascript" defer="defer"></script>
</head>
<body>
    <p>This is a para.</p>
    <button type="submit">提交</button>
</body>
</html>

而当有两个脚本都设置了defer="defer"时，HTML5规范规定了第一个脚本会比第二个脚本先执行，但是实际上延迟脚本并不一定会按照顺序执行，因此最好只包含一个延迟脚本。

异步脚本

与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但是与defer不同的是，标记为async的脚本并不保证按照指定执行顺序执行。