1. 脚本

1.1. 什么是脚本

  1. 一段脚本是一系列的指令，一台计算机可以执行这些指令来达成目标。
  2. 可以将脚本类比成现实生活中的食谱、手册、说明书。
  3. 脚本由一台计算机可以一步一步执行的指令组成。
  4. 根据用户如何与 Web 页面进行交互，浏览器可以只执行脚本的某个部分。
  5. 脚本可以运行代码中的不同部分来响应它周围的情景。

1.2. 编写一段脚本

  1. 要编写一段脚本，首先需要确定自己的目标，然后列出为了达成这个目标需要完成的任务。
  2. 从要达成的目标的大局出发，然后将它分解成更小的步骤。

1.2.1. 定义目标

  1. 首先，你需要定义你要完成的任务。
  2. 可以想象成一个需要计算机解决的拼图游戏。

1.2.2. 设计脚本

  1. 要设计一段脚本，需要将目标分解成一系列解决拼图游戏所需要的任务，这可以通过一个流程图来实现。
  2. 然后编写计算机完成每个任务所需执行的各个步骤以及执行任务时所需的其他任何信息，就像编写一个可以一步步执行的菜谱一样。

1.2.3. 写出每个步骤的代码

  1. 每个步骤都需要使用计算机能够理解的编程语言编写出来。
  2. 在 Web 开发中，JavaScript 就是要使用的编程语言。

1.3. 设计一段脚本

1.3.1. 任务

  1. 一旦了解了脚本要完成的任务，就可以开始制定需要完成的单个任务了。
  2. 可以通过一个流程图来鸟瞰所有的任务。

1.3.2. 步骤

  1. 每一个任务都可以被分解成一系列步骤。
  2. 当准备开始编写脚本时，这些步骤可以被翻译为一行行的代码。

1.3.3. 从步骤到代码

  1. 流程图中的每一个步骤，都需要使用一门计算机能够理解和执行的语言来编写。
  2. 程序语言和人类语言一样，需要掌握对应的词汇和语法。

1.3.4. 定义目标/设计脚本

1.3.5. 在流程图中画出这些任务

  1. 脚本需要在不同的情况下执行不同的任务。
  2. 可以使用流程图来表达任务是如何组合在一起的。
  3. 流程图会显示出每个步骤之间的路径。
  4. 流程图上的箭头显示了脚本是如何从一个任务执行到下一个任务的。
  5. 不同形状代表不同类型的任务。
  6. 在某些地方需要进行决策，这些决策会导致代码按照不同的路径来执行。

2. 如何用计算机描述世界

2.1. 计算机使用数据来创建世界的模型、

  1. 一台计算机对酒店或者车没有任何概念。
  2. 程序员使用数据来创建这些模型。
  3. 数据是计算机用来执行指令并完成任务所唯一需要的东西。

2.2. 对象和属性

  1. 在计算机编程中，现实世界中的每个物理物件都可以被表示为一个对象。
  2. 每个对象都有各自的属性、事件、方法，这三者组合起来，就创建了那个对象的一个可用模型。
  3. 程序员将描述事物的特征称为属性。
  4. 每个属性都有一个名称和值，这些一对一的名称-值组合会告诉你某种对象的每个实例的特征。

2.3. 事件

  1. 在真实的世界中，人们会和对象进行交互。这些交互可以更改对象的属性值。
  2. 对于每一种类型的对象，人们与之交互的方式都是通用的。
  3. 程序也被设计成当用户与计算机以不同的方式进行交互时，做不同的事情。
  4. 程序员可以在一种特定的事件发生时选择响应哪些事件，事件可以用来触发一段特定的代码。
  5. 脚本通常使用不同的事件来触发不同类型的功能。
  6. 一段脚本可以声明哪些事件是程序员想要响应的，当那些事件中的某个事件发生时，那些脚本会被运行。

2.4. 方法

  1. 方法表示人们通过对象需要做的事情，方法可以获取或更新对象的属性值。
  2. 方法表示在真实世界中人们如何与对象进行交互。
  3. 方法可以告诉你一些关于对象的事情，并更改对象的一个或多个属性值。
  4. 方法的代码可以包含许多指令，这些指令合起来完成一项任务。

2.5. 结合属性、事件、方法

  1. 计算机使用数据来为真实世界中的事物建立模型。
  2. 一个对象的事件、方法、属性是彼此相连的，事件可以触发方法，方法可以获取或更新对象的属性。

2.6. Web 浏览器是使用对象构建的程序

  1. Web 浏览器也会为它们正在显示的 Web 页面以及页面所在的浏览器窗口建立的模型。
  2. Web 浏览器使用 window 对象来表示窗口或选项卡，比如：window 对象的 location 属性会告诉你当前页面的 URL。
  3. 在每个窗口中载入的当前 Web 页面使用 document 对象建模。document 对象的 title 属性会告诉你 Web 页面上 <title> 和 </title> 标签之间的标题是什么。

2.7. document 对象表示 HTML 页面

  1. 使用 document 对象，可以访问或修改用户在页面上看到的内容，并根据用户与页面的交互方式进行响应。
  2. document 对象也有属性、方法和事件。
  3. 属性：属性描述了当前 Web 页面的特性，例如页面的标题。
  4. 方法：方法执行与浏览器中当前载入的文档有关任务，例如：从一个特定元素中获取信息，或者添加新的内容。
  5. 事件：可以响应事件，例如用户用鼠标点击。
  6. 由于所有主流的浏览器都使用相同的方式来实现 document 对象，创建浏览器的工程师已经实现了你可以访问的属性，这些属性暴露了浏览器中当前页面的一些信息；编写了完成一些常见任务的方法，这些任务都是你想要对一个 HTML 页面进行的操作。
  7. document 对象只是浏览器支持的一组对象中的一个。当浏览器创建一个 Web 页面的模型时，它不仅仅创建一个 document 对象，还会为页面上的每一个元素都创建一个新对象。这些对象被称为 DOM (Document Object Model) 文档对象模型。

2.8 浏览器如何看待 Web 页面

2.8.1. 以 HTML 代码方式接受页面

  1. Web 网站上的每个页面都可以被视为一个单独的文档。
  2. 整个网络中包含许多网站，每个网站都是由一个或多个文档组成。

2.8.2. 创建页面的模型，将存储在内存中

  1. 浏览器会根据接受到的 HTML 代码建立页面的对象模型。
  2. 最顶端的模型是一个 document 对象，document 下的每一个方块都被称为一个节点。每个节点都是另一个对象，例如 <head> 对象等。

2.8.3. 使用渲染引擎将页面显示到屏幕上

  1. 如果没有 CSS，渲染引擎会将默认的样式应用到 HTML 元素上。
  2. 当浏览器接收到 CSS 规则时，渲染引擎处理这些规则，然后将每一条规则应用到对应的元素上。

2.8.4. 执行 JavaScript 脚本

  1. 当在浏览器中使用 JavaScript 时，浏览器会有一个被称为解释器的组件。
  2. 解释器读取 JavaScript 指令，将它们翻译成浏览器能够用来完成你想要它完成的任务的指令。

3. 如何编写 JavaScript 脚本

3.1. HTML、CSS、JavaScript 是如何相互结合的

  1. Web 开发人员会使用三种用来创建 Web 页面的语言：HTML、CSS、JavaScript。
  2. 通常将这三种语言放置到不同的文件中，然后让 HTML 页面链接 CSS 和 JavaScript 文件。
  3. 每一种语言都形成了不同的层级，每个层级都构建在之前的层级上。
  4. html 文件代表内容层，它是页面的内容所在，HTML 定义了页面的结构和语义。
  5. css 文件代表展现层，CSS 使用规则来指定 HTML 内容应该如何被呈现。
  6. js 文件代表行为层，这是可以用来更改页面行为、增强交互性的地方。

3.2. 渐进式增强

  1. 仅有 HTML，会让你关注网站中最重要的部分：网站的内容。
  2. HTML + CSS，在单独的文件中添加 CSS 规则可以让规则只关注页面的外观而非页面的内容。
  3. HTML + CSS + JavaScript，JavaScript 往往最后被添加，用来强化页面的可用性或提升与网站进行交互的体验。

3.3. 从 HTML 页面链接 JavaScript 文件

  1. 需要使用 <script> 元素告诉浏览器载入脚本。
  2. src 属性指示了 JavaScript 文件的存储位置。
1

<script src="./xx/xx.js"></script>

3.4. 在页面上放置脚本

  1. 也可以在 <script></script> 标签之间直接编写 JavaScript 代码，但是不建议。

3.5. 使用对象和方法

  1. 以 JS 代码 document.write('Hello') 为例，该代码的作用是像页面中追加打印 Hello。
  2. document 对象表示整个 Web 页面。
  3. . 号表示成员操作符，document 对象中包含的多个方法和属性被称为对象的成员。可以在对象名称和想要访问的成员之间使用 . 来访问对象的成员。
  4. write('Hello') 代表方法，其中 'Hello' 是方法的参数。
  5. 当一个方法需要一些信息才能完成它的工作时，这些信息通过括号中的数据传递给方法。
  6. 圆括号中的每一项数据都被称为方法的一个参数。

3.6. JavaScipt 执行位置

  1. 浏览器会在遇到 <script> 元素时才会执行其中包含的 JS 脚本代码。