js002-在HTML中使用JavaScript
2.1 <script>元素
定义了以下6个属性
|
async: 可选。表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。(异步的) |
|
charset：可选。表示通过src属性指定的代码的字符集。 |
|
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本有效。IE7及其更早的版本也支持这个属性。（延迟，延期） |
|
src：可选。表示包含要执行代码的外部文件。 |
|
type：可选。可以看成是language的替代属性，表示编写代码使用的脚本语言的内同类型 |
<script type="text/javascript"></script>
使用<script>元素的方法有两种在：直接嵌入Javascript代码和包含外部Javascript文件
2.1.1直接嵌入Javascript代码：
|
<script type="text/javascript"> function sayhi(){ alert("hi~"); } </script> |
直接嵌入Javascript代码时，不要再代码中出现</script>，否则浏览器会认为那是一个结束标签，通过转义符可以解决这个问题
|
有问题： <script type="text/javascript"> function sayhi(){ alert("</script>"); } </script> |
解决问题： <script type="text/javascript"> function sayhi(){ alert("<\/script>"); } </script> |
2.1.2 引入外部Javascript文件
必须包含src属性，这个属性值是一个指向外部Javascript文件的链接。
|
<script type="text/javascript" src="example.js"> function sayhi(){ alert("hi~"); } </script> |
2.1.3标签的位置
一般放在页面的<head>元素里面
|
<!DOCTYPE html> <html> <head> <title>example page</title> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </head> <body> （内容） </body> </html> |
放在所有内容的后面，这样浏览器在解析Javascript代码之前就把整个页面展示出来了，这样加快了打开速度。
|
<!DOCTYPE html> <html> <head> <title>example page</title> </head> <body> （内容） <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </body> </html> |
2.1.4延迟脚本 defer属性 （只适用于外部文件）
在<script>元素中使用defer属性，相当于告诉浏览器立即下载，单延迟执行。（在遇到</html>元素后才执行）
|
<!DOCTYPE html> <html> <head> <title>example 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> |
在html文档中，要把defer属性设置为defer="defer"。
2.1.5异步脚本 async属性，用来改变处理脚本的行为，只适用于外部脚本
|
<!DOCTYPE html> <html> <head> <title>example page</title> <script type="text/javascript" async="async" src="example1.js"></script> <script type="text/javascript" async="async" src="example2.js"></script> </head> <body> </body> </html> |
第二个脚本可能会在第一个脚本之前执行，所以保证两个脚本的不相关性很重要。
在html文档中，要把sync属性设置为async="async"
2.1.6在xhtml中的用法
|
<script type="text/javascript"> function compare(a, b){ if (a < b) { alert("A is less than B"); }else if (a > b) { alert("A is greater than B"); }else{ alert("A is equal to B"); } } </script> |
用(<) 替换代码中的小于号(<)
|
如：if (a < b) |
2.2 嵌入代码与外部文件
最好适用外部文件，外部文件有以下优点：
|
可维护性：维护代码比较轻松 |
|
可缓存：浏览器能根据具体的设置缓存连接的所有外部Javascript文件 |
|
适应未来： |
2.3 文档模式
混杂模式和标准模式
2.4 <noscript>元素
在以下集中情况中会显示出来（一般放在body中）
|
浏览器不支持脚本 |
|
浏览器支持脚本，但是脚本被禁用 |
2.5