向HTML页面中插入JavaScript的主要方法,就是使用<script>元素。
script元素的属性:
async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载替他资源或等待加载其他脚本。只对外部脚本文件有效。
charset:可选。表示通过src属性指定的代码的字符集。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本文件有效。
src:可选。表示包含要执行代码的外部文件。
type:可选。可以看成是language的替代属性,表示编写代码使用的脚本语言的内容类型。默认值以及通常情况下的使用值:text/javascript。
script元素的使用方式:
一:直接在页面中嵌入JavaScript代码。
二:包含外部JavaScript文件。
注意:
带有src属性的<script>元素不应该在其<script>和<script/>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。另外通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。
标签的位置:
传统做法:所有<script>元素都应该放在页面的<head>元素中。
缺点:对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口将会是一片空白。
现代做法:一般会把全部JavaScript引用放在<body>元素中页面内容的后面。
延迟脚本:
<script>标签多的defer属性,用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后在运行,因此,defer属性相当于告诉浏览器立即下载,但延迟执行。
defer属性只适用于外部脚本。
异步脚本:
HTML5为<script>元素定义了async属性。这个属性与defer属性类似,都用于改变处理脚本的行为。async属性只适用于外部脚本,并告诉浏览器立即下载文件。但标记为async的脚本并不保证按照指定它们的先后顺序执行。但指定async属性的目的是不让页面等待多个脚本下载和执行,从而异步加载页面其他内容。为此建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行。
问题:并不是所有的浏览器都支持JavaScript?
解释:不支持的浏览器会把<script>元素的内容直接输出到页面中,因而会破坏页面的布局和外观。
解决方式:给脚本加上HTML注释。
原理:不支持JavaScript的浏览器会忽略<script>标签中的内容,而那些支持JavaScript的浏览器在遇到这种情况时,则必须进一步确认其中是否包含需要解析的JavaScript代码。但是现在所有的浏览器都已经支持JavaScript了,因此也没有必要再使用这种格式了。
引用外部文件的好处:
可维护性:可以再不触及HTML的情况下,集中精力编辑JavaScript代码。
可缓存 :如果有多个页面都需要使用同一个文件,那么这个文件只需要下载一次。加快页面加载的速度。
适应未来:无需使用前面提到的注释hack。
<noscript>元素:
可以解决浏览器不支持JavaScript时,页面平稳地退化。
当出现以下情况之一时<noscript>中的内容才会呈现出来,否则永远也不会显示:
浏览器不支持JavaScript。
浏览器支持脚本,但脚本被禁用。