Element.children[0].firstChild是Object
Element.children[0].firstChild.textContent是String
js区域变量嵌套？
什么时候异步什么时候同步？
JavaScript最基础的异步函数是setTimeout和setInterval。setTimeout会在一定时间后执行给定的函数。它接受一个回调函数作为第一参数和一个毫秒时间作为第二参数。
异步Javascript与XML（AJAX）永久性的改变了Javascript语言的状况。突然间，浏览器不再需要重新加载即可更新web页面。在不同的浏览器中实现Ajax的代码可能漫长并且乏味；但是，幸亏有jQuery（还有其他库）的帮助，我们能够以很容易并且优雅的方式实现客户端-服务器端通讯。
我们可以使用jQuery跨浏览器接口$.ajax很容易地检索数据，然而却不能呈现幕后发生了什么。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #container div{
      min-width: 50px;
      min-height: 20px;
      display: inline-block;
      padding: 5px;
      border: 1px solid #aaa;
      background: #FFF;
    }
  </style>
</head>
<body>
  <div id="container">
    <div>老头
      <div>蛤
        <div>著作
          <div>三篇</div>
          <div>华莱士</div>
          <div>谈笑风生</div>
        </div>
        <div>
          +1s
        </div>
      </div>
      <div>川
        <div>
          没毛病
        </div>
        <div>刚
          <div>推特</div>
          <div>纽约时报</div>
        </div>
        
      </div>
    </div>
  </div>
  <br>
  <div>
    <button id="DLR">前序遍历</button>
    <button id="LRD">后序遍历</button>
  </div>
  <br>
  <div>
    <input id="lookup-input" type="text" value="蛤">
    <button id="lookup-btn">Search</button>
  </div>
  <script>
    
    var time1 = 500;
    var time2 = 1000;
    var processing = false;
    var container = document.getElementById('container');
    var btnDLR = document.getElementById('DLR');
    var btnLRD = document.getElementById('LRD');
    var lookupInput = document.getElementById('lookup-input');
    var lookupBtn =document.getElementById('lookup-btn');

    function colorDiv(x){
      x.style.background = "#aaa";
    }

    function uncolorDiv(x){
      x.style.background = "#FFF";
    }

    function colorDivRed(x){
      time1 += 500;
      time2 += 500;
      timer = setTimeout(function(){
        x.style.background = "#ccaaaa";
      },time1); 
    }
    function colorThenUncolor(x){
      time1 += 500;
      time2 += 500;
      // 上色
      timer = setTimeout(function(){
        colorDiv(x);
      },time1);
      // 去色
      timer = setTimeout(function(){
        uncolorDiv(x);
      },time2);
    }

    // DLR
    function preOrder(x){
      if(!(x==null)){
        colorThenUncolor(x);
        for(var i=0;i<x.children.length;i++){
          preOrder(x.children[i]);
        }

      }
    }


    // LRD
    function postOrder(x){
      if(!(x==null)){
        for(var i=0;i<x.children.length;i++){
          preOrder(x.children[i]);
        }
        colorThenUncolor(x);
      }
    }

    var find = 0;
    // lookup
    function lookUp(x,word){
      
      if(!(x==null)){
        if(x.firstChild.textContent.trim()==word){
          colorDivRed(x);
          find++;
        }else{
          colorThenUncolor(x);
        }
        for(var i=0;i<x.children.length;i++){
          lookUp(x.children[i],word);
        }

      }
      return find;
    }


    // 绑定事件
    btnDLR.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      preOrder(container.firstElementChild);
    });
    btnLRD.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      postOrder(container.firstElementChild);
    });

    lookupBtn.addEventListener('click',function(){
      find = 0;
      time1 = 500;
      time2 = 1000;
      var findresult = lookUp(container.firstElementChild,lookupInput.value.trim())
      timer = setTimeout(function(){
        if(!findresult){
          alert("Not Found!");
        }
      },time2);
      // lookUp(container.firstElementChild,lookupInput.value.trim());
      
    });
  </script>
</body>
</html>

2017-03-03

任务七：JavaScript和树（一）

Lesson

任务七：JavaScript和树（一）

Target

熟练JavaScript
学习树这种数据结构的基本知识

Reference

Demo

Example Page

Note

DOM中Node节点和Element节点

Node节点包括#text，回车和空格都会作为#text；而Element节点只有HTML内容，不包括#text
Element.children属性
返回一个HTMLCollection对象，包括当前元素节点的所有子元素。它是一个类似数组的动态对象（实时反映网页元素的变化）。如果当前元素没有子元素，则返回的对象包含零个成员。
与Node.childNodes属性的区别是，它只包括HTML元素类型的子节点，不包括其他类型的子节点。
Node.nextSibling属性
返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。注意，该属性还包括文本节点和评论节点。因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格。
Node.previousSibling
previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。
Node.parentNode
parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：element节点、document节点和documentfragment节点。
Node.parentElement
parentElement属性返回当前节点的父Element节点。如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。
Node.firstChild，Node.lastChild
firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null（注意，不是undefined）。

树的数据结构

（1）前序遍历（DLR），首先访问根结点，然后遍历左子树，最后遍历右子树。简记根-左-右。

（2）中序遍历（LDR），首先遍历左子树，然后访问根结点，最后遍历右子树。简记左-根-右。

（3）后序遍历（LRD），首先遍历左子树，然后遍历右子树，最后访问根结点。简记左-右-根。

Tips

setTimeout用第2种方法时声明时直接就调用了

<style>
        timer = setTimeout(function(){
          colorDiv(x);
        },1000);
        //一秒延时

        timer = setTimeout(colorDiv(x),1000)
        //无延时
</style>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #container div{
      min-width: 50px;
      min-height: 20px;
      display: inline-block;
      padding: 5px;
      border: 1px solid #aaa;
      background: #FFF;
    }
  </style>
</head>
<body>
  <div id="container">
    <div>
      <div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div>
    <button id="DLR">前序遍历</button>
    <button id="LDR">中序遍历</button>
    <button id="LRD">后序遍历</button>
  </div>
  <script>
    
    var time1 = 500;
    var time2 = 1000;

    var container = document.getElementById('container');
    var btnDLR = document.getElementById('DLR');
    var btnLDR = document.getElementById('LDR');
    var btnLRD = document.getElementById('LRD');

    function colorDiv(x){
      x.style.background = "#aaa";
    }

    function uncolorDiv(x){
      x.style.background = "#FFF";
    }

    // DLR
    function preOrder(x){
      if(!(x==null)){
        time1 += 500;
        time2 += 500;
        // 上色
        timer = setTimeout(function(){
          colorDiv(x);
        },time1);
        // 去色
        timer = setTimeout(function(){
          uncolorDiv(x);
        },time2);

        preOrder(x.children[0]);
        preOrder(x.children[1]);
      }
    }

    // LDR
    function inOrder(x){
      if(!(x==null)){
        inOrder(x.children[0]);

        time1 += 500;
        time2 += 500;
        // 上色
        timer = setTimeout(function(){
          colorDiv(x);
        },time1);
        // 去色
        timer = setTimeout(function(){
          uncolorDiv(x);
        },time2);


        inOrder(x.children[1]);
      }
    }

    // LRD
    function postOrder(x){
      if(!(x==null)){

        postOrder(x.children[0]); 
        postOrder(x.children[1]);
        
        time1 += 500;
        time2 += 500;
        // 上色
        timer = setTimeout(function(){
          colorDiv(x);
        },time1);
        // 去色
        timer = setTimeout(function(){
          uncolorDiv(x);
        },time2);
      }
    }



    // 绑定事件
    btnDLR.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      preOrder(container.firstElementChild);
    });
    btnLDR.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      inOrder(container.firstElementChild);
    });
    btnLRD.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      postOrder(container.firstElementChild);
    });
  </script>
</body>
</html>

2017-03-02

任务六：基础JavaScript练习（三）

Lesson

任务六：基础JavaScript练习

Reference

Demo

Example Page

Note

正则方法

test()：正则对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。
match()：返回一个数组，成员是所有匹配的子字符串。
search()：按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。
replace()：按照给定的正则表达式进行替换，返回替换后的字符串。
split()：按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。

正则特殊字

\cX 表示Ctrl-[X]，其中的X是A-Z之中任一个英文字母，用来匹配控制字符。
[\b] 匹配退格键(U+0008)，不要与\b混淆。
\n 匹配换行键。
\r 匹配回车键。
\t 匹配制表符tab（U+0009）。
\v 匹配垂直制表符（U+000B）。
\f 匹配换页符（U+000C）。
\0 匹配null字符（U+0000）。
\xhh 匹配一个以两位十六进制数（\x00-\xFF）表示的字符。
\uhhhh 匹配一个以四位十六进制数（\u0000-\uFFFF）表示的unicode字符。

正则预定义

\d 匹配0-9之间的任一数字，相当于[0-9]。
\D 匹配所有0-9以外的字符，相当于[^0-9]。
\w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9]。
\W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9]。
\s 匹配空格（包括制表符、空格符、断行符等），相等于[\t\r\n\v\f]。
\S 匹配非空格的字符，相当于[^\t\r\n\v\f]。
\b 匹配词的边界。
\B 匹配非词边界，即在词的内部。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #display{
      list-style: none;
      margin: 5px 0;
      padding: 0;
    }
    #display li{
      list-style: none;
      display: inline-block;
      padding: 5px;
      margin:0 5px 5px 0;
      border:1px solid #aaa;
      background: #eee;
      font-size:10px;
      color: #aaa;
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <div id="insert-div">
    <h3>Insert/ Delete</h3>
    <!-- <input type="text" id="input-text"> -->
    <textarea name="input-text" id="input-text" cols="30" rows="10">华莱士,蛤三篇、233 大新闻
蛤蛤</textarea>
    <br>
    <button id="leftin" value="LeftIn">LeftIn</button>
    <button id="rightin" value="RightIn">RightIn</button>
    <button id="leftout" value="LeftOut">LeftOut</button>
    <button id="rightout" value="RightOut">RightOut</button>
  </div>
  <hr/>
  <div id="search-div">
    <h3>Search</h3>
    <input type="text" id="search-text" value="蛤">
    <button id="search-btn">Search</button>
  </div>
  <hr/>
  <ul id="display">
    
  </ul>
</body>
<script>
  var inputText = getid('input-text');
  var leftIn = getid('leftin');
  var leftOut = getid('leftout');
  var rightIn = getid('rightin');
  var rightOut = getid('rightout');
  var display = getid('display');
  var queue = new Array();

  // 选择器
  function getid(id){
    return document.getElementById(id);
  }

  // 创建执行函数
  function putLeftIn(input){
    queue.unshift(input);
  }

  function putRightIn(input){
    queue.push(input);
  }

  function putLeftOut(){
    var removed = queue.shift();
    alert(removed);
  }

  function putRightOut(){
    var removed = queue.pop();
    alert(removed);
  }

  // 检验合法性
  function splitInput(input){
    var newqueue = input.split(/\s{1,}|、|,|，/);
    return newqueue;
  }

  // 渲染
  function render(){
    display.innerHTML = ""
    for (var i=0;i<queue.length;i++){
      var newLi = document.createElement('li');
      var newText = document.createTextNode(queue[i]);
      newLi.append(newText);
      display.append(newLi)
    }
  }

  // 绑定事件
  leftin.addEventListener('click',function(){
    var input = inputText.value.trim();
    var childque = splitInput(input);
    if(childque){
      for(var i=childque.length-1;i>=0;i--){
        putLeftIn(childque[i]);
      }
      render();
    }
  })
  rightin.addEventListener('click',function(){
    var input = inputText.value.trim();
    var childque = splitInput(input);
    if(childque){
      for(var i=0;i<childque.length;i++){
        putRightIn(childque[i]);
      }
      render();
    }
  })
  leftout.addEventListener('click',function(){
    if (queue.length){
      putLeftOut();
      render();
    }
    
  })
  rightout.addEventListener('click',function(){
    if(queue.length){
      putRightOut();
      render();
    }
  })

  var searchText = getid('search-text').value;
  var searchBtn = getid('search-btn');

  // 搜索函数
  function search(input){
    var inputText = input.trim();
    for(var i=0;i<queue.length;i++){
      if(queue[i].match(inputText)){
        display.children[i].style.background = "#888";
        display.children[i].style.color = "#fff";
      }
    }
  }

  // 绑定搜索函数
  searchBtn.addEventListener('click',function(){
    search(searchText);
  })


</script>
</html>

2017-03-02

任务六：基础JavaScript练习（三）

Lesson

任务九：基础JavaScript练习

Reference

Demo

Example Page

Note

正则方法

test()：正则对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。
match()：返回一个数组，成员是所有匹配的子字符串。
search()：按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。
replace()：按照给定的正则表达式进行替换，返回替换后的字符串。
split()：按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。

正则特殊字

Tips

函数的arg可以是函数吗？
可以的，但是调用这个argument时在参数区域写成argument不加括号，函数内部需要写成argument()的形式
冒泡和捕获
冒泡是从精确到模糊
捕获是从模糊到精确
阻止冒泡
false时冒泡：e.stopPropagation();阻止冒泡。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #display{
      list-style: none;
      margin: 5px 0;
      padding: 0;
    }
    #display li{
      list-style: none;
      display: inline-block;
      padding: 5px;
      margin:0 5px 5px 0;
      border:1px solid #aaa;
      background: #eee;
      font-size:10px;
      color: #aaa;
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <div id="insert-div">
    <h3>Insert/ Delete</h3>
    <!-- <input type="text" id="input-text"> -->
    <textarea name="input-text" id="input-text" cols="30" rows="10">华莱士,蛤三篇、233 大新闻
蛤蛤</textarea>
    <br>
    <button id="leftin" value="LeftIn">LeftIn</button>
    <button id="rightin" value="RightIn">RightIn</button>
    <button id="leftout" value="LeftOut">LeftOut</button>
    <button id="rightout" value="RightOut">RightOut</button>
  </div>
  <hr/>
  <div id="search-div">
    <h3>Search</h3>
    <input type="text" id="search-text" value="蛤">
    <button id="search-btn">Search</button>
  </div>
  <hr/>
  <ul id="display">
    
  </ul>
</body>
<script>
  var inputText = getid('input-text');
  var leftIn = getid('leftin');
  var leftOut = getid('leftout');
  var rightIn = getid('rightin');
  var rightOut = getid('rightout');
  var display = getid('display');
  var queue = new Array();

  // 选择器
  function getid(id){
    return document.getElementById(id);
  }

  // 创建执行函数
  function putLeftIn(input){
    queue.unshift(input);
  }

  function putRightIn(input){
    queue.push(input);
  }

  function putLeftOut(){
    var removed = queue.shift();
    alert(removed);
  }

  function putRightOut(){
    var removed = queue.pop();
    alert(removed);
  }

  // 检验合法性
  function splitInput(input){
    var newqueue = input.split(/\s{1,}|、|,|，/);
    return newqueue;
  }

  // 渲染
  function render(){
    display.innerHTML = ""
    for (var i=0;i<queue.length;i++){
      var newLi = document.createElement('li');
      var newText = document.createTextNode(queue[i]);
      newLi.append(newText);
      display.append(newLi)
    }
  }

  // 绑定事件
  leftin.addEventListener('click',function(){
    var input = inputText.value.trim();
    var childque = splitInput(input);
    if(childque){
      for(var i=childque.length-1;i>=0;i--){
        putLeftIn(childque[i]);
      }
      render();
    }
  })
  rightin.addEventListener('click',function(){
    var input = inputText.value.trim();
    var childque = splitInput(input);
    if(childque){
      for(var i=0;i<childque.length;i++){
        putRightIn(childque[i]);
      }
      render();
    }
  })
  leftout.addEventListener('click',function(){
    if (queue.length){
      putLeftOut();
      render();
    }
    
  })
  rightout.addEventListener('click',function(){
    if(queue.length){
      putRightOut();
      render();
    }
  })

  var searchText = getid('search-text').value;
  var searchBtn = getid('search-btn');

  // 搜索函数
  function search(input){
    var inputText = input.trim();
    for(var i=0;i<queue.length;i++){
      if(queue[i].match(inputText)){
        display.children[i].style.background = "#888";
        display.children[i].style.color = "#fff";
      }
    }
  }

  // 绑定搜索函数
  searchBtn.addEventListener('click',function(e){
    e.stopPropagation();
    search(searchText);


  })


</script>
</html>

2017-03-02

任务五：基础JavaScript练习（二）

Lesson

任务四：基础JavaScript练习

Reference

Demo

Example Page

Note

操作样式

Tips

函数内可以用if内的return中断函数向后运行
给一个ul内挨个增加li，让每个li的css不一样并不需要重新写选择器，只要直接在新li的style上修改即可。即为：js中修改css实际上是html中的内联样式，优先级高于

2017-03-01

任务四：基础JavaScript练习（一）

Lesson

任务四：基础JavaScript练习

Reference

Demo

Example Page

Note

Array

push()
在末端添加
pop()
在末端删除
shift()
将首端删除
unshift()
在首端添加

Tips

$(‘#id’).value的值可以随着引用位置变化，var value = $(‘#id’).value的值不再变化。
isNaN()可用来验证数字。
判断句中0就是false

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #display{
      list-style: none;
      margin: 5px 0;
      padding: 0;
    }
    #display li{
      list-style: none;
      display: inline-block;
      padding: 5px;
      margin:0 5px 5px 0;
      border:1px solid #aaa;
      background: #eee;
    }
  </style>
</head>
<body>
  <div>
    <input type="text" id="input-text">
    <button id="leftin" value="LeftIn">LeftIn</button>
    <button id="rightin" value="RightIn">RightIn</button>
    <button id="leftout" value="LeftOut">LeftOut</button>
    <button id="rightout" value="RightOut">RightOut</button>
  </div>
  <ul id="display">
    
  </ul>
</body>
<script>
  var inputText = getid('input-text');
  var leftIn = getid('leftin');
  var leftOut = getid('leftout');
  var rightIn = getid('rightin');
  var rightOut = getid('rightout');
  var display = getid('display');
  var queue = new Array();

  // 选择器
  function getid(id){
    return document.getElementById(id);
  }

  // 创建执行函数
  function putLeftIn(input){
    queue.unshift(input);
  }

  function putRightIn(input){
    queue.push(input);
  }

  function putLeftOut(){
    var removed = queue.shift();
    alert(removed);
  }

  function putRightOut(){
    var removed = queue.pop();
    alert(removed);
  }

  // 检验合法性
  function veryfied(input){
    if(!(isNaN(input))){
      return input;
    }else{
      alert('请输入数字！');
      return false;
    }
  }

  // 渲染
  function render(){
    display.innerHTML = ""
    for (i=0;i<queue.length;i++){
      var newLi = document.createElement('li');
      var newText = document.createTextNode(queue[i]);
      newLi.append(newText);
      display.append(newLi)
    }
  }

  // 绑定事件
  leftin.addEventListener('click',function(){
    var number = inputText.value.trim();
    if(veryfied(number)){
      putLeftIn(number);
      render();
    }
  })
  rightin.addEventListener('click',function(){
    var number = inputText.value.trim();
    if(veryfied(number)){
      putRightIn(number);
      render();
    }
  })
  leftout.addEventListener('click',function(){
    if (queue.length){
      putLeftOut();
      render();
    }
    
  })
  rightout.addEventListener('click',function(){
    if(queue.length){
      putRightOut();
      render();
    }
  })


</script>
</html>

2017-03-01

JS任务三：零基础JavaScript编码（三）

Lesson

任务三：零基础JS编码

Reference

Demo

Example Page

Note

数组对象遍历、读写、排序等操作

遍历
Element.children和Element.childNodes都是子元素
childNodes会把多余的空格或回车统计进去
插入
数组的尾部插入使用push，Node节点的内部插入使用append。

排序
采取sort方法。
但因为sort默认按照字符串排序，所以应该让sort方法按照自定义方式排序。
函数中如果返回值大于零则a排在b后面。

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

function sortAqiData(data) {
  return data.sort(function(a,b){
    return a[1] - b[1];
  })
}
//本例中需要用到二维数组的第二个数据

字符串处理操作

slice()
slice方法用于从原字符串取出子字符串并返回，不改变原字符串。
它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。
‘JavaScript’.slice(0, 4) // “Java”

HTML

<!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]
    ……
  ]
  */
  var data = new Array;
  var source = document.getElementById('source');
  for( var i = 0; i<source.children.length; i++){
    var city = source.children[i].innerText.slice(0,2);
    var number = source.children[i].children[0].innerText;
    var dataEach = new Array;
    dataEach.push(city);
    dataEach.push(number);
    data.push(dataEach);
  }

  return data;

}

/**
 * sortAqiData
 * 按空气质量对data进行从小到大的排序
 * 返回一个排序后的数组
 */
function sortAqiData(data) {
  return data.sort(function(a,b){
    return a[1] - b[1];
  })
}

/**
 * render
 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
 * 格式见ul中的注释的部分
 */
function render(data) {
  var resort = document.getElementById('resort');
  var cnNo = ['一','二','三','四','五','六','七','八','九'];
  for (var i=0;i<data.length;i++){
    var city = data[i][0];
    var number = data[i][1];
    var newli = document.createElement('li');
    var text = document.createTextNode('第'+cnNo[i]+'名：'+city+'空气质量：');
    var newb = document.createElement('b');
    var textb = document.createTextNode(number);
    newb.append(textb);
    newli.append(text);
    newli.append(newb);
    resort.append(newli);
  }
}

function btnHandle() {
  var aqiData = getData();
  aqiData = sortAqiData(aqiData);
  render(aqiData);
}

function init() {

  // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

}

init();

</script>
</body>
</html>

2017-03-01

JS任务一：零基础JavaScript编码（二）

Lesson

任务二：零基础JS编码

Reference

Demo

Example Page

Note

生成节点的方法

通过document.createElement(‘div’)创建
元素节点。
1
var newDiv = document.createElement('div');

通过document.createTextNode(‘Hello’)为元素节点创建内容。

1 2	var newDiv = document.createElement('div'); var newContent = document.createTextNode('Hello');

在元素节点内Element.appendChild()来添加刚刚创建的内容。

1
2
3

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

JavaScript

<script type="text/javascript">

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

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */
  var aqList = document.getElementById('aqi-list');
  for (var i=0;i<aqiData.length;i++){
    var aqiCity = aqiData[i][0];
    var aqiNumber = aqiData[i][1];
    if (aqiNumber>60){
      var newli = document.createElement('li');
      var newlitext = document.createTextNode(aqiCity);
      newli.appendChild(newlitext);
      aqList.appendChild(newli);
    }
  }

})();

</script>

2017-03-01

JS任务一：零基础JavaScript编码（一）

Lesson

任务一：零基础JS编码

Reference

Demo

Example Page

Note

事件是什么？

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.

DOM是什么？

DOM（Document Object Model——文档对象模型）是HTML 文件或 XML 文件渲染和交互的API（应用程序的编程接口）。DOM 是文档载入到浏览器之后文档的模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。

DOM 是Web——互联网上使用最多的API之一，因为它允许运行在Web浏览器中的程序访问文件中的节点。节点可以被创建，移动或修改。事件监听器可以被添加到节点上，一旦监听的事件发生时，事件侦听器就会被触发。

DOM 并不是浏览器出现时就规范好了，它是浏览器在实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在， W3C领导着 DOM 规范，DOM 工作组正在制订第四版的规范。

DOM绑定事件的方式

传统绑定
只会在事件冒泡中运行；
一个元素一次只能绑定一个函数。
1
2
3
element.onclick = function(e){
// ...
};
W3C绑定
最后一个参数决定是冒泡还是捕获：false (冒泡) 或 true (捕获)；
可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件；
IE不支持
1
2
3
element.addEventListener('click', function(e){
// ...
}, false);

IE绑定

1
2
3

element.attachEvent('onclick', function(){
    // ...
});

JavaScript

(function() {
  /*    
  在注释下方写下代码
  给按钮button绑定一个点击事件
  在事件处理函数中
  获取aqi-input输入的值，并显示在aqi-display中
  */
  var display = document.getElementById('aqi-display');
  var input = document.getElementById('aqi-input');
  var btn = document.getElementById('button');
  btn.addEventListener('click', function(e){
    display.innerText = input.value;
  },false)

})();