在HTML中使用JavaScript

2018-04-03 本文已影响0人木猩

要把JavaScript放入网页中，就不得不涉及到web的核心语言HTML。JavaScript就是通过HTML的<script>元素插入到网页中的。众所周知JavaScript是netscape公司发明的，所以<script>元素也是netscape公司创造的，后来被加入到正式的HTML规范中

async：可选。表示立即下载和执行脚本，但是不阻塞页面的其他操作，只对外部文件有效
charset：可选。表示通过src属性指定的代码的字符集。因为大多数浏览器会忽略它的值，所以很少人用这个属性。
defer：可选。表示下载完脚本之后延迟到文档完全被渲染显示出来后再执行，只对外部文件有效，IE7及更早版本对嵌入脚本也支持这个属性
language：已废弃。用于表示使用哪种脚本语言来编写代码，很多浏览器会忽略这个属性，没有必要用
src：可选。用于指定包含脚本的外部文件
type：可选。可以看成是language的替代属性，表示脚本的内容类型（MIME类型）默认值是text/javascript

使用<script>元素的方式有两种：

直接在页面中嵌入JavaScript代码
包含外部JavaScript文件

页面中可以包含多个<script>元素，如果不包含defer和async属性，浏览器会根据从上到下<script>标签出现的先后顺序依次进行解释

直接在页面中嵌入JavaScript代码

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

如上所示，在<script>元素内部的JavaScript代码将由上至下依次被解释，在代码被解释的过程中，该<script>元素以下的页面内容将不会被处理，所以JavaScript的解释是同步的。注意在嵌入的代码里不要出现“</script>”字符串，不然浏览器会报错，因为浏览器在解释代码时会把“</script>”字符串当作是结束标签。可以通过转义字符来解决这个问题，比如这样写“</script>”，就不会报错了

包含外部JavaScript文件

要包含外部JavaScript文件，就要用到src属性，该属性的值是指向外部JavaScript文件的链接地址，外部文件的扩展名.js不是必需的，浏览器不会去检查扩展名，所以src可以引入JSP、PHP的服务器脚本来动态生成JavaScript代码。src的值还可以是跟页面不是同一个域的文件链接地址，就是可以跨域

<script src="example.js" ></script>
通过以上代码，外部JavaScript文件将被加载到页面中，外部文件只需包含<script>标签和</script>标签之间的代码。在下载和解释外部JavaScript文件时，也会阻塞页面的其他操作。包含了src属性的<script>元素不应该在<script>标签和</scritp>标签之间再包含内嵌的JavaScript代码，内嵌的代码将被忽略。

嵌入代码 vs 外部文件

没有硬性要求要使用哪种方式引入JavaScript，两种方式都可以使用，但是使用外部文件方式有以下优点：

可维护性：遍布不同HTML页面的内嵌JavaScript会很难维护，而将所有JavaScript放到同一个文件夹下的外部文件中，维护起来会更方便
可缓存：使用外部文件可以启用http文件缓存，不同页面使用到同一个外部JavaScript文件时，这个文件只需下载一次，加快了页面的加载速度
适应未来：内嵌JavaScript方式在不同版本的HTML中会有不同的解释行为，而外部JavaScript文件方式解释行为是一致的

<script>元素在页面中的位置

按照传统的做法，所有<script>元素都放在<head>元素当中，这样做的目的是把所有的外部文件包括css文件都统一放到一个地方便于管理。但是这样做存在一个问题，因为<script>元素会阻塞页面的渲染，所以当页面中包含的JavaScript代码比较多时，页面的内容呈现会延迟比较多，就会出现空白页面的情况。为了避免这个问题，现在的页面都把全部的<script>元素放到<body>元素中页面内容的后面，这样就不会阻塞页面的呈现了

不支持JavaScript呢？

当浏览器不支持JavaScript或者浏览器中的JavaScript被禁用了，如何让页面能够平稳退化呢？这时就可以使用<noscript>元素了！使用<noscript>元素可以在不能使用JavaScript的浏览器中显示替代内容，<noscript>元素可以包含<body>元素中除<script>元素以外的所有元素

<html>
    <head>
        <script src="example.js"></script>
    </head>
  <body>
        <noscript>
            <p>本页面需要浏览器支持（启用）JavaScript </p>
        </noscript>
  </body>
</html>

如上代码中，当浏览器不支持或者禁用了JavaScript时，<noscript>中的文本就会显示出来，否则将不会显示<noscript>中的任何内容