任务十六：零基础JavaScript编码（四）

任务目的

在上一任务基础上继续JavaScript的体验
深入学习JavaScript的事件机制及DOM操作
学习事件代理机制
学习简单的表单验证功能
学习外部加载JavaScript文件

任务描述

参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示
用户输入的城市名必须为中英文字符，空气质量指数必须为整数
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）
用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）
用户可以点击表格列中的“删除”按钮，删掉那一行的数据

task.html

<!DOCTYPE>

<html>

  <head>

    <meta charset="utf-8">

    <title>IFE JavaScript Task 01</title>

    <script src="task.js"></script>

  </head>

<body>

  <div>

    <label>城市名称：<input id="aqi-city-input" type="text"></label><br>

    <label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>

    <button id="add-btn">确认添加</button>

  </div>

  <table id="aqi-table">

  <!--

    <tr>

      <td>城市</td><td>空气质量</td><td>操作</td>

    </tr>

    <tr>

      <td>北京</td><td>90</td><td><button>删除</button></td>

    </tr>

    <tr>

      <td>北京</td><td>90</td><td><button>删除</button></td>

    </tr>

   -->

  </table>

</body>

</html>

task.js

/**

 * aqiData，存储用户输入的空气指数数据

 * 示例格式：

 * aqiData = {

 *    "北京": 90,

 *    "上海": 40

 * };

 */

var aqiData = {};

/**

 * 从用户输入中获取数据，向aqiData中增加一条数据

 * 然后渲染aqi-list列表，增加新增的数据

 */

function addAqiData() {

}

/**

 * 渲染aqi-table表格

 */

function renderAqiList() {

}

/**

 * 点击add-btn时的处理逻辑

 * 获取用户输入，更新数据，并进行页面呈现的更新

 */

function addBtnHandle() {

  addAqiData();

  renderAqiList();

}

/**

 * 点击各个删除按钮的时候的处理逻辑

 * 获取哪个城市数据被删，删除数据，更新表格显示

 */

function delBtnHandle() {

  // do sth.

  renderAqiList();

}

function init() {

  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数

  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数

}

init();

任务注意事项

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

任务完成与总结：

看完其他人的代码，开始怀疑自己到底适不适合当程序猿了，真是吃力，只能理解一部分，代码献上：

//定义一个对象

var aqiData = {};

/**

 * 从用户输入中获取数据，向aqiData中增加一条数据

 * 然后渲染aqi-list列表，增加新增的数据

 */

function addAqiData() {

    //trim() 可以删除字符串前后的空格字符,但是中间的空格符却消除不了

    var strCity = document.getElementById("aqi-city-input").value.trim();

    var strAqi = document.getElementById("aqi-value-input").value.trim();

    //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

    if (!strCity.match(/^[A-Za-z\u4E00-\u9FA5]+$/)) {

        alert("城市名必须为中英文字符！");

        return;

    }

    if (!strAqi.match(/^\d+$/)) {

        alert("空气质量指数必须为整数！");

        return;

    }

    //定义相应对象的属性值

    aqiData[strCity] = strAqi;

}

/**

 * 渲染aqi-table表格

 */

function renderAqiList() {

    var table = document.getElementById("aqi-table");

    table.innerHTML = "";

    for (var strCity in aqiData) {

        if (table.children.length === ) {

            table.innerHTML = "<tr> <td>城市</td> <td>空气质量</td> <td>操作</td> </tr>";

        }

        //创建一个tr对象

        var tr = document.createElement("tr");

        var td1 = document.createElement("td");

        td1.innerHTML = strCity;

        tr.appendChild(td1);

        var td2 = document.createElement("td");

        td2.innerHTML = aqiData[strCity];

        tr.appendChild(td2);

        var td3 = document.createElement("td");

        td3.innerHTML = "<button class='del-btn'>删除</button>";

        tr.appendChild(td3);

        table.appendChild(tr);

    }

}

/**

 * 点击add-btn时的处理逻辑

 * 获取用户输入，更新数据，并进行页面呈现的更新

 */

function addBtnHandle() {

    addAqiData();

    renderAqiList();

}

/**

 * 点击各个删除按钮的时候的处理逻辑

 * 获取哪个城市数据被删，删除数据，更新表格显示

 */

function delBtnHandle(target) {

    var tr = target.parentElement.parentElement;

    var strCity = tr.children[].innerHTML;

    delete aqiData[strCity];

    renderAqiList();

}

function init() {

    // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数

    var btnAdd = document.getElementById("add-btn");

    btnAdd.onclick = addBtnHandle;

    // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数

    var table = document.getElementById("aqi-table");

    var arrBtnDel = table.getElementsByClassName("del-btn");

    table.addEventListener("click", function(e) {

        if (e.target && e.target.nodeName === "BUTTON") {

            delBtnHandle(e.target);

        }

    })

}

init();

效果演示

另一个案例：

var aqiData = {};

var city_input  = document.getElementById("aqi-city-input") ;

var value_input = document.getElementById("aqi-value-input");

var addBtn = document.getElementById("add-btn");

var table  = document.getElementById("aqi-table");

var delBtn = table.getElementsByTagName("button");

/**

 * 从用户输入中获取数据，向aqiData中增加一条数据

 * 然后渲染aqi-list列表，增加新增的数据

 */

function addAqiData() {

    //获取输入的内容

    //trim()去首尾空格

    var city  = city_input.value.trim() ;

    var value = value_input.value.trim();

    //标识，当都为真时才能进行添加操作

    var cityflag  = false;

    var valueflag = false;

    //正则匹配城市名称

    var regCity = /^[a-zA-Z\u4E00-\u9FA5]+$/ ;

    //正则匹配空气质量（整数）

    var regValue = /[\d*]/;

    //匹配城市

    if( !regCity.test(city) )

    {

        alert("城市名称必须是中英文字符！");

        city_input.value  = '';        //清除数据

    }

    else cityflag = true;

    //匹配空气质量指数

    if( !regValue.test(value) )

    {

        alert("空气质量指数必须为整数!");

        value_input.value = '';

    }

    else valueflag = true;

    if( cityflag && valueflag )

        aqiData[city]  = value ;

}

/**

 * 渲染aqi-table表格

 */

function renderAqiList() {

    var tr = '<tr>'+'<td>'+'城市'+'</td>'+'<td>'+'空气质量'+'</td>'+'<td>'+'操作'+'</td>'+'</tr>';

    var i = ;

    for ( var x in aqiData ){

        tr += '<tr>'+'<td>'+x+'</td>'+'<td>'+aqiData[x]+'</td>'+'<td>'+"<button onclick='delBtnHandle(\""+x+"\")'>"+'删除'+'</button>'+'</td>'+'</tr>';

        }

    table.innerHTML = tr;

}

/**

 * 点击add-btn时的处理逻辑

 * 获取用户输入，更新数据，并进行页面呈现的更新

 */

function addBtnHandle() {

  addAqiData();

  renderAqiList();

}

/**

 * 点击各个删除按钮的时候的处理逻辑

 * 获取哪个城市数据被删，删除数据，更新表格显示

 */

function delBtnHandle(city) {

  // do sth.

  delete aqiData[city] ;

  renderAqiList();

}

window.onload = function () {

  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数

  addBtn.addEventListener("click",addBtnHandle);

}

/**
	* aqiData，存储用户输入的空气指数数据
	* 示例格式：
	* aqiData = {
	* "北京": 90,
	* "上海": 40
	* };
	*/
	var aqiData = {};
	var city_input = document.getElementById("aqi-city-input") ;
	var value_input = document.getElementById("aqi-value-input");
	var addBtn = document.getElementById("add-btn");
	var table = document.getElementById("aqi-table");
	var delBtn = table.getElementsByTagName("button");

	/**
	* 从用户输入中获取数据，向aqiData中增加一条数据
	* 然后渲染aqi-list列表，增加新增的数据
	*/
	function addAqiData() {
	//获取输入的内容
	//trim()去首尾空格
	var city = city_input.value.trim() ;
	var value = value_input.value.trim();

	//标识，当都为真时才能进行添加操作
	var cityflag = false;
	var valueflag = false;

	//正则匹配城市名称
	var regCity = /^[a-zA-Z\u4E00-\u9FA5]+$/ ;
	//正则匹配空气质量（整数）
	var regValue = /[\d*]/;

	//匹配城市
	if( !regCity.test(city) )
	{
	alert("城市名称必须是中英文字符！");
	city_input.value = ''; //清除数据
	}
	else cityflag = true;

	//匹配空气质量指数
	if( !regValue.test(value) )
	{
	alert("空气质量指数必须为整数!");
	value_input.value = '';
	}
	else valueflag = true;

	if( cityflag && valueflag )
	aqiData[city] = value ;
	}

	/**
	* 渲染aqi-table表格
	*/
	function renderAqiList() {
	var tr = '<tr>'+'<td>'+'城市'+'</td>'+'<td>'+'空气质量'+'</td>'+'<td>'+'操作'+'</td>'+'</tr>';
	var i = 0;
	for ( var x in aqiData ){
	tr += '<tr>'+'<td>'+x+'</td>'+'<td>'+aqiData[x]+'</td>'+'<td>'+"<button onclick='delBtnHandle(\""+x+"\")'>"+'删除'+'</button>'+'</td>'+'</tr>';
	}
	table.innerHTML = tr;
	}

	/**
	* 点击add-btn时的处理逻辑
	* 获取用户输入，更新数据，并进行页面呈现的更新
	*/
	function addBtnHandle() {
	addAqiData();
	renderAqiList();
	}

	/**
	* 点击各个删除按钮的时候的处理逻辑
	* 获取哪个城市数据被删，删除数据，更新表格显示
	*/
	function delBtnHandle(city) {
	// do sth.
	delete aqiData[city] ;
	renderAqiList();
	}

	window.onload = function () {
	// 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
	addBtn.addEventListener("click",addBtnHandle);
	}

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

零基础JavaScript编码（三）总结
任务目的在上一任务基础上继续JavaScript的体验接触一下JavaScript中的高级选择器学习JavaScript中的数组对象遍历.读写.排序等操作学习简单的字符串处理操作任务描述参 ...
零基础JavaScript编码（二）
任务目的在上一任务基础上继续JavaScript的体验学习JavaScript中的if判断语法,for循环语法学习JavaScript中的数组对象学习如何读取.处理数据,并动态创建.修改DOM ...
零基础JavaScript编码（一）
任务目的 JavaScript初体验初步明白JavaScript的简单基本语法,如变量.函数初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任务描述参考以 ...
任务十四：零基础JavaScript编码（二）
任务目的在上一任务基础上继续JavaScript的体验学习JavaScript中的if判断语法,for循环语法学习JavaScript中的数组对象学习如何读取.处理数据,并动态创建.修改DOM ...
任务十五：零基础JavaScript编码（三）
任务目的在上一任务基础上继续JavaScript的体验接触一下JavaScript中的高级选择器学习JavaScript中的数组对象遍历.读写.排序等操作学习简单的字符串处理操作任务描述参 ...
任务十七：零基础JavaScript编码（五）
任务目的在上一任务基础上继续JavaScript的体验接触更加复杂的表单对象实现页面上的一个完整交互功能用DOM实现一个柱状图图表任务描述参考以下示例代码,原始数据包含几个城市的空气质量指 ...
任务十三：零基础JavaScript编码（一）
任务目的 JavaScript初体验初步明白JavaScript的简单基本语法,如变量.函数初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任务描述参考以 ...
十六. Python基础(16)--内置函数-2
十六. Python基础(16)--内置函数-2 1 ● 内置函数format() Convert a value to a "formatted" representation. ...
第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

随机推荐

【Python】子域名查询脚本
脚本学习,多写写就会啦,来一发个人编写的超级无敌low的子域名查询脚本 #coding:utf-8 import re import requests import urllib import url ...
css一些常用技巧代码
图片等比例自动缩放 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 多行省略最后line-clamp设 ...
WinForm GDI编程：Graphics画布类
命名空间: using System.Drawing;//提供对GDI+基本图形功能的访问 using System.Drawing.Drawing2D;//提供高级的二维和矢量图像功能 using ...
oracle12c之一控制-PDB的磁盘I/O(IOPS,MBPS)资源管理
在以前的版本中,没有简单的方法来控制单个PDB使用的磁盘I / O量. 因此,某个PDB可能耗尽大量磁盘I / O,并影响同一实例中的其他PDB的性能. Oracle 12c R2可以控制PDB使用的 ...
AngularJs学习笔记--Injecting Services Into Controllers
原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...
sencha touch list infinite 属性
sencha touch list 1 默认每一项的高度会自动适应其内容. 2 当每一个 item 的高度都相同且不变时, 设置 itemHeight 为固定值和 variableHeights 为 ...
Kafka 0.9 新特性
Kafka发布0.9了,这一重磅消息,让小伙伴们激动不已,来看看这个版本有哪些值得关注的地方吧! 一.安全特性在0.9之前,Kafka安全方面的考虑几乎为0,在进行外网传输时,只好通过Linux的防 ...
【wordpress】wordpress环境的搭建
WordPress WordPress 是一种使用 PHP语言和 MySQL数据库开发的开源.免费的Blog(博客,网志)引擎,用户可以在支持 PHP 和 MySQL 数据库的服务器上建立自己的 Bl ...
HTML5在线状态检测和DOM Storage
除了离线资源缓存外,html5离线应用开发还可能用到以下技术在线状态检测 navigator.onLine navigator.onLine 属性表示当前是否在线.如果为 true, 表示在线:如果 ...
php数组操作，js数组操作
俩语言一块儿学老混.整理一下. php: 1.声明: 1)$arr1 = array('key1' => 'value1', 'key2' => 'value2' ...);//关联数组, ...

任务十六：零基础JavaScript编码（四）

任务目的

任务描述

task.html

task.js

任务注意事项

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

随机推荐

热门专题