2.在HTML中使用JavaScript

1. script元素
2. 标签的位置
3.延迟和异步加载
4.嵌入代码与外部代码的区别
5.noscript元素
6. 小结

1. script元素

向HTML中插入JavaScript的主要方法，就是使用script标签

HTML 4.01为script标签定义了6个属性

async：可选，表示异步，立即下载脚本，但是不妨碍页面中其它操作。只对外部脚本文件有效
charset：可选，表示通过src属性指定的代码的字符集。大多数浏览器会忽略他的值
defer：可选，表示脚本可以延迟到文档完全被解析之后再执行，只对外部文件有效
language：已废弃，原用来表示编写代码所使用的脚本语言
src：可选，表示要执行的代码外部文件
type：可选，可以看成是language的代替属性，表示编写代码使用的脚本语言的内容类型。默认为 text/javascript

使用script标签的方式：直接在页面中嵌入JavaScript代码和包含外部文件

在使用script标签嵌入JavaScript代码时，需要为该标签指定type属性，然后将JavaScript代码放入即可

<script>

    function sayHi(){

        alert("Hi~")

    }

<script>

注意：

如果要使用外部JavaScript文件，则script标签的src属性就是必须的，这个属性的值就是一个指向外部JavaScript文件的链接
```
<script type="text/javascript" src="example.js"></script>
```
在使用嵌入式JavaScript代码时，切忌不要在任何地方出现“script”字符串，因为浏览器会将其解析为结束标签

eg：错误的写法(会报错)

<script>

	function sayScript(){

        alert("</script>");

    }

</script>

eg：正确的写法（通过转义字符转义）

<script>

	function sayScript(){

        alert("<\/script>");

    }

</script>

包含在script标签中的代码，将会被从上到下依次解释

2. 标签的位置

按照传统的做法，所有的script标签都要放在页面的head标签中。

这种做法意味着页面要等全部的JavaScript代码都被下载和执行完成以后，才开始呈现页面的内容。这无疑会导致页面页面在加载的时候出现延迟。影响用户体验。为避免这个问题，现代的web应用程序一般把全部的JavaScript放在标签的最后面

<!DOCTYPE>

<html>

    <head>

        <title>Example Html page</title>

    </head>

    <body>

        //...内容区

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

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

    </body>

</html>

3.延迟和异步加载

defer属性：脚本会被延迟到整个页面都解析完成之后再运行，因此，在script标签中设置该属性，等于告诉浏览器，立即下载，延迟执行

async：只适用于外部脚本文件，并告诉浏览器立即下载文件，但是并不保证按照指定它们的先后顺序执行

4.嵌入代码与外部代码的区别

一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码

外部文件含有如下优点：

可维护性强
可缓存：如果有两个文件使用同一个JavaScript文件，那么该JavaScript文件只会被加载一次，可以加快页面加载速度
适应未来

5.`noscript`元素

包含noscript的元素只有在以下情况下才会显示出来

浏览器不支持脚本
浏览器支持脚本，但是脚本被禁用

只有符合以上条件，noscript标签中的内容才会显示出来

<!DOCTYPE>

<html>

    <head>

        <title>Example Html page</title>

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

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

    </head>

    <body>

        <noscript>

        	<p>

                本页面需要浏览器支持（启用）JavaScript

            </p>

        </noscript>

    </body>

</html>

这个页面会在脚本无效的情况下向用户展示一条信息。而在启用了脚本的浏览器中，用户永远也不会看到它，即使它是页面的一部分

6. 小结

包含外部的JavaScript文件的时候，script标签必须使用src属性指定外部文件链接
在不使用异步和延迟加载（async，defer）的情况下，所有script标签中的元素都会按照他们在文件中出现的顺序依次依次加载，只有解析完前面的script标签之后，才会解析后面的
defer属性可以让脚本在文档完全呈现之后再去执行，延迟脚本总是按照他们的顺序执行
async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现，但是不能保证异步脚本按照他们原来的顺序
noscript标签可以指定在不支持脚本的浏览器中显示替代的内容，但是在启用了脚本的浏览器中，浏览器不会显示该标签中的任何内容

巴特西

2.在HTML中使用JavaScript

1. script元素

2. 标签的位置

3.延迟和异步加载

4.嵌入代码与外部代码的区别

5.`noscript`元素

6. 小结

最新文章

热门文章

巴特西

2.在HTML中使用JavaScript

1. script元素

2. 标签的位置

3.延迟和异步加载

4.嵌入代码与外部代码的区别

5.noscript元素

6. 小结

最新文章

热门文章

5.`noscript`元素