摘要：当这些系统的用户界面元素产生某些事件时，会运行特定的代码以作响应。我们将注意力放在程序设计上，特别是放在事件驱动的程序设计上，所以重点还在。
6.1 6.1.1 在研究受事件驱动的程序时，倾向于关注四个机制
因为许多事件都与人们可以看到的用户界面元素（按钮、文本字段、滑动块）相关联，所以事件驱动计算的一个关键要素就是用于定义用户界面元素的机制
由于检测到的事件经常会引用或修改一个脚本内的其他用户界面元素，所以应当提供一种一编程方式访问用户界面元素的机制。
因为用户界面元素要响应事件——包括但不限于单击鼠标、鼠标移动、击键、语音与手势检测、键盘焦点改变、时间流逝、网络数据到达，所以事件驱动的系统提供一种用于指定代码的机制，再出发特定事件时执行此代码。
许多事件都伴有补充信息。例如鼠标事件涉及鼠标坐标、一个或多个鼠标按钮；键盘事件涉及一个特定键，还可能有一个或多个修改键。因此事件驱动的系统提供一种用于读取事件专属信息的机制。
6.2定义用户界面元素之前曾提到，JavaScript的设计就是要内嵌在托管系统中，比如Web服务器、图像编辑器、字处理器和类似系统。当这些系统的用户界面元素产生某些事件时，会运行特定的JavaScript代码以作响应。尽管JavaScript并没有自己定义这些元素，但它却提供了一种非常好的功能，可以将函数用作对象的属性，与这些用户界面元素完全对应。
例如，在一个Web环境中，这些元素是通过以HTML编写的结构化文档来提供的，这些文档或者由Web服务器通过互联网提供，或者作为.html文件存储在本地计算机上，然后由Web渲染器为我们熟悉的可视形式。没有JavaScript，这些页面就是静态的，也就是说，一旦加载，它们的内容就不能改变。改变显示内容的唯一方法就是单击一个链接，为一个新页面重新启动"链接——渲染"周期。利用JavaScript，web页面获得了触发自我修改的能力，从而可以根据用户与页面内容的互动变为动态的。
6.2.1 Web页面是结构化文档
Temperature Conversion
如上面这段"温度转换器"的Web页面的节点结构。
HTML定义了一组可供使用的节点和属性，还有用于构建正确结构的规则。创建HTML文档的通常形式是：编写一系列用标签表示元素的字符，这些标签或者为开始标签、结束标签或者为空标签。
定义HTML语法的全套规则非常复杂，但我们可以由以下规则入门。
文档的开头应当是一个文档类型声明，告诉浏览器希望使用哪种HTML版本，目前一般都是HTML5.
Web页面应当仅包含一个html元素，它恰好由两部分组成，其顺序为：head元素后面跟有一个body元素。
头元素中包含文档的相关信息，其中有一些子元素，用于表示页面标题（title）、到其他web资源的链接（link）、样式信息（style）、脚本（script）、一般信息（meta）及其他。强烈建议提供一个meta元素，作为head的第一个子元素，告诉浏览器，你的文档存储时采用了哪种字符编码。
主体中包含文本元素和块元素。文本可以用行内元素标记，这些元素可用于以下目的：表示强调（em）、着重强调（strong）、匿名（abbrev）、引用（q）、引文（cite）、上标（sup）、下标（sub）、到其他文档的链接（a）、一般内置跨区（span）等等。
有几个用于表示多媒体内容的元素，其行为方式也与行内元素相同：img、audio、video、object、embed。audio和video是HTML5新增元素；object和embed用于浏览器插件的百宝囊元素。
一些元素设计上需要子组件：有序、无序列表li；定义列表dt和dd；表格表头thead、主体tbody、页脚tfoot、每一个都有行tr，单元格可以是标题th,也可以是正常表格数据td。
经典的用户界面元素：input（button、text）、select、textarea、单选radio、复选checkbox等等。
HTML5引入了outpt、keygen、progress、meter、command，还有其他一些input类型，如number、date、email。
一些元素既可以出现在标题中，也可以出现在主体中，一些元素既可以充当块元素，也可以充当行内元素。
我们将注意力放在程序设计上，特别是放在事件驱动的程序设计上，所以重点还在JavaScript。
6.3 以编程方式访问用户界面元素下面将说明JavaScript如何使用一种称为文档对象模型（Document Object Model,DOM）的“桥接技术”来读写这一用户界面，并进行处理。
6.3.1 document对象document就是一种宿主对象，可以在任何时间、任何位置供Web浏览器中运行的任何JavaScript代码使用。
alert(document)
至少，它向你证明了：JavaScript不用费什么力气就能看到document，只需用名字调用它即可。现在再简单看看document的一些属性。
var i = 0;
for (var prototy in document) {
console.log(prototy);
i++;
if (i>4) {
break;
}
};
[Web浏览器] "vlinkColor" /javascript/test.html (11)
[Web浏览器] "linkColor" /javascript/test.html (11)
[Web浏览器] "alinkColor" /javascript/test.html (11)
[Web浏览器] "fgColor" /javascript/test.html (11)
[Web浏览器] "bgColor" /javascript/test.html (11)
看到了控制台内的输出，每个都有一个属性名，比如bgColor、width或getElementById。这里无法给出一个确定不变的列表，因为不同浏览器可能会按不同的顺序列出document的属性，甚至包含一些其他浏览器不被支持的属性。
i计数器将console.log的属性名称限制为仅有五个，有一种更方便的方式查看document的所有属性名称。
for (var property in document) {
document.write(""+property+"");
}
注意上面代码如何改变了web窗口中的实际内容。这是document的关键属性之一，它被直接“连线”到一个web页面。document中的write函数将给定字符串直接发送个页面；我们用这个函数逐字写出其内容。如果在处理页面的同时调用write，它的行为更像是一个打字员，向当前页面注入HTML，但是如果在加载页面之后在调用write，将会创建一个新的空白web页面，并向其添加文本。
不难想象一个函数可以怎样修改web浏览器的内容。毕竟是一个函数，可以轻松的包含代码，用于修改显示内容。
var footer = document.getElementById("footer");
footer.innerHTML = "document properties:
";
var properties = [];
for (var property in document) {
properties.push(property+" ");
}
footer.innerHTML = ""+properties.join("
")+"
"
这个脚本中，document.getElementById("footer")返回运行期页面的一些元素，但这并不是什么非同寻常的事情。注意，其中只有一次赋值操作，就是为这个对象的innerHTML属性指定了一个字符串，而这一赋值操作改变了web页面，其效果马上就显示了出来。这样就使JavaScript与相关文档之间的互动显得非常自然，富有凝聚力:设定一个值，马上就能看到结果。
6.3.4 操控用户界面空间 Web页面决定着JavaScript的生存周期，当Web页面被关闭、刷新、替换，由下一页面上的DOM脚本/变量接管时，对象、变量、函数和所有其他一切都将被抛弃。这就是"JavaScript"的生命轮回。 6.3.6 遍历DOM对document宿主对象再做一点深入剖析。我们已经看到，document是JavaScript代码借以修改或更新Web页面的渠道。这个宿主对象表示的就是文档树顶部的文档节点，事实上，这些树中的所有节点都是用JavaScript宿主对象表示的；和所有对象一样，它们拥有属性。DOM对象，包括document自身，具有以下一个或多个属性。
nodeType：1~12范围内的一个整数，用来描述节点的类型。例如：1表示元素，3表示文本，8表示注释，9表示文档节点本身
nodeValue：节点的内容，如文本节点中的文本。
childNodes：一个与数组类似的对象，其中childNodes[0]引用了该对象的第一个子节点，childNodes[1]引用第二个，以此类推。每个子节点又可以拥有自己的childNodes属性。
有一些DOM对象就是元素（nodeType===1）,它们有两个很有用的属性。tagName：元素的名字
attributes：一个类似于数组的对象，其中包含"名称-值对"形式的属性。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83063.html
摘要：三种使用构造函数创建对象的方法和的作用都是在某个特殊对象的作用域中调用函数。这种方式还支持向构造函数传递参数。叫法上把函数叫做构造函数，其他无区别适用情境可以在特殊的情况下用来为对象创建构造函数。 一、工厂模式 工厂模式：使用字面量和object构造函数会有很多重复代码，在此基础上改进showImg(https://segmentfault.com/img/bVbmKxb?w=456&...
摘要：继承的是超类型中构造函数中的属性，如上继承了属性，但没有继承原型中的方法。上述造成的结果是子类型实例中有两组超类型的构造函数中定义的属性，一组在子类型的实例中，一组在子类型实例的原型中。 ECMAScript只支持实现继承，主要依靠原型链来实现。与实现继承对应的是接口继承，由于script中函数没有签名，所以无法实现接口继承。 一、原型链 基本思想：利用原型让一个引用类型继承另一个引用...
摘要：我们将使用，这是一个现代，简单，漂亮的框架，在内部使用并将响应式编程概念应用于前端编程。驱动程序采用从我们的应用程序发出数据的，它们返回另一个导致副作用的。我们将使用来呈现我们的应用程序。仅采用长度超过两个字符的文本。 Rxjs 响应式编程-第一章：响应式Rxjs 响应式编程-第二章：序列的深入研究Rxjs 响应式编程-第三章: 构建并发程序Rxjs 响应式编程-第四章 构建完整的We...
摘要：把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。组合使用构造函数模式动态原型模式通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。 理解对象 属性类型 数据属性 数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。 [[Configurable]] ：表示能否通过 delete 删除属性从而重新定义属性，能否修...
摘要：环境变量定义了用于进行命令和程序查找的目录。全局环境变量可以在对其作出定义的父进程所创建的子进程中使用。本章学习命令个人总结如下显示全局变量显示全局变量显示局部变量全局变量及用户自定义变量导出为全局环境变量删除环境变量 时间：2017年07月31日星期一 说明：本文部分内容均摘取自书籍《Linux命令行与shell脚本编程大全》，版权归原作者所有。《Linux命令行与shell脚本编程...
阅读 3044·2021-09-30 09:47
阅读 2158·2021-09-10 10:51
阅读 1637·2021-09-08 09:36
阅读 2761·2019-08-30 12:56
阅读 2884·2019-08-30 11:16
阅读 2500·2019-08-29 16:40
阅读 2832·2019-08-29 15:25
阅读 1529·2019-08-29 11:02
