JavaScript学习笔记（第1，2章）_javascript本章小结-优快云博客

第一章 JavaScript简介

1.1 JavaScript简史

在这里插入图片描述

1.2 JavaScript实现

JavaScript由三部分组成

核心（ECMAScript）
文档对象模型（DOM）
3.浏览器对象模型（BOM）

1.2.1 ECMAScript

由ECMA-262定义的ECMAScript与Web浏览器没有依赖关系。实际上，这门语言本身并不包含输
入和输出定义。ECMA-262定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。
我们常见的Web浏览器只是ECMAScript实现可能的宿主环境之一(包括Node（一种服务端JavaScript平台）和Adobe Flash)。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。

ECMAScript的组成部分包括：
语法 类型 语句 关键字 保留字 操作符 对象

1.2.2 DOM

文档对象模型(DOM，Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口(API，Application Programming lnterface)。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

结构如下图：
在这里插入图片描述

1.2.3 BOM

可以访问和操作浏览器窗口的浏览器对象模型，开发人员使用BOM可以控制浏览器显示的页面以外的部分。
而BOM真正与众不同的地方(也是经常会导致问题的地方)，还是它作为JavaScript实现的一部分但却没有相关的标准。(这个问题在HTML5中得到了解决，HTML5致力于把很多BOM功能写入正式规范。HTML5发布后，很多关于BOM的困惑烟消云散。)

1.3 小结

JavaScript是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：

ECMAScript: 由ECMA-262定义，提供核心语言功能
文档对象模型(DOM): 提供访问和操作网页内容的方法和接口
浏览器对象模型(BOM): 提供与浏览器交互的方法和接口

第二章在HTML中使用JavaScript

2.1 script元素

<script> 元素的六种属性
使用<script>元素的两种方式

直接在页面嵌入JavaScript代码

<script >
 function sayHi() { 
 	alert("Hi!"); 
 } 
</script>

包含外部的JavaScript文件

<script type="text/javascript" src="example.js"></script>

1.需要注意，带有src属性的<script>标签中不能存在额外的JavaScript代码，因为会被直接忽略。
2.无论如何包含代码，只要不存在defer和async属性，浏览器都会按照script>元素在页面中出现的先后顺序对它们依次进行解析

2.1.1 标签的位置

按照惯例，所有的<script>元素都应该放在页面的<head>元素中，如

在这里插入图片描述

这种做法的目的就是把所有外部文件(包括css文件和JavaScript文件)的引用都放在相同的地方。可是，在文档的元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到标签时才开始呈现内容）.

为了避免这个问题，现代web应用程序一般都把全部JavaScript引用放在<body>元素中页面的内容后面，如

2.1.2 延迟脚本–defer

HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页
面的构造,也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置
defer属性，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html> 
<html> 
 <head> 
	 <title>Example HTML Page</title> 
	 <script  type="text/javascript" defer src="example1.js"></script> 
	 <script type="text/javascript" defer src="example2.js"></script> 
 </head> 
 <body> 
 	<!-- 这里是页面内容 --> 
 </body> 
</html>

第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在 DOMContentLoaded 事件之前执行。

2.1.3 异步脚本–async

HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本
的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer
不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。例如：

<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 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。

2.1.4 嵌入代码和外部文件

在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码，因其有以下优点：

2.2 noscript元素（略）

在这里插入图片描述

2.3 小结

把JavaScript插人到HTML页面中要使用<script>元素。使用这个元素可以把JavaScript嵌入到
HTML页面中，让脚本与标记混合在一起,也可以包含外部的JavaScript文件。而需要注意：

在包含外部JavaScript文件时，必须将src属性设置为指向相应文件的URL。而这个文件既可
以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。
所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer和
async属性的情况下，只有在解析完前面<script>元素中的代码之后，才会开始解析后面
<script>元素中的代码。
由于浏览器会先解析完不使用defer属性的<script>元素中的代码，然后再解析后面的内容，
所以一般应该把<script>元素放在页面最后，即主要内容后面，</body>标签前面。
使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。使用async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。