Javascript, JQuery, Ajax를 배웠다.
Javascript는 1주차의 심화과정 정도.
예시를 통해서 이해한 것을 기록해보자.
<script>
let count = 0 //count라는 애를 0라고 하자
function hey(){
count =+ 1 //count는 0부터 1씩 커진다
if(count % 2 == 0){ //count를 2로 나눴을 때 0이면
alert('짝수임');//'짝수임'이라고 창띄워
} else{ //아님
alert('홀수임');//'홀수임'이라고 창띄워
}
}
</script>
<body>
<button onclick="hey()">영화 기록하기❤️</button>
//onclick="hey()"가 앞에 함수와 연결해주는 것임
</body>
JQuery란? 미리 짜둔 Javascript를 쉽게 쓰게 해주는 것.
(그런데 유튜브에서 어떤 개발자 분은 최근 현업에서 JQuery를 사용하지 않기에 배우지 않아도 된다고 하였다)
let ~~~ = `` -> 선언해주는 느낌, 백틱(`)을 써야함.
$('#id를 넣는 곳').val()-> 이게 기본 시작 명령어 같은 것 인듯. val 대신에 다른 명령어를 써줄 수 있음.
* 기본 예시 (크롬 콘솔창에 쳤다)
$('#url').val() // id가 url인 것의 밸류값을 콘솔창에 보여준다.
$('#url').val('입력을 하고싶다') // 입력을 하고싶다 라고 url 칸에 써짐
$('#post-box').hide() // id가 post-box인 것을 가리기
$('#post-box').show() // id가 post-box인 것을 보여주기
* 예시('나는 버튼이다' 라는 버튼 생성하기)
let temp_html = `<button>나는 버튼이다</button>` // 나는 버튼이다 라는 버튼을 만들어주기 위해서 이름? 지정해준다.
$('#cards-box').append(temp_html) // JQuery를 이용해서 temp_html을 html화 해주는 코드
* 예시(카드박스를 추가하기)
let temp_html = `<div class="col">
<div class="card">
<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 class="mycomment"> 여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>` //카드박스의 내용들 복붙한 것. 앞 뒤로는 뱁틱을 써야함.
$('#cards-box').append(temp_html)
JQuery와 세트이고, 서버에서 api를 불러와서 웹에 적용하게 해준다.
* api란? 은행 창구처럼 컴퓨터나 프로그램 사이에 필요한 정보들을 전달하면서 연결해주는 것.... 같다
코드 설명
$.ajax({//ajax 시작할 때 쓰는 코드
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair", //요청할 url을 넣는 곳
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 -> 이것은 안바뀌는 것 같다.
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
-
문제 : 서울시의 미세먼지 값을 띄우고, 값이 50이상일 경우, 글씨를 빨간 색으로 변경해야함.
-
문제해결 순서
1) 미세먼지 데이터가 어디에 있는지 찾기 : 주어진 url에 접속하여 확인한다. 현 문제에서는 RealtimeCityAir > row에 미세먼지 데이터가 있음.
let mise_list = response["RealtimeCityAir"]["row"]로 꺼냄2) 반복문으로 00구 데이터를 출력해보기 : row의 값을 mise_list에 담았기 때문에 이것을 포함해서 반복문 이용해야함.
for(let i = 0; i<mise_list.length; i++) {
let mise = mise_list[i]; // mise를 mise_list로 지정3) 00구 데이터에서 구 이름, 미세먼지 수치 골라서 출력하기 : 각 데이터의 키값을 확인한 후 밸류 출력
let gu_name =mise["MSRSTE_NM"]// gu_name을 mise 데이터 안의 "MSRSTE_NM"로 지정
let gu_mise =mise["IDEX_MVL"]// gu_mise를 mise 데이터 안의 "IDEX_MVL"로 지정4) 일단 업데이트 버튼을 누르면 출력되게 해보자.
let temp_html =<li>${gu_name} : ${gu_mise}</li>// temp_html을 지정해줌. 이때는 꼭 뱁틱을 써야한다.
$('#names-q1').append(temp_html)//#names-q1은 아마도 업데이트랑 연결되는 쪽의 것인듯? 그리고 append는 temp_html을 보여지게 하고 싶다는 뜻임 이걸 써야 보여지게 됨5) 이 다음에 미세먼지 값이 50이상인 곳은 붉은 글씨 처리를 하고 싶다. -> if문 쓰고+class 나눠주면 되지요.
style에 .bad 만들고 color : red;
let temp_html = 뱁틱 2개(벨로그에 익숙하지 않아서 못치는데, temp_html이 클래스가 나눠져서 공란으로 두는 것)
if (gu_mise > 50) { // 만약에 미세먼지 값이 50이 넘으면
temp_html =<li class="bad">${gu_name} : ${gu_mise}</li>//temp_html를 빨간색으로 쓴다.
} else { //아니면
temp_html =<li>${gu_name} : ${gu_mise}</li>// 기본색으로 쓴다.
}
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</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;
}
.bad {
color: red;
}
</style>
<script>
function q1() {
$('#names-q1').empty() // 데이터 쌓이지 않고 업데이트 누르면 사라지게 하기 위한 코드
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function(response){
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = ``//temp_html은 아래 것들임
if (gu_mise > 50) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html) // #names-q1누르면 temp_html보여주겠어.
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</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>처음 들었을 때는 무슨 말인지 전혀 이해가 안됐는데, 두 번째 들으니까 조금은 알 것 같고,
WIL쓰면서 코드를 뜯어가면서 보니까 조금 더 알 것 같다.
물론 난 숙제도 답지 보면서 하고... 아직 혼자서 코드를 치기에는 무리가 있지만,
내가 친 코드가 반응하는 모습이 신기하고 흥미롭다.
다음주차에는 드디어 파이썬. 크롤링이 많이 궁금했었는데, 크롤링을 배운다니 좀 기대된다.