본문 바로가기

Javascript

(8)
javascript filter 사용법 - 삽질중인 개발자 - JAVASCRIPT filter 사용법 - 자바스크립트의 filter 메서드는 조건을 주고 해당 조건이 참인 요소를 모아 새로운 배열로 반환하는 메서드이다. 배열에서 원하는 데이터만 추출 하고 싶을 때 자주 사용하는 사용성이 좋은 메서드이다. 여기서 잘 기억하고 있어야 하는 부분은 새로운 배열을 반환해준다는 점이다. 또한 filter는 중복값을 제거해주지 않는다. 따라서 중복값이 나올 수 있다. 기본 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) callback : 각 요소에 대한 조건값 element : 처리할 현재 요소 index : 현재 인덱스 array : filter를 호출한 배열 thisArg : callback을 생행 할 때..
jQuery UI datepicker 사용법 - 삽질중인 개발자 - jQuery UI datepicker 사용법 및 옵션 정리 - jQuery Ui 중에서 datepicker는 간단한 option을 통한 캘린더 구현이 가능한 사용하기 편한 라이브러리다. 한글 캘린더 또한 구현이 가능하다. (좀 더 스타일리쉬한 캘린더를 원하면 bootstrap datepicker 를 클릭) 다운로드 사이트 ( jQuery UI 공식 페이지 ) 이미 기존에 사용되고 있는 사이트에서 jQuery UI 의 모든 기능을 다운 받아서 사용하면 다른 css나 js와 충돌이 날 가능성이 있다. 따라서 원하는 부분만 설정해서 다운받도록 한다. Download Builder | jQuery UI Download Builder jqueryui.com 1. JQuery UI datepicker 디폴트 옵..
검색어 자동완성 - jQuery Autocomplete 한글 초성 검색 2 - 삽질중인 개발자 이 글을 읽기전에 밑에 글을 읽어 보고 와주세요. jQuery autocomplete 한글 초성 검색 1 - 개발자 삽질 일기 jQuery UI autocomplete 로 영어는 검색이 잘 되지만 한글의 경우는 잘 안된다. 예를 들면 한글에 대한 초성 검색이라든지 초.중.종성 검색이 autocomplete 에서는 지원이 잘 안되고 있다. ​ ajax를 이용해서 DB.. programmer93.tistory.com 이 글에서 구현한 방법으로 초중종성 검색 기능을 구현 하지 못하는 경우가 있습니다. 1. 너무 많은 검색어 목록 - 너무 많으면 속도가 느려진다. 몇백만개 이상인지는 모르겠음. 위 목록에 해당 되면 DB쿼리를 조작하는 방향으로 초성검색을 구현해야 합니다. 1. 필요한 JS ,CSS 파일 로드 2..
쿠키(cookie) 개념 및 사용방법 (jQuery plugin) 및 주의사항 - 삽질중인 개발자 - jQuery plugin을 이용한 쿠키 사용 방법 - 쿠키는 웹사이트 접속 시 접속자의 기기에 다운로드되어 저장되는 텍스트 파일입니다. 이런 쿠키에는 이름, 값, 만료 날짜, 경로 정보가 들어있습니다. 이러한 쿠키는 웹사이트가 접속자의 설정에 따라 작동하도록 해주는 역할을 예를들면 로그인 아이디 저장, 장바구니 등의 기능을 구현할 때 쓰거나 팝업창에 "오늘은 더 이상 보지 않음" 같은 설정값을 저장하는 용도 또는, 최근 검색어를 저장하여 사용자 맞춤 광고를 할 때 사용됩니다. 잘 쓰면 웹페이지의 성능도 향상되는 쿠키를 jQuery Plugin을 통하여 아주 간단하게 구현할 수 있습니다. 우선 jQeury를 이용해서 쿠키를 사용하기 위해서는 Plugin을 다운로드하여야 합니다. jQuery Cookie..
자바스크립트 배열 , javascript array - 삽질중인 개발자 var jbAry1 = [ 'Lorem', 'Ipsum' ]; var jbAry2 = jbAry1.concat( 'Dolor', 'Amet' ); 자바스크립트 배열 사용법 배열 선언 방법 // 자바 배열 선언 방법 배열에 값 넣기 / push( value ); 배열의 마지막 값 제거 / pop() 배열 길이 / length 배열안에 모든 요소를 String으로 합쳐서 반환 / join( separator ) 배열 정렬 / sort( compareFunction ) 두개의 배열 합치기 / concat( array ); 조건에 만족하는 배열의 첫 번째 요소를 반환 / find( callback );
Javascript 날짜 변경 함수(yyyy-mm-dd) - 삽질중인 개발자 부트스트랩 datepicker를 사용하다 DB에 날짜를 조회하러 가다보면 날짜를 변경해서 가야하는 경우가 종종 있다. 부트스트랩 데이트피커, bootstrap datepicker 사용법 - 개발자 삽질 일기 사용할 bootstrap-datepicker plugin 은 아래에 있는 플러그인을 사용합니다. 사용하는 이유 : 가장 잘 사용하는 플러그인... !! 즉, 한번 써보면 다른 곳에서도 많이 쓰이는 플러그인 uxsolutions/bootstrap-dat.. programmer93.tistory.com 이럴때 사용하면 좋은 함수. //날짜 변경해주는 함수 (yyyy-mm-dd 형태만 사용가능) //beforeDate : 변경전 날짜 //addNumber : 변경하고 싶은 일(월,년)수 //type : 일..
검색어 자동완성 - jQuery Autocomplete 한글 초성 검색 1 - 삽질중인 개발자 -jQuery Autocomplete 한글 초성 검색- jQuery UI의 autocomplete 는 영어대한 검색은 잘된다. but, 한글의 경우 초성만 입력했을 때 자동완성이 안된다. 한글 초성검색을 구현하는 방법중에는 DB에서부터 초성검색을 하는 방법이 있지만 DB 쿼리문을 수정 할 수 없는 경우에는 DB 초성 검색 구현이 불가능하다. DB에서 초성검색 쿼리 구현이 불가능한 경우 autocomplete에서 초성검색을 구현하는 방법입니다. ​참고로 꼼수를 쓴 방법입니다. ​ 읽기 전에 추천 검색어가 몇 천만개 되는 사람은 뒤로가기를 눌러주세요. autocomplete의 옵션을 잘 모르시는 분은 한번 읽고 와주세요. 검색어 자동완성 - jQuery Autocomplete 사용법 웹 개발을 하다 보면 검..
검색어 자동완성 - jQuery Autocomplete 사용법 - 삽질중인 개발자 - jQuery autocomplete 사용법 및 옵션 정리 - 입력 필드에 타이핑을 하면 자동으로 남은 검색어를 완성해주는 기능을 jQuery UI 에서 이미 구현을 다 해놨다. 이것을 jQuery UI에서는 autocomplete 라고 부른다. 사용방법 필요한 CSS , JS 파일 기본 사용 방법 우선 TEXT 영역부터 만들어야 한다. 1. 일반 배열 안에서 검색 방법 ​ 2. ajax 버전 스프링 컨트롤러 부분이다. 주석에 있는 JSON을 반환한다. //스프링 컨트롤러 부분 @RequestMapping(value = "/json", method = RequestMethod.GET, produces="text/plain;charset=UTF-8") @ResponseBody public String j..