从事开发工作已经有十几年时间了，但一直没有真正涉猎WEB开发，这在当今IT业界听起来有些不可思议哈。从今天开始静下心来，全面深入的学习WEB开发的有关知识。将学习的体会和要点记录下来，以作备忘。
深入浅出Javascript一共12章，按照章节记录。
第一章
前端开发涉及到三个层面：HTML（内容） + CSS（外观） + Javascript（交互/行动）
JS脚本不论在<script>块中 还是 嵌入HTML中，都应以";"分号作为结束符。这是一个规范的写法
中文网页应在<head>块中设置字符集 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>，否则有可能出现乱码
第二章 存储数据
数据按类型分为三种基本类型：
- number.数字类型，包括整数和浮点数。
- text. 字符串
- boolean. 布尔类型
数据按用途分为
- 变量（Variable）
- 常量（Constant）
标识符命名规则
- 至少1个字符长；首字符为字母、下划线、$；空格和特殊字符不可出现在标识符中；标识符要有描述性
- 变量采用小驼峰规则（用于变量、函数）如：numCakeDonuts、对象采用驼峰规则。
- 常量采用大写字母
常量必须在定义时进行初始化赋值，否则后续无法赋值。未初始化的变量/常量值为"undefined"
变量/常量 在定义后就会分配空间，变量的类型是在设置变量值得同时建立，可以随值类型而改变
重新载入网页时，网页内包含的变量值重新设置为初始值（生命周期）。
应用加法前，请确认相加的数据类型是你想要的。常见的错误是将字符进行相加，系统会错误的处理为字符串的合并导致错误结果。如 1+2=3；'1'+'2'='12'
第三章 客户端
Javascript脚本服务于客户端，浏览器加载后起作用
间隔定时器setTimeout() 和 循环定时器setInterval()
窗口尺寸Document.body.clientHeight 窗口尺寸不等同于浏览器的尺寸
变量生命周期 & cookie：
Javascript于浏览器关闭或网页重新载入时摧毁所有变量；
使用Cookie可以延长脚本变量生命周期（持久性），cookie是一种便利、经济的数据存储方案，非常适合在客户端存储小量的非关键数据。
cookie也有有效期，如果不设置有效期则生命周期等同于变量；cookie命名在网页内唯一，不同浏览器间不能共享；且只限于存储较少的文本数据（少于4K）
有的浏览器不支持cookie，可以使用Navigator.cookieEnabled来检查
第四章 决策
也就是我们一般所讲的判断语句，这一章主要介绍了两种常用的判断语句：if语句和switch语句。
if语句，一般用于true/false的判断。其条件测试句必须只能是boolean类型的，需要注意的是条件运算符“==”不要误写成“=”，这样会导致不可预期的问题。
if语句可以进行嵌套，但是嵌套的if语句会变得复杂，不利于代码的维护。
switch语句，多重选项专用，与if语句的区别在于：检测数据不可为运算式，必须是一段单纯的数据。
switch语句，配合case和break使用，尽量添加默认条件default，可以避免遗漏。
第五章 循环
本章节介绍了循环语句和数组。
数组是保存一组数据的变量，等同于对象。数组中的变量最好是相同的类型，这样便于后续的处理；数组使用“键”来存取“值”。
循环语句有两种for循环和while循环。
for循环一般用于已知循环次数的情况，在for语句中初始化循环变量、控制循环条件、控制循环变量。
while循环一般用于未知循环次数的情况，循环变量在while语句前初始化，while语句只控制循环条件，循环变量的控制必须在while的动作内。
for循环和while循环可以相互替代。
break语句用于中断循环，直接退出；continue语句用于中断并继续下一次循环。
第六章 函数
首先JavaScript是函数式脚本语言，在其中函数的使用至关重要。
作为入门者对函数的理解：
- 使用函数，将复杂的大问题分解为小问题。
- 将可以再次利用的脚本分离出来。
- 减少重复代码，将重复代码封装到函数中，便于维护
- 使用自变量（入口参数）进行输入，也可以返回数据（输出使用return）
了解函数和HTML事件的联结关系，毕竟大部分时候函数的调用是由事件发起的。
- 使用HTML属性进行联结。例如 οnlοad="init"等，需要在HTML代码中直接写入
- 使用变量。如: var myFunc = function(Arg1) { ;} οnlοad=“myFunc”。可以将函数的定义采用变量定义的方法：变量名=函数名；变量值=函数字面值；变量在赋值时根据值得类型确定变量的类型。
- 使用回调函数（事件处理函数）。使用变量 + 回调 相结合的方式，可以解决HTML属性导致的HTML和JAVASCRIPT混杂的情况。函数引用提供联结事件处理函数与事件的便利方式。
第七章 表单与验证
表单用于正常的获取用户数据；
在表单中输入的数据必须经过有效性验证采用送到后台；
验证表单域可以使用两种方式获取：ID和NAME，但是一般情况下推荐使用ID方式，即getElementById
验证数据的时机是在输入域失去焦点后，即onBlur事件触发后，可以验证长度、类型、格式等等
在复杂输入域的验证中（例如：邮箱）应使用正则表达式。
正则表达式：设计用于匹配文本模式，以斜线开始和结束。/ expression /
- 元字符。组成表达式的基本项，包括以下几种\w ：任何一个字母、数字
\d ：任何数字
. ：任何字符（换行符除外）
\s ：空格（空白、TAB、换行、回车）
^ ：模式开始
$ ：模式结束
例如：/^\d\d\d\d\d-\d\d\d\d$/ 匹配美国的#####-####邮编号码 - 限定符。控制子模式出现在正则表达式中的次数
* ：前面的子模式必须出现0次/多次（也就是说可以没有）
+ ：前面的子模式必须出现1次/多次
? ：前面的子模式必须出现0次/1次
{n}：必须出现n次
{min,max}：必须出现的次数介于最少和最多之间均可
this|that ：可供选择的模式
() ：集合字符/子模式
例如：/^\d{5}-\d{4}$/与1中的例子同样表达美国的邮编号码
例如：/^\d{2}\/\d{2}\/（\d{2}|\d{4})$/ 表示MM/DD/YYYY 或者MM/DD/YY - 检查方法
var regExp = "/^\d{5}-\d{4}$/";regExp.test(inputField.value);
字面量是正则表达式的变量，就是正则表达式对象；正则表达式可以使用test方法来对输入的数据进行验证 - 字符类
[characterClass] 提供控制可选字符的有效率方式例如：/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/ 表示邮箱验证
邮箱名部分[\w\.-_\+]+ 可以输入字符：字母、数字、. - _ +，并且必须输入一个
域名后缀 [\w-]+ 可以输入字符：字母、数字，必须输入一个
域名后缀 (\.\w{2,4})+ .com类的后缀 可以输入字符：字母、数字，长度2-4个，并且至少有1组
第八章 驾驭网页 DOM
DOM提供对脚本友善的网页结构和内容的视图，可以把页面看成一颗节点树。
提到了微软IE浏览器支持的非标准特性 innerHTML，支持混编的html，可以达成更多操控功能
节点树中节点的类型：
- 根节点，即Document节点，只有一个
- 元素节点，即Element节点，与html中各个标签对应
- 文本节点，即文本内容 TEXT
- 属性节点，即html中标签的属性，属性节点在树中不可见
改变节点文本的步骤（由于文本中任何标签在DOM中都是单独的节点，因此一个带有HTML属性的文本就被分割为多个元素节点和文本节点）
- 移除所有子节点（包括元素节点和文本节点）
- 创建新节点
- 将新创建的节点附加到节点下
第九、十章 对象（为数据带来生命）
数据 + 行为 = 对象
变量 + 函数
特性 + 方法
跟OOP中的说法一致。
构造函数，名称要首字母大写，等同于对象名称，在构造函数中使用this关键字设置特性值
JavaScript中类的定义并不像OOP语言先声明再实现，而是直接进行类的实现。在构造函数中使用this特性设置的变量就是该类的属性。也可以理解为该函数就是类的定义
一些对象没有属性只有方法和常量，也就是说是把一些相关的常量和方法组织在一个类中，方便使用（例如:Math类），这被称为组织对象。
function Class( , ) {
this.id = "";
this.name = "";
this.talk = function(){;}
}
以上对象定义了两个属性（ID和NAME）以及一个方法talk。
但是这种定义方法的方式被称为（实例方法）也就是说在构造函数中使用this关键字定义的方法。这样的定义存在很大的问题，体现在创建（new）一个新的实例时，方法也会分配空间，这是不合理的，因为方法是针对对象所有实例的，而属性是针对不同实例的。这样势必会造成内存的大量占用有可能导致性能问题。
解决办法：使用prototype对象。prototype对象用于设定隶属于类层的特性和方法，也就是说prototype对象中的属性和方法是在类层面的，为所有实例所共有。
class.prototype.method=function(){;} 采用这种方式定义方法，就可以解决问题。
也就是说在正常的构造函数中，只对特性（属性）进行创建和初始化。
另外：类层的特性、方法的访问，必须通过实例对象或者在对象内部使用this关键字，而不能通过类来访问；而类方法不能访问实例特性，但可以访问类特性（但必须使用class.prototype.特性 来访问，而不能直接class.特性 来访问）
var inst = new class(); inst.method（合法）；class.method（非法） class.talk=function(){this.method();}（合法）
利用prototype对象，还可以用来扩展标准对象。
OOP设计通常关系到小心地架构对象与它周遭的环境代码
如：排序可以放到类方法中；
函数自变量的传入，后面的自变量是可选的。如有两个自变量Arg1和Arg2，则可以传入Arg1, Arg2 或者 Arg1 或者 一个也没有，但不能只传入Arg2。
第十一章 缺陷
常见的缺陷包括：语法错误、逻辑错误、运行时错误，这三虫客。
本书中提到了一些常见的错误：
- 大括号、引号 的成对匹配问题（属于语法范畴）
- 错别字，如变量名输入错误导致（属于语法范畴）
- 比较符号（==）错写为赋值符号（=），如 if (myValue = inputField.value){}（属于逻辑范畴）
- 生命期，在Head标头中运行的脚本（例如：new Object）访问同一网页上的HTML元素。（运行时范畴）因为Head加载早于body
- 影子变量，局部变量与全局变量相同，导致局部变量掩蔽了全局变量（运行时范畴）
第十二章 动态数据（Ajax）
以动态数据建造的网页称为数据驱动网页，也就是说HTML只提供内容框架，而数据是动态加载的。
Ajax让网页能够动态接受网络服务器的数据，最重要的一个对象是XmlHttpRequest。
使用Ajax涉及到了XML、XmlHttpRequest对象的使用、回调函数、服务器端代码、请求类型、请求数据等相关知识。
本书用了5天时间完成了阅读，对于书中提到的大部分概念和注意事项都能够理解。
本书适合零基础的入门者，可以对Javascript有一个初步的认识和了解。
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
