JavaScript在HTML中的使用--学习笔记

Posted 2020-09-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript在HTML中的使用--学习笔记相关的知识，希望对你有一定的参考价值。

<script>元素

<script>属性：

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。 IE7 及更早版本对嵌入脚本也支持这个属性。
language：已废弃。原来用于表示编写代码使用的脚本语言（如 javascript、JavaScript1.2或 VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
src：可选。表示包含要执行代码的外部文件。
type：可选。可以看成是 language 的替代属性；表示编写代码使用的脚本语言的内容类（也称为 MIME 类型）。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都还是 text/javascript。实际上，服务器在传送 JavaScript 文件时使用的MIME 类型通常是 application/x–javascript，但在 type 中设置这个值却可能导致脚本被忽略。另外，在非 IE浏览器中还可以使用以下值：application/javascript 和 application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前 type 属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

<script>使用方法：

1 <script type="text/javascript">
2     function sayHi(){
3         alert("Hi!");
4     }
5 </script>
6 <script type="text/javascript" src="example.js"></script>

<script>放置位置：

 1 <!DOCTYPE html> //传统的放置方法
 2 <html>
 3 　　<head>
 4 　　　　<title>Example HTML Page</title>
 5 　　　　<script type="text/javascript" src="example1.js"></script>
 6 　　　　<script type="text/javascript" src="example2.js"></script>
 7 　　</head>
 8 　　<body>
 9 　　　　<!-- 这里放内容 -->
10 　　</body>
11 </html>

　　在文档的<head>元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引用放在<body>元素中页面内容的后面，如下例所示：

 1 <!DOCTYPE html>
 2 <html>
 3 　　<head>
 4 　　　　<title>Example HTML Page</title>
 5 　　</head>
 6 　　<body>
 7 　　　　<!-- 这里放内容 -->
 8 　　　　<script type="text/javascript" src="example1.js"></script>
 9 　　　　<script type="text/javascript" src="example2.js"></script>
10 　　</body>
11 </html>

　　这样，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了

延迟脚本

HTML 4.01 为<script>标签定义了 defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 　　<title>Example HTML Page</title>
 5 　　　　<script type="text/javascript" defer="defer" src="example1.js"></script>
 6 　　　　<script type="text/javascript" defer="defer" src="example2.js"></script>
 7 　　</head>
 8 　　<body>
 9 　　　　<!-- 这里放内容 -->
10 　　</body>
11 </html>

　　在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。 HTML5 规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于 DOMContentLoaded 事件（详见第 13 章）执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本。

　　defer 属性只适用于外部脚本文件。这一点在 HTML5 中已经明确规定，因此支持HTML5 的实现会忽略给嵌入脚本设置的 defer 属性。

异步脚本

HTML5 为<script>元素定义了 async 属性。这个属性与 defer 属性类似，都用于改变处理脚本的行为。同样与 defer 类似， async 只适用于外部脚本文件，并告诉浏览器立即下载文件。但与 defer不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。例如：

 1 <!DOCTYPE html>
 2 <html>
 3 　　<head>
 4 　　　　<title>Example HTML Page</title>
 5 　　　　<script type="text/javascript" async src="example1.js"></script>
 6 　　　　<script type="text/javascript" async src="example2.js"></script>
 7 　　</head>
 8 　　<body>
 9 　　　　<!-- 这里放内容 -->
10 　　</body>
11 </html>

在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改 DOM。异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。支持异步脚本的浏览器有 Firefox 3.6、 Safari 5 和 Chrome。

在XHTML中的用法

不推荐的使用方法

嵌入代码和外部代码

在 HTML 中嵌入 JavaScript 代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含 JavaScript 代码。不过，并不存在必须使用外部文件的硬性规定，但支持使用外部文件的人多会强调如下优点。

可维护性：遍及不同 HTML 页面的 JavaScript 会造成维护问题。但把所有 JavaScript 文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及 HTML 标记的情况下，集中精力编辑 JavaScript 代码。

可缓存：浏览器能够根据具体的设置缓存链接的所有外部 JavaScript 文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。

适应未来：通过外部文件来包含 JavaScript 无须使用前面提到 XHTML 或注释 hack。 HTML 和XHTML 包含外部文件的语法是相同的。

文档模式

　　IE5.5 引入了文档模式的概念，而这个概念是通过使用文档类型（doctype）切换实现的。

如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些 hack 技术，跨浏览器的行为根本就没有一致性可言。

　　对于标准模式，可以通过使用下面任何一种文档类型来开启：

 1 <!-- HTML 4.01 严格型 -->
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 3 　　"http://www.w3.org/TR/html4/strict.dtd">
 4  
 5 <!-- XHTML 1.0 严格型 -->
 6 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
 7 　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 8  
 9 <!-- HTML 5 -->
10 <!DOCTYPE html>

　　而对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发，如下所示：

 1 <!-- HTML 4.01 过渡型 -->
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 3 　　"http://www.w3.org/TR/html4/loose.dtd">
 4  
 5 <!-- HTML 4.01 框架集型 -->
 6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 7 　　"http://www.w3.org/TR/html4/frameset.dtd">
 8  
 9 <!-- XHTML 1.0 过渡型 -->
10 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
11 　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
12  
13 <!-- XHTML 1.0 框架集型 -->
14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
15 　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<noscript>元素

　　在不支持 JavaScript 的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来：

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

 1 <html>
 2 　　<head>
 3 　　　　<title>Example HTML Page</title>
 4        <script type="text/javascript" defer="defer" src="example1.js"></script>
 5 　　　　<script type="text/javascript" defer="defer" src="example2.js"></script>
 6 　　</head>
 7 　　<body>
 8 　　　　<noscript>
 9 　　　　　　<p>本页面需要浏览器支持（启用） JavaScript。</p>
10 　　　　</noscript>
11 　　</body>
12 </html>

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

以上是关于JavaScript在HTML中的使用--学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

HTML入门笔记学习

JavaScript学习笔记——JavaScript语法之函数

HTML 学习笔记 JavaScript (DOM)