JavaScript 第一步
什么是JavaScript？
每次当你浏览网页时不只是显示静态信息—— 显示即时更新的内容， 或者交互式的地图，或 2D/3D 图形动画，又或者自动播放视频等，你可以确信，JavaScript 参与其中。
HTML是一种标记语言，用来结构化我们的网页内容和赋予内容含义，例如定义段落、标题、和数据表,或在页面中嵌入图片和视频。
CSS 是一种样式规则语言，我们将样式应用于我们的 HTML 内容， 例如设置背景颜色和字体，在多个列种布局我们的内容。
JavaScript 是一种编程语言，允许你创建动态更新的内容，控制多媒体，图像动画，和一些其他的东西。好吧，虽然不是一切，但是它的神奇之处是你能够用几行JavaScript代码就能实现。
JavaScript 语言的核心包含一些普遍的编程特点，以让你可以做到如下的事情：
- 在变量中储存有用的值。以上面的演示做例子，我们请求输入一个新的名字，然后把那个名字储存到一个叫 name 的变量.
- 对一段文本（在编程中被称为“字符串”）进行操作。在上面的例子中，我们取出字符串 "Player 1: "，然后把它和 name 变量连结起来，创造出完整的文本标签，例：''Player 1: Chris"。
- 运行代码以响应在网页中发生的特定事件。在上述的例子中，我们用了一个 click 事件来检测按钮什么时候被点击，然后运行更新文本标签的代码。
- 以及更多！
然而更令人兴奋的是建立在 JavaScript 语言的核心之上的功能。在你的 JavaScript 代码里，被称为应用程序编程接口 [Application Programming Interfaces (APIs)] 的功能会提供额外的超能力给你使用。
APIs 是已经建立好的一套代码组件，目的是让开发者可以实现除了用APIs之外很难甚至不可能实现的程序。它们的作用就像是已经制作好的家具套件对家居建设的作用一样——从一堆已经切好的木板开始组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的大小和形状，找到合适大小的螺丝钉，然后组装成一个书柜要简单得多。
APIs通常分成两个分类。
浏览器 APIs (Browser APIs) 已经安装在你的浏览器中，而且能够从周围的计算机环境中揭露数据，或者做有用的复杂事情。举个例子：
- 文档对象模型 API [DOM (Document Object Model) API] 允许你操作 HTML 和 CSS，创建，移除和修改 HTML，动态地应用新的样式到你的页面，等等。比如说每次你在一个页面里看到一个弹出窗口，或者显示一些新的内容，这就是 DOM 在运作。
- 地理定位 API [Geolocation API] 获取地理信息。这就是为什么谷歌地图可以找到你的位置，而且标示在地图上。
- 画布 [Canvas] 和 WebGL APIs 允许你创建生动的 2D 和 3D 图像。人们正运用这些网页技术进行一些令人惊叹的事情——比如说 Chrome Experiments 和 webglsamples。
- 音像和影像 APIs [Audio and Video APIs]，像 HTMLMediaElement 和 WebRTC 允许你运用多媒体去做一些非常有趣的事情，比如在网页中播放音像和影像，或者从你的网页摄像头中获取获取录像，然后在其他人的电脑上展示。
第三方 APIs (Third party APIs)（这些 APIs 是高级的） 默认是没有安装到浏览器中的，而你通常需要从网络上的某些地方取得它们的代码和信息。举个例子：
- 推特 API [Twitter API] 允许你做一些像是在你的网站上展示你的最新推送之类的事情。
- 谷歌地图 API [Google Maps API] 允许你去嵌入定制的地图到你的网站，和其他的功能。
在 HTML 和 CSS 已经被集合和组装成一个网页后，浏览器的 JavaScript 引擎执行 JavaScript。这保证了当 JavaScript 开始运行时，网页的结构和样式已经在该出现的地方了。这是一个好事情，正如 JavaScript 的普遍用处是通过 DOM API（如之前提及的那样）动态地修改 HTML 和 CSS 来更新用户交界面。如果 JavaScript 在 HTML 和 CSS 加载完成之前加载运行，那么会发生错误。
每个浏览器标签本身就是一个用来运行代码的分离的容器（这些容器用专业术语称为“运行环境”）——这意味着在大多数情况中，每个标签中的代码是完全分离地运行，而且在一个标签中的代码不能直接影响在另一个标签中的代码——或者在另一个网站中的。这是一个好的安全措施——如果不是这样的话，那么海盗们就可以开始写从其他网站偷取信息的代码，和其他像这样的坏事。注意：有安全的方式去在不同网站/标签中传送代码和数据，但这些方法是高级的技术。
当浏览器遇到一块 JavaScript 代码时，它通常会按顺序运行这代码块，从上往下。这意味着你需要注意你放置代码的顺序。
在编程环境中，你或许听说过这两个术语 解释 [interpreted] 和 编译 [compiled]。JavaScript 是一个解释语言——代码从上到下运行，而运行的结果会马上被返回。在浏览器运行代码前，你不必先把它转化为其他形式。另一方面来说，编译语言则需要在运行前转化为另一种形式。比如说 C/C++ 则要先被编译成汇编语言，然后再由电脑运行。
客户端[client-side]代码是在用户的电脑上运行的代码——当浏览一个网页时，这个网页的客户端代码就会被下载，然后由浏览器来运行和展示。在另一方面，服务器端[server-side]代码则在服务器上运行，然后它的结果会由浏览器进行下载和展示。JavaScript也是流行的服务器端网页语言！JavaScript 同时也能用作服务器端语言，比如说在流行的 Node.js 环境中。
JavaScript 是区分大小写的，而且非常的讲究（HTML、CSS似乎不怎么区分大小写，至少不是非常的讲究）。
把 JavaScript 放置在一个外部文件中，对于规划你的代码来说，这通常是一件好事，让它可以在多个 HTML 文件中重复使用，再加上 HTML 中没有一大堆脚本的话，HTML 会更容易阅读。请不要这样内联JavaScript到HTML。这是一个用 JavaScript 来污染你的 HTML 的坏实践，而且它还不高效——你会需要在每个想要 JavaScript 应用到的按钮上包含 onclick="createParagraph()" 属性。使用一个纯 JavaScript 结构允许你使用一个指令来应用于所有的按钮，无论页面上有多少个，和有多少个按钮被添加或者移除。不需要对 JavaScript 进行任何修改。
JavaScript的注释方式和C++一样，有两种（CSS只有C++的其中一种，HTML也是一种，但和C++的不一样）。
进入JavaScript的第一课
像程序员一样思考。
您可以使用关键字var以及变量的名称创建一个变量。
函数Window.alert：即警告。弹出警告窗口。
===：Strict equality (is it exactly the same?)
!==：Non-equality (is it not the same?)
您可能会看到有些人在他们的代码中使用==和!=来平等和不相等，这些都是JavaScript中的有效运算符，但它们与===/!==不同，前者测试值是否相同， 但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。 严格的版本往往导致更少的错误，所以我们建议您使用这些严格的版本。
小于等于和大于等于都只有一个等号，而不是两个。
事件（Events）是浏览器中发生的动作，例如点击按钮，加载页面或播放视频，我们可以调用代码来响应。侦听事件发生的构造方法称为事件监听器，响应事件触发而运行的代码块被称为事件处理器。
注意，当函数作为事件监听方法的参数时，函数名后不应带括号。
In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced. The built-in objects that your browser contains allow you to do lots of useful things.
For example, we first created a guessField variable that stores a reference to the text input form field in our HTML(To get this reference, we used the querySelector() method of the document object).
Because guessField now contains a reference to an <input> element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects).
页面上的每个元素都有一个style属性，它本身包含一个对象，其属性包含应用于该元素的所有内联CSS样式。 这允许我们使用JavaScript在元素上动态设置新的CSS样式。
什么地方出了错？
浏览器的控制台可以检查是否JavaScript是否有语法错误并提示错误信息。有的错误要和网页交互后控制台才能提示，比如错误在函数内部发生，相对于函数外部的代码，函数内部的代码运行在一个独立的范围中，在这种情况下，页面加载时函数内部的代码不会被运行也不会抛出异常。
如果你不确定一段语法的正确拼写，在MDN上查找通常是很好的。The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine.
console.log() is a really useful debugging function that prints a value to the console. log是日志的意思。
如何存储你需要的信息—变量
变量是用来存储数值的，那么有一个重要的概念需要区分。变量不是数值本身，它们仅仅是一个用于存储数值的容器。你可以把变量想象成一个个用来装东西的纸箱子。
在JavaScript中，所有代码指令都会以分号结尾 (;) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。
变量名不要以下划线开头—— 以下划线开头的被某些JavaScript设计为特殊的含义，因此可能让人迷惑。
一个可靠的命名约定叫做 "小写驼峰命名法"，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符。
与其他编程语言不同，在 JavaScript 中你不需要声明一个变量的类型，因为JavaScript是一种“松散类型语言”。
字符串是文本的一部分。当你给一个变量赋值为字符串时，你需要用单引号或者双引号把值给包起来，两者之间几乎没有什么区别，根据个人偏好来使用。但是，您应该选择一个并坚持使用它。
数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。
In programming, an object is a structure of code that models a real life object. You can have a simple object that represents a car park and contains information about its width and length, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.
创建对象，比如var dog = { name : 'Spot', breed : 'Dalmatian' };。
JavaScript中的基础数学—数字和操作符
Unlike some other programming languages, JavaScript only has one data type for numbers, you guessed it, Number. 这意味着，你在JavaScript中处理的任何类型的数字，都以完全相同的方式处理它们。所以整数除以整数的结果可以是浮点数。
A control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.
运算符typeof：参数可以是变量，返回数据类型。注意，是运算符。格式，typeof myInt;。吐槽：我真是服了，这个运算符的字母o是小写的，但是方法indexOf()的字母O却是大写的。
文本处理— JavaScript中的字符串
想在字符串中包含单引号（双引号），那包裹字符串的就应该用双引号（单引号），或者用转义字符——反斜杠\。
字符串和数字也能用加号相连（浏览器会自动把数字转换为字符串）。
函数Number()把字符串转换为数字。
方法toString()把数字转换为字符串。
有用的字符串方法
我们曾经说过，现在我们重申一遍—在javascript中，一切东西都可以被当做对象。
When you create a string, your variable becomes a string object instance, and as a result has a large number of properties（即.XXX） and methods（即.XXX()） available to it.
您可以使用方括号符号返回字符串中的字符。
属性length：获取字符串或数组的长度。
注意：以下方法都是字符串的方法。
方法indexOf()：在字符串中查找子字符串，参数是要查找的子字符串，返回子字符串的第一个字符的下标。找不到则返回-1。吐槽：我真是服了，这个方法的字母O是大写的，但是运算符typeof的字母o却是小写的。
方法slice()：提取子字符串，参数是字符的下标，返回子字符串。slice()的第二个参数是可选的（表示要提取的子字符串的最后一个字符的下一个下标），如果你没有传入第二个参数，这个分片的结束位置会在原始字符串的末尾。
方法toLowerCase()和toUpperCase()：大小写转换（所有字符），不需要参数，返回转换后的字符串。
方法replace()：将字符串中的一个子字符串替换为另一个子字符串，需要两个参数 - 要被替换下的子字符串和要被替换上的子字符串，返回替换后的字符串。注意，想要真正更新变量的值，您需要设置变量的值等于返回的结果，它不会自动更新变量的值。
非0数字转换为布尔值都是ture，只有数字0转换为布尔值是false。
函数和方法直观的区别是，函数写对象前面，方法写对象后面；内在的区别是函数是通用的，而方法是属于某一个对象的。
数组
Bear in mind that you can store any item in an array — string, number, object, another variable, even another array. You can also mix and match item types — they don't all have to be numbers, strings, etc, just like this: var random = ['tree', 795, [0, 1, 2]];.
注意：以下方法都是数组的方法。
方法split()：在其最简单的形式中，需要一个参数——您要将字符串分隔的字符——并返回分隔符之间的子串，作为数组中的项。这在技术上是一个字符串的方法，而不是一个数组的方法，但是我们把它放在数组这里来讲，是因为它在这里很好。
方法join()：这个就是数组的方法了，进行与split()相反的操作，可以指定一个参数（不指定则默认是逗号）作为分隔符。而方法toString()不能指定参数，只能是逗号作为分隔符。
方法push()和方法pop()：在数组末尾添加或删除项目。push()的参数可以有多个，即一次添加多个数组项，返回数组的新长度；pop()不需要参数，返回已删除的项目。unshift()和shift()（shift意思是“去掉”）以完全相同的方式工作，只是它们在数组的开始处，而不是结尾。
函数Math.round()：四舍五入填入括号内的参数。
JavaScript 基础要件
JavaScript 对象介绍
客户端网页 API