레이어 부가설명 박스 달기


안녕하세요.
고코더 입니다.


브라우저는 title 요소에 값을 넣으면
보통 기본 팁 박스를 제공합니다.


하지만 우리의 클라이언트는
특이한걸 원하는 분이 많습니다.

이 타이틀 속성의 툴 팁의 디자인 요소를 넣고 싶어할 수도 있습니다.
그래서 이번 시간에는 toll tip을 바꿀수 있는 플러그인을
소개 하려 합니다.

▼ tooltipsy 라는 플러그인 입니다.


▼ 아주 간단하게 툴박스를 생성할 수 있는데요
아래 예제를 한번 실행해보세요. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="http://code.jquery.com/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipsy@1.0.0/tooltipsy.min.js" ></script>
<input type="text" id="gocoder_tooltip" title="GoCoder ITExpress" />
 
<script type="text/Javascript">
 
         $("#gocoder_tooltip").tooltipsy({
 
            css: {
                'padding''5px',
                'max-width''100px',
                'color''#303030',
                'background-color''#ffffff',
                'border''2px solid #4893BA',
                'text-shadow''none',
                'font-size':'10px'
            }
 
        });
 
</script>
cs
▼ 이렇게 디자인이 노출 됩니다. 


가장 기본적인 사용법 이외에
다양한 효과는 

▼ 샘플을 활용해보세요.


다양한 효과와 액션 예제가 있으니
필요한 부분을 따라 쓰고
커스텀하시면 될거 같습니다.

기본적으로 외국 스러운 디자인이라
CSS는 수정해서 쓰셔야 겠네요. 



마무리


기본 모양이 가장 이쁜데..


댓글을 달아 주세요


브라우저에서 콘솔로그 안찍히게 하기 


안녕하세요. 
고코더 입니다.

요즘 크롬의 개발자 도구의 편리함으로
alert 로 더이상 로그를 찍어보지 않고
console.log 를 많이 사용 하고 게십니다.



그런데 중요한건 실서버에 올릴 때
사용자들에게는 log를 제공하고 싶지 않아서

다 지우고 올리시고 계시죠.

그럴 필요 없이 아래 코드를 한번 웹에서 실행 해보시면

편리한 방법을 만나실 수 있습니다.

▼해당 코드를 웹에서 실행해 보세요 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    <!--
    var logger = function() {
        var oldConsoleLog = null;
        var pub = {};
        pub.enableLogger = function enableLogger() {
            if (oldConsoleLog == null)
                return;
            window['console']['log'= oldConsoleLog;
        };
        pub.disableLogger = function disableLogger() {
            oldConsoleLog = console.log;
            window['console']['log'= function() {};
        };
        return pub;
    }();
 
    $(document).ready(
        function() {
            console.log('콘솔 로그가 찍힌다.');
            logger.disableLogger();
            console.log('콘솔 로그가 블락 처리 됐다 ');
            logger.enableLogger();
            console.log('콘솔 로그가 다시 찍힌다.');
        }
    );
    //-->
</script>
cs

▼ 파일을 다운로드 하셔도 좋습니다.

▼ 아래처럼 가운데 log 전에 

disableLogger();  : 선언 하면 해당 log는 보이지 않습니다. 
enableLogger() ; 선언 하면 log는 다시 보이고 있습니다. 



가볍게 개발 완료 이후 에는
상단에 한줄 추가하여서 
log를 방어 할 수 있겠네요



마무리


console.log 찾기 relace all 하던 내가 밉다.


댓글을 달아 주세요



이미지가 화면에 올때 로딩 되게 하기


안녕하세요. 고코더 입니다.




오늘은 동적으로 이미지를 호출하여
페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만
해당 이미지를 볼 수 있도록 만들어 보려고 합니다. 
모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다.

오늘 써볼 플러그인은 lazyload() 입니다.

▼홈페이지는 아래와 같습니다.

공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다.

저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다.

▼ 아래 내용을 참고해주세요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.lazyload.js"></script// 플로그인 참조
    <script type="text/javascript">
        $(function(){
            $('img.gocoder').lazyload({        // 이미지를 동적으로 호출 하도록
                placeholder : 'loading.gif',    // 로딩 이미지
                threshold: 0,                 // 접근 ~px 이전에 로딩을 시도한다.
                load : function(){              // 로딩시에 이벤트
                    $(this).attr('alt',$(this).attr("data-original"));
                }
            });
        });
    </script>
</head>
<body>
    <Table>
        <tr>
            <td><img data-original="img (1).jpg"  class="gocoder" width="300"></td>
            <td><img data-original="img (2).jpg"  class="gocoder" width="300"></td>
        </tr>
        <tr>
            <td><img data-original="img (3).jpg"  class="gocoder" width="300"></td>
            <td><img data-original="img (4).jpg"  class="gocoder" width="300"></td>
        </tr>
    </Table>
</body>
</html>
cs

예제만 보시면 대부분 이해가 될거라 생각이 듭니다.
그래도 조금 더 자세히 설명을 드리면

1. lazyload() -> 7번째 줄
$('img.gocoder').lazyload()
- 해당 기능을 호출합니다. 이렇게만 쓰셔도 옵션 없이 정상 작동합니다.

2. placeholder -> 8번째 줄
placeholder : 'loading.gif'
- 호출 전 이미지를 지정합니다. 보통 로딩 gif가 올거 같네요. img 태그의 src의 주소를 매칭하여 사용할 수 있습니다.

3. threshold -> 9번째 줄
threshold: 0,
- 호출 할 시점을 입력합니다. 숫자가 높을 수록 먼저 로딩을 하고 있습니다. 

4. load -> 10~12번째 줄
load : function()
- 호출 시점에 이벤트를 실행 할 수 있습니다. 파일명을 이미지 속성 alt에 입력 되게 해보았습니다.

▼ 이처럼 필요시기에 이미지를 불러 옵니다.
(로딩에 맞춰 캡쳐하기 힘드네요)



이 밖에 이펙터 같은 옵션이 더 있으나 실무에서 거의 사용하지 않는 부분이라
필요한 부분만 코딩 하였습니다. 그리고 아직 플러그인이 완성됐다는 느낌은 안들어서
기본 기능만 사용하시는걸 추천드립니다.



마무리

좋은 플러그인이 많네요. 자신만의 레퍼런스를 만들어서 빠르게 사용하세요



댓글을 달아 주세요



inputbox validtion numbers only


오늘은 자바스크립트 유효성 체크중에 가장 많이 쓰이는 input 박스에
숫자만 입력 하는 방법을 알아보겠습니다.

개발 방법은 많지만 간단한 두가지 방법을 이용해서
구현 해보았습니다.

첫번째 인풋은 
함수로 뺴서 숫자 keycode가 아니면 
입력하지 못하도록 false를 주었고
1
2
3
4
5
function inNumber(){
  if(event.keyCode<48 || event.keyCode>57){
     event.returnValue=false;
  }
}

cs

두번째 인풋
정규식을 이용해 바로 input 박스에 인라인으로 작성하였습니다.
1
<input type="text" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/>  
cs



▼ 아래 소스를 확인하시면 쉽게 이해가 가능하실 거라 생각 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
    <script type="text/javascript">
    function inNumber(){
        if(event.keyCode<48 || event.keyCode>57){
           event.returnValue=false;
        }
    }
    </script>
</head>
 
 <body>
    <input type="text" onkeypress="inNumber();"/>  
    <input type="text" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/>  
 </body>
</html>

cs

▼ 두가지 input 박스 모두 숫자만 입력 가능합니다.



마무리


새해가 밝았습니다. 2018년에도 즐거운 코딩 하시길 바랍니다!


댓글을 달아 주세요



긴 글 텍스트 축약하기 


DIV에 긴 텍스트가 들어가면 크기가 조절이 되거나 일명 글자가 삐져나오죠
그래서 보통 몇 글자 이상이면 ...을 붙혀서 축약 시키도록 코딩을 합니다.
하지만 해당 기능 각 프론트 개발자마다 다르게 구현 해놓아 유지보수가 어렵습니다.

그래서 오늘은 긴 텍스틀 알아서 축약해주는 플러그인을 소개하겠습니다.

▼우선 참조 사이트는 아래입니다. nl을 보아 네덜란드 개발자인거 같은데
홈페이지 부터 매우 이쁘네요 
자세한 레퍼런스는 해당 홈페이지에서 둘러보세요




해당 사이트를 참고해 개발자 분들이
빠르게 익힐 수 있도록

익스프레스하게 예제를 만들어봤습니다.

▼jquery와 해당 dotdotdot.js를 참조하였습니다.
1
2
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.js"></script>
cs

▼우선 사용법은 선택자의 .dotdotdot();을 넣으면 됩니다.
1
2
3
$(function(){
    $('#gocoder').dotdotdot();                    
});
cs

▼테스트를 위해 div 에 class 속성을 주었습니다.
1
2
3
4
5
.gocoder{
    width:250px;
    height:250px;
    border:3px solid #CCC;
}
cs

▼div는 이렇고 이안에 내용을 담게 됩니다.
1
2
3
<div class="gocoder" id="gocoder" style="float:right;"> 
        
</div>

cs


▼그리고 소스의 합은 아래와 같습니다.
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.dotdotdot.js"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            $('#gocoder').dotdotdot();
        });
    </script>
    <style>
        .gocoder {
            width250px;
            height250px;
            border3px solid #CCC;
        }
    </style>

</head>
<body>

<div class="gocoder" id="gocoder" style="float:left;">
    동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
    강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
    괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>

<div class="gocoder"  style="float:right;">
    동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
    강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
    괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>

<br/>
<br/>
</body>
</html>


▼해당 파일을 웹에서 확인하면 이처럼 손쉽게 텍스트를 ... 마무리로 축약할 수 있습니다.







마무리


 

 필요한 기능을 하나의 컴포넌트로 통일하여 개발하면

유지보수가 쉬워집니다.



댓글을 달아 주세요



자바스크립트에서 서버 시간 가져오기


서버 시간을 가져오는건 당연히 서버 언어가 제공하는 기능을 사용하는게 정석입니다.
하지만 보안의 문제이거나 특별한 이유에서
프론트엔드로 서버시간을 제공해줄 수 없는 경우도 있습니다.

그래서 오늘은 자바스크립트에서 서버 시간을 가져오는 방법을 알아보려고 합니다.
하지만 프론트에서 서버시간을 얻는건 보안상 취약하기 때문에
가벼운 유효성 체크나 중요하지 않은 로직에 이용되는게 맞습니다.



예전 회사에서 해당방식으로 서버시간을 얻어 DB에 기록하는 방법의 대해
보안 취약점으로 지적했으나 무시하고 넘어가 결국 사고가 터진걸 봤네요..


▼해당 URL에 공개된 소스가 제가 만들어놓은 소스보다 정리가 잘되어 있어
참조하여 대체 하겠습니다.


▼해당 소스를 돌려보자 로컬 HTML 환경에서 돌리면 확인할 수 없으니
서버를 띄워서 확인해야 한다.
<script type="text/javascript">
    <!--
    var xmlHttp;
    function srvTime() {
        try {
            //FF, Opera, Safari, Chrome
            xmlHttp new XMLHttpRequest();
        }
        catch (err1) {
            //IE
            try {
                xmlHttp new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (err2) {
                try {
                    xmlHttp new ActiveXObject('Microsoft.XMLHTTP');
                }
                catch (eerr3) {
                    //AJAX not supported, use CPU time.
                    alert("AJAX not supported");
                }
            }
        }
        xmlHttp.open('HEAD'window.location.href.toString()false);
        xmlHttp.setRequestHeader("Content-Type""text/html");
        xmlHttp.send('');
        return xmlHttp.getResponseHeader("Date");
    }

    var st srvTime();
    var date new Date(st);
    //-->
</script>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Server date/time</title>
    <script language="javascript" src="serverDate.js"></script>
</head>
<script language="javascript">
    var localTime new Date();
    document.write("Local machine time is: " localTime "<br>");
    document.write("Server time is: " date);
</script>
<body>
</body>



▼확인결과 현재 서버에 시간을 잘가져오고 있다.




마무리

어떤 경우에도 서버 언어에서 시간을 가져오는게 좋습니다. 


댓글을 달아 주세요



jquery QRcode


오늘은 QR코드를 만들어 볼려고 합니다. 바코드 자체도 훌륭하지만 보통 숫자만 쓸 수 있고
영어까지 포함한 바코드 체계를 쓰면 양 옆으로 너무 길어지는 형상이 있습니다.
그래서 나온게 3차원 바코드 QR코드죠 7089글자가 인식 가능하니 사실상
현재로는 가능한 충분한 데이터를 그 작은 네모안에 표현할 수 있습니다. 



그래서 오늘은 QR코드를 jquery로 만드는 방법을 알아보려고 합니다.

▼개발자 사이트는 아래와 같습니다.

우리 익스프레스 강의를 들어온 개발자 분들에게
간단한 예제릴 만들어 봤습니다.

▼ 아래 파일을 모두 다운로드 해서 gocoder_qrcode.html를 실행시켜보면 됩니다.

▼ 소스는 아래와 같습니다. qrcode()라는 놈을 잘 활용하면 될거 같습니다. 

<html>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.js"></script>
<script type="text/javascript" src="qrcode.js"></script>

<div id="gcDiv"></div>

<script>
    jQuery("#gcDiv").qrcode({   //qrcode 시작
        render "table",      //table, canvas 형식 두 종류가 있다. 
        width 100,            //넓이 조절
        height 100,           //높이 조절
        text   "http://gocoder.tistory.com/"     //QR코드에 실릴 문자열
    });
</script>

</body>
</html>

▼ 결과물은 아래와 같습니다.






마무리


QR코드는 정말 혁명이 아닌가 싶습니다.


댓글을 달아 주세요



검색 가능한 select 박스 


셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.
오름순으로 정렬 하여 데이터를 나열하면 되지만.
우리의 클라이언트들은 참을성이 많지가 않습니다.



그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.
select2 라는 jquery 플러그인이다.
아래 홈페이지에서 자세한 정보를 찾아보자.

하지만 익스프레스하게 알려드리기 위해
아주 기초적이고 간단하게 코딩을 해보았습니다.

▼우선 아래처럼
select2.css , select2.js를 참조 시키자 그리고 jquery는 기본
1
2
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
cs

▼참고로 jquery 참조 URL은 외웁시다.
1
<script src="http://code.jquery.com/jquery.min.js"></script>
cs

http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js

이렇게 3번 쓰면 외워집니다.

▼해당 선택자의 .select2();를 붙이면 작동합니다.
1
2
3
4
5
<script>
    $(document).ready(function () {
        $("#ee").select2();
    });
</script>
cs

▼소스의 합은 이렇습니다. 가장 기본적으로 알아보기 쉽게 만들어보았습니다.
<script src="http://code.jquery.com/jquery.min.js"></script>

<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function () {
            $("#ee").select2();
        });
    </script>
</head>
<body>
<select id="ee">
    <option value="">서태지</option>
    <option value="">양현석</option>
    <option value="">이주노</option>
</select>
</body>

▼첨부파일을 한폴더에 풀고 실행해보세요


▼클릭하면 셀렉트 박스이고 검색할 수 있는 검색창이 있네요







마무리



플러그인을 잘 사용하는 개발자가 됩시다.


댓글을 달아 주세요



자바스크립트로 아이폰 체크하기 


이젠 아이폰 점유율이 절반 가까운 이 시점에
윈도우와  안드로이드만을 두고 개발하는 시대가 끝난거 같습니다.

간단한 예로 어플도 아이폰과 안드로이드 두개를 만들어놓고
접속하는 기기단말을 보고 분기하여

안드로이드일땐 플레이 스토어 어플로
아이폰일땐 아이툰즈 어플로 링크를 보내줘야 할것 입니다.

그래서 오늘은 이 체크하는 방법을 아래처럼 다뤄봤다.


navigator : 브라우저 전반에 걸친 정보를 제공하는 객체이다.
platform  : 브라우저를 실행하는 플랫폼 (기기) 가 무엇인지 말해준다.




아래처럼 아주 간단하게 코딩이 완성 되었습니다.
그밖에도 navigator 객체를 이용하여 클라이언트의 접속 환경을 알아낼 수 있습니다.


<script>
    var UserAgent navigator.platform//하드웨어 플랫폼

    if (UserAgent.match(/i(Phone|Pod)/i!= null ){
        //아이폰 or 아이패드이면
    else{
        //나머지 대부분 안드로이드와 윈도우 겠죠
    }
</script>




마무리


아이폰? 안드로이드? 하나만 씁시다


댓글을 달아 주세요



자바스크립트로 바코드 만들기


간단하게 스크립트로 바코드를 만들수 있는 방법이다.

▼해당 사이트를 참조하였다. 


▼아래는 해당 URL을 보고 만든 샘플 아래 소스를 갖다 써도 되고 
아래 파일을 다운받아 한폴더에서 실행하면 충분한 레퍼런스가 될거라 생각됩니다.

<html>
<
head>
    <
script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <
script type="text/javascript" src="jquery-barcode.js"></script>
</
head>
<
body>

<
div id="bcTarget"></div>
</
body>

<
script type="text/javascript">
   
$("#bcTarget").barcode("1234567890128", "codabar");

   
//    바코드 타입    
   
//    codabar
    //    code11 (code 11)
    //    code39 (code 39)
    //    code93 (code 93)
    //    code128 (code 128)
    //    ean8 (ean 8)
    //    ean13 (ean 13)
    //    std25 (standard 2 of 5 - industrial 2 of 5)
    //    int25 (interleaved 2 of 5)
    //    msi
    //    datamatrix (ASCII + extended)
</script>

</html>



프론트에서 처리 가능하는 방법으로 
바코드 사용시 가장 추천하는 방법이다. 



+고코더 추천강의



+폰트를 등록해 바코드로 만들어 보세요.
-> http://gocoder.tistory.com/84



+jQuery로 QRcode를 만들어보세요.
-> http://gocoder.tistory.com/86






마무리


javascript가 이제 모든걸 대체 할 것 입니다.





댓글을 달아 주세요

  • 질문매니아 2017.12.01 14:59  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.
    게시글 너무 잘읽었습니다.
    하나 궁금한점이 생겨 댓글 남깁니다.
    제가 위에 올리신 소스를 사용하여 바코드 생성 후 스캐너로 읽으면 앞뒤에 A라는 글자가 붙던데
    이것을 지울 방법을 소스를 봐도 잘 모르겠네요...

    혹시 도움이 주실 수 있다면 너무 감사하겠습니다.^^

    • Favicon of https://gocoder.tistory.com 고코더 2017.12.01 15:13 신고  댓글주소  수정/삭제

      안녕하세요 개발자님^^
      문의하신 내용으로 검수 한 결과
      제가 올린 예제에 A가 붙을 수 없습니다.codabar는 숫자만 바코드를 표출하거든요 ㅠ

      제 예제에서
      A가 붙을수 있는 바코드 타입은
      code39 (code 39)
      code93 (code 93)
      code128 (code 128)
      이렇습니다.

      혹시 갖고 계신 리더기가 지원하는 코드 체계와 현재 개발하신 바코드 타입이 상이한건 아니신지 궁금하네요^^
      제가 주석으로 처리한 타입으로
      읽혀 보시면서 테스트 해보세요!

  • 질문매니아 2017.12.01 15:40  댓글주소  수정/삭제  댓글쓰기

    codabar는 어떤한 문제인지.. 계속 해서 A가 붙길래 다른 타입으로 변경하여 사용합니다.
    친절한 답변 너무 감사합니다.

    2017년 마무리 잘하세요^^