美文网首页
在HTML中使用JavaScript

在HTML中使用JavaScript

作者: 木猩 | 来源:发表于2018-04-03 01:46 被阅读0次

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

    <script>元素有以下6个属性:


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

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

    1. 直接在页面中嵌入JavaScript代码
    2. 包含外部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,两种方式都可以使用,但是使用外部文件方式有以下优点:

    1. 可维护性:遍布不同HTML页面的内嵌JavaScript会很难维护,而将所有JavaScript放到同一个文件夹下的外部文件中,维护起来会更方便
    2. 可缓存:使用外部文件可以启用http文件缓存,不同页面使用到同一个外部JavaScript文件时,这个文件只需下载一次,加快了页面的加载速度
    3. 适应未来:内嵌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>中的任何内容

    相关文章

      网友评论

          本文标题:在HTML中使用JavaScript

          本文链接:https://www.haomeiwen.com/subject/qzifhftx.html