スパルタコードクラブ2週目
28841 ワード
[カリキュラムの目標] Javascript構文を熟知しています. jQueryで簡単なHTMLを操作できます. Ajaxを使用してサーバAPIにデータを送信し、結果を受信します.
Javascript-パリティに基づいて別の浮動小数点onclick関数を作成する簡単な復習
偶数を押すとき👏「あ、奇数を押すとき」🎅「どれだけ弾けるボタンを作ろう!
偶数/奇数の判断方法
コードフラグメントペア/奇数onclick関数(完了)
jQueryって何?
HTMLの要素を処理するために便利なJavaScriptを事前に作成しています.ライブラリ!
Javascriptは、ボタンフォントの変更など、すべての機能を実現することもできます.
1)コードが複雑で,2)ブラウザ間の互換性の問題も考慮する.
jQueryという名前のライブラリが現れました
jQueryとJavascript-コードの比較
jQueryは、JavaScriptやその他の特殊なソフトウェアではなく、事前に作成されたJavaScriptコードです.これは専門開発者が丹念に作成したコードで使用されていることを覚えておいてください.(そのため、書き込む前に「インポート」!)
Javascriptで長くて複雑なものを書きます.
jQueryの使用
あらかじめ作成されたJavascriptコードをインポートすることを「インポート」と呼びます.
[コード断片]jQuery CDN
和の間に下を置いて終わりです!
もしあなたが真剣にカリキュラムにフォローしている人であれば、私は一人で手帳コードに以下の内容を入力します.もう一度よくチェックしてください.
jQueryの使用方法
cssと同様にjQueryを使用する場合も「指向」→操作が可能です.
例)特定の足場の値段→持ってきて!
例)特定のdiv→見えない!
cssはclassを選択者として使っていますよね?
jQueryでは、id値でボタン/入力ボックス/div/...を指定します.背中を指さす
百聞は一見にしかず!よく使うjQueryに慣れましょう.
サーバ→クライアント:「JSON」について
ソウル市OpenAPIを訪問
[コード断片]スモッグOpenAPI
Chrome Extension JSOnViewをインストールしますか?ではJSONをもっときれいに見ることができます
[コード断片]-Jsonview
JSONはKey:Valueで構成されています.資料型Dictionaryとよく似ています.
上記の例では、RealtimeCityAirというキー値にはバイナリ値が含まれています.
rowという名前のキー値の1つには、リスト型の値が含まれます.
クライアントの理解→サーバ:GETリクエスト
APIは銀行の窓口のようです!
同じ預金窓口で、個人のお客様か企業のお客様かによって、
インポート/処理が必要な内容が異なり、
クライアントリクエスト時でも「タイプ」は存在します.
GET→通常!データ照会要求時
例)ムービーリストの表示
POST→通常!作成、更新、削除を要求します.
例)会員加入、会員脱退、パスワード修正
その中で、今日はGET方式を学びます.(POSTは4週目に勉強します)
GET
寄生虫
? : これは、ここで渡すデータを作成することを意味します.
&:他に伝達するデータがあることを示します.
例)Google.com/search?q=iphone&sourcceid=chrome&ie=UTF-8
誰が決めたの?
→はい、これがフロントエンド開発者とバックエンド開発者の約束です.
フロント:「コードという映画番号をあげてもいいですか?」
バックエンド:「はい、そうします.では、コードで映画番号を入力してから符号化します.」
Ajaxの起動
クロム開発者ツールに次のように書きます.
注意!Ajaxは、jQueryをインポートするページでのみ使用できます.
開発ツールをhttp://google.com/などの画面で開くと、jQueryがインポートされていないため、次のエラーが発生します.
Uncaught TypeError: $.ajax is not a function
→ajaxの意味がない
[コード断片]スモッグOpenAPI
[コード断片]Ajax基本スケルトン
$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≫:成功した場合、応答値にサーバーの結果値を含めて関数を実行します.
結果はどのように反応しますか?→受け入れなきゃ...!
(多くの開発者も内部原理を知らない.コードを開いたことがないからだ.^^;)
Ajax通信の結果値を使用して表示
上のAjax通信を発展させましょう!
開発者ツールコンソールに印刷
すべてのボールのスモッグ値を測定してみます
復習の時は我慢!注記)すべての球の微塵値を測定しようとします.
スモッグデータの場所を検索
上図に示すように、RealtimeCityAir>rowにはスモッグデータが含まれています.これを出しましょうか.
重複文を使用した古いデータの出力
rowの値をmiseリストに含めた以上、繰り返し文を使いましょう.
球データから球名と微塵値を選択して出力
ボール名キー値「MSRSTE NM」、ダスト数値キー値「IDEX MVL」の値を出力
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);
}
}
});
Reference
この問題について(スパルタコードクラブ2週目), 我々は、より多くの情報をここで見つけました https://velog.io/@ssbeam/스파르타-코딩-클럽-2주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol