1. <script>元素
在HTML中使用JavaScript脚本时需要使用<script>元素。
<script>主要有6个属性:
1. async:可选,表示应该立即下载脚本,但不应该妨碍页面中的其他操作。只对外部脚本文件有效。
2. charset: 可选,比较少用。
3. defer: 可选,表示脚本可以延迟到文档完全被解析或显示后才执行。只对外部脚本文件有效。
4. language: 已废弃。
5. src: 可选,表示包含要执行代码的外部文件。
6. type: 可选,表示编写代码使用的脚本语言的内容类型(MIME类型)。
使用<script>元素的方式有两种:
1. 直接在页面中插入JavaScript代码,例如:
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
2. 外部链接JavaScript文件,例如:
<script type="text/javascript" src="example.js"></script>
需要注意的是,带有src属性的<script>元素不应该在<script>和</script>间包含额外的JavaScript代码,否则在加载时会被忽略。
另外,src指定的URL地址不仅可以指向HTML页面所在域,也可以是其他域的完整URL,例如:
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
<script>元素的位置
<script>元素如果放在<head>元素中,对于需要很多JavaScript代码的页面而言,会导致浏览器在呈现页面内容时有明显的延迟,而延迟期间的浏览器窗口将是一片空白。所以采用将<script>元素放在</body>标签前,这样浏览器会先呈现页面内容,然后再解析和执行JavaScript代码。
2. 嵌入代码与外部文件
外部文件链接较嵌入代码主要有以下优点:
1.
可维护性:JavaScript代码(行为层)与HTML(结构层)分离,可以使开发人员集中处理JavaScript代码,而不用触及HTML文件。
2.
可缓存性:当两个及以上HTML文件共用相同的JavaScript文件时,当打开第一个HTML文件时,浏览器可以缓存所有的JavaScript文件,当打开其他HTML文件时可以快速加载,节约了流量。
3. 文档模式
在HTML文件的<head>元素中要声明文档类型(DOCTYPE)。因为文档模式有混杂模式和标准模式之分,在未声明文档类型时,浏览器会默认开启混杂模式,在这种情况下,各个浏览器会产生很大的行为差异。
对于标准模式,可以通过以下任意一种文档类型来开启:
<!-- HTML 4.01 严格型 –>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML 1.0 严格型 –>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!-- HTML 5 –>
<!DOCTYPE html>
显而易见,HTML5标准下的文档模式更简单,其他两种声明较复杂。
4. <noscript>元素
使用JavaScript要秉持两个基本原则:渐进增强和平稳退化。对于不支持JavaScript或禁用JavaScript的浏览器可以使用<noscript>元素做到平稳退化,例如:
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript。</p>
</noscript>
</body>
</html>
这个页面在不支持JavaScript或禁用JavaScript脚本的情况下,会显示一条提示。如果启用脚本,就不会看到<noscript>里的内容。