第六章第七章学习

第六章

• 结构化程序设计，其中有一条原则：函数应该只有一个入口和出口，为什么？
• 作者认为这个观点再与易读性发生冲突的时候，还是可以斟酌考虑一下的
• 数组和节点列表有什么区别？

第七章

• 通过JS创建新元素和修改现有元素，改变网页结构
• 意识到自己不理解，然后跳过，或者说自己不想起理解这部分？
• 一些传统的做法是否应该跳过，或者说这部分不实用的做法
• createElement方法:
• 思路步骤：在那个DOM节点创建；创建的内容是什么？可以是所有DOM类型的方法，比如元素节点DIV，插入一个子元素span，div.createElement(“span”)，还有属性节点，文本节点，属性节点和元素节点的相同点都是有相应的关键字，怎么插入文本节点？插入多个的时候呢？怎么操作
• 文档碎片，文档碎片和DOM节点的区别是什么？
• 文档碎片还不是DOM树的一部分，但是和DOM节点一样，已经具有了DOM属性
• 文中的例子是具有了nodeType和nodeName的值
• 文中的论证手段是：只有一个对象，具有nodeType和nodeName的值，他就是一个元素节点，这种论证手段是对的吗？
• 我上面思考的哪些东西他都没有进行说明
• appendChild方法
• 思路步骤：顾名思义，增加一个子元素，把一个元素插入到DOM树中去，相当于把一个元素变成某个元素的子元素，同理，应该存在某种方法把某个元素变成某个元素的父元素，兄弟元素等
• 我在createElement方法中实际上是完成了两个步骤：新建一个元素，并且把这个元素添加给某个元素作为子元素，在实际应用中是分成两个方法使用的
• createElement方法可能只是document的方法，元素节点不是继承了document的所有方法吗，如下图的代码会提示createElement并不是div节点的一个方法
• <img src="first_code/first_code_07.png" alt="">
• appendChild方法可能就像我前面使用的那样使用？div.appendChild(“span”)?,如果有多个div，多个span的情况下如何区分？div可以用nodeFirstChild的方法找到，那游离在dom树外的span呢？
• 前面我们完美地使用了变量赋予的方式使得一个变量能够应用新创建的span，这样一切都能得到解决了
• DOM树完美地解析了文档，任何文档的细节都可以在DOM树中一一对应，所以任何描述都可以得到好的解释：我想要在这里插入一段话 == 我想要在这个div标签下创建并插入一个span元素，使得span元素为div元素的子元素
• 如果有多个子元素，我想让他成为特定的某个子元素呢？相比起元素、文本节点，属性节点是否一定是DOM树的一个末端节点？
• creatTextNode方法
• 常用的DOM节点无非3中：元素、文本、属性，把相应的方法拆分开来就能解决了
• 为什么取名不叫creatText,或者说创建元素节点的名字为何不叫creatElementNode?
• 可以看到，这种插入方法有点杀鸡用牛刀的感觉，而且大部分工作都是重复的，在掌握了思路之后
• 这就是所谓的动态创建HTML内容的方法——使用JS创建HTML内容
• 7.3 重回图片库
• 这个XHTML文件中有一个图片(占位图)和一段文字(说明文字)仅仅是为了showPic这个函数服务，可以说根本算不上内容
• 所以上面说的动态创建HTML也有其存在的意义了
• insertBefore方法
• 将一个新元素插入到一个现有元素之前：前面说的增加兄弟元素，~~div.insertBefore(span)这样~~parentElement.insertBefore(newElement,targetElement),这种，归根结底还是需要父元素
• 元素节点根本不可能是属性元素和文本元素的节点
• 可以简化:我们根本不需要知道父元素是谁，因为targetElement中已经有属性nodeParent告知其父元素是谁了：targetElement.parentNode.insertBefore(newElement,targetElement)
• 为什么不能改造成targetElement.insertBefore(newElement)?
• 没有insertAfter?
• 那就自己写一个：提示：使用nextSibling属性
• 7.4 Ajax
• 7.5.1 XMLHttpRequest对象
• 不同浏览器实现XMLHttpRequest对象的方式不同
• 该对象的方法
• open方法：指定浏览器访问服务器的文件；指定访问请求的类型：POST，GET，SEND；第三个个参数：指定请求是否已异步方法发送和处理
• onreadystatechange:事件处理函数
• 看得太快了，自己没有思考：步骤可能是这样的：一个网页文档是一个DOM树，不是每一个节点都需要更新，比如节点DIV用了AJAX，到这里思路就断了：怎么样联系上XHR对象？XHR对象是一个节点吗？前面说了IE浏览器的兼容性问题，每次涉及到这一部分我都不是很想看，这个浏览器是怎么样和服务器端进行局部异步交换数据的？定时器？用户的点击或其他行为？
• 假设是后者，用户点击p标签，触发onclick事件，浏览器向服务器发送一个XHR对象，请求更新，浏览器收到服务器的响应进行更新，大致思路是这样，具体细节呢？
• 点击P标签-触发事件-浏览器创建一个新XHR对象(getHTTPObject方法，提问：该方法的对象是谁？)-OPEN方法并不是很直观，究竟这是一个过程，还是我们通过该方法设定了XHR对象的键值对？是它完成了”提交”这个过程吗？
• 给事件处理函数指定一个函数和引用一个函数的区别是什么？eventfun=function(){}和eventfun = function_1的区别
• 指定请求的目标(open)-明确如何处理相应(onreadystatechange)-发送请求(send)-等待服务器相应(判断readyState的值)-访问服务器发送回来的数据
• 我们始终没有讨论到如何触发ajax
• 同源策略-跨域
• 异步请求的异步性：代码再发送XHR请求后，不会等待响应返回，会一直执行
• Ajax应用主要依赖后台服务器，实际上是服务器端的代码完成绝大部分工作。缺少XHR对象能否完成响应的功能？(平稳退化)
• 登录表单的传统方法：提交整个页面
• 为登录表单添加Ajax功能：拦截传统表单请求；使用XHR对象代为发送；

第八章

• 有哪些搜索引擎是支持JS的？
• 得到隐藏在属性里的信息：大部分元素属性对用户都是不可见的
• 创建标记封装这些信息：比如在JS中实现SPAN包裹属性信息
• 把这些信息插入文档
• 目的：用JS去改变浏览器的默认行为，比如：显示缩略语标签title属性的行为
• 现在有两个变量了：definition和key(是否有点键值对的味道)，这连个变量的值就是我想保存到defs数组里的内容；(是对象还是数组？)defs[key] = definition;
• 这里翻译的可能是有点问题的：如下图的函数：<img src="first_code/first_code_08.png" alt="">第二个窗口弹出的是define的，这里还是要看下书，new Array究竟是new了个对象还是数组？如果一个数组里面除了数字对应的值还有其他的，那么这个数组还能称作”数组”吗？
• defs[key] = definition中的key甚至能是一个数组，JS引擎究竟是怎么处理这个表达式的？如果key的个数大于definition的个数呢？反之呢？
• 数组的下标 = 对象的键 for\in 循环，如果说for循环适用于数组，那么for\in更适用于对象
• 把原始值转化为对应的包装对象
• js的对象是复合值；是属性的集合；是已命名值的集合；字符串同样具有属性和方法；字符串是原始值；所以原始值也可以具有属性和方法
• 这样做有什么意义吗？
• 依次枚举对象的属性
• 当你码不出程序，看不懂程序，要懂得开导自己

CSS-DOM

• 学习的过程就像是你一次又一次被抛向高空的过程，你要像一只猫一样懂得如何着地，不单单是写代码，任何学习的过程都一样
• 刚刚开始学习的时候不能要求很系统，先是碎片化的知识，再练成体系
• 结构层，HTML，标记语言，比如html,head,body,就是一个结构，标签默认包含了语义，但不包括任何关于内容如何显示的信息
• 幻想有个人坐在对面，他会如何问我问题?抛出任意一个关键词，如结构层是什么？或者说给紧密一点：结构层和HTML标记语言有什么关系吗？他对我们的工作，写代码会有什么好处吗？
• 表示层，CSS，比如字体大小，颜色，图片是垂直排版还是水平排版
• 行为层，内容应该如何响应事件，比如用户用鼠标点击某一个内容，页面会发生什么变化，JS和DOM
• 网页的表示层和行为层总是存在的，浏览器有默认的样式和默认事件处理函数；为什么这么理所当然？我不知道，但是大家都是这样做的，我只能如何证明大家都是这么去做的，比如浏览器在显示一个文本段的时候总会默认留出一定的页边距；鼠标悬停在某个元素上方时，浏览器会弹出显示该元素Title属性值的提示框，即便我们没有去设置。这也就不难理解为什么我有什么觉得有些”不可思议”了，很多我们理所当然的东西被重新解释的时候总是很难易接受，比如以后发展出一种高级数学，能解释1+1,这时候你会觉得很难以理解，因为在我们理解之前我们已经懂得如何使用它了
• 提示：当我们觉得某个知识点有些怪异的时候，尝试发觉怪异点在哪里(虽然不是那么容易)，或者想一下是不是有什么知识把他当做理所当然的存在了
• 9.1.4 分离
• 分层是为了分工具处理，分离也就是这个意思；但是并不是完美地分离的，三种技术之间还是会存在着重叠的地方，DOM中我们可以用createElement,appendChild方法改变文档的结构，而这本来应该是html做的，css中我们可以使用伪类:hover,:focus去模拟事件，而这本来应该是js做的
• 这其实会让我们有一个巨大的疑惑：在重叠的区域我们应该使用哪种技术；在此之前还有个更大的问题：我们想不起来对应的是如何实现的，或者说有没有人曾经做过比较？无论如何，自己心里都要先有自己的思考
• 9.2 属性
• 奇怪的是样式不是存放在element.style中，以各种属性的形式存在，如style{color:red,font-size:10px},而是储存在style的property属性中，而这个属性是否又是一个对象？style是否还存在其他属性？style也是一个节点，属性节点，之前我说属性节点就是末端了可能也有点不甚完全，属性节点下面可能还是会有属性节点
• 为什么在示例程序中需要返回nodeName?想要证明什么？nodeName是属性的名称，style或者id?
• 9.2.1 获取样式
• 怎么查出某个元素在浏览器里面的颜色？似乎可以直接使用诸如p.style.color，但是却无法使用p.style.nodeName，后者会显示undefined
• 使用style属性只能获取内嵌样式，而工程中几乎我们都是使用外部样式表去设置的，为什么？怎么解决？哪些东西可以类比，哪些东西不能类比？
• 使得我们气馁的解法是’天降神兵’，也就是引入新的只是，比如使用p.style.font-size会出错，因为js引擎会把-解析成减号，而解决方法是使用驼峰命名法：p.style.fontSize,这是令人沮丧的，因为我们没有学习过任何类似的知识，我们不能四脚稳稳地着地
• 抽象或许会给我们一些欣慰：我们看到的只是记号：比如font-size和fontSize在css中和js中其实是指代一个东西，如果一个在另外一个中会发生歧义，那么，只要换个”记号”就可以了
• 回到上面那个问题，为什么使用style属性只能够获取到内联的样式？明明我们都已经使用onload函数等待页面加载完毕了，浏览器在解析两者的时候有什么区别？
• 记得”是否改变源文件”这个知识点吗？我们使用属性是去读取构建完毕之后的DOM树？还是直接去遍历文档？使用getAttribute函数呢？
• 当然是也不行
• 9.2.2 设置样式
• 许多DOM属性是只读的？我们不能对其进行修改？js中如何对待只读这个属性？
• 犀牛书的6.2.3 属性访问错误就讲到这个知识点，设置只读属性不会成功，但是也不会报错，那我怎么知道一个属性不是只是只读的？