百度前端技术学院task13-task15的总结

前言：之前学了js，但是都是基础，而且前段时间忙期末，忙专利，也忘得差不多了。。。最近在看js高级程序设计，感觉收获挺多。本来想每看一个阶段就来这里写一下读书笔记的，但是又觉得有点浪费时间，还是就在书上写写画画算了。以后用到再进一步具体总结。这两天写了三个小任务，来总结一下吧。

task13
代码：https://github.com/sunyueru/IFE/tree/master/task13
demo：https://sunyueru.github.io/IFE/task13/task13.html

这个任务比较简单，而且题目也给好了框架。大体上就是一个自调用函数里面有一个事件处理函数，然后给按钮绑定点击事件就可以。
主要就是要注意判断条件，我一开始就没加 。。。还有一个小优化，我也是review别人的代码学到的，就是添加onkeyup事件。
下面说一下onkeyup这个之前没有接触过的知识点吧：
onkeyup事件本身不难，在js中的语法就是：object.οnkeyup=function(){};
指的是键盘松开时发生。
结合这段代码来看一下：

input.onkeyup=function(event){
            if(event.keyCode===13){
                handle();
            }
        }

这里的function传入的是一个event对象（之后细说这个对象的知识点），接着event有一个属性keyCode，它指的是被敲击的键的虚拟键盘码。这里13对应的就是enter。
所以这段代码的意思就是按回车键，执行handle（）函数。

task14
代码：https://github.com/sunyueru/IFE/blob/master/task14/task14.html
demo：https://sunyueru.github.io/IFE/task14/task14.html

这个任务我想记录两个知识点：

1. 数组排序以及二维数组的排序
2. 如何动态的创建dom的内容。

3. 最后就是要记得先排序再筛选，总体逻辑要清晰。

   数组排序sort（）
   先来说明一下sort函数：
   sort（）函数本身是通过比较字符串来实现排序的，所以直接使用的时候必然不理想。sort函数可以接受一个比较函数作为参数，来指定排序方式。
   例如：

function compare(value1,value2){
    if(value1<value2){
        return -1;
    }else if(value1>value2){
        return 1;
    }else{
       return 0;
    }   
}

简单写就是：

function compare(a,b)
{
return a - b
}

var values=[1,,3,5,10,2];
values.sort(compare);
alert(values);//1,2,3,5,10

至于为什么传入compare就可以做到按序排列，涉及冒泡排序的思想以及高阶函数的知识。不细说了，我也说不太明白。。。。
那么，如果一个数组是二维的，第一项不是数字，要给第二项排序，怎么办呢？

    var aqiData=[
     ["北京",90],
     ["上海",50],
     ["福州",10],
     ["广州",50],
     ["成都",90],
     ["西安",100]
    ];

  aqiData.sort(function(a,b){
           return b[1]-a[1];
       })

比如这里aqiData是一个二维数组。那么对应的a,b也应该是一个二维数组对象，所以在排序的时候返回值应该是数组的第二项（第二项才是数字），a[1]和b[1]的差值。
最后啰嗦一下，sort返回值是被排序之后的数组。也就是说会改变原有数组。
动态创建dom内容

var myLi=document.createElement("li");
myLi.innerHTML="第"+num[i]+"名:"+aqiData[i][0]+','+aqiData[i][1];
aqiList.appendChild(myLi);

createElement是创建一个对象，一般要和appendChild一起使用。
执行完第一句代码之后，就会创建一对<li></li>标签。可以自己console.log看看。然后就是定义li里面的内容，最后就是使用appendChild，把创建的标签加到其父元素上面。

function render(data) {
   var resort=document.getElementById("resort");
   var list=["一","二","三","四","五","六","七"];
   var myinnerHTML="";
   for(var i=0;i<data.length;i++){
       myinnerHTML += "<li>第"+list[i]+"名："+data[i][0]+"空气质量："+"<b>"+data[i][1]+"</b></li>";
   }
     resort.innerHTML=myinnerHTML;
}

还有一种就是不使用createElement，直接通过字符串的拼接，不断添加内容。
要注意几点：

• 不要忘记初始化myinnerHTML，即 var myinnerHTML=”“;
• 因为不止要创建一对li标签，所以不要忘记是字符串的拼接，也就是使用“+=”
• 最后结束了for循环了，就把object的innerHTML设置为拼接好的字符串就行了。

task15

代码：https://github.com/sunyueru/IFE/tree/master/task15
demo：https://sunyueru.github.io/IFE/task15/task15.html
这个任务的框架题目也搭建好了，最开始调用init（）函数。init函数就是一个按钮点击触发事件。触发事件函数内部又有几个小函数，分别是读取数据，给数据排序，把数据动态添加到dom里。
写的时候，render函数和前一个任务差不多，排序也没问题了。主要就是getData函数写的时候，小bug不断的。。。。还是对dom的操作不够熟悉。

function getData() {
     var ul=document.getElementById("source");
     var lis=ul.getElementsByTagName("li");
     var data=new Array();
     for(var i=0;i<lis.length;i++){
         var city=lis[i].innerHTML.split("空气质量：")[0];
         // var num=lis[i].getElementsByTagName("b")[0],不加[0]试试？
         var num=lis[i].getElementsByTagName("b")[0].innerHTML;
         data.push([city,num]);
     }
     //alert(data);
     return data;
}

getData的主要任务就是要从一串字符中选取你需要的片段。

• 如何获取城市名
• 如何获取数字
  城市名称的获取主要是要用到string对象的split方法。
  先说一下这个方法的语法：
  

var city=lis[i].innerHTML.split("空气质量：")[0];

对应这里的代码解释：因为通过“空气质量：”切割之后返回的数组有两个元素，第一个元素是城市，这个不难。只要注意lis【i】是一个object，后面不要忘记加innerHTML。
可以试一下console.log第二个元素是什么？
console.log(lis[0].innerHTML.split("空气质量：")[1])
结果是：<b>数字</b>.
所以直接写var city=lis[i].innerHTML.split("空气质量：")[1];
是不行的。这条路貌似走不通，其实我觉得有办法，但是我没有继续了。
所以如何获取数字？
思路就是直接通过getElementsByTagName（“b”）
但是这里有一个问题没有想通，就是这个返回的是一个数组？
所以需要在后面加【0】，不加有问题。
错误代码：

 var num=lis[i].getElementsByTagName("b").innerHTML;

正确代码：

 var num=lis[i].getElementsByTagName("b")[0].innerHTML;

我再研究研究，之后再来追加修改吧。

最后需要注意的就是使用push来追加data数组元素。栈方法
每次添加一个data【i】，每个data【i】都是一个数组【city，num】
这个注意一下就行，data是一个二维数组撒。