JavaScript ( **JS **) 是一种轻量级解释型的，或是JIT编译型的程序设计语言，有着 函数优先 (First-class Function) 的编程语言。虽然它是作为开发web页面的脚本语言而出名的，但是在很多非浏览器环境中也使用JavaScript，例如 node.js 和 Apache CouchDB。JS是一种基于原型、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如：函数式编程）编程风格。了解更多 关于JavaScript。
1.什么是JavaScript？
JavaScript（缩写：JS）是一门成熟的动态编程语言，应用于HTML文档是能够在网站上提供动态交互能力。
提示：我们将<script>元素放在 HTML 文件底部的原因是，浏览器解析 HTML 似乎按照代码出现的顺序来的。如果 JavaScript被首先读取，它也应该影响下面的 HTML，但有时会出现问题，因为 JavaScript 会在 HTML 之前被加载，如果 JavaScript 代码出现问题则 HTML 不会被加载。所以将 JavaScript 代码放在底部是最好的选择。
2.语言基础速览
变量（Variables）
Variables 是你存储数据的容器。要声明一个变量你需要使用关键字 var
，然后输入任何你想要的名称：
var myVariable;
提示：行末的分号表示语句结束，不过这个分号不是必须的。只有在下一行语句以 (、[、/、+、-、` 开头时，你才需要加这个分号。
提示：你几乎可以以任何名称来命名一个变量，不过我们有一些限制（点击这里查看 变量命名规则 。） 如果你不确定,你可以 验证你的变量名查看是否有效.
提示：JavaScript 是对大小写敏感的——myVariable 与 myvariable 是不同的。如果你的代码出现问题了，查看一下大小写有没有错误！
注意变量有不同的 数据类型 ：
那么为什么我们需要变量呢？好吧，在编程时要做任何有趣的事我们必须用到变量。如果值没有改变，那么你将无法动态地做任何事，就像个性化一个祝福短信或是改变在图片库里展示的图片。
注释
你可以在 JavaScript 中添加注释，就像你在 CSS 中做过的一样。
/*
Everything in between is a comment.
*/
// This is a comment
运算符
Operator 运算符是一个根据两个值（或变量）做出结果的代数符号。在下面的表里你可以看到一些最简单的运算符，后面的示例你可以在浏览器控制台里尝试一下。
提示：计算时如果混合几种数据类型可能导致奇怪的结果，所以请谨慎地正确地引用你的变量，然后得出你期望的结果。比如输入 "35" + "25" 到控制台。为什么结果与你想象的不同？因为引号将数字转换成了字符串，所以最终会连接两个字符串而不是相加数字。如果你输入 35 + 25，你会得到正确的结果。
语句
语句是能够让你测试一个表达式是否返回 true 然后根据结果运行不同的代码的结构。最常用的语句形式是 if ... else. 下面是一个例子：
var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
alert('Yay, I love chocolate ice cream!');
} else {
alert('Awwww, but chocolate is my favorite...');
}
函数
Functions 是一种封装你想重复使用的功能的方法，这样你就可以在任何时候想使用其中的功能就通过函数名称来调用而不用老是重复写下整段代码。你在上面已经见过一些函数了，比如：
var myVariable = document.querySelector('h1');
alert('hello!');
这些函数是浏览器内置的，你可以在任何时候使用。
如果你看到一些东西长得像变量名但是有括号 — () — 在后面，这可能就是一个函数。函数通常包括 arguments — 一些必要的参数。它们在括号内部, 如果有一个以上参数则使用逗号分开。
好消息是你可以定义你自己的函数 — 在下一个例子里我们会写一个简单的需要两个参数来做乘法运算的函数。
function multiply(num1,num2) {
var result = num1 * num2;
return result;
}
提示：
return 语句告诉浏览器返回 result 变量以便使用。这是很有必要的，因为函数内定义的变量只能在函数内使用。这叫做作用域 scoping (详见 变量作用域)
事件
在网页上创建真正的交互，你需要使用事件 — 事件是能够捕捉浏览器操作并且允许你运行代码进行响应的代码结构. 最明显的事件是 点击事件，在鼠标点击什么的时候被浏览器唤醒。 为了演示这个操作，尝试将下面的代码输入到控制台，然后在当前页面点击：
document.querySelector('html').onclick = function() {
alert('Ouch! Stop poking me!');
}
我们有许多方法来将一个事件与元素绑定。在这里我们选择了 HTML 元素然后将 onclick 属性设置成包含单击时我们想要运行的代码的匿名函数。
3.改善示例网页
现在我们已经讲述了一点 JavaScript 的基础了，让我们添加一些更酷的特性到示例网页里来看看我们能做什么。
添加一个图像转换器
这一部分我们将添加另一个图片到我们的站点，并且添加简单的 JavaScript 使得单击图片时转换图片。
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}
4.添加个性化的欢迎信息
接下来我们会添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化的欢迎信息。欢迎信息会持续到用户离开网页。我们还会添加一个选项来在必要的时候改变用户并且改变欢迎信息。
<button>Change user</button>
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
}
myButton.onclick = function() {
setUserName();
}
现在当你第一次访问网页是，它将询问你的用户名然后向你发出一段有个性的信息。你可以在任何时候通过点击按钮来改变 name 。告诉你一个额外的福利，因为 name 是存放在 localStorage 里的，它会持续到网站关闭，所以这段个性化的信息在你重新打开浏览器时将仍然在这！
5.JavaScript 在你的页面上做什么？
在这我们会开始确实地查看一些代码，而在这样做的同时，探索当你在你的页面上运行 JavaScript 的时候实际发生了什么。
让我们简单地回顾当你在浏览器中读取一个网页时发生什么（在文章 How CSS works 中第一次谈及到）。 当你在浏览器中读取一个网页，你在一个实行环境（浏览器标签）中运行你的代码（HTML, CSS 和 JavaScript）。这就像是一个工厂，获取原材料（代码）然后出产一个产品（网页）。
在 HTML 和 CSS 已经被集合和组装成一个网页后，浏览器的 JavaScript 引擎执行 JavaScript。这保证了当 JavaScript 开始运行时，网页的结构和样式已经在该出现的地方了。
这是一个好事情，正如 JavaScript 的普遍用处是通过 DOM API（如之前提及的那样）动态地修改 HTML 和 CSS 来更新用户交界面。如果 JavaScript 在 HTML 和 CSS 组装成一个浏览器之前加载运行，那么会发生错误。
6.JavaScript 运行顺序
当浏览器遇到一块 JavaScript 代码时，它通常会按顺序运行这代码块，从上往下。这意味着你需要注意你放置代码的顺序。举个例子，让我们回到我们在第一个例子中看到的 JavaScript 代码块：
var para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
var name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}
在这里我们正选定一个文本段落 (line 1)，然后给它附上一个事件监听器 (line 3) 使得当这个段落被点击时，updateName() 代码块 (lines 5–8) 会被运行。updateName() 代码块（这类可以重复使用的代码块被称为“函数”）向用户请求一个新的名字，然后把这个名字插入到段落中以更新显示。
如果你互换了代码里最初两行的顺序，它将不会工作——取而代之的是，你会在浏览器的开发者控制台中得到一个错误——TypeError: para is undefined [类型错误：para没有被定义]。这意味着 para 对象还不存在，所以我们不能为它增添一个事件监听器。
7.Playing with browser objects
Let's play with some browser objects a bit.
First of all open your program up in a browser.
Next, open your browser developer tools, and make sure the JavaScript console tab is open.
Type in a Objectname and the console will show you that the variable contains an element. You'll also notice that the console autocompletes object names that exist inside the execution environment, including your variables!
Now type in the following: Objectname.value = 'Hello';
The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed what that is!
Now try typing in another Objectname and pressing return. The console will show you that the variable contains element.
Now try entering the following line: anotherObjectname.value
The browser will return undefined, because value doesn't exist on paragraphs.
To change the text inside a paragraph, you need the [textContent
](https://developer.mozilla.org/zh CN/docs/Web/API/Node/textContent) property instead. Try this:anotherObjectname.textContent = 'Where is my paragraph?';
Now for some fun stuff. Try entering the below lines, one by one: Objectname.style.backgroundColor = 'yellow';Objectname.style.fontSize = '200%';Objectname.style.padding = '10px';Objectname.style.boxShadow = '3px 3px 6px black';
页面上的每个元素都有一个style属性，它本身包含一个对象，其属性包含应用于该元素的所有内联CSS样式。 这允许我们使用JavaScript在元素上动态设置新的CSS样式。
