【四周零基础入门编程】编程第一课：我们的第一个程序

编程现在已经变得越来越普及，不止是程序员需要用到编程技能，工作中的办公软件、大学里的课程和大作业等等场景未来都会随着编程技能的普及而变得越来越依赖基本的编程能力。更不用说编程工作已经是现在对于年轻人来说需求最大待遇最好的行业了，编程在大城市已经变得随处可见，就像二十年前刚刚兴起、现在已经变成办公室工作标配的电脑使用能力一样。

编程并不难，但是大部分的技术资料都是已经会编程的人看起来轻松，但是不会编程的人完全看不懂，这就成了先有鸡还是先有蛋的矛盾。

接下来的一系列文章会从零基础学习者的角度出发，帮助大家从一个完全不知道程序是什么的零基础开始起步，掌握编程的方法和思维。做到不仅仅是“学过”编程，而是能真正地写出自己想要的程序。在这一系列文章的阅读过程中，每一组文章都会带领大家写出各种不同类型的小项目，甚至要不了多久我们就可以写出自己的微信小程序在手机上运行了。

欢迎对编程有兴趣的读者加入微信群一起分享编程学习过程中得到的收获和遇到的问题，微信号：latiao-java，也可以加入我的免费知识星球向我提问：https://t.zsxq.com/Nrz7uNZ

我们的第一个程序

编程其实很简单，我们在学习编程的第一个五分钟里就可以完成我们的第一个程序。

首先，让我们打开一个浏览器，也就是我们上网页用的工具，可以是任何的浏览器，比如360浏览器、搜狗浏览器等等。然后我们需要打开浏览器的开发者工具，在浏览器里按F12就可以打开了。

下面的图中是360极速浏览器打开“开发者工具”的地方，其他浏览器打开的位置也差不多。

然后我们在最上面一排找到"Console"，点击之后就会出现下面的界面了。

然后我们输入我们的第一个程序——alert('Hello world')，点击回车，网页上就跳出了一个写着“Hello world”的对话框。这就是我们写的第一个程序了！

接下来我们的所有代码都会放在浏览器的这个Console（控制台）里运行，就不再另外说明了。

程序是什么？

既然我们已经写出并运行了我们的第一个程序，那么我们就正式来聊聊“什么是程序？”。

程序就是由代码组成的很多命令，告诉计算机要做什么事情。比如我们前面输入的alert('Hello world')就是让浏览器打开一个对话框。编程和做数学题的最大区别就是：

在做数学题的时候，我们得听题目的，按题目的要求得到结果。但是在编程时，我们就翻身做了主人，由我们通过代码来告诉计算机一步一步怎么去运行。我们可以让计算机去解一个数学题，也可以让计算机运行一个游戏，或者显示一个网页。

在学习编程的过程中，这种思维方式的转变是最重要的一环。很多人学不会、写不出基本都是卡在思维方式上。

程序的核心 —— 变量

接下来我们就要继续我们的编程之旅了，我们要学的第一个技术就叫做“变量”。下面的所有代码都建议大家打到浏览器的控制台里试一试，对大家的学习一定会有所帮助。

变量在程序中用于保存一个数据，比如我们可以把我们现在口袋里现金的金额100保存到一个变量里，如果买了三块钱的饮料就可以从变量里减掉3变成97，如果又从银行领了100块那就可以在变量上加上100变成197。

在程序中我们可以这么使用变量：

// 创建变量a1
var a1;

// 把值100保存到变量a1中
a1 = 100;

// 从变量a1中减掉3
a1 = a1 - 3;

// 在变量a1上加上100
a1 = a1 + 100;

在上面的代码中，我们可以看到，每句代码后都是以;分号结尾的。这是一个需要记牢的地方：每一个程序语句都要以;英文分号结尾。

那么我们应该如何理解“变量”这个概念呢？我们可以把变量想象成一个盒子，然后我们可以把一个具体的值写在纸条上放到盒子里，并且我们还可以给每个盒子取一个唯一的名字。

比如像下面的图里就是一个名字叫a1的盒子里放了一张写着1的纸条，翻译成代码就是：

var a1;
a1 = 1;

那我们有了这样的一个放着纸条的盒子之后有什么用呢？既然盒子里有一张写着字的纸条，那么我们就可以把一些东西写到纸条上记下来，等到以后需要的时候就可以拿出来看了。

比如我们在暑假里把离暑假结束的天数存到一个名字叫“remaining”（剩余）的变量里，然后每天减一，这样我们想知道暑假还有多少天的时候就可以从这个变量里读取到对应的数字了。

我们可以这样来创建变量并把暑假的剩余天数存进去：

var remaining;
remaining= 20;

那么我们要怎样每天去给变量remaining减1呢？我们可以这么写：

remaining = remaining - 1;

这段代码可以分为三个部分：

1. 变量名remaining在等号右边的时候代表的是remaining的值，也就是盒子remaining里的纸条上的内容。在我们的例子中就是数字20。
2. 第二部分是拿remaining的值（也就是数字20）减1得到结果数字19。
3. 而当变量名remaining出现在等号左边时，代表的是remaining盒子本身，而等号就代表把右边的内容写在纸条上放到盒子remaining里。盒子remaining里原来的纸条就会被替换掉，所以在这里就是将第二步的计算结果数字19放到了变量remaining里。

简单来说，这三步就是：

1. 获取变量remaining的值，得到数字20；
2. 计算20 - 1的结果，得到数字19；
3. 将数字19保存到变量remaining中。

其他操作

除了用+号来使两个值相加，我们还可以执行下面这些操作：

1. i - 1，计算变量i减1的值
2. i * 2，计算变量i乘以2的值
3. i / 2，计算变量i除以2的值

在上面的代码中，我们都没有使用=来把值保存到变量里，这样的情况下，程序仅仅是计算出了结果，但是不会把结果保存到任何的变量里。在程序代码中，=等号被称为“赋值操作”，这个操作会把=右边的计算结果保存到=左边的变量里。

大家可以试一试，只输入i + 1是不是可以得到结果，但是变量i里保存的值并没有被改变。

字符串

我们除了可以在变量里保存数字，还可以保存中文或者英文，比如"Hello world 你好 世界"，这在程序里被叫做“字符串”。字符串在程序里需要用"英文双引号包住，两个"双引号中间的部分就是我们的字符串了。所以我们可以这样将字符串保存到变量里：str = "Hello world"。其中，=等号左边的str是一个变量。

字符串也可以执行+加操作，操作的结果就是把+加号左右两边的字符串拼在一起，比如"Hello " + "world"的结果就是"Hello world"。大家可以输入到浏览器的控制台里试一试。

猜猜我是几

我们接下来就来开发我们的第一个项目。下面是我们最后能完成的成果，大家可以拷贝到浏览器的控制台里试一试。

var n = Math.ceil(Math.random() * 100);
var input = prompt('猜猜我是几？');
for (; input != null;) {
    if (n > input) {
        alert('我大于' + input);
    } else if (n < input) {
        alert('我小于' + input);
    } else {
        alert('猜对啦！我是' + n);
        break;
    }

    input = prompt('猜猜我是几？');
}

这个程序在开始运行的时候会产生一个0到100范围内的随机数，我们可以在弹出的对话框里输入数字猜这个数字到底是多少。如果没猜中，那程序会告诉我们是大了还是小了；如果猜中了，程序就会结束。

接下来，我们就来尝试一下亲手写出这样的一个程序。

比较操作符

要完成这个程序，我们首先需要能判断对话框里填的数字和这个随机数之间的大小关系。那在代码里我们怎么去判断大小呢？

我们在控制台里输入1 < 2再按下回车试试，这段代码运行之后返回了true。这个单词的意思是“正确”，也就是说“1小于2”是对的。如果我们输入1 > 2就会返回false，这个单词的意思是“错误”，也就是说“1大于2”是错的。

这里的<小于、>大于在程序里就被叫做比较操作符，他们专门用来比较两个值之间的关系。

然后我们就需要产生要用来比较大小的那两个数字了。首先，我们要生成一个0到100的随机数，让用户来猜。“随机”的意思就是每次获取到的都是指定范围里的任意一个数字，但是每次获取的时候不一定会获取到几，就像扔骰子一样。比如第一次获取，可能拿到的是10，第二次拿到的可能是57，每次获取的时候都不知道会是多少。下面的语句就是获取一个0到100的随机数并保存到变量n里的程序代码，我们先不用了解这段代码的含义，暂时先直接复制过来用。

var n = Math.ceil(Math.random() * 100);

我们现在已经有了一个随机数n，然后要去猜它到底是几。那我们就可以把它和我们猜的数字比较一下，看n到底是大于、小于还是等于我们猜的数字。不过下面的这几段代码在大家电脑上运行的结果可能和我的结果不太一样，因为n不一定是0到100之间的哪个数字。

比如我们猜它是12，那么就可以这样来判断它是不是大于12：

n > 12;

输出的结果就像下面这样，是一个true。这就意味着n确实大于12。

我们再猜它是50：

n > 50;

哇哦，结果变成了false，这是什么意思呢？

这就说明n不是真的大于50，所以它可能小于50，也可能等于50。

那我们再来看看n是不是小于50：

n < 50;

结果是true，说明n真的小于50。现在n的范围就是大于12，小于50了。

我们再猜它是42，首先来看看n是不是大于42：

n > 42;

n不大于42，那么它就可能小于或者等于42了。我们来看看n是不是小于42：

n < 42;

哎呀，n怎么既不大于42，也不小于42呢？大家知道是为什么吗？

对，这是因为我们的n此时的值就是42，我们猜对了！

其他比较操作符

我们不仅可以用>大于和<小于来判断两个数字之间的关系，还有更多其他的比较操作符，比如像下面这些：

1. a >= b，a是否大于或等于b
2. a <= b，a是否小于或等于b
3. a == b，a等于b
4. a != b，a不等于b

注意，上面的等于判断用的是两个等号==，因为一个等号=已经被作为赋值操作了，所以判断两个值是否相等要用两个等号==。而不等于就是把第一个等号换成感叹号!。

if语句

但是每次都要判断true和false的意思感觉好烦啊，能不能让结果变成中文显示呢？

我们知道当计算n > 12时，如果n确实大于12，那么n > 12的结果就是true，否则的话就是false。那么我们只要在n > 12的运行结果为true的时候显示n大于12，而在n > 12的运行结果是false的时候显示n小于等于12就可以了。

在英文里，“如果”就是if，那么上面这句话就可以这么写：

// 如果n大于12的计算结果是true
if (n > 12)

显示"n大于12"这句话可以用到我们在这篇文章最开始用到过的alert()函数，我们在控制台里输入alert("n大于12");，然后浏览器上就跳出了这样的一个对话框：

从上图中我们可以看到在alert后面的小括号里的字符串会被显示在浏览器弹出的对话框里。

为了大家在自己电脑上执行的结果和接下来的内容一样，我们先直接把n设置为42，代码是这样的：var n = 42;。

然后我们把显示对话框的代码接在if语句后面，写成下面这样：

if (n > 12) {
  alert("n大于12");
}

运行之后浏览器里就会弹出下面这样的一个对话框了：

好的，我们现在已经成功地用中文代替了原来麻烦的判断true和false含义的过程。那么接下来我们就来分析一下刚才用的if语句的写法。

if语句的格式是这样的：

if (判断式) {
  代码块A
}

如果判断式的计算结果是true，就像上面的n > 12一样，那么就会执行大括号{}里的所有代码。如果判断式的计算结果是false的话，那就不会执行大括号{}里的代码了。

else if语句

接下来我们再来试试n > 50，记住哦，现在变量n里面保存的值仍然是42：

if (n > 50) {
  alert("n大于50");
}

啊哦，为什么我们按下回车之后什么也没有发生呢？

因为现在变量n里面保存的值是42，而42是小于50的，所以n > 50的运行结果就是false。所以当小括号里的判断式的结果是false时，程序就不会执行if后面的大括号{}里的代码块了。那如果我们在这种情况下也想让程序能给我们一个中文提示的话应该怎么办呢？

首先，我们考虑一下，如果n > 50的结果是false，那么就可能是两种情况：一种是n < 50，另外一种是n == 50（n等于50）。我们先来改一下程序，让它在n < 50的情况下可以告诉我们“n小于50”。

if (n > 50) {
  alert("n大于50");
} else if (n < 50) {
  alert("n小于50");
}

我们可以看到，开头的一段代码和之前是一样的，但是在if的大括号{}之后又加上了一个else if (n < 50)。if (n < 50)是什么意思我们现在已经都知道了，就是在n小于50的时候执行后面的大括号{}里的代码。但是else是什么意思呢？

else在英语里是“其他”的意思，在我们的程序中就代表前面的if的小括号()中的判断式计算结果是false的时候。所以这里的意思就是，当if (n > 50)结果是false的时候，如果n < 50是true，那么就执行else if后面大括号{}里的代码块，在上面的程序里就是alert("n小于50");。

我们把上面的这段代码复制到控制台里执行看看：

这下我们的中文提示就能正确地跳出来了。那么当我们猜中了n是42的时候又会发生什么呢？

我们把代码里用于比较的数字改成42试试看：

if (n > 42) {
  alert("n大于42");
} else if (n < 42) {
  alert("n小于42");
}

啊哦，又是什么都没发生。相信有一些读者已经猜到了，因为变量n的值就是42，所以上面的n > 42的结果是false，n < 42的结果也是false。也就是说变量n既不是大于42，也不是小于42，而是等于42！

这时候我们就需要在上面的代码后面加上最后一段代码了：

if (n > 42) {
  alert("n大于42");
} else if (n < 42) {
  alert("n小于42");
} else {
  alert("恭喜你，猜对啦");
}

当else后面不带if的时候，意思就是剩下的所有情况都执行else后面大括号{}里的代码。在上面的情况中就是n既不大于也不小于我们猜的数字，那么这种情况自然就是我们已经猜对了n的值了。

玩个游戏：猜猜我是几？

游戏规则：

1. 我们用var n = Math.ceil(Math.random() * 100);来生成一个随机数并保存到变量n里
2. 然后我们用上面的那一串if语句代码不断地去猜n到底是多少，每次猜的时候我们都要把和n比较的数字修改成我们想猜的数字，比如我们如果想猜n是50，那么就可以这么写：

if (n > 50) {
  alert("n大于50");
} else if (n < 50) {
  alert("n小于50");
} else {
  alert("恭喜你，猜对啦");
}

如果我们要猜n是42，那么就可以这么写：

if (n > 42) {
  alert("n大于42");
} else if (n < 42) {
  alert("n小于42");
} else {
  alert("恭喜你，猜对啦");
}

啊哦，运气不太好，变量n已经不是42了呢。那就让我们用代码来猜猜它到底是多少吧！

推荐资料

下面的两个网站不管是作为学习的工具还是写代码时用来查找的“字典”都是很不错的选择，有兴趣的读者可以了解一下：

• 在线JavaScript教程（ https://www.liaoxuefeng.com/wiki/1022910821149312 ）
• 在线js速查手册（ https://www.runoob.com/js/js-tutorial.html ）