JavaScript入门经典（【美】菲尔·巴拉德）读书笔记整理
自己对于编程时门外汉想要入门，然后断断续续很长时间读完了这本书，对于里面的东西有一个记录，都是很浅显很不成系统的，不要见怪。以下是正文：
https://static.52pojie.cn/static/image/hrline/2.gif
文档对象模型（Document Object Model，DOM)是对文档及其内容的抽象表示；每次浏览器要加载和显示页面时，都需要解释（解析）构成页面的HTML源代码。在解析过程中，浏览器建立一个内部模型来表示文档里的内容，这个模型就是DOM.在dom里，页面的元素具有一个逻辑化、层级化的结构，就像父对象和子对象组成了一个树状结构。每个对象都有“属性”列表来描述，而利用JavaScript可以使用一些方法操作这些属性。window和document对象
对象表示法：parent.child对象方法表示:object.method( ) 在调用方法时，任何没有明确指明对象的方法调用都会被指向window
模态对话框：在用户单击'OK'按钮之前，页面上不能进行其他任何操作的
添加JavaScript脚本P.S.：外部文件的js语句无需放在<script>标签中，只是单纯的JS代码；在添加外部脚本时，JavaScript代码文件的名称后缀是.js。但从实际情况看，代码的文件名称可以是任何后缀，浏览器都会把其中内容当作JavaScript来解释。代码语句语句1；语句2；变量 变量可以用任何方式进行命名，但一般只使用字母、数字、$、和下划线组成；操作符+（加） -（减） *（乘） /（除）%（求余）捕获事件可以直接在html元素中添加事件处理器来处理事件，其事件处理器的值是JS代码。当事件处理器是通过HTML元素的属性添加到页面时，this是指html元素本身。 函数基本语法function functionName(){js语句}调用函数调用函数只需要使用函数名称（以及一对括号）给函数传递参数functionName(arguments)多参数在使用多个参数时，只需要使用逗号分隔。从函数返回值函数返回的值不一定是数值，而是可以返回JS支持的任何数据类型变量作用域全局作用域 或局部作用域 DOM对象和内置对象alert() :没有返回值confirm()：返回布尔值，可将返回的值赋给变量，之后程序根据值进行操作prompt():允许用户输入信息。其返回值取决于用户进行的操作：如果用户输入了信息，然后点击“OK"或enter键，返回值就是用户输入的字符串；如果用户没有输入而点击OK，返回值时prompt()方法设置的第二个可选参数的值（如果有的话）；如果用户关闭了对话框，返回值是null根据ID选择元素getElementById():在HTML页面里选择具有某个特定ID的元素；html页面元素的id属性要求是唯一的，所以这个方法可以返回与ID相匹配的唯一元素。innerHTML属性可以适用于大部分DOM对象，可以与getElementById()组合使用访问对象内容访问浏览器历史记录hitory对象只有一个属性，length;三个方法，forward()前进,backward()后退,go()含参数，正值前进页面，负值回退页面使用location对象location对象包含当前加载页面的URL信息。URL由多个部分组成：【协议】//【主机名】:【端口】/【路径】【搜索】【hash】location.href 直接设置对象的href属性-原始页面还保留在浏览器的历史纪录里，location.replace直接替换当前页面-当前页面会从历史纪录里删除location.reload()在浏览器中重新加载当前页面-没有参数的reload()方法，当浏览器缓存中保存当前页面时会加载缓存的内容，为避免这种情况可在调用reload()方法时添加参数true
浏览器信息：navigator对象包含了浏览器程序本身的数据
日期和事件Date对象用于处理日期和时间，DOM里没有现成的Date对象，而是我们需要时闯进自己的Date对象。每个Date对象都表示不同的日期和时间。
[*]创建具有当前日期和时间的Date对象 var mydate = new Date()
[*]闯进具有指定日期和时间的Date对象
[*]new Date(milliseconds)
[*]new Date(dateString)
[*]new Date(year,month,day,hours,minutes,seconds,milliseconds)
[*]设置和编辑日期与时间
利用Math对象简化运算程序里一定要直接使用Math的方法，这些方法属于Math的，而不是属于创建的对象myNum.floor() is falseMath.floor(myNum) is ture数学常数：很多数学常数都以Math的属性的方式出现。
关键字 with关键字with以对象为参数，然后是是一对花括号其中包含代码块。代码块里的语句在调用特定对象（猜测即前面以的参数对象）的方法时可以不必指定这个对象，因为JavaScript会假定这些方法时属于作为参数的那个对象的。 数字和字符串数据类型表示了变量包含的数据的本质特征；在JavaScript中，数据类型较宽松，不必事先声明变量的类型；
数值整数：正整数、负整数和0浮点数：浮点数具有小数部分，但小数部分可以为0；非数值（NaN)：当脚本试图把一些非数值当作数值处理，却无法得到数值时，其返回值是NaN
非数值NaN：利用isNaN()函数能够检测非数值
使用parseFloat() 和parseInt()把字符串强制转换为数值格式parseFloat()函数解析字符串并返回一个浮点数；ParseInt()函数返回值是整数或NaN,该函数可以有第2个可选参数（用于制定数值的基，从而返回二进制、八进制或其他进制的数值所对应的十进制数值）无穷大（infinity):JS中一般最大的数值是正或负2^53，利用isFinite()函数可以判断一个数值是否无穷大；
字符串字符串是由特定字符集里的字符所组成的序列，通常用于保存文本内容。字符串的定义是用一对单引号或一对双引号实现；使用一对内容为空的引号可以定义空字符串。
转义序列以反斜线（\）开头的字符组合来表示转义序列（escape sequence),常用的转义序列：
转义序列代表的字符
\t制表符
\n新行，在字符串里插入一个换行
\"双引号
\'单引号
\\反斜线
\x99ASCII字符的值，以2位16进制数值表示
\u9999统一编码字符的值，以4位十六进制的数值表示
字符串方法
方法描述
concat连接字符串，返回结果字符串的一个备份
indexOf返回指定值在字符串里出现的第一个位置（从0开始）
lastIndexOf返回指定值在字符串里出现的最后一个位置
replace在一个字符串里搜索指定的子字符串，并且用新的子串进行替换只替换了第一个
split把字符串分解为一系列子串，保存到数组里；返回一个新数组参数为分隔符号
substr从指定的开始位置，提取指定数量的字符组成字符串可有两个参数，1位开始，2为截取字符数量
toLowerCase把字符串转换为小写字符
toUpperCase把字符串转换为大写字符
布尔值布尔值只有两个值：true(真)或false(假),如果需要将布尔值用于计算，JS自动把true转换为1，把false转换为0；另外一种方式：JS把非0值当作true处理，把0当作false处理，以下这些值均被当作false处理：
[*]布尔值false
[*]未定义（undefined)
[*]null
[*]0
[*]NaN
[*]""(空字符串）
“非”操作符（!）当字符“!”出现在布尔变量之前，JS会解释为“非”，即相反的值。
数组数组：一个变量里保存多个值，每个值都有一个数值索引，而且能保存任何数据类型。创建数组var myArray = new Array();/var myArray =[ ];初始化数组var myArray = ['Monsday','Tuesday','Wednesday'];array.length。数组的length属性，表示数组包含多少项。数组方法
方法描述
concat合并多个数组
join把多个数组元素合并为一个字符串
toString以字符串形式返回数组
indexOf在数组内搜索指定元素返回第一次出现的位置
lastIndexOf返回与搜索规则匹配的最后一个元素出现的位置
slice根据指定的索引和长度返回一个新数组
sort根据字母顺序或提供的函数对数组进行排序
splice在数组指定索引添加或删除一个或多个元素
splice可以在数组里添加或删除指定的一个或多个元素;array(index,howmany,)——第一个参数指定数组在什么位置进行操作，第二个参数说明要删除多少个元素（0标识不删除元素），第三个参数是可选的，是要插入的新元素列表。该方法返回的是被删除的值，数组已经发生了改变。程序控制条件语句if语句 -基本形式 if (条件为真） 执行操作比较操作符
操作符含义
==等于
===值和类型都相等
!=不等于
>大于
<小于
>=大于等于
<=小于等于
测试相等性=赋值 ==比较值if语句进阶 if(){语句1}else{语句2}（条件为真）?[条件为真时执行的语句]:[条件为假执行的语句]多重条件判断 if(条件1){语句1} else if(条件2){语句2} else{语句3}switch语句 如果需要对同一条件语句的多种可能进行判断，更简洁的语法是使用swicth语句。
switch(要判断的变量){case "值1":语句1;break;case "值2":语句2;break;default: 默认语句;}
在关键字switch之后，括号里包含要判断的变量。实际的判断操作位于花括号中。每个case语句对应的值都包含在引号里，然后是一个冒号，接着是满足当前条件时要执行的语句，语句的数量没有限制。注意每个case里都有一个break语句，它会在case部分的语句执行完后，把程序跳转到switch语句的末尾；如果没有break语句，可能会有多个case区域的语句被执行。default部分是可选的，可以在所有case语句都不匹配的情况夏执行一些操作。逻辑操作符 “与”（&&） 和“或”（||）
循环和控制结构
while（this condition is true){ carry out these statements... }while语句的工作方式类似于if，区别在于完成一次判断后，while会回到语句开始的地方，在对判断，只要判断结果为true，while语句就反复执行
do {...these statements ...} while(this conditions is true)
与while语句不同，在判断之前，代码块会先执行一次
for语句for(x=0;x<10;x++){...执行语句...}可以在执行语句中加判断,使用break跳出循环利用for...in在对象里循环
设置和使用定时器setTimeout(action,delay)方法在第二个参数制定的毫秒之后,调用作为第一个参数传入的函数或表达式.setTimeout()方法返回一个值,如果要取消定时器,可以通过将该返回值传入给clearTimeot()方法来引用它.setInterval(action,delay)方法与setTimeout()类似,但它并不是在执行作为第1个参数传递的语句之前强制进行延迟,而是会重复执行,两次执行之间延迟第2个参数指定的毫秒数.与setTimeout()一样,setInterval()返回一个值,随后可以将其传递给clearInterval()方法停止该定时器.面向对象编程过程式编程（procedural programming):特点是把数据保存到变量里，然后由一系列指令操作变量。每个指令（或一些指令，比如函数）都能创建、删除或修改数据，显得数据与程序代码在某种程度上是“分离”的。面向对象编程（Object-Oriented Programming,OOP)把数据的程序包含在叫作“对象”的独立体里，每个对象都有自己的属性（数据）和方法（指令）；OOP帮助我们保持对代码的掌控，并且确保代码的有效性、易读性和可维护性。优点：代码复用；封装；继承创建对象创建直接实例，JS有一个内置对象Object,利用它可以创建空白的对象添加属性/添加方法-即把函数关联到对象时，只是用函数名称，不包含括号。在调用对象方法时加括号。关键字this在内嵌事件处理器使用this时，this是指HTML元素本身；而当我们在函数（或方法）中使用this时，this指向函数的“父对象”。匿名函数：直接在对象方法后创建函数，不需要给函数命名；构造函数：如果需要创建可能具有多个实例的对象，可以使用“对象构造函数”；对象实例化:创建对象实例也叫做“实例化”一个对象；构造函数参数：在实例化对象时，可以为每个实例传递参数（可以设置多个参数），在对象的属性和方法可以调用参数。
使用prototype扩展和继承对象扩展对象：Object.prototype.newmethod = function (){}——prototype对象允许迅速地添加属性和方法，然后可以用于对象的全部实例；继承：继承是指从一种对象类型创建另一种对象类型，新对象类型继承老对象类型的属性和方法，还可以选择添加自己的属性和方法。——JS模拟继承的方法也是使用关键字prototype——childObject.prototype = new fObject(); 扩展JS内置对象：关键字protype还能扩展JS内置的对象——object.prototype.property(method) = 'string'(function)封装：封装时面向对象的一种能力，表示把数据和指令隐藏到对象内部，实现方法在不同语言里会有所区别。对JS来说，在构造函数内部声明的变量只能在对象内部使用，对于外部来说是不可见的。如果想从外部访问这些变量和函数，需要在赋值时使用关键字this，这时就成为了对象的属性和方法。遍历DOMDOM节点只有当页面加载完成之后，DOM才是可用的。节点类型元素节点（表示一个HTML元素）/文本节点（表示页面元素里包含文本内容）：从存在方式来看，文本节点总是包含在元素节点中，但不是每个元素节点都包含文本节点。每种节点类型都有一个关联的数值，保存在属性nodeType里。最常用的节点类型是1，2，3，也就是页面元素、他们的属性和包含的文本。nodeType值（https://www.cnblogs.com/fzh312/p/3618300.html）
nodeType值节点类型nodeName
1元素元素的标签名
2属性属性名称
3文本（包含空白）#text
4CDATA区域#cdata-section
5实体引用实体引用名称
6实体实体名称
7执行指令target
8HTML注释#comment
9文档"#document"
10文档类型(DTD)文档类型名称
11文档片段#document片段
12标签符号名称
childNodes属性每个节点都有一个childNodes属性，这个类似数组的属性包含了当前节点全部直接子节点的集合，我们可以访问这些子节点的信息。childNodes集合称为“节点列表”（NodeList)，其中项目以数值进行索引。firstChild和lastChild：在childNodes数组里选择第一个和最后一个元素。parentNode属性：节点的父节点。var lastChildNodes = myElement.lastChild;兄弟节点是具有相同父节点的那些节点。previousSibling和nextSibling属性分别返回节点的前一个和后一个兄弟节点，如果不存在相应的节点，就返回null。
节点值：DOM里的nodeValue属性返回保存在节点里的值，我们一般用它返回文本节点里的内容。节点名称：nodeName属性以字符串形式返回节点的名称。这个属性是只读的，不能修改它的值。
获得元素集合的办法getElementByIdgetElementsByTagName
读取元素的属性在获得了目标元素后，可以利用getAttribute()方法读取它的属性值；
创建节点createElement()方法可以新建任何类型的标准HTML元素，假设我们想要新建一个<div>元素，只需把相关的节点名称（也就是'div')传递给createElement方法：var newDiv = document.createElement("div");createTextNode()方法的参数是元素需要的文本内容；cloneNode()可以创建一个与已有节点类似的新节点，它接受一个单个的参数，true或false,当为true时，不仅要复制节点，还要复制它的全部子节点。当为false时，则只是与原始元素的属性相同，但不包含子节点。——id为元素属性之一，当复制一个节点的时候，记住要修改新元素的id，因为id是唯一的。
操作子节点（新建的节点不在DOM树的任何位置，因此并没有实际的意义，因此需要特定的方法专门用于在DOM树里放置节点appendChild()：把新建节点作为文档中已有节点的一个子节点，只需要获取父节点，然后调用appendChild()方法，该方法总是在已有的最后一个子节点之后添加子节点，所以新加节点会变成父节点的lastChild.父节点.insertBefore(新子节点，被后置节点)：可以将新节点放在指定子节点之前。replaceChild(newchild,oldchild)方法可以把父元素现有的一个子节点替换为另一个子节点。有两个参数，一个是新的子节点，另一个是现有子节点。removeChild()方法专门用于从DOM树里删除子节点；（如果不方便应用父元素，可以利用元素的parentNode属性;removeChild()方法的返回值是对删除节点的一个引用，在需要时可以利用它对已经删除的节点实现进一步操作）
编辑元素属性setAttribute()方法可以为元素节点创建属性并赋值。它有两个参数，一个是要添加的属性，另一个是属性值；设置现有属性的值会改变属性的值，因此也可以利用这一方法编辑已有属性的值。
动态加载JavaScript文件可以利用createElement()动态新建<script>元素，其中包含需要的代码——可以给已经在浏览器加载的页面随时加载JS代码。几乎所有现代浏览器在脚本完成下载之后都会触发一个onload事件。（与window.onload事件的工作方式类似，只不过window.onload是在页面完成加载时触发，而前者是在外部资源完整下载并可用时触发）
JSON简介JSON是JavaScript对象的一种简单紧凑的标签。使用JSON表示法时，对象可以方便地转换为字符串来进行存储和转换；JSON是以普通代码表示的，因此可以利用JS的“自动”解析功能，让JS把JSON字符串的内容解释为代码而不需要其他的解析程序或转换器。JSON语法：JSON数据的表示方式是一系列成对的参数与值，参数与值由冒号分隔，每对之间以逗号分隔；最终这些序列用花括号包围起来，构成表示数据的JSON对象：var jsonObject = {"param1":"value1","param2":"value2","param3":"value3"}对象jsonObject的定义使用标准JavaScript表示法的子集，使用JSON表示法编写的对象也具有属性和方法。访问JSON数据：①使用eval()函数会计算或运行作为参数传递的内容。如果参数是一个表达式，eval()会计算它的值；②直接使用浏览器JSON支持：浏览器会创建一个名为JSON的JavaScript对象来管理JSON的编码和解码。这个对象有两个方法：stringify()和parse();JSON.parse()方法用于解释JSON字符串，它接收一个字符串作为参数，解析它，创建一个对象，并且根据字符串中找到的"parameter":"value"对设置对象的参数；JSON.stringify()方法可用于把数据转换为便于网络进行存储和传输的形式即JSON格式；JSON数据类型：每个"parameter":"value"对里的参数部分必须遵循一些简单的语法规则：不能是JavaScript保留的关键字；不能以数字开头；除了下划线和美元符号外，不能包含任何特殊字符。JSON对象的值的类型：数值；字符串；布尔值；数组；对象；null（空）用JSON模拟关联数组;
使用JSON创建对象 HTML与JS编程video1.用<video>回放视频，<video>元素，其目标是嵌入任何一种视频格式；当前获得广泛支持的视频格式有3种：MP4、WebM和Ogg2.利用JavaScript的media.canPlayType(type)方法可以检查对特定编码器的支持，其中type是表示媒体类型的字符串，如"video/webm"3.利用pause()和play()命令可以控制视频回放audio1.用<audio>标签播放声音，其用于处理音频文件；支持的最常见文件格式是MP3、WAV和Ogg2.<audio>和<video>标签有很多有用的属性可以通过JavaScript进行控制，如：mediaElement.duration mediaElement.currentTimemediaElement.mutedcanvas<canvas>标签能够提供页面上一个矩形区域，供用户用JavaScript在其中绘制图形与图像，也可以加载和展现图像文件并控制其显示方式。<canvas>元素只是通过其width和height参数定义一个区域，其他与创建图像内容相关的事情都是通过JS实现的。
拖放想让元素可以拖动，只需把它的draggable属性设置为true,能够用于控制拖放操作的事件有：dragstart/drag/dragenter/dragleave/drop/dragend ；为了控制拖放操作，我们需要定义元元素（数据开始的地方）、数据（拖动的对象）和放置目标（捕获拖动元素的区域）-并不是所有页面元素都接受拖放。dataTransfer属性包含的数据会在拖放操作种进行传递，它通常在dragstart事件处理器里进行设置，由drop事件处理器进行读取和处理。setData(format.data)和getData(format.data)分别用于这个属性的设置与读取。
本地存储HTML5能够在用户的浏览器里保存大量数据，同时不会对站点的性能造成任何影响。与使用cookies相比，Web存储更加安全和快速。与cookies相同的是，数据也是以“关键字/值”对的方式存储的，而且Web页面只能访问；自己存储的数据。在浏览器里实现本地数据存储的两个对象：localStorage:存储数据，没有过期事件;sessionStorage:只在当前会话中存储数据。功能检测： if(typeof(Storage)!="undefined") { ...使用两个新对象进行操作... }保存数据的方式：一种,调用setItem方法，向它传递一个关键字和一个值：localStorage.setItem("key","value");另一种，像操作关联数组一样使用localStorage对象：localStorage["key"]="value";获取数据的方式：一种，localStorage.getItem("key");另一种，locaStorage["key"];
操作本地文件HTML5的文件API规范可以一种标准方式访问用户的本地文件；File:提供的信息包括名称、大小和MIME类型，以及对文件句柄的引用；FileList：类似数组的File对象列表。FileReader:使用File和FilesList异步读取文件的接口，可以查看读取进程、捕获错误、判断文件何时加载完成。利用功能检测可以查看浏览器是否支持文件API： if (window.File && window.FileList && window.FileReader){ ...进行操作..}
读取和写入cookiecookie是一些短小的信息串，能够由页面保存在用户的计算机上，然后可以被其他页面读取。cookie一般都设置为在一段时间后失效。一般情况下，每个域名允许20个cookie，而每个域最多保存4KB的cookie。使用document.cookie属性存储和获取cookie.每个cookie基本上就是一个由成对的名称和值组成的字符串。每个cookie是以分号隔开。某些字符不能在cookie里使用，包括分号、逗号及空白符号（比如空格和制表符。在数据存储到cookie之前，需要对数据进行编码，以便实现正确的存储。在存储信息时，使用JS的escape()函数进行编码；而获得原始的cookie数据时，就使用相对应的unescape()函数进行解码。escape()函数把字符串里任何非ASCⅡ字符都转换为相应的2位或4位十六进制格式，比如空格转换为%20，&转换为%26。 cookie组成：cookieName和cookieValue就时在cookie字符串里看到的name=value里的名称和值。domain属性向浏览器指明cookie属于哪个域。此属性可选，在没有指定时，默认值是设置cookie的页面所在域，但是不能把domain属性设置为页面所在域之外的域。path属性用于指定可以使用cookie的目录。属性可选，常用的默认路径是/，表示cookie可以在整个域里使用。secure属性可选，表示浏览器在把cookie发送给服务器时，是否应该使用SSL安全标准。expires每个属性都有个失效日期，过期自动删除。expires属性要以UTC时间表示。如果没有设置这个属性，cookie的生命期和当前浏览器会话一样长，会在浏览器关闭时自动删除。
编写cookie编写新的cookie，只要把包含所需属性的赋值赋予document.cookie就可以了；①document.cookie = “username=lirx;expires=15/10/2019 00:00:00";②var cookieDate = new Date(2019, 10, 15) document.cookie = "username=lirx;expires=" + cookieDate.toUTCString();p.s. cookieDate.toUTCString 用来协调世界时。
用正则表达式匹配模式正则表达式（regular expression,Regex):是一个特殊的字符串，用来描述搜索模式。在程序中，这种模式用于搜索、替换或者管理字符串在一段文本中出现的情况。
一、创建正则表达式：⒈使用正则表达式字符串字面值：正则表达式是字符的序列，Javascript解释器会解释为搜索模式，并用于要查看的文本。var myRegExp = /FooBar/; /*用于严格匹配 FooBar*/① 如果希望不匹配大小写，可在字符串字面值的末尾添加字符i：var myRegExp = /FooBar/i;
修饰符（另一个名称是标志（flag））说明
i执行不区分大小写的匹配
g执行全局匹配（找到所有匹配，而不是在找到第一个匹配后就停止，匹配作为一个数组返回）
m执行多项匹配
②要允许Regex搜索某一个范围内的字符，可以在字符串字面值中使用方括号。例如，在一段文本中找到hubble或bubble的实例：var pattern = /ubble/gi;
表达式搜索范围
方括号之间的任何字符
[^abcd]方括号中没有指定的任何字符
方括号中指定的任何数字
[^0-9]方括号中没有指定的任何数字
(a|b)任何指定的字符，字符是可相互替换的
③Regex还有另一种处理特殊字符的快捷方式，叫做元字符（metacharacter)
元字符描述
.单个的字符，除了换行符之外
\w一个单词字符
\W一个非单词字符
\d一个数字字符
\D一个非数字字符
\s一个空白字符
\S一个非空白字符
\b在一个单词的开头或结尾的一个匹配
\B不在一个单词的开头或结尾的一个匹配
\0一个空白字符
\n一个换行字符
\f一个换页字符
\r一个回车字符
\t一个制表字符
\v一个垂直字符
\xxx八进制数xxx所指定的字符
\xdd十六进制数dd所指定的字符
\uxxxx十六进制数xxx所指定的Unicode字符
④限定符：定义了一个模式出现的次数，或者是目标文本中找到模式的位置。
限定符匹配
n+至少包含一个n的任何字符串
n*包含n的0次或多次出现的任何字符串
n?包含n的0次或1次出现的任何字符串
n{X}包含X个n的序列的任何字符串
n{X,Y}包含从X到Y个n的序列的任何字符串
n{X,}至少包含X个n的序列的任何字符串
n$以n结尾的任何字符串
^n以n打头的任何字符串
?=n后面跟着一个字符串n的任何字符串
?!n后面没有跟一个字符串n的任何字符串
二、使用JavaScript的RegExp对象实例化JavaScriptregExp对象，正则表达式作为一个参数传递给对象的构造函数，不需将模式包含在反斜杠之中。RegExp对象的test()和exec()方法可以通过使用新创建的对象来执行搜索。①test()方法：var myString = "The boy stood on the burning deck";var myPattern = new RegExp("boy");var result = myPattern.test(myString);根据测试是否成功，test()方法总是返回布尔值true或false作为结果。②exec()方法在一个字符串中测试匹配，如果成功，返回和所匹配文本相关的信息的一个数组；否则，返回null。
三、对正则表达式使用字符串方法
限定符说明
match搜索和正则表达式匹配的字符串出现。返回包含了与所找到的匹配相关的信息的一个数组，如果没有找到匹配，返回null
search在字符串中测试一个匹配，返回匹配的索引，如果没有匹配，就返回-1
replace在字符串中搜索一个匹配，并且用一个指定的替代字符串来替换匹配
split根据正则表达式，将一个字符串分割为子字符串的一个数组
20 理解并使用闭包在JavaScript中，函数是所谓的第一类值。换句话说，函数就像字符串和整数等类型一样，可以作为参数传递，从函数调用返回，等等。闭包是访问父作用域的一个函数，即便是该作用域已经结束之后，也可以执行。闭包是一种强大的JavaScript技术，它从根本上允许函数拥有私有变量。
21 用模块组织代码编写模块代码的理由：①模块使得代码更容易维护；②模块帮助复用代码；③模块有助于整齐的全局作用域。在JavaScript原生模块中，每个模块都存储在其自己的JavaScript文件中，一个文件一个模块，在一个模块之中声明的、任何的以及所有变量、函数或对象，对模块外部来说都是不可访问的，除非专门将它们导出到模块，并且导入到其他脚本之中。
要将模块包含到Web页面中，方法和包含其他脚本一样，只不过<script>元素的type参数值是"module":<script type="module" src="./myMoudle.js"></script>JavaScript要求对模块使用相对路径或完整的URL，如在同一目录下的一个模块引用需使用./或../等。
nomodule关键字：如果较旧的浏览器不支持模块的，可以用nomodule方法访问替代性的代码。<script type="module" src="./myMoudle.js"></script><script nomodule src="fallback-option.js"></script>理解 type="module"的所有浏览器，都会忽略nododule属性的所有脚本。
导出：要从一个模块导出项，可以使用关键字export例子：tempConvert.js：function convertCtoF(c) {return (c*1.8)+ 32;}function convertFtoC(f) {return (f-32)/1.8}export {convertCtoF,convertFtoC}
[*]如例子所示，JavaScript允许用单个export关键字来导出项目列表，这些项可以是变量、函数、对象，也可以是这些类型的组合。
[*]如果愿意，可以在导出项的同时重命名它们：export var distance = arror export {arr as routeProperties}
[*]示例中使用的导出方式通常称为具名导出，因为每一个值都是具名的。当只需要从一个模块导出一项时，可以将该项设置为模块的默认导出。任何模块只有一个默认导出，要设置默认的导出，可以使用default关键字。
导入：import 关键字可以将模块导入到脚本中 import {convertCtoF,convertFtoC} from './tempConvert.js';
[*]默认导入：如果想要导入一个项，而另一个模块已经将这个项导出为默认导出了，则可以在导入过程中命名该项：import newname from './modules'; 。
[*]在导入项时，可以重命名它们：import {convertCtoF as CF} from './tempConvert.js';
[*]可以在从另一个模块导入时创建一个对象，然后就可以像访问所创建的对象的属性那样，来访问导入的值和函数：import * as temps form './tempConvert.js';
22 良好的编程习惯
[*]避免过度使用JavaScript：遵循大多数网站的设计，能用CSS的尽量使用CSS；
[*]编写易读和易维护的代码
[*]明智地使用注释：
[*]代码较长的函数或对象的简要说明
[*]对易混淆或易误解代码的注释
[*]原作者自己的技巧或经验，如果不加注释，代码阅读者不太可能知道
[*]关于代码修改的注释
[*]使用适当的文件名称、属性名称和方法名称：代码的自我解释程度越高，源代码里需要的注释就会越少
[*]让常数的名称全部大写：MONTHS_PER_YEAR = 12;
[*]对于一般的函数、方法和变量，采用“驼峰命名法”；
[*]构造函数的第一个字母大写，这种大写的方式提醒我们要使用关键字new
[*]尽量复用代码：一般来说，代码的模块化程度越高越好。将代码集中到函数或对象这些模块里，从而在程序里反复使用，这个过程称为“抽象化”
[*]不要假设：尽可能验证程序用到的每个元素或对象，不要假设其必然有效
[*]平稳退化：考虑较老的设备和应用程序不支持最新的特性，需要保证这些应用可以显示基本内容
[*]渐进增强：先建立一个稳定的、可访问的、功能完整的站点，其中的内容可以被几乎任何用户和浏览器访问，而后再逐渐增加额外的功能层次，满足能够利用这些功能的用户：分离样式、内容和代码
[*]代码分离的JavaScript：
[*]脱离HTML：在HTML中添加类和id，通过class和id来与css和JavaScript产生关联；
[*]仅把JavaScript作为性能增强手段
[*]功能检测：尽可能直接检测浏览器相应的功能是否存在，并且让代码只是用存在的功能。
[*]妥善处理错误：使用try和catch语句可以捕获潜在的错误，并且按照一定的规则处理它们。
23. 调试代码
[*]调试简介：找到并修正Bug的过程叫做调试
[*]错误类型：
[*]语法错误——这包括录入错误和拼写错误、漏掉了引号和错误匹配的引号、漏掉或错误匹配的圆括号或花括号，以及大小写错误；
[*]运行时错误——JavaScript解释器视图做某些它无法理解的事情时所发生的错误。例如将一个字符串当作一个数值处理；
[*]程序逻辑错误——通常是和脚本中的算法或罗纪流程相关的问题
[*]选择编辑器，最好有如下功能
[*]代码行编号；
[*]语法高亮显示；
[*]括号匹配
[*]代码自动填充和工具提示式的语法帮助
[*]调试方法
[*]用alert()进行简单调试
[*]通过控制台调试
[*]分组消息：将控制台调试信息配许分组，可以使它们更具有可读性；
[*]用断点停止代码执行：打开控制面板，在行号上单击，就在该行设置了一个断点，执行会在这里停止，并且可以在右侧的面板中看到单个的变量的当前值。可以通过在左边边缘的断点图标上再次单击来删除断点。
[*]条件性断点：可以通过在左边的列中的断点图标上单击鼠标右键，并且输入一个条件语句，来设置一个条件性断点。代码将持续执行而不会终端，直到满足了该条件，执行就会在该断点停止。
[*]从代码中启动调试器：可以在代码中加入关键词debugger
[*]验证JavaScript：通过一个验证程序如JSLint检查代码是否符合该语言正确的语法规则。
当代码执行在一个断点停止时，可以选择继续执行代码，或者变为每次执行一条语句的单步形式，使用一个代码执行按钮来每次执行一步。在大多数调试器中，具有如下的一些选项：·Continue——继续执行代码，只有到达另一个断点的时候才再次暂停；·Step Over——执行当前的行，包括执行它所调用的任何函数，然后移动到下一行；·Step Into——和Step Over一样，移动到下一行，除非该行调用一个函数；如果调用了函数的话，就进入到该函数的第一行；·Step Out——离开当前函数，并且返回到调用该函数的位置
24. 继续深入学习——第三方库和服务器端编程
[*]库的作用：封装DOM方法；动画；拖放；Ajax
[*]一些常见的库和框架
[*]Prototype框架
[*]Dojo
[*]React
[*]Node.js
[*]jQuery
[*]jQuery入门
[*]在页面里引用jQuery：下载jQuery引用；使用远程方式（CDN）
[*]jQuery的$(document).ready处理器：jQuery相比window.onload相比，只要DOM树构造完成，代码就开始运行，而不会等到图像和其他资源都加载完毕，对改善性能略有帮助。
[*]选择页面元素：利用$("")就可以选择HTML元素；
[*]操作HTML内容：html()和text()方法能够获取和设置使用前面的语句所选中的元素的内容，而attr()可以获取和设置单个元素的属性。html()能够获取元素或一组元素的HTML内容，类似于JavaScript的innerHTML；text()获得一个或一组元素的文本内容；attr()应用于一个元素时，返回特定属性的值。
[*]显示和隐藏元素：show()方法可以让让单个元素或一组元素显示在页面上，还可以添加一些参数来调整显示的过程；hide()方法用于隐藏页面元素，同样可选参数；toggle()方法会改变一个元素或一组元素的当前显示状态，同样可选参数。
[*]命令链：jQuery大多数方法返回一个jQuery对象，可以用于在调用其他方法。
[*]The jQuery UI:交互性；微件；主题（ThemeRoller工具）；
[*]Ajax简介
[*]Ajax能够在Web页面与服务器之间建立一个额外的“处理层”，这个“处理层”通常称为Ajax引擎或Ajax框架，它解释来自用户的请求，在后台以异步方式“安静”地处理服务器通信。对用户来说，可以在当前页面持续的浏览、单击和输入数据。
[*]XMLHttpRequest对象能够建立与服务器的连接，发送HTTP请求而不需要加载相应的页面。（出于安全的考虑，XMLHttpRequest对象一般智能调用与当前页面同一个域里的URL，而不能直接调用远程服务器）
[*]创建request对象：var request = new XMLHttpRequest();
[*]XMLHttpRequest对象的属性和方法：
属性描述
onreadystatechange当对象的readyState属性改变时，调用哪个事件处理器
readyState以下整数形式反映请求的状态0=未初始化1=正在加载2=加载完成3=交互4=完成
responseText以字符串形式从服务器返回的数据
responseXML以文档形式从服务器返回的数据
status服务器返回的HTTP状态代码
statusText服务器返回的解释短语
方法描述
abort()停止当前请求
getAllResponseHeaders()以字符串形式返回全部标题
getResponseHeader(x)以字符串形式返回标题x的值
open('method','URL','a')指定HTTP方法（GET或POST）、目标URL和处理请求的方式（a=true,默认，表示异步；a=false，表示同步）
send(content)发送请求，对于POST数据时可选的
setRequestHeader('x','y')设置“参数=值”对（x=y)，把它赋予与请求一起发送的标题
用jQuery实现Ajaxload（）get()post()ajax()
Node.js简介：使用一种非阻塞的代码模式，一旦请求上传了，程序将执行其他的动作，它会检查文件上传何时完成，然后返回来处理它。Node.js用硬程序不需要挂起等待某些事情发生，它们总是很忙，从而能开发出更快或更具响应性的应用。 感谢楼主分享，来学习一下，希望对自己有用！ 感谢楼主分享，我也是门外汉，正想学习 感谢楼主分享，非常有用 JS的碎片化有时候挺让人头疼的…… 感谢大家的喜欢了，首次分享。因为一直记录在有道笔记里，发现复制粘贴过来格式有点变化，希望不会影响到阅读 好东西收藏了！！！ 太感谢楼主分享了
页:
[1]