从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。

变量名可以任意取名，但要遵循命名规则:

• 网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

  七、关闭窗口（'); //将新打的窗口对象，存储在变量mywin中”。

• 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

4、显示和隐藏（display属性）

1. 为网页内的某个元素指定一个css样式来更改该元素的外观

• 它将测试两个值是否相等，而且会返回一个 true/false （布尔型）值。

非，不等：! 、 !=

• 经常与相等运算一起使用，非运算符在JS中表示逻辑非——它也返回一个布尔值。

1、检索特定字符串字符

2、在字符串中查找子字符串并提取它

• 当你知道字符串中的子字符串开始的位置，以及想要结束的字符时，slice()可以用来提取它。第一个参数是开始提取的字符位置，第二个参数是提取的最后一个字符后一位置browserType.slice(0,3); // moz
• 在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置 字符串中的其余字符browserType.slice(2); // zilla

4、替换字符串的某部分

• 使用replace()方法将字符串中的一个子字符串替换为另一个子字符串
• 需要两个参数 – 要被替换下的字符串和要被替换上的字符串
• 注意，想要真正更新browserType变量的值反应在真实程序里，您需要设置变量的值等于刚才的操作结果；它不会自动更新子串的值。所以事实上你需要这样写：browserType = browserType.replace('moz','van');。

• 可以将数组中的任何项目存储在数组中 – 字符串，数字，对象，另一个变量，甚至另一个数组，也可以混合和匹配项目类型。

• 使用括号表示法访问数组中的各个项目，方式与访问字符串中的字母相同

• 还可以通过简单地向单个数组项提供新值来修改数组中的项目。

• 请注意，数组中的数组称为多维数组。 您可以通过将两组方括号链接在一起来访问数组内的另一个数组。
  • 例如，要访问数组中的一个作为随机数组内的第三个项目的内容.

2、字符串和数组之间的转换

• split():会看到一个包含在一个长长的字符串中的原始数据，您可能希望将有用的项目分成更有用的表单,然后对它们进行处理，例如将它们显示在数据表中。在其最简单的形式中，这需要一个参数，您要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项 var myData =
• 也可以使用join()方法进行相反的操作

• toString（）可以比join（）更简单，因为它不需要一个参数，但更有限制。 使用join（）可以指定不同的分隔符

• push（） ：需要添加一个或多个要添加到数组末尾的项目

• unshift()和shift()以完全相同的方式工作，只是它们分别作用于数组的开始处，而不是结尾处。
• unshift(): 在数组的开始增加一个元素
• shift(): 删除数组的第一个元素

• 要测试的条件，放到括号里（通常是“这个值大于另一个值吗”或者“这个值存在吗”）。这个条件会利用比较运算符进行比较，并且返回true或者 false。
• 如果（if）条件（condition）返回true，运行代码A，否则（else）运行代码B

• 不过，这里你需要注意——在这种情况下，第二段代码不被条件语句控制，所以它总会运行，不管条件返回的是true还是false。这不一定是一件坏事，但这可能不是你想要的——你经常只想要运行一段代码或者另一段，而不是两个都运行。

• === and !== — 判断一个值是否严格等于，或不等于另一个。
• < and > — 判断一个值是否小于，或大于另一个。
• <= and >= — 判断一个值是否小于或等于，或者大于或等于另一个。
• 我们想特别提到测试布尔值（true / false），和一个通用模式，你会频繁遇到它，任何不是 false, undefined, null, 0, NaN 的值，或一个空字符串（”）在作为条件语句进行测试时实际返回true，因此您可以简单地使用变量名称来测试它是否为真，甚至是否存在（即它不是未定义的）。例如:

• 如果要测试多个条件，而不需要编写嵌套if … else语句，逻辑运算符可以帮助您。当在条件下使用时，前两个执行以下操作：
• && — 逻辑与; 使得并列两个或者更多的表达式成为可能，只有当这些表达式每一个都返回true时，整个表达式才会返回true.
• || — 逻辑或; 当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.
• 在这一段代码中，如果OR所在的语句返回 true，则NOT运算符将会将其取否，于是整个表达式的返回值将会是false。
• 在条件语句中运用OR逻辑运算符最常见的错误是尝试声明变量后，仅检查该变量一次的情况下赋予很多个都会返回true的值，不同的值之间用 || (OR)运算符分隔。比如：
• 在这个例子里 if(…) 里的条件总为真，因为 7 (或者其它非零的数) 的值总是为真. 这个条件实际意思是 “如果x等于5, 或者7为真 — 它总是成立的”. 这不是我们想要的逻辑，为了 让它正常工作你必须指定每个OR表达式两边都是完整的检查:

• 在这里我们有一个变量叫做isBirthday- 如果它是true，我们给客人一个生日快乐的消息; 如果不是，我们给她标准的每日问候。
• 你不需要用三元运算符设置变量值; 你也可以运行任何你喜欢的函数或代码行。以下实例显示了一个简单的主题选择器，其中该站点的样式应用了三元运算符。 <label for="theme">Select theme: </label><select

• 如果这返回true，我们运行update()带有黑色和白色参数的函数，这意味着我们最终得到黑色的背景颜色和白色的文字颜色。如果返回false，我们运行update()带有白色和黑色参数的函数，这意味着站点颜色被反转。

2、使用break退出循环

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

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

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

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

• 没有函数名，不会自己做任何事情，通常使用匿名函数以及事件处理程序。
• 匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升（declaration hoisting），而函数表达式不会。

• 一些函数需要在调用它们时指定参数 – 这些值需要包含在函数括号内，它需要正确地完成其工作。
• 当您需要指定多个参数时，它们以逗号分隔。
• 还应该注意，有时参数是可选的 – 您不必指定它们。如果没有，该功能一般会采用某种默认行为。作为示例，数组join（）函数的参数是可选的：

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

7、函数作用域（scope）和冲突

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

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

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

1、使用网页事件的方式

• 这个 onclick 是被用在这个情景下的事件处理器的属性，它就像 button 其他的属性（如 btn.textContent, or btn.style), 但是有一个特别的地方——当您将一些代码赋值给它的时候，只要事件触发代码就会运行。

• 这个机制带来了一些相较于旧方式的优点。有一个相对应的方法，removeEventListener()，这个方法移除事件监听器。例如，下面的代码将会移除上个代码块中的事件监听器： btn.removeEventListener('click', bgChange);
  • 这在简单个的、小型的项目中可能不是很有用，但是在大型的、复杂的项目中就非常有用了，可以非常高效地清除不用的事件处理器，另外在其他的一些场景中也非常有效——比如您需要在不同环境下运行不同的事件处理器，您只需要恰当地删除或者添加事件处理器即可
• 您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：

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

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

3、 我该使用哪种机制？

function() { ... })，并可在第二个参数中指定不同的函数。对于事件处理程序属性来说，这是不可能的，因为后面任何设置的属性都会尝试覆盖较早的属性。

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

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

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

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

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

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

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

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

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

比如有个父元素的事件（比如点击隐藏）,然后 子元素是（点击播放）, 当点击播放的时候，也会触发了隐藏事件。要解决的话 可以在子元素的事件里加上 stopPropagation(）来解决。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此，在我们当前的示例中，当您单击视频时，这个单击事件从 元素向外冒泡直到元素。沿着这个事件冒泡线路：

• 它发现了video.onclick...事件处理器并且运行它，因此这个视频第一次开始播放。
• 接着它发现了（往外冒泡找到的） videoBox.onclick...事件处理器并且运行它，因此这个视频也隐藏起来了。

1、对事件冒泡和捕捉的解释

当一个事件发生在具有父元素的元素上(例如，在我们的例子中是元素)时，现代浏览器运行两个不同的阶段 – 捕获阶段和冒泡阶段。 在捕获阶段：

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

在冒泡阶段，恰恰相反:

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

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

3、事件委托 参考例子

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

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

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

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）

一个对象由许多的成员组成，每一个成员都拥有一个名字（像上面的name、age），和一个值（如[‘Bob’, ‘Smith’]、32）。每一个名字/值（name/value）对被逗号分隔开，并且名字和值之间由冒号（:）分隔，语法规则如下所示：

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

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

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

• 访问对象的属性和方法，当你想访问对象内部的属性或方法时，然后是一个点(.)，紧接着是你想要访问的项目，标识可以是简单属性的名字(name)，或者是数组属性的一个子元素，又或者是对象的方法调用。 person.ageperson.interests[1]person.bio()

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

括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字。(这是使用点表示法无法做到的，点表示法只能接受字面量的成员的名字，不接受变量作为名字。)

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

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

5、”this”的含义

this 指向了代码所在的对象(其实代码运行时所在的对象)。在字面量的对象里this看起来不是很有用，但是当你动态创建一个对象（例如使用构造器）时它是非常有用的，之后你会更清楚它的用途。

以上是 的全部内容， 来源链接：