JavaScriptとAjax,jQuery。

サンプルを作成し、サンプルを適用します。

実は、YouTubeで学ぶコンセプトは、おぉ~というより、制作に向いているのではないでしょうか?100%でなくても、ある程度スパルタコードクラブで作られているような感じがすることもあります.今日は、私が今回の授業で学んだAjaxとjQuery、および授業で作成した例を振り返り、記録します.
今週は.
1.JavaScriptのjQueryを使用して画面上のパイロットメッセージを出力する方法.
2.サーバAPI要求情報に基づいて、JSON形式のデータを受信し、画面に適用する方法.
聖書を学びました.
まず、jQueryはJavaScriptでhtmlの要素を操作するためのコードをあらかじめ記述したライブラリです.したがって、JavaScriptで長い時間を必要とするコードをより直感的かつ容易に記述できるという利点がある.ただし、個別の機能ではなく、JavaScriptコードをあらかじめ作成しているだけなので、基本的なJavaScriptを学ぶ必要があります.
Jクエリーを見ると、

$('').val()

はい、この構造の中で、最初の$は少し好奇心があって、私は調べて、“私は今Jクエリーを書きます.”意味は...とても重要な内容でしたが予想以上にあっさりしていました要するに,このように2番目のクエリの使用を宣言すると,括弧中の内容はCSSの選択者と見なすことができる.フォーマットも同様で、htmlにターゲットのタグ、クラス、アイデンティティなどをフォーマットで記入すると、対応する要素が指定されます.その後必要なアクティブな関数を書くと、この役割はターゲットに発生します.
また、このようなjクエリが含まれている場合にのみ、以下の形式のajaxを使用することができ、サーバにデータを要求することができます.ajaxのフォーマットは次のとおりです.

$.ajax({
  type: "GET"
  url: "",
  data: {}, 
  success: function(response){ 
    console.log(response) 
  }
})

GETタイプと書いてありますが、POST、DELETE、PUTなどでデータのリクエストの仕方を決めることができます.
実際の練習ではまだ「GET」しか使われていなかったので、とりあえずメモしておきました.
次のurlに要求データのアドレスを書いてください.
data部分では、上記のフォーマットがGETなので空欄にすることができますが、他の方式では、転送するデータを書き込むだけでよいです.
次に、低応答にロードされたデータが含まれ、これらの要素を使用してアクションを作成すると、結果値が返されます.
また、その成功を除いて、エラーが発生した場合、どのように出力され、終了後にどのようにしますか.

error: function(), complete: function()

通過できます.
これにより、上記の内容を関数に追加し、ホームページにいくつかのアクションを適用することができます.例えば、何かをクリックすると、任意の情報を変更したり、入力した情報を記録したり、入力した情報を削除したりすることができます.
例えば、練習しているサイトでは、映画URL、録画、クローズなどの内容を含むブロックがクローズ時に消えるように、録画映画ボタンをクリックした時に現れるようにjQueryを使用している.

<button onclick="openbox()">영화 기록하기</button>

<div class="mypost" id="postbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="URL" placeholder="[email protected]">
            <label for="URL">영화 URL</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>몇점?</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">코멘트</label>
        </div>
        <div class="buttons">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" onclick="close_box()" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>

この部分はhtmlの上記ブロック(録画ムービーボタン、閉じる)を構成する部分である.mypostというクラスのdivラベルに、「postbox」というidを指定して選択します.次に、onclick=「」をムービー録画および閉じるボタンセクションに接続し、onclick=「クリック」の場合に意図した関数を実行します.次に、上のヘッダスクリプトに移動して関数を入力します.

function openbox() {
            $('#postbox').show()
        }
function close_box() {
            $('#postbox').hide()
        }               

上の「録画ムービー」ボタンに接続されたopenbox()関数では、jQueryを使用して$(「#postbox」)として選択します.show()に設定し、「閉じる」ボタンに接続されているclose box()関数と同じIDを選択します.hide()で表示されないように設定します.結果、

△映画の記録が破線のように見えるのは、フフリン状態でボッドが反光フォーマットに設定されているからだ.

このような目標に沿って、ボタンを押して開閉することが可能になります!
jQueryはこのように処理されています.その後のレッスンではajaxでJSON形式のデータを取得し、サイトに適用できます.

ajaxで作成したソウル市大陵現状表の例.コードの構造から見ると、

<div class="question-box">
    <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
    <p>모든 위치의 따릉이 현황을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <table>
        <thead>
        <tr>
            <td>거치대 위치</td>
            <td>거치대 수</td>
            <td>현재 거치된 따릉이 수</td>
        </tr>
        </thead>
        <tbody id="names-q1">
        </tbody>
    </table>
</div>

これは本体部分の構成部分です.最初はエレメントが表示されず、更新して表示するためにテーブルのフォーマットを作成しましたが、その内容の部分はタグにIDが付与されているだけで、サブエレメントは空にします.
リクエストデータのajax部分から見ると、

 function q1() {
            $('#names-q1').empty();
            $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulbike",
            data: {},
            success: function (response) {
                let rows = response['getStationList']['row']
                for (let i = 0; i < rows.length; i++) {
                    let name = rows[i]['stationName']
                    let rack = rows[i]['rackTotCnt']
                    let bike = rows[i]['parkingBikeTotCnt']
                    let temp_html =``
                    if (bike < 5) {
                        temp_html = `<tr class="urgent">
                                    <td>${name}</td>
                                    <td>${rack}</td>
                                    <td>${bike}</td>
                                 </tr>`
                    } else {
                        temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${rack}</td>
                                    <td>${bike}</td>
                                 </tr>`
                    }
                $('#names-q1').append(temp_html)
                }
            }
        })
        }

はい、以前に書いたajax形式で作成されたスパルタエンコーディングクラブでターゲット方式で準備されたソウル市大陵はurlに情報リンクを入力して情報を受信します.次のsuccess functionでは、インポートした情報の必要な部分をrowsと定義し、for文でiを情報の数で加算して繰り返し、必要な情報ごとに前に定義したrowsと定義します.
次に、これらの情報を含むtemp htmlを定義し、空にし、状況に応じてどのような内容が含まれるかをif文で指定します.例では、バイト数が5より大きい場合、緊急クラスが付与され、cssから選択されて赤に設定されます.すなわち、バイト数が5より小さい場合、赤に表示されます.
その後、jQueryで指定したhtmlセクションに関数を追加し、条件に従って以前定義したtemp htmlを追加します.append(temp html)を書き、ボタンを押したときに情報を増やし、これらの要素をq 1()関数にすべて含め、上のボタンのonclickの場合に接続します.しかし、このように設定すると、ボタンを押すたびに、私はずっとtemp htmlの後ろについているので、一番前にあります.empty()を使用して以前の情報を消去し、新しい要素が現れます.