js程序设计思维和if语句案例

来源：互联网发布：网络桥接怎么设置编辑：程序博客网时间：2024/06/15 04:38

生活中和计算机比较
生活中的程序：
（1）   宿舍保修：填写保修单→上报宿舍管理员→联系物业→找修理师傅→上门维修→反馈。
（2）   银行开户：客户填写申请单→提交证件资料 →审核真实性（1.本人、资料真实齐全则通过；2.其他人代办、有委托书、资料真实齐全则通过；不满足这些条件则拒绝）→录入系统开户→设置密码→发放卡、存折
解决生活中的问题的步骤描述。
计算机中的程序
解决问题的步骤描述，但用的是计算机语言描述
程序   执行者   描述语言   执行速度
生活中的程序   人   自然语言   相对慢
计算机的程序   计算机   计算机语言（比如js）   相对快
“神威•太湖之光”由国家并行计算机工程技术研究中心研制，全部采用中国国产处理器构建，是世界上首台峰值计算速度超过十亿亿次的超级计算机，其峰值计算速度达每秒12.54亿亿次。
什么是编程
根据业务需要，制定或编制解决问题的流程。编制程序的人应该是非常熟悉的或精通业务。
如果编制计算机程序要求：
（1）   精通业务
（2）   精通计算机语言
明确我们的学习方向
(1)   解决问题的思路
(2)   计算机语言
(3)   思维方式的转变
重点是解决问题的思路，而思路和计算机语言是没有关系的。所以学习是js但更多更重要的有并不是js的内容
难点是思维方式的转变，也是说从现在开始，需要站在计算机的角度来思考和描述问题。

一．计算机一个三位数的各位数字之和，比如415的各位之和就是4+1+5=10

415→   10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>计算一个三位数的各位数字之和</title>
</head>
<script>
/*
* 解决问题的思路：
* （1）提示并结束用户输入一个三位数，存放的num中
* （3）计算百位b100 除以100取整
* （4）计算十位b10 ，对100求余，除以10取整
* （5）计算个位b1，对10取余
* （6）（计算b100+b10+b1）
* （7）输入结果
* */
    var num = prompt("请输入一个三位数")
    var b100 = Math.floor(num/100);
    var b10 = Math.floor((num%100)/10);
    var b1 = num%10;
    var sum = b100+b10+b1;
    alert(sum)
</script>
<body>

</body>
</html>
显示图
通过这个案例，我们学到程序设计的套路：
（1）   程序设计分为俩个步骤：思路、编码
（2）   思路可以使用自然语言，流程图等一切能描述清楚解决方案的形式来描述
（3）   将思路翻译成对应的代码。
案例：根据三角形的三边长计算三角形的面积

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<script>
    /*
    * 解决思路的问题
    * （1）提示并接受输入三角形的三边长a\b\c
    * （2）s=(a+b+c)/2
    * （3）根据海伦公式计算
    * (4)输入结果
    *
    * */
    var a =Number(prompt("请输入a边"));
    var b = Number(prompt("请输入b边"));
    var c=Number(prompt("请输入c边"));
    var p= (a+b+c)/2//计算周长得一半
    var s= Math.sqrt(p*(p-a)*(p-b)*(p-c));//海伦公式计算
    alert(s);
</script>
<body>
</body>
</html>
Prompt函数输入的数据是字符串类型，比如“345”，注意“345”和345的区别
如果你想输入345，那么应该强制类型转换，虽然js有时会帮我们自动转换，但有时不靠谱
案例：话费计算器，根据通话时长（单位为秒）计算话费，资费标准为0.5元、分钟
If：选择结构
用if（条件满足为true）{执行
}else{执行其他的}
3 选择结构
3.1 选择结构基本概念
3.2 if语句
If语句的套路：
（1）   一个选择依据（条件）
（2）俩个选项

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body><script>第一个案例： /*    * 1.设定一个数；    * 2.满足条件小于0；    * 3.求这个数的绝对值    * 4.输出结果    * */    var a=Number(prompt("请输入一个数"));    if(a<0){        a=-a;    }    alert(a)</script><script>    /*    * 1.询价，设置一个变量    * 2先判断机票的价格800以内，我们就坐，否则，就选择其他方式    * */    var  price =Number(prompt("请输入飞机票的价格"));    if(price<=800){        alert("价格合理，我们就坐飞机");    }else{        alert("太贵了，不做了!");    }</script>第二个案例： <script>    /*    * 1.已知出租车起步价10块钱，3km以内    * 2.超出的部分2元/km    * 3.求我们打车一共花费多少钱    * 思路：    * 1.一共行驶多少km，设置变量行驶a km    * 2.条件：判断是大于3km    * 3.计算价格=（a-3）*2+10；    * 4否则：打车费用为10元    * */    var a =Number(prompt("请入我们行驶的公里数"));    var price=10;    if(a>3){        var price=(a-3)*2+10;        alert(price);    }else{        alert(price)    }</script> 第三个案例：<script>    var a =Number(prompt("输入"));    var price;    if(a<3){        price=8;    }else{     var price=(a-3)*2+10;    }alert(price);</script></body></html>

三角形if案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body></body><script>    /*     * 解决思路的问题     * （1）提示并接受输入三角形的三边长a\b\c     * 2.如果任意俩边之和大于第三边则执行（3）-（5），否则提示有误     * （2）s=(a+b+c)/2     * （3）根据海伦公式计算     *  (4)输入结果     *     * */    var a =Number(prompt("请输入a边"));    var b = Number(prompt("请输入b边"));    var c=Number(prompt("请输入c边"));    if(a+b>c&&a+c>b&&b+c>a){    var p= (a+b+c)/2//计算周长得一半    var s= Math.sqrt(p*(p-a)*(p-b)*(p-c));//海伦公式计算    alert(s);    }else{        alert("数据有误");    }</script></html>
求绝对值案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>求绝对值</title></head><body></body><script>    /*    * 思路：    * 1.输入一个数    * 如果该数小于0则取反    * 3输出结果    * */    var num =Number(prompt("机"));    if (num<0){        num=-num;    }    alert(num);</script></html>
话费案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><script>    /*    * 解决思路的问题    *    * (1)输入秒数    * (2)将秒数除以60再向上取整    * （3）    * （4）输入结果    *    * */    var second=Number(prompt("请输入通话时长（秒）"));    var minute = Math.ceil(second/60) ;//按分钟收费的，不满1元按秒收费    var money = minute*0.5;    alert("此通话产生话费"+money+"元");</script><body></body></html>

阅读全文

1 0