从零开始学习javascript项目(3)
任务描述
- 参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示
- 用户输入的城市名必须为中英文字符，空气质量指数必须为整数
- 用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（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
var aqiData = {};
function addAqiData() {
}
function renderAqiList() {
}
function addBtnHandle() {
addAqiData();
renderAqiList();
}
function delBtnHandle() {
renderAqiList();
}
function init() {
}
init();
任务规划
- html文件对js文件的引用
- 在用户点击提交以后抓取表单的数据
- 对表单的数据进行判断
- 把表单里面的数据放入一个数组里面（二维数组）
- 把数据按照正确的格式显示出来
- 在用户点击提交或者删除按钮的时候更新显示的数据。
对js文件的引用
<script src="xx.js"></script>//这里使用相对地址就好了，因为这个js文件的地址和html文件放在一个目录下面所以直接引用没问题
抓取表达数据
还是我们之前说了无数次的操作 DOM ,不罗嗦。
var cityInput = document.getElementById("aqi-city-input");
var aqiInput = document.getElementById("aqi-value-input");
把采集到的数据放入hash表中
由于这里涉及到用户的自由输入，所以我们需要对用户的数据进行一些必要的处理和保护措施，避免发生一些尴尬的结果。
- 删除输入数据前后文的空格
- 保证
cityInput里面为英文或者汉字 - 保证
aqiInput里面数据为数字
在完成以上三个步骤以后再把cityInput和aqiInput里面的数据放到一个hash表里面。
删除多余空格
我们先来回忆一下如果我们用 vim 应该怎么办？
删除行首
:%s/^\s+//
删除行尾
:%s/\s+$//
PS:( markdown 语法好像还不支持 vim script .拿 perl 的语法高亮将就一下了。不要在意这些细节。)
然而 javascript 里面并不需要我们这么做才能删除行首和行尾的空格。javascript 里面有一个自带的方法，那就是trim方法。实际上trim这个方法也是通过类似的方法实现删除行首行尾的空格的。但是我们并不能看到trim这个函数的执行过程。我并不清楚这个函数实际上用了怎么样的一个正则表达式。具体来说是这样用的。
var city = cityInput.value.trim();
var aqi = aqiInput.value.trim();
判断输入字符
-
城市名应当为中文或者英文
/^[A-Za-z\u4E00-\u9FA5]+$/ -
空气质量只能为数字
/^\d+$/
把采集到的数据放入关联数组里面
var aqiData = {};
aqiData[city] = aqi;
在点击删除和提交按钮的时候把数组打印出来
这部分也是操作DOM
//打印数组
function renderAqiList(){
var items = "<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>"
for(var city in aqiData){
items += "<tr><td>"+city+"</td><td>"+aqiData[city]+"</td><td><button data-city='"+city+"'>删除</button></td></tr>"
}
document.getElementById("aqi-table").innerHTML = city ? items : "";
}
//点击添加按钮执行的操作
function addBtnHandle(){
addAqiData();
renderAqiList();
}
//点击删除按钮执行的操作
function delBtnHandle(city) {
delete aqiData[city];
renderAqiList();
}
这样这一个任务就算完成了，其实我是想借助这个机会讲一讲原型链的，但是没有找到合适的机会，还是看我们下一个任务里面有没有合适的机会了。
