**html
**
书名:《Head First JavaScript》
中文译名:《深刻浅出JavaScript》
著:Michael Morrison
编译:O’Reilly Taiwan公司
出版发行:东南大学出版社前端
申明:
本文所作的笔记并不是本书最精华的部分,笔记大可能是第一次阅读本书时候所记录下来的本人比较有感触的部分(茅塞顿开?),虽然再次看这些知识点的时候本身也找不到当时初看时候的感受,可是分享给你们,但愿对你们的前端学习有所帮助。node
本章首先讲述了JavaScript对于网页的重要性,即为网页带来了生命;而后以一个iRock的例子说明了JavaScript是如何为网页带来了生命,使网络呈现出交互性,总得来讲属于吸引人继续往下读的章节,本章,我没有作太多有用的笔记。正则表达式
一、本章主要讲述的是如何呈现数据、存储数据以及找出数据:
二、JavaScript使用三种基本数据类型text、number以及boolean。设定JavaScript的值的时候,即已自动暗示类型。具备极大的灵活性;
三、alert框里列出的数字,其一定为文本类型;
四、设定常量使用const NAME=Value;
五、从新载入网页,脚本回来还没有执行前的状态;
六、标识符:变量,常量及其它JavsScript语法元素在脚本里用做分辨的独一无二的名称,标识符应该具备描述性;
七、建立常量时务必初始化,不然容易引发误解(未初始化undefined表示没有数据);
八、NaN:not a number;非数字,用于表达变量的特殊情况,某个表示应该是数字的值不见了的时候就会出现NaN;
九、经常使用命名规则:主要采用驼峰型(CamelCase)(首字母也大写)只会用于对象,小写驼峰型则用于变量和函数,常量所有大写;
十、parseInt()与parseFloat():将文本转换为数字(传入的必须为数值,不然NaN);
十一、toFixed()函数能够把Number四舍五入为指定小数位数的数字;
十二、isNaN()函数,返回两个值,不是数字(true);是数字(false)
1三、对象的定义:其是一种先进的JavaScript数据类型,它能结合函数,常量和变量为一个逻辑实体(logical entity),方法(method)实际上是属于某对象的函数,特性(property)则是对象里的常量和变量,JavaScript几乎使用对象表达一切;----------数据库
一、浏览器里面容许JavaScript代码的部分叫作JavaScript解释器;
二、JavaScript被称做客户端语言的缘由在于,网页不用等待服务器处理和返回数据;
三、关于cookie:express
cookie就像变量,浏览器把它存放在用户的硬盘中;编程
cookie的做用在于延长脚本的生命周期;cookie具备本身的有效日期,甚至都算不上中期的保存方案;数组
服务器也能够用来永久存储数据,不太小数据的时候不须要小题大作;浏览器
readCookie();writeCookie();安全
cookie影响浏览器的安全性,其自己非安全的存储场所,最好别把敏感数据存储在cookie里;
cookie不能访问用户的硬盘或散步病毒,可是能够存储输入网页的我的数据。
只有在指定的网页里,cookie名称才须要独特,由于cookie存储时会依据建立它们的网页加上区隔,确认cookie在单一网站或网页里面具体独特性;
不一样浏览器不能共享cookie的数据的;
cookie只适合存储相对较少的文本数据(小于4kb)cookie效率比较低;
navigator.cookieEnabled用于检查浏览器是否支持cookie;
四、Ajax:编写的向网站请求信息的脚本,而后于网页上呈现信息;
五、单次定时器——setTimeout(Timer code,Timer delay);
六、无论数字多大,都别在JavaScript的数值中加逗号;
七、清除定时器clearInterval(timerID);
八、document.body.clientWidth和document.body.clientHeigth特性里面存储了客户端窗口的宽度和高度;
九、document对象表明网页自己;
十、style.height和style.width,几乎能够改变任何元素的尺寸;
十一、要取用网页元素,须要在onload里运行;
十二、onresize()事件,检测并响应浏览器窗口尺寸的调整;
一、分号保留给单一语句使用,复合语句不须要;复合语句里面出现的单一语句仍是须要加上分号,可是复合语句自己则不须要;
二、运算符:operator;表达式:expression;
三、只要不是null、0、空字符串(“”),或“未定义”,任何值都会被解读为true;
四、做用域表明数据的上下文;
五、脚本层次:脚本的最上层;
六、建立在函数内的变量为局部变量,其它所有都是全局变量;
七、switch/case语句让咱们在许多事物之间有效率的选择,switch后面的表达式,不可为运算式,只能是单纯的数据。
一、数组用于在单一场所存储多段数据;
二、数组的页码称为键(key),索引只是一种形式特殊的键,它是数值键;
三、存储在数组里的数据不必定为相同类型;
四、并不要求二维数组具备相同的行数,可是最好保持一致。
一、解决“大”问题的诀窍,就在于将其分解成较小,较易管理的问题,若是分解后问题仍是太庞大,再进一步分解;
二、程序代码分解为函数的缘由,在于协助区分工做,并为每一个函数赋予单一目的;
三、复制代码是个作成函数的好征兆,另一个征兆是某段代码逐渐变得笨重庞大,且能够被分解为数个逻辑片断;
四、argument:函数自变量;
五、字面量(literal)是用于表达源代码中一个固定值的表示法;
六、return语句亦可不与任何数据同用,单纯用于提前结束函数;
七、关于函数的进一步理解:
函数只不过是变量,函数不像通常变量,变量将其数据存储成存储器的某个区域里的值,函数则存储对代码的引用。因此函数变量的值不是代码自己,而是指向存储代码的存储器位置的引用;
当函数主体单独出现而没有名称时,又被称为函数字面量(function literal) 函数名称也被称为函数引用(function reference)
引用函数和调用函数的区别在于函数名称后面是否有(),函数引用只会单独出现,可是函数调用则一定后随括号,不少时候还附有自变量;
函数引用让咱们联接JavaScript代码设计的事件处理函数,而不需改动HTML代码;
回调函数:回调函数就是一个经过函数指针调用的函数。若是你把函数的指针(地址)做为参数传递给另外一个函数,当这个指针被用来调用其所指向的函数时,咱们就说这是回调函数,其重要性在于让咱们对代码外发生的事情有所反应,回调函数就是一直在等待某事发生好准备起身动做的函数;
函数字面量有时候被称为匿名函数(anonymous
function),只是没有名称的函数主体,有点像是实际的数据,其重要性在于它们很适合须要快速偶发回调函数的状况,只被调用一次;
八、onload事件处理器是一个初始化全部事件的绝佳地方;
九、onload处理器保证网页必定已经载入,script标签中,网页不必定加载;
一、id属性可独一无二地识别网页元素,name属性可独一无二地识别表单中的域,以上二、两个属性都可当成input域的识别符;
三、form对象厉害的地方,在于它也是一个数组,负责存储表单中全部域。可是它的数组元素并不是利用数值索引存储,而是使用域独有,于name属性设定的标识符;
四、oncharge事件和onblur相似,但它只在某个域再也不被选择并且输入内容被改变时触发;
五、有不少响应键盘行为的事件。好比onkeypress,onkeyup,onkeydown;
六、使用<span></span>来添加验证,而不使用烦人的alert();
七、在html元素的上下文中,关键字this指向表明该元素的对象,form属性能够把整份表单当作对象访问,this.form用于引用表单自己。this.form是对form对象的引用;
八、辅助信息的id,命名规则通常为输入域的id后面加上_help;
九、isNaN()函数可检查值是否“不为数字”;
十、数据所有都正确才执行(&&);
十一、问题很严重时,值得使用alert框;
十二、关于正则表达式:
做用:正则表达式(regular expression)专门设计用于匹配文本模式;
正则表达式使用说明:出如今一对斜线里//;
元符号:用来链接字母和数字,建立高度描述性文本模式的特殊符号;
”.”(点):匹配任何字符,换行符除外(newline);
\s:匹配空格,包括空白字符(space),tab,换行符,renturn/enter;
\d:匹配任何数字字符;
^:字符串需以模式起始,前不能有其它字符;
\w:匹配任何字母数字;
$:字符串须要以此模式结束;
正则表达式:不是元字符的任何文字将于正则表达式里“照样匹配”;
正则表达式限定符(quantifier),限定符前为子模式,限定符即应用在子模式,而且控制子模式出如今模式里地次数:
*:子模式为可选的,可出现任意次数;
{n}:限定符以前的子模式必须刚好出现n次;
+:子模式必须出现,必须出现1次或屡次;
?:子模式为可选的,若出现最多只能出现1次(0或1次);
():集合字符或/和元字符,成为子模式;
模式限定:比起只有元字符更加精确,再也不直接重复子模式;
正则表达式自己不是字符串,但能够当作是对外部字符串的描述;
正则表达式单纯设计用于匹配文本字符串内的字符模式,因此只能用在字符串上 具备特殊意义的字符,能以\来进行转义匹配。好比匹配$为\$;
1三、简单字母串搜索indexOf()实际上是极度简化到最简化的模式匹配,此时的模式只是一个静态的词汇或者词语;
1四、模式是一组对文本的叙述,但模式不见得必为文本自己;
1五、JavaScript的RegExp对象的test()方法用于检查字符串是否包含正则表达式模式;
1六、正则表达式中的选替(alternation),相似于JavaScript的OR逻辑运算符,为|单竖线;
1七、字符类:在模式里建立受到紧密控制的子模式[],在字符类内,每一个列出的字符都是合格的字符匹配目标,能创建可替换的子模式列表;
1八、邮件验证的正则表达式:/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/;
一、关于innerHTML:
innerHTML特性对全部存储在元素里的内容提供了访问管道;
innerHTML特性实际上用于设置内容类元素,例如div、span、p以及其它装载内容的元素;
innerHTML特性必定彻底改写任何原有内容,其没有附加的概念;
二、nodeValue特性老是包含纯文本,没有额外格式:存储于节点的值,只限文本和属性节点使用;
三、利用nodeValue特性,能够轻易地指派新文本内容给子节点,可是只在非元素只拥有一个节点,若是拥有多个,只改变第一个;
四、安全的修改内容的方法:移除子节点;根据新内容建立新的文本节点;把新建立的文本子节点附加在节点下:对应removeChild();createTextNode();appendChild();
五、存储在元素中的内容,在DOM树中必定是该元素的子节点;
六、nodeType特性返回的是每种节点类型的代号,TEXT是3,ELEMENT是1;
七、DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML(微软退出,后被其它浏览器采用,但并非标准)特性达成更多操控功能;
八、createTextNode()建立的文本节点内容只能是文本,不能有其它标签或者附加格式的文本;
九、经过改变样式类的名称能够更改样式;
十、在HTML代码中咱们能透过关键字this访问相对于某个元素的对象;
十一、节点的style特性提供对单同样式特性的访问;
十二、网页元素能够利用元素对象的visibiliey样式特征作动态的显示或隐藏,也能够用display属性。
一、对象=数据+行为;
二、对象是个容器,其中存储数据并连接数据与依据数据行动的代码;
三、当变量与函数被放在对象里面时,它们被当成对象成员(object member),变量称为对象的特性(property),函数被称为对象的方法(method);
四、一般运用点号运算符来访问对象的方法和特性.;以点号引用对象成员;
五、对象是一组有名称的特性和方法的集合。其包含多块数据,其可称为complex数据类型;而number,text,boolean被称为基本数据类型;
六、与对象紧密联系的数据,比起在脚本中飘零的通常数据(全局变量),具备更多背景和意义;
七、JavaScript自己就是一个大型的对象集合,好比alert()函数是window对象的方法;
标准JavaScript对象:日期,字符串,数组;
八、构造函数负责建立对象,使用new运算符,它调用对象的构造函数,开启对象建立和过程;
九、构造函数的大部分工做,就是建立对象的特性,还有对象的初始值。在构造函数里建立特性时,须要使用JavaScript的关键字this,其指派对象特性的全部权,同时设置特性的初始值,建立属于“这个”(this)对象的特性,而不是构造函数里的局部变量。this.who=who;
十、构造函数都采用首字母大写,如同对象名称
十一、关键字this是于构造函数里建立对象特征的重点;
十二、new运算符和构造函数共同建立了对象;
1三、构造函数负责建立对象的特性,因此没有构造函数就没有任何特性,没有任何特性就不是一个有意义的对象;
1四、this是JavaScript的关键字,用于引用对象;
1五、在Date对象里,时间以毫秒数表达;
1六、String对象看起来不太像对象,它们只是简单地括起一段文本字符串,建立为对象字面量(object literal);
1七、Date对象在于表达瞬间,以1970年1月1日为参考点,以毫秒为单位;
1八、对象转换为文本,每一个JavaScript对象都具备toString()方法,它试图为对象提供文本字符的表达方式,会主动冒出来工做;
1九、getMonth()日期中的月份数,以0到11表示;getDate():一个月中的天数,1到31;getFullYear():完整地四位数年份;
20、Array对象的sort()方法,默认采起由小到大的升幂顺序;
2一、字符串里面的字符串被称为子字符串(substring);
2二、indexOf()方法:返回子字符串位置的索引值,或者在找不到匹配字符串时返回-1;
字符串能够当作是字符组成的数组;
2三、能够把字符串内的字符类好比数组的元素,可是字符串必定不是数组;
2四、chartAt()只能搜索单一字符;
2五、Math对象是个收藏数学方法和常量的组织对象,其没有变量,不能用于存储任何事物;
2六、Math对象并未实际包含可使用的数据(instance data),因此不须要建立对象,其只是静态的方法和常量的集合;
2七、Math.round():四舍五入;Math.floor():直接舍去小数点后面的数字;
2八、把一些经常使用函数加到对象里面去;
一、方法过载
2对象类:是对象的描述,一份描述对象构成的模板;对象实例:则是实际对象,从类中建立;
三、类描述对象的特性和方法,实例则把真正的数据放入特性,并为数据注入生命,每一个实体都有本身的特性副本,实例之间才彼此不一样;
四、关键字this用于设置实例拥有的特性和方法,可是this同时代表它们被各个实例所拥有,这就解释了方法会被复制到每一个特例(方法过载)的缘由;
五、类拥有的实例方法(class-owned instance method),比起每一个实例各存储一份方法,有效率多了;
六、方法存储在类里,让全部实例共享一份方法代码;
七、prototype对象用于设定隶属于类层(class level)的特性与方法,而非属于实例的;
八、类是对象的描述,实例则是实际的对象,根据对象描述所建立的;
九、类勾画了对象的特性和方法,实例则把真正的数据放在特性里以供方法利用;
十、关键字this用于从实例自己的程序代码内访问实例;
十一、prototype对象让方法可存储于类内,以避免实例没必要要地一直复制程序代码;
十二、类让对象的建立和重复利用更为容易;
1三、this从实例内的方法访问实例,而prototype,提供建立类的机制,不像C++或Java等其它程序语言,JavaScript并未真正支持类做为语言的具体构成要素,它使用prototype模拟类;
1四、构造函数是建立JavaScript类时很是重要的一部分,它们负责构造对象实例,构造函数负责设定实例的一切事项,原型负责处理类层的一切事项;
1五、Blog.prototype.toHTML=function(){…};
1六、对象命名的惟一规则,只有首字母大写,可是实例的命名规则采用小写驼峰式。实例实际上是一个变量;
1七、面向对象编程(OOP):在程序中普遍使用对象,程序可分解成不少组彼此交互的对象集合;
1八、类特性(class property)也能共享,使用prototye建立Blog.prototype.signature=“";
调用类特性只须要this.signature;
1九、类特性的访问必定与实例有关;
20、利用prototype能够扩展内置的JavaScript类,是类拥有的实例方法,属于类,但能访问实例数据;
2一、类方法:为类全部,可是没法访问实例特性的方法,不使用prototype对象,仅使用2二、类名和点号把方法指派给类;类名是调用类对象的关键;
2三、把对象的功能封装(encapsulate)至对象里,是OPP的基本概念之一,代表外部代码不该该负责对象自己可负责的工做;
2四、当某个自变量未被传给函数,方法或构造函数时,在任何试图使用自变量的代码里,它的值都是null,这并不必定是坏事 ;
一、不一样浏览器对脚本的报错不同,可经过多个浏览器找出错误出现的地方,总的来讲Firefox很是适合去除网页脚本里所包含的缺陷;
二、凡是未被指派值的变量,会自动假设为undefined类型,变量历来不会自动设为null,其在boolean上下文中都被转换为false;
三、虽然大多数浏览器都提供了错误控制台,但并不是彻底准确,不能全盘相信;
四、浏览器一般产生不彻底的错误信息,其都是寻找问题的线索;
五、缺乏括号,打错字是常见的错误来源;
六、JavaScript代码中,引号应该成对出现;
七、当引号不是引号,使用转义符:alert(‘It\'s so exciting!'),不须要运用alert(“It's so exciting!”);
八、alert能够做为观察变量数值的窗口以及验证代码是否被运行;
九、=不等于==;
十、逻辑错误较语法错误更难处理,浏览器不提示:意图作某事,却意外地写成了另外一件事情的代码;
十一、凡是企图读取未定义的变量行使有意义的行为都变得彻底没有意义,于是会报错;
十二、注意网页里面的JavaScript代码的运行时间;
1三、运行时错误(Runtime error):不会载入文档主体的问题:用户在表单里输入了脚本没法处理的数据,试图在对象建立或初始化前访问对象;
1四、JavaScript三虫客:语法错误,逻辑错误,运行时错误;
1五、语法错误(Syntax):因为违反JavaScript语言规则而形成的错误,表示代码不适合在JavaScript解释器中运行;
1六、移除程序代码是一个绝佳的脚本显示方式:利用注释暂时禁用代码;
1七、同名局部变量会掩蔽全局变量(阴影变量);局部变量在局部范围内具备优先权,阴影变量在任何状况下都应该被静止;
一、Ajax:使得网页的行为比较像彻底成熟的应用程序,由于它们可以动态地快速下载并存储数据以及实时响应用户,却不用从新载入网页或利用浏览器的某些小手段;
二、以动态数据建造的网页称为数据驱动网页(data-driven page),这类网页只定义了等着数据填入的页面构架;
三、动态数据须要一点事前编辑工做,可是往后带来庞大的回报;
四、XML是种为任何类型的数据设计格式的标记语言;
五、XML没有定义任何标签和属性,它是一组标签与属性该如何建立和使用的规则。一切六、说明特定数据表现方式的标签与属性规范都交给各个XML应用程序;
七、如今已经有不少建立完毕的XML语言,用于解决各式各样的问题,借用这些XML语言或者建立本身专属的标记语言都很是好;
八、XHTML是遵照XML的较严格语法规则的新版HTML;
必须有结束标签;
结束标签必须有/如<br/>;
全部的属性值均以引号围起来;
九、XML对数据的外观没有概念,其专心于数据的意义;
十、XML曾经是Ajax的一部分,如今仍然是大多数Ajax应用程序的基础,其提供了数据建模的绝佳机制;
十一、XML和HTML类似,遂能够透过DOM,把XML视为节点数而访问数据。当心的分离出想要的数据,而后动态的融合数据与网页;
十二、在实行客户端与服务端的数据通讯时,Ajax以请求(request)和响应(response)为中心概念;
1三、JavaScript内置一个称为XMLHttpRequest的对象,用于发起Ajax请求并处理Ajax响应;
1四、readyState:请求的代码状态0(未初始)、1(开启)、2(已传送)、3(接收中)、4(已载入);
1五、status:HTTP的请求状态代码,例如404(找不到文件)或者200(OK);
1六、onreadystatechange:请求状态改变时会被调用的函数引用,存储一个引用,引用于Ajax请求的状态改变时调用的自定义事件处理器——这是事件处理器就是处理响应的地方(判断Ajax是否以合格的响应结束);
1七、responseText:由服务器返回的响应数据,格式为纯文本字符串;
1八、responseXML:由服务器返回的响应数据,格式为XML节点树构成的对象(这两个存储服务器返回的Ajax响应数据);
1九、abort()取消请求,只用在须要取消Ajax请求的时候;
20、open():准备请求,指定请求的类型,URL及其余细节;
2一、send():传送请求,交给服务器处理:这两个方法合做准备Ajax请求,然后送给服务器;
2二、即便是最基础的Ajax请求,也须要至关数量的JavaScript代码;
2三、建立XMLHttpRequest对象的问题,在于浏览器必须提供本身的对象实现,好消息是全部浏览器使用的方法和特性都是一致的,对象的建立方式才是浏览器须要考量的差别;
2四、非同步请求(asynchronous request)在后台运做,不用让脚本等待,因此几乎全部的Ajax请求都是异步的;
2五、Ajax请求的类型(type)很是重要,不仅反映传送到服务器的事物,也反映请求的意图;
2六、GET:主要用于从服务器取得数据,而不影响服务器上的其它东西,若是须要也能透过URL传入小量数据给服务器;
2七、POST:一般与传送数据到服务器有关,传送后的服务器状态一般有所改变,以响应传入的数据,例如存储数据到数据库中;
2八、自定义的AjaxRequest对象减轻了制做Ajax请求的痛苦过程;
2九、send(type,url,handler,postDataType,postData);
30、type 请求的类型GET或POST,url:服务器的url,数据也能够包装在url里面;
3一、postDataType:被传送的数据类型;handle:用于处理响应的回调函数;
3二、postData:被传送的数据;
3三、自定义的请求处理函数必须为请求而设置,用于请求完毕时被调用;
3四、调用AjaxRequest对象的send()方法后,有个Ajax请求被传送到服务器,网页则先行3五、处理网页事物,同时服务器也在处理请求,这就是Ajax的异步,由于异步处理,网页无需暂停,用户体验不会为此停歇;
3六、HTTP的请求和响应为网络浏览器所用,从网络服务器上获取HTML网页。Ajax的请求与响应与HTTP的很是类似,但有几项关键差别;Ajax版随时可能发生,不见得牵涉到HTML数据的递送,Ajax最大的好处之一,就是它能请求任何类型的数据;
3七、Ajax的请求和响应为实时发生,一般不会干涉网页的使用性,当网页上的一小块须要更新时,用户不用停下来等着整个网页从新载入,那块区域可于“背景”载入,用户能够继续浏览网页其它部分并与之交互;
3八、GET和POST的主要区别在于服务器是否经历状态改变,例如存储数据到数据库;
自定义的AjaxRequest的角色是标准对象XMLHttpRequest的“外包装”,用于简化Ajax的使用;
3九、交互式网页就从请求对象开始;
40、客户端脚本使用自定义的回调函数处理Ajax请求的响应;
4一、AjaxRequest对象的方法具备对Ajax响应数据的访问权。getResponseText():以纯文本的格式取得Ajax响应里地访问与getResponseXML():以结构XML代码的格式取得Ajax响应里的数据;
4二、Ajax请求在state市4(loaded)且status是200(OK)时,表示彻底成功;
4三、handleRequest()函数只有在同时达成这两个状态时起身工做;
4四、暂时禁用按钮是一个绝佳的方案,然后于handleRequest()函数中启用;
4五、PHP是种可在服务器上执行任务的脚本语言;
4六、大多数时候,除了最简单的请求,全部Ajax请求都牵涉到服务器端接受来自客服端的数据,而后根据数据而行动;
4七、运行PHP须要调校一下你的网络服务器;
4八、URL-encoded格式:每段数据须要有本身的名称和值,中间插入(=),每对名称/值之间则用&区隔;
4九、代码之间的共享使得网页更加精简。
**
**《Head First JavaScript》是一本入门书,语言通俗易懂,幽默风趣,不少部分比较偏基础,可是又不失细节,本书以实例为指导来讲明JavaScript的一个个部分,确实能加强初学者对JavaScript的做用的理解,总的来讲看完本书,我感受收获仍是很大的,笔记只是本书的不多的一部分,若是对JavaScript有必定了解,可是感受又不是很清楚的同窗,推荐你们阅读一下,必定会颇有收获的。本人也是前端的初学者,以后会慢慢再跟你们分享本身学习过程当中看的书,作的笔记,期待跟你们一块儿进步,本文只是我的笔记,若是有错误的地方,但愿你们可以指出,但愿跟你们一块儿探讨交流。