网页开发入门｜19 流程控制

在上一节课，我们了解了如何在网页中加入表单组建，使得用户可以在页面输入内容，获得更加完整的交互体验。

用户的输入未必总是合理的。

比如在注册用户帐号时，需要用户输入登录密码。但因为密码输入框的字符会以密文显示，很难保证用户确实输入了自己预想的内容。

因此，绝大部分的网站都会要求用户再次输入密码进行确认，如果两次输入内容不一样，则说明用户的输入出现了问题，应该要求用户重新输入，而不是继续提交表单。

如何判断用户的两次输入是否一致，并且在完成判断后执行不同的动作呢？

判断语句

判断语句是在JS脚本中实现对两个值进行比较的运算。

比如：

// 运算结果为true
3 < 5
// 运算结果为false
4 > 8

与赋值号=相似，这里的>、<也不同于数学中的“大于”或“小于”的概念，不意味着左边一定“大于”或“小于”右边，而是一次判断动作，比较两边值的大小，并返回是否与之相符的结果，如果相符则返回正确true，否则返回错误false。

true和false是一种专有的数据类型，称作布尔类型，所以也可以将其赋值给常量或者变量。

const t = true
const f = false
let result1 = 3 < 5
let result2 = 4 > 8

除了>、<之外，还有其它一些常用的判断运算符号：

• >=大于等于
• <=小于等于
• ===等于
• !==不等于

布尔类型之间也可以进行逻辑运算：

• &&与运算，即两个布尔值都为true，结果为true，否则为false；
• ||或运算，即两个布尔值都为false，结果为false，否则为true；
• !非运算，对一个布尔值取反，即将true变为false，将false变为true

const t = true
const f = false
// 结果为false
const and = t && f
// 结果为true
const or = t || f
// 结果为false
const not = !t

|符号在日常生活中不太常用，它通常位于键盘回车键的上方。

如果想要比较用户的两个次输入之间的内容是否相同，就可以使用判断语句：

<label>password</label>
<input id="input1">
<label>confirm password</label>
<input id="input2">
<button onclick="testSame()">the same?</button>

// 定义一个函数方便从input元素中获取用户输入
function getValueFromInput(id) {
    const dom = document.getElementById(id)
    const value = dom.value
    return value
}

// 判断两个输入是否相同
function testSame() {
    const input1 = getValueFromInput('input1')
    const input2 = getValueFromInput('input2')
    const result = input1 === input2
    alert(result)
}

流程控制

完成了判断，接下来要根据判断的结果执行不同的动作，这也称作流程控制。

我们知道脚本在正常的情况下是从上向下依次运行的，只有在遇到函数时会跳转至函数定义的位置，运行函数体内部的脚本，在函数运行结束后还要返回原来的位置继续向下执行。

这样的流程称作顺序结构。

顺序结构很有用，就像在听音乐的时候，我们可以把多首歌放到播放列表中，依次欣赏。

突然，听到了一首特别喜欢的歌曲，想反复收听。也就是说，这首歌曲播放结束后，不要切换到下一曲，而是进行单曲循环。

这样的流程被称为“循环结构”。

循环结构

在js中实现循环结构很简单。

比如，下面这段代码中，我们让一个初始值为0的变量x的值+1；

// 为x设定一个初始的值
let x = 0;
// 让x的值+1
x = x + 1;

通过循环结构，让+1这个动作反复运行。

首先，我们需要使用{}把需要反复运行的脚本包裹起来：

// 为x设定一个初始的值
let x = 0;
{
    // 让x的值+1
    x = x + 1;
}

然后，我们需要使用do关键字，通知浏览器{}中的这段脚本，需要被反复运行：

// 为x设定一个初始的值
let x = 0;
do {
    // 让x的值+1
    x = x + 1;
}

循环一旦开始，浏览器就会反复运行这段代码，周而复始，直到地老天荒。这通常不是我们想要的效果，所以最后也是最关键的，需要使用while关键字和一个判断语句，告诉浏览器是否还要继续循环下去。

比如当x的值不大于100时，即x<100为true，需要继续进行循环。

// 为x设定一个初始的值
let x = 0;
do {
    // 让x的值+1
    x = x + 1;
} while(x < 100)

上面这段代码中，x=x+1将会被反复运行100次，直到x的值被增加到100时，x<100为false，循环结束。

通常在一段循环中，都会一个类似x的变量，随着循环的进行值一直会的改变，用于在合适的时候退出循环结构。这样的变量被称作标记flag，定义它的动作，也被形象的称作“立flag”。

你所立flag最后都会被改变，这就是网络梗“立flag”的来历。

flag很必要，但除了维持循环，通常没有功能上作用，所以为了方便阅读，可以使用for关键字将与flag相关的代码写在一起：

// for循环中的三句话分别是：
// flag是谁，flag倒下的条件，每次循环flag如何变化
for(let x = 0; x < 100; x = x + 1) {
    // do something...
}

选择结构

除了单曲循环，还有的时候也许我们会想切歌，即跳过一段脚本。

如果有一段脚本每次都要跳过，其实可以不写的，所以是否要跳过某段脚本前，通常需要进行一次判断。判断结果为true则执行，否则则跳过。

有选择的执行，这样的流程被称作选择结构。

比如，我们希望实现对变量y求绝对值的效果，即如果y的值小于0，则让y设定为相反数：

let y = -100
y = 0 - y

首先，同样需要使用{}来包裹需要选择执行的脚本：

let y = -100;
{
    y = 0 - y;
}

接下来使用if关键字，表示是否执行的该脚本的条件：

let y = -100;
if (y < 0) {
    y = 0 - y;
}

最终因为y的初始值为-100，于是取相反数的语句被执行，最终y值为100。

加入页面

我们可以在页面中加入合适的流程控制，以在用户提供了不同的输入时，给到不同的响应。

例如，对用户的两次输入进行判断：

<label>password</label>
<input id="input1">
<label>confirm password</label>
<input id="input2">
<button onclick="submit()">submit</button>

function submit() {
    const input1 = getValueFromInput('input1')
    const input2 = getValueFromInput('input2')
    // 判断两个输入是否相同
    // 如果相同  
    if(input1 === input2) {
      alert("Confirm successfully!")
    }
    // 如果不同 
    if(input1 !== input2) {
       alert("Failed! Check your inputs!")
    }
}

我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。