任务十三：零基础JavaScript编码（一）

任务目的

JavaScript初体验
初步明白JavaScript的简单基本语法，如变量、函数
初步了解JavaScript的事件是什么
初步了解JavaScript中的DOM是什么

任务描述

参考以下示例代码，补充其中的JavaScript功能，完成一个JavaScript代码的编写
本任务完成的功能为：用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>IFE JavaScript Task 01</title>

  </head>

<body>

  <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>

  <button id="button">确认填写</button>

  <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>

<script type="text/javascript">

(function() {

  /*

  在注释下方写下代码

  给按钮button绑定一个点击事件

  在事件处理函数中

  获取aqi-input输入的值，并显示在aqi-display中

  */

})();

</script>

</body>

</html>

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
请注意代码风格的整齐、优雅
代码中含有必要的注释
可以不考虑输入的合法性
建议不使用任何第三方库、框架
示例代码仅为示例，可以直接使用，也可以完全自己重写

任务完成及总结：

老实说，目前还是JS小白，从这章任务开始，除了有说明是自己做的，其他都是分析他人的精彩代码和思路。首先来看第一位仁兄的思路和实现方式：

这位仁兄非常巧妙的封装了一个变量，让代码变得十分的简洁，这是一大亮点。其次充分考虑了大部分情况，包括数值的范围、类型和利用parseInt方法转化可能出现的小数，最后一个亮点就是添加了回车事件。

代码演示地址：https://cruxf.github.io/BaiduTest/test13.html

代码地址：https://github.com/CruxF/BaiduTest/blob/master/test13.html

另一位脑洞大开的实现方式是这样的：

一开始就将按钮绑定了点击事件，然后利用三目运算符和Number方式进行数值的判断从而输出结果。代码十分简洁，思路也很好，但是缺陷也很冥想，就是没有考虑到负数和实际数值的范围。

任务十三：零基础JavaScript编码（一）的更多相关文章

零基础JavaScript编码（三）总结
任务目的在上一任务基础上继续JavaScript的体验接触一下JavaScript中的高级选择器学习JavaScript中的数组对象遍历.读写.排序等操作学习简单的字符串处理操作任务描述参 ...
零基础JavaScript编码（二）
任务目的在上一任务基础上继续JavaScript的体验学习JavaScript中的if判断语法,for循环语法学习JavaScript中的数组对象学习如何读取.处理数据,并动态创建.修改DOM ...
零基础JavaScript编码（一）
任务目的 JavaScript初体验初步明白JavaScript的简单基本语法,如变量.函数初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任务描述参考以 ...
任务十七：零基础JavaScript编码（五）
任务目的在上一任务基础上继续JavaScript的体验接触更加复杂的表单对象实现页面上的一个完整交互功能用DOM实现一个柱状图图表任务描述参考以下示例代码,原始数据包含几个城市的空气质量指 ...
任务十六：零基础JavaScript编码（四）
任务目的在上一任务基础上继续JavaScript的体验深入学习JavaScript的事件机制及DOM操作学习事件代理机制学习简单的表单验证功能学习外部加载JavaScript文件任务描述 ...
任务十五：零基础JavaScript编码（三）
任务目的在上一任务基础上继续JavaScript的体验接触一下JavaScript中的高级选择器学习JavaScript中的数组对象遍历.读写.排序等操作学习简单的字符串处理操作任务描述参 ...
任务十四：零基础JavaScript编码（二）
任务目的在上一任务基础上继续JavaScript的体验学习JavaScript中的if判断语法,for循环语法学习JavaScript中的数组对象学习如何读取.处理数据,并动态创建.修改DOM ...
任务一：零基础HTML编码
面向人群: 零基础或初学者难度: 简单重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
零基础HTML编码学习笔记
任务目的了解HTML的定义.概念.发展简史掌握常用HTML标签的含义.用法能够基于设计稿来合理规划HTML文档结构理解语义化,合理地使用HTML标签来构建页面任务描述:完成一个HTML页面代 ...

随机推荐

ajax session timeout
授权过期后AJAX操作跳转到登录页的一种全局处理方式菜鸟程序员之Asp.net MVC Session过期异常的处理基于WebImage的图片上传工具类
oracle mysql的序列的新增、删除、修改及使用
序列的使用参考文献: https://blog.csdn.net/meijory/article/details/51891529 1.序列介绍序列: 是 oracle 提供的用于产生一系列唯一 ...
3dsmax2012卸载/安装失败/如何彻底卸载清除干净3dsmax2012注册表和文件的方法
3dsmax2012提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2012失败提示3dsmax2012安装未完成,某些产品无法安装,也有时候想重新 ...
C#反射动态调用dll中的方法，并返回结果(转)
反射的作用是动态的加载某个dll(程序集),并执行该程序集中的某个方法,并返回结果:当然也可以给该方法传递参数 namespace assembly_name { public class assem ...
(转)Http状态码301和302概念简单区别及企业应用案例
Http状态码301和302的区别及企业应用案例原文:http://blog.51cto.com/oldboy/1774260 1.什么是301重定向? 301重定向/跳转一般,表示本网页永久性转移 ...
前端中用到的图片（png图片）
作为前端工程师,将设计师的设计稿转化为html页面,其中有一个必不可少的环节就是将psd文件中的一些图片随心所欲的使用,而我们经常用到的就是png图片. 第一部分:基本介绍首先我们先对比几种图片: ...
关于sql通配符检索问题-【.NET】
确定给定的字符串是否与指定的模式匹配.模式可以包含常规字符和通配符字符.模式匹配过程中,常规字符必须与字符串中指定的字符完全匹配.然而,可使用字符串的任意片段匹配通配符.与使用 = 和 != 字符串比 ...
linux install oracle jdk
1 到oracle 官方网站下载jdk1.7 2 然后mv到 /usr/local/目录下 2.1 path 下添加/usr/sbin/ 3 使用update-alternative用来对系统中不同版 ...
【debian】给用户添加sudo权限
新装的debian系统默认是没有sudo功能的. 于是,在root用户权限下: apt-get install sudo 然后再修改文件 /etc/sudoers : chmod +w /etc/su ...
spring线程池ThreadPoolTaskExecutor与阻塞队列BlockingQueue
一: ThreadPoolTaskExecutor是一个spring的线程池技术,查看代码可以看到这样一个字段: private ThreadPoolExecutor threadPoolExecut ...