[Web開発総合クラス]開発ログ#2
33115 ワード
本開発ログは
変数を関数に書くと、関数が終わると値が消えてしまうので、外に書く
JS:HTMLを移動(e.g.をクリックするとウィンドウがポップアップ)
JQueryは、異なるブラウザで異なるコードと長いコードを記述することを減らすライブラリを作成しました.
Javascriptで長くて複雑なものを書きます.
より直感的にjQueryを使用
JQuery=あらかじめ作成されたJavascriptコード そのため使用前に「導入」しないと使用できない!
スパルタコードクラブ
ガイドバーはJQueryを使用しているため、ガイドバーのデフォルト設定にインポートされました
入力ボックスの値
divの表示/非表示
cssの値の取得と表示
タグにテキストを入力
Inputボックスの場合
他のボタンのテキストを置換(例)
タグにhtmlを入力
ボタンの挿入を試みる
ボタンではなくカードを挿入
アンカーボックスを開くボタンに関数を追加するには
クリックして、ロケータボックスをオン/オフにします.
「アンカーボックスを開く」ボタンのフォントを変更 位置決めボックスボタンのid値周期を開く ボタンテキスト交換
要求ウィンドウ=API
サーバ→クライアント送信データフォーマット=JSON
-JSON→DickShowneryとリストの組み合わせ
クライアント→サーバ
-APIは銀行窓口と同じです クライアントの要求タイプに応じて異なるデータを提供する GET:データ照会(e.g.映画カタログ照会) POST:データの作成、更新、削除を要求した場合(e.g.会員加入、ログアウト、パスワード変更)
GET
-ブラウザにアドレスを入力して企業に打撃を与えること自体がGETリクエスト
GET方式でデータを転送する方法
AjaxはjQueryをインポートしたページでしか動作しない Ajax基本骨格
Javascript復習
count += 1;
等しいcount = count + 1
letcount= 1;
function hey() {
if (count% 2 == 0) {
alert('짝수입니다!');
}
else {
alert('홀수입니다!')
}
count+= 1;
}
JQueryの起動
JS:HTMLを移動(e.g.をクリックするとウィンドウがポップアップ)
JQueryは、異なるブラウザで異なるコードと長いコードを記述することを減らすライブラリを作成しました.
Javascriptで長くて複雑なものを書きます.
document.getElementById("element").style.display = "none";
より直感的にjQueryを使用
$('#element').hide();
JQuery=あらかじめ作成されたJavascriptコード
JQueryについて
スパルタコードクラブ
ガイドバーはJQueryを使用しているため、ガイドバーのデフォルト設定にインポートされました
入力ボックスの値
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
divの表示/非表示
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();
cssの値の取得と表示
$('#post-box').hide();
$('#post-box').css('display');
$('#post-box').show();
$('#post-box').css('display');
タグにテキストを入力
Inputボックスの場合
$('#post-url').val('여기에 텍스트를 입력하면!');
他のボタンのテキストを置換(例)
// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>
$('#btn-posting-box').text('포스팅 박스 닫기');
タグにhtmlを入力
ボタンの挿入を試みる
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);
ボタンではなくカードを挿入
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);
JQueryの適用
アンカーボックスを開くボタンに関数を追加するには
```jsx
<script>
function openclose() {
// 여기에 jQuery를 이용해 코드를 짤 예정
}
</script>
// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>
```
クリックして、ロケータボックスをオン/オフにします.
```jsx
function openclose() {
// id 값 post-box의 display 값이 block 이면
if ($('#post-box').css('display') == 'block') {
// post-box를 가리고
$('#post-box').hide();
} else {
// 아니면 post-box를 펴라
$('#post-box').show();
}
}
```
「アンカーボックスを開く」ボタンのフォントを変更
<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a>
function openclose() {
// id 값 post-box의 display 값이 block 이면
if ($('#post-box').css('display') == 'block') {
// post-box를 가리고
$('#post-box').hide();
// 가렸으니까 이제 열기로 바꿔두기
$('#btn-posting-box').text('포스팅 박스 열기');
} else {
// 아니면 post-box를 펴라
$('#post-box').show();
// 폈으니까 이제 닫기로 바꿔두기
$('#btn-posting-box').text('포스팅 박스 닫기');
}
}
サーバ-クライアント通信について
要求ウィンドウ=API
サーバ→クライアント送信データフォーマット=JSON
-JSON→DickShowneryとリストの組み合わせ
クライアント→サーバ
-APIは銀行窓口と同じです
GET
-ブラウザにアドレスを入力して企業に打撃を与えること自体が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=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
Ajaxの起動
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
練習Ajax:データをロードして追加した後にスタイルを指定する
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "[http://spartacodingclub.shop/sparta_api/seoulbike](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(2):画像の変更
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
// 이미지 사진 변경하기
let imgurl = response[0]['url'];
$("#img-cat").attr("src", imgurl);
}
})
}
Reference
この問題について([Web開発総合クラス]開発ログ#2), 我々は、より多くの情報をここで見つけました https://velog.io/@rino121/웹개발-종합반-개발일지-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol