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

最新推荐文章于 2024-08-07 16:11:40 发布

jzzszyj

最新推荐文章于 2024-08-07 16:11:40 发布

阅读量543

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/jzzszyj/article/details/79619362

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在HTML中引入JS代码

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

script 标签和部分属性作用

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

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

注意事项

浏览器遇到 body 标签时开始呈现内容，所以为了避免呈现页面时卡顿，通常将js文件放在 body 元素中页面内容的后面。
defer：HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行，不过现实中，延迟脚本不一定会按照顺序执行，也不一定在 DOMContentLoaded 事件触发之前，因此，最好只包含一个延迟脚本。
async：异步脚本一定会在页面的load事件前执行，但可能会在 DOMContentLoaded 事件之前或者之后执行。
支持XHTML的浏览器兼容问题：有些浏览器中，可以通过将页面的 MIME 类型指定为 application/xhtml+xml 时会触发XHTML模式。这种模式下，script 标签中的特殊规则并不适用，比如 a < b 中的小于号就会被当做开始一个新标签来解析，所以，要使用相应的HTML实体（<）代替；或者使用外部文件，因为 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>
早期浏览器不兼容js，为了让页面平稳退化，可以使用 noscript 元素提醒用户。标签里的内容只有在浏览器不支持脚本或者浏览器支持脚本,但脚本被禁用的情况下显示，使用方法如下：
<body> <noscript> <p>本页面需要浏览器支持(启用)JavaScript。 </noscript> </body>