2022-01-14 TIL.02

注意-このリンクの一部を次に示します.
https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/
最終完成本はここにあります.
https://minbok-1998.github.io/GhibliAPI/
n/a.ターゲット
Studio Ghibli APIに接続し、JavaScriptを使用します.
Webサイトで検索して表示できる簡単なWebアプリケーションを作成します.
何を学べますか.

Web API

とは

HTTPリクエストGET JavaScriptの使用方法

JavaScriptによるHTML要素の生成と表示方法

APIとは?
アプリケーションインタフェース(API)は、ソフトウェアが他のソフトウェアと通信できるようにするソフトウェアコンポーネントのセット間の通信方法である.

POSTの作成-新しいリソースの作成

Read-Getリソース検索

更新-PUT/PATCH-既存のリソースを更新

Delete-DELETE-リソースを削除

HTTPリクエストによるデータの取得

var request = new XMLHttpRequest()
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)

request.onload = function () {
  // Begin accessing JSON data here
}
request.send()

XMLHttpRequestとは?
サーバにデータを要求するための組み込みオブジェクト.
サーバからXMLデータを受信して処理します.
Webページ全体を再ロードせずに一部の更新のみを許可
備考-XMLhttpRequest
http://www.tcpschool.com/xml/xml_dom_xmlHttpRequest
.open()
ドキュメントを開いてドキュメントを作成する方法

document.open();
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>");
document.close();

3回目の買収.open()手法により、trueをサーバに転送することで、非同期要求をサーバに送信することができる.
「」を参照してください.open()
https://developer.mozilla.org/en-US/docs/Web/API/Document/open
JSON応答の使用
以前に受け取ったHTTPリクエストはJSON形式です.
JavaScriptオブジェクトに変換する必要があります.JSON.parse()を使用して応答を解析し、JavaScript配列オブジェクトにすべてのJSONを含むデータ変数を作成します.forEach()を使用して、各映画のタイトルをコンソールに印刷します.
正常に動作しているかどうかを確認します.
JSON.parse()メソッド
JSON文字列の構文を解析します.
JavaScript値またはオブジェクトの生成

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);  // 42

console.log(obj.result);  // true

参照:JSON.parse()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
forEach()メソッド
アレイ要素ごとに指定された関数を実行

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// "a"
// "b"
// "c"

注:forEach()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
データ画面に出力
フロントエンド画面に情報を出力するために、DOMを使用してJSとHTMLを通信させます.
指数はgetElementById()です.htmlファイルの<div id="root">にアクセスできます.createElement()を使用して要素を作成できます.DOMには、<div id="root">によって生成された要素が配置される.appendChild()を使用します.
appendChild()
子ノードを最後の子として親ノードに追加

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

// Create a <li> node
var node = document.createElement("LI");
// Create a text node
var textnode = document.createTextNode("Water");
// Append the text to <li>
node.appendChild(textnode);
// Append <li> to <ul> with id="myList"
document.getElementById("myList").appendChild(node);

// Coffee
// Tea
// Water

備考-Node.appendChild()
https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild
https://www.w3schools.com/jsref/met_node_appendchild.asp
これで、DOMを使用して作成した要素は、開発者ツールの「要素」タブでのみ表示されます.textContentを使用して、HTML要素のテキストをAPIのデータに設定します.
説明を制限して各カードの長さを同じにするために、
pラベルはsubstring()を使用します.
textContent
ノードとそのサブノードのテキスト内容を取得します.

Element.innerHTMLは名前でHTMLを返します.
エレメントのテキストをinnerHTMLでインポートまたは書き込みする場合がありますが、HTMLとして解析する必要がないため、テキストコンテンツのパフォーマンスが向上します.
またtextContentはXSS攻撃を受ける危険はありません.
備考-Node.textContent
https://developer.mozilla.org/ko/docs/Web/API/Node/textContent
https://www.w3schools.com/jsref/prop_node_textcontent.asp(例を参照)
substring()
stringオブジェクトの開始インデックスから終了インデックスへ
文字列の一部を返す文字列

indexEndを省略するとsubstring()文字列の
最後にすべての文字が抽出されるまで.

indexStartがindexEndに等しい場合、空の文字列が返されます.

indexStartがindexEndより大きい場合substring()メソッド
2つの因子を変えたように.

const str = 'Mozilla';

console.log(str.substring(1, 3));
// "oz"

console.log(str.substring(2));
// "zilla"

注記-string.prototype.substring()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring