知识点梳理图

`btn.addEventListener{`    `// 我们将输入的值输入到一个名为searchName的变量中，然后清空文本输入并重新对准它，准备进行下一个搜索`    `var searchName = input.value;`    `input.value = '';`    `input.focus;`    `for{` `// 将当前联系人拆分为冒号字符，并将生成的两个值存储在名为splitContact的数组中` `var splitContact = contacts[i].split;` `// 使用条件语句来测试splitContact [0]是否等于输入的searchName。 如果是，我们在段落中输入一个字符串来报告联系人的号码，并使用break来结束循环` `// 在 迭代后，如果联系人姓名与输入的搜索不符，则段落文本设置为“未找到联系人”，循环继续迭代。` `if{`     `para.textContent = splitContact[0] + ''s number is ' + splitContact[1] + '.';`     `break;` `} else {`     `para.textContent = 'Contact not found.';` `}`    `}``}) `

3、使用continue跳过迭代

var para = document.querySelector; var input = document.querySelector; var btn = document.querySelector;

`var num  = input.value;``for{`    `var sqRoot = Math.sqrt; `    `// 用Math.sqrt找到每个数字的平方根,然后通过测试平方根是否是一个整数，当它被四舍五入到最接近的整数时，它是否与自身相同`    `if !== sqRoot){` `continue;`    `}``// 如果平方根和四舍五入的平方根不相等，则表示平方根不是整数，因此我们对此不感兴趣。 在这种情况下，我们使用continue语句跳过下一个循环迭代，而不在任何地方记录该数字。`     `para.textContent += i + ' ';`    `// 如果平方根是一个整数，我们完全跳过if块，所以continue语句不被执行; 相反，我们将当前i值加上一个空格连接到段落内容的末尾``}`

4、while语句和do ... while语句

while循环 -initializer while { // code to runfinal-expression }

-var i = 0;

while { if { info += 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; }

i++; }

do...while循环非常类似但在while后提供了终止条件： -initializer do { // code to runfinal-expression } while

-var i = 0;

do { if { info += 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; }

i++; } while ;

5、启动倒计时

// 方法一： // var i = 10; // 初始化 // while { // 退出条件 // var para = document.createElement;

 `//     if{` `// para.textContent = 'Countdown' + i;` `//     } else if{` `//  para.textContent = 'Blast off！';` `//     } else{` `//  para.textContent = i;` `//     }` `//     output.appendChild;` `//     i--;  ` `//     // 在循环中的代码运行之后，运行最后的条件，这只有在尚未达到退出条件时才会发生` `// }``// 方法二：` `// for{` `//     var para = document.createElement;  ` `//     if{` `//  para.textContent = 'Countdown' + i;` `//     }else if{` `//  para.textContent = 'Blast off！';` `//     } else{` `//  para.textContent = i;` `//     }` `//     output.appendChild;` `// }`  `// 方法三：` `var i = 10;` `do {  ` `// 花括号中的代码总是在检查之前运行一次，以查看是否应该再次执行。`     `var para = document.createElement;  `     `if{`  `para.textContent = 'Countdown' + i;`     `}else if{`  `para.textContent = 'Blast off！';`     `} else{`  `para.textContent = i;`     `}`     `output.appendChild;`     `i--;` `} while;`

6、填写来宾列表

var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; var admitted = document.querySelector; var refused = document.querySelector; admitted.textContent = 'Admit: '; refused.textContent = 'Refused: ';

 `var i = 0;` `while{`     `if{`  `refused.textContent += people[i] + ', ';`     `} else {`  `admitted.textContent += people[i] + ', ';`     `}`     `i++;` `}` `refused.textContent = refused.textContent.slice + '.';` `admitted.textContent = admitted.textContent.slice + '.';`

十四、函数

1、浏览器内置函数

Javascript有许多内置的函数，可以让您做很多有用的事情，而无需自己编写所有的代码。事实上, 许多你调用浏览器内置函数时调用的代码并不是使用Javascript来编写——大多数调用浏览器后台的函数的代码，是使用像C++这样更低级的系统语言编写的，而不是像Javascript这样的web编程语言。

2、函数与方法

严格说来，内置浏览器函数并不是函数——它们是方法。函数和方法在很大程度上是可互换的.二者区别在于方法是在对象内定义的函数。内置浏览器功能和变量存储在结构化对象内，以使代码更加高效，易于处理。

3、自定义函数

自定义名称后面都带有括号，那么您使用的是自定义函数.

function draw { ctx.clearRect; for { ctx.beginPath; ctx.fillStyle = 'rgba'; ctx.arc, random, random, 0, 2 * Math.PI); ctx.fill; } }

该函数在元素中绘制100个随机圆。每次我们想要这样做，我们可以使用这个函数来调用这个功能 draw;函数可以从内部函数调用其他函数。以上函数例如调用random函数三次，由以下代码定义：function random { return Math.floor*number); }我们需要这个函数，因为浏览器的内置Math.random函数只生成一个0到1之间的随机十进制数。我们想要一个0到一个指定数字之间的随机整数。

4、调用函数

通过将函数名包含在代码的某个地方，后跟圆括号来完成的 function myFunction { alert; }

myFunction // calls the function once

5、匿名函数

没有函数名，不会自己做任何事情，通常使用匿名函数以及事件处理程序。例如，如果单击相关按钮，以下操作将在函数内运行代码： var myButton = document.querySelector;myButton.onclick = function { alert; }还可以将匿名函数分配为变量的值。 var myGreeting = function { alert; } myGreeting;有效地给变量一个名字;还可以将该函数分配为多个变量的值，例如： var anotherGreeting = function { alert; } anotherGreeting;但这只会令人费解，所以不要这样做！创建功能时，最好只要坚持下列形式： function myGreeting { alert; }您将主要使用匿名函数来运行负载的代码以响应事件触发 - 使用事件处理程序。再次，这看起来像这样： myButton.onclick = function { alert; // I can put as much code // inside here as I want }匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升，而函数表达式不会。

6、函数参数

一些函数需要在调用它们时指定参数 - 这些值需要包含在函数括号内，它需要正确地完成其工作。参数有时称为参数，属性或甚至属性例如，浏览器的内置Math.random函数不需要任何参数。当被调用时，它总是返回0到1之间的随机数： var myNumber = Math.random;浏览器的内置字符串replace函数需要两个参数：在主字符串中查找的子字符串，以及用以下替换该字符串的子字符串： var myText = 'I am a string'; var newString = myText.replace;当您需要指定多个参数时，它们以逗号分隔。还应该注意，有时参数是可选的 - 您不必指定它们。如果没有，该功能一般会采用某种默认行为。作为示例，数组join函数的参数是可选的：

var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.join; // returns 'I love chocolate frogs' var madeAString = myArray.join; // returns 'I,love,chocolate,frogs'

如果没有包含参数来指定加入/分隔符，默认情况下会使用逗号

7、函数作用域和冲突

创建一个函数时，函数内定义的变量和其他东西都在它们自己的单独的范围内, 意味着它们被锁在自己独立的隔间中, 不能从函数外代码其它函数内访问。所有函数的最外层被称为全局作用域。 在全局作用域内定义的值可以在任意地方访问。

8、函数内部的函数

function myBigFunction { var myValue;

subFunction1; subFunction2; subFunction3; }

function subFunction1 { console.log; }

function subFunction2 { console.log; }

function subFunction3 { console.log; }

只需确保在函数内使用的值正确的范围. 上面的例子会抛出一个错误ReferenceError：MyValue没有被定义，因为myValue变量与函数调用的范围相同, 函数定义内没有定义 - 调用函数时运行的实际代码。为了使这个工作，你必须将值作为参数传递给函数，如下所示： function myBigFunction { var myValue = 1;subFunction1; subFunction2; subFunction3; }

function subFunction1 { console.log; }

function subFunction2 { console.log; }

function subFunction3 { console.log; }

十五、事件

在编程时系统内的发生的动作或者发生的事情— 系统会在事件出现的时候触发某种信号并且会提供一个自动加载某种动作的机制，比如在一个机场，当一架将起飞的飞机的跑道清理完成后，飞行员会收到一个信号，结果是他们开始起飞。在Web中, 事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。网络事件不是 Javascript 语言的核心——它们被定义成内置于浏览器的Javascript APIs。

1、使用网页事件的方式

事件处理器属性 var btn = document.querySelector;

btn.onclick = function { var rndCol = 'rgb + ',' + random + ',' + random + ')'; document.body.style.backgroundColor = rndCol; }

这个 onclick 是被用在这个情景下的事件处理器的属性，它就像 button 其他的属性 nclick="bgChange">Press me function bgChange { var rndCol = 'rgb + ',' + random + ',' + random + ')'; document.body.style.backgroundColor = rndCol; }

2、addEventListener和removeEventListener

这个函数和事件处理属性是类似的，但是语法略有不同 var btn = document.querySelector;

function bgChange { var rndCol = 'rgb + ',' + random + ',' + random + ')'; document.body.style.backgroundColor = rndCol; }

btn.addEventListener;

在addEventListener 函数中, 我们具体化了两个参数——我们想要将处理器应用上去的事件名称，和包含我们用来回应事件的函数的代码。注意将这些代码全部放到一个匿名函数中是可行的: btn.addEventListener { var rndCol = 'rgb + ',' + random + ',' + random + ')'; document.body.style.backgroundColor = rndCol; });这个机制带来了一些相较于旧方式的优点。有一个相对应的方法，removeEventListener，这个方法移除事件监听器。例如，下面的代码将会移除上个代码块中的事件监听器： btn.removeEventListener;这在简单个的、小型的项目中可能不是很有用，但是在大型的、复杂的项目中就非常有用了，可以非常高效地清除不用的事件处理器，另外在其他的一些场景中也非常有效——比如您需要在不同环境下运行不同的事件处理器，您只需要恰当地删除或者添加事件处理器即可您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：

myElement.onclick = functionA; myElement.onclick = functionB;

第二行会覆盖第一行，但是下面这种方式就会正常工作了：

myElement.addEventListener; myElement.addEventListener;

当元素被点击时两个函数都会工作：

3、 我该使用哪种机制？

第三种机制的主要优点是，如果需要的话，可以使用removeEventListener删除事件处理程序代码，而且如果有需要，您可以向同一类型的元素添加多个监听器。例如，您可以在一个元素上多次调用，addEventListener { ... })，并可在第二个参数中指定不同的函数。对于事件处理程序属性来说，这是不可能的，因为后面任何设置的属性都会尝试覆盖较早的属性。

4、其他事件概念

事件对象：有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。 这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

function bgChange {    var rndCol = 'rgb + ',' + random + ',' + random + ')';    e.target.style.backgroundColor = rndCol;    console.log;}btn.addEventListener;

在这里，您可以看到我们在函数中包括一个事件对象，e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。 事件对象 e 的target属性始终是事件刚刚发生的元素的引用。 所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

当您要在多个元素上设置相同的事件处理程序时，e.target非常有用，并且在发生事件时对所有元素执行某些操作.

例如，你可能有一组16块方格，当它们被点击时就会消失。用e.target总是能准确选择当前操作的东西并执行操作让它消失，而不是必须以更困难的方式选择它。

我们使用Javascript创建了16个元素。接着我们使用 document.querySelectorAll选择全部的元素,然后遍历每一个,为每一个元素都添加一个onclick单击事件，每当它们点击时就会为背景添加一个随机颜色。

var ps = document.querySelectorAll;for  {    ps[i].onclick = function { e.target.style.backgroundColor = bgChange;    }}

阻止默认行为

最常见的例子是Web表单，例如自定义注册表单。 当你填写详细信息并按提交按钮时，自然行为是将数据提交到服务器上的指定页面进行处理，并将浏览器重定向到某种“成功消息”页面当用户没有正确提交数据时，麻烦就来了 - 作为开发人员，你希望停止提交信息给服务器，并给他们一个错误提示，告诉他们什么做错了，以及需要做些什么来修正错误。 一些浏览器支持自动的表单数据验证功能，但由于许多浏览器不支持，因此建议你不要依赖这些功能，并实现自己的验证检查。 我们来看一个简单的例子。

这里我们用一个onsubmit事件处理程序来实现一个非常简单的检查，用于测试文本字段是否为空。 如果是，我们在事件对象上调用preventDefault函数，这样就停止了表单提交，然后在我们表单下面的段落中显示一条错误消息，告诉用户什么是错误的：

var form = document.querySelector; var fname = document.getElementById; var lname = document.getElementById; var submit = document.getElementById; var para = document.querySelector;

form.onsubmit = function { if { e.preventDefault; para.textContent = 'You need to fill in both names!'; } }

显然，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交——这不是我们例子想要达到的目的。事件冒泡及捕获

5、事件冒泡及捕获

事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

比如有个父元素的事件,然后 子元素是, 当点击播放的时候，也会触发了隐藏事件。要解决的话 可以在子元素的事件里加上 stopPropagation时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。 在捕获阶段：

浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。然后，它移动到中的下一个元素，并执行相同的操作，然后是下一个元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它。然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素。

2、用 stopPropagation 修复问题

标准事件对象具有可用的名为 stopPropagation的函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行。所以，我们可以通过改变前面代码块中的第二个处理函数来解决当前的问题: video.onclick = function { e.stopPropagation; video.play; };注解: 为什么我们要弄清楚捕捉和冒泡呢？那是因为，在过去糟糕的日子里，浏览器的兼容性比现在要小得多，Netscape只使用事件捕获，而Internet Explorer只使用事件冒泡。当W3C决定尝试规范这些行为并达成共识时，他们最终得到了包括这两种情况的系统，最终被应用在现在浏览器里。注解: 如上所述，默认情况下，所有事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。如果您真的想在捕获阶段注册一个事件，那么您可以通过使用addEventListener注册您的处理程序，并将可选的第三个属性设置为true。参考例子1 参考例子2

3、事件委托 参考例子

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每个子节点，而不是每个子节点单独设置事件监听器。

一个很好的例子是一系列列表项，如果你想让每个列表点击时弹出一条信息，您可以将click单击事件监听器设置在父元素上，它将会冒泡到列表项上。

十六、对象

在 Javascript 中，大多数事物都是对象, 从作为核心功能的字符串和数组，到建立在 Javascript 之上的浏览器 API。你甚至可以自己创建对象，将相关的函数和变量封装打包成便捷的数据容器。理解这种面向对象 的特性对于进一步学习 Javascript 语言知识是必不可少的。

1、对象基础

对象是一个包含相关数据和方法的集合

一个对象由许多的成员组成，每一个成员都拥有一个名字，和一个值。每一个名字/值对被逗号分隔开，并且名字和值之间由冒号分隔，语法规则如下所示：

var objectName = { member1Name : member1Value, member2Name : member2Value, member3Name : member3Value }

var person = { name : ['Bob', 'Smith'], age : 32, gender : 'male', interests : ['music', 'skiing'], bio : function { alert; }, greeting: function { alert; } };

对象成员的值可以是任意的，在我们的person对象里有字符串，数字，两个数组，两个函数。前4个成员是资料项目，被称为对象的属性，后两个成员是函数，允许对象对资料做一些操作，被称为对象的方法

一个如上所示的对象被称之为对象的字面量——手动的写出对象的内容来创建一个对象。不同于从类实例化一个对象，

当你想要传输一些有结构和关联的资料时常见的方式是使用字面量来创建一个对象，举例来说，发起一个请求到服务器以存储一些数据到数据库，发送一个对象要比分别发送这些数据更有效率，而且比起数组更为易用，因为你使用名字来标识这些资料。

2、点表示法

访问对象的属性和方法，当你想访问对象内部的属性或方法时，然后是一个点，紧接着是你想要访问的项目，标识可以是简单属性的名字，或者是数组属性的一个子元素，又或者是对象的方法调用。 person.age person.interests[1] person.bio子命名空间：可以用一个对象来做另一个对象成员的值 name : ['Bob', 'Smith'], 改成 name : { first : 'Bob', last : 'Smith' },访问：链式的再使用一次点表示法 person.name.first person.name.last

3、括号表示法

另外一种访问属性的方式是使用括号表示法 person.age person.name.first

换成： person['age'] person['name']['first']

这看起来很像访问一个数组的元素，从根本上来说是一回事儿，你使用了关联了值的名字，而不是索引去选择元素。难怪对象有时被称之为关联数组了——对象做了字符串到值的映射，而数组做的是数字到值的映射。

4、设置对象成员

person.age = 45 person['name']['last'] = 'Cratchit'

设置成员并不意味着你只能更新已经存在的属性的值，你完全可以创建新的成员，尝试以下代码： person['eyes'] = 'hazel' person.farewell = function { alert }

括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字。

比如说，我们想让用户能够在他们的数据里存储自己定义的值类型，通过两个input框来输入成员的名字和值，通过以下代码获取用户输入的值：

var myDataName = nameInput.value var myDataValue = namevalue.value

我们可以这样把这个新的成员的名字和值加到person对象里：

person[myDataName] = myDataValue

5、"this"的含义

this 指向了代码所在的对象。在字面量的对象里this看起来不是很有用，但是当你动态创建一个对象时它是非常有用的，之后你会更清楚它的用途。