一、script元素
使用<script>元素,向HTML页面中插入javascript代码;
<script>元素的属性包括:
使用<script>元素的方式有两种:直接在页面中嵌入javascript代码和包含外部javascript文件;async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,只对外部脚本文件有效;
charset:可选,表示通过src属性指定的代码的字符集;
defer:可选,表示脚本可以延迟到文档完全被解析和显示之后在执行,只对外部脚本文件有效;
language:已废除;
src:可选,表示包含要执行代码的外部文件;
type:可选,表示编写代码使用的脚本语言的内容类型;
<script type="text/javascript"><span style="white-space:pre"> </span>//在页面中嵌入javascript代码 function sayHi(){<span style="white-space:pre"> </span>//在解释器对<script>元素内部代码执行完毕之前,页面中的其他内容(HTML、css)都不会被浏览器加载或显示; alert("Hi!"); } </script>
无论如何包含代码,只要不存在defer和async属性,浏览器都会按照<script>元素在页面中的出现的先后顺序依次对它们进行解析;<script type="text/javascript" src="example.js"><span style="white-space:pre"> //加载外部javascript文件;</span> </script> <span style="white-space:pre"> </span>//带有src属性的<script>不应该在<script></script>之间加入代码,会被解释器自动忽略;
1、标签的位置
按照惯例,所有<script>元素都应该放在页面的<head>元素中,例如:
在文档的<head>元素中包含所有javascript文件,意味着必须等到全部javascript代码都被下载解析和执行完成之后,才能开始呈现页面的内容,导致浏览器在呈现页面的时候出现延迟,页面一片空白;为了避免这种情况发生,现在的web应用程序一般把<script>元素放在<body>元素的最后面,如:<html> <span style="white-space:pre"> </span><head> <span style="white-space:pre"> </span><title></title> <span style="white-space:pre"> </span><script type="text/javascript" src="example.js"></script> <span style="white-space:pre"> </span></head> <span style="white-space:pre"> </span><body> <span style="white-space:pre"> </span></bodfy> </html>
<html> <span style="white-space:pre"> </span><head> <span style="white-space:pre"> </span><title></title> <span style="white-space:pre"> </span></head> <span style="white-space:pre"> </span><body> <span style="white-space:pre"> </span><script type="text/javascript" src="example.js"></script> <span style="white-space:pre"> </span></body> </html>
2、延迟脚本
HTML4.01为<script>标签定义了defer属性,这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面解析完毕后再运行,如:
<!DOCTYPE html> <html> <span style="white-space:pre"> </span><head> <span style="white-space:pre"> </span><title></title> <span style="white-space:pre"> </span><script type="text/javascript" defer="defer" scr="example.js"></script> <span style="white-space:pre"> </span><script type="text/javascript" defer="defer" scr="example.js"></script> <span style="white-space:pre"> </span></head> <span style="white-space:pre"> </span><body> <span style="white-space:pre"> </span></body> </html>
3、异步脚本
4、在XHTML中的用法HTML5为<script>元素定义了async属性,这个属性告诉浏览器立即下载文件;标记为async的脚本并不保证按照指定它们的先后顺序执行;
5、不推荐使用的语法
二、嵌入代码和外部文件
在HTML中嵌入javascript代码虽然没有问题,但一般认为最好的做法还是尽可能使用外部文件来包含javascript代码,优点如下:
可维护性:遍及不同HTML页面的javascript会造成维护问题,但把所有javascript文件都放在一个文件夹中,维护起来方便多;
可缓存:浏览器能够根据具体的设置缓存链接的所有外部javascript文件,也就是说,如果有两个页面都使用同一个文件,那么这个文件只需下载一次;
适应未来:
三、文档模式
四、noscript元素
早起浏览器都面临一个特殊的问题,即当浏览器不支持javascript时如何让页面平滑的退出。对这个问题的最终解决方案就是创造一个<noscript>元素,用以在不支持javascript的浏览器中显示代替的内容。这个元素可以包含能够出现在文档<body>中的任何HTML元素——script元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来:
符合上述任何一个条件,浏览器都会显示<noscript>中的内容。而除此之外的情况,浏览器不会呈现<noscript>中的内容;浏览器不支持脚本;
浏览器支持脚本,但脚本被禁用;
<html> <span style="white-space:pre"> </span><head> <span style="white-space:pre"> </span><title></title> <span style="white-space:pre"> </span><script type="text/javascript" defer="defer" src="example.js"></script> <span style="white-space:pre"> </span><script type="text/javascript" defer="defer" src="example.js"></script> <span style="white-space:pre"> </span></head> <span style="white-space:pre"> </span><body> <span style="white-space:pre"> </span><noscript> <span style="white-space:pre"> </span><p>本页面需要浏览器支持javascript</p> <span style="white-space:pre"> </span></noscript> <span style="white-space:pre"> </span></body> </html>