Javascript 를 사용하여 화면 내 scroll 을 이동 해야해서 찾아봤다. 브라우저 창 너비와 높이브라우저 창 화면에 보이는 너비와 높이를 알려면 document.documentElement 의clientWidth 와 clientHeight 를 사용한다.  사용방법document.documentElement.clientWidthdocument.documentElement.clientHeight 또 다른 확인 방법은 관리자도구(F12) 를 키고 모바일로 봤을 때 확인 가능하다.   window.innerWidth 와 document.documentElement.clientWidth 의 차이점너비와 높이를 구하는 방법중에 window.innerWidth 와 window.innerHeight 도 있다...

환경 = Spring Boot, JQuery, thymeleaf Spring Boot 와 Thymeleaf  환경에서 JQuery Ajax 요청 중 Spring Security 의 CSRF Token을 헤더에 기본적으로설정하기 위해 찾아보다가 ajaxSend 함수와 ajaxSetup() 의 beforeSend 를 보아 정리한다.  .ajaxSend(function(e, xhr, options){ ... })ajaxSend 는 JQuery 에서 Ajax 요청을 보내기 전에 실행시킬 함수를 정의한다.즉, Ajax 이벤트 처리기이다. Ajax 요청을 보내기 전에 매번 ajaxSend() 함수 이벤트를 발생시킨다. Ajax 요청을 서버에 보내기전에 공통적으로 처리해야할 것이 있을 때 사용한다. 사용법// JQu..

Javascript 에서 물음표(?), 느낌표(!)  등 다양한 연산자를 통해 코드의 간결하고 가독성 있게 바꿔준다. 물음표 1개(?)물음표 한개 연산자는 "삼항연산자", "옵셔널 체이닝 연산자" 에서 사용된다. 삼항연산자// 조건식 ? 참값 : 거짓값let a = 11;a > 10 ? 'a가 10보다 큽니다.' : 'a가 10보다 작습니다.' 삼항연산자는 조건식이 참과 거짓일 때 콜론(:)을 기준으로 각각 다른 값을 반환한다.  옵셔널 체이닝 연산자(?.)// 사용법 = (?.)let card = {};// undefined, 객체의 존재하지 않는 요소에 접근해 정보를 가져오려고 할 경우 에러가 발생한다.console.log(card && card.name && card.name.number);// u..

개발 환경 : Jquery, datepicker datepicker 를 사용해 시작날짜와 종료날짜를 선택하는데 최대 10일까지 선택할 수 있도록기능 구현이 필요했다.시작 날짜를 선택했을 때 종료날짜와 비교해 10일을 초과했을 경우 시작날짜 기준으로 종료날짜를시작날짜 + 10일로 변경하도록 기능 구현했다. HTML시작날짜 : 종료날짜 :  javascript $('.callflow-date-start').datepicker({ changeMonth: true, changeYear: true, selectOtherMonths: true, showButtonPanel: true, yearRange: "c-50:c+50", dateFormat: "yy-mm-dd", onSelec..

datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다.// html// javascript$('#manager-mst-view-table').DataTable({ searching : true, initComplete: function() { let api = this.api(); $('#manager-mst-view-table thead tr') .clone(true) .addClass('filters') .appendTo('#manager-mst-view-table thead'); //columns 들의 eq(0) 인 head 들만 반복한다. api...

e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다.  e.preventDefault() e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을중지시킨다. // javascript$("a").click(function(e){ e.preventDefault(); alert('prevnetDefault 로 인해 이벤트 중지');});// html네이버 페이지 이동 위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로인해 이벤트가 중지된다. e.stopPropagation()e.st..