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

随机推荐

[八分之三的男人] POJ - 1741 点分治 && 点分治笔记
题意:给出一棵带边权树,询问有多少点对的距离小于等于$k$ 本题解参考lyd的算法竞赛进阶指南,讲解的十分清晰,比网上那些讲的乱七八糟的好多了不过写起来还是困难重重(史诗巨作打完多校更详细做法 ...
springMVC中一些功能
1.controller的生命周期 spring框架默认为单例模式,会使数据之间的传递互相影响,而springMVC给我们提供了request与session两个,request每次请求就会产生一个单 ...
maxscript批量设置摄像机并保存渲染图
代码可直接运行 fn renderr = ( a=box() --新建一个立方体 ambientcolor = (color ) --设置环境光(搞不太懂,白的不出错就行) to do ( dis = ...
iview 怎样屏蔽掉账户框自动显示账户名和密码（root，***）
用iview框架做出的登录页面,账户名和密码显示框,会自动有占位信息(root,****) 后来解决问题发现,只要在真正的输入框下面添加这样的一行隐藏的代码,占位信息会自动填充到隐藏的input框内, ...
Python+Selenium之常用模块
要用webdriver:from selenium import webdriver eg: driver = webdriver.Chrome() driver.maximize_wind ...
文件IO（存取.txt文件）
//存文件方法 public void Save_File_Info(string Save_Path) { //根据路径,创建文件和数据流 FileStream FS = new FileStrea ...
MySQL数据表的修改
数据表的修改包括列的增加.列的删除.约束的添加.约束的删除等. 添加单列 ALTER TABLE tbl_name ADD [COLUMN] col_name column_definition [F ...
Robot Framework_Ride（Edit标签）
前言 RIDE 作为 Robot Framework 的“脸面”,虽然我们已经可以拿它来创建和运行测试了,但我们对它的认识并不全面,这一小节我们将了解这个工具的使用 Edit标签下面我们来看一看测试 ...
android httpclient 发送 PATCH 请求
Put 用于全部更新 Patch 用于部分更新重写一下 HttpPut 或 HttpPost 的 getMethod 方法 /** * Send a patch request */ public ...
九度oj 1034 寻找大富翁 2009年浙江大学计算机及软件工程研究生机试真题
题目1034:寻找大富翁时间限制:1 秒内存限制:32 兆特殊判题:否提交:5323 解决:2123 题目描述: 浙江桐乡乌镇共有n个人,请找出该镇上的前m个大富翁. 输入: ...

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

任务目的

任务描述

task.html

task.js

任务注意事项

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

随机推荐

热门专题