JavaScript基础

JavaScript是一门为你的网站添加交互功能的编程语言。（例如：游戏，响应按下或者以表单输入的数据，动态样式，动画等）。本文可以帮助您开始使用这种令人兴奋的语言，并给你一个什么是可能的想法。

什么是JavaScript？

---

JavaScript（缩写：JS）是一门成熟的动态编程语言，应用于HTML文档时，可以在网站上提供动态交互性。它是Mozilla项目联合创始人，Mozilla基金会和Mozilla公司的Brendan Eich发明的。

JavaScript是非常通用的。你可以从简单做起，比如轮播、相册，浮动布局和按钮点击事件。随着你学习的深入，你可以创建游戏、2d和3d动画、数据库驱动的综合应用程序，以及更多！

JavaScript本身是非常简洁却非常灵活的。开发者们编写了非常多的工具补充JavaScript语言功能。使得花最小的代价获得大量额外功能。这些功能包括：

• 应用编程接口 (APIs) 。内置于浏览器中提供像动态编写 HTML 和 CSS ，抓取操控用户摄像头的数据流和操作3D图像和音频样品。
• 第三方 APIs 允许开发者将其他公司网站如 Twitter 或 Facebook 与自己的网站合并功能。
• 你可以将第三方框架和库应用于你的 HTML ，以快速构建网站和应用。

一个 "hello world"示例

---

上面的内容听起来非常激动人心，而且也应该如此——JavaScript是最让人激动的Web科技之一，而且你对它掌握的越多，你的网页将进入一个更有创造力和更加强大的层次。

然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂，所以你需要一步一步谨慎地跟随我们。首先，我们将向你展示怎么添加一些基本的 JavaScript 脚本到你的页面中来创造一个 "hello world"示例（编程世界的标准示例）。

1. 首先，去到你的测试目录，创建一个“scripts”文件夹（没有引号）。然后在新建的scripts文件夹下创建一个新的main.js文件。
2. 接下来，打开你的index.html文件，在</body> 闭合标签之前输入这一行代码：

   <script src="scripts/main.js"></script>

3. 这基本上与引入 CSS 的<link>元素功能相同——它将 JavaScript 引入了页面，所以它将影响 HTML（包括 CSS 和其他页面上的任何内容）。 
4. 现在将下面的代码添加到main.js文件中：

   var myHeading = document.querySelector('h1');
   myHeading.innerHTML = 'Hello world!';

5. 最后，确保 HTML 和 JavaScript 文件已经保存好，然后用浏览器打开index.html。你应该看到如下内容：

发生了什么？

你的标题通过JavaScript被更改为了"Hello world!"。我们首先使用一个函数querySelector()来获取标题这个对象，然后将其储存在一个叫myHeading的变量中。这与我们 CSS 中的选择符非常相像。如果你想对某个元素进行操作，首先你得先选择它。

在那之后，我们将myHeading的属性innerHTML（代表这个标题的内容）赋予了"Hello world!"这个值。

语言基础速览

---

来让我们解释一下 JavaScript 这门语言的基本特性，以便让你们更好地了解它是怎么运作的。更棒的是，这些特性对编程语言来说很常见。如果你能够了解这些基础，你应该能更好地在编程的世界里徜徉！

变量(Variables)

Variables 是你存储数据的容器。要声明一个变量你需要使用关键字var，然后输入任何你想要的名称：

var myVariable;

定义一个变量之后，你可以赋予它一个值：

myVariable = 'Bob';

你可以通过变量名称读取变量：

myVariable;

你也可以将这些操作写在一行：

var myVariable = 'Bob';

在给变量赋值之后，你可以改变变量的值：

var myVariable = 'Bob';
myVariable = 'Steve';

注意变量有不同的 数据类型 ：

那么为什么我们需要变量呢？好吧，在编程时要做任何有趣的事我们必须用到变量。如果值没有改变，那么你将无法动态地做任何事，就像个性化一个祝福短信或是改变在图片库里展示的图片。

注释

你可以在 JavaScript 中添加注释，就像你在 CSS 中做过的一样。

/*
Everything in between is a comment.
*/

如果你的注释只有一行，我们经常将它们更简单地放在两个斜杠之后，就像这样：

// This is a comment

运算符

 operator 运算符是一个根据两个值(或变量)做出结果的代数符号。在下面的表里你可以看到一些最简单的运算符，后面的示例你可以在浏览器控制台里尝试一下。

还有很多运算符供我们探索，不过暂时我们只需要这么多。点击 表达式和运算符 查看完整列表。

语句

语句是能够让你测试一个表达式是否返回 true 然后根据结果运行不同的代码的结构。最常用的语句形式是if ... else。下面是一个例子：

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

if ( ... )里面的表达式就是测试 — 这里使用了运算符（上面所提到的）来比较变量iceCream与字符串chocolate是否相等。 如果返回true，运行前面一块的代码。如果返回 false，跳过第一段直接运行else之后的代码。

函数

Functions 是一种封装你想重复使用的功能的方法，这样你就可以在任何时候想使用其中的功能就通过函数名称来调用而不用老是重复写下整段代码。你在上面已经见过一些函数了，比如：

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

这些函数是浏览器内置的，你可以在任何时候使用。

如果你看到一些东西长得像变量名但是有括号 —()— 在后面，这可能就是一个函数。函数通常包括 arguments — 一些必要的参数。它们在括号内部, 如果有一个以上参数则使用逗号分开。

比如，alert()函数在浏览器窗口内弹出一个警告框，但是我们需要给参数传入一个字符串以告诉函数应该在警告框里写什么。

好消息是你可以定义你自己的函数 — 在下一个例子里我们会写一个简单的需要两个参数来做乘法运算的函数。

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

尝试在控制台运行这个函数，然后自己尝试几次不同的参数，比如：

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

事件

在网页上创建真正的交互，你需要使用事件 — 事件是能够捕捉浏览器操作并且允许你运行代码进行响应的代码结构。最明显的事件是 点击事件，在鼠标点击什么的时候被浏览器唤醒。为了演示这个操作，尝试将下面的代码输入到控制台，然后在当前页面点击：

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

我们有许多方法来将一个事件与元素绑定。在这里我们选择了 HTML 元素然后将onclick属性设置成包含单击时我们想要运行的代码的匿名函数。

注意到

document.querySelector('html').onclick = function() {};

相当于

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

只是更加简洁。

改善示例网页

---

现在我们已经讲述了一点 JavaScript 的基础了，让我们添加一些更酷的特性到示例网页里来看看我们能做什么。

添加一个图像转换器

这一部分我们将添加另一个图片到我们的站点，并且添加简单的 JavaScript 使得单击图片时转换图片。

1. 首先，找到另一个你想用来装饰你的网页的图片。确保它与你第一张图片尺寸相同，或者尽可能相似。
2. 将图片保存在images文件夹。
3. 重命名图片为 firefox2.png

4. 打开main.js文件，输入下面的 JavaScript 代码（如果你的 hello world 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');
       }
   }

5. 保存所有文件然后用浏览器打开index.html。选择当你点击图片时，它应该会转换成另一张图片！

在这里，我们将 image 元素的引用存放在myImage变量里。接下来，我们将这个变量的onclick的事件与一个匿名函数绑定。选择，每次图片被点击时：

1. 我们找到 image 元素的src属性
2. 我们使用一个语句来判断src的值是否等于原始图像的路径：
   1. 如果是，我们将src的值改为第二张图片的路径，强制在<image>内读取另一张图片。
   2. 如果不是（意味着它肯定已经被更改过），我们把src的值重新设置为原始图片的路径，将它返回到原先的样子。

添加个性化的欢迎信息

接下来我们会添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化的欢迎信息。欢迎信息会持续到用户离开网页。我们还会添加一个选项来在必要的时候改变用户并且改变欢迎信息。

1. 在index.html里，在<script>元素前添加下一行代码：

   <button>Change user</button>

2. 在main.js里，在文件底部添加下面的代码，必须一字不漏 — 这会抓取 按钮 和 标题 的引用并将其存放在变量里：

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

3. 现在添加下面的函数来设置个性化内容——这暂时不会起任何作用，不过我们后面会用到：

   function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.innerHTML = 'Mozilla is cool, ' + myName;
   }

   函数包含了一个prompt()函数， 会弹出一个对话框， 有一点像alert()只不过prompt()需要用户输入数据，而且在用户点击 OK 后将数据存储在变量里。在这里，我们要求用户输入姓名。接下来，我们调用一个叫localStorage的API，它允许我们将数据存储在浏览器里以供后续调用。我们使用 localStorage 的setItem()函数来创建并将数据存储在'name'参数里，然后将其值设置为包含用户输入的姓名的myName变量。 最后，我们将标题的innerHTML属性设置成加上用户姓名的字符串。
4. 接下来，将if ... else块添加进去— 我们将这称作初始化代码，因为它在初次读取时重置了应用程序：

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   这段代码首先用一个非运算符（逻辑非）来检查name数据是否存在。如果不存在，setUserName()函数就会运行来创建它。如果存在（比如用户在之前创建过）我们通过 getItem()调用存储过的 name 然后将innerHTML设置为加上用户姓名的字符串，就像我们在setUserName()里做的一样。
5. 最后，将下面的onclick事件处理器绑定到 按钮 上，这样当我们点击时，setUserName()函数就会运行。这允许用户在任何想要的时候通过点击按钮来设置新的 name 。

   myButton.onclick = function() {
     setUserName();
   }
   

现在当你第一次访问网页时，它将询问你的用户名然后向你发出一段有个性的信息。你可以在任何时候通过点击按钮来改变 name 。告诉你一个额外的福利，因为 name 是存放在 localStorage 里的，它会持续到网页关闭，所以这段个性化的信息在你重新打开浏览器时将仍然在这！

结论

---

如果你一直跟随我们的指导，那么到最后你应该得到如下的一个页面（你也可以在 这里 查看我们的版本）：

如果你有遇到问题，你可以将你的代码与我们GitHub上的 代码 做对比。

在这里，我们只提到了非常有限的 HTML 知识，要查看更多，请访问我们的 JavaScript指南。