HTML 中使用 JavaScript

在 HTML 中插入 JavaScript 的主要方法，就是使用 <script> 元素， 浏览器会解释并执行其中的 JavaScript 代码。

<script>  元素的属性

async  可选  表示异步执行脚本，只对外部脚本有效  值为 “async”

charset  可选  很少用  表示通过 src 属性指定的代码的字符集，只对外部脚本有效

defer  可选  表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效  值为 “defer”

src  可选  表示包含要执行代码的外部文件

type  可选  表示编码代码使用的脚本语言的内容类型（即MIME类型）默认为 text/javascript

使用 <script> 有两种方式：

1. 直接在页面中嵌入 JavaScript 代码。包含在 <script> 元素内部的 JavaScript 代码将被从上往下依次解释。在解释器对 <script> 元素内部的所有代码求值完毕前，页面中的其余内容都不会被浏览器加载或显示。

<script type="text/javascript">
    function sayHi() {
         alert("Hi!"); 
         alert("<\/script>");  
    }
</script>

2. 包含外部 JavaScript 文件。外部文件只要包含通常要放在 <script> ... </script> 中的代码即可。与嵌入式 JavaScript 代码一样，在解析外部 JavaScript 文件（包括下载该文件）时，页面的处理也会暂时停止。

如果使用 src 属性制定了外部文件，则 <script> 元素必须是空的。

<script type="text/javascript" src="example.js" />

HTML 中 <script> 标签的位置

现在Web应用程序一般都把全部的 JavaScript 引用放在 <body> 元素中页面内容的后面。如

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
  </head>
  <body>
      ...
      <script type="text/javascript" src="example1.js" />
      <script type="text/javascript" src="example2.js" />
  </body>
</html>

延迟脚本  仅适用于外部脚本文件

使用 <script> 元素的 defer 属性，表名脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整夜页面都解析完毕后在运行。相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
  </head>
  <body>
      ...
      <script type="text/javascript" defer="defer" src="example1.js" />
      <script type="text/javascript" defer="defer" src="example2.js" />
  </body>
</html>

异步脚本  仅适用于外部脚本文件

异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMConentLoaded 事件触发之前或之后执行。

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
  </head>
  <body>
      ...
      <script type="text/javascript" async src="example1.js" />
      <script type="text/javascript" async src="example2.js" />
  </body>
</html>

 

posted on 2019-04-15 17:08  0820LL  阅读(125)  评论(0)  编辑  收藏  举报

导航