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

61531 ワード

スパルタコードクラブテキストリンク

第2週
Javascriptを使用してサーバにデータを要求し、サーバ応答のデータを受信する
クライアント(ブラウザ)-サーバ
クライアントがサーバにデータを要求すると、サーバは応答してデータを送信します.

Web基礎動作原理
WebはHTTPの約束に従う.urlでhttp:// HTTPの約束に従うことを表す.
クライアントはHTTPが要求を出す側であり,サーバはHTTPが要求を受信して応答する側である.
Ajaxを使用してJavascriptを使用してサーバにデータを要求し、サーバが応答データを受信する際にAPIを使用します.
APIは、サーバとデータベースのインタフェースとして機能する、プログラムのインタラクションを支援するメディアです.
APIを使用する場合は、予定された約束を守らなければ正常に動作しません.これらの承諾はAPIページに書かれています.
APIでリクエストを出すと、JSON形式でデータが渡されます.
JSONはKey:Valueで構成されています.

Ajax通信
Chrome拡張プログラムJSOnViewをインストールすることで、Chrome画面にJSON画面を表示できます.
Ajaxは、サーバがクライアントにデータを渡す際に使用するデータ表現です.
JSONはkey:Value形式で構成されています.資料型Dictionaryによく似ています.
OpenAPIでJSON形式のデータを表示できます.
ex)ソウルOpenAPI(リアルタイム大気環境情報)
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
上のリンクに入ると、次のようなデータが表示されます.

RealtimeCityAir: {
list_total_count: 25,
RESULT: {
CODE: "INFO-000",
MESSAGE: "정상 처리되었습니다"
},
row: [
{
MSRDT: "202010121000",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 47,
PM25: 22,
O3: 0.015,
NO2: 0.037,
CO: 0.7,
SO2: 0.003,
IDEX_NM: "보통",
IDEX_MVL: 62,
ARPLT_MAIN: "NO2"
},

RealtimeCityAirという名前のキー値には、ディックシェリー型の値が含まれています.
rowという名前のキー値には、リスト型の値が含まれています.

複文とディクシャナリーの

を利用

let cityAir = [
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "도심권",
    MSRSTE_NM: "중구",
    PM10: 22,
    PM25: 14,
    O3: 0.018,
    NO2: 0.015,
    CO: 0.4,
    SO2: 0.002,
    IDEX_NM: "좋음",
    IDEX_MVL: 31,
    ARPLT_MAIN: "O3",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "도심권",
    MSRSTE_NM: "종로구",
    PM10: 24,
    PM25: 18,
    O3: 0.013,
    NO2: 0.016,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 39,
    ARPLT_MAIN: "PM25",
  },
  ...
 ]

上のようなディック・シャナリーがいた時
25\/立方メートル未満のすべての測定ステーション(MSRSTE NM)を出力するには、PM 10を入力しますか?

for(let i=0; i<cityAir.length; i++) {
	if(cityAir[i].PM10 < 25){
   	console.log(cityAir[i].MSRSTE_NM);
   }
}


// 입력받은 미세먼지 수치보다 작은 측정소를 출력하는 함수 만들기
function showUnderMise(value) {
 for(let i=0; i<cityAir.length; i++) {
 	if(cityAir[i].PM10 < value) {
   	console.log(cityAir[i].MSRSTE_NM);
   }
 }
}

クライアントの理解->サーバ:GETリクエスト
HTTP:WebはHTTPルールに従う.
urlでは、http://はHTTP通信規約に従う表現である.
クライアントは、サーバのAPIに要求を送信し、データ(HTML、CSS、JSなど)に応答する.
クライアントがサーバに要求しても、このような方法があります.
様々な方式が存在するが、最もよく用いられるのはGETとPOST方式である.
GETは通常、データ取得を要求するために使用される.
POSTは、データの作成、更新および削除を要求するために使用される.

Getメソッド
サイトurlから
? すなわち,伝達開始からのデータを記述する.
&伝達するデータがあることを意味します.
ディックシャナリーのように、鍵と価値はペアです.

ex) https://movie.naver.com/movie/bi/mi/basic.nhn?code=30688
上のurlで
サーバアドレスはhttps://movie.naver.com/movie/bi/mi/basic.nhnです.
映画情報はcode=30688.
ex) google.com/search?q=ハリーポッター&sourceid=chrome&ie=UTF-8
上の住所はGoogleですcomの検索ウィンドウに次の情報を伝えます.
q=ハリーポッター:クエリqの値はハリーポッター
sourceid=chrome:ブラウザ情報sorceidの値はchrome
ie=UTF-8:符号化情報ieの値はUTF-8

Ajaxを使用してサーバと通信する
Ajaxは非同期サーバ通信方式である.
非同期とは、タスクリクエストを発行し、タスク結果が来る前に他のタスクを処理することです.その利点は、リソースを有効に利用できることです.
Ajaxを使用するには、jQueryをインポートする必要があります.

GET要求API応答のデータ

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "url", // 요청할 url
  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 cityAir = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < cityAir.length; i++) {
      let mise = cityAir[i];
      let guName = mise["MSRSTE_NM"];
      let guMise = mise["PM10"];
      console.log(guName, guMise);
    }
  },
});

作業

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>스타벅스</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
              integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
              crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap"
              rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <style>
            * {
                font-family: 'Noto Serif KR', serif;
            }

            .wrapper {
                width: 500px;
                margin: 0 auto;
            }

            .img {
                width: 600px;
                height: 600px;
                background-image: url('https://image.istarbucks.co.kr/upload/store/skuimg/2017/04/[9200000000487]_20170405152830688.jpg');
                background-size: cover;
                margin: 0 auto;
            }

            h1 {
                margin: 20px 0 10px;
                font-size: 30px;
            }

            h2 {
                margin: 20px 0;
                font-size: 24px;
            }

            .fx-rate-info {
                color: cornflowerblue;
            }

            .btn-box {
                text-align: center;
            }

            table {
                width: 100%;
                text-align: center;
                margin-bottom: 50px;
            }

            thead {
                background: #eee;
            }

            thead tr {
                height: 40px;
            }

            tbody tr {
                height: 50px;
                border-bottom: 1px solid #ddd;
            }

        </style>

        <script>
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: 'https://api.manana.kr/exchange/rate.json',
                    data: {},
                    success: function (response) {
                        let fxData = response[1].rate;
                        $('#fx-rate').append(fxData);
                    }
                })
            })

            function order() {
                let name = $('#name-input').val();
                let amount = $('#inputGroupSelect01').val();
                let address = $('#address').val();
                let phone = $('#phone').val();

                let innerHTML = `<tr>
                                    <td>${name}</td>
                                    <td>${amount}</td>
                                    <td>${address}</td>
                                    <td>${phone}</td>
                                 </tr>`

                if ($('#name-input').val() == '') {
                    alert('성함을 입력해주세요');
                } else if ($('#inputGroupSelect01').val() == 'none') {
                    alert('수량을 선택해주세요');
                } else if ($('#address').val() == '') {
                    alert('주소를 입력해주세요');
                } else if ($('#phone').val() == '') {
                    alert('연락처를 입력해주세요');
                } else {
                    alert('주문이 완료되었습니다');
                    $('#order-info').append(innerHTML);
                }

            }



        </script>
    </head>
    <body>
        <div class="wrapper">
            <div class="img"></div>

            <h1>바닐라 크림 콜드 브루</h1>
            <p>
                가격: 6,000원 / 1잔
            </p>
            <p class="fx-rate-info">
                달러/원 환율: <span id="fx-rate"></span>
            </p>
            <p>
                콜드 브루에 더해진 바닐라 크림으로 깔끔하면서 달콤한 콜드 브루를 새롭게 즐길 수 있는 음료입니다.<br>
                제품 영양 정보: Tall(톨) / 355ml (12 fl oz)
            </p>

            <h2>주문하기</h2>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="name">주문자 성함</span>
                </div>
                <input type="text" class="form-control" aria-label="Username"
                       aria-describedby="basic-addon1" id="name-input">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">수량</label>
                </div>
                <select class="custom-select" id="inputGroupSelect01">
                    <option selected value="none">-- 수량을 선택하세요 --</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">주소</span>
                </div>
                <input type="text" class="form-control" aria-label="Username"
                       aria-describedby="basic-addon1" id="address">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">전화번호</span>
                </div>
                <input type="text" class="form-control" aria-label="Username"
                       aria-describedby="basic-addon1" id="phone">
            </div>

            <p class="btn-box">
                <button class="btn btn-success" onclick="order()">주문하기</button>
            </p>

            <table>
                <thead>
                <tr>
                    <td>이름</td>
                    <td>수량</td>
                    <td>주소</td>
                    <td>전화번호</td>
                </tr>
                </thead>
                <tbody id="order-info">
                </tbody>
            </table>
        </div>
    </body>

Reference

この問題について(スパルタコードクラブ2週目), 我々は、より多くの情報をここで見つけました https://velog.io/@yj6151122/스파르타-코딩클럽-2주차

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

WEEK 3

ASP.NET面接問題(四)