スパルタコードクラブ2週目

28841 ワード

[カリキュラムの目標]
  • Javascript構文を熟知しています.
  • jQueryで簡単なHTMLを操作できます.
  • Ajaxを使用してサーバAPIにデータを送信し、結果を受信します.
  • Javascript復習


  • Javascript-パリティに基づいて別の浮動小数点onclick関数を作成する簡単な復習

  • 偶数を押すとき👏「あ、奇数を押すとき」🎅「どれだけ弾けるボタンを作ろう!

  • 偶数/奇数の判断方法
    let even = 4;
    console.log(even % 2); // 2로 나눈 나머지가 0입니다.
    let odd = 5;
    console.log(odd % 2); // 2로 나눈 나머지가 1입니다.

  • コードフラグメントペア/奇数onclick関数(完了)
        <script>
            let count = 1;
            function hey() {
                if (count % 2 == 0) {
                    alert('짝짝짝👏');
                } else {
                    alert('홀홀홀🎅');
                }
    						count += 1;
            }
        </script>
  • JQueryの起動



  • jQueryって何?

  • HTMLの要素を処理するために便利なJavaScriptを事前に作成しています.ライブラリ!
    Javascriptは、ボタンフォントの変更など、すべての機能を実現することもできます.
    1)コードが複雑で,2)ブラウザ間の互換性の問題も考慮する.
    jQueryという名前のライブラリが現れました

  • jQueryとJavascript-コードの比較
    jQueryは、JavaScriptやその他の特殊なソフトウェアではなく、事前に作成されたJavaScriptコードです.これは専門開発者が丹念に作成したコードで使用されていることを覚えておいてください.(そのため、書き込む前に「インポート」!)
    Javascriptで長くて複雑なものを書きます.
    document.getElementById("element").style.display = "none";
    jQueryでより直感的に書くことができます便利でしょう?
    $('#element').hide();
  • JQueryについて


  • jQueryの使用

  • あらかじめ作成されたJavascriptコードをインポートすることを「インポート」と呼びます.

  • [コード断片]jQuery CDN
    ```html
    https://www.w3schools.com/jquery/jquery_get_started.asp
    ```
    インポートjQuery CDNセクション:(リンク)

  • 和の間に下を置いて終わりです!
    もしあなたが真剣にカリキュラムにフォローしている人であれば、私は一人で手帳コードに以下の内容を入力します.もう一度よくチェックしてください.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  • jQueryの使用方法
    cssと同様にjQueryを使用する場合も「指向」→操作が可能です.
    例)特定の足場の値段→持ってきて!
    例)特定のdiv→見えない!
    cssはclassを選択者として使っていますよね?
    jQueryでは、id値でボタン/入力ボックス/div/...を指定します.背中を指さす
    百聞は一見にしかず!よく使うjQueryに慣れましょう.
  • サーバ-クライアント通信について


  • サーバ→クライアント:「JSON」について

  • ソウル市OpenAPIを訪問

  • [コード断片]スモッグOpenAPI
    http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

  • Chrome Extension JSOnViewをインストールしますか?ではJSONをもっときれいに見ることができます

  • [コード断片]-Jsonview
    https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

  • JSONはKey:Valueで構成されています.資料型Dictionaryとよく似ています.
    上記の例では、RealtimeCityAirというキー値にはバイナリ値が含まれています.
    rowという名前のキー値の1つには、リスト型の値が含まれます.


  • クライアントの理解→サーバ:GETリクエスト
    APIは銀行の窓口のようです!
    同じ預金窓口で、個人のお客様か企業のお客様かによって、
    インポート/処理が必要な内容が異なり、
    クライアントリクエスト時でも「タイプ」は存在します.

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

  • POST→通常!作成、更新、削除を要求します.
    例)会員加入、会員脱退、パスワード修正
    その中で、今日はGET方式を学びます.(POSTは4週目に勉強します)

  • GET
    寄生虫
    https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
    
    위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
    "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
    
    * 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
    * 영화 정보: code=161967
    GET方式でデータを転送する方法
    ? : これは、ここで渡すデータを作成することを意味します.
    &:他に伝達するデータがあることを示します.
    例)Google.com/search?q=iphone&sourcceid=chrome&ie=UTF-8
           위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
           q=아이폰                        (검색어)
           sourceid=chrome        (브라우저 정보)
           ie=UTF-8                      (인코딩 정보)
    ここでちょっと待ってコードの名前で映画番号をあげましょう!これは.
    誰が決めたの?
    →はい、これがフロントエンド開発者とバックエンド開発者の約束です.
    フロント:「コードという映画番号をあげてもいいですか?」
    バックエンド:「はい、そうします.では、コードで映画番号を入力してから符号化します.」
  • Ajaxの起動


  • Ajaxの起動

  • クロム開発者ツールに次のように書きます.
    注意!Ajaxは、jQueryをインポートするページでのみ使用できます.
    開発ツールをhttp://google.com/などの画面で開くと、jQueryがインポートされていないため、次のエラーが発生します.
    Uncaught TypeError: $.ajax is not a function
    →ajaxの意味がない

  • [コード断片]スモッグOpenAPI
    [http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99](http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99)

  • [コード断片]Ajax基本スケルトン
    ```jsx
    $.ajax({
      type: "GET",
      url: "여기에URL을입력",
      data: {},
      success: function(response){
        console.log(response)
      }
    })
    ```
    Ajaxコード説明
    $.ajax({
      type: "GET", // GET 방식으로 요청한다.
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      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: { param: 'value', param2: 'value2' },

  • ≪成功|Succeeded|ldap≫:成功した場合、応答値にサーバーの結果値を含めて関数を実行します.
    結果はどのように反応しますか?→受け入れなきゃ...!
    (多くの開発者も内部原理を知らない.コードを開いたことがないからだ.^^;)
    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
      console.log(response) 
    }

  • Ajax通信の結果値を使用して表示

  • 上のAjax通信を発展させましょう!
    $.ajax({
      type: "GET", // GET 방식으로 요청한다.
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
      success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
        console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
      }
    })

  • 開発者ツールコンソールに印刷
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {},
      success: function(response){
    		// 값 중 도봉구의 미세먼지 값만 가져와보기
    		let dobong = response["RealtimeCityAir"]["row"][11];
    		let gu_name = dobong['MSRSTE_NM'];
    		let gu_mise = dobong['IDEX_MVL'];
    		console.log(gu_name, gu_mise);
      }
    })

  • すべてのボールのスモッグ値を測定してみます
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {},
      success: function (response) {
        let mise_list = response["RealtimeCityAir"]["row"];
        for (let i = 0; i < mise_list.length; i++) {
          let mise = mise_list[i];
          let gu_name = mise["MSRSTE_NM"];
          let gu_mise = mise["IDEX_MVL"];
          console.log(gu_name, gu_mise);
        }
      }
    });

  • 復習の時は我慢!注記)すべての球の微塵値を測定しようとします.

  • スモッグデータの場所を検索

    上図に示すように、RealtimeCityAir>rowにはスモッグデータが含まれています.これを出しましょうか.
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {},
      success: function(response){
    		let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
    		console.log(mise_list);
      }
    })

  • 重複文を使用した古いデータの出力

    rowの値をmiseリストに含めた以上、繰り返し文を使いましょう.
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {},
      success: function (response) {
        let mise_list = response["RealtimeCityAir"]["row"];
        for (let i = 0; i < mise_list.length; i++) {
          let mise = mise_list[i];
          console.log(mise);
        }
      },
    });

  • 球データから球名と微塵値を選択して出力

    ボール名キー値「MSRSTE NM」、ダスト数値キー値「IDEX MVL」の値を出力
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {},
      success: function (response) {
        let mise_list = response["RealtimeCityAir"]["row"];
        for (let i = 0; i < mise_list.length; i++) {
          let mise = mise_list[i];
          let gu_name = mise["MSRSTE_NM"];
          let gu_mise = mise["IDEX_MVL"];
          console.log(gu_name, gu_mise);
        }
      }
    });