从事开发工作已经有十几年时间了,但一直没有真正涉猎WEB开发,这在当今IT业界听起来有些不可思议哈。从今天开始静下心来,全面深入的学习WEB开发的有关知识。将学习的体会和要点记录下来,以作备忘。
深入浅出Javascript一共12章,按照章节记录。
第一章
前端开发涉及到三个层面:HTML(内容) + CSS(外观) + Javascript(交互/行动)
JS脚本不论在<script>块中 还是 嵌入HTML中,都应以";"分号作为结束符。这是一个规范的写法
中文网页应在<head>块中设置字符集 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>,否则有可能出现乱码
第二章 存储数据
数据按类型分为三种基本类型:
数据按用途分为
标识符命名规则
常量必须在定义时进行初始化赋值,否则后续无法赋值。未初始化的变量/常量值为"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是函数式脚本语言,在其中函数的使用至关重要。
作为入门者对函数的理解:
了解函数和HTML事件的联结关系,毕竟大部分时候函数的调用是由事件发起的。
第七章 表单与验证
表单用于正常的获取用户数据;
在表单中输入的数据必须经过有效性验证采用送到后台;
验证表单域可以使用两种方式获取:ID和NAME,但是一般情况下推荐使用ID方式,即getElementById
验证数据的时机是在输入域失去焦点后,即onBlur事件触发后,可以验证长度、类型、格式等等
在复杂输入域的验证中(例如:邮箱)应使用正则表达式。
正则表达式:设计用于匹配文本模式,以斜线开始和结束。/ expression /
第八章 驾驭网页 DOM
DOM提供对脚本友善的网页结构和内容的视图,可以把页面看成一颗节点树。
提到了微软IE浏览器支持的非标准特性 innerHTML,支持混编的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。
第十一章 缺陷
常见的缺陷包括:语法错误、逻辑错误、运行时错误,这三虫客。
本书中提到了一些常见的错误:
第十二章 动态数据(Ajax)
以动态数据建造的网页称为数据驱动网页,也就是说HTML只提供内容框架,而数据是动态加载的。
Ajax让网页能够动态接受网络服务器的数据,最重要的一个对象是XmlHttpRequest。
使用Ajax涉及到了XML、XmlHttpRequest对象的使用、回调函数、服务器端代码、请求类型、请求数据等相关知识。
本书用了5天时间完成了阅读,对于书中提到的大部分概念和注意事项都能够理解。
本书适合零基础的入门者,可以对Javascript有一个初步的认识和了解。
原文:http://www.cnblogs.com/lijie726/p/4912702.html