js学习笔记--引入js代码

在HTML中引入JS代码

页面引入js的方式主要有以下两种:
    1、在HTML文档中,通过 script 标签嵌入;
    2、使用 src 属性引入外部 js 文件。  

script 标签和部分属性作用

在浏览器加载 script 元素时,无论是直接写在html中还是通过 script 元素来包含外部的js文件,只要不存在 defer 和 async 属性,浏览器都会按照元素在页面中出现的先后顺序对他们进行解析,也就是说:在第一个 script 元素包含的代码解析完成后,才开始解析第二个元素。

属性用法
async(异步脚本)只对外部脚本文件有效,表示应该立刻下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。同时也不保证按照指定元素的先后顺序执行。
defer(延迟脚本)只对外部脚本文件有效,表示脚本可以延迟到文档完全被解析和显示之后再执行,即表明脚本在执行时不会影响页面的构造,相当于告诉浏览器立即下载,但延迟执行。

注意事项

  1. 浏览器遇到 body 标签时开始呈现内容,所以为了避免呈现页面时卡顿,通常将js文件放在 body 元素中页面内容的后面。

  2. defer:HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行,不过现实中,延迟脚本不一定会按照顺序执行,也不一定在 DOMContentLoaded 事件触发之前,因此,最好只包含一个延迟脚本。

  3. async:异步脚本一定会在页面的load事件前执行,但可能会在 DOMContentLoaded 事件之前或者之后执行。

  4. 支持XHTML的浏览器兼容问题:有些浏览器中,可以通过将页面的 MIME 类型指定为 application/xhtml+xml 时会触发XHTML模式。这种模式下,script 标签中的特殊规则并不适用,比如 a < b 中的小于号就会被当做开始一个新标签来解析,所以,要使用相应的HTML实体(&lt;)代替;或者使用外部文件,因为 HTML 和 XHTML 包含外部文件的语法是相同的;或者使用 CData 标签来包含js代码,为了使得不兼容XHTML的浏览器也能正确运行,使用js注释将 CData 标记符号注释掉就可以了,效果如下:

    <script type="text/javascript">
    //<![CData[
      function compare(a, b) {
        if (a < b) {
          alert("A is less than B");
        } else if (a > b) {
          alert("A is greater than B");
        } else {
          alert("A is equal to B");
        }
      }
    //]]>
    </script>
  5. 早期浏览器不兼容js,为了让页面平稳退化,可以使用 noscript 元素提醒用户。标签里的内容只有在浏览器不支持脚本或者浏览器支持脚本,但脚本被禁用的情况下显示,使用方法如下:

    <body>
    <noscript>
    <p>本页面需要浏览器支持(启用)JavaScript。
    </noscript>
    </body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值