JavaScript

快速入门

JavaScript 基础

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.jsopen in new window、 Apache CouchDBopen in new window 和 Adobe Acrobatopen in new window。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript 的标准是 ECMAScript 。截至 2012 年，所有的现代浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日，ECMA国际组织open in new window发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6。自此，ECMAScript 每年发布一次新标准。本文档目前覆盖了最新 ECMAScript 的草案，也就是 ECMAScript2020open in new window。

JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。本文介绍了 JavaScript 的精彩之处和主要用途。

JavaScript 到底是什么？

JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

  • 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。
  • 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
  • 第三方框架和库 —— 用来快速构建网站和应用。

“Hello World!”示例

读到这里你一定很激动，诚然 —— JavaScript 是最振奋人心的 Web 技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。

然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个 “Hello world!” 示例。

  1. 首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。
  2. 下一步，在 index.html 文件</body> 标签前的新行添加以下代码。
<script src="scripts/main.js" defer></script>
  1. 与 CSS 的 <link> 元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）：
  2. 现在将以下代码添加到 main.js 文件中：
let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
  1. 最后，保存 HTML 和 JavaScript 文件，用浏览器打开 index.html。可以看到如下内容：
<h1>Hello world!</h1>

效果：

Hello world!

注意

注：我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

JavaScript 快速入门

我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。

变量（Variable）

变量 (en-US) 是存储值的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

let myVariable;

注意

  • 行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。
  • 几乎任何内容都可以作为变量名，但还是有一些限制（请参阅 变量命名规则）。如果你不确定，还可以 验证变量名open in new window 是否有效。
  • JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！
  • 想要了解更多关于 var 和 let 的不同点，可以参阅 var 与 let 的区别。

变量定义后可以进行赋值：

myVariable = '李雷';

也可以将定义、赋值操作写在同一行：

let myVariable = '李雷';

可以直接通过变量名取得变量的值：

myVariable;

变量在赋值后是可以更改的：

let myVariable = '李雷';
myVariable = '韩梅梅';

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

变量解释示例
String字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。let myVariable = '李雷';
Number数字：无需引号。let myVariable = 10;
Boolean布尔值（真 / 假）： true/false 是 JS 里的特殊关键字，无需引号。let myVariable = true;
Array数组：用于在单一引用中存储多个值的结构。let myVariable = [1, '李雷', '韩梅梅', 10];元素引用方法：myVariable[0], myVariable[1] ……
Object对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。let myVariable = document.querySelector('h1');以及上面所有示例都是对象。

那么变量有什么用呢？我们说，编程时它们无所不在。如果值无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。

注释

类似于 CSS，JavaScript 中可以添加注释。

/*
这里的所有内容
都是注释。
*/

如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：

// 这是一条注释。

运算符

运算符是一类数学符号，可以根据值（或变量）产生结果，包括一元运算符、二元运算符、三元运算符。

运算符解释符号示例
加将两个数字相加，或拼接两个字符串。+6 + 9;
"Hello " + "world!";
减、乘、除这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。-, *, /9 - 3;
8 * 2; //乘法在JS中是一个星号
9 / 3;
赋值运算符为变量赋值（你之前已经见过这个符号了）=let myVariable = '李雷';
等于测试两个值是否相等，并返回一个 true/false （布尔）值。===let myVariable = 3;
myVariable === 4; // false
不等于和等于运算符相反，测试两个值是否不相等，并返回一个 true/false （布尔）值。!==let myVariable = 3;
myVariable !== 3; // false
取非返回逻辑相反的值，比如当前值为真，则返回 false。!原式为真，但经取非后值为 false：
let myVariable = 3;
!(myVariable === 3); // false

运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅 表达式和运算符。

注意

不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 "35" + "25"，为什么不能得到 60？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。

条件语句

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 if ... else。下面是一个示例：

let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('我最喜欢巧克力冰激淋了。');
} else {
  alert('但是巧克力才是我的最爱呀……');
}

if ( ... ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 iceCream 与字符串 'chocolate' 是否相等。 如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。

函数（Function）

函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：

let myVariable = document.querySelector('h1');

alert('hello!');

document.querySelector 和 alert 是浏览器内置的函数，随时可用。

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。

比如， alert() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。

好消息是：人人都能定义自己的函数。下面的示例是为两个参数进行乘法运算的函数：

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

尝试在控制台运行这个函数，不妨多试几组参数，比如：

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

注意

return 语句告诉浏览器当前函数返回 result 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的 作用域。（详见 变量作用域。）

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

将事件与元素绑定有许多方法。在这里选用了 <html> 元素，把一个匿名函数（就是没有命名的函数，这里的匿名函数包含单击鼠标时要运行的代码）赋值给了 html 的 onclick 属性。

请注意：

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

等价于

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

只是前者更简洁。

本网站提供页面仅供学习JavaScript语法，小鱼资料库