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");