'Javascript'에 해당되는 글 17건
- 2018.06.26 Javascript 로 초성검색하기
- 2015.12.07 웹에서 signature_pad.js 사용해서 서명받기 예제
- 2012.05.30 Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기
- 2011.11.29 Javascript 숫자에 천단위로 콤마(,) 찍기 1
- 2011.11.18 jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 39
Javascript 로 초성검색하기
Javascript 예제 2018. 6. 26. 13:25
어떤 훌륭한 분이 한글을 분리해주는 라이브러리를 맨들어줘서 그분의 라이브러리를 활용한 초성 검색 예제를 만들어 보았다.
라이브러리 : https://github.com/e-/Hangul.js/
검색어 : ex) ㅎㄱ or 한국
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="./hangul.min.js"></script>
</head>
<body>
검색어 : <input type="text" id="txt" />
<ul id="find"></ul>
<script>
// 검색할 배열
var arr = [
{ name: "홍길동" },
{ name: "한국" },
{ name: "호가든" },
{ name: "프로그램목록" },
{ name: "프로세스" },
{ name: "공통" },
{ name: "아키텍쳐" },
{ name: "앙칼지다" },
{ name: "학사행정" },
{ name: "일반부속" },
{ name: "학습 및 취업" },
{ name: "테이블정의서" },
{ name: "테이저건" },
{ name: "정의서" },
{ name: "현행화" },
{ name: "졸업" },
{ name: "바인더" },
{ name: "대학본부" },
{ name: "에디터" },
{ name: "Visual Studio Code" },
{ name: "Edit Plus" },
{ name: "소나무" },
{ name: "민들레" },
{ name: "나뭇가지" },
{ name: "갑천" },
{ name: "한강" },
{ name: "금강" },
{ name: "도안동" },
{ name: "월평동" },
{ name: "대전광역시" },
{ name: "서울" },
{ name: "경기도" },
{ name: "성남시" },
{ name: "모니터" },
{ name: "이클립스" },
{ name: "탐색기" },
{ name: "엑셀" },
{ name: "크롬" },
{ name: "파이어폭스" },
{ name: "텔레그램" },
{ name: "팟플레이어" },
{ name: "마이크로소프트" },
{ name: "애플" },
{ name: "LG" },
{ name: "삼성" },
{ name: "오라클" },
{ name: "MySQL" },
{ name: "치약" },
{ name: "프린터" },
{ name: "레이저 프린터" },
{ name: "아반떼" },
{ name: "베라크루즈" },
{ name: "자동차공학과" },
{ name: "기아자동차" },
{ name: "현대자동차" },
{ name: "에어컨" }
];
// object 에 초성필드 추가 {name:"홍길동", diassembled:"ㅎㄱㄷ"}
arr.forEach(function (item) {
var dis = Hangul.disassemble(item.name, true);
var cho = dis.reduce(function (prev, elem) {
elem = elem[0] ? elem[0] : elem;
return prev + elem;
}, "");
item.diassembled = cho;
});
console.log(arr);
var ul = document.getElementById('find');
document.getElementById('txt').addEventListener('keyup', function () {
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
var search = this.value;
var search1 = Hangul.disassemble(search).join(""); // ㄺ=>ㄹㄱ
arr
// 문자열 검색 || 초성검색
.filter(function (item) {
return item.name.includes(search) || item.diassembled.includes(search1);
})
// 검색결과 ul 아래에 li 로 추가
.forEach(function (item) {
var li = document.createElement('li');
li.innerHTML = item.name;
ul.appendChild(li);
});
});
</script>
</body>
</html>
'Javascript 예제' 카테고리의 다른 글
| jQuery 로 탭 만들어 보기 (0) | 2018.10.12 |
|---|---|
| jQuery 로 탭메뉴를 맹글어 보아요~ (8) | 2014.10.15 |
| 네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 (0) | 2014.04.29 |
| jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3) | 2014.04.10 |
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
웹에서 signature_pad.js 사용해서 서명받기 예제
Javascript 2015. 12. 7. 16:11
Signature Pad : https://github.com/szimek/signature_pad
Demo 사이트 : http://szimek.github.io/signature_pad/
요기에 가보면 어떤 머리좋고 착한 사람이 웹에서 사인을 할 수 있도록 지원해주는 js 를 맨들어 놓고 설명을 해 주고 있다.
웹에서 사인한 이미지를 php 을 사용해서 png 이미지 파일을 생성하는 예제는 있는데 Java 예제는 없어서 Java 로 하는걸 살짝 맹글어 보았다.
뭐 별건 아니고 BASE64 로 인코딩된 문자열을 다시 디코딩해서 png 파일로 맨드는것만 하면 된다.
보다 쉬운 편의를 위해서 Apache Commons 프로젝트에 있는 라이브러리 몇개(lang, io, codec)를 가져다 썼다.
maven 을 사용하는 사람들은 디펜던시에 요걸 추가해 주면 되고 아니면 그냥 commons.apache.org 에 가서 다운로드 받으면 된다.
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.4</version>
</dependency>
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::: 사인패드 테스트 :::</title>
<script src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js" type="text/javascript">
</script>
<script src="${pageContext.request.contextPath}/resources/js/signature_pad.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/css.css">
</head>
<body>
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">사인해 주세요~</div>
<button type="button" class="button clear" data-action="clear">지우기</button>
<button type="button" class="button save" data-action="save">저장</button>
</div>
</div>
<script>
var canvas = $("#signature-pad canvas")[0];
var sign = new SignaturePad(canvas, {
minWidth: 5,
maxWidth: 10,
penColor: "rgb(66, 133, 244)"
});
$("[data-action]").on("click", function(){
if ( $(this).data("action")=="clear" ){
sign.clear();
}
else if ( $(this).data("action")=="save" ){
if (sign.isEmpty()) {
alert("사인해 주세요!!");
} else {
$.ajax({
url : "save.jsp",
method : "post",
dataType : "json",
data : {
sign : sign.toDataURL()
},
success : function(r){
alert("저장완료 : " + r.filename);
sign.clear();
},
error : function(res){
console.log(res);
}
});
}
}
});
function resizeCanvas(){
var canvas = $("#signature-pad canvas")[0];
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
$(window).on("resize", function(){
resizeCanvas();
});
resizeCanvas();
</script>
</body>
</html>
save.jsp
잠깐 테스트로 예제를 작성하는것이기 때문에 Controller 없이 그냥 jsp 로 맨들어 보았다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@page import="org.apache.commons.codec.binary.Base64"%>
<%@page import="org.apache.commons.io.FileUtils"%>
<%@page import="org.apache.commons.lang3.StringUtils"%>
<%@page import="java.io.File"%>
<%
String sign = StringUtils.split(request.getParameter("sign"), ",")[1];
String fileName = "sign"+System.currentTimeMillis()+".png";
FileUtils.writeByteArrayToFile(new File("d:\\"+fileName), Base64.decodeBase64(sign));
%>
{
"filename" : "<%= fileName %>"
}
예제 프로젝트 다운로드
JavascriptSignature.zip'Javascript' 카테고리의 다른 글
| 네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때 (0) | 2017.02.14 |
|---|---|
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기
Javascript 2012. 5. 30. 19:10
문자열이 쪽 있으면 그 문자열에서 IP 에 해당하는 문자열 부분들을 찾아내서 배열로 얻고 싶을때는 요렇게~
응용해서 정규표현식만 원하는 패턴으로 바꿔주면 정규표현식에 해당하는 패턴을 배열로 쪽 뽑아낼 수 있다.
var pattern = /((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})/g;
// ["19.22.2.255", "219.22.2.253", "219.22.2.251"]
var ipList = "19.22.2.255@219.22.2.253 219.22.2.251".match(pattern);
여기서 한발짝 더 뿍 나가
String 객체의 prototype 에다 함수를 추가시켜 쓰면 쪼매더 간지나 보인다.
공통으로 땡겨다 쓰는 js 파일에다 요렇게 String prototype 을 추가하고
String.prototype.getIP = function() {
var pattern = /((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})/g;
return this.match(pattern);
};
아무데서나 요렇게 쓰면 위와 똑같은 결과를 쫌더 간지나게 얻을 수 있다.
// ["19.22.2.255", "219.22.2.253", "219.22.2.251"] var ipList = "19.22.2.255@219.22.2.253 219.22.2.251".getIP();
'Javascript' 카테고리의 다른 글
| 웹에서 signature_pad.js 사용해서 서명받기 예제 (0) | 2015.12.07 |
|---|---|
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
| javascript Array 에 protoype으로 remove 함수 추가하기 (2) | 2011.11.09 |
Javascript 숫자에 천단위로 콤마(,) 찍기
Javascript 2011. 11. 29. 15:49
자바스크립트 Number, String 클래스의 prototype 에 format() 라는 함수를 추가시키면 어디에서든지 간단하게 숫자에다 천단위로 콤마를 찍을 수 있다.
솟스코드
// 숫자 타입에서 쓸 수 있도록 format() 함수 추가
Number.prototype.format = function(){
if(this==0) return 0;
var reg = /(^[+-]?\d+)(\d{3})/;
var n = (this + '');
while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2');
return n;
};
// 문자열 타입에서 쓸 수 있도록 format() 함수 추가
String.prototype.format = function(){
var num = parseFloat(this);
if( isNaN(num) ) return "0";
return num.format();
};
// 숫자 타입 test
var num = 123456.012;
console.log(num.format()); // 123,456.012
num = 13546745;
console.log(num.format()); // 13,546,745
// 문자열 타입 test
console.log("12348".format()); // 12,348
console.log("12348.6456".format()); // 12,348.6456
자바스크립트의 프로토타입을 가지고 쪼물락 거리면 재미진걸 많이 할 수 있는것 같다.
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/18 - [jQuery Plugin] - 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)
2011/11/24 - [Javascript 예제] - jQuery 로 원하는 갯수만큼 checkbox 선택하기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/18 - [jQuery Plugin] - 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)
2011/11/24 - [Javascript 예제] - jQuery 로 원하는 갯수만큼 checkbox 선택하기
'Javascript' 카테고리의 다른 글
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
|---|---|
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
| javascript Array 에 protoype으로 remove 함수 추가하기 (2) | 2011.11.09 |
| javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기 (6) | 2011.11.07 |
jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
Javascript 예제 2011. 11. 18. 01:27
고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다.
대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다.
우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 )
-
- 메뉴1-1
- 메뉴1-2
- 메뉴1-3
- 메뉴1-4
- 메뉴1-5
- 메뉴1-6
-
- 메뉴2-1
- 메뉴2-2
- 메뉴2-3
- 메뉴2-4
- 메뉴2-5
- 메뉴2-6
요런 모양을 맨들기 위한 html 마크업은 요렇게~ html 태그에 onclick=""; 어쩌고 하는 지저분한 자바스크립트 하나 안들어간 순결하고 *(-_-)* 깔끔한 마크업이다.
<div> <ul> <li class="menu"> <a><img src="" alt="상위메뉴이미지1"/></a> <ul class="hide"> <li>메뉴1-1</li> <li>메뉴1-2</li> <li>메뉴1-3</li> <li>메뉴1-4</li> <li>메뉴1-5</li> <li>메뉴1-6</li> </ul> </li> <li class="menu"> <a><img src="" alt="상위메뉴이미지2"/></a> <ul class="hide"> <li>메뉴2-1</li> <li>메뉴2-2</li> <li>메뉴2-3</li> <li>메뉴2-4</li> <li>메뉴2-5</li> <li>메뉴2-6</li> </ul> </li> </ul> </div>
스타일은 요정도로만
<style>
.menu a{cursor:pointer;}
.menu .hide{display:none;}
</style>
중요한 jQuery 를 이용한 자바스크립 소스 부분이다. 심플스럽기 서울역에 그지없다. 주석을 빼면 3~4줄 정도밖에 안된다. 아주 짧으면서도 의미가 쏙쏙 들어오는!
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// memu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").click(function(){
// 현재 클릭한 태그가 a 이기 때문에
// a 옆의 태그중 ul 태그에 hide 클래스 태그를 넣던지 빼던지 한다.
$(this).next("ul").toggleClass("hide");
});
});
</script>
그냥 뿟뿟 나타났다 사라지는게 허접스럽게 느껴진다면 여기서 한단계 더 나아가
클릭했을때 보드랍게 슬라이딩 되면서 나타났다 사라지는 것을 맨들어 보자. 마크업과 스타일은 손댈필요 없이 자바스크립만 요래 살짝 바꿔 주면 된다.
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
});
});
</script>
바꾼결과( 클릭해 보셈 )
-
- 메뉴1-1
- 메뉴1-2
- 메뉴1-3
- 메뉴1-4
- 메뉴1-5
- 메뉴1-6
-
- 메뉴2-1
- 메뉴2-2
- 메뉴2-3
- 메뉴2-4
- 메뉴2-5
- 메뉴2-6
그렇다면 마지막으로 클릭했을때의 기능은 남겨두고 마우스가 오버되면 메뉴가 자동으로 펼쳐지게 맨들어 보자. 자바스크립트를 살짝 요래 수정하면 된다.
<script>
$(document).ready(function(){
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
}).mouseover(function(){
$(this).next("ul").slideDown();
});
});
</script>
바꾼결과( 마우스를 올려 보셈 )
-
- 메뉴1-1
- 메뉴1-2
- 메뉴1-3
- 메뉴1-4
- 메뉴1-5
- 메뉴1-6
-
- 메뉴2-1
- 메뉴2-2
- 메뉴2-3
- 메뉴2-4
- 메뉴2-5
- 메뉴2-6
진짜 진짜 마지막으로,
맨처음 뜰때 부터 두번째 메뉴가 펼쳐진 상태로 뜨게 하고 싶다면? 간단하게 두번째 서브메뉴 ul 에 지정된 hide 클래스를 지우면 되지만,
자바스크립트적인 방법으로는 요렇게 하면 된다.
<script>
$(document).ready(function(){
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
}).mouseover(function(){
$(this).next("ul").slideDown();
});
// menu class 중에 두번째 있는 menu 의 하위에 있는 a태그에 클릭 이벤트를 발생시킨다.
$(".menu:eq(1)>a").click();
});
</script>
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
'Javascript 예제' 카테고리의 다른 글
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
|---|---|
| jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
| jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 (3) | 2011.11.11 |
