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 条评论
登录 后参与评论

相关文章

来自专栏与神兽党一起成长

unslider源码分析

根据Bootstrap中文网的介绍,Unslider一个超小的 jQuery轮播(slider)插件,参照这个汉化版的介绍页面,这个插件有你需要的优点,但是本...

2132
来自专栏河湾欢儿的专栏

vue初

指令总结 v-bind 可以绑定属性,包括class style,而已省略,使用:替代 在1vue.0中有三种修饰符,.sync,.once,.camel...

952
来自专栏Android先生

Android开发人员不得不学习的JavaScript基础(二)

window对象是BOM的核心,window对象指当前的浏览器窗口,window对象中有很多种方法供开发者调用:

1103
来自专栏编程

Python基础知识6:格式化字符、颜色

字符格式化,有两种方式: 1、通过%占位符方式,%s,%d,% 2、通过format,其中format比较好用,可以居中、可以用%、可以用二进制、可以填充字符自...

2425
来自专栏柠檬先生

Angularjs基础(十)

ng-blur  描述:规定blur 事件的行为       实例:当输入框失去焦点的(onblur)时执行表达式:         <input ng...

2045
来自专栏软件开发

前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

一、条件渲染 1.1、v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if...

52511
来自专栏前端知识分享

第22天:js改变样式效果

1、alert:弹出警示框(用的非常少,用户体验不好) 完整写法:window.alert(“执行语句”); window对象,窗口,一般情况可省略 alert...

1301
来自专栏WindCoder

mybatis在xml文件中处理大于号小于号的方法(mybatis大于小于的转义)

SELECT * FROM test WHERE 1 = 1 AND start_date  &lt;= CURRENT_DATE AND end_date &...

1321
来自专栏十月梦想

Vue入门详解之模板语法插值表达式,v-html和v-text

我们来看一下简单的模板语法,在Vue中有三种模板语法用来渲染model(数据层),插值表达式(就是{{}},双花括号表达法),v-text和v-html三种!那...

4883
来自专栏搞前端的李蚊子

vue.js使用props在父子组件之间传参

本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要...

3194

扫码关注云+社区

领取腾讯云代金券