[수업목표]
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
[배운 것]
- Ajax와 JQuery 활용하기
그냥 이어지는 내용 계속 반복인데 계속 어버버하는 나....
퀴즈 중에 3분 드릴 테니까 빨리 해보세요! 했던 문제를 한 15분 걸려서 한 것 같음.
$.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']
if (gu_mise < 70){
console.log(gu_name,gu_mise)
}
}
}
})
정답은 이거였고 이미 있던 거에 if (gu_mise < 70) 이거만 추가하면 되는 거였는데 정답을 맞추기는 했지만 내 답에 확신이 없어서 이렇게 저렇게 고치고 괄호 빼먹고 그래서 수정하느라 오래 걸림..
따릉이 퀴즈는 응용력이 없는 관계로 이상한 거 쓰다가... 하나도 안 떠서 실패함...
오늘 2주차 진짜 다 끝내고 숙제 제출까지 하고 끝내려고 했는데 너무 졸려서 일단 자야겠다.....
아래는 실패한 코드...
<!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;
}
</style>
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['parkingBikeTotCnt']['row']
for (let i = 0; i < rows.length; i++) {
let now = rows[i]['parkingBikeTotCnt']
let total = rows[i]['rackTotCnt']
let sta = rows[i]['stationName']
let temp_html = ``
if (now > 0){
temp_html = `${sta} : ${total} : ${now}`
}
}
$('#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>
낮에 다시 해볼 것임....
[수강소감]
아직도 2주차를 다 못 끝내다니.... 슬슬 서터레서가 올라오려고 하는데... 서터레서 안 받고 재미있게 배우는 게 내 목표이니까 머리 비우고 랄프처럼 배워야지
'개발일지' 카테고리의 다른 글
| [내일배움단] 엑셀보다 쉬운 SQL - 4주차 완강! / 22년 1월 27일 (0) | 2022.01.27 |
|---|---|
| [내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 2주차 / 22년 1월 22일 (0) | 2022.01.22 |
| [내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 2주차 / 22년 1월 15일 (0) | 2022.01.15 |
| [내일배움단] 엑셀보다 쉬운 SQL - 3주차 / 22년 1월 11일 (1) | 2022.01.11 |
| [내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 1주차 숙제 / 22년 1월 9일 (0) | 2022.01.10 |
댓글