(2주차 목표)
javascript를 통해 홈페이지의 움직임을 더해주기
1. 함수 복습 : 홀/짝 판별 onclick 함수 만들기
function hey(){
count+=1
if (count%2==0){
alert('짝수입니다!')
}
else {
alert('홀수입니다!')
}
}
// 그리고 원하는 button 요소에를 넣어준다2. jQuery?
HTML 요소들을 편하게 조작할 수 있게
javascript를 누가 미리 짜둔 것이다 = '라이브러리'라고도 불림
부트스트랩과 유사한 개념으로, javascript로 길고 복잡하게 써야하는 것을
(미리 써둔) jQuery로 보다 직관적으로 쓸 수 있다.
// 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이기 때문에
쓰기 전에 꼭 "임포트"를 해야 한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
** 비교 예시 **
(javascript)
document.getElementByID("element").style.display = "none"
(jQuery - 직관적)
$('#element').hide();3. jQuery 다뤄보기
** 기본적인 jQuery **
css의 class=""와 마찬가지로 값을 가져오려면 값의 대상을 지칭할 수 있어야 하는데,
jQuery에서는 이를 id=""로 지칭.
1) input 박스의 값을 가져와보기
$('#url').val('입력을 하고 싶다')
// #url : id="url"에다가
// $ : jQuery를 적용하고 싶은데
// val() : value를 적용하고 싶어.
// 이때, ()안에 값이 없으면 이미 입력된 값을 가져오고, 값이 있으면 입력을 하는 것.
2) div 보이기/숨기기
숨이고 싶은 div(강의에서는 class="mypost"라고 묶어둔 박스)에
<div class="mypost" id="post-box"> 로 id 지칭.
$('#post-box').hide()
$('#post-box').show()
3) 태그 내 html 입력하기
let temp_html = `<button>나는 버튼이다</button>`
// 이때, ``은 따옴표가 아닌 backtick 이며
``안에 들어있는 것은 html이 아닌 문자열로 저장해둔 형태이다
$('#cards-box').append(temp_html)
// 위에서 저장한 문자열을 jQuery를 사용해 html로 바꿔서 적용해준다
// 이를 이용해 backtick 안에 원하는 html을 저장해 사용
4. jQuery + javascript 조합 연습하기
기본적으로 원하는 곳에 id 값을 지칭하고 함수를 만들어 적용한다
1) 빈칸 체크 함수 만들기
function q1() {
let txt = $('#input-q1').val()
if (txt == ''){
alert('입력하세요!')
}
else {
alert(txt)
}
2) 이메일 판별 함수 만들기
function q2() {
let txt = $('#input-q2').val()
if (txt.includes('@') == true){
alert(txt.split('@')[1].split('.')[0])
}
else {
alert('이메일이 아닙니다.')
}
3) html 붙이기/지우기 연습
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
function q3_remove() {
$('#names-q3').empty()
5. 서버-클라이언트 통신 이해하기
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐, 기업 고객이냐에 따라 가져와야 하는 것과 처리해주는 것이 다른 것처럼,
클라이언트가 요청할 때에도, "타입"이 존재.
** 2가지 타입 **
GET = 통상적으로, 데이터 조회(read)를 요청할 때
(예시) 영화 목록 조회
POST = 통상적으로, 데이터 생성(create), 변경(update), 삭제(delete) 요청할 때
(예시) 회원가입, 회원탈퇴, 비밀번호 수정
우리는 사실 GET의 천재다.
(GET 예시 1) http://movie.naver.com/movie/bi/m/basic.naver/code=161967#
/movie/bi/m/basic.naver : 라는 창구에
code=161967 : 을 들고 갔다
// 코드 번호를 달리 들고 가면 다른 것을 줌
(GET 예시 2) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
/search? : 라는 창구에
q=아이폰 : 을 들고 갔다
&sourceid=chrome, &ie=UTF-8 : 추가적으로 가져갔다
6. Ajax
브라우저에서 enter를 치는 것과 마찬가지로,
javascript에서 서버를 요청하는 방법
1) Ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
2) 먼저, 미세먼지 openAPI를 이용해 console에 찍는 연습
$.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']
console.log(gu_name,gu_mise)
}
}
})
// 이런 형태의 openAPI 에서 정보를 가져와서
// 이렇게 console에 찍어주기
3) 미세먼지 openAPI를 이용해 업데이트 버튼을 누를 때마다 업데이트되어 새로 찍히게 하기
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 = ``
if (gu_mise > 120) {
temp_html = <li class="bad">${gu_name} : ${gu_mise}</li>
} else {
temp_html = <li>${gu_name} : ${gu_mise}</li>
}
$('#names-q1').append(temp_html)
}
}
})
}
// 여기서 강조점을 주고 싶다면, <style> 안에
.bad{
color : red;
}
넣고 class="bad"사용해 꾸며줄 수 있다.7. Ajax 연습하기
1) 서울시 따릉이 openAPI(소감)
이번 주는 사실 openAPI가 연결이 안될 때가 많아 코드를 구현하는데 어려움이 있었다.
내용 자체는 어렵지 않지만 헷갈렸던 것은,
1. response[][]로 붙이는 것
2. ${}와 $('#')
(궁금한 점)
1. openAPI 사이트가 연결이 안될때가 있는데 왜일까?
2. 맞는 코드를 짜서 다시 크롬으로 열때도 가끔 안된다,, 왜일까???
옍