전체 글(223)
-
[ JavaScript ] kakaomap API를 사용 및 응용해보기
환경: Visual Studio Code kako MAP API : https://apis.map.kakao.com/ - appkey의 value에 각자의 key 값을 삽입해야한다. [ 1. 카카오가 기본 제공하는 지도 ] [ 2. 여러 개의 지도를 원하는 위치로 표시 ] + 내 스타일로 코드 수정(필요한 코드만 따오기) (+) each() 메소드를 사용하여 반복 생성되도록 함. (+) 여기서의 this는 현재 선택된 컨테이너이다. (지도 영역) (+) 위도와 경도를 추출하여 이 위치 정보를 지도 생성 옵션에 삽입 해준 후, 지도를 생성해준다. (+) body 태그에 위와 같이 div 태그를 여러개 설정하면 됨. └ data-lat="위도" data-lng="경도" (+) 클래스 명을 map으로 주어 적..
2024.06.17 -
[ HTML ] 라디오 버튼 기본 이해
라디오 버튼은, 같은 이름의 라디오 버튼들 중에서 하나만 선택할 수 있다. 체크박스와는 다르기 때문에, 상황에 맞게 적절히 배치하면 좋다. 둘 중 하나만 선택할 수 있는 라디오 버튼 예시이다. 일반회원 관리자 (+) name="type" : 같은 이름을 주어 같은 라디오버튼임을 명시. (+) checked 속성을 사용하여, 처음 페이지에 접속할 때 체크 표시가 되어있는 상태로 보여준다. 개인 공부 기록용입니다:)
2024.06.16 -
[ JavaScript ] 이벤트: onBlur, onChange, onClick, onFocus, onSelect, onSubmt
[ 자바스크립트 기본 이벤트 ] 함수 설명 onBlur() 입력태그 (select, text, textarea)가 실행된 후, 사용자가 다른 곳으로 이동할 때 이벤트 발생 onChange() 사용자가 입력태그(select, text, textarea)의 텍스트를 변경하면 이 이벤트 발생 onClick() 사용자가 객체를 클릭할 때 이벤트 발생 onFocus() HTML 양식에서 입력태그(select, text, textarea)가 선택되면 이벤트 발생 onSelect() textarea 또는 text 상자의 일부 text가 선택될 때 이벤트 발생 onSubmit() HTML 양식의 제출 버튼을 클릭하여 양식 데이터를 웹 서버에 제출할 때 이벤트 발생 onReset() 사용자가 초기화 버튼을 누를 때 이벤..
2024.06.15 -
[ JS ] 이미지 슬라이더 라이브러리 적용하기
환경 : Visual Studio Code Swiperjs : https://swiperjs.com/ [ 1. 기본 슬라이드 ] 기본 슬라이드 [ 2. 자동 슬라이드 ] 자동 슬라이드 [ 3. 전환 효과 설정 ] 전환 효과 설정 [ 4. 여러 슬라이더를 스크립트 코드 한 개로 적용 ] $(".swiper").each(function(){ //this == 현재 회차의 .swiper 영역 var swiper = new Swiper(this, options); }); (+) options 객체에 3번의 코드를 담기 (+) each() 메소드를 사용하여 반복 (+) this를 options 객체에 넣어주면 됨~! [ 4에 대한 전체 코드 ] 이미지 슬라이더(Swiper JS) 기본 슬라이드 개인 공부 기록용입..
2024.06.13 -
[ JS ] 날짜 라이브러리 적용하기
환경 : Visual Studio Code Lightpick : https://wakirin.github.io/Lightpick/ 현재 서비스 지원이 안되는 듯 하다... 실행 결과 [ 주요 코드 ] $(function(){ //기본 생성 코드 var picker1 = new Lightpick({ field: document.querySelector("[name=test1]"), }); //날짜 형식 다르게 var picker2 = new Lightpick({ // field : document.querySelector("[name=test2]") field : $("[name=test2]")[0], format: "YYYY-MM-DD", }); (+) picker1 : 기본적으로 지원하는 라이브러리 형..
2024.06.12 -
[ JS / Java ] 데이터베이스 자료를 가져와 차트로 보여주기
환경 : Visual Studio Code, Spring Tools Suite4 - Chart.js 사이트에서 가져온 코드 Chart.js : https://www.chartjs.org/docs/latest/ [ 차트 출력 코드 구현 해보기 ] [ 주요 코드 ] (+) 사용할 라이브러리 주소 삽입 const ctx = document.querySelector(".custom-chart"); //const ctx = $(".custom-chart");//jQuery (+) custom-chart 클래스를 선택하여 ctx 변수에 삽입 (+) const로 선언된 변수는 상수로 취급되어 값이 한 번 할당되면 변경할 수 없다 //new Chart(캔버스태그, 차트옵션객체); new Chart(ctx, { type..
2024.06.11