在HTML中使用JavaScript

ll_liling

于 2016-07-29 15:25:26 发布

阅读量301

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ll_liling/article/details/52065411

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本章内容

<script>元素
延迟脚本（defer）
异步脚本（async）

1.`<script>`元素

使用<script>元素是在HTML中插入JavaScript代码主要方法。可分为在内部编写js代码和引用外部js文件两种方式。
1)在使用<script>元素嵌入js代码时，可像下面这样把js代码放在元素内部即可：

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

2)引用外部js文件，需要一个src属性，指向一个外部文件。

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

3)标签的位置
如果将js文件放在<head></head> 标签之间，这意味着必须要等到所有的js文件下载、解析、执行之后才会开始加载页面内容（浏览器在遇到<body>标签时才会开始呈现页面）。这对于js代码较多的页面来说会有可能导致页面加载迟缓，浏览器窗口出现一片白的现象。为了避免此问题，现在一般都会将js引用放在</body>前面。如下所示：

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

2.延迟脚本（defer）

<script>元素中的defer属性表示此脚本会在整个页面解析完成之后再运行。

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

在这个例子中，第一个<script>元素中含有defer属性，本该先执行的脚本会延迟执行。此属性在IE8及之后只适用于外部脚本文件。但由于有些游览器会忽略此属性，为此，把延迟脚本放在底部仍然是最佳选择。

3.异步脚本（async）

此属性与defer类似，用于处理脚本行为，但async属性包含的脚本并不保证按照指定它们的先后顺序执行。

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