JS简单页面交互实战 - 点击按钮实现求和功能

上一期堡堡给大家讲解了简单的页面交互效果 - 点击块，让块动起来，让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块，让块动起来，可以回复“交互”到“HTML5学堂”公众号。而今天我们主要讲解JS简单页面交互实战 - 点击按钮实现求和功能。

Tips：由于上一期的文章篇幅过长，微信的文章有字数要求，所以小编把部分的内容（作用域）放到这一期进行讲解。

继上一期的内容 - 作用域

作用域

我们知道函数就是把多条语句封装起来，那封装起来了，在其它地方能否访问的到？具体看下面的实例。

实例：

var num = 1;
function show() {
    var num = 2;
}
console.log(num);

结果：1

为何输出的是1，而不是2；因为var num = 2;在函数里面，函数外面是访问不到函数里面的变量，就涉及到了作用域。

在JS里作用域有几种？什么是全局作用域，什么是局部作用域？

作用域分为全局作用域和局部作用域；
全局作用域：在window下属于全局作用域；
局部作用域：每个函数，均会创建一个局部作用域；

全局作用域与局部作用域的访问关系？

函数外部不能访问函数内部的变量，但是函数内部可以访问函数外部的变量；

多个作用域之间它们什么关系？

在局部作用域当中出现变量的时候，首先查找当前的作用域中是否具有存储空间，如果有则直接采用，如果没有需要向父级进行查找，如果父级没有，继续向上，直到找到window为止，如果window下也不存在该空间，会在全局作用域下进行空间的创建。而这种作用域的层层关系，即为作用域链。

JS的预编译与执行期分别做什么？

预编译期 — 开辟存储空间；例如var a;开辟了a的存储空间，但是未赋值（系统会把变量的值默认初始化为undefined）；
执行期 — 存储值/赋值；例如给上面的变量a赋值，a = '堡堡';

Tips：画图法解决作用域问题；

实战：

var test = 10;
function outer(){
    test = 20;
    console.log(test);


    function inner(){
        console.log(test);
        var test = 30;
        console.log(test);
    }inner();
 
}outer();
console.log(test);

结果：20 undefined 30 20

分析：

JS预编译期

代码第1行和第8行，因为用var关键字声明了变量，所以JS预编译的时候会给变量开辟存储空间；预编译的时候只是给变量开辟存储空间并把变量默认赋值为undefined（系统会默认赋值undefined）；

JS执行期

执行第1行代码var test = 10;，test变量的值变为10；

执行第3行代码test = 20;test变量的值变为20；因为outer函数本身没有存在test变量，所以会往上一层进行查找，所以它访问的是全局作用域的test变量，输出的结果为20；

执行代码第7行console.log(test);，因为inner函数里面有声明test变量，所以不会往上一层进行查找，所以访问的是inner函数里面的test变量，输出的结果为undefined；代码是从上往下执行，还没有执行到给test变量赋值的语句，所以test变量的值还是undefined；

执行代码第8行var test = 30;，这时候inner函数里面的test变量的值变为30，所以输出的结果为30；

执行代码第13行console.log(test);，因为函数外面访问不到函数里面的变量，所以它访问的是全局作用域中的test变量，但是它的值已经变为20，所以输出的结果为20；

在项目开发中会遇到各种各样的页面交互效果，那我们如何去实现一个页面交互效果？在实现页面交互效果的时候，会根据效果的实现思路来进行分析和实现，这也是我们文章中的一个重点。下面的文章内容主要是根据效果实现思路来分析点击按钮实现求和功能。

本文内容概要

1 点击按钮实现求和的效果图

2 实现页面交互效果的思路

3 用自己的语言进行功能的描述

4 仔细查看功能，并根据基本功能构建结构样式

5 细化功能描述并转换为JS语言或命令

6 JS具体编码以及代码优化，回顾成品代码

7 课程小结

8 课后作业

1 点击按钮实现求和的效果图

2 实现页面交互效果的思路

——>用自己的语言进行功能的描述

——>仔细查看功能，并根据基本功能构建结构样式

——>细化功能描述并转换为JS语言或命令

——>JS具体编码以及代码优化，回顾成品代码

Tips：对于初学者来说，小编建议根据上面的实现思路来分析和实现页面交互效果。

3 第一步：用自己的语言进行功能的描述

我们需要用自己的语言进行详细的功能描述，因为后面需要根据功能的描述来搭建结构与样式，它会直接影响后期JS交互效果的实现。

具体的功能描述如下：

用鼠标点击“按钮”时，将两个文本框中输入的数字进行加和运算，并将加和的结果显示在“求和结果”的后面。

3 第二步：仔细查看功能，并根据基本功能构建结构样式

标签选择分析：

在功能描述中“将两个文本框中输入的数字进行加和运算”，可以让用户提交数据的标签也只能是表单元素，在这边明显是input元素；
为了优化input元素的用户体验，使用label元素来扩大聚焦的点击区域，也就是说点击label元素光标会自动聚焦到input元素里面；
在功能描述中“用鼠标点击‘按钮’时”，按钮我们是使用了input类型的按钮（也可以使用其它按钮）；
在功能描述中“加和的结果显示在‘求和结果’的后面”，为了后期JS方便的操作，最终的求和结果显示在em标签里面；

根据功能描述搭建的结构与样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰 | 陈能堡</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .wrap div {
            margin-bottom: 5px;
        }
        .wrap input[type=button] {
            width: 80px;
            height: 26px;
        }
        .show-result {
            line-height: 26px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <form action="">
            <div>
                <label for="firstNum">第一个值：</label><input type="text" id="firstNum"/>
            </div>
            <div>
                <label for="secondNum">第二个值：</label><input type="text" id="secondNum"/>
            </div>
            <div>
                <input type="button" value="点击求和" id="sumBtn"/>
            </div>
            <div  class="show-result">求和的结果：<em id="resulut">200</em></div>
        </form>
    </div>
</body>
</html>

4 第三步：细化功能描述并转换为JS语言或命令

用鼠标点击“按钮”

网页中存在着各种标签，需要利用document.getElementById(id)方法获取“按钮”元素，才能针对“按钮”元素进行相应的操作；

鼠标点击“按钮”，需要为“按钮”元素绑定点击事件，可以用eleObj.onclick = function(){}；来绑定点击事件；

获取到两个文本框中输入的内容

网页中存在着各种标签，需要利用document.getElementById(id)方法获取“文本框”元素，才能针对“文本框”元素进行相应的操作；

前面我们学过了用innerHTML的属性来获取标签的内容，但是对于表单元素来说，获取表单的内容需要使用value的属性，如：eleObj.value；

实例：

<form action="">
    <label for="ipt">请输入值：</label><input type="text" id="ipt"/>
    <input type="button" value="点击按钮" id="btn"/>
</form>
<script type="text/javascript">
    var iptObj = document.getElementById('ipt'),
        btnObj = document.getElementById('btn');


    btnObj.onclick = function() {
        console.log('用value属性获取=' + iptObj.value);
        console.log(typeof iptObj.value);
        console.log('用innerHTML属性获取=' + iptObj.innerHTML);
    }
</script>

结果：

代码分析：

表单元素使用value属性可以获取到表单的内容，使用innerHTML属性获取不到表单的内容；
通过value属性获取到的表单内容是属于字符串类型；

对两个文本框中内容进行加和运算

现在已经知道通过value属性获取到的内容是字符串类型，然后再对内容进行加法操作，结果会如何？具体看下面的例子。

实例：

<script type="text/javascript">
     // 实例中的命名只是为了大家方便理解，请勿模仿
    var num1 = '13';
    var num2 = 14;


    console.log(num1 + num2);


    var num3 = '5';
    var num4 = '20';


    console.log(num3 + num4);
</script>

结果：1314 520

代码分析：

只要“+”操作符的任意一侧出现字符串，它就从加法运算的功能变成连字符的功能；
为了保证“+”不受字符串的影响，可以通过parseInt()方法把字符串的内容转成数字，这样就能正常的加法运算；

将加和结果显示在“求和结果”后面

对于获取/设置非表单元素的内容，我们可以通过eleObj.innerHTML来进行操作；

5 第四步：JS具体编码以及代码优化，回顾成品代码

成品代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 独行冰海 | 刘国利</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .wrap div {
            margin-bottom: 5px;
        }
        .wrap input[type=button] {
            width: 80px;
            height: 26px;
        }
        .show-result {
            line-height: 26px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <form action="">
            <div>
                <label for="firstNum">第一个值：</label><input type="text" id="firstNum"/>
            </div>
            <div>
                <label for="secondNum">第二个值：</label><input type="text" id="secondNum"/>
            </div>
            <div>
                <input type="button" value="点击求和" id="sumBtn"/>
            </div>
            <div class="show-result">求和的结果：<em id="resulut"></em></div>
        </form>
    </div>
    <script type="text/javascript">
        // 获取标签
        var firstEle = document.getElementById('firstNum'),
            secondEle = document.getElementById('secondNum'),
            btnEle = document.getElementById('sumBtn'),
            resultEle = document.getElementById('resulut');


        // 按钮绑定点击事件
        btnEle.onclick = function() {
            // 操作标签的内容
            // 利用parseInt()方法把字符串转成数字，保证能正常的加法运算
            resultEle.innerHTML = parseInt(firstEle.value) + parseInt(secondEle.value);            
        }
    </script>
</body>
</html>

效果：

到目前为止，我们已经完成了点击按钮实现求和功能。但是，我们能否继续优化里面的代码？我们来想一个问题，假如页面中出现了多个点击按钮实现求和功能，你是把代码复制黏贴一遍还是进行代码的封装？我想你应该知道怎么做了吧~

优化代码

<script type="text/javascript">
    // 获取标签
    var firstEle = document.getElementById('firstNum'),
        secondEle = document.getElementById('secondNum'),
        btnEle = document.getElementById('sumBtn'),
        resultEle = document.getElementById('resulut');


    // 按钮绑定点击事件
    btnEle.onclick = function() {
        // 显示求和的结果
        resultEle.innerHTML = sum(firstEle.value, secondEle.value);    
    }


    /*
     * [sum 实现两数求和的功能]
     * @param  {[数字 | 字符串]} firstNum  [第一个数]
     * @param  {[数字 | 字符串]} secondNum [第二个数]
     * @return {[数字]}     [返回值]
     * @author 陈能堡
     */
    function sum(firstNum, secondNum) {
        // 利用parseInt()方法把字符串转成数字，保证能正常的加法运算
        return parseInt(firstNum) + parseInt(secondNum);
    }
</script>

代码分析：封装好的sum功能函数在其它地方当中也能正常使用，这样可以减少代码冗余，提升代码的可读性和复用性；

Tips：代码优化是贯穿于整个过程，而不是到最后才进行代码的优化；

6 课程小结

掌握作用域能够避免一些因变量造成的问题，才能更灵活的去操作变量或函数；另外，掌握作用域可以帮助你更好的去理解后面要学的闭包；

掌握页面交互效果的实现思路（分析方法），能够更清楚的去分析和实现页面交互效果。

7 课后作业

视频内容

HTML5学堂 - 堡堡耗时10h