JQuery: Bootstrap과 비슷하게 남들이 만든 라이브러리
fetch: 인터넷을 통해 데이터를 요청하고 가져오는 과정
<div class="mypostingbox" id="postingbox">
id로 mypostingbox를 직접 지정해준다음
<script>
function openclose(){
$('#postingbox').toggle(); /* toggle() = 껐다켰다 하는거*/
}
</script>
$(''# id이름') 으로 접근할수 있다
↓
toggle함수 작동시 display: none으로 변경된다
let image = $('#image').val();
id 이름이 'image' 인 곳에 접근을해서 그 값을 image라는 변수에다 집어넣는다
alert()함수로 확인
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜 </small>
</div>
</div>
</div>
부트스트랩에서 가져왔던 카드 한개의 코드를 복사하여
let temp_html=`
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜 </small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
temp_html 이라는 변수를 선언하여 카드 코드를 저장하고 append함수로 추가하는 코드
위의 코드는 단순히 똑같은 카드를 추가하는 코드이기때문에 사용자가 넣은값에 따라 내용이 달라지는 코드를 작성해야함
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-body-secondary">${date} </small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
${변수이름} 을 활용하여 사용자가 입력한 image,title,content,date값을 사용할수 있게 된다
${변수이름}을 활용한 결과
let star = $('#star').val();
console.log(star);
<select class="form-select" id="star">
<option selected>별점상태</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
위의 코드는 id가 star인 value값들이 1,2,3,4,5로 되어있기때문에 ★표시를 표기하고싶다면
<select class="form-select" id="star">
<option selected>별점상태</option>
<option value="⭐">⭐</option>
<option value="⭐⭐">⭐⭐</option>
<option value="⭐⭐⭐">⭐⭐⭐</option>
<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>
간단하게 value값에 ★를 넣는것으로 해결할수 있다
결과
-----------------------------------------------------------------------------------------------------------------------------------------------------------------fetch 연습
fetch를 사용하는 이유? : JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이면서 코드가 간결하고 가독성이 좋기 때문에 복잡함을 크게 줄일 수 있다
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script>
function hey() {
fetch(url).then(res => res.json()).then(data => {
});
})
}
</script>
</head>
<body>
<button onclick="hey()">fetch 연습!</button>
</body>
</html>
기본적으로 현재 hey함수 안에 있는 fetch함수를 이용한다
function hey() {
fetch(url).then(res => res.json()).then(data => {
let rows=data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name= a['MSRSTE_NM'];
let gu_mise= a['IDEX_NM'];
console.log(gu_name,gu_mise);
});
})
forEach() 반복문 함수를 이용해 원하는 데이터의 형태를 볼수있다
콘솔창에서 확인
<script>
function q1() {
$('#names-q1').empty();
fetch(url).then(res => res.json()).then(data => {
let rows=data['RealtimeCityAir']['row'];
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>
미세먼지가 40보다 큰 경우에 color를 빨간색으로 변경하는 코드를 if else 조건문으로 작성
결과
$(document).ready(function () {
함수이름();
})
페이지가 로드되면 자동으로 실행되는 함수 - 이를 활용해 버튼클릭 등으로 값을 변경해주는것이 아닌 페이지가 로드되면 자동으로 값이 변경되도록 설계가 가능하다
<span></span>: p태그 안에의 문자들을 묶을때 사용
<p>현재 서울날씨: <span id="msg">좋음</span></p>
$('#msg').text(mise); /*msg아이디의 문자에 접근을 해서 텍스트 내용을 mise라는 변수로 바꿈 */