푸들푸들

[스파르타코딩클럽 웹개발 기초] 3주차-1 / jQuery 본문

스파르타코딩클럽/웹개발 기초

[스파르타코딩클럽 웹개발 기초] 3주차-1 / jQuery

COCO_develop 2024. 4. 16. 17:56

Fetch

인테넷을 통해 데이터를 요청하고 받아오는 과정

 

<jQuery 복습>

추억앨범 - jQuery 적용

저번에 만든 추억앨범 페이지

 

(1) '추억 저장하기' 버튼을 누르면 posting box 없어지게 하기

script src~~(복붙)로 jQuery 실행
toggle : 껐다 켰다 하기
onclick
'추억 저장하기' 버튼을 누르면 posting box가 없어짐

 

(2) posting box에 입력한 데이터를 바탕으로 카드 생성하기

div postingbox에 id 이름 바꾸기
각각을 입력한 대로 나오도록 연결

*.val() : jQuery 매서드 중 하나, 선택한 요소의 값을 가져옴

'기록하기' 버튼에 onclick

 

temp_html에 카드 추가 코드 넣고 append
내용을 입력한 대로 카드가 생성됨 (이미지 주소는 코드스니펫)

 

스파르타플릭 - jQuery 적용

(1) '영화 기록하기' 버튼을 누르면 posting box 없어지게 하기

function → toggle
'영화 기록하기' 버튼에 onclick
postingbox에 id 값 주기
원래 페이지
'영화 기록하기' 버튼을 누른 후 postingbox가 사라짐

 

(2) posting box에 입력한 데이터를 바탕으로 카드 생성하기

id 이름 바꾸기
각각 연결하기
'기록하기' 버튼에 onclick
temp_html에 카드 추가 코드 복사한 후 append

결과

posting box에 입력(이미지 주소는 코드스니펫)
입력한 대로 카드가 추가됨

 

 

 

 


스파르타코딩클럽

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

3주차 3-1 ~ 3-5