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

[ 자바스크립트 기본 이벤트 ] 함수 설명 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 : 기본적으로 지원하는 라이브러리 형..

환경 : Visual Studio Code [ DOM 이란? ] Document Object Model(문서 객체 모델) HTML 문서를 객체화한 것 HTML 문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조 HTML, XML 문서의 프로그래밍 interface DOM은 문서의 구조화된 표현(structed representation)을 제공하며, 프록래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할이다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 그렇다. 우리가 JavaScript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이었다... (새삼 ..