JavaScript的组成
1.ECMAScript:提供核心语言功能
2.文档对象模型(DOM):提供访问和操作网页内容的方法和接口
3.浏览器对象模型(BOM):提供和浏览器交互的方法和接口
在HTML中使用JavaScript
<script>元素
1.script元素的属性
- async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或者等待加载其他脚本,只对外部脚本文件有效
- charset:可选,表示通过src属性指定的代码的字符集, 很少使用
- defer: 可选,表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部脚本文件有效
- language: 已经废弃
- src: 可选,表示包含要执行代码的外部文件
- type: 可选,表示编写代码使用的脚本语言的内容类型(也称MIME类型).
2.<script>元素的使用
- 1直接在页面中嵌入JavaScript代码(只需为<script>指定type属性)
<script type = "text/javascript">
function sayHi() {
alert("Hi!");
}
</script>
注意:
a.包含在<script>中的代码将被从上到下依次解释,以上实例,解释器会解释一个函数的定义,然后将该定义保存在自己的环境当中,在解释器对<script>元素内部的所有代码求值完毕以前,页面其他内容都不会被浏览器加载或者显示(意思是浏览器会依次解释代码,所有代码都解释完毕之后才会被加载显示)
b.使用<script>嵌入JavaScript代码时不要在代码任何地方出现"</script>"字符串,否则会被浏览器认为是结束时的标签,可以通过转移字符解决这个问题</script>
- 2 通过<script>元素来包含外部JavaScript文件,必须包含src属性
<script type = "text/javascript" src = "example.js"> </script>
注意:
a.在上面的实例中:外部文件通常只需要包含要放在开始<script>和结束</script>之间的那些JavaScript代码即可.与上面解析嵌入式代码一样,在解析外部JavaScript代码(包括下载该文件)时,页面的处理也会停止
b.外部文件一般带有.js扩展名,但不是必须的,使得服务器端动态生成JavaScript代码成为了可能
c.在带有src属性的<script>元素标签中间不应该再包含额外的JavaScript代码,即使包含,也不会执行
d.src属性还可以包含来自外部域的JavaScript文件,即它的src可以指向当前HTML页面所在域之外的某个域中的完整URL
<script type = test/javascript src = "http://www.somewhere.com/afile.js"> </script>
要想包含不同域的代码,要么你是这个域的拥有者,要么域的所有者值得信赖,否则有可能会被恶意修改
f.包含代码时,只要不存在defer和async属性,浏览器都会按照<script>元素在页面中出现的顺序对它们依次进行解析.通俗的说,在第一个<script>元素包含的代码解析完成后,再解析第二个....
标签的位置
1.传统做法,所有<script>元素都应该放在页面的<head>元素中,
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type = "text/javascript" src = ""example1.js"></script>
<script type = "text/javascript" src = ""example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
目的:把所有的外部文件(包括css文件和JavaScript文件)的引用都放在相同的地方,缺点是,必须等到全部JavaScript代码都被下载,解析和执行完成之后,才开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容),必然导致呈现页面出现延迟(即浏览器窗口将一片空白),现代做法是将全部JavaScript引用放在<body>元素中页面内容的后面
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type = "text/javascript" src = ""example1.js"></script>
<script type = "text/javascript" src = ""example2.js"></script>
</body>
</html>
延迟脚本(defer)
作用:表明脚本在执行时不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行.设置此属性相当于告诉浏览器立即下载,但延迟执行.
<!DOCTYPE html>
<html>
<head>
<title>Example HTML 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>
注意:
a.此处虽然放在<head>元素中,但包含的脚本将延迟到浏览器遇到</html>标签后再执行
b.HTML5要求脚本按照出现的先后顺序执行,因此第一个延迟脚本会优于第二个执行,都会优于DOMContentLoaded事件.但是在现实当中,并不一定,最好只包含一个延迟脚本
c.defer属性只适用于外部脚本文件,嵌入的脚本文件会忽略这一属性
异步脚本(async)
作用:只适用于外部脚本文件,并告诉浏览器立即下载文件,async的脚本并不保证按照它们的先后顺序执行
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type = "text/javascript" async src = ""example1.js"></script>
<script type = "text/javascript" async src = ""example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
注意:不能保证第二个脚本文件在第一个脚本文件之前执行,设置async的目的是为了让页面不必等待两个脚本下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM
总结:
1.async属性,不用等待脚本下载和执行,脚本在下载完成后异步执行,多个脚本执行顺序不确定
2.defer属性,告诉浏览器立即下载,但是脚本会在页面解析完毕之后执行,并且是有顺序的
3.如果两个属性都没有,那么脚本会在页面解析中，停止页面解析，立刻下载并且执行.
4.注意脚本文件的依赖性,哪些文件可以延迟加载,合理选择属性.
嵌入代码和外部文件的比较
最好使用嵌入外部文件,好处如下:
1.可维护性:将JavaScript代码和HTML代码分离开,便于开发
2.可缓存:浏览器可以根据具体的设置缓存链接所有外部JavaScript文件,如果有多个页面都使用了同一个文件,那么文件只需下载一次,加快页面加载的速度
3.适应未来
文档模式
<!-- HTML 5 -->
<!DOCTYPE html>
<noscript>元素
包含在<noscript>中的元素只有在以下情况下会被显示出来
1.浏览器不支持脚本
2.浏览器支持脚本,但脚本被禁用
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type = "text/javascript" async src = ""example1.js"></script>
<script type = "text/javascript" async src = ""example2.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript
</noscript>
</body>
</html>
总结
- 在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL.这个文件既可以与包含它的文件在同一个服务器上,也可以是其他域中的文件
- 所有<script>元素都会按照它们在页面中出现的先后顺序依稀被解析
- 由于不添加属性时,浏览器会解析完<script>中的代码,所有应该放到</body>标签漆面
- defer和async的使用
网友评论