Ex09의 실습, 지도의 좌표를 사용하여 지도에 마커를 찍고 광주의 관광지를 추천하다. 광주 관광지 가져오기 오늘의 관광지 추천 친절한 카카오의 지도에 마커찍기 설명을 보며 따라하면 된다. https://apis.map.kakao.com/web/sample/
jQuery
카카오에서 제공하는 api로 카카오 지도를 만들어보다. 카카오 디벨로퍼 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오디벨로퍼 로그인 후 내 애플리케이션을 만들고 앱키를 가져와서 친절한 카카오의 설명을 보고 따라하면된다.
poke api에서 데이터를 받아 나만의 포켓몬 도감을 만들어보다. 나만의 포켓몬 도감
새로고침을 하지 않아도 데이터가 로드되는 비동기 통신을 배우다. 데이터 요청 동시에 여러가지 작업을 진행할 수 있고, 새로고침을 하지 않아도 웹 페이지 일부분에서 새로운 데이터가 로드 되는 비동기식 통신을 배우다. 비동기식 통신을 위한 제이쿼리 함수는 $.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("클래스이름")이다. 쉽고만
