2주차 개발일지 (웹개발)

2-1 오늘 배울것 jQuery, Ajax

 

 👉 HTML 파일을 받았다는 가정하에, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 숙지한다.

jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보기

 

2-2 Javascript 복습

 

 '포스팅 박스 열기' 박스를 한번 클릭했을 때는 '홀수입니다!', 두번 클릭했을 때는 '짝수입니다!' 입력시키기

아래 함수를 사용하여 클릭 횟수에 따라 홀짝 알럿을 생성한 모습

<script>
    let count = 1;			→ let count 함수는 function 함수 바깥에 위치시켜서 클릭 횟수 축적시키기, hey를 부르기 전부터 count는 1인 상태
     function hey() {			→ 이 변수를 함수 안에서 선언하면 그 함수가 끝나면서 자동으로 사라지기 때문에 let count 함수를 위로 빼놓기
       if (count % 2 == 0){		→ count를 2로 나눴을 때 0이 아닐 경우에는 '짝수'
           alert('짝수입니다!')
       } else{				→ 그렇지 않은 경우는 '홀수'
           alert('홀수입니다!')
       }
       count += 1;
    }
</script>

 

짝/홀수 판단하는 방법

let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0입니다.
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1입니다.

 

* 이 외에 버튼의 색깔을 바꾸고 싶다거나 div 박스를 하나 감추고 싶은 경우 Javascript로는 어려운 감이 있는데 이것들을 쉽게 해줄 수 있게 해주는 프로그램은 jQuery

 

 

 

2-3 jQuery 시작하기

 

 -jQuery란?

 HTML의 요소들을 조작하는 편리한 자바스크립트를 미리 작성해 놓은 코드로, 특별한 거 없이 간편하게 사용할 수 있게 남이 짜놓은게 특징이다.

 

👉 Javascript로도 모든 기능(ex) 버튼 글씨 바꾸기 등)을 구현할 수는 있지만 코드가 복잡 할 뿐만 아니라 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하기 시작

jQuery와 Javascript - 코드 비교해보기

👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이기 때문에 쓰기 전에 "임포트"를 꼭 해야만 한다.

 

Javascript로 길고 복잡하게 써야 하는 것을 jQuery로 보다 직관적으로 쓸 수 있다.

document.getElementById("element").style.display = "none";

↓

$('#element').hide();

 

 

2-4 jQuery 다뤄보기

 

  jQuery 사용 전 '임포트'를 해서 미리 작성된 Javascript 코드를 가져온다.

👉 jQuery CDN 부분을 참고해서 임포트하기: (링크)

jQuery Get Started

w3schools

 

1 jQuery Get Started > Google CDN 태그 복사

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

2 head 태그 안 title 밑에 Google CDN을 임포트 해주기

이미 임포트가 되어 있는 부트스트랩 시작 템플릿으로 시작하지 않은 경우에는 이런식으로 따로 임포트 작업이 필요함

 

3 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();

👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.

ex) 특정 인풋박스의 값을 → 가져와줘! ex) 특정 div를 → 안보이게 해줘!

css에서 선택자로 class를 썼던 것처럼  jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.

 

2-5 jQuery 적용하기(나 홀로 메모장)