JavaScript 与 HTML 之间的交互是通过 事件 实现的。事件三要素: 事件源.事件 = function(){ 事件处理程序 }；等价于 <标签 事件= “事件处理程序”>。

事件就是文档或浏览器窗口中发生的一些特定交互瞬间。包括事件类型、事件目标、事件处理程序、事件对象。

事件类型是用过用来说明发生什么类型事件的字符串。

事件目标是发生的事件或与之相关的对象。如 window、Document、Element 对象。以及由 XMLHTTPRequest 对象。

事件处理程序或事件监听程序是处理或响应事件的函数。

事件对象是与特定事件相关且包含有关该事件的详细信息的对象。

事件传播是浏览器决定哪个对象触发其事件处理程序的过程。当文档元素上发生某个类型的事件时，它们会在文档树上向上冒泡。

事件传播的另一中形式称为事件捕获，在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前捕获。

DOM 是针对 HTML 和 XML 文档的一个 API。 DOM 描绘了一个层次化的节点树。 HTML 文档的树形结构包含表示 HTML 标签或元素和表示文本字符串的节点，它也可能包括表示 HTML 注释节点。

DOM基本概念

DOM 描述

• DOM Document Object Model 文档对象模型
• 就是把HTML文档模型化，当作对象来处理
• DOM提供的一系列属性和方法可以视作一个工具箱，极大地方便了我们对文档的处理。

内容概念

• 文档(Document)：就是指HTML或者XML文件
• 节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有
  • 元素节点
  • 属性节点
  • 文本节点
  • 注释节点
• 元素(Element)
  • HTML文档中的标签可以称为元素

结构概念

• 父节点 当前节点的父级
• 子节点 当前节点的子级
• 兄弟节点 和当前节点同属一个父级的节点

DOM:中的顶级对象是document—-太监(大总管);BOM:中的顶级对象是window——皇上;整个浏览器就是window,页面中的document也属于window

• 变量,函数,对象都属于window
• 但是:写代码的时候,window可以直接省略

window 对象

BOM，即浏览器对象模型，核心是：window 对象

正则表达式是一个描述字符模式的对象。 JavaScript 的 RegExp 类表示正则表达式，String 和 RegExp 都定义了方法，后者使用正则表达式进行强大的模式匹配和文本检索与替换功能。

正则表达式定义

正则表达式的直接量定义为包含在一对斜杠 (/) 之间的字符

如：

1

var pattern = /s$/;

正则表达式中的基本元字符

• . 通配符（. 除了\n以外的任意一个内容）
• [] 表示的是范围:表示的是范围中的任意一个
• [0-9] 表示的是:0到9之间(包含)任意一个数字
• [a-z] 表示所有的小写字母中的一个
• [A-Z] 表示的是所有的大写字母中的任意一个
• [a-zA-Z] 表示的是所有的字母中的任意一个
• [9] 表示的就是9
• [0-9a-zA-Z] 表示的是任意的一个数字或者任意的一个字母
• ()表示的是分组(为了更明确这个正则表达式的意思),提升优先级
• | 表示的是或者的意思
• [0-9]|[a-z] 0-9之间的任意一个数字或者是小写字母中的任意一个字母
• *表示的是该符号前面的表达式出现了0次到多次
• + 表示的是该符号前面的表达式出现了1次到多次
• ? 表示的是该符号前面的表达式出现了0次到一次
• {} 表示的是前面的表达式出现了多少次,具体是多少次:大括号中的写法
• {n,m} 匹配前一项至少 n 次，但不超过 m 次
• {n,}匹配前一项 n 次或者更多次
• {n} 匹配前一项 0 次或多次，等价于 {0,}

ECMAScript 中只支持实现继承，而且主要依靠的是原型链来实现。

扩展原型对象实现继承

• 描述：直接在构造函数的prototype属性上添加方法
• 解决的问题：解决了直接将方法设置在构造函数上时，实例化每个对象这些方法都会开辟新空间，造成内存严重浪费的问题
• 缺点：如果将所有的方法都直接设置到原型对象上，代码冗余

1
2
3
4
5
6
7
8
9
10
11

/* 一、 扩展原型对象实现继承 */
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.personFn = function () {
    console.log("personFn is run...");
};
var p1 = new Person("z3", 13);
console.log("============== 一、 扩展原型对象实现继承 ==================");
p1.personFn();

原型对象

原型对象：构造函数的prototype属性：随着实例化的次数增加，不同的对象他们拥有的say方法指向不同的内存，能相同，造成了内存的浪费,为了解决内存，将这个方法放在某个对象（原型对象）中.

结论1：给构造函数的prototype属性（对象）添加一个方法，这个方法就可以被构造函数的实例所共享
推论1：构造函数的prototype属性(对象)上面的属性、方法都可以被构造函数的实例所共享
推论2：Student.prototype.constructor===s1.constructor
结论2：构造函数的实例有一个proto指向的是构造函数的prototype属性(原型对象) s1.proto===Student.prototype

(1). 原型对象是构造函数的prototype属性
(2). 构造函数的实例的proto属性指向原型对象
(3). 原型对象有一个constructor属性指向构造函数本身

面向对象的语言的标志就是它们有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。JavaScript 中的类的实现是基于其原型继承机制。如果两个实例都从同一个原型对象上继承了属性，就认为是同一个类的实例。

JavaScript 的对象是属性名以及与之对应的值的基本集合。集合是一种数据结构，泳衣表示非重复值的无序集合。

js 高程中这样定义函数：函数是这样一段 JavaScript 代码，只定义一次，但可以被执行任意多次。JavaScript 的函数是参数化的：函数的定义会包括一个称为形参和标识符列表，这些参数在函数体中就像局部变量一样工作。函数的调用会为形参提供实参的值。函数使用它们实参的值来计算返回值，成为该函数调用表达式的值。出来实参之外，每次调用还会拥有另一个值-本次调用的上下文-这就是 this 关键字的值。

如果函数挂载在一个对象上，作为对象的一个方法调用，就称之为 对象的方法。当通过这个对象来调用函数时，该对象就是此次调用的上下文，也就是该函数的 this 的值。

用于初始化一个新建的对象的函数成为构造函数。

在 JavaScript 里，函数即对象。可以把函数赋值给变量，或者作为参数传递给其他函数。

JavaScript 的函数可以嵌套在其他函数中定义，这样就可以访问它们被定义时所处的作用域中的任何变量。这意味着 JavaScript 函数构成了一个闭包。