2020.06.15

阅读进度: 14.1.3 p415

1.表单的基础知识

在 HTML 中，表单是由<form>元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement，因而其他 HTML 元素具有相同的默认属性。不过，HTMLFormElement 也有它自己下列独有的属性和方法。

• acceptCharset：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
• action：接受请求的 URL；等价于 HTML 中的 action 特性。
• elements：表单中所有控件的集合（HTMLCollection）。
• enctype：请求的编码类型；等价于 HTML 中的 enctype 特性。
• length：表单中控件的数量。
• method：要发送的 HTTP 请求类型，通常是"get"或"post"；等价于 HTML 的 method 特性。
• name：表单的名称；等价于 HTML 的 name 特性。
• reset()：将所有表单域重置为默认值。
• submit()：提交表单。
• target：用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。

取得<form>元素引用的方式有好几种。其中最常见的方式就是将它看成与其他元素一样，并为其添加 id 特性，然后再像下面这样使用 getElementById()方法找到它。

var form = document.getElementById("form1"); 

其次，通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name 值来取得特定的表单。

var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单

另外，在较早的浏览器或者那些支持向后兼容的浏览器中，也会把每个设置了 name 特性的表单作为属性保存在 document 对象中。例如，通过 document.form2 可以访问到名为"form2"的表单。不推荐使用这种方式：一是容易出错，二是将来的浏览器可能会不支持。

1.1 提交表单

使用<input>或<button>都可以定义提交按钮，只要将其 type 特性的值设置为"submit"即可，而图像按钮则是通过将<input>的 type 特性值设置为"image"来定义的。

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif"> 

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。
以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
 //取得事件对象
 event = EventUtil.getEvent(event);
 //阻止默认事件
 EventUtil.preventDefault(event);
}); 

调用 prevetnDefault()方法阻止了表单提交。
在 JavaScript 中，以编程方式调用 submit()方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

var form = document.getElementById("myForm");
//提交表单
form.submit(); 

在以调用 submit()方法的形式提交表单时，不会触发 submit 事件，因此要记得在调用此方法之前先验证表单数据。
提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误（如果用户是下订单，那么可能会多订好几份）。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

1.2 重置表单

在用户单击重置按钮时，表单会被重置。使用 type 特性值为"reset"的<input>或<button>都可以创建重置按钮。

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button> 

这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。
用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，我们可以在必要时取消重置操作。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
 //取得事件对象
 event = EventUtil.getEvent(event);
 //阻止表单重置
 EventUtil.preventDefault(event);
}); 

与提交表单一样，也可以通过 JavaScript 来重置表单。

var form = document.getElementById("myForm");
//重置表单
form.reset(); 

与调用 submit()方法不同，调用 reset()方法会像单击重置按钮一样触发 reset 事件。

本来想写在杰哥那边的 但是被杰哥嫌弃 于是只好自己重立山头
希望自己能坚持 看完
杰哥笔记链接：https://github.com/hzjjg/blog/issues/1

2020.04.01

阅读进度:第六章 6.2

1.理解对象

ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”这就相当于说对象是一组没有特定顺序的值。我们可以把 ECMAScript 的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。

1.1属性类型

ECMAScript 中有两种属性：数据属性和访问器属性。

1.1.1数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。
[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[Enumerable]]：表示能否通过for-in循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[Writable]]：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[Value]]：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为undefined。对于像前面例子中那样直接在对象上定义的属性，它们[[Configurable]]、[[Enumerable]]和[[Writable]]特性都被设置为 true，而[[Value]]特性被设置为指定的值。
要修改属性默认的特性，必须使用 ECMAScript 5的Object.defineProperty()方法。这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符（descriptor）对象的属性必须是：configurable、enumerable、writable和value。设置其中的一或多个值，可以修改对应的特性值。例子见P140
注：一旦把属性定义为不可配置的，就不能再把它变回可配置了。可以多次调用Object.defineProperty()方法修改同一个属性，但在把configurable特性设置为 false 之后就会有限制了

1.1.2访问器属性

访问器属性不包含数据值；它们包含一对儿 getter 和 setter 函数。
访问器属性有如下 4 个特性。

• [[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。对于直接在对象上定义的属性，这个特性的默认值为true。
• [[Enumerable]]：表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，这个特性的默认值为 true。
• [[Get]]：在读取属性时调用的函数。默认值为 undefined。
• [[Set]]：在写入属性时调用的函数。默认值为 undefined。
  访问器属性不能直接定义，必须使用Object.defineProperty()来定义。例子见P141
  不一定非要同时指定 getter 和 setter。只指定 getter 意味着属性是不能写，尝试写入属性会被忽略。在严格模式下，尝试写入只指定了getter函数的属性会抛出错误。类似地，只指定setter函数的属性也不能读，否则在非严格模式下会返回undefined，而在严格模式下会抛出错误。
  兼容见P142

2.定义多个属性

ECMAScript 5又定义了一个Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。例子见P142底

3.读取属性的特性

使用 ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象，如果是访问器属性，这个对象的属性有 configurable、enumerable、get 和 set；如果是数据属性，这个对象的属性有configurable、enumerable、writable 和 value。例子见P143