자바스크립트 트리거를 활용해 셀렉트박스 선택 값 변경


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



자바스크립트로 프론트를 개발할때 특정 조건에 맞쳐 셀렉트 박스를 변경해야 하는 경우가 있습니다.
이때 사용자 대신 셀렉트 박스를 변경하고 싶다면 트리거를 사용하면 됩니다. 

 1.우선 아래 예제를 함께 살펴보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function triggerChagne(){
    $("#gocoder").val('g').trigger('change');
}
</script>
</head>
<body>
    <select id="gocoder">
        <option value="">셀렉트박스 선택</option>
        <option value="g">Go</option>
        <option value="c">Coder</option>
     </select>
</body>
</html>
cs

 1.해당 파일을 실행하면 화면과 같은 모습이 보입니다. 버튼을 클릭하면

 2.왼쪽 select box 가 변경 됩니다. 
$("#gocoder").val('g').trigger('change');
이 명령어가 해당 value 값을 가진 박스로 선택해주기 때문입니다.
트리거를 활용하면 chage 이벤트로 바인딩 됩니다.


마무리


트리거만 잘사용해도 편합니다.











댓글을 달아 주세요


슬라이드 쇼 애니메이션 가장 쉽게 구현 가능한 플러그인 


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


슬라드 쇼를 하는 기능에 플러그인은 참 많습니다.
많은 개발자들이 저마다에 방식으로
만들어 놓았습니다.


 1. 그런데 이번에 소개할 슬라이드 쇼 HTML은
가장 간단하게 구현 가능한 플러그인을 소개해드립니다. 
바로 COIN SLIDER 입니다.


 2. 얼마나 간단한지
제가 예제를 한번 만들어 보았습니다.

아래 코드를 참조해주세요.
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 type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider.js"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider-styles.css" type="text/css" />
 
<script type="text/javascript">
    $(document).ready(function() {
        coinslider({width:260,height:146,navigation:true,hoverPause:true,delay:1500,effect:'rain',sDelay:30});
    });
 
</script>
 
<Body>
 
<div id='coin-slider' >
    <a href="이미지 링크" target="_blank">
        <img src='이미지 주소' >
        <span>
        
        </span>
    </a>
    <a href="이미지링크" target="_blank">
        <img src='이미지 주소' >
        <span>
        
        </span>
    </a>
</div>
</body>
cs

 3. 이렇게만 하면 퀄리티 높은 슬라이드 애니메이션 
HTML이 완성 됩니다.
결과물은 제 블로그 오른쪽 아래에
파워블로거 활동이 슬라이드가 자동으로 되는데요
이 플러그인을 활용여 개발하였습니다.



 4. 그리고 해당 플러그인 안에 넣을수 있는
옵션 사항으로는 
아래를 참조해주세요.
$.fn.coinslider.defaults = {
    width: 565, // width of slider panel
    height: 290, // height of slider panel
    spw: 7, // squares per width
    sph: 5, // squares per height
    delay: 3000, // delay between images in ms
    sDelay: 30, // delay beetwen squares in ms
    opacity: 0.7, // opacity of title and navigation
    titleSpeed: 500, // speed of title appereance in ms
    effect: '', // random, swirl, rain, straight
    links : true, // show images as links
    hoverPause: true, // pause on hover
    prevText: 'prev',
    nextText: 'next',
    navigation: true, // show/hide prev, next and buttons
    showNavigationPrevNext: true,
    showNavigationButtons: true,
    navigationPrevNextAlwaysShown: false
};


마무리


블로그에 쓰기 딱 좋은 슬라이드 html 플러그인 


댓글을 달아 주세요


javascript location.href,  location.replace 가장 큰 차이


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



 1. 가장 큰 차이점은 뒤로 가기시에 페이지 기억 여부 입니다. 

 2. 해당 기능을 표로 만들어 비교 해보았습니다.
 함수명
location.href
location.replace 
 기능
페이지로 이동
페이지 변경
뒤로가기
가능
불가능
 사용방법
location.href='gocoder.php' 
location.replace('gocoder.php') 
 

 3보통 다시 돌아가면 안되는 페이지 
로그인 후라던가 프로세스를 로직을 완료한 후에는
replace로 페이지를 사용합니다.
저는 홈페이지 아래 링크에서 replace를 사용하였습니다.

 4. 기본적인 페이지 이동은 href를 사용 합니다.


마무리


replace를 잘 사용하면 오류가 없습니다. 




댓글을 달아 주세요


console style 글짜 변경하기


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


 1. 티스토리를 접속하고
콘솔창을 확인하면 
이렇게 티스토리 시그니쳐 텍스트가 찍혀있습니다.


 2. 이건 console.log에 스타일을 입힐 수 있기 때문입니다. 아래 코드를 콘솔창에서 실행 해보세요.
1
2
3
4
console.log(
    '%cGocoder IT Express'
    'color:red; font-size:25px; background:black'
);

cs

 3. 실행화면 



 4. 사용 방법은 간단합니다. 
첫번째 인자에 %c를 입력하고 글자를 입력하면 됩니다. 
console.log('%c[글자입력]')
ex)%cGocoder IT Express

 6. 그리고 두번째 인자에 스타일을 입력하면 됩니다.
console.log('%c[글자입력]','스타일 CSS 입력')
ex)color:#3E71B3; font-size:50px; background:black


마무리


나만에 콘솔로그로 홈페이지에
시그니처를 표시해보세요.


댓글을 달아 주세요


디자인 요소의 크기 변경


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


jQuery에서는 선택한 요소의 크기의 값을 알거나
변화 시킬 수 있습니다. 

1. 바로 width()와 height() 메서드 입니다.
width() - 선택요소의 가로 크기를 가져오거나 변경한다.
height() - 선택요소의 세로 크기를 가져오거나 변경한다.

style 속성에 접근하지 않아도
간단한 명령어로 크기를 조절 가능 합니다. 

 2. 예제를 한번 살펴보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
 
      $(document).ready( function() {
        //해당 DIV 사이즈 조정
        $('#gocoder_size').width('300');
        $('#gocoder_size').height('300');
 
        alert($('#gocoder_size').width());
        alert($('#gocoder_size').height());
      });
 
    </script>
</head>
<body>
    <div id="gocoder_size" style="height:50px; width:50px;background-color: #000000">
    
    </div>
</body>
</html>
cs

gocoder_size.html



 3. 가로 세로 50px 크기를 
300PX로 바꾸고 해당 크기를 경고창으로 보여줍니다. 


아래 코드는 사이즈를 변경 시켰고
$('#gocoder_size').width('300');

아래 코드는 사이즈 정보를 가져왔습니다.
$('#gocoder_size').width();

 4. 실무에서 자주 사용하는 기능입니다.
저는 제 홈페이지 전자책 뷰어를 만들면서
전자책 디바이스의 해상도에 따라
뷰어 크기를 조정할 수 있게 하기 위해 사용하였습니다.



마무리


jQuery 사랑함






댓글을 달아 주세요


몇 초후에 한번 실행 , 초 마다 반복 실행


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


제 홈페이지 고코더넷(http://gocoder.net)에 
학생분이 질문을 남기셔서
열코딩 하다 강의 작성 모드로 스위치를 바꿨습니다.

문의한 사항은 이렇습니다.


요즘 학생분들이 코딩 많이 하시네요.
(덕분에 선생님 소리도 들어보네요)
좋은 현상입니다.



차이점 이론


1. setTimeout()
이 메서드는 
    일정 시간 후에 함수를 한번! 
실행합니다.

setTimeout(function(){alert('gocoder.net')}, 1000); // 1초 후에 스크립트 실행


 2. setInterval()
이 메서드는
    해당 시간마다 반복해서 함수를 
실행합니다.

setInterval(function(){alert('반복 gocoder.net')}, 1000); // 1초 후에 스크립트 실행



예제로 실행해봐요


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
    <script type="text/javascript">
        var cnt = 0;
        setTimeout(function(){
            cnt = cnt + 1;
            alert('setTimeout gocoder.net ('+cnt+')');
        }, 500)
 
        setInterval(function(){
            cnt = cnt + 1;
            alert('setInterval gocoder.net ('+cnt+')');
        }, 1000)
    </script>
</head>
</html>
cs
처음에 나타나는 경고문은 0.5초만엨
setTimeout 을 이용해 한번 실행 되고


이후에 영원히 이 경고창이 실행 됩니다



마무리


학원에서 배우시고 계신 이 두 메서드는
실무에서도 정말 많이 사용 하고
유용한 기능 입니다. 


댓글을 달아 주세요


제이쿼리 이미지 드래그 드랍, 사이즈 조절


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


jQuery UI를 쓸때 가장 많이 활용하게 되는
기능이 두가지가 있습니다.
바로 이미지 드래그와 리사이징 입니다. 

레이어 팝업을 만들거나
사용자에게 크기를 조절하게 
편의를 제공 하는 기능은 많이 씁니다.

그래서 이번 시간에
제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다.

1. 아래 소스를 웹사이트에서 실행해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderImg1').resizable();        
            $('#GoCoderImg2').draggable();        
        });
    </script>
</head>
<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg1">
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg2">
</body>
</html>
cs

gocoder_resizable_draggable.html


 2. 하나는 사이즈 조절이 가능하고
다른 하나는 드래그 드랍으로 이동이 가능 합니다. 



마무리


jQuery 덕분에 많은게 가능해졌네요


댓글을 달아 주세요


Div 반짝 거리게 하기 


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


Div안에는 많은 것들을 담습니다.
사이트는 강조해야 할 Div가 존재하게 됩니다.

1. 얼마전에 만든 제가 만든 QR코드 만들기 사이트에
접속시에 해당 네모 DIV안에 이미지가 나타난다고 
알려주고 싶더군요


그래서 알아본 결과
jQuery UI에 제공하는 간단하고
강력력한 기능인 effect를 사용하는 방법이 있습니다.


 2. 아래에 코드를 웹에서 실행해보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderDiv').effect("highlight"1000);        
        });
    </script>
</head>
<body>
 
        <div id="GoCoderDiv">
            DIV 강조
        </div>
 
</body>
</html>
cs

 3. 아래처럼 Div가 강조되고 효과가 사라집니다.



마무리


사용자를 위한 개발자 배려


댓글을 달아 주세요


safari click <html> <body>에 되지 않네요


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


브라우저는 제조사 마다 
웹사이트를 분석하는 각자의 특징을 가지고 있습니다. 

개발시에 크로스브라우징을 체크하지 않으면
클레임에 걸리게 됩니다.

최근에 모니터 불량화소 체크 사이트를 만들면서
(monitor.gocoder.net)특이한 케이스를 발견했습니다.
상식이었는데 제가 모르던 사실일 수도 있지만 

▼ 아래 소스를 우선 확인해보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html >
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $('html').on('click'function(){
        alert('사파리에서 안됨');
    });
    $('body').on('click'function(){
        alert('사파리에서 안됨');
    });
 
    $('body > div').on('click'function(){
        alert('사파리에서 가능');
    });
    
</script>
</head>
<body>
<div>
 
</div>
</body>
</html>
cs


▼ 해당 태그에 클릭을 바인딩 할일은 특수한 경우 아니면
쓸일이 없지만 처럼 click을 사용할 경우에는
사파리에서만 작동이 되지 않습니다.
아이폰 그리고 아이패드 유저에게 되지가 않습니다.

$('html').on('click', function(){
$('body').on('click', function(){

▼ 해당 태그에 클릭을 바인딩 할일은 특수한 경우 아니면
쓸일이 없지만 처럼 click을 사용할 경우에는
사파리에서만 작동이 되지 않습니다.
$('body > div').on('click', function(){


마무리


html에 클릭 이벤트를 넣는게 표준이 아닌가 보네요



댓글을 달아 주세요



오른쪽 화면 위에 나타나는 javascript 네모난 팝업 레이어 박스 


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


예전에 팝업 하면 무조건
window.open 을 통한 브라우저 자체 내장객체를 사용했습니다.
그런데 요즘은
반응형 이슈와 스마트폰에서 팝업을 무조건 막는 정책때메
레이어 팝업을 많이 사용 합니다.

이 layer 팝업중 가장 깔끔한 플러그인을 소개 해드릴려고 합니다.

▼직영하면  j 으르렁 대다 인가 ㅎㅎ

▼ 고코더 방문자와 구독자를 위해
직접 간단하게 코드를 작성했습니다.
그대로 HTML을 실행하면 화면이 실행 됩니다.

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
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
<script type="text/javascript">
$.jGrowl("간단한 팝업,
고코더넷(gocoder.net),
IT익스프레스 (gocoder.tistory.com)", {
    life:1000,    //공지가 떠있는 시간 1000가 1초
    click: function(msg) {    //클릭시 이벤트를 만들 수 있다.
        alert("클릭시 이벤트");    
    },
    beforeOpen: function(e,m,o) {
        console.log("팝업창이 열리기 전", this);
    },
    open: function(e,m,o) {
        console.log("열렸을때", this);
    },
    beforeClose: function(e,m,o) {
        console.log("닫히기 전에", this);
    },
    closefunction(e,m,o) {
        console.log("닫혔을때", this);
    },
    animateOpen: {    //열렸을때 애니메이션
        height: "show",
        width: "show"
    },
    animateClose: {    //닫힐때 애니메이션
        height: "hide",
        width: "show"
    }
});
</script>
cs
▼ 결과 모습입니다.
요즘 홈페이지에서 유행처럼 쓰는 플러그인 입니다. 



▼ 해당 3개의 참조와
1
2
3
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.css"/>
cs
▼ 이 스크립트 한줄만 필요 합니다. 
$.jGrowl("간단한 팝업,고코더넷(gocoder.net),IT익스프레스 (gocoder.tistory.com)");

사용법도 간단하고 기능이 안정적입니다.


마무리


홈페이지의 공통으로 사용하는
팝업이 필요하면 이게 딱이네요




댓글을 달아 주세요