从编程小白到全栈开发：一个简易纯前端计算器

最新推荐：《Vue3.0抢先学》系列学习教程

在前文中，我给大家介绍了在JS全栈开发中前端和后端的概念，如果你有了一种茅塞顿开的感觉，恭喜你，你骨骼清奇，是个当程序猿的好苗子。

扯了这么久，到现在还没真正开始讲代码方面的知识，真是不好意思。但是对一个初学者来说，必要的心理建设和学前铺垫是非常必要的。编程是一个既要充分发挥创造力和想象力，又要忍受重复枯燥性的一项活动，所以我也在时刻思考着如何以通俗有趣的方式来讲解这些内容，让你有足够的兴趣学习下去。

人对抽象的概念比较难理解一些，所以我会使用一些比较形象的东西来解释我们在学习编程的过程中遇到的各种问题。

好，今天一上来，我就要教你写一个比较实际的程序：一个简易的计算器。它的功能比较基础，只有加减乘除的功能。

但是，我们的目标是JS全栈开发呀！

没错，所以我们要学习的，是如何实现一个纯前端的计算器；以及，如何把这个计算器改造成由前端和后端协同来完成计算的网络计算器。

纯前端实现的计算器

我们要做的是一个能做对两个数字进行加、减、乘、除的简易计算器，功能非常简单。所以，这样的功能完全能在前端全部搞定。

让我们先来看一下对这个计算器的功能定义描述：

• 用户能输入两个数字
• 用户能选择做加、减、乘、除法中其中一种数学运算
• 用户点击“计算”按钮进行运算
• 计算完成后显示运算结果

构建基本功能

好的，看明白了功能需求，我们就开工吧！请打开你的VS Code，新建一个文件，并把它保存为calculator.html。接下来我们来一步步的来编辑这个文件，使其一点点的达到我们想要的功能。

第一步，在文件中输入以下代码，它是作为一个HTML文件最基础的代码：

第一行的代表了这个HTML文件所遵循的HTML规范版本。HTML规范有很多种，而该文档中的这个表示该文档使用了HTML5规范，这是当今主流的规范。对这些规范感兴趣的朋友，可以当做课外作业，自行搜索了解。

HTML里面这种用尖括号<和>包起一个单词的东西，我们叫做标签元素，HTML规范中定义了很多标签元素，用于实现页面上各种各样的功能。

而标签包含的区域，一般是用来放这个网页的描述信息（我们叫做元数据）及资源信息（比如需要引入的js和css代码等等），一般这些信息在我们通过浏览器查看网页的时候是不可见的。

标签包含的部分呢，基本上是构建一个页面中可见界面的那部分代码。比如一个页面上我们能看到的超链接啊，按钮啊，输入框啊之类的，都会在这部分区域进行编写。

VS Code小技巧：感觉写上面的代码好多字啊，打字慢的人，一个一个输入好麻烦，嗯，来试试VS Code神技！在空的html文件中，输入一个感叹号(!)，然后按键盘上左边的Tab键。

VS Code小技巧

接下来我们来做第二步：为了能让用户输入两个数字，我们决定在页面上放两个输入框，输入框在HTML中是，来看下加上输入框后区域的代码：

在浏览器中运行或刷新一下你的页面，是不是看到两个输入框出现了？

输入框

然后是第三步：为了能让用户选择做加、减、乘、除法中其中一种数学运算，我们给他们一个下拉框来做选择吧：

    

        

        
            +
            -
            *
            /
        

        
    

下拉框

下拉框-选择

我们看到页面上，在两个输入框之间，就多了一个包含了加减乘除运算符的下拉框，下拉框的功能，在HTML中可以用来实现，里面的4个，分别就是下拉框的4个选项。

再来第四步，我们需要提供一个“计算”按钮供用户在输入完成后进行点击并进行运算，按钮我们用来做：

    

        

        
            +
            -
            *
            /
        

        

        

计算

我们可以看到，这里的上面，有一个很显眼的onclick="calc()"，这是做什么用的呢？这个的意思，其实就是告诉页面，如果有用户点击(click)了这个按钮，则运行一段JS代码：一个叫做calc的JS函数。

为什么要在这里运行JS函数呢？因为HTML标签本身是用来构建界面的，它处理不了什么逻辑性的东西，要处理逻辑功能，我们就要让JS闪亮登场了。

我们来看一下这个calc的JS函数是个什么样子的：

    

        

        
            +
            -
            *
            /
        

        

        

计算

可以看到，我们在