환경 Tool: Intellij Framework : Spring Language : ES6,JQuery DB : ORACLE 목적 input 태그에 자동완성 기능 구현 데이터는 ORACLE DB 의 값 조회 AutoComplete 에 커스텀 Class 적용방법 사용 라이브러리 UI-JQuery AutoComplete https://jqueryui.com/autocomplete/#content Autocomplete | jQuery UI Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocom..

공식문서 :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 () { 부분으로 파일..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS [완성화면] 목록에서 번호를 클릭시 해당 게시글의 내용이 나오도록 한다. 개발 목표 : 기존에 만든 게시판에서 SPA 을 유지하며, 게시판 Row 클릭시 해당 목록 조회. 메뉴 1 소스코드] CRUD 등록 10개씩 보기 15개씩 보기 20개씩 보기 제목 작성자 조회 번호 제목 글쓴이 작성일자 조회수 이전 포스팅에 비해 좀더 새분화 하여 나누었으며 기능은 테이블 생성, 목록 조회, 조회버튼 클릭, view 카운트 변경 의 4가지 기능으로 나누어 작성하였습니다. 코드설명] 1] 테이블 생성 부분 //테이블 생성 async function createB..

기존 코드 ] $("#" + 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..

목표] 메뉴 1, 메뉴 2를 선택하면 바로 아래부분에 a태그와 button을 가진 template이 추가되며 글로벌 변수에 open인지 close인지 상태를 저장한다. 메뉴의 종류에 따라 contents부분이 해당 jsp파일의 내용으로 교체된다. 히스토리 로드를 클릭하면 (뒤로가기) 이전에 객체형태로 저장한 content를 보여준다. 자료구조는 stack을 사용하였고, 뒤로갈 페이지가 없을시 해당 alert를 호출한다. 코드분석] 1] 메뉴 1, 2클릭 구현 각각 onclick 함수로 오프너 함수와 checktab 함수에 각각 메뉴인자를 전달. 2] menuopener함수 JQuery의 load 함수를 이용해서 content가 있는 부분인 의 id인 menucontent 부분을 해당 requestMapp..

JQuery 자바스크립트로 만들어진 라이브러리. DOM 작업을 쉽게 할 수 있게 해줍니다. JQuery는 메소드를 가지고 있는 클래스 -> 프로토타입 방식 그 중에서도 크로스 브라우징 라이브러리 라는 특성이 코드의 라인을 줄여줍니다. 크로스 브라우징 라이브러리 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 출력되게 하는 라이브러리 크로스 브라우징 라이브러리가 아니라면, 브라우저 마다 기능을 나눠서 추가해줘야한다.. ex) IE7 이전에는 attachEvent 를 사용하였다. 순기능 자바스크립트 DOM 기능 Ajax 를 손쉽게 플러그인이 많다 효과 : 애니메이션 효과 간단한 예시와 실습 1번] id 요소의 값 수정하기 페이지가 로딩되고 (html과 같은 정적 요소) 이후 script에서 onloa..

$Load() 함수 : Ajax 와 같은 통신을 통해 서버로부터 데이터를 불러와 선택된 요소에 넣는 jQuery 입니다. 문법 : $(선택자).load(URL, data, callback 함수); url : 불러올 주소 data : 요청에 사용할 데이터 callback 함수 : 요청에 대한 응답을 처리할 콜백함수 url 에서 #를 이용해 불러온 문서에서 해당 tagid를 가진 부분만 선택적으로 불러올 수도 있습니다. 버튼 2에클릭시 함수를 달고 그 안에 load를 사용하였습니다. #content로 content 라는 아이디를 가지는 div를 대상으로 불러올 것입니다. 불러올 파일은 tabmanager 아래의 tab2.viw.jsp 입니다. load 뒤에 url 부분에 바로 상대경로던 절대경로던 바로 ur..