好友 阅读权限 10
听众 最后登录 1970-1-1
自己对于编程时门外汉想要入门，然后断断续续很长时间读完了这本书，对于里面的东西有一个记录，都是很浅显很不成系统的，不要见怪。建立一个内部模型来表示文档里的内容， 这个模型就是DOM. 在dom里，页面的元素具有一个逻辑化、层级化的结构，就像父对象和子对象组成了一个树状结构。 每个对象都有“属性”列表来描述，而利用JavaScript可以使用一些方法操作这些属性。 window和document对象 添加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 新行，在字符串里插入一个换行 \" 双引号 \' 单引号 \\ 反斜线 \x99 ASCII字符的值，以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,[new element])——第一个参数指定数组在什么位置进行操作，第二个参数说明要删除多少个元素（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()方法停止该定时器. 面向对象编程 优点：代码复用；封装；继承 创建对象 创建直接实例，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，这时就成为了对象的属性和方法。遍历DOM DOM节点 只有当页面加载完成之后，DOM才是可用的。节点类型 元素节点（表示一个HTML元素）/文本节点（表示页面元素里包含文本内容）：从存在方式来看，文本节点总是包含在元素节点中，但不是每个元素节点都包含文本节点。每种节点类型都有一个关联的数值，保存在属性nodeType里。最常用的节点类型是1，2，3，也就是页面元素、他们的属性和包含的文本。nodeType值（https://www.cnblogs.com/fzh312/p/3618300.html ） nodeType值
节点类型
nodeName
1
元素
元素的标签名
2
属性
属性名称
3
文本（包含空白）
#text
4
CDATA区域
#cdata-section
5
实体引用
实体引用名称
6
实体
实体名称
7
执行指令
target
8
HTML注释
#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属性以字符串形式返回节点的名称。这个属性是只读的，不能修改它的值。 获得元素集合的办法 读取元素的属性 在获得了目标元素后，可以利用 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编程 video 1.用<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实现的。读取和写入cookie cookie是一些短小的信息串，能够由页面保存在用户的计算机上，然后可以被其他页面读取。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 = /[hb]ubble/gi; 表达式 搜索范围 [abcd] 方括号之间的任何字符 [^abcd] 方括号中没有指定的任何字符 [0-9] 方括号中指定的任何数字 [^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 = arr[1] or 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实现Ajax load（） get() post() ajax() Node.js简介：使用一种非阻塞的代码模式，一旦请求上传了，程序将执行其他的动作，它会检查文件上传何时完成，然后返回来处理它。Node.js用硬程序不需要挂起等待某些事情发生，它们总是很忙，从而能开发出更快或更具响应性的应用。
查看全部评分
发表于 2019-10-16 22:26
