要把JavaScript放入网页中,就不得不涉及到web的核心语言HTML。JavaScript就是通过HTML的<script>元素插入到网页中的。众所周知JavaScript是netscape公司发明的,所以<script>元素也是netscape公司创造的,后来被加入到正式的HTML规范中
<script>元素有以下6个属性:
async:可选。表示立即下载和执行脚本,但是不阻塞页面的其他操作,只对外部文件有效
charset:可选。表示通过src属性指定的代码的字符集。因为大多数浏览器会忽略它的值,所以很少人用这个属性。
defer:可选。表示下载完脚本之后延迟到文档完全被渲染显示出来后再执行,只对外部文件有效,IE7及更早版本对嵌入脚本也支持这个属性
language:已废弃。用于表示使用哪种脚本语言来编写代码,很多浏览器会忽略这个属性,没有必要用
src:可选。用于指定包含脚本的外部文件
type:可选。可以看成是language的替代属性,表示脚本的内容类型(MIME类型)默认值是text/javascript
使用<script>元素的方式有两种:
- 直接在页面中嵌入JavaScript代码
- 包含外部JavaScript文件
页面中可以包含多个<script>元素,如果不包含defer和async属性,浏览器会根据从上到下<script>标签出现的先后顺序依次进行解释
直接在页面中嵌入JavaScript代码
<script>
function sayHi(){
alert("Hi!");
}
</script>
如上所示,在<script>元素内部的JavaScript代码将由上至下依次被解释,在代码被解释的过程中,该<script>元素以下的页面内容将不会被处理,所以JavaScript的解释是同步的。注意在嵌入的代码里不要出现“</script>”字符串,不然浏览器会报错,因为浏览器在解释代码时会把“</script>”字符串当作是结束标签。可以通过转义字符来解决这个问题,比如这样写“</script>”,就不会报错了
包含外部JavaScript文件
要包含外部JavaScript文件,就要用到src属性,该属性的值是指向外部JavaScript文件的链接地址,外部文件的扩展名.js不是必需的,浏览器不会去检查扩展名,所以src可以引入JSP、PHP的服务器脚本来动态生成JavaScript代码。src的值还可以是跟页面不是同一个域的文件链接地址,就是可以跨域
<script src="example.js" ></script>
通过以上代码,外部JavaScript文件将被加载到页面中,外部文件只需包含<script>标签和</script>标签之间的代码。在下载和解释外部JavaScript文件时,也会阻塞页面的其他操作。包含了src属性的<script>元素不应该在<script>标签和</scritp>标签之间再包含内嵌的JavaScript代码,内嵌的代码将被忽略。
嵌入代码 vs 外部文件
没有硬性要求要使用哪种方式引入JavaScript,两种方式都可以使用,但是使用外部文件方式有以下优点:
- 可维护性:遍布不同HTML页面的内嵌JavaScript会很难维护,而将所有JavaScript放到同一个文件夹下的外部文件中,维护起来会更方便
- 可缓存:使用外部文件可以启用http文件缓存,不同页面使用到同一个外部JavaScript文件时,这个文件只需下载一次,加快了页面的加载速度
- 适应未来:内嵌JavaScript方式在不同版本的HTML中会有不同的解释行为,而外部JavaScript文件方式解释行为是一致的
<script>元素在页面中的位置
按照传统的做法,所有<script>元素都放在<head>元素当中,这样做的目的是把所有的外部文件包括css文件都统一放到一个地方便于管理。但是这样做存在一个问题,因为<script>元素会阻塞页面的渲染,所以当页面中包含的JavaScript代码比较多时,页面的内容呈现会延迟比较多,就会出现空白页面的情况。为了避免这个问题,现在的页面都把全部的<script>元素放到<body>元素中页面内容的后面,这样就不会阻塞页面的呈现了
不支持JavaScript呢?
当浏览器不支持JavaScript或者浏览器中的JavaScript被禁用了,如何让页面能够平稳退化呢?这时就可以使用<noscript>元素了!使用<noscript>元素可以在不能使用JavaScript的浏览器中显示替代内容,<noscript>元素可以包含<body>元素中除<script>元素以外的所有元素
<html>
<head>
<script src="example.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript </p>
</noscript>
</body>
</html>
如上代码中,当浏览器不支持或者禁用了JavaScript时,<noscript>中的文本就会显示出来,否则将不会显示<noscript>中的任何内容
网友评论