zoukankan      html  css  js  c++  java
  • javascript挑战编程技能-第一题:将问题转变成代码

    按我的个人理解,程序就是一个个约束条件的累加逻辑。

    目的只有一个,解决问题。

    在开始讲解如何解决问题之前,我觉得最重要的事情是,理解问题。

    首先你应该能够清楚的知道,你现在面临的是什么问题,才能根据问题提出解决方案。

    假设现在有一家小店的老板告诉你,我需要一个结算工资的软件。

    那你是不是就可以开始编写程序了呢?

    可能很多人都知道是不行的。

    我们还需要知道的更多。

    我们会向老板提出更多的问题:

    简而言之就是人工结算工资的过程和规则。

    也就是常说的需求分析。

    也许现在的计算机是很智能的。

    但是对于初学者来说并接触不到这部分的内容。

    所以我们可以假定,程序做不到人不做到的事情。

    代码是能够执行的一步一步的操作,也就是常说的算法。

    其实这里的语言很不好组织,因为我也太确定到底是需求重要还是算法重要,可能两者都重要吧。

    我这里对这两者都不深讲。以后在编程的过程中多留意这两者,其实才是最重要的。

    软件开发中有一种设计方式叫做:测试驱动。

    这个概念是我在一个同事的一本java书的封面看到的,具体的内容我并没有深入的去了解,感兴趣的可以自行百度。

    这里我只做简要的说明。

    就是在编写程序的一开始就假定自己会遇到一些问题。应该尝试去想象其他人在使用程序中可能发生错误的行为。

    言归正传。回到我们一开始提到的结算工资的软件。

    我们想老板详细的提出一些问题:

    1、工资是按月结还是日结?----------------月结(回答)

    2、除了基础工资还有什么其他的内容需要累加和扣除?-------------------还有销售业绩(回答)

    3、业绩抽成是怎么结算的?--------------------按销售额的4%,就算业绩

    4、还要其他的内容吗?--------------------没有了。

    恩根据上面的提问我们可以把这个简单的问题拆解成一些步骤。

    1、用户输入该员工的基础工资

    2、用户输入该员工的销售业绩

    3、点击提交,输出该员工的当月应发金额

    以上 三个步骤是按照最简单的程序设定的。

    接下来我们开始编写程序能清楚的知道,我们需要两个输入,一个输出。

    接着我们开始编写程序(编辑器使用webstorm,详细安装教程另行百度)。

    (关于js和html的详细教程可以查看w3cschool或者购买书籍。这里只做推荐,js的红色的望眼镜,html的HTML5与CSS3权威指南,陆凌牛的)

    程序如下:

    <body>
    <div>基础工资:<input  id="baseSalary"></div>
    <div>销售业绩:<input id="achievement"></div>
    <button id="account" onclick="accountWages()">提交</button>
    <div >实发金额:<span id="sum"></span></div>
    <script>
        function accountWages(){
            var baseSalaryNum = document.getElementById("baseSalary").value;
            var achievementNum = document.getElementById("achievement").value;
            var sum = parseFloat(baseSalaryNum)+parseFloat(achievementNum)*0.04;
            document.getElementById("sum").innerHTML=sum;
        }
    </script>
    </body>

    这里提供的是一个建议的demo,大家可以在这基础上做一些强化。

    比如:

    1、只能输入正值数字。

    2、结果向下取整。

    3、多一个输入,允许用户提供抽成比例。

    4、当用户输入不合法时,给出提示。

    第一节课就到这里结束了。

    有什么问题大家可以联系我本人,微信yu_xiaohu

    希望大家关注我的个人公众号,有更新博客我会在上面给出通知。

    我是小虎Oni,希望你开心。





  • 相关阅读:
    浏览器之本地缓存存储 localStorage 和 sessionStorage的区别以及用法
    webpack 命令 Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误问题解决方案
    webpack 4 x使用详细
    JS动态判断设备类型为PC或者移动端,然后根据设备加载相应的代码
    自制弹出框所踩的坑
    ant深入浅出(一)ant+xdoclet 生成hibernate配置文件以及实体映射文件
    收费系统
    自学考试 (二)数据结构图
    ORM框架Hibernate (四)MyEclipse Hibernate Tool 逆向生成实体类
    自学考试 (一)如何利用MindManager工具复习
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642286.html
Copyright © 2011-2022 走看看