JavaScript在HTML中的使用

来源：互联网发布：翻拍小说的网络电视剧编辑：程序博客网时间：2024/05/20 11:47

JavaScript在HTML中的使用

读书笔记 : JavaScript在HTML中的使用

script 元素

使用<script>元素有两种方式：

直接在页面中嵌入JavaScript代码

例子

<!DOCTYPE html><html><head><script>function myFunction(){document.getElementById("demo").innerHTML=Date();}</script></head><body><h1>我的 Web 页面</h1><p id="demo">一个段落</p><button type="button" onclick="myFunction()">尝试一下</button></body></html>

包含在<script>元素内部的JavaScript代码将被从上至下地依次解释。以上面的代码为例，解释器会解释一个函数的定义，然后将该定义保存在自己的环境中。在<script>元素内所有代码被解释完前，页面的其他内容都不会被浏览器加载显示。

包含外部JavaScript文件

例子

<script src="example.js"></script>

通过<script>元素的src 属性值指向一个外部的JavaScript文件。在上面的例子中外部文件example.js将被加载到当前页面中，与解析嵌入式JavaScript代码一样，在解析外部文件时，页面的处理也会暂停。

NOTE

带有src属性的<script>元素不能包含嵌入式的JavaScript，如果包含，只会执行外部脚本文件。

标签的位置

<script>元素可以放在页面的<head>元素中：

<!DOCTYPE html><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><!-- 这里放内容 --></body></html>

<script>元素放在页面的<body>元素中：

<!DOCTYPE html><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>

NOTE

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

延迟脚本

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>  ```> **NOTE**>> defer 属性只适用于外部脚本文件。### 异步脚本HTML5 为`<script>`元素定义了async 属性。这个属性与defer 属性类似，都用于改变处理脚本的行为。同样与defer 类似，async 只适用于外部脚本文件，并告诉浏览器立即下载文件。_**但与defer不同的是，标记为async 的脚本并不保证按照指定它们的先后顺序执行。**_```HTML<!DOCTYPE html><html><head><title>Example HTML Page</title><script type="text/javascript" async src="example1.js"></script><script type="text/javascript" async src="example2.js"></script></head><body><!-- 这里放内容 --></body></html>

参考资料:
JavaScript高级程序设计 3th

阅读全文

0 0