《JavaScript高级程序设计》学习笔记（第二章）

在HTML中使用JavaScript

在前端开发中，HTML是整个页面的基石，用于控制页面的结构，如果没有HTML的话，JavaScript也将无用武之地，所以使用JavaScript的首要问题就是如何将其与HTML页面结合起来。

向HTML中添加JavaScript的方法就是利用<script>标签，使用<script>元素的方法有两种：

在页面内直接写JavaScript代码

<script>
    function sayHi() {
        alert("Hi");
    }
</script>

引用外部JavaScript文件
```
<script src="example.js"></script>
```

写在<script>标签中的代码将被从上往下依次解释。在解释器对<script>中的所以代码求值完毕之前，页面中其余内容都不会被浏览器加载或显示。

<script>标签的位置

传统的做法是将<script>标签放到页面的<head>元素中，如：

    <!DOCTYPE html>
    <html >
    <head>
        <title>Example HTML Page</title>
        <script src="exmpale1.js"></script>
        <script src="example2.js"></script>
    </head>
    <body>
        <!-- contents go here -->
    </body>
    </html>

这种做法与引入CSS文件类似，目的是将引入文件的动作全部集中在一个位置，但是这种做法有一个缺点，那就是在JavaScript代码全部最下载、解析和执行之前，页面中的内容都不会显示。假如我们引用了比较多的js文件，或者是在一个外国的网站，导致下载速度并不快，这就会造成一个的明显延迟，在这期间页面将是一片空白，这显然是非常不好的用户体验。所以，现代的web程序一般将<script>标签放在<body>的结束标签之前，这样在解析包含的JavaScript代码之前，页面内容就会先全部显示在浏览器中。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
        <!-- contents go here -->
        <script src="jquery.min.js"></script>
        <script src="example.js"></script>
    </body>
    </html>

延迟脚本

在HTML4.01中为<script>定义了defer属性，这个属性的用途是表明脚本在执行的时候不会影响页面的构造。在<script>中指定这个属性就是告诉浏览器可以立即下载脚本，但是要延迟执行。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
        <script defer="defer" src="example.js"></script>
    </head>
    <body>
        <!-- contents go here -->
    </body>
    </html>

上面这段代码虽然放在<head>中，但是其引用的脚本会在浏览器遇到</html>标签后才执行。

defer属性只有在引用外部JavaScript文件的时候才会起作用，如果给嵌入脚本使用这个属性，则浏览器会直接忽略这个属性。而且并非所有的浏览器都支持这个属性，对于不支持此属性的浏览器也会直接忽略该属性。所以，将会导致延迟的脚本放到页面的底部仍是最佳的选择。

异步脚本

HTML5为<script>定义了async属性，这个属性的目的是让页面不用等待脚本的下载和执行，从而可以异步加载页面的其它内容。与延迟脚本一样，async也只适用于外部脚本。

嵌入代码与外部文件哪家强

一般来讲，引用外部文件的做法会比将代码直接嵌入到HTML文件中更有优势。
虽然JavaScript中没有强调使用外部文件的规定，但是使用外部文件会有更多的优点：

可维护性
嵌入性的代码会在遍布在各个HTML文件中，如果项目比较大，并且页面文件比较多，就会造成一定程度的混乱，所以将所有的JavaScript文件都放到同一个目录中，维护起来会比较轻松。说得比较专业一点就是可以将结构与行为相分离。
可缓存
如果多个文件使用的是同一套代码，则使用外部文件的时候只需要下载一次代码就够了，这能够加快页面的加载速度。

<noscript>元素

这个元素的作用跟他的名字一样，就是在当浏览器不支持JavaScript的时候用来显示替代的内容。这个元素只有在以下情况中才会被显示出来：

浏览器不支持脚本
浏览器支持脚本，但是脚本被禁用

下面是一个简单的例子：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
        <script type="text/javascript" defer="defer" src="example1.js"></script>
        <script type="text/javascript" defer="defer" src="example2.js"></script>
    </head>
    <body>
        <noscript>
            <p>This page does not support javascript</p>
        </noscript>
    </body>
    </html>

这段代码会在浏览器的JavaScript不可用的时候在页面上显示一条消息，而在启用了JavaScript浏览器中，用户则永远不会看到这条消息。

秒客网