在HTML中使用JavaScript
参考书籍:JavaScript高级程序设计第三版(最好对Java以及其他编程语言有一定基础,这样对于书籍内容比较好理解)。
一、<script>
元素
- 一个完整的JavaScript的实现由三部分组成:1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM)
(1)HTML 4.01为<script>
定义了6个属性。
属性 | 说明 |
async | 可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效(异步脚本) |
charset | 可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少被使用 |
defer | 可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7以及更早版本对潜入脚本也支持该属性(延迟脚本) |
language | 已废弃。大多数浏览器会忽略该属性 |
src | 可选。表示包含要执行代码的外部文件 |
type | 可选。表示编写代码使用的脚本语言的内容类型,虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用,但目前type属性的值依然是 text/javascript,不过该属性并不是必需的,没有指定时,该属性值依旧是 text/javascript |
使用<script>
元素的方式有两种:直接在界面中嵌入 JavaScript 代码和包含外部 JavaScript文件。传统所有的<script>
元素都应该放在<head>
元素中,目的是把所有外部文件(包括css和JavaScript文件)的引用都放在相同的位置,但在<head>
元素中的JavaScript文件,必须在全部JavaScript代码都被下载、解析和执行完成之后,才能开始显示页面内容。这将会导致浏览器在呈现界面时出现明显的延迟,在延迟期间界面就是一片空白。所以,现在web应用程序一般都把全部JavaScript放在<body>
元素中。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miller's Paints</title>
</head>
<body>
<script type="text/javascript">
alert("message");
</script>
</body>
</html>
(2)延迟脚本、异步脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miller's Paints</title>
</head>
<body>
<script type="text/javascript" defer="defer" src="example.js">
// alert("message");
</script>
</body>
</html>
- HTML 4.01 为
<script>
标签定义了defer属性,该属性相当于告诉浏览器立即下载,但延迟执行,而且只适用于外部文件。由于浏览器会解析完不使用的defer属性的<script>
元素中的代码,然后再解析后面的内容,所以一般把<script>
元素放在页面最后,即主要内容后面,</body>
标签之前。HTML 5 为<script>
元素定义了async属性,与defer属性类似,都是用来改变处理脚本的行为。同样也是只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行,异步脚本一点会在页面load事件之前执行(async属性值设置为async=”async”)。
二、<noscript>
元素
由于一些浏览器并不支持JavaScript,所以创造一个<noscript>
匀速,用在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>
中的任何HTML元素——<script>
元素除外。包含在<noscript>
元素中的内容只有在下列情况中才会显示出来:
- 浏览器不支持脚本
- 浏览器支持脚本,但脚本被禁用
符合上述其中的一个条件,浏览器就会显示<noscript>
中的内容。而其他情况不会显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miller's Paints</title>
</head>
<body>
<script type="text/javascript" defer="defer" src="example.js">
// alert("message");
</script>
<noscript>
<p>
该浏览器不支持JavaScript。
</p>
</noscript>
</body>
</html>
如果浏览器支持或开启了脚本,用户则不能看到<noscript>
元素中的内容。