任务十六：零基础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是一种节点查找手段,对比之前使用标准 ...

随机推荐

Sklearn，TensorFlow，keras模型保存与读取
一.sklearn模型保存与读取 1.保存 from sklearn.externals import joblib from sklearn import svm X = [[0, 0], [1, ...
编译安装php-5.3.27报错：make: *** [sapi/fpm/php-fpm] 错误 1
安装PHP的时候make报错:make: *** [sapi/fpm/php-fpm] Error 1 原因:Centos6.8之后已经将iconv库加进来了,如果再安装libiconv库相当于重复一 ...
利用 Nginx 做反向代理解决微信小程序业务域名限制问题
参考网站:(下述两个参考网站可以完美解决问题) https://www.jianshu.com/p/47eff6eeec25 https://www.cnblogs.com/kenwar/p/8288 ...
（转）Go语言核心36讲之Go语言学习路线
c#中的引用类型和值类型
一,c#中的值类型和引用类型众所周知在c#中有两种基本类型,它们分别是值类型和引用类型:而每种类型都可以细分为如下类型: 什么是值类型和引用类型什么是值类型: 进一步研究文档,你会发现所有的结构都 ...
final学习
类加载过程 1.装载:查找和导入Class文件 2.链接:其中解析步骤是可以选择的 (a)检查:检查载入的class文件数据的正确性 (b)准备:给类的静态变量分配存储空间 (c)解析:将符号引用转成 ...
什么是DDL,DCL,DML
1.DCL 数据库控制语言,全称是Data Control Language 关键字类型:grant.remove 2.DDL 数据库定义语言,全称是Data Definition Language ...
mybatis 批量增加 Parameter '__frch_item_0' not found. Available parameters are [list]
当在mybatis用到foreach的时候,会报这个错误Parameter '__frch_item_0' not found. Available parameters are [list]会出现的 ...
Android如何避免输入法弹出时遮挡住按钮或输入框
在AndroidManifest.xml中为对应的activity添加android:windowSoftInputMode="adjustResize" 在AndroidMani ...
Linux 信号signal处理函数--转
alarm(设置信号传送闹钟)相关函数 signal,sleep 表头文件 #include<unistd.h> 定义函数 unsigned int alarm(unsigned int ...

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

任务目的

任务描述

task.html

task.js

任务注意事项

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

随机推荐

热门专题