Learn web development

JavaScript基础

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

什么是JavaScript?

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

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

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

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

因为这篇文章只是JavaScript的简介, 这个阶段,我们不打算过于详细的介绍JavaScript语言以及前面提及的工具。你可以之后在 JavaScript learning area和MDN的余下课程上学习更多的细节。

下面我们将介绍语言的一些核心部分,你也可以做一些关于浏览器API的练习。Have fun!

一个 “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 。你应该看到如下内容:

提示:我们将 <script> 元素放在 HTML 文件底部的原因是,浏览器按照代码在文件中的顺序解析 HTML。如果 JavaScript在最先面被加载,HTML还未加载,JavaScript将无法作用于HTML,所以JavaScript无效,如果 JavaScript 代码出现问题则 HTML 不会被加载。所以将 JavaScript 代码放在底部是最好的选择。

发生了什么?

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

在那之后,我们将 myHeading 的属性 innerHTML (代表这个标题的内容)赋予了“Hello world!”这个值。

语言基础速览

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

注意:在这篇文章的学习中,将示例代码输入到你的浏览器的控制台里看看会发生什么。要查看更多关于浏览器控制台的信息,点击 探索浏览器控制台工具

变量(Variables)

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

var myVariable;

提示:行末的分号表示语句结束,不过这个分号只有在单行内需要分割语句时才是必须的。然而,一些人认为在每个语句后面加分号是一种好的风格。这里为你提供了更多关于是否应该加分号的规则 — 查看 Your Guide to Semicolons in JavaScript 获取更多细节。

提示:你几乎可以以任何名称来命名一个变量,不过我们有一些限制(点击这里查看 变量命名规则 。) 如果你不确定,你可以 验证你的变量名查看是否有效.

提示:JavaScript 是对大小写敏感的——myVariable 与  myvariable 是不同的。如果你的代码出现问题了,查看一下大小写有没有错误!

定义一个变量之后,你可以赋予它一个值:

myVariable = 'Bob';

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

var myVariable = 'Bob';

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

myVariable;

在给变量赋值之后,你可以改变变量的值:

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

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

变量 解释 示例
String 字符串,一段文本。 要指示变量是字符串,你应该将它们用引号包裹起来。 var myVariable = 'Bob';
Number 数字,一个数字。不用引号包围。 var myVariable = 10;
Boolean 布尔型,一个 True/False (真 / 假)值。 true/false 是 JS 里的特殊关键字,不需要引号。 var myVariable = true;
Array 数组,一种允许你存储多个值在一个引用里的结构。 var myVariable = [1,'Bob','Steve',10];
调用数组的元素只需: myVariable[0], myVariable[1], 等等.
Object 对象,基本上 JavaScript 里的任何东西都是对象,而且都可以被储存在变量里。将这个记在脑子里。 var myVariable = document.querySelector('h1');
上面所有示例都是对象。

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

注释

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

/*
Everything in between is a comment.
*/

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

// This is a comment

运算符

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

运算符 解释 符号 示例
加/连接 用来相加两个数字,或者连接两个字符串。 + 6 + 9;
"Hello " + "world!";
减、乘、除 这些运算符操作将与你期望它们在基础数学中所做的一样。 -, *, / 9 - 3;
8 * 2; // JS中的乘是一个"*"号;
9 / 3;
赋值运算符 你之前已经见过这个符号了:它将一个值赋给一个变量 = var myVariable = 'Bob';
相等 它将测试两个值是否相等,而且会返回一个 true/false (布尔型)值。 === var myVariable = 3;
myVariable === 4;
非,不等 经常与相等运算一起使用,非运算符在JS中表示逻辑非——它也返回一个布尔值。 !, !==

原本的值是 true ,但是返回了 false 因为之后我们做了非运算:

var myVariable = 3;
!myVariable === 3;

这里我们测试了"我的 myVariable 是否等于 3". 这里返回了 false, 因为它等于 3.

var myVariable = 3;
myVariable !== 3;

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

提示:计算时如果混合几种数据类型可能导致奇怪的结果,所以请谨慎地正确地引用你的变量,然后得出你期望的结果。比如输入 "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...');
}

 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);

提示:return 语句告诉浏览器返回 result 变量以便使用。这是很有必要的,因为函数内定义的变量只能在函数内使用。这叫做作用域 scoping (详见 变量作用域)

事件

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

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指南

文档标签和贡献者