在 HTML 中使用 JavaScript

2019-01-26  本文已影响0人  千见

1.<script> 元素


我们使用 <script> 标签来像 html 页面中插入 javascript 。

在 html 4.01 中为 <script> 定义了6个属性:

使用 script 有两种内部嵌入和包含外部 javascript 文件两种方式。

其中包含外部 javascript 文件这一种方式,还可以包含来自外部域的 javascript 文件,即我们可以在 src 属性中填入一个 URL 地址。不过要注意,这个 URL 地址中的代码应该可信任。

脚本加载顺序只要不存在 defer 和 async 属性,就严格按照标签出现顺序来解析执行。

1.1 标签的位置


按照传统来讲,都是放在 head 标签当中,但是这样会引起阻塞,导致用户体验不佳。所以现在一般都是将全部的 javaScript 放在页面内容的最后面( <body> 中 )。

1.2 延迟脚本


前面所提到的 defer 属性也可以使得页面全部被加载显示以后在解析执行脚本。defer 告诉浏览器:立即下载但延迟执行。

注意:

1.3 异步脚本


和 defer 一样,用于改变脚本的执行顺序。

注意:

1.4 在 XHTML 的用法


XHTML:可拓展超文本标记语言,是将 HTML 作为 XML 的应用而重新定义的一个标准。

XHTML 它真的很严格。比如

  <script type="text/javascript">
    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>

在 HTML 中可以正常运行,但是在 XHTML 中会将 < 当做一个新标签来开始解析,这会导致报错,所以我们在 XHTML 中应该避免出现这样的情况,未解决这种情况,我们有两种方法:

  <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>

2 嵌入代码与外部文件


一般是推荐使用外部文件来引入 javascript 代码。优点是:

3 文档模式


我们使用 doctype 来实现文档模式的切换。

html 文档没有声明文档类型,则会默认开启混杂模式,我们如下声明开启标准模式:

<!-- HTML5 -->
<!DOCTYPE html>

4 <nosript>元素


当浏览器不支持脚本时,利用 <noscript> 来完成页面的退化。

<noscript> 可包含出 <script> 以外的所有 html 元素

<noscript> 内容只有在以下情况下显示:

上一篇 下一篇

猜你喜欢

热点阅读