2017-03-04

任务八：JavaScript和树（二）

Lesson

任务八：JavaScript和树（二）

Reference

Demo

Example Page

Note

正则方法

Tips

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>