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

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

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

继上一期的内容 - 作用域

作用域

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

实例:

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

结果:1

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

在JS里作用域有几种?什么是全局作用域,什么是局部作用域 ?

  1. 作用域分为全局作用域和局部作用域;
  2. 全局作用域:在window下属于全局作用域;
  3. 局部作用域:每个函数,均会创建一个局部作用域;

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

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

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

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

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

  1. 预编译期 — 开辟存储空间;例如var a;开辟了a的存储空间,但是未赋值(系统会把变量的值默认初始化为undefined);
  2. 执行期 — 存储值/赋值;例如给上面的变量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 第二步:仔细查看功能,并根据基本功能构建结构样式

标签选择分析:

  1. 在功能描述中“将两个文本框中输入的数字进行加和运算”,可以让用户提交数据的标签也只能是表单元素,在这边明显是input元素;
  2. 为了优化input元素的用户体验,使用label元素来扩大聚焦的点击区域,也就是说点击label元素光标会自动聚焦到input元素里面;
  3. 在功能描述中“用鼠标点击‘按钮’时”,按钮我们是使用了input类型的按钮(也可以使用其它按钮);
  4. 在功能描述中“加和的结果显示在‘求和结果’的后面”,为了后期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>

结果:

代码分析:

  1. 表单元素使用value属性可以获取到表单的内容,使用innerHTML属性获取不到表单的内容;
  2. 通过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

代码分析:

  1. 只要“+”操作符的任意一侧出现字符串,它就从加法运算的功能变成连字符的功能;
  2. 为了保证“+”不受字符串的影响,可以通过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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-26

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python3

tkinter -- OptionMenu

OptionMenu 的创建需要两个必要的参数,与当前值绑定的变量,通常为一 StringVar 类型;另一个是提供可选的内容列表,由 OptionMenu 的...

703
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。 前面提到AngularJS的四大特性:   1 MVC ...

1729
来自专栏xingoo, 一个梦想做发明家的程序员

数字按照不同格式转换成字符串

  如果自己写函数,不使用itoa怎么判断呢?   我们用通常的办法,对数字进行每位的除商,得到后与字符'0'相加。 flag = 0; ...

16710
来自专栏LIN_ZONE

写jquery插件(转载)

如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘...

653
来自专栏Python入门

使用Python这么多年,才发现Python还有这些实用的功能和特点

在使用Python多年以后,我偶然发现了一些我们过去不知道的功能和特性。一些可以说是非常有用,但却没有充分利用。考虑到这一点,我编辑了一些你应该了解的Pytho...

671
来自专栏专注 Java 基础分享

struts2标签库----数据标签详解

     上篇文章我们介绍struts2标签库中的控制标签的基本使用和部分原理,本篇文章接着了解下标签库中有关数据标签的使用和原理。主要涉及以下数据标签: ac...

22310
来自专栏小特工作室

基于Lodop控件的Web打印示例(含源码)

      最近项目组的打印控件有所改变,已经换成Lodop控件,使用以后发现,功能确实非常强大.可以打印Web页面内某个控件的内容.下面,还是通过一个实例来说...

1808
来自专栏jojo的技术小屋

原 荐 自己写JSON编辑器

作者:汪娇娇 时间:2018年1月15日 下一篇:自己写代码对比工具 时间过得好快,一下子就2018年了,想起好久没写博客,不觉有些浪费了时光,今天便来补一篇。...

4537
来自专栏GreenLeaves

Jquery ajax调用后台aspx后台文件方法(不是ashx)

在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下。   (1)通过aspx.cs的静态方...

1825
来自专栏自由而无用的灵魂的碎碎念

Tips in Visual Studio 2008

.NET几乎程序员都在使用visual studio 2008进行开发。可是,你通过它达到最大的开发效率了吗?

962

扫描关注云+社区