JavaScript简介 · JavaScript半知半解

## JavaScript简介 JavaScript诞生于1995年，它的主要目的是处理以前由服务器端语言负责的一些输入验证操作。完整的JavaScript实现由下列三个不同的部分组成： - 核心（ECMAScript） - 文档对象模型（DOM） - 浏览器对象模型（BOM） **一、JavaScript简介** **1.1 ECMAScript** `ECMAScript`是由ECMA-262定义的，它提供了核心语言功能。 Web浏览器只是ECMAScript实现可能的宿主环境之一。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。 ECMA-262规定这门语言的下列组成部分：语法、类型、语句、关键字、保留字、操作符、对象 ECMAScript就是对实现该标准规定的各个方面内容的语言的描述。 ECMAScript的不同版本又称为版次，以第x版表示。目前最新的是ECMAScript 6.0（简称：ES6） **1.2 文档对象模型（DOM）** 文档对象模型（**DOM**，Document Object Model）是针对XML但经过拓展用于HTML的应用程序接口（**API**，Application Programming Interface）。 **DOM**把整个页面映射为一个多层节点的结构（结构树）。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。 **DOM**提供访问和操作网页内容的方法和接口。 **1.3 浏览器对象模型（BOM）** 浏览器对象模型（BOM，Browser Object Model）是指可以访问和操作浏览器窗口的应用程序接口（API） **BOM**提供与浏览器交互的方法和接口。 **二、在HTML中使用JavaScript** **2.1 `<script>`元素** 向HTML页面中插入JavaScript的主要方法，就是使用`<script>`元素。 `<script>`中定义了下列6个属性： - `async`：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作。只对外部脚本文件有效 - `charset`：可选，表示通过src属性指定的代码的字符集，比较少用。 - `defer`：可选，表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。 - `language`：已废弃 - `src`：可选，表示包含要执行代码的外部文件 - `type`：可选，表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。在HTML5中，默认是text/javascript，所以不需要设置。使用`<script>`元素嵌入JavaScript代码，有两种方式：第一种：直接在页面中嵌入JavaScript代码，包裹在`<script>`元素之间： ``` <script> console.log('Hello World'); </script> ``` 注意：在使用`<script>`嵌入JavaScript代码时，切记不要在代码中的任何地方出现`</script>`。执行下面的代码时，会产生一个错误： ``` <script> function loadScript(){ alert('</script>'); } </script> ``` JavaScript代码的执行顺序：只要不存在defer和async属性，JavaScript代码就会从上至下依次解析。第二种：使用外链脚本形式，必须有src属性，而且指定一个外部JavaScript文件的链接。 ``` <script src="example.js"></script> ``` 注意：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码，嵌入代码会被忽略。只要不存在defer和async属性，浏览器都会按照`<script>`出现的先后顺序对它们依次进行解析。一般将全部JavaScript引用放在<body>元素中页面的内容后面。 **2.2 延迟脚本** 当给`<script>`元素添加了`defer`属性时，src指向的外部文件会立即下载，但包含的脚本会延迟到浏览器遇到`</html>`标签（整个页面解析完毕）后再执行（按添加顺序执行），会先于DOMContentLoaded事件执行。 ``` <script defer="defer" src="example.js"></script> <script async src="example2.js"></script> ``` 会先执行example.js，然后执行example2.js 注意：defer只适合外部脚本文件。 **2.3 异步脚本** `async`与`defer`属性类似，都用于改变处理脚本的行为，适用于外部脚本文件，并告诉浏览器立即下载，但标记为`async`的脚本并不保证按照指定它们的先后顺序执行。 ``` <script async src="example.js"></script> <script async src="example2.js"></script> ``` 两个执行顺序不定。指定`async`属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。注意：异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。 **2.4 使用外部文件的好处** - **可维护性**：将JavaScript文件都放在一个文件夹中，比每次都需要到不同的HTML页面修改JavaScript方便维护。 - **可缓存**：浏览器会缓存所有外部JavaScript文件，所以当你有多个页面使用同一个JavaScript脚本时，这个脚本只需下载一次。 **2.5 `<noscript>`元素** 当浏览器不支持JavaScript或被禁用时，显示里面的内容。 ``` <noscript> 本页面需要浏览器支持（启用）JavaScript </noscript> ``` **小结** - JavaScript由`ECMAScript`、`DOM`、`BOM`三部分组成； - ECMAScript由ECMA-262定义，提供核心语言功能； - 文档对象模型（DOM），提供访问和操作网页内容的方法和接口； - 浏览器对象模型（BOM），提供与浏览器交互的方法和接口； - 把JavaScript插入到HTML页面中要使用`<script>`元素，可以内嵌，也可以外链文件； - 使用`defer`属性可以让脚本在文档完全呈现之后再执行，延迟脚本总是按照它们的顺序执行；使用`async`属性表示当前脚本不必等待其他脚本，也不必阻塞文档呈现，不能保证按照它们在页面中出现的顺序执行。 - 使用`<noscript>`元素可以指定在不支持脚本的浏览器中显示的提示内容。