2021. 12. 30. 00:02ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
오늘 배울것
오늘은 HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 배워볼거예요.
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보겠습니다.
Javascript 복습
클릭수가 홀수이면 홀수입니다 짝수이면 짝수입니다를 경고해주는 함수를 만들어보자
<script>
function hey(){
let count = 1;
if (count % 2 == 0){
alert('짝수입니다')
} else {
alert('홀수입니다')
}
count += 1
}
</script>
// 클릭할때마다 count 선언부분에서 1로 초기화되기때문에 아무리 클릭해도 홀수입니다만 뜬다
<script>
let count = 1;
function hey(){
if (count % 2 == 0){
alert('짝수입니다')
} else {
alert('홀수입니다')
}
count += 1
}
</script>
// 함수 밖에다가 count를 선언해주면 정상적으로 클릭할때마다 홀수입니다 짝수입니다가 번갈아가면서 나온다클릭횟수를 세주는 함수
<script>
let count = 0;
function hey(){
count += 1
alert(count)
}
</script>
//여기서는 count 0부터 해줘야 첫클릭에 1이뜸
JQuery 시작하기
JQuery란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
JQuery 다뤄보기
부트스트랩 필수 템플릿에 이미 제이쿼리가 임포트 되어 있지만, 부트스트랩을 쓰지 않을 경우
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
위의 것으로 따로 임포트해줘야 한다
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
CSS에서는 class, jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.
- 자주쓰는 JQuery들 다뤄보기(절대 외울필요 없음)
1. input 박스의 값을 가져와보기
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();2. div 보이기 / 숨기기
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();3. css의 값 가져와보기
4. 태그 내 텍스트 입력하기
5. 태그 내 html 입력하기
'코딩공부 > 스파르타코딩클럽 - 웹개발종합반' 카테고리의 다른 글
| 웹개발종합반 2주차 - 서버-클라이언트 통신 이해하기 (0) | 2022.01.01 |
|---|---|
| 웹개발종합반 2주차 - JQuery 적용하기(나홀로메모장) / Quiz_JQuery 연습하기 (0) | 2021.12.31 |
| 웹개발종합반 1주차 - 숙제 : 원페이지 쇼핑몰 HTML + CSS 만들기 (0) | 2021.12.29 |
| 웹개발종합반 1주차 - Javascript 맛보기 / Javascript 기초 문법배우기(1) / Javascript 기초 문법배우기(2) / Javascript 연습하기 / 1주차 끝 & 숙제 설명 (0) | 2021.12.29 |
| 웹개발종합반 1주차 - 부트스트랩, 예쁜 CSS 모음집 / Bootstrap(부트스트랩)을 써보자! / Quiz_함께 만든 페이지를 발전시켜보세요! (0) | 2021.12.28 |