환경 : Spring Tool Suite4 팝업을 활용하여 페이지 이동 여부를 제한해보자! [ 주요코드 ] (+) berforeunload 이벤트를 설정하여 사용! (on/off 메소드) [ 전체 코드 ] 페이지 이탈 방지 처리 게시글 작성 등 한 화면에서 오래 작업을 하는 경우 내용이 실수로 없어지는 것을 방지하기 위해서 페이지를 이탈하는 행위를 할 때 확인창을 출력하는 것을 의미 등록 그냥 링크 메시지 안 뜨는 링크 개인 공부 기록용입니다:)

환경: 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으로 주어 적..

라디오 버튼은, 같은 이름의 라디오 버튼들 중에서 하나만 선택할 수 있다. 체크박스와는 다르기 때문에, 상황에 맞게 적절히 배치하면 좋다. 둘 중 하나만 선택할 수 있는 라디오 버튼 예시이다. 일반회원 관리자 (+) name="type" : 같은 이름을 주어 같은 라디오버튼임을 명시. (+) checked 속성을 사용하여, 처음 페이지에 접속할 때 체크 표시가 되어있는 상태로 보여준다. 개인 공부 기록용입니다:)

[ 자바스크립트 기본 이벤트 ] 함수 설명 onBlur() 입력태그 (select, text, textarea)가 실행된 후, 사용자가 다른 곳으로 이동할 때 이벤트 발생 onChange() 사용자가 입력태그(select, text, textarea)의 텍스트를 변경하면 이 이벤트 발생 onClick() 사용자가 객체를 클릭할 때 이벤트 발생 onFocus() HTML 양식에서 입력태그(select, text, textarea)가 선택되면 이벤트 발생 onSelect() textarea 또는 text 상자의 일부 text가 선택될 때 이벤트 발생 onSubmit() HTML 양식의 제출 버튼을 클릭하여 양식 데이터를 웹 서버에 제출할 때 이벤트 발생 onReset() 사용자가 초기화 버튼을 누를 때 이벤..

환경 : 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) 기본 슬라이드 개인 공부 기록용입..

환경 : 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 : 기본적으로 지원하는 라이브러리 형..