'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 로 메뉴 접었다~ 펼쳤다~ 구현하기 (37)

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>
    


    Trackback 0 Comment 0

    웹에서 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


    Trackback 0 Comment 0

    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();
    
    Trackback 0 Comment 0

    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
    



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


    Trackback 0 Comment 1
    1. liberto 2015.06.16 15:55 address edit & del reply

      잘 봤습니다. 감사합니다^^

    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>
    


    Trackback 0 Comment 37
    1. 이전 댓글 더보기
    2. sji 2014.01.10 10:32 address edit & del reply

      대단히 초보도 쉽게할 수 있ㄱ게 해주셨네여~!!!! 확실히 개념잡고 갑니다~~!!!

    3. 쩌뉴 2014.10.14 16:50 address edit & del reply

      맨윗분의 질문이랑 같은건데 이미지 변경은 어떻게 해요??ㅠㅠㅠㅠ

    4. 쩌뉴 2014.10.14 18:58 address edit & del reply

      맨윗분의 질문이랑 같은건데 이미지 변경은 어떻게 해요??ㅠㅠㅠㅠ

      • 스토브 2014.10.15 15:19 신고 address edit & del

        다른분이 질문한걸 지식인으로 대답했었는데

        http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=206996263&page=1#answer1

        요거면 될것 같네요

    5. 찌찌뽕 2014.12.02 12:37 address edit & del reply

      감사합니다 출저 확실히 퍼가겠습니다!

    6. hnm 2016.01.19 15:05 address edit & del reply

      안녕하세요~ 쉽게 되있는 걸로 찾다가 보았는데요 하나 더 추가해야되서 질문 남깁니다.
      메뉴에 마우스 오버하면 화살표가 생기거든요
      근데 메뉴를 클릭하고 해당 페이지가 오른쪽에 보일때도 어느 메뉴인지 알수있게 화살표가 살아있어야 하는데요 이건 어떻게 해야하나요??
      화살표는 백이미지로 넣었습니다.

    7. ㅇㅇㅇ 2016.04.08 13:42 address edit & del reply

      쉽게 써주셔서 잘 배웠습니다!!

    8. 이뿌니 2016.06.16 17:46 address edit & del reply

      초보에게 쉬운 설명 감사드려요~~^^ 도움 많이 받고 갑니다!!

    9. 서울역그지 2016.07.19 15:21 address edit & del reply

      서울역에 그지없다 무슨말인지 한참 생각했네요 ㅋㅋ

    10. minisoo 2016.08.05 11:06 신고 address edit & del reply

      쉽게 설명해주셔서 감사합니다 ^^

    11. 다영 2016.12.22 13:36 address edit & del reply

      응용해서 페이지 여럿페이지를 만들었습니다.
      1.드롭안되는 하나 메뉴
      2.드롭되는메뉴
      3.드롭되는메뉴
      4.드롭안되는 하나 메뉴
      이런식으로 만들었는데
      2번을 들어갔을때 3번이 마우스만 대도 세부메뉴가 나오더라구요
      2번을 들어갔을때 또는 3번을 들어갔을때 해당되는드롭메뉴의 세부메뉴는 보이되 나머지 드롭메뉴를 클릭해야 세부메뉴가 나오게 하는 방법은 없을까요

    12. ㄴㅇ 2017.08.10 17:41 address edit & del reply

      아직 해보진 않았지만 검색하다 여기까지 들어왔네요!
      정말 간단하게 설명되있어서 꼭 해볼꼐요!!

    13. dada 2017.09.15 14:57 address edit & del reply

      완벽합니다 간단한 스크립트!! 최고예요 정말 감사합니다!!!

    14. ㅎㅎㅈ 2017.09.27 10:33 address edit & del reply

      감사합니다. 많은 도움이 됐습니다.

    15. ㅇㅇ 2017.11.05 18:32 address edit & del reply

      한번 펼치면 다시 접기를 누르기 전까지 접히지 않게 하려면어떻게 해야할까요?

    16. 저는ㄱ허뎝입니다 2018.02.01 19:33 address edit & del reply

      좋은코드 감사합니다~~그런데 a로 냅두니까 안먹길래 a hre f="#" 로 바꿨더니 잘 되는거같네요^^;

    17. 우앙굳굳 2018.08.20 22:42 address edit & del reply

      짱입니다 ㅠㅠ

    18. 압도적감사 2019.09.05 10:12 address edit & del reply

      말씀도 너무 재미있게 하시고 쏙쏙 박히네요 감사합니다 ㅎㅎ

    19. pinemint 2020.04.09 23:49 신고 address edit & del reply

      찾고 있던 코드였는데 이 포스팅 덕분에 성공했어요. 감사합니다.

    20. htcho 2020.10.26 00:10 신고 address edit & del reply

      좌우배열시 설정하면 로딩이 있는것처럼 하단배열되있다가 우측으로 배열되면서 열리는데.. 이건어떻게해결하죠?

      누르면

      (A)



      이런식으로 있다가

      (A).



      (A). .
      .

      (A). . .

      이렇게 밀리면서 떠요..

    21. 아이윤맨 2020.12.12 14:21 신고 address edit & del reply

      링크해갑니다~

    prev 1 2 3 4 next