HTML 中使用 JavaScript

时间:2019-04-15
本文章向大家介绍HTML 中使用 JavaScript,主要包括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>