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

在前文中,我给大家介绍了在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键。

VS Code小技巧

接下来我们来做第二步:为了能让用户输入两个数字,我们决定在页面上放两个输入框,输入框在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大邪术啊!

好,一个纯前端实现的简易计算器就成功实现了!对初学者来说,这个内容还是有点多的,自己实践和思考一下。其中肯定有很多我没解释的地方你还不明白,没关系,随着学习的深入,一切都会明朗。有问题,记得给我留言提问哦。

在下一篇中,我们将会在今天这个纯前端计算器的基础上,将其改造为一个由前端和后端协同来完成计算的网络计算器,敬请期待哦。

坚持学习,坚持实践,你也能成为专家。 欢迎关注一斤代码的系列课程《从编程小白到全栈开发》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lhyt前端之路

(VUE!jQuery!插件!)盘点前端群的无脑回答0.前言总结

你是不是在前端群见过很多这种前景:这个怎么做?怎么拿到这些数据?怎么更新整个列表?

19940
来自专栏CSDN技术头条

应用广泛的语言ECMAScript 2018来了,新特性都在这里

ECMAScript的两项新特性已确定,另外四项正在考虑中。 ? 作为JavaScript的标准规范,ECMAScript有望在6月发布新的版本。 目前为止,已...

20960
来自专栏小樱的经验随笔

UVA 1030 - Image Is Everything【模拟+思维+迭代更新】

题目链接:uva 1030 - Image Is Everything 题目大意:有一个最大为n*n*n的立方体的一个不规整立体,由若干个1*1*1的小正方体构...

29650
来自专栏前端说吧

vue-细节小知识点汇总(更新中...)

13140
来自专栏GreenLeaves

FactoryMethod工厂方法模式(创建型模式)

整个抽象的游戏设施建造系统相对变化较慢,本例中只有一个Build的创建方法,而Build内部的方法实现,该实现依赖与各种具体的实现,而这些实现变化的非常频繁,现...

8020
来自专栏前端知识分享

Angular中ui-grid的使用详解

  在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理提出,...

23420
来自专栏java一日一条

如何写出漂亮的 React 组件

在Walmart Labs的产品开发中,我们进行了大量的Code Review工作,这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇...

12430
来自专栏Modeng的专栏

Vue一个案例引发的递归组件的使用

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之...

18110
来自专栏牛客网

前端实习面经(回馈牛客网)

24630
来自专栏数据小魔方

Xcelsius(水晶易表)系列8——动态选择器高级用法

今天继续跟大家分享关于水晶易表的动态选择器高级用法。 该案例所用到的函数和选择器工具还是我们之前用到的基本选择工具——单选按钮,组合框。 用到的思想与昨天讲到的...

31460

扫码关注云+社区

领取腾讯云代金券