[スパルタコードクラブ]ネットワーク開発総合クラス2週目

10019 ワード
テキストリンク
[カリキュラムの目標]
  • Javascript文法に詳しい
  • jQueryは簡単なHTMLを操作できる.
  • Ajaxは、サーバAPIにデータを送信し、結果を受信する.
    • 1)jQueryとは?
    HTML要素を操作する便利なJavaScriptをあらかじめ作成しておきました!ライブラリ!
    jQueryを使用するには、<head> ~ </head>の間に置けます!
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    jQueryはCSSのように「指向」操作も可能です.
    cssはclassを選択子として、jQueryはidを選択子として使用します!
  • 入力ボックスの値!
    • <div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="[email protected]">
    <label>영화URL</label>
</div>
    // 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');
  • 表示/非表示div
    • // 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();
  • タグ内にhtmlを入力(重要!!)
    • let temp_html = ` ~~~~ `;
$('#cards-box').append(temp_html);
    2)サーバ-クライアント通信の理解
  • JSONは、Key:Valueからなる.資料型Dictionaryによく似ています
    👉 上記の例では、RealtimeCityAirというキー値にはバイナリ値が含まれています.
    rowという名前のキー値の1つには、リスト型の値が含まれます.
  • クライアント→サーバ:GETリクエストを知る(非常に重要!!)
    • 👉 **APIは銀行窓口と同じ!**
    同じ預金窓口で、個人のお客様か企業のお客様かによって、
    インポート/処理が必要な内容が異なり、
    クライアントリクエスト時でも「タイプ」は存在します.

  • GET→通常!データ照会要求時
    例)ムービーリストの表示

  • POST→通常!作成、更新、削除を要求します.
    例)会員加入、会員脱退、パスワード修正
    • https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967
    3)Ajaxの起動
    👉 注意!Ajaxは、jQueryをインポートしたページでのみ実行できます.
    ヘッドに追加!<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>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リクエストはurlの後ろにデータを貼り付け、以下のようにします.
    http://naver.com?param=value¶m2=value2
    POST要求は、データをデータ:{}に入れることでデータを取得する.
    data: { param: 'value', param2: 'value2' },
  • success:成功すると、応答値にサーバの結果値を含めて関数を実行します.
    • ベリー
    バイトストリームの操作