Day 52 (JS_API)

1. API?

应用程式介面

图形库中的一组API定义了绘製指标的方式，可于图形输出装置上显示指标。当应用程式需要指标功能时，可在参照、编译时连结到这组API，而执行时就会呼叫此API的实现（库）来显示指标。

https://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3

2. AJAX 安装

npm install cors
npm install express
npm install body-parser

3. AJAX 使用 (Lab_AJAX_Node.js >_LabSteps.txt 有步骤)

在与伺服器资料交换期间，仍然可以输入其他资料。

比较
get、post缺点:没办法选择送出格式

$.get("url", fn);

     $("#getButton").on("click", function () {          var s = $("#nameTextBox").val();          var url = `http://localhost/hello/${s}`;          $.get(url, function (res) {            $("#reportSpan").text(res);          });        });response.send("Hello! " + request.params.text);     });

$.post("url", formData, fn);

        $("#postButton").on("click", function () {          var dataToServer = {            firstName: $("#firstNameTextBox").val(),            lastName: $("#lastNameTextBox").val(),          };          $.post("/test", dataToServer, function (res) {            $("#resultSpan").text(res);          });        });

$.ajax({很多})
ajax + promise(then + await + async)方法

           $("#postButton").on("click", async function () {          var dataToServer = {            firstName: $("#firstNameTextBox").val(),            lastName: $("#lastNameTextBox").val(),          };          var p = $.ajax({            type: "post",            url: "/test",            contentType: "application/json", //送进Json格式            data: JSON.stringify(dataToServer),          });          var result = await p;          $("#resultSpan").text(result);        });      });

4. $.get(url,how)

5.大仓库

涂掉物件参考，物件仍还存在

6.Worker - 下载档案回来执行(类似引用)

Demo_Worker.js
postMessage()送出值

      var iDemo_Worker = 0;        function Demo_Worker_Counting() { iDemo_Worker += 1; postMessage(iDemo_Worker); setTimeout("Demo_Worker_Counting()", 500);         }      Demo_Worker_Counting();

做一个Worker物件，该物件会下载Demo_Worker.js

      var objWorker;      function startWorker() {        objWorker = new Worker("Demo_Worker.js");        objWorker.onmessage = function (eee) {          document.getElementById("result").innerHTML = eee.data;        };      }

7.LocalStorage - 记忆体(档案:Lab_LocalStorage > _LabSteps_uft8.txt)

使用 : 填问卷不小心跳出暂存资料、游戏存档、
把资料放进LocalStorage，并且读出、修改、删除

    // localStorage.setItem("key" , "value");  //设定    // localStorage.getItem("key");            //读取资料    // localStorage["txtEmail"]                //读取资料    // localStorage.removeItem("key");         //移除单一值    // localStorage.clear();                   //移除全部的值

8. 编码

VScode 可以读 UTF-8
ASCII

9. Json物件 (档案:Json_obj_demo.html)

      var obj = [        { firstName: "Derek", LastName: "HI", Number: 123 },        { firstName: "Derek2", LastName: "HI2", Number: 1234 },      ];

资料结构转成Json

      report.innerText = JSON.stringify(obj);      //[{"firstName":"Derek","LastName":"HI","Number":123},      // {"firstName":"Derek2","LastName":"HI2","Number":1234}]      alert(obj[1].firstName); //Derek2

Json转回去资料结构

      var s = '[{"firstName":"Derek","LastName":"HI","Number":123},{"firstName":"Derek2","LastName":"HI2","Number":1234}]';      var obj2 = JSON.parse(s); //Json转回去资料结构      alert(obj2[1].firstName); //Derek2

10. 拖曳国旗案例 (Lab_DragAndDrop > 档案demo.html 影片01)

    //setData:target的资料存进去    e.dataTransfer.setData("text/plain", e.target.id);     //getData:把setData内的target资料，拿出来读取    var sSourceId = e.dataTransfer.getData("text/plain");