学习笔记 2020-11-26

JavaScript 高级程序设计(第4版) 阅读记录

表单脚本

文本框编程

HTML5 约束验证 API

检测有效性
- checkValidity()
- validity
  - customError
  - petternMismatch
  - rangeOverflow
  - rangeUnderflow
  - stepMisMatch
  - tooLong
  - typeMismatch
  - valid
  - valueMissing
禁用验证
- novalidate

选择框编程

HTMLSelectElement
- add
- multiple
- options
- remove
- selectedIndex
- size
HTMLOptionElement
- index
- label
- selected
- text
- value

选项处理

selectedIndex

添加选项

add()

移除选项

removeChild()
remove()

移动和重排选项

表单序列化

富文本编辑

基本的技术就是在空白 HTML 文件中嵌入一个 iframe 。通过 designMode 属性，可以将这个空白文档变成可以编辑的，实际编辑的则是 <body> 元素的 HTML。designMode 属性有两个可能的值：”off”（默认值）和”on”。设置为”on”时，整个文档都会变成可以编辑的（显示插入光标），从而可以像使用文字处理程序一样编辑文本，通过键盘将文本标记为粗体、斜体，等等。

该属性只能在文档完全加载后设置。

使用 contenteditable

给元素添加 contenteditable 属性使得该元素被编辑。

与富文本交互

document.execCommand()
queryCommandEnabled()
queryCommandState()
queryCommandValue()

现代 JavaScript 教程

F.prototype

任务

修改 “prototype”

在下面的代码中，我们创建了 new Rabbit，然后尝试修改它的 prototype。

最初，我们有以下代码：

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

alert( rabbit.eats ); // true

我们增加了一个字符串（强调）。现在 alert 会显示什么？

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

Rabbit.prototype = {};

alert( rabbit.eats ); // ?

true

……如果代码是这样的（修改了一行）？

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

Rabbit.prototype.eats = false;

alert( rabbit.eats ); // ?

false

像这样呢（修改了一行）？

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

delete rabbit.eats;

alert( rabbit.eats ); // ?

true

最后一种变体：

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

delete Rabbit.prototype.eats;

alert( rabbit.eats ); // ?

undefined

使用相同的构造函数创建一个对象

想象一下，我们有一个由构造函数创建的对象 obj —— 我们不知道使用的是哪个构造函数，但是我们想使用它创建一个新对象。

我们可以这样做吗？
```
let obj2 = new obj.constructor();
```
请给出一个可以使这样的代码正常工作的 obj 的构造函数的例子。再给出会导致这样的代码无法正确工作的例子。
```
// 正常工作
function Obj {}
let obj = new Obj();
// 无法正常工作
function Obj {}
Obj.prototype = {}
let obj = new Obj();
```