poke api에서 데이터를 받아 나만의 포켓몬 도감을 만들어보다. 나만의 포켓몬 도감
Front-End
새로고침을 하지 않아도 데이터가 로드되는 비동기 통신을 배우다. 데이터 요청 동시에 여러가지 작업을 진행할 수 있고, 새로고침을 하지 않아도 웹 페이지 일부분에서 새로운 데이터가 로드 되는 비동기식 통신을 배우다. 비동기식 통신을 위한 제이쿼리 함수는 $.ajax( ) 이다. 이 함수를 실행시키기 위해서는 객체 key값으로 url, success가 필요하다. url의 value에는 오픈 api 링크 주소를 넣고 success에는 요청이 정상적으로 성공되면 실행될 로직을 적으면 된다. 나는 버튼을 클릭하면 2023-06-21 기준으로 일일 영화 순위를 표(table)로 만들어주는 로직을 작성했다.
요소를 동적이게 움직이다. click div요소를 click버튼을 클릭하면 모양을 변화시키는 코드를 짜려고한다. div로 정사각형을 만들어준다. 버튼 태그에 클릭 이벤트(.on)를 걸어주고 클릭하면 div의 너비와 높이를 변화 시킬 것이다. 변화시킬 때 사용하는 건 animate다. animate({객체}, ~동안)
jQuery로 HTML요소를 추가, 삭제하다. 부모요소 내부 앞쪽에 추가 부모요소 내부 뒤쪽에 추가 부모요소 외부 앞쪽에 추가 부모요소 외부 뒤쪽에 추가 img태그 삭제 한 요소를 비워주기 부모요소에 접근하기 1. prepend (해당 요소 내부 앞쪽) $("#btn1").on("click", () => { console.log("ck") // 1. prepend : 해당요소 앞쪽에 요소를 추가하는 방법 // 범위 : 요소 내부 $("div").prepend("") }) $("기준이 되는 선택자").prepend("넣을 요소") div 내부 안에 있는 노윤서 사진 앞에 농담곰을 넣을 거니까 div를 기준으로 prepend 2. append (해당 요소 내부 뒷쪽) $("#btn2").on("click",..
선택자로 요소를 가져올 때, 태그의 속성으로 더 자세하게 가져오는 방법을 배우다. 딸기 망고 파인애플 선택한 과일 : 코드 설명 $("선택자[타입='타입값']")으로 타입을 가진 요소를 타입값으로 정확하게 가져올 수 있다. 버튼에 클릭 이벤트를 걸어준다. 클릭했을 때 사용자가 입력한 값을 p태그에 넣어줄 것이다. 입력한 값을 출력하려면 js에선. value를 썼지만 여기선 비슷하게 val( )을 사용해 준다. jQuery에서 변수를 선언할 때 변수 이름 앞에$를 넣어서 자바스크립트 변수와 헷갈리지 않게 해 주면 좋다. result 아이디를 가진 태그에 텍스트로 유저 입력값을 넣어준다. $("#result").text($userInput) 선택한 과일: 의 옆에 선택한 텍스트의 요소의 value 값을 넣어..
요소의 클래스를 추가하거나 제거하다. 클릭 이전으로 되돌리기 클래스 선택자로 CSS 스타일을 만들어 놓고 jQuery로 원하는 요소에 클래스를 CSS의 클래스 선택자로 쓴 클래스를 추가할 것이다. .addClass("클래스이름")로 클래스를 추가해준다. 제거하는 방법은 removeClass("클래스이름")이다. 쉽고만
하얀 클릭 글자가 있는 빨간 정사각형을 클릭했을 때 검정색 정사각형이 나오게 만들어보다. 클릭 메소드 체인 방식으로 스타일을 적용했다. jQuery는 함수를 이어서 적용할 수 있기 때문에 스타일을 다 적용하고 on으로 클릭 이벤트를 걸어주었다. 클릭했을 때 바뀔 스타일을 함수 안에 넣었다.
jQuery(제이쿼리)를 배우다. jQuery 라이브러리 다루기! jQuery 라이브러리 다루기! jQuery 라이브러리 다루기! jQuery 라이브러리 다루기! 날씨가 구려서 코딩할 맛이 안나는 걸..? 클릭 jQuery를 사용하기 전에 script 태그의 src 속성에 jQuery 폴더위치 or URL 주소를 기입해야 한다. 그 밑에 새로운 script 태그를 열어 그 안에서 jQuery를 사용해야 한다. jQuery와 자바스크립트는 함께 엮어서 사용할 수 없다. 예를들어 jQuery문법으로 가져온 요소에 자바스크립트의 innerText를 할 수 없다는 소리다. 자바스크립트에서 DOM문법으로 가져오던 요소들을 jQuery에서는 $("선택자")로 가져올 수 있다. innerText -> .text("텍..
