1. 학습내용
✔Javascript 복습하기
<script> let count = 1; function hey() { if (count % 2 == 0) { alert('짝수입니다!') } else { alert('홀수입니다!') } count += 1; ('+=' - count + 1) } </script>코드를 입력하세요변수를 함수안에서 넣으면 완전히 사라지지만, 변수를 함수바깥에서 해야 성립이 됨.
let count = 1이 function hey() 위에 위치함.
✔ JQuery 는 미리 작성된(남이 짜둔) Javascript의 코드! 그렇기 때문에 쓰기 전에 '임포트'를 해야 한다!!!
즉, JQuery는 Javascript에서 '임포트'한 코드에서만 작동됨.
*부트스트랩과 비슷한 맥락.
Javascript - document.getElementById("element").style.display = "none";
Jquery - $('#element').hide();
✔자주쓰는 JQuery 다뤄보기
구글 CDN 가져오기 https://www.w3schools.com/jquery/jquery_get_started.asp
1. input 박스 값을 가져와보기
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp" placeholder="">크롬개발자도구콘솔창에서 id값이 article-url지칭해서,
$('#article-url').val(); 이라고 친다.
-
div 보이기 / 숨기기
$('#post-box').hide(); / $('#post-box').show(); -
css 값 가져와보기 (display 속성 값 가져와보기)
$('#post-box').hide(); $('#post-box').css('display');
4. 태그 내 텍스트 입력하기
> ```
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>id값을 입력한다.
$('#btn-posting-box').text('포스팅 박스 닫기'); $('#btn-posting-box').text('포스팅 박스 열기');
- 태그 내 html 입력하기 ✅문자열html에서
(백팁)을 쓴다
<div class="card-columns" id="cards-box">id값을 입력한다.
-[버튼 넣어보기]
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html); -몇 번 누르면 나타남.[카드 넣어보기]
let temp_html = <div class="card">
<img class="card-img-top"
src="data:image/jpeg;base64,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"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-text"> 여기에 기사제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>즉,
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;2.마지막 단계
$('#cards-box').append(temp_html); -몇 번 누르면 나타남.✔Jquery 적용하기
<script>
function openclose() {
let status = $(`#post-box`).css(`display`);
if (status == 'block') {
$(`#post-box`).hide();
$(`#btn-posting-box`).text('포스팅박스 열기');
} else {
$(`#post-box`).show();
$(`#btn-posting-box`).text('포스팅박스 닫기');
}
}
</script>
콘솔창에서 현재상태를 알아본다. $(`#post-box`).css(`display`) -'block'
let status = $(`#post-box`).css(`display`);
console.log(status); -콘솔창에서 'block'이라고 뜨는지 확인
if (status == 'block') {
$(`#post-box`).hide();
} else {
$(`#post-box`).show();
} 이라고 만든다음에 hide와 show를 바꿔저도 상관없음.
id값이 btn-posting-box이기 때문에
$(`#btn-posting-box`).text('포스팅박스 열기');
$(`#btn-posting-box`).text('포스팅박스 닫기'); 추가함.✔Jquery 연습하기 (퀴즈)
1. 빈칸 체크 함수 만들기
function q1() { let txt = $('#input-q1').val(); if (txt =='') { alert('입력하세요!') } else { alert(txt) }
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
} function q1() {
let txt = $('#input-q1').val();
console.log(txt)
입력값과 콘솔창에서 나타내는 값이 잘 나오는지 확인.
마지막으로 완성한 뒤에도 입력값과 얼럿창 잘 나오는지 확인.
2. 이메일 판별 함수 만들기
> ```
function q2() {
let txt = $('#input-q2').val();
console.log(txt.includes('@'))
if (txt.includes('@')) {
let domain = txt.split(`@`)[1].split(`.`)[0]
alert(domain)
} else {
alert('이메일이 아닙니다')
}
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!) - > javascript 문자열 포함 체크 라고 구글링 즉,txt.includes('@') 라고 입력할 것.
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!) -> ✅먼저, 콘솔창에서 이메일추출연습해서 값을 가져오기 let domain = txt.split(`@`)[1].split(`.`)[0] 라고 입력할 것.
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}✅ 콘솔창에서 미리 만들기
let txt= 'sparta@naver.com'
undefined
let txt= sparta@naver.com
undefined
txt.split(@)
(2) ["sparta", "naver.com"]
txt.split(@)[1]
"naver.com"
txt.split(@)[1].split(.)
(2) ["naver", "com"]
txt.split(@)[1].split(.)[0]
"naver"
-
HTML 붙이기 연습
function q3() { let txt = $('#input-q3').val(); let temp_html =`<li>${txt}</li>`$('#names-q3').append(temp_html)
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고! // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = <li>임꺽정</li> -> `<li>${txt}</li>`) 요렇게! console.log(temp_html)넣은 후 콘솔창 확인! // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!) }
4. HTML 지우기 연습
> ```
function q3_remove() {
$('#names-q3').empty()
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}✔ Ajax 이해하기 전
서버-클라이언트 사이의 창구 즉, API라고 칭함.
서버가 클라이언트에게 내려주는 포맷을 JSON이라고 함.
클라이언트가 서버에게 요청할 때 'GET' / 'POST'가 존재함.
https://movie.naver.com/movie/bi/mi/basic.naver?code=161967&name=sparta
-서버주소: https://movie.naver.com
-은행창구이름: movie/bi/mi/basic.naver
-가지고 가는 데이터값: code=161967
-전달할 데이터가 있다(창구외에 오류지만, 상관없는 데이터일뿐): name=sparta
✔ Ajax는 Jquery를 '임포트'한 페이지에서만 작동됨.
[코드해설]
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})[실전예시]
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function(response){
console.log(response[`RealtimeCityAir`][`row`][0])
}
})2. 학습소감
Javascript와 JQuery 1주차에서 배웠던 것부터 JQuery적용까지 한번 더 복습하니 쭈욱 이해가 된다.
다음시간에는 Ajax API ㄱㄱ~
ps.이 개발블로그에 코드입력이용하기가 힘들다ㅠㅠ
신입개발자가 되기 위한 노력 프로젝트