第二週Web開発総合クラス開発ログ

23643 ワード

jQuery
HTML要素を扱うJavaScriptのライブラリを事前に作成する

자바스크립트 
```document.getElementById("element").style.display = "none";
```

jQuery 
```$('#element').hide();```

上記のように、jQueryはより直感的に使用できます.
jQueryの使用<head></head>間でjQueryコンテンツ配信ネットワークを導入
使用可能です.
jQueryを使用する場合は、classではなくid値で指定できます.
いいですよ.

$('#id_name').val() // id_name이 id값을 가르키고, val()로 값을 가져온다.
$('#id_name').hide() // id_name이 id값을 가르키고, hide()로 숨긴다.
$('#id_name').show() // id_name이 id값을 가르키고, show()로 보이게 한다.

jQuery Quiz

<script>
function q1() {
    let temp_input = $('#input-q1').val() // 변수에 input값을 가져옵니다.
    if(temp_input == ''){				  // 변수에 input값이 없다면?
        alert('입력하세요.')					// '입력하세요.' 알람
    }else{								  // 그 외는 ?
        alert(temp_input)				  // input 값 알람
    }
}

function q2() {
    let txt = $('#input-q2').val()		  // 변수에 input값을 가져옵니다.
    if(txt.includes('@')==true){		  // 변수에 '@'가 포함되어있다면
        alert(txt.split('@')[1].split('.')[0]) 	// 도메인주소에서 '.'을
    }										   	// 기점으로 [0] 값 알람
    else{									   	// 그 외는 ? 	
        alert('이메일이 아닙니다.')				   	// 이메일이 아닙니다. 알람
    }
}

function q3() {
    let txt = $('#input-q3').val()		  // 변수에 input값을 가져옵니다.
    let temp_html = `<li>${txt}</li>`	  // 변수에 값을 넣어줍니다. 
    $('#names-q3').append(temp_html)	  // id에 변수값을 append 
}

function q3_remove() {
    $('#names-q3').empty()				  // id에 값을 비웁니다.
}
</script>

サーバ-クライアント通信feat.JSON
JSON
Key:Valueからなり、リポジトリに似ています.

RealtimeCityAirはKey
残りはバリューと考えられます
クライアント->サーバ:GETリクエストの理解
クライアントには、次の2種類のリクエストがあります.
GET:「データ照会」(Read)を要求した場合
POST:データの作成、更新または削除を要求する.
Ajax(Asynchronous JavaScript And XML)
AjaxもjQuery CDNをインポートするページでのみ機能します.
Ajaxベーススケルトン

```
$.ajax({
type: "GET",         // Ajax Type 설정
url: "여기에URL을입력", // Data를 요청할 URL 
data: {},			 // GET 요청시는 비워둠
success: function(response){  // 서버에서 가져온 값을 response에 넣음
console.log(response)
}
})
```

Ajax Practice

    <script>
    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 rack_name = rows[i]['stationName'];
                    let rack_cnt = rows[i]['rackTotCnt'];
                    let bike_cnt = rows[i]['parkingBikeTotCnt'];
                    let temp_html = ``
                    if (bike_cnt < 5 ){
                        temp_html = `<tr class="urgent">
                                        <td>${rack_name}</td>
                                        <td>${rack_cnt}</td>
                                        <td>${bike_cnt}</td>
                                     </tr>`
                    }else{
                        temp_html = `<tr>
                                        <td>${rack_name}</td>
                                        <td>${rack_cnt}</td>
                                        <td>${bike_cnt}</td>
                                     </tr>`
                    }
                    $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

    </head>

すべてのコードが大きすぎて、Ajax部分だけをカットしました.let rows = response["getStationList"]["row"];

変数行でurlサーバからインポートしたgetStationList(キー)に行値を入力します.

for (let i = 0; i < rows.length; i++) {}

反復文を使用して、必要なデータを各ローで取得します.

let rack_name = rows[i]['stationName'];
let rack_cnt = rows[i]['rackTotCnt'];
let bike_cnt = rows[i]['parkingBikeTotCnt'];

[i]目的の[データ]を目的の変数に挿入します.

 if (bike_cnt < 5 ){
                    temp_html = `<tr class="urgent">
                                    <td>${rack_name}</td>
                                    <td>${rack_cnt}</td>
                                    <td>${bike_cnt}</td>
                                 </tr>`
                	}else{
                    temp_html = `<tr>
                                    <td>${rack_name}</td>
                                    <td>${rack_cnt}</td>
                                    <td>${bike_cnt}</td>
                                 </tr>`
                }

ifゲートでは、自転車が5個以下の場合、フォントは赤を採用します.

$('#names-q1').append(temp_html);

idにtemp html値を追加します.

Ajax Practice2

<script>
	function q1() {
	$.ajax({
	type: "GET",
	url: "http://spartacodingclub.shop/sparta_api/rtan",
	data: {},
	success: function(response){
	let imgurl = response['url'];
	$("#img-rtan").attr("src", imgurl);
	let msg = response['msg'];
	$("#text-rtan").text(msg);
	}
	})
	}
</script>

	let imgurl = response['url'];
	$("#img-rtan").attr("src", imgurl);
	let msg = response['msg'];
	$("#text-rtan").text(msg);

urlから取得するデータ、すなわち画像が画像に記憶され、
valueをattr()で置換(

)

urlから取得したデータは、msgをmsgに入れtext()に出力します.

Reference

この問題について(第二週Web開発総合クラス開発ログ), 我々は、より多くの情報をここで見つけました https://velog.io/@tkclzl97/2주차-웹개발-종합반-개발일지

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

Collection and Share based on the CC Protocol

168日目-特定の画面のFooterを非表示

ビルトインアングルパイプ-パート5