본문 바로가기
디지털 역량

#2 웹 개발일지

by NIMMIN 2022. 9. 21.

자바스크립트를 통해 홈페이지에 움직임을 더하기

  • 예를 들어 버튼의 색깔을 바꾸고 싶다면?
  • 예를 들어 div 박스를 하나 감추고 싶다면?

→ jQuery

 

1. jQuery 

- HTML의 요소들을 조작하는, 편리한 자바스크립트를 미리 작성해둔 것, jQuery는 자바스크립트보다 직관적이고 짧음

- jQuery를 사용하기 위해서는 남이 만들어 놓은 코드를 가져오는 것부터 시작해야 함

 

2. 자주 쓰는 jQuery

url에 있는 값을 가져오기 or 입력하기(우선 url을 지칭할 수 있어야 함, css는 class로 지칭, jQuery에서는 id로 지칭)

  • input 박스의 값을 가져오기 = .val
  • div 보이기/ 숨기기 = .show(), ,hide()
  • 태그 내 html 입력하기
  • 모두 지우기 = .empty

3. 서버-클라이언트 통신 이해하기

API는 은행 창구같은 것(같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것이 다름)

* GET 타입→ 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

더보기

https://movie.naver.com/movie/bi/mi/basic.naver?code=161967

movie.naver.com라는 컴퓨터에 /movie/bi/mi/basic.naver라는 창구에 code번호 161967을 들고 갔다

* POST 타입 → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

 

4. Ajax

  • 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
  • 로딩 후 호출하기
더보기

$(document).ready(function(){
alert('다 로딩됐다!')
});

 

'디지털 역량' 카테고리의 다른 글

#3 웹 개발일지  (0) 2022.09.26
#3 SQL 개발일지  (0) 2022.09.22
#2 SQL 개발일지  (0) 2022.09.20
#1 SQL 개발일지  (0) 2022.09.18
#1 웹 개발일지  (0) 2022.09.12