在前文中，我给大家介绍了在JS全栈开发中前端和后端的概念，如果你有了一种茅塞顿开的感觉，恭喜你，你骨骼清奇，是个当程序猿的好苗子。
扯了这么久，到现在还没真正开始讲代码方面的知识，真是不好意思。但是对一个初学者来说，必要的心理建设和学前铺垫是非常必要的。编程是一个既要充分发挥创造力和想象力，又要忍受重复枯燥性的一项活动，所以我也在时刻思考着如何以通俗有趣的方式来讲解这些内容，让你有足够的兴趣学习下去。
人对抽象的概念比较难理解一些，所以我会使用一些比较形象的东西来解释我们在学习编程的过程中遇到的各种问题。
好，今天一上来，我就要教你写一个比较实际的程序：一个简易的计算器。它的功能比较基础，只有加减乘除的功能。
但是，我们的目标是JS全栈开发呀！
没错，所以我们要学习的，是如何实现一个纯前端的计算器；以及，如何把这个计算器改造成由前端和后端协同来完成计算的网络计算器。
纯前端实现的计算器
我们要做的是一个能做对两个数字进行加、减、乘、除的简易计算器，功能非常简单。所以，这样的功能完全能在前端全部搞定。
让我们先来看一下对这个计算器的功能定义描述：
- 用户能输入两个数字
- 用户能选择做加、减、乘、除法中其中一种数学运算
- 用户点击“计算”按钮进行运算
- 计算完成后显示运算结果
构建基本功能
好的，看明白了功能需求，我们就开工吧！请打开你的VS Code，新建一个文件，并把它保存为calculator.html。接下来我们来一步步的来编辑这个文件，使其一点点的达到我们想要的功能。
第一步，在文件中输入以下代码，它是作为一个HTML文件最基础的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器</title>
</head>
<body>
</body>
</html>
第一行的<!DOCTYPE html>代表了这个HTML文件所遵循的HTML规范版本。HTML规范有很多种，而该文档中的这个表示该文档使用了HTML5规范，这是当今主流的规范。对这些规范感兴趣的朋友，可以当做课外作业，自行搜索了解。
HTML里面这种用尖括号<和>包起一个单词的东西，我们叫做标签元素，HTML规范中定义了很多标签元素，用于实现页面上各种各样的功能。
而<head>标签包含的区域，一般是用来放这个网页的描述信息（我们叫做元数据）及资源信息（比如需要引入的js和css代码等等），一般这些信息在我们通过浏览器查看网页的时候是不可见的。
<body>标签包含的部分呢，基本上是构建一个页面中可见界面的那部分代码。比如一个页面上我们能看到的超链接啊，按钮啊，输入框啊之类的，都会在这部分区域进行编写。
VS Code小技巧：感觉写上面的代码好多字啊，打字慢的人，一个一个输入好麻烦，嗯，来试试VS Code神技！在空的html文件中，输入一个感叹号(
!)，然后按键盘上左边的Tab键。
接下来我们来做第二步：为了能让用户输入两个数字，我们决定在页面上放两个输入框，输入框在HTML中是<input>，来看下加上输入框后<body>区域的代码：
<body>
<div class="calculator">
<input type="text" id="num1">
<input type="text" id="num2">
</div>
</body>
在浏览器中运行或刷新一下你的页面，是不是看到两个输入框出现了？
然后是第三步：为了能让用户选择做加、减、乘、除法中其中一种数学运算，我们给他们一个下拉框来做选择吧：
<body>
<div class="calculator">
<input type="text" id="num1">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2">
</div>
</body>
我们看到页面上，在两个输入框之间，就多了一个包含了加减乘除运算符的下拉框，下拉框的功能，在HTML中可以用<select>来实现，<select>里面的4个<option>，分别就是下拉框的4个选项。
再来第四步，我们需要提供一个“计算”按钮供用户在输入完成后进行点击并进行运算，按钮我们用<button>来做：
<body>
<div class="calculator">
<input type="text" id="num1">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2">
<button onclick="calc()">计算</button>
</div>
</body>
我们可以看到，这里的<button>上面，有一个很显眼的onclick="calc()"，这是做什么用的呢？这个的意思，其实就是告诉页面，如果有用户点击(click)了这个按钮，则运行一段JS代码：一个叫做calc的JS函数。
为什么要在这里运行JS函数呢？因为HTML标签本身是用来构建界面的，它处理不了什么逻辑性的东西，要处理逻辑功能，我们就要让JS闪亮登场了。
我们来看一下这个calc的JS函数是个什么样子的：
<body>
<div class="calculator">
<input type="text" id="num1">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2">
<button onclick="calc()">计算</button>
</div>
<script>
function calc() {
// 获取id为num1的输入框
var num1El = document.getElementById('num1');
// 从num1输入框获取文字内容并转换成数字类型
var num1 = parseFloat(num1El.value);
// 获取id为num2的输入框
var num2El = document.getElementById('num2');
// 从num2输入框获取文字内容并转换成数字类型
var num2 = parseFloat(num2El.value);
// 获取id为operator的下拉框
var operatorEl = document.getElementById('operator');
// 从下拉框获取当前选中的内容
var operator = operatorEl.value;
var result = 0;
// 根据选中的运算类型，进行相应的计算
if (operator === '+') {
result = num1 + num2; // 相加
} else if (operator === '-') {
result = num1 - num2; // 相减
} else if (operator === '*') {
result = num1 * num2; // 相乘
} else if (operator === '/') {
result = num1 / num2; // 相除
}
// 显示计算结果
alert('计算结果是：' + result);
}
</script>
</body>
可以看到，我们在<script>标签内，写入了一段JS的代码，这种形式，是在HTML中嵌入JS代码的一种方式（还有其他的方式，我们后面再聊）。这个calc函数的功能，就是从页面上获取用户输入的两个数字，以及根据用户选择的运算符，进行相应的数学运算，并显示出计算结果。
在这段代码中，三次出现了document.getElementById,它是用于从document这个对象上，根据标签元素的id属性值进行匹配，查找到匹配的标签元素。然后，你可以看到，对于输入框的获取的value，我们会用parseFloat进行处理，为什么这样做呢？因为HTML的<input>输入框中获取的value，总是字符串类型的，而字符串类型的内容，直接进行数学运算会有问题。来看下面的例子：
var a = '2.5';
var b = '8';
// 将两个字符串a和b相加
// 结果为字符串'2.58'
var c = a + b;
// 将字符串a和b分别先转换为浮点数，再进行相加，
// 结果则为数字10.8
var d = parseFloat(a) + parseFloat(b);
所以，在写代码的时候，要注意你的数据类型是否已处理正确。
好了，至此，一个非常简易（是简陋）的计算器就完成了，输入内容后进行计算，它看起来就像是这样的：
你竟然是这样的计算器，真是丑爆了！
哎，我们来稍微修饰一下它，给它化个妆磨个皮吧。为HTML化妆的功能，是通过一种叫做CSS（层叠样式表）的技术实现的，它可以为HTML的可视化元素设置各种样式，让我们的页面变得更生动。我为我们的计算器稍稍粉饰了一下，在HTML代码的<head>标签中，加入以下代码：
<style>
.calculator {
border: 2px solid #98a2da;
border-radius: 5px;
padding: 20px;
width: 300px;
background-color: #dcdffa;
}
input {
display: block;
margin: 15px 0;
border: 1px solid #98a2da;
border-radius: 5px;
color: #cccccc;
width: 90%;
height: 30px;
padding: 5px 10px;
font-size: 16px;
font-weight: bold;
text-align: right;
}
select {
height: 30px;
padding: 5px 10px;
font-size: 16px;
width: 50px;
}
button {
border: 1px solid #98a2da;
border-radius: 5px;
background-color: #ffffff;
font-size: 16px;
padding: 5px 20px;
color: #7d7d7d;
}
</style>
在浏览器中刷新我们的页面，你将看到我们的计算器变得看起来稍微那么顺眼了一些：
真是人靠衣装，HTML靠CSS啊。而且，一份同样的HTML代码，可以使用不同的CSS代码来变换出不同的样子，很是强大，真是可以媲美亚洲4大邪术啊！
好，一个纯前端实现的简易计算器就成功实现了！对初学者来说，这个内容还是有点多的，自己实践和思考一下。其中肯定有很多我没解释的地方你还不明白，没关系，随着学习的深入，一切都会明朗。有问题，记得给我留言提问哦。
在下一篇中，我们将会在今天这个纯前端计算器的基础上，将其改造为一个由前端和后端协同来完成计算的网络计算器，敬请期待哦。
坚持学习，坚持实践，你也能成为专家。
欢迎关注一斤代码的系列课程《从编程小白到全栈开发》
