먼저 JavaScript로 HTML을 조작하기 위해
JQuery를 추가한다.
JQuery는 <head></head> 안에 넣어주면 된다.
이후
<script></script> Script를 안에 작성해주고,
<script></script>안에 fuction openclose()
JavaScript 함수를 작성해줬다.
<script type="module">
function openclose()
{
}
</script>
함수 내부에
$('postingbox').toggle()을 작성하고
HTML부분 적용시킬 테그에
id="postingbox"라고 입력해줬다.
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="content" placeholder="name@example.com">
<label for="floatingTextarea">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="mybtn">
<button id="postingbtn" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
그 결과, Web 페이지 창에서
추억 저장하기를 누를 경우
입력란이 생기거나,
입력란이 사라지거나
했다.
추억 저장하기 버튼 클릭 전 + 버튼 2번 클릭할 경우
추억 저장하기 버튼 클릭 후
위와 같이 변경된다고 해당
HTML id가 posting box인
태그의 소스코드가 지워지고, 생성되는 것이 아니다!
안 보일 때는 해당 태그의 style의 display가 none이고
보일 때는 style의 display : none이 사라진 걸 볼 수 있다.
이제 엘범 카드를 추가하는 기능을 만들어 볼 것이다.
먼저,
<script></script>에 makeCard()라는
JavaScript 함수를 만들어주고,
HTML에 image를 넣을 수 있게 해주는
태그의 id를 "image"로 설정해준다.
이후 makeCard()함수에서
$('#image').val()로
HTML에서 id가 "image"인
테그의 입력된 값을 가져온다.
function makeCard()
{
let image = $('#image').val();
}
위와 같은 방식으로
title, content, date를 만든다.
function makeCard()
{
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
}
이제 HTML에서 앨범이 추가될 태그에
원하는 id를 설정해주고,
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
</div>
makeCard()에서
let temp_html =
`
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${date}</small>
</div>
</div>
`;
으로 JavaScript에서 HTML로 만들어질
앨범을 만들어주고
$('#card').append(temp_html)
으로 추가시켜줍니다.
위와 같이 작성할 경우, 앨범이 DB에 저장돼 있지 않기 때문에
새로고침을 누르면 사라지게 됩니다.
DB 구축에 들어가기 전
클라이언트와 서버의 개념을 이해하고 넘어가겠습니다.
클라이언트 : 서버에게 데이터를 제공하거나, 받는 역할을 수행한다.
클라이언트 -> 서버
GET 요청
서버 -> 클라이언트
JSON 이해하기
JSON은 Dictionary와 유사한 형태로
Key와 Value가 존재하는걸 볼 수 있었다.
API란 : Application Programming Interface의
약자로
클라이언트와 서버 사이의 데이터 전송 통신을 위한 규칙이나 룰, 방법입니다.
위와 같이 모두에게 공개되는 API를
우리는 OPENAPI라고 부릅니다.
Fetch(가져오다)
우리는 Fetch를 사용해 OPENAPI로
제공되는 정보를 받아올 수 있는데
<script>
function hey() {
fetch(url).then(res => res.json()).then(data => {
console.log(data['RealtimeCityAir']['row'][0]);
})
}
</script>
fetch(url)로 url에 해당하는 정보를 가져오고,
then(res => res.json()) 가져온 정보를 Json 파일 형식으로
변환 후,
then(data => 로 Json 파일 형식 Data를 가져온 후,
Json 파일 data에 RealTimeCityAir의 row에서 0번지 인덱스의
정보를 가져올 수 있다.
위의 함수를 좀 더 활용하면
<script>
function hey() {
fetch(url).then(res => res.json()).then(data => {
let row = data['RealtimeCityAir']['row'];
row.forEach(element =>
{
console.log(element);
});
})
}
</script>
으로 row에 있는 요소들을
반복문으로 모두 출력할 수 있다.
또한 그 element에 있는 KEY 값을 알면
<script>
function hey() {
fetch(url).then(res => res.json()).then(data => {
let row = data['RealtimeCityAir']['row'];
row.forEach(element =>
{
let gu_name = element['MSRSTE_NM'];
let gu_mise = element['IDEX_NM'];
console.log(gu_name+" : "+gu_mise);
});
})
}
</script>
위와 같은 방식 처럼 지역구 이름과 지역구 미세먼지
정도를 알 수 있다.
이렇게 가져올 수 있는 정보들을 HTML에 가져올려면
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1()
{
$('#names-q1').empty();
fetch(url).then(res=> res.json()).then(data =>
{
let rows = data['RealtimeCityAir']['row'];
rows.forEach(element =>
{
let gu_name = element['MSRSTE_NM'];
let gu_mise = element['IDEX_MVL'];
let 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">
</ul>
</div>
</body>
</html>
위와 같은 방식으로
OPEN API의 데이터를 HTML에 출력시켜줄 수 있다.
자세히 뜯어보면
"구 이름"과 "구 미세먼지 정도"를 출력시켜줄
부분이 HTML <body></body> 부분에 존재한다.
이 HTML 태그에 id인 "names-q1"을
$('#names-q1').append(temp_html)
으로 JavaScript에서 이용해
해당 영역 내부에
"구 이름"과 "구 미세먼지 정도"를
HTML로 추가될 수 있게 해준다.
JavaScript에서 작성한 HTML 내용은
let temp_html =
`
<li>${gu_name} : ${gu_mise}</li>
`
위와 같다.
JavaScript 전체 코드 :
<script>
function q1()
{
fetch(url).then(res=> res.json()).then(data =>
{
let rows = data['RealtimeCityAir']['row'];
rows.forEach(element =>
{
let gu_name = element['MSRSTE_NM'];
let gu_mise = element['IDEX_MVL'];
let temp_html =
`
<li>${gu_name} : ${gu_mise}</li>
`
$('#names-q1').append(temp_html)
});
});
}
</script>
HTML에 미세먼지가 40보다 높으면 빨간색으로
미세먼지 정도를 출력해주는 방법은
Script에 q1 함수에서
let temp_html =
`
<li>${gu_name} : ${gu_mise}</li>
`
을 수정해주면 됩니다.
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>`
위와 같은 코드로
미세먼지 농도가 40 이상으면 class="bad"로
CSS를 적용시켜주고,
아닌 경우 class="bad"를 붙이지 않아
CSS을 적용시키지 않습니다.
CSS내용으로는
<style></style>안에
<style type="text/css">
.bad
{
color: red;
}
</style>
으로 색깔이 빨간색이 되게 만들어주었습니다.
위에서 배운 내용들을 앨범 Web에 적용시켜보면
앨범 Web에 적용
그 전에 기존 앨범 HTML 부분
<script type = "module>
~~~
</script>
안에
$(document).read(function()
{
})
을 추가시켜준다.
$(document)를 사용하는 이유로는
JavaScript에서 DOM(Document Object Model)
이 준비가 됐을 때 특정 작업을 수행하거나,
문서 전체에서 발생하는 이벤트를 감지하기 위해서 입니다.
(
버튼을 누르거나 하지 않고, 웹 페이지가 생성 될 때
OpenAPI를 가져와 적용시켜주기 위해서
)
이제 OpenAPI 정보를 가져오기 위해
fetch(url).then(res=> res.json()).then(data =>
{
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
console.log(mise);
})
을 가져온다.(안 보고 적어서 기쁨)
이제 바꿔줄 HTML 태그를 찾아와야 하는데
우리가 바꿔야 할 부분은
"현재 서울의 미세먼지 : 나쁨"에서
"나쁨" 이 부분만 이다.
이때 사용하는 HTML 태그가 존재하는데
태그이다.
(
span 태그는 문자열에서
해당 묶고자 하는 부분에만
적용시키고 싶을 때 사용한다.
)
span 태그에 id = "mise-msg"로 주고
fetch(url).then(res=> res.json()).then(data =>
{
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
$('#mise-msg').text(mise);
})
위와 같이
$('#mise-msg').text(mise)를
넣어주면 됐다.
그 결과,
위와 같이 현재 미세먼지 상태가 나타났다.