任务目的
- 在上一任务基础上继续JavaScript的体验
- 接触一下JavaScript中的高级选择器
- 学习JavaScript中的数组对象遍历、读写、排序等操作
- 学习简单的字符串处理操作
任务描述
- 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
- 将数据按照某种顺序排序后，在resort列表中按照顺序显示出来
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<ul id="source">
<li>北京空气质量：<b>90</b></li>
<li>上海空气质量：<b>70</b></li>
<li>天津空气质量：<b>80</b></li>
<li>广州空气质量：<b>50</b></li>
<li>深圳空气质量：<b>40</b></li>
<li>福州空气质量：<b>32</b></li>
<li>成都空气质量：<b>90</b></li>
</ul>
<ul id="resort">
<!--
<li>第一名：北京空气质量：<b>90</b></li>
<li>第二名：北京空气质量：<b>90</b></li>
<li>第三名：北京空气质量：<b>90</b></li>
-->
</ul>
<button id="sort-btn">排序</button>
<script type="text/javascript">
/**
* getData方法
* 读取id为source的列表，获取其中城市名字及城市对应的空气质量
* 返回一个数组，格式见函数中示例
*/
function getData() {
/*
coding here
*/
/*
data = [
["北京", 90],
["北京", 90]
……
]
*/
return data;
}
/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
}
/**
* render
* 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
function render(data) {
}
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
}
init();
</script>
</body>
</html>
任务注意事项
- 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 建议不使用任何第三方库、框架
- 示例代码仅为示例，可以直接使用，也可以完全自己重写
在线学习参考资料
基础JavaScript练习（一）总结
1、 JavaScript Objects
在JavaScript中，对象也是变量，用于存储数值，但是一个对象可以存储很多值，并且每个值以键值对的方式（name:value）存储。JavaScript中的name:value键值对被称为属性。
方法也可以存储在对象中，name：value，name为函数名，value为函数定义。
（1） 定义对象
eg: var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
(2)获取对象属性：
objectName.propertyName
或者
objectName["propertyName"]
(3)调用对象方法
- objectName.methodName()
如果未加(),objectName.methodName将返回这个名字方法的定义。
2、 HTML DOM createElement() Method
createelement()方法创建一个指定名字的元素节点。
注意：createTextNode()方法创建一个文本节点。节点创建完成之后，使用element.appendChild()或者element.insertBefore()方法将它插入document中。
语法：
document.createElement(nodename)
参数：nodename，类型：字符串，想创建的元素姓名。
返回值：一个元素对象，代表创建的元素节点。
3、 HTML DOM createTextNode() Method
HTML元素通常由元素节点和文本节点组成，createTextNode()方法用于创建一个文本节点
语法：
document.createTextNode(text)
text:类型：字符串，表示文本节点中的文本。
返回值：文本节点对象。
4、 HTML DOM setAttribute() Method
setAttribute()方法，向一个元素添加一个属性，并给它一个特定的值。如果添加前该元素有这个属性，则此方法仅改变或设置属性值。
注意：虽然可以使用setAttribute()方法向一个元素添加样式，但是最好使用Style对象（Style对象代表一个单独的样式语句）的属性，这个方法可能覆盖其他css样式。
Bad：element.setAttribute("style", "background-color: red;");
Good：element.style.backgroundColor = "red";
5、 HTML DOM appendChild() Method
appendChild()方法将一个节点作为最后一个子节点悬挂到另一个节点上。
语法：
node.appendChild(node)
node:类型：节点对象。想附加的节点。
返回值：一个节点对象，代表已附加的节点。
6、 HTML DOM insertBefore() Method
insertBefore()方法，将一个节点作为子节点插入到一个已经存在的节点之前。
语法：
node.insertBefore(newnode, existingnode)
newnode：类型：节点对象，想插入的新节点。
Existingnode：类型：节点对象，可选，已在document中的，想插入新节点之后的节点，如果没有指定时，将把新节点插入到最后。
返回值：一个节点对象，代表已插入的节点。
7、 HTML DOM removeChild() Method
removeChild()方法，从指定元素移除一个指定子节点。返回值为被移除的节点，如果要移除节点不存在，则返回null。
语法：
node.removeChild(node)
node：类型为：节点对象，要移除的节点
8、 已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-4