고정 헤더 영역
상세 컨텐츠
본문
728x90
<!DOCTYPE html>
<html lang="en">
<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{ // 8. bad 클래스를 가진 태그는 글씨가 빨간색으로 설정
color: red;
}
</style>
<script>
function q1() { //1. q1이라는 함수 만들고 Ajax 코드 입력
$('#names-q1').empty();
// 함수가 호출 될때 ID nanes-q1태그 안의 모든 값을 지워준다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
// 2.서울시미세먼지OpenAPI url입력
data: {},
success: function(response){ //3.response값 가져오기
let rows =response['RealtimeCityAir']['row'];
//4.response['RealtimeCityAir']['row']배열 변수 선언
for(let i = 0 ; i<rows.length; i++){//반복문으로 0 ~ rows의 길이만큼 출력한다.
let gu_name=rows[i]['MSRSTE_NM']
//5. 변수 rows의[i]번째['MSRSTE_NM'] 구이름을 gu_name로 변수 선언
let gu_mise=rows[i]['IDEX_MVL']
//6. 변수 rows의[i]번째['IDEX_MVL'] 미세먼지농도를 gu_mise로 변수 선언
let temp_html = ``// 7.공란을 temp_html로 변수 선언
if(gu_mise>40){
//9. 미세먼지농도가 40이상이면 공란 temp_html에 아래와 같이 클래스 bad를 갖는 태그 입력
태그안에는 i번째 구이름 : 미세먼지 농도가 출력(붉은글씨)
temp_html=`<li class="bad">${gu_name} : ${gu_mise} </li>`
}else{
10. 미세먼지농도가 40이상이 아니면 공란 temp_html에 아래와 같이 클래스를 갖지 않는 태그 입력
태그안에는 i번째 구이름 : 미세먼지 농도가 출력(검정글씨)
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">
</ul>
</div>
</body>
</html>728x90
'CS전공 지식 > 웹서비스 이해하기' 카테고리의 다른 글
| mongoDB에 가입하고 사용해보기 (0) | 2022.12.02 |
|---|---|
| 파이썬을 이용한 웹 크롤링 (네이버영화) (0) | 2022.12.02 |
| Ajax를 사용하여 이미지와 텍스트 불러오기 (0) | 2022.11.30 |
| Ajax로 서울시 실시간 따릉이 현황(OpenAPI) (0) | 2022.11.29 |
| 서버 클라이언트 통신 이해하기 (0) | 2022.11.29 |
