2주차 오늘 배울 것
- 오늘 배울 것 이야기 - 2주차: jQuery, Ajax
👉 오늘은 HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 배워볼거예요.
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고,
Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보겠습니다.
Javascript 복습
1) 자바스크립트 잠깐 복습 - 짝/홀수에 따라 다른 얼럿 띄우는 onclick 함수 함께 만들어 보기
-
짝수 번 눌렀을때는 짝짝짝, 홀수 번 눌렀을 때는 홀홀홀, 얼럿을 띄우는 버튼을 만들어 보자
-
짝/홀수 판단하는 방법
let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0입니다.
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1입니다.- 짝/홀수 onclick 함수(완성)
<script>
let count = 1;
function hey() {
if (count % 2 == 0) {
alert('짝짝짝👏');
} else {
alert('홀홀홀🎅');
}
count += 1;
}
</script>JQuery 시작하기
-
JQuery란?
-
html의 요소들을 조작하는 편리한 javascript를 미리 작성해둔 것. 라이브러리
--> javascript로도 모든 기능(예-버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고 2) 브라우저 간 호환성 문제도 고려해야하기때문에 JQuery라는 라이브러리가 등장하게 됨.
-
jquery와 javascript 코드 비교해보기
--> j쿼리는 자바스크립트와 다른 특별한 소프트웨어가 아니라 미리 작성된 자바스크립트 코드이다.
전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해두자! (그렇기 때문에 사용하기 전 "임포트"를 해야한다) -
자바스크립트로 길고 복잡하게 써야하는 것을
-
document.getElementById("element").style.display = "none";- j쿼리로 보다 직관적으로 쓸수 있다.
$('#element').hide();j쿼리 다뤄보기
-
j쿼리 사용하기
- 미리 작성된 자바스크립트 코드를 가져오는 것을 '임포트'라고 부른다.
- jQuery CDN
jQuery CDN 부분을 참고해서 임포트하기
- <헤드>와 </헤드> 사이에 아래를 넣으면 끝
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>- j쿼리를 사용하는 방법
👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class를 썼지요?
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.
백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!
-
자주쓰는 j쿼리 다뤄보기 (필요할때 구글링해서 사용하자)
- input박스의 값을 가져와보기
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();