スパルタ符号化クラブネットワーク開発総合クラス第2週記録と教室評論(JQuery,Ajax)

2.ネットワーク開発総合クラス2週間記録

●JQueryとAjaxの開始

jQueryとは?
ライブラリは、

HTML要素を操作するために予め作成された便利なJavaScriptです.
👉 Javascriptはすべての機能を実現できます.
1)コードが複雑で,2)ブラウザ間の互換性の問題も考慮する.
**j**Queryライブラリが現れました.

jQueryとJavascript-コード比較
👉 jQueryはJavaScriptやその他の特殊なソフトウェアではなく、あらかじめ作成されたJavaScriptコードです.これは専門開発者が丹念に作成したコードです.だから書く前にインポートします.
👉 Javascriptで記述する必要がある冗長で複雑なコンテンツを次のように変換します.
document.getElementById("element").style.display = "none"; -> $('#element').hide();

jQueryの使用

で作成されたJavascriptコードをインポートすることを「インポート」と呼びます.
👉 jQuery CDNセクションのインポート:https://www.w3schools.com/jquery/jquery_get_started.asp

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQueryの使用方法
👉 cssと同様にjQueryを書く場合も「指向」→操作が可能です.
例)特定の足場の値段→持ってきて!
例)特定のdiv→見えない!
cssはclassを選択子として使用します.
jQueryでは,id値は特定のボタン/入力ボックス/divなどを指す.

Ajaxの起動

👉 Ajaxは、jQueryをインポートしたページでのみ実行できます.
すなわち,[http://google.com/[と同じ画面で開発者ツールを開くと、jQueryがインポートされていないため、次のエラーが発生します.
Uncaught TypeError: $.ajax is not a function
→ajaxの意味がない

Ajaxコード解釈

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

$ajaxコード説明
-type:「GET」→GETでお願いします.
-url:要求されたurl
-data:要求時に同時にローデータを空に保持する(GET要求時に空に保持する)
👉 考え直す
*GETリクエストはurlの後ろに次のように貼り付けられてデータを取得します->http://naver.com?param=value¶m2=value2
*POSTリクエストが挿入され、data:{}データを取得します->
data: { param: 'value', param2: 'value2' },
-success:成功した場合、応答値にサーバの結果値を含めて関数を実行します.

👉 結果を受け入れて反応に入るべきだ.
●2週目の宿題(ファン名簿に天気情報を追加)

●第2週講座のコメント
1週目に続き、今回はJQueryとAjaxの使い方を学びました.ライブラリを簡単に使って複雑なコードを書くことができ、私が使っていたコードを簡単に減らすことができることに気づきました.これは不思議です.作業によって気温データがもたらされ、1週間目に続いて新しい機能がわかったようで、さらに面白くなりました.