任务目的
- 在上一任务基础上继续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字符串
JavaScript字符串用于存储和操作文本，字符串可以为双引号（或单引号）中引起的任何文本。若最外层是双引号，字符串中可有单引号；若最外层为单引号，里面还可有双引号。
（1）特殊字符：字符串中不可有最外层引号相同类型的引号，如果需要有，前面添加转义字符（）。
（2）为了可读性要求，字符串不要长于80字符，当长于时80字符时，可使用两个字符串相加，或中间添加进行换行。
（3）字符串可以为对象
可以使用以下两种语句初始化字符串：
var x = "John";
var y
= new String("John");
x的类型为string，y的类型为object
“==”和“===”用于比较字符串是否相等。
x==y 返回值为true；
x===y 返回值为 false，因为x和y的类型不同。
若x和y都是对象
x==y 返回值为false。x和y是不同的对象。
x===y 返回值为false。x和y是不同的对象。
注意：==或===两个对象永远不相同。
（4）字符串方法
所有字符串方法的返回值均为新的字符串，它们并不改变原始字符串，因为字符串不可变：它不能被改变只能被替换。
①字符串长度
length属性返回字符串的长度。
②indexOf()方法
返回字符串中第一次出现指定文本的下标。当指定文本未出现时，返回-1。
③lastIndexOf()方法
返回字符串中最后一次出现指定文本的下标。当指定文本未出现时，返回-1。
④search()方法
返回字符串中第一次出现指定文本的下标。当指定文本未出现时，返回-1。
search()方法和indexof()方法参数和返回值均相同，但search()方法功能更强大。
⑤slice()方法
slice()方法从字符串中抽出一个子串，并且将子串以string类型返回。
此方法含有两个参数，子串起始下标，结束下标。
如果参数为负值，则从字符串后往前数。
如果参数为一个值，则截取从此位置到字符串结束的子串。
⑥substring()方法
substring()方法与slice()方法类似，不同的是substring()方法不接受负值。
⑦substr()方法
substr()方法与slice()方法类似，不同的是substr()方法第二个参数为要截取的子串长度。
⑧replace()方法
将原字符串中的一个子串替换为新的子串，通常替换一次，如果替换全部则使用g标记（for global match）。它并不改变原字符串而是返回替换后的新字符串。
eg: str.replace("Microsoft", "W3Schools");
str.replace(/Microsoft/g, "W3Schools");
⑨toUpperCase()方法
将一个字符串中每个字符转变为大写字符。
toLowerCase()方法
将一个字符串中每个字符转变为小写字符。
⑩concat() 方法
连接两个或多个字符串。也可用加号实现字符串连接。
⑩split()方法
可使用split()方法将字符串转换为数组，split()中的参数值为以什么分割字符串，当分隔符被省略时，数组中只包含唯一一个字符串元素，当分隔符为“”时，数组中的每个元素为一个字符。
⑩charAt()方法
charAt() 方法返回指定下标的character。
charCodeAt()方法返回指定下标的character的unicode。
2、 JavaScript 字符串match()方法
match()方法使用正则表达式匹配特定值，然后将匹配的值以数组对象的方式返回，若没有匹配成功则返回null。
注意：如果正则表达式，不包含g，match()方法将只返回第一个匹配的结果。
语法：
string.match(regexp)
3、已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-3