2주차 목표
1. Javascript의 사용방식에 대해 이해하고 문법에 익숙해진다
2. JQuery로 HTML을 조작할 수 있다
3. Fetch로 서버 API에 데이터를 주고, 결과를 받아온다
1. Javascript & JQuery 연습하기
(1) 반복문 (forEach 사용) , 조건문 실행해보기
<반복해서 꺼내쓰기> - ages에서 하나씩 꺼내서 변수 a에 저장
<script>
let ages = [12,15,20,25,17,37,24]
ages.forEach((a) => {
if (a >20) {
console.log('성인입니다')
} else {
console.log('청소년입니다.')
}
})
</script>
출력결과 console 창에서 확인
alert 사용하여서 button 클릭시 해당 글자가 뜨게 할 수도 있음
<script>
let ages = [12,15,20,25,17,37,24]
ages.forEach((a) => {
if (a >20) {
alert('성인입니다')
} else {
alert('청소년입니다.')
}
})
</script>
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
- GET → 데이터 조회(Read)를 요청할 때
ex) 영화 목록 조회- POST → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
ex) 회원가입, 회원탈퇴, 비밀번호 수정
2. Fetch
Fetch : 서버에서 주는 데이터를 받아올 수 있는 URL을 사용해서 데이터를 받아오는데 사용
미세먼지 OpenAPI 사용
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>< Fetch의 기본 골격구조 >
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다'MSRSTE_NM'(구)와 'IDEX_MVL'(미세먼지 수치)만 뽑아 사용
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
// 구의 이름, 미세먼지 수치 값을 개발자 도구에서 찍어보기
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})출력결과
3. Fetch 사용해서 실습 ( 업데이트 버튼을 누를 때 마다 실시간 미세먼지 상태 업데이트 되는 화면 만들기 + 미세먼지 수치가 40이상인 곳은 빨갛게 나타내기 )
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color : red;
}
</style>
<script>
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
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>
</head>
<body>
<h1>Fetch 연습하자!</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><ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
이 부분이 업데이트 되어야 하니까 아래와 같은 코드로 표현
$('#names-q1').append(temp_html) // 어디에 들어갈 지를 확인하고, 아이디 값을 지정해준 뒤 append!
< append >
$('#names-q1').append(temp_html)
이 코드는 id가 'names-q1'인 요소에 변수 'temp_html'의 내용을 추가한다.
즉,'temp_html' 변수에 저장된 HTML 코드를 'names-q1' 요소에 덧붙이는 것4. 서울시 OpenAPI (실시간 따릉이 현황) 사용 ( 따릉이 대수가 5대 미만인 곳은 빨갛게 나타내기 )
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 연습하고 가기!</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;
}
.red {
color : red;
}
</style>
<script>
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
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>
</head>
<body>
<h1>Fetch 연습하자!</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>
5. 실시간 서울 날씨 API 를 적용
(내 '생애 최고의 영화들'과 버튼 '영화 기록하기' 사이에 실시간 서울 날씨를 나타내기)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>부트스트랩 연습하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
}
.mytitle>button {
width: 250px;
height: 50px;
background-color: transparent;
border: 1px solid white;
border-radius: 50px;
color: white;
margin-top: 20px;
}
.mytitle>button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypost {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
margin-right: 20px;
}
.mybtn>button {
margin-right: 10px;
}
</style>
<script>
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
let number = data['temp']
$('#temp').text(number)
})
})
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button onclick="hey()">영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐️</option>
<option value="2">⭐️⭐️</option>
<option value="3">⭐️⭐️⭐️</option>
<option value="4">⭐️⭐️⭐️⭐️</option>
<option value="5">⭐️⭐️⭐️⭐️⭐️</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어갑니다.</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다. </p>
<p> ⭐⭐⭐</p>
<p class="mycomment">감상평</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어갑니다.</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다. </p>
<p> ⭐⭐⭐</p>
<p class="mycomment">감상평</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어갑니다.</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다. </p>
<p> ⭐⭐⭐</p>
<p class="mycomment">감상평</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어갑니다.</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다. </p>
<p> ⭐⭐⭐</p>
<p class="mycomment">감상평</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html> <div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button onclick="hey()">영화 기록하기</button>
</div>
$('#temp').text(number):
이 코드는 id가 'temp'인 요소의 텍스트 내용을 'number' 변수의 값으로 설정한다.
즉, 'temp' 요소의 내용을 'number' 값으로 덮어쓰게 됨으로 'temp' 요소의 내용은
이전에 있던 내용 대신 'number' 값으로 대체☑️ 출력 완료 2주차 끝 ! ☑️
💭 어려웠던 부분 정리
$('#names-q1').append(temp_html)
이 코드는 id가 'names-q1'인 요소에 변수 'temphtml'의 내용을 추가한다. 즉,'temp_html' 변수에 저장된 HTML 코드를 'names-q1' 요소에 덧붙이는 것
$('#temp').text(number):
이 코드는 id가 'temp'인 요소의 텍스트 내용을 'number' 변수의 값로 설정한다.
즉, 'temp' 요소의 내용을 'number' 값으로 덮어쓰게 됨으로 'temp' 요소의 내용은 이전에 있던 내용 대신 'number' 값으로 대체
좋은 정보 얻어갑니다, 감사합니다.