목적 Timer와 같이 일정 주기를 기준으로 계속 함수가 실행되도록 하기. 함수가 반복 될 때 반복된 주기별로 원하는 파라미터 전송 하기 해결 방안 setInterval 사용 혹은 중첩 setTimeout 사용하기 % 를 사용하여 각 반복구간 구별하기 개념 setTimeout : 일정시간(지정한) 이 지난 후에 지정된 함수를 한번 실행 param 1 : function param 2 : time (밀리초) param 3~ : param1 의 function 에 전달할 parameter 지정 1.기본사용 function test(){ console.log("hi"); } setTimeout(test,5000); 2. 파라미터 전달 function test(name){ console.log(name+" 님 ..

클로저 : 함수가 선언 되었을 때의 렉시컬 환경 클로저를 이해하기 전에 먼저 스코프의 개념에 대해 알아야 합니다. 스코프는 함수를 호출 할 때 정해지는 것이 아니라 어디에 선언되었는지에 따라 나뉘게 됩니다. 코드를 보면서 이해해 보겠습니다. pagination 이라는 함수 안에 increase, decrease , status 라는 3가지 내부 함수가 선언되어 있습니다. 내부함수 입장에서 바라보면, pagination 함수는 외부함수 입니다. 함수가 실행되었을 때 관점에서 바라보면, 1] 내부함수가 호출된다. -> 해당 컨텍스트가 실행 컨텍스트 스택에 쌓임 2] 변수 객체, 스코프 체인, this 객체가 결정 3] 스코프 체인이 바인딩 될 때 전역 스코프 -> pagination 스코프 -> 자기 자신을..

목적 : 오늘 날자 구하기, 오늘 날자로부터 7일 뒤 날자 구하기, 년,월 이 지나도 정상적으로 작동 유지 문제점 : 년 월 일 을 나눠서 "-" 를 붙이면서 각각의 종류가 최대치를 넘기는 경우의 수를 예상하지 못하여 33일 등 말도 안되는 날자가 출력된 점 수정 let day = date.getDate() +7; 해결: let date = new Date(); date.setDate(date.getDate() +7); let year = date.getFullYear(); let month = date.getMonth() +1; let day = date.getDate(); let stringDate = year+"-"+month+"-"+day; date 객체를 생성한 뒤. setDate 를 사용해서 ..

목적 : 뒤로가기 버튼 구현 문제점 : 글 작성 -> 목록 -> 뒤로가기 버튼 클릭시 작성 페이지로 이동함과 동시에 값이 남아있는 점 history.back() 을 사용했을 때 로딩 되는 페이지에서 해당 url 로 인한 진입인지, back으로 돌아온 페이지 인지 감지하여 함수를 동작시킬 수 있습니다. window.onpageshow = function(event){ if(event.persisted || (window.performance && window.performance.navigation.type == 2)){ service.onLoadPage(); } } 해당 함수가 시작됨 -> back으로 돌아옴 -> 미리 지정한 로딩함수 등을 설정하여 값을 초기화 하는 방식으로 동작하게 하여, back버튼..

공식문서 :https://jqueryvalidation.org/ 프로그램을 짜면서 데이터 검증은 필수적입니다. JQuery 플러그인 중 validate 검증 플러그인을 사용했습니다. JQuery 플러그인이기 때문에 순서는 jquery부터 받아와야 합니다. 그 후에 vaildate 스크립트가 옵니다. 만약 커스텀해서 사용한다면 해당 경로를 스크립트 합니다. ※경로는 해당 파일 위치입니다. script 에서 등록버튼과 같은 이벤트 작동시 아래와 같은 양식을 사용합니다. #frmRequest => form 데이터 ($('#frmRequest').valid()) 해당 jsp 파일의 script 단 에서 바로 검증을 해서 메시지를 출력 할 수 있습니다. let validator = $('#frmRequest')...

사용 언어 : ES6 ,JQuery 목적] li 의 class 명이 Open 혹은 Put 2가지의 ul li 리스트가 있습니다. 그중 Open이 먼저 선택시 선택된 값 은 Put 리스트에서 선택할 수 없게 하는것이 목표입니다. 구조 : div -> ul -> li 의 구조] 화면] 문제 코드] $("#tpOpenDtYmd, #tpPutDtYmd").on("change",function (e) { $(".Open").on("click", function () { if (!($(".Put").children(".selectedhour").text() == '')) { let text = $(".Put").children(".selectedhour").text(); let hour = text.slice(0,..

1] Selector 1-1] html 에 id 와 동일한 값의 엘리먼트를 선택한다 $("#id") 1-2] html 에 class 와 동일한 값의 엘리먼트를 선택한다. $(".class") 1-3] html 에서 div 의 요소 중 class 이름과 같은 값의 엘리먼트를 선택한다. $("div.class") 1-4] html 에서 ul 의 자손노드인 li을 전부 선택한다 $("ul li") 1-5] html 에서 div의 자손노드중 class 와 동일한 값의 엘리먼트를 선택한다. $("div .class") 2] Filter 2-1] 기본 요소 선택 $("div"):first //선택된 요소의 첫번째 요소 $("div"):last //선택된 요소의 마지막 요소 $("div"):even //선택된 요소의..

목적 ] Jquery 와 ES6 를 사용하여 input type="file" 의 다중 업로드 및 제약조건 부여하기 Front 부분] 찾아보기 label 에 for를 이용하여 디자인을 입힐 수 있습니다. input type="file" 에 accept 속성을 이용하여 파일 첨부시 보여지는 파일을 정할 수 있습니다. 단 완전하게 막지는 못하기 때문에 Controller 부분에서 제어를 해줘야 합니다. Script 부분] 1] 사용할 DataTransfer 객체와 총 파일 업로드 가능한 수 선언 const dt = new DataTransfer(); let totalCount = 5; 2] 파일 업로드 될 때 이벤트 걸기 $('#filename').on('change', function () { 부분으로 파일..

포스팅 목표] 파일 업로드 방식 중 많이 사용하는 을 사용해 여러파일을 등록 가능하게 하며, 등록된 파일의 썸네일 표출 , line 별 삭제기능 구현 방식 설명 완료화면] HTML ] 제목 : 내용 : 파일첨부 : 파일 등록 등록 취소 Input type="file" 을 그대로 사용하면, 버튼부분과 text 부분으로 나뉘는데, 동적변환시 해당 text가 바로바로 바뀌지 않아서 label 을 사용하여 클릭이벤트를 위임하고, css를 사용해서 input 을 숨길 것입니다. 또한 여러 파일을 전달할 수 있도록 multiple 속성을 부여합니다. CSS] .fileuploder label { display: inline-block; padding: .5em .75em; font-size: inherit; lin..

기존 코드 ] $("#" + tabclosename).click(function () { // create 한 template 노드에 해당 아이디를 가진 버튼에 리스너를 Jquery 를 이용하여 부여 }); $(document).on("click", "#" + tabname, function () { // 문서 전체를 기준으로 해당 아이디를 가진 a 테그에 이벤트 부여 }); 수정코드] node.querySelector('a').onclick = function(){ //a 태그 이벤트 부여 } node.querySelector('input[type=button]').onclick = function(){ //여기에 닫기버튼 이벤트 부여 } 핵심] // 템플릿 만드는 곳 let node = documen..

JQuery 선택자 1. 전체 선택자 -> * $('*').attr('test',1); document 에 있는 모든 문서객체를 선택 2. 태그 선택자 -> html 태그이름 $('h2').attr('test',1); 특정한 태그를 선택한다 3. 아이디 선택자 -> #아이디이름 $('h2#item').attr('test',1); $('#id').attr('test',1); 특정한 id를 부여한 객체를 선택 4. 클래그 선택자 -> . 클래스 이름 $('h2.item').attr('test',1); $('item.test').attr('test',1); 특정한 class속성이 부여된 객체를 선택 5. 자손 선택자 -> a요소 > b요소 $('test >test2').attr('test',1); 해당 a요소..

목표] 위와 같이 동작하면서 닫고 새로 열기 전까지는 파일을 로드하거나 통신하지 않도록 하였습니다.] 코드 & 설명] 각각의 메뉴버튼에 리스너를 달아줍니다. openCheck 함수와 createTemplate 함수를 만들어서 사용하였습니다. openCheck 함수] 이전 포스팅에 있는 localstorage를 이용하여 해당 tabname에 맞는 이름이 열려있는지 닫혀있는지를 판별합니다. 만약 열려있으면 true 닫혀있으면 false를 반환합니다. 따라서 위에서 tab이 중복으로 열리는것을 방지한 코드입니다. createTemplate 함수] function creatTemplate(menuname) { //이름 변경 let url; let name; switch (menuname) { case 'menu..