任务十三：零基础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页面代 ...
随机推荐
- 小众软件：windows 系统下 exe 文件打包软件
1. Enigma Virtual Box 单文件打包软件 官网:EnigmaProtection 2. 安装包打包软件 官网:Inno Setup 参考文献: [1] 单文件制作工具Enigma V ...
- [转] Hive函数大全
1.内置运算符 1.1关系运算符 运算符 类型 说明 A = B 所有原始类型 如果A与B相等,返回TRUE,否则返回FALSE A == B 无 失败,因为无效的语法. SQL使用”=”,不使用”= ...
- List与IList的区别
在我看一个源程序的时候看到这个例子使用了IList<T>返回类型,因为上午刚刚总结过List<T>的详细用法,突然出现了IList<T>,感觉很奇怪,于是上网搜集了 ...
- Javascript面向对象编程（转）
http://blog.csdn.net/lmj623565791/article/details/29210679 其实,从这个面向对象编程的例子来看,思路还是很清晰的. 第一步: 构造函数,用于初 ...
- c++ 网络编程（七） LINUX下 socket编程 基于套接字的标准I/O函数使用 与 fopen,feof,fgets,fputs函数用法
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9614820.html 一.标准I/O 1,什么是标准I/O?其实是指C语言里的文件操作函数,如 ...
- 【Lua】LWT后台用JSON与 ExtJS传递数据
要完成目录树的构建,需要前台ExtJS构筑页面,后台处理逻辑,中间由JSON传递数据. 首先搭建后台环境: require "httpd" require "lfs&qu ...
- unity换装系统+网格合并
这里的做法是模型把所有衣服全部穿上作为一个资源 然后还有一个只有骨骼信息的骨架资源 将这2个制作好了Prefab 模型部件数据 资源数据 [代码] using System.Collections; ...
- 【百度之星2014~复赛 解题报告~正解】The Query on the Tree
声明 笔者最近意外的发现 笔者的个人网站http://tiankonguse.com/ 的很多文章被其它网站转载,但是转载时未声明文章来源或参考自 http://tiankonguse.com/ 网站 ...
- [转].Net Core Web应用发布至IIS后报“An error occurred while starting the application”错误
本文转自:http://www.cnblogs.com/TomGui/p/6438686.html An error occurred while starting the application. ...
- D3基础---简介和数据
D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. d3获取:http://d3js.org/ 在代码文件中引入D ...