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>

注意：

1. 如果要使用外部JavaScript文件，则script标签的src属性就是必须的，这个属性的值就是一个指向外部JavaScript文件的链接

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

2. 在使用嵌入式JavaScript代码时，切忌不要在任何地方出现“script”字符串，因为浏览器会将其解析为结束标签

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

<script>
	function sayScript(){
        alert("</script>");
    }
</script>

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

<script>
	function sayScript(){
        alert("<\/script>");
    }
</script>

1. 包含在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. 小结

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