如何在HTML中使用JavaScript

一、<script>元素

asyne：表示立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

charset：表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少使用。

defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部文件有效。

src：表示包含要执行代码的外部文件。

type：表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。目前type属性的值依旧还是text/javascript。如果没有指定这个属性，其默认值依旧是text/javascript。

使用<script>的方法有两种：

①直接在页面里嵌入JavaScript代码

②包含外部JavaScript文件

使用<script>元素嵌入JavaScript代码时，只须为<script>指定type属性。然后，向下面这样把JavaScript代码直接放在元素内部即可。

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

标签位置：

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中；而现代web应用程序一般会把全部JavaScript引用放在<body>元素中页面内容的后面，这样在解析包含对js代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为页面显示空白的时间缩短而感觉页面打开的速度加快了。

延迟脚本：

HTML 4.01为<script>标签定义了defer属性，功能如上所述，举例如下：

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

HRTL5规范要求脚本按照它们出现的先后顺序执行，因此第一个延时脚本会先于第二个延迟脚本执行。

异步脚本：

HTML5为<script>元素定义了async属性。这个属性的用法与defer类似，用法举例如下：

<script type="rext/javascript" async src="example1.js"></script>

其余部分相同。这个脚本并不保证它们按照指定的顺序执行。

如何在HTML中使用JavaScript

猜你喜欢