首页 > 代码库 > 任务十六：零基础JavaScript编码（四）

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

2024-09-19 20:47:05   218人阅读

任务目的

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

任务描述

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

task.html

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
    <script src="http://www.mamicode.com/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 = http://www.mamicode.com/{"北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = http://www.mamicode.com/{};>

任务注意事项


    

  • 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
    • 

  • 请注意代码风格的整齐、优雅
    • 

  • 代码中含有必要的注释
    • 

  • 验证输入逻辑可以在失去焦点时判断，也可以在点击按钮时判断
    • 

  • 建议不使用任何第三方库、框架
    • 

  • 示例代码仅为示例，可以直接使用，也可以完全自己重写
    • 



 


 


任务完成与总结：


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




//定义一个对象
var aqiData =http://www.mamicode.com/ {};

/**
 * 从用户输入中获取数据，向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 === 0) {
            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[0].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 =http://www.mamicode.com/ {};
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 =http://www.mamicode.com/ value_input.value.trim();

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

    //正则匹配城市名称
    var regCity = /^[a-zA-Z\u4E00-\u9FA5]+$/ ;
    //正则匹配空气质量（整数）
    var regValue = http://www.mamicode.com/[/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);
}




 






/**




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




 
 * 示例格式：




 
 * aqiData = http://www.mamicode.com/{




 
 *    "北京": 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编码（四）


联系
我们