javascript高级程序设计读书笔记（1）第一章～第二章

最新推荐文章于 2023-05-03 21:15:14 发布

amarlianna

最新推荐文章于 2023-05-03 21:15:14 发布

阅读量430

点赞数

分类专栏： JS 文章标签： JavaScript

本文链接：https://blog.csdn.net/amarlianna/article/details/83002336

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第 1章 JavaScript 简介

1.1 JavaScript 简史

1.2 JavaScript 实现

一个完整的 JavaScript 实现应该由下列三个不同的部分组成(见图 1-1)。
 核心(ECMAScript)
 文档对象模型(DOM)
 浏览器对象模型(BOM)

1.2.1 ECMAScript

1. ECMAScript 的版本

2. 什么是 ECMAScript 兼容

3. Web 浏览器对 ECMAScript 的支持

ECMAScript 受主流 Web 浏览器支持的情况

1.2.2 文档对象模型(DOM)

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

1. 为什么要使用 DOM

2. DOM 级别

3. 其他 DOM 标准

4. Web 浏览器对 DOM 的支持

图：主流浏览器对 DOM 标准的支持情况
在这里插入图片描述

1.2.3 浏览器对象模型(BOM)

开发人员使用 BOM 可以控制浏览器显示的页面以外的部分。
BOM 只处理浏览器窗口和框架;但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分。
 弹出新浏览器窗口的功能;
 移动、缩放和关闭浏览器窗口的功能;
 提供浏览器详细信息的 navigator 对象;
 提供浏览器所加载页面的详细信息的 location 对象;
 提供用户显示器分辨率详细信息的 screen 对象;
 对 cookies 的支持;
 像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象

1.3 JavaScript 版本

大多数浏览器在提及对 JavaScript 的支持情况时，一般都以 ECMAScript 兼容性和对 DOM 的支持情况为准。

1.4 小结

JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成:
 ECMAScript，由 ECMA-262 定义，提供核心语言功能;
 文档对象模型(DOM)，提供访问和操作网页内容的方法和接口;
 浏览器对象模型(BOM)，提供与浏览器交互的方法和接口。
JavaScript 的这三个组成部分，在当前五个主要浏览器(IE、Firefox、Chrome、Safari 和 Opera)中都得到了不同程度的支持。其中，所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错，而对 ECMAScript 5 的支持程度越来越高，但对 DOM 的支持则彼此相差比较多。对已经正式纳入 HTML5 标准的 BOM 来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。

第 2章在 HTML 中使用 JavaScript

2.1 < script >元素

只要不存在 defer 和 async 属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析，然后才是第三个、第四个…

2.1.1 标签的位置

<body>后避免延迟时页面空白

2.1.2 延迟脚本

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

延迟脚本并不一定会按照顺序执行，也不一定会在 DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本。
defer 属性只适用于外部脚本文件。
为此，把延迟脚本放在页面底部仍然是最佳选择。

2.1.3 异步脚本（不是很懂在说啥？）

标记为 async 的脚本并不保证按照指定它们的先后顺序执行。因此，确保两者之间互不依赖非常重要。
指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。 为此，建议异步脚本不要在加载期间修改 DOM。

2.1.4 在XHTML中的用法

可扩展超文本标记语言，即 XHTML(Extensible HyperText Markup Language)，是将 HTML 作为 XML 的应用而重新定义的一个标准。编写 XHTML 代码的规则要比编写 HTML 严格得多，而且直接影响能否在嵌入 JavaScript 代码时使用<script/>标签。
HTML5 正快速地被前端开发人员采用，建议读者在学习和开发中遵循 HTML5 标准，本节内容可以跳过。

2.1.5 不推荐使用的语法

浏览器不支持javascript时用，不过现在不需要啦。

2.2 嵌入代码与外部文件

外部文件有如下优点：
 可维护性
 可缓存: 浏览器能够根据具体的设置缓存链接的所有外部 JavaScript 文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。
 适应未来: 适应 XHTML

2.3 文档模式

文档模式:混杂模式(quirks mode)、标准模式(standards mode)、准标准模式(almost standards mode).
这两种模式主要影响 CSS 内容的呈现，但在某些情况下也会影响到 JavaScript 的解释执行。
文档模式通过使用文档类型(doctype) 切换实现的：

对于标准模式，可以通过使用下面任何一种文档类型来开启:

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML 5 -->
<!DOCTYPE html>

而对于准标准模式，则可以通过使用过渡型(transitional)或框架集型(frameset)文档类型来触发
…

2.4 <noscript>元素

<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>
		<noscript> <p>本页面需要浏览器支持(启用)JavaScript.</noscript> 
	</body>
</html>

2.5 小结

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

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

另外，使用 <noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容。