개발 일지✨
스파르타 코딩클럽 2주차
하루
2021. 12. 10. 04:09
2주차 학습내용
HTML파일을 받았을 때 Javascript로 다시 리로딩(re-loading) 되지 않고 서버에 데이터를 요청하고 받는 방법!
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아올 것이다.
1. Javascript 복습하기
⭐ 짝/홀수에 따라 다른 얼럿을 띄우는 onClick 함수 만들기
- 짝수번 눌렀을 때는 '짝짝짝👏'
- 홀수번 눌렀을 때는 '홀홀홀🎅' 얼럿을 띄우는 버튼
짝수와 홀수 구분하기
2로 나누었을 때 나머지가 0 이면 짝수, 아니면 홀수
이전에 배웠던 나눗셈의 나머지를 구하는 % 를 이용하면 된다!
버튼을 누를 때 마다 증가하는 count 값에 따른 홀수/짝수를 구분하여 얼럿을 띄워야 한다.
count 값이 홀수인지 짝수인지 구분해주는 조건문을 작성해주고, 누를 때마다 count 값이 증가하도록 count += 1을 해주었다.
*count += 1 은 count = count + 1 과 동일한 의미로, 현재의 값에 1을 더해준다는 뜻이다.
<script>
let count = 1; // 전역변수
function hey() {
if (count % 2 == 0) {
alert('짝수입니다!')
} else {
alert('홀수입니다!')
}
count += 1;
}
</script>
2. jQuery 시작하기
HTML 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리!
Javascript로도 모든 기능을 구현할 수는 있지만 코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야 해서 jQuery 라이브러리가 등장하게 되었다.
jQuery는 Javascript와 다른 소프트웨어가 아니라 전문 개발자들이 짜둔 미리 작성된 Javascript 코드이다.
잘 짜여진 코드를 라이브러리에서 가져와서 사용하는 것임으로 사용하기 전에 import 를 통해서 불러와주어야 한다.
비교
document.getElementById('element').style.display = 'none'; // js$('#element').hide(); // jQueryjQuery를 이용하면 보다 직관적으로 코드를 작성할 수 있다.
jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
3. jQuery 다뤄보기
CSS에서 선택자로 class를 사용하였듯이, jQuery에서는 id값을 통해 특정 요소를 가리켜서 조작하게 된다.
먼저, 사용할 요소에 id값을 준 뒤 아이디를 선택하여 사용하면 된다.
1) input 박스의 값 가져오기
$('#article-url').val();
2) div 보이기/ 숨기기
$('#post-box').hide() // 사라짐 = display: none;
$('#post-box').show() // 나타남 = display: block;3) CSS값 가져오기
$('#post-box').css('width') // '500px'
$('#post-box').css('width', '700px') // '700px' css 값 변경$('#post-box').hide();
$('#post-box').css('display'); // 'none'
$('#post-box').show();
$('#post-box').css('display'); // 'block'4) 태그 내 텍스트 입력하기
리터럴에 추가하고 싶은 내용을 작성한 후 객체에 담아준다.
그리고 내용을 추가할 요소의 아이디를 선택해서 .append를 통해 담아준 객체를 파라미터로 넣어주면 된다.
이것을 이용하면 똑같은 템플릿을 계속해서 붙여넣을 수 있다.
리터럴로 작성해주는 것은 bactick( ` )으로 감싸서 작성해주어야 한다. (숫자 1번 왼쪽에 ` 입력)
backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수도 있다.
⚡ append( ) 함수는 선택한 요소의 내용의 끝에 새로운 콘텐츠를 추가할 수 있다.
1) 버튼 넣어보기
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);
2) 카드 넣어보기
let temp_html = ` <div class="card">
<img class="card-img-top"
src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
alt="Card image cap">
<div class="card-body">
<a href="https://naver.com">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
</div>
</div>`;
$('#cards-box').append(temp_html)
4. JQuery 적용하기
⭐ 나홀로 메모장
- '포스팅박스 열기' 버튼을 누르면 숨겨진 창이 나타나고 버튼의 내용이 '포스팅박스 닫기'로 바뀐다.
- 다시 한 번 버튼을 클릭하면 원래 모습을 돌아간다.
- '포스팅박스 열기' 버튼에 function 달기
onclick="함수이름( )" 을 통해서 클릭했을 때 실행될 함수를 연결해주면 된다.
<a class="btn btn-primary btn-lg" id="btn-posting-box" onclick="openclose()" href="#" role="button">포스팅박스 열기</a>
- 클릭해서 포스팅박스를 여닫게 하기
우선, 보이고 사라질 포스팅박스(post-box)의 display 상태를 확인해본다.
기본적으로 'block' 보이는 상태이다.
- 포스팅박스가 보일 때 버튼을 눌러서 닫힘 상태가 되는 '포스팅박스 닫기'는 현재 display가 보이는
'block'상태이다. 때문에post-box가'block'상태일 때는 버튼을 누르면post-box가hide가 실행되어야 한다. - 포스팅박스가 보이지 않을 때 버튼을 눌러서 열림 상태가 되는 '포스팅박스 열기'는 현재 display가 보이지 않는
'none'상태이다. 때문에post-box가'none'상태일 때는 버튼을 누르면post-box가show가 실행되어야 한다.
<script>
function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') {
$('#post-box').hide();
} else {
$('#post-box').show();
}
}
</script>
- '포스팅박스 열기' 버튼의 글씨 바꿔주기
마찬가지로 포스팅박스를 숨겼을 때는 포스팅박스를 다시 열 수있도록 '열기' 버튼을 보여주고, 포스팅박스를 보여줬을 때는 다시 숨길 수 있도록 '닫기' 버튼을 보여준다.
헷갈릴 때는 직접 해보고 아니면 바꿔서 적용하면 된다👍
<script>
function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') {
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else {
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}
</script>
- 처음부터 포스팅박스가 안보이게 하기
해당 포스팅박스의 클래스를 선택해서 CSS에서 display: none을 작성해주면 안보이는 상태가 된다.
더보기
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
.wrap {
width: 900px;
margin: auto;
}
* {
font-family: 'Noto Serif KR', serif;
}
.card {
font-size: 15px;
}
.text-blue {
color: blue;
font-weight: 800;
}
.posting-box {
width: 500px;
border: 3px solid black;
border-radius: 10px;
margin: auto;
display: none;
padding: 50px;
}
.card-columns {
margin-top: 32px;
}
.form-group>.btn {
margin-top: 20px;
}
</style>
<script>
function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') {
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else {
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" id="btn-posting-box" onclick="openclose()" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="posting-box" id="post-box">
<div class="form-group">
<label>Article url</label>
<input type="text" class="form-control" id="article-url" placeholder="주소를 입력해주세요">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="코멘트를 작성해주세요"></textarea>
<a class="btn btn-primary" href="#" role="button">기사 저장</a>
</div>
</div>
<div class="card-columns" id="cards-box">
<div class="card">
<img class="card-img-top"
src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
alt="Card image cap">
<div class="card-body">
<a href="https://naver.com">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
alt="Card image cap">
<div class="card-body">
<a href="https://naver.com">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
alt="Card image cap">
<div class="card-body">
<a href="https://naver.com">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
alt="Card image cap">
<div class="card-body">
<a href="https://naver.com">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
alt="Card image cap">
<div class="card-body">
<a href="https://naver.com">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
alt="Card image cap">
<div class="card-body">
<a href="https://naver.com">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>
[Quiz] jQuery 연습하기
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
let inputQ1 = $('#input-q1').val();
if (inputQ1 == '') {
alert('입력하세요!')
} else {
alert(inputQ1)
}
}
💡Hint! includes 함수 이용하기
더보기
⚡ includes( )
includes 함수는 배열이 특정값을 포함하고 있는지의 여부를 boolean 값으로 반환해준다.
arr.includes(valueToFind, index)파라미터
- valueToFind: 찾으려는 값
- index: 검색을 시작할 index 위치. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다.
리턴값
배열이 valueToFind 값을 포함하고 있는지의 여부 (Boolean)
예시)
'abzcd'.includes('z', 2)[2]번째 index인 z부터 zcd가 'z'를 포함하는지 검사한다. z를 포함하므로 true를 반환한다.
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
let inputQ2 = $('#input-q2').val();
if (inputQ2.includes('@')) {
let domain = inputQ2.split('@')[1].split('.')[0]
alert(domain);
} else {
alert('이메일이 아닙니다.')
}
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
let inputQ3 = $('#input-q3').val();
let temp_q3 = `<li>${inputQ3}</li>`
$('#names-q3').append(temp_q3)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}*empty( ) 함수란?
더보기
.empty( ) 는 선택한 요소의 내용을 지운다.
내용만 지울 뿐 태그는 남아있다는 것에 주의 해야한다.
태그를 포함한 요소 전체를 제거할 떄는 .remove( ) 를 사용한다.
예시)
<h1>Lorem</h1>
$('h1').empty()<h1></h1>
5. 서버-클라이언트 통신 이해하기
자바스크립트로 페이지 전환 없이 서버에서 값을 받아올 수있는 방법!
1) 서버 → 클라이언트: 'JSON'
클라이언트에서 서버로 데이터를 요청했을 때 서버에서 클라이언트로 넘어오는 데이터 포맷을 'JSON' 이라고 한다.
OpenAPI 소스들을 보면 JSON 데이터들이 리스트+딕셔너리(Key:Value) 형태로 쭉 나열되어 있다.
이럴 때 크롬 익스텐션 JSONView를 설치하면 좀 더 예쁘게 JSON을 볼 수 있다.
2) 클라이언트 → 서버: GET 요청
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것/ 처리해주는 것이 다른 것 처럼,
클라이언트가 요청할 때에도 '타입'이라는 것이 존재한다.
- GET → 통상적으로 데이터 조회(Read)를 요청할 때
- 예) 영화목록 조회
- POST → 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
- 예) 회원가입, 회원탈퇴, 비밀번호 수정
GET 방식으로 데이터를 전달하는 방법
- ? : 여기서부터 전달할 데이터가 작성된다는 의미
- & : 전달할 데이터가 더 있다는 의미
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
- q=아이폰 (검색어)
- sourceid=chrome (브라우저 정보)
- ie=UTF-8 (인코딩 정보)
6. Ajax 시작하기
🚨 주의! Ajax는 jQuery를 import한 페이지에서만 동작 가능하다.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 import 되어있지 않기 때문에 아래와 같은 에러가 뜬다.
Uncaught TypeError. $.ajax is not a function (ajax 라는게 없다는 뜻)
Ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})여기서 url에 우리가 사용할 예제인 미세먼지 OpenAPI 주소를 붙여 넣어주면 해당 API 주소의 모든 데이터가 response로 받아오게 된다. 꼭 이름이 response가 아니더라도 function의 파라미터로 url의 데이터가 들어오는 것이다. (BUT 통상적으로 response 라고 쓰임)
Ajax 코드 해설
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "여기에URL을입력", // 요청할 url
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기 / POST에서 쓰임)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드 작성
}
})- data: 요청하면서 함께 줄 데이터 (GET 요청 시엔 비워주기)
- GET 요청은 url 뒤에 아래와 같이 붙여서 데이터를 가져간다
- http://naver.com?param=value¶m2=value2
- POST 요청은
data: { }에 넣어서 데이터를 가져간다.- data: {param: 'value', param2: 'value2'}
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
API로 부터 데이터 가져와서 콘솔에 찍어보기
$.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);
}
}
});
7. Ajax 연습하기
1) 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기
- 모든 구의 미세먼지를 표기해주세요.
- 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.
- 미세먼지 수치가 70 이상인 곳은 빨간 글씨로 보여준다.
- 모든 구의 미세먼지를 업데이트 버튼 눌렀을 때 붙여넣기
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
}
}
})
}
</script>문제: 구와 미세먼지 정보가 계속해서 붙여진다. 📄+📄+📄+📄+... 누를 때마다 지우고 붙여져야 한다!
👉 ajax가 불려지기 전에 클릭했을 때 값을 비우고 붙이면 된다!
<script>
function q1() {
$('#names-q1').empty(); // 클릭되면 비우기
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
}
}
})
}
</script>
- 미세먼지 수치가 70 이상인 곳만 빨간 글씨로 보여주기
먼저, 글씨를 빨갛게 어떻게 적용해줄까?
CSS를 이용해서 빨간 글씨를 지정해줄 클래스의 css 스타일을 작성해준다.
.bad { color: red; }그리고 이 클래스를 빨갛게 표현해줄 부분에 클래스를 추가해주면 간단하다.
let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`이것을 이용해서 클래스를 선택적으로 수치가 70인 이상인 부분에만 먹이면 된다.
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = ``
if (gu_mise > 70) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>더보기
⭐ 코드 스니펫
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color :red;
}
</style>
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = ``
if (gu_mise > 70) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>
2) 서울시 OpenAPI(실시간 따릉이 현황)을 이용하기
- 미세먼지 예제와 동일하지만 이번에는 표의 형태이다.
- 업데이트 버튼을 누를 때마다 지웠다 새로 씌워지며 거치대 위치, 거치대 수, 현재 거치된 따릉이 수를 표시한다.
- 현재 거치된 따릉이 수가 5대 보다 작은 곳은 빨갛게 표시한다.
🤔 내가 작성한 코드
더보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.less {
color: red;
}
</style>
<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 stationName = rows[i]['stationName']
let rackTotCnt = rows[i]['rackTotCnt']
let parkingBikeTotCnt = rows[i]['parkingBikeTotCnt']
let temp_html =``
if (parkingBikeTotCnt < 5) {
temp_html = `<tr class="less">
<td>${stationName}</td>
<td>${rackTotCnt}</td>
<td>${parkingBikeTotCnt}</td>
</tr>`
} else {
temp_html = ` <tr>
<td>${stationName}</td>
<td>${rackTotCnt}</td>
<td>${parkingBikeTotCnt}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<h1>jQuery + Ajax의 조합을 연습하자!</h1>
<hr />
<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">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
<tr>
<td>103. 망원역 2번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
<tr>
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>평가
기존에 표에 붙어있던 예시 목록들을 지워주지 않아서 계속해서 붙어있다. 값은 업데이트 되는 것으로 보아서 괜찮은 것 같기도 하고.. 그치만 기존의 목록은 지워주는게 좋을 것 같다!
3) 랜덤 고양이 사진 API 이용하기
랜덤 고양이 사진 API를 받아오면 새로고침 할때마다 이미지주소가 바뀌면서 랜덤한 고양이 이미지가 나온다.
(cat을 dog로 바꾸면 랜덤 강아지 사진도 가능하다🐶)
- 버튼을 누를때마다 이미지가 랜덤으로 고양이 사진이 바뀐다.
- 힌트: "jQuery 이미지 태그 src 바꾸기"
🤔 내가 작성한 코드
더보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
div.question-box > div {
margin-top: 30px;
}
</style>
<script>
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);
}
})
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
<p>예쁜 고양이 사진을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</div>
</body>
</html>
jQuery와 Ajax는 처음 접하는 것이어서 새로웠다. 막상 퀴즈를 풀려고 하니까 막막했는데 힌트들을 제공해주셔서 배운 것들을 떠올리면서 풀 수 있었다! 그리고 아직 모르는 것도 어떤 것을 활용해야하는지 구글링 힌트도 주셔서 내가 직접 찾아서 터득할 수 있었다😆✌
출처/참고