【九层之台】Web开发教程：4. JS

4. JS

开始之前

在正式开始JS的学习之前，我希望各位能够通过具体的实践对前几章的应用进行一次复习。从理论上讲，使用HTML和CSS技术已经可以做出任何想做的精美的网页了。你可以尝试给自己做一个好看的个人主页，或者去“临摹”一些做的比较好看的网页。当你对构建一个网页有了一定的自信以后，就可以进入本章的学习了。

JS是Javascript的缩写，是一门脚本编程语言，也是传说中“属于Web时代的语言”。我们通过HTML和CSS代码做出的网页，跟“应用”两个字是不沾边的，它只是一个显示信息的网站而已。如何把网页变成网页应用呢，这就需要JS这门正经的编程语言出场了。

本章的内容可能对完全没有编程基础的同学有些困难，毕竟JS是一门真正的编程语言，我也不会从零基础的编程入门开始讲解。如果有不懂的，可以多多尝试或者寻求网上编程入门教程的帮助，也可以看一看W3School和菜鸟教程上关于JS的教程。

如今，JS代码可以作用于几乎所有地方，但本章所讲的JS仅仅是JS在浏览器上的冰山一角，也仅仅是把大家带进JS庞大的生态系统之中而已。我不是很推荐大家去学习纯净的原生JS，因为本教程后面的章节会讲很多关于网页应用的更先进的JS库，所以本章只是带大家简单了解以下JS的基本语法。

控制台

打开浏览器的调试控制台，在元素控制台标签的右侧，点击控制台标签，就可以看到我们浏览器的脚本控制台了。

试一试，输入这行代码并敲击回车键：

console.log("Hello!");

在JS的代码中，console.log()函数用于输出内容到控制台。就网页来说，想要显示信息还有以下两种方法：

document.write("Hello");
alert("Hello");

第一个是在网页页面上打印文字，第二个是弹框。

在网页JS代码的调试过程中，我们通常使用输出到控制台的方式来了解脚本运行当中的一些过程数据。控制台可以自动组织各种对象、数组的显示形式，非常方便。

页面引入

在HTML代码中，可以通过script元素直接写入JS代码。它可以出现在body元素的任何位置。你可以尝试在body元素中插入以下代码：

<script>
  alert("JS is here!");
script>

但是，这样做通常会影响HTML代码的整洁，因此，我们可以在index.html文件旁边新建文件index.js并写入alert("here!");。
然后在body元素中写入

<script type="text/javascript" src="./index.js">script> 

就可以引入外部的JS文件啦！

对象

在JS中，所有数据内容都是“对象”，包括函数、变量等。最基础的对象形如：

{
  key: "value",
  key2: 100
}

对象内部包含若干个不重名的变量名，对应有各种类型的值。注意，JS是一种弱类型语言，对于数字、字符串等类型可以自动转换。对象内的值也可以是另一个对象，因此对象可以嵌套。

在声明变量的时候，我们可以用var或者let，它们之间有一些差异，请自行学习。在声明常量的时候，我们可以使用const关键字。例如：

let myObject = {
  key: "value"
}

注意到，变量名myObject使用驼峰命名法（除了第一个单词以外，各个单词首字母大写）。

通过.来访问对象的成员，例如myObject.key的值就是value。

还有一个特殊的对象：数组。数组中的数据包含在中括号中，并且通过下标引用。例如：

let myArray = ["value1", "value2", 100];
console.log(myArray[0]);
console.log(myArray);

在对象内，this指代的是对象本身。通过this可以在对象内访问对象的其他变量和函数。

各位可以在控制台上摸索一下。

控制结构

对于一门编程语言，核心就在控制结构上。我们主要用到下面几种控制结构。

分支结构

和C/C++一样，使用if和else结构，例如：

if (12 > 10) {
  console.log("12 > 10");
} else {
  console.log("12 <= 10");
}

注意，在条件表达式里面，不同类型的变量会自动转换类型比较。如果要强制全等（包括类型），需要使用===运算符。

循环结构

和C/C++一样，使用for，例如：

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

同时，在JS中，循环语句还可以遍历数组和对象。有以下两种使用方式：

• for (let i in a)在循环内部，变量i遍历对象a的所有键（key）。对于数组来说，变量i遍历数组a的所有下标。
• for (let i of a)在循环内部，变量i遍历对象a的所有值（value）。对于数组来说，就是遍历数组中所有的值。

例子：

let myArray = ["value1", "value2", 100];
for (let i of myArray) {
  console.log(i);
}

函数

通常来说，JS的函数定义使用function关键字：

function myFunction(p1, p2) {
  console.log(p1 + p2);
}

请注意，函数的参数表不需要声明变量类型。

这种函数定义方法等效于把函数赋值给一个变量（因为函数也是对象）：

let myFunction = function(p1, p2) {
  console.log(p1 + p2);
}

JS还支持一种特殊的函数定义方法，使用=>的箭头函数：

(p1, p2) => {
  console.log(p1 + p2);
}

箭头函数的特点是，在函数内部this指向的是函数定义的时候所指向的this，而不是函数调用的时候的this。

异步

（这部分比较复杂）

JS最大的特性就是它的异步处理了。所谓异步，是指逻辑处理并不排成一条线，而是多个任务同时处理。例如，一个函数在等待网络请求响应的时候，其他函数还能够正常工作。但是，如何去调度异步逻辑呢？比方说，如果网络请求被响应了，需要进入下一步了，怎么引导脚本语言进入下一个函数呢？

JS大致有三种异步处理方法，按照出现时间排序是：

• callback回调，即给需要等待结果的函数传入下一步的函数作为callback参数，当等待完成以后，调用这个callback函数。问题：很多个函数回调会导致“回调地狱”，代码会变得极其复杂，很难开发和维护。
• promise结构，是JS标准ES6提出的新的解决方案。通过.then()调用下一个函数和.catch()处理错误的方式控制逻辑链。（如果想要深入学习请自行百度）
• async/await结构，是JS标准ES7提出的最新的异步解决方案，它对promise结构进行了封装。对于需要控制异步逻辑的函数，在function前面加一个关键字async，即可在函数内部使用await关键字等待另一个函数的返回。

举个例子：

async function goodFunction() {
  await someFunction();
  await otherFunction();
  console.log("All done");
}

在这个例子中，如果someFunction和otherFunction都是需要等待的函数，则会等待它们完成以后，才会输出All done到控制台。如果不使用async/await结构，则会让两个需要等待的函数同时运行，同时执行输出语句到控制台。

操作浏览器

URL

可以通过设置变量window.location.href来设置当前访问的URL，从而实现跳转。当然也可以通过这个变量来获取当前访问的URL。

存储

浏览器提供多种存储方式，都可以在浏览器控制台的应用标签上查看：

• 内存：直接创建和操作变量。
• sessionStorage，页面关闭就会被清除的临时存储，只能存储字符串，可以通过直接操作window.sessionStorage对象的方式读写，也有几个操作函数。
• localStorage，页面关闭也不会清除的缓存，只能存储字符串，可以通过直接操作window.localStorage对象的方式读写。也有操作函数。
• indexedDB，储存在浏览器上的数据库，使用方法非常复杂，这里不做介绍了。

例子：

window.localStorage["key"] = "value";
console.log(window.localStorage["key"]);
// create a reference
let SS = window.sessionStorage;
SS["key"] = "another value";
console.log(SS["key"]);
SS.removeItem("key"); // remove

DOM操作

原生JS实现交互的原理是，通过操作document对象来操作网页的DOM，从而控制网页的显示内容。例如通过document.getElementById()函数来选定具有特定id属性的HTML元素进行操作。

原生JS对网页的操作比较繁琐，本篇教程不予介绍。

JS库

终于到了激动人心的时刻了。鉴于JS操作DOM的繁琐和复杂，在Web发展的这么多年里，有一大批对原生JS进行封装，从而方便我们使用JS实现网页交互的JS库，例如著名的Jquery，就是一个比较轻量级的JS库，通过利用与CSS选择器一样的语法操作网页上的元素。你可以自行学习它们的使用方法。

对于一些比较大型的网页，我们通常会使用一些比较体系化的前端JS框架。JS框架往往从根本上改变了代码的运行原理，可以说是在原生JS上添加了一层逻辑，让你可以通过比较简单的方式实现多样化的交互。当下流行的前端JS框架有：

• Angularjs
• Reactjs
• Vuejs

本篇教程将循着笔者的技术栈，向大家介绍Vuejs的使用方法。