JSON APIs and Ajax (2 hours)

[NBR-hugh]

JSON APIs and Ajax (2 hours)

[NBR-hugh]

• 20161102 9:20 BEGIN

[NBR-hugh]

项目

Trigger Click Events with jQuery total:10min

Change Text with Click Events TOTAL:10MIN

Get JSON with the jQuery getJSON Method TOTAL:35MIN

Convert JSON Data to HTML TOTAL:50MIN

Render Images from Data Sources TOTAL:13MIN

Prefilter JSON TOTAL:5MIN

Get Geo-location Data TOTAL:15MIN

• 总计投入时间：2h20min

[NBR-hugh]

Trigger Click Events with jQuery 使用jQuery 单击触发事件

要点

• 在 $(document).ready(function() {}添加 $("#getMessage").on("click",function(){});实现点击事件控制**（a click event handler）**

  $(document).ready(function() {
  // Only change code below this line.
  $("#getMessage").on("click",function(){});
  
  // Only change code above this line.
  });
  

完整程序

<script>
  $(document).ready(function() {
    // Only change code below this line.
    $("#getMessage").on("click",function(){});

    // Only change code above this line.
  });
</script>


<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

• 20161102 09:25 BEGIN
• 20161102 09:35 END
• total:10min

[NBR-hugh]

Change Text with Click Events 用点击事件改编文本

要点

• 添加 $(".message").html("Here is the message");实现功能：当用户点击按钮时，文本从The message will go here变成Here is the message，注意命令中message是所修改的html元素的class：

<div class = "col-xs-12 well message">
      The message will go here
    </div>

完整程序：

<script>
  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
      $(".message").html("Here is the message");
      // Only change code above this line.
    });
  });
</script>


<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

• 20161102 09：35 BEGIN
• 20161202 09：45 END
• TOTAL:10MIN

[NBR-hugh]

Get JSON with the jQuery getJSON Method 获得JOSN

要点

• 你可以请求从外部资源请求数据，这时APIs（tools that computers use to communicate with one another.）就发挥作用
• JSON 是许多web APIs传输数据的格式，并且是JavaScript的对象符号（stands for JavaScript Object Notation.）;每当你在使用对象符号时(whenever you create a JavaScript object)，就是在使用JSON;
• JSON组成：object properties and their current values, sandwiched between a { and a }.These properties and their values are often referred to as "key-value pairs".

问题

按要求手动添加

  $.getJSON("/json/cats.json",function(json){
        $(".message").html(JOSN.stringify(json));
      });

结果无法通过测试，于是直接复制黏贴命令看是否是输入错误，通过挑战，确定为输入错误。
原命令为：

$.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json));
});

发现错误为将JSON 输成 JOSN,戒之戒之！！！

完整程序

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function(){
      // Only change code below this line.
    $.getJSON("/json/cats.json",function(json){
        $(".message").html(JSON.stringify(json));
      });
      // Only change code above this line.
    });

  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message" >
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

• 20161102 09：45 BEGIN
• 20161202 10：20 END
• TOTAL:35MIN

[NBR-hugh]

Convert JSON Data to HTML 将JSON数据传递给HTML

要点

• .forEach() method to loop through our data and modify our HTML elements.【循环通过数据并修改HTML元素】
• let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.【循环完毕，提交】
• 变量的传递，每个命令的具体功能等等弄不懂的地方很多，用纸笔画了程序的执行流程已经问题，需要等理解加深后再回来解答

程序

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        json.forEach(function(val){
          var keys =Object.keys(val);
          html +="<div class='cat'>";
          keys.forEach(function(key){
               html += "<strong>"+ key +"</strong>"+ val[key]+"<br>";
                       });
          html +="</div><br>";
        });
        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

实现效果

• 点击按钮，原来的文本信息转化为从JSON传递来的文本信息
  

记录

• 20161102 10：20 BEGIN
• 20161202 11：10 END
• TOTAL:50MIN

[NBR-hugh]

Render Images from Data Sources 从数据源提取图片

要点

• 在json.forEach(function(val) 函数中添加
  html += "<img src = '"+val.imageLink + "'" +"alt='" + val.altText + "'>";
  便可以提取图片
• 发现forEach的功能似乎是添加与编辑html文本

问题

• 命令里的双引号“”以及单引号‘’有点混乱，要捋一捋。【解决：双引号""是+的间隔，单引号‘’与<>都是输入的文本】

程序

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";

        json.forEach(function(val) {

          html += "<div class = 'cat'>";

          // Only change code below this line.

          html += "<img src = '"+val.imageLink + "'" +"alt='" + val.altText + "'>";

          // Only change code above this line.

          html += "</div>";

        });

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

• 20161102 11：15 BEGIN
• 20161202 11：28 END
• TOTAL:13MIN

[NBR-hugh]

Prefilter JSON 预先过滤 JSON

要点

• 当我们不需要从our Free Code Camp's Cat Photo JSON API传递每一张猫咪图片时，可以在loop thought it时筛选掉它
• 这里筛选的 id=1 的图片
• 在$.getJSON("/json/cats.json", function(json) {内添加

json = json.filter(function(val){
          return(val.id !== 1 );
        })

程序

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";

        // Only change code below this line.
        json = json.filter(function(val){
          return(val.id !== 1 );
        })

        // Only change code above this line.

        json.forEach(function(val) {

          html += "<div class = 'cat'>"

          html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"

          html += "</div>"

        });

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

• 20161102 11：30 BEGIN
• 20161202 11：35 END
• TOTAL:5MIN

[NBR-hugh]

Get Geolocation Data 获取地理数据

要点

• 获取用户的地理位置
• You will see a prompt to allow or block this site from knowing your current location【你可以允许或者禁止当前网站】
• 命令：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
  });
}

• 这个好像直接用就好了，有些地方还不是很理解，看了标准教程就明白了

程序

<script>
  // Only change code below this line.
  if (navigator.geolication){
    navigator.geolocation.getCurrentPosition(function(position){
     $("#data").html("latitude+" + position.coords.latitude +"<br>longitude:"+position.coords.longitude);
    });
  }


  // Only change code above this line.
</script>
<div id = "data">
  <h4>You are here:</h4>

</div>

记录

• 20161102 11：30 BEGIN
• 20161202 11：45 END
• TOTAL:15MIN

[NBR-hugh]

• 20161202 11：50 END
• 遗留3个问题待解答：
  1. Convert JSON Data to HTML TOTAL 2个问题，纸笔
  2. 地理位置的每个指令含义