[2주차 숙제]
! 스파르타피디아에 날씨 입력하기
? 답안과 다른 이유: 급하게 실습하면서 따라하긴 했는데,
중간에 설명이 안 된 부분들이 있어 이해가 완전하지 않다.
그냥 그러려니 하고 넘어가기에는 동작 원리에 대한 부분이라
이해가 안 되면 다음 강의에서도 헤맬 것 같다.
특히 답안에 왜 .text인지가 이해가 되질 않는다.
? 답안과 다른 부분
$('#names-q1').append(temp_html)에서 시작해야함
$('#names-q1').append(temp_html) -> $('#temp').text(number)
## 제출본 ##
<script>
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
let number = data['temp']
$('#temp').empty()
let temp_html = `<span id="temp">${number}</span>`
$('#temp').append(temp_html)
})
})
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들!</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button onclick="hey()">영화 기록하기</button>
</div>
## 답안 ##
<script>
$(document).ready(function() {
// console.log(data)
let number = data['temp']
$('#temp').text(number)
})
})
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button>영화 기록하기</button>
</div>
JSON: 서버에서 데이터를 내려줄 때 dictionary 형태로 내려주는 것
#1 반복
<script>
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
</script>
#2 조건
<script>
let age = 24
if (age > 20){
console.log('성인입니다')
} else
console.log('청소년입니다')
</script>
<script>
let age = 18
if (age > 20){
console.log('성인입니다')
} else
console.log('청소년입니다')
</script>
#3 반복+조건
<script>
let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
</script>
#4 JQuery
<script> function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty()
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
$('#q2').empty()
people.forEach((a) => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}입니다.</p>`
$('#q2').append(temp_html)
})
}
</script>
#4 Fetch반복(서울시 미세먼지 '구','수치' 가져오기)
<script>
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})
</script>
#5
<script>
function q1() {
let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
});
})
}
</script>
#6 데이터 가져와서 그 데이터 중에서 list인 부분만 추려서
그 list를 돌면서 필요한 정보를 꺼내서 조건문을 매겨서 붙인다
// 서울시 미세먼지
<script>
function q1() {
let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = ``
if (gu_mise > 40){
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>
// 서울시 따릉이
<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;
}
.red {
color: red;
}
</style>
<script>
function q1() {
let rows = data['getStationList']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let name = a['stationName']
let rack = a['rackTotCnt']
let bike = a['parkingBikeTotCnt']
let temp_html = ``
if (bike < 5){
temp_html = `<tr class="red">
<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)
})
})
}
</script>
