'Javascript'에 해당되는 글 17건

  1. 2018.06.26 Javascript 로 초성검색하기
  2. 2015.12.07 웹에서 signature_pad.js 사용해서 서명받기 예제
  3. 2012.05.30 Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기
  4. 2011.11.29 Javascript 숫자에 천단위로 콤마(,) 찍기 1
  5. 2011.11.18 jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 39

Javascript 로 초성검색하기


어떤 훌륭한 분이 한글을 분리해주는 라이브러리를 맨들어줘서 그분의 라이브러리를 활용한 초성 검색 예제를 만들어 보았다.


라이브러리 : 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>
    


    웹에서 signature_pad.js 사용해서 서명받기 예제



    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로 문자열 중에서 ip 문자열을 배열로 추출하기



    문자열이 쪽 있으면 그 문자열에서 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 숫자에 천단위로 콤마(,) 찍기

    자바스크립트 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
    



    자바스크립트의 프로토타입을 가지고 쪼물락 거리면 재미진걸 많이 할 수 있는것 같다.


    jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기



    jQuery 를 이용하면 드럽게 복잡해질 자바스크립트가 매우매우매우매우매우 심플해 진다. 간단한 몇 라인의 코딩만으로 쉽게 간지나는 것을 맨들 수 있다.

    고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다.

    대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다.

    우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 )

    요런 모양을 맨들기 위한 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>
    

     바꾼결과( 클릭해 보셈 )



    그렇다면 마지막으로 클릭했을때의 기능은 남겨두고 마우스가 오버되면 메뉴가 자동으로 펼쳐지게 맨들어 보자. 자바스크립트를 살짝 요래 수정하면 된다.
    <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>
    

     바꾼결과( 마우스를 올려 보셈 )




    진짜 진짜 마지막으로,

    맨처음 뜰때 부터 두번째 메뉴가 펼쳐진 상태로 뜨게 하고 싶다면? 간단하게 두번째 서브메뉴 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>
    


    prev 1 2 3 4 next