【JS基础】JavaScript简介及在HTML中使用JavaS
JavaScript简介
1. JavaScript的实现
JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：
(1) 核心（ECMAScript），由 ECMA-262 定义，提供核心语言功能，描述了该语言的语法和基本对象；
规定了该语言的以下组成部分：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 对象
(2) 文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点。
(3) 浏览器对象模型（BOM），提供与浏览器交互的方法和接口。
BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：
- 弹出新浏览器窗口的功能；
- 移动、缩放和关闭浏览器窗口的功能；
- 提供浏览器详细信息的
navigator对象； - 提供浏览器所加载页面的详细信息的
location对象； - 提供用户显示器分辨率详细信息的
screen对象； - 对
cookies的支持； - 像
XMLHttpRequest和IE的ActiveXObject这样的自定义对象。
2. ECMAScript与JavaScript的关系
ECMAScript是JavaScript语言的国际标准，为JavaScript提供核心语言功能；JavaScript是ECMAScript的实现。
在HTML中使用JavaScript
1. 使用<script>元素
(1) <script>的属性
-
async：（可选）表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 -
src：（可选）表示包含要执行代码的外部文件。 -
charset：（可选）表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。 -
defer：（可选）表示脚本可以延迟到文档完全被解析显示之后再执行。只对外部脚本文件有效。 -
language（已废弃）用于表示编写代码使用的脚本语言。 -
type：（可选）可以看作是language的替代属性：表示编写代码使用的脚本语言的内容类型（也称MIME类型）。
(2) 使用<script>元素的方式
- 直接在页面中页面中嵌入
JavaScript代码
在使用<script>元素嵌入JavaScript时，只须为<script>指定type属性。然后把JavaScript代码直接放在元素内部即可。
<script type="text/javascript">//此为type属性的一个默认值
function sayHi(){
alert("Hi!");
// alert("</script>");
// 代码中不能出现"</script>"字符串，否则为错误；
alert("<\/script>");
// 若遇到可通过转义字符"\"解决这个问题。
}
</script>
- 包含外部
JavaScript文件
如果要通过<script>元素来包含外部JavaScript文件，那么src属性是必需的。其属性值是一个指向外部JavaScript文件的URL，这个文件既可 以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。。
<script type="text/javascript" src="example.js"></script>
带有
src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
(3) 延迟脚本(defer属性)
在<script>元素中设置defer属性，脚本会被延迟到整个页面都解析完毕后再运行，相当于告诉浏览器立即下载，但延迟执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<!--虽然放在了<head>中，但将延迟到浏览器遇到</html>后再执行-->
<!--第一个延迟脚本会先于第二个延迟脚本执行-->
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/jaavascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--这里放页面内容-->
</body>
</html>
把延迟脚本放在页面底部是最佳选择
(4) 异步脚本(async属性)
async属性告诉浏览器立即下载文件，且标记为async的脚本并不保证按照指定它们的先后顺序执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<!--第二个脚本文件可能会在第一个脚本文件之前执行-->
<script type="text/javascript" async src="example1.js"></script>
<script type="text/jaavascript" async src="example2.js"></script>
</head>
<body>
<!--这里放页面内容-->
</body>
</html>
指定
async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。
JavaScript解析顺序
- 所有
<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer和async属性的情况下，只有在解析完前面<script>元素中的代码之后，才会开始解析后面<script>元素中的代码。 - 由于浏览器会先解析完不使用
defer属性的<script>元素中的代码，然后再解析后面的内容， 所以一般应该把<script>元素放在页面最后，即主要内容后面，</body>标签前面。
- 嵌入代码和外部文件
推荐使用外部文件来包含 JavaScript 代码，有以下优点：
-
可维护性：把所有
JavaScript文件都放在一个文件夹中，更易于维护。 -
可缓存：浏览器能够根据具体的设置缓存链接的所有外部
JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。 - 适应未来
