第二章 在HTML中使用JavaScript
来源:互联网 发布:雨田开版软件 编辑:程序博客网 时间:2024/05/16 17:16
1、使用”script”元素
2.1 <script>
元素
向HTML页面中插入JavaScript的主要方法,就是使用”<script>
“元素。
“<script>
”有以下六个属性:
- async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本有效。
- charset:可选。表示通过src属性指定的代码的字符集。
- defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- language:已废弃。原来用于表示编写代码使用的脚本语言。
- src:表示包含要执行代码的外部文件。
- type:可选。可以看做是language的替代属性。表示编写代码使用的脚本语言的内容类型。目前type这个属性的值依旧还是text/JavaScript。不过这个属性并不是必须的。
使用“<script>
”元素的方式有两种:直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。
在使用”<script>
“元素嵌入JavaScript代码时,只需为“<script>
”指定type属性。然后像这样把JavaScript代码直接放进元素内部即可:
<script type="text/javascript"> function sayHi(){ alert("Hi"); }</script>
遇到字符串“</script>
”,把字符串分隔为两部分。例如:
<script type="text/javascript"> function sayScript(){ alert("<\/script>"); }</script>
如果是通过“<script>
”来包含外部JavaScript文件,则src属性为必需的。
例如:
<script type="text/javajscript" src="example.js"></script>
需要注意的是:带有src属性的”<script>
“元素不应该在其<script>和</script>
标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。
src还可以包含外部域的JavaScript文件。
例如:
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
只要不存在defer和async属性,浏览器都会按照<script>
元素在页面中出现的先后顺序对它们依次解析。
2.1.1 标签的位置
为了避免“等到全部的JavaScript代码都被下载、解析和执行完成以后,才开始呈现页面的内容,导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口一片空白”这个问题,现代web程序一般都把全部JavaScript引用放在<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>
这样在解析包含JavaScript的代码之前,页面的内容将完全呈现在浏览器中。
2.1.2 延迟脚本
defer属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕再运行。因此在<script>
元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。
<!DOCTYPE HTML><html> <head> <title>Example HTML Page</title> </head> <body> <!-- 这里放内容--> <script type="text/javascript" src="example1.js" defer="defer"></script> <script type="text/javascript" src="example2.js" defer="defer"></script> </body> </html>
这个例子中,<script>
元素将延迟到浏览器遇到</html>
标签之后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行,第一个延迟脚本会先于第二个延迟脚本。而这个两个脚本会先于DOMContentLoaded事件执行。但在现实中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包括一个延迟脚本。
2.1.3 异步脚本
async属性与defer属性类似,都用于改变处理脚本的行为,只适用于外部脚本文件,并告诉浏览器你立即下载文件。但与defer不同的是标记为async属性的脚本并不保证按照指定它们的先后顺序执行。
例如:
<!DOCTYPE HTML><html> <head> <title>Example HTML Page</title> </head> <body> <!-- 这里放内容--> <script type="text/javascript" src="example1.js" async></script> <script type="text/javascript" src="example2.js" async></script> </body> </html>
在以上代码中,第二个脚本问加你可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。
指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。
小结:
- 在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。
- 所有
<script>
元素都会按照它们在页面中出现的先后顺序被依次解析。在不使用defer和async属性的情况下,只有在解析完前面的<script>
元素中的代码之后,才会开始解析后面<script>
元素中的代码。 - 由于浏览器会先解析完不使用defer属性的
<script>
元素中的代码,然后再解析后面的内容,所以一般应该把<script>
元素放在页面最后,即主要内容后面,</body>
标签前面。 - 使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
- 使用async属性可以让当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
另外,使用<noscript>
元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>
元素中的任何内容。
- 第二章:在HTML中使用JavaScript
- 第二章:在HTML中使用Javascript
- 第二章:在HTML中使用JavaScript
- 第二章 在HTML中使用JavaScript
- JavaScript高级程序设计 第二章 --- 在HTML中使用JavaScript
- JavaScript高级程序设计 第二章 在HTML中使用javascript
- 笔记--第二章(在HTML中使用JavaScript)
- 第二章(在HTML中使用JavaScript)
- 在HTML中使用Javascript (第二章)
- JavaScript高级程序设计学习笔记——第二章在HTML中使用JavaScript
- javascript高级程序设计学习笔记——第二章 在HTML中使用javascript
- javascript高级编程3第二章:在html中使用javascript
- js高级教程阅读笔记 第二章-在HTML中使用JavaScript
- JavaScript高级程序设计(第二版)读书笔记(一)-在HTML中使用JavaScript
- 在HTML中使用JavaScript
- 在HTML中使用JavaScript
- 在HTML中使用javascript
- 在HTML中使用JavaScript
- The "data" option should be a function that returns a per-instance value in component definitions.
- css复习——opacity(不透明度)、IE6固定定位、border-radius(圆角)
- Java中"=="和equals方法的区别
- python里使用正则表达式排除集合里字符的功能
- 例题6-7 树的层次遍历 BFS遍历
- 第二章 在HTML中使用JavaScript
- POJ 3581 Sequence 笔记
- 遗传算法简单介绍与MATLAB实现(三)
- android studio创建横屏layout-land
- 原来Github上的README.md文件这么有意思——Markdown语言详解
- DFS + 高斯消元 HDU 5544
- Flask Web开发(一)基于python的Web表单
- 从零开始到搭建hexo个人博客
- vue + elementui filter过滤器