웹개발
3주차 웹개발3
fw3d
2025. 3. 31. 16:56
3-11 추억앨범 fatch 적용
지금까지는 클릭시 정보 적용 이번에는 페이지가 준비되었을때 자동으로 정보 적용
$(document).ready(function () {
alert("안녕!");
});
문서준비되면 alert 띄우기.
alert에 fetch 를 붙여서 미세먼지 정보 띄우기.
.then(response => response.json()) // 응답을 JSON 형태로 변환
.then(data => console.log(data)) // 데이터를 출력
.catch(error => console.error('Error:', error)); // 에러 처리
$(document).ready(function () {
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data);
});
});
$(document).ready(function () {
fetch(url)
.then((res) => res.json()).then((data) => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
console.log(mise)
});
});
row 0번째의 idex num을 mise에 가져와라
콘솔까지 확인 가져온걸 <p>현재 서울의 미세먼지 : 좋음 </p> 에 붙여주기
좋음을 span으로 묶어서 id값 지정
$(document).ready(function () {
fetch(url)
.then((res) => res.json()).then((data) => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#msg').text(mise)
});
});
<p>현재 서울의 미세먼지 : <span id="msg">좋음</span></p>
3-12 스파르타 flix에 fetch 적용
$(document).ready(function(){
fetch(url).then(res => res.json()).then(data=>{
console.log(data['temp'])
})
})
콘솔에 url data 의 temp 값 불러오기
현재 기온 : <span id="temp_cr">20.00도</span>
$(document).ready(function(){
fetch(url).then(res => res.json()).then(data=>{
let temp = data['temp'];
$('#temp_cr').text(temp);
})
})
