자바스크립트 리터럴 문자는 어떤 따옴표로?


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


 1. 자바스크립트 소스를 보면 문자열을 감싸는 따옴표가 저마다 조금 다른 경우가 있습니다. 
1
2
var a = "문자"
var b = '문자'
cs

 2. 자바(java)에서는 리터럴 문자 즉 한글자 문자열은 작은 따옴표를 사용합니다.
긴 문자열에 작은따옴표를 사용하면 오류가 납니다.

1
2
3
char c = 'g';
String s = "gocoder";
 
cs

 3그리고 반대로 SQL에서는 문자열을 큰 따옴표로 사용하게 되면 오류가 납니다.
1
WHERE gocoder = 'IT';
cs

 4그래서 저마다 의견이 갈리는 경우가 있습니다. 프로시저 개발자들에겐
큰 따옴표로 문자열을 처리한다는게 어색하고 자바 개발자는 반대로
작은 따옴표로 문자열을 감싼다는게 이해 불가입니다.


 5결론적으로 

두개 모두 오류가 나지 않습니다. 그리고 두 가지 사용 가능한 표준이란 겁니다.
그렇다면 다시 말해서 어떤걸 사용해야 한다고 묻는 다면 정답은
규칙을 정하세요! 라고 말씀드리고 싶습니다.
회사에 코딩 규칙을 정할때 보통 자바스크립트 따옴표를 정합니다.
그리고 대부분 작은 따옴효 홀따옴표를 사용하도록 만드는게 대부분입니다.

 6구글에서 정리한 스타일 가이드에 보시면 문자열을 작은 따옴표 홀따옴표로 감싼걸 확인할 수 있습니다.
물런 구글이 만사는 아니지만 그래도 지구에서 가장 IT를 잘하는 회사가 하는걸 따라 하는걸 선택했습니다.


하지만 회사에 규칙에 따라 한가지만 사용하는게 중요합니다.


마무리


Q. 고코더님 그래서 뭘 사용하라고요?
A. 그냥 작은 따옴표 어떠세요?


댓글을 달아 주세요


getTime으로 표현한 데이터 15자리는 무슨 의미?


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


자바스크립트에서 getTime()은 자주 사용하는 함수 입니다. 시간이 1/1000 까지 나타내주므로 페이지에 로딩 시간을 체크할 수도 있고 채팅에서는 아주 좋은 시간 값으로 사용이 가능합니다.


 1. 그런데 숫자 모양이 조금 이상하게 느껴질 수 있습니다. 현재 getTime 을 가져오면 이와 같은 값이 나타납니다. 
1574663052422


 2. 이건 1970.01.01 이후 부터 경과한 시간을 milliseconds 단위 그러니깐 1/1000단위로 표현된 숫자 표현입니다.  그래서 반대로 1970년대 이전으로 날짜로 하고 계산을 하면 이렇게 마이너스 값을 확인 가능합니다.
-315619200000


 3. 결론은 1970년 1월 1일부터 얼마나 시간이 흐른 초를 1/1000으로 나눈 밀리세컨드 단위로 표현합니다.


마무리


왜 1970년이 기준일까요?


댓글을 달아 주세요



자바스크립트란?


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



자바스크립트는 넷스케이프 커뮤니케이션즈 코퍼레이션사에 브래던 아이크가 개발한 객체기반의 스크립트 언어 입니다. 
HTML과 CSS로 만들어진 정적인 화면을 동적으로 변경해주는 언어입니다. 페이지에 컨텐츠를 변경하거나 이미지를 움직이게 하거나 그리기도 할 수 있습니다. 그 밖에도 동적인 모든것을 이벤트를 주어 사용할 수 있게 합니다.


자바스크립트의 특징은 이렇습니다.


1. 상속과 클래스 개념이 없는 객체 기반의 언어이다
2. 인터프리터 언어로 브라우저에 의해 해석 가능하다.
3. HTML 문서 안에 기술 가능하고 함께 수행한다.
4. 클라이언트 자원을 활용할 수 있게 한다. 



자바스크립트의 구성



1. 객체
    - 사용자 정의 객체, 내장 객체, 브라우저 객체를 사용할 수 있습니다.
2. 문법
    - 자료형, 변수, 제어문, 함수등에 문법등을 사용 가능합니다.
3. 에빈트와 핸들러
    - 동적인 이벤트를 자바스크립트로 수행합니다. 이 핸들러를 통해 상호작용 있는 페이지를 생성 할 수 있습니다.



개발자들에게 자바스크립트란?



JAVA, 닷넷, PHP 어떤 서버 사이드 언어를 해도 자바스크립트는 기본으로 사용하게 되어 있습니다. 프론트에게 보여줄 뷰 페이지는 HTML 과 자바스크립트로 이루어져 있기 때문입니다. 그래서 많은 분들에게 이 언어는 친숙하고 사용가능합니다. 노드JS가 발표되었을때 주목되었던 부분도 자바스크립트 문법을 이용해서 프론트와 백엔드까지 개발 가능하기 때문입니다. 새로운 언어를 배우기 위한 습득 과정은 없어지기 때문에 접근성이 뛰어납니다. 


자바스크립트는 아주 잘할 필요가 있습니다.


가장 최근에 나오게 될 라이언달에 새로운 언어 Deno도 역시 자바스크립트 언어를 기반으로 작성가능합니다. 그리고 자바스크립트를 이용해 화면을 개발하는 프론트 개발자가 각광받고 있는 시대 입니다. 
언어가 변하고 새로운 프레임워크가 등장해도 자바스크립트는 어느곳에든 어떻게든 쓰이게 되어 있습니다. 
가끔 서버언어는 잘 다루지만 자바스크립트는 기초수준에 중급 개발자분들도 보일때가 있습니다. 자바스크립트를 연습해 포트폴리오를 완성해보는걸 추천 드립니다.



마무리


해도 해도 어려운.. 스크립트


댓글을 달아 주세요


array 에 데이터를 추가 하는 방법


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



자바스크립트에서 배열은 매우 중요합니다. 특히 데이터를 배열에 추가하여 다시 사용하는건 프론트엔드 개발의 기본입니다. 그래서 오늘은 배열에 값을 넣는 대표적인 2가지 방법인 push()와 unshift()를 배워보겠습니다.



 1. push() : 배열 뒤에 값을 입력한다.


push()는 배열 뒤에 값을 입력하는 대표적인 배열에 값을 추가하는 방법입니다.
배열을 선언하고 해당 배열에 push로 데이터를 넣는 방식입니다. 뒤로 순차적으로 데이터가
쌓이기에 백엔드에서 전달해주는 데이터 그대로를 담을 수 있습니다. 
1
2
3
4
5
6
    jvar arryData = [];    //배열을 선언
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
cs

푸시한 데이터는 순차적으로 배열에 입력 됩니다.


 2. unshift() : 배열 맨 앞에 데이터를 담기


실무에서 자주 쓰는 함수입니다. 순차적으로 담긴 데이터 맨 앞 배열에 해당 데이터를 입력합니다.  
예제를 보시면 먼저 담긴 홈페이지 주소보다 이름 주소가 먼저 나타납니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
    var arryData = [];    //배열을 선언
 
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
 
    arry = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(arry);    //배열을 unshift 맨 앞에 넣는다
cs
배열에 맨 앞으로 데이터를 보냅니다.



 3. 종합 예제


두개의 함수를 이용해 예제를 실행해봅니다.
이해하기 어렵지 않으니 눈으로 한번 학습하시길 바랍니다.
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
<html>
<head>
<script type="text/javascript">
var arryData = [];    //배열을 선언
 
    node = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
 
    node = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(node);    //배열을 unshift 맨 앞에 넣는다
 
 
    node = {
        "name"    :    'gc',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
    for (var i = 0; i < arryData.length; i++) {
        document.write(arryData[i].name);
        document.write(' , ');
        document.write(arryData[i].url);
        document.write('<br>');
    }
</script>
</head>
 
</html>
cs

결과 값은 이렇게 노출 됩니다. 



마무리


push() 할 데이터 점점 많네~



댓글을 달아 주세요


자바스크립트로 문자 뒤에서부터 제거하기


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



 1. 프론트엔드 개발을 하다보면 꼭 끝에 한 글자가 문제입니다.
이 글자를 짤라내려면 많이 사용하는 방법은 이렇게 하셨을텐데요

1. 문자열 길이를 잰다
2. -1를 한다
3. -1한 길이만큼 가져온다


 2. 그 보다 더 쉬운 방법이 있습니다. 내장 객체인 배열을 다루는 slice()를 이용하는 방법입니다. 
    var text = "http://gocoder.net/";
    textSlice = text.slice(0,-1);
    // http://gocoder.net 

 3. 예제 소스로 다시 한번 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<script type="text/javascript">
    var text = "http://gocoder.net/";
    textSlice = text.slice(0,-1);
    document.write(text);
    document.write("<br>");
    document.write(textSlice);
</script>
</head>
</html>
cs
 4. 화면처럼 끝에 한자리만 짤라서 사용가능합니다. 
물런 두번째 인자에 -2를 하면 두 글자를 제거 가능합니다. 


마무리


괜히 길게 코딩 했었네요.



댓글을 달아 주세요


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


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


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


 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를 잘 사용하면 오류가 없습니다. 




댓글을 달아 주세요


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가 강조되고 효과가 사라집니다.



마무리


사용자를 위한 개발자 배려


댓글을 달아 주세요



오른쪽 화면 위에 나타나는 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)");

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


마무리


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




댓글을 달아 주세요


프론트에서 더블클릭 되면 안되는 버튼이 있을 때


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


프론트에서 가끔 두번 클릭되면 안되는 기능 버튼이 있습니다.
물런 이런 유효성 체크는 서버사이드 언어나 
백엔드에서 처리해야 하는게 정석이지만

프론트 개발자라면
UI에서도 기본적인 실수 방지 정도는 해줘야겠지요.

사실 버튼을 두번 클릭하지 못하게 하는 방법은 많지만
오늘은 간단하게 onclick 에 넣어 처리할 수 있는 방법을 소개하려고 합니다.


▼ 우선 제가 작성한 예제 소스를 보겠습니다. 
1
2
3
4
5
6
7
8
<html>
<body>    
                                                   
    <input id="gocoder" type="button" onClick="this.disabled=true;" value="더블클릭 방지">  
    <input id="gocoder" type="image" src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" onClick="this.style.visibility='hidden';">  
 
</body>
</html>
cs


개발자가 아니어도 원리는 금방 눈치 채셨을텐데요.
input 타입이 button일 경우 disabled 를 만들고
이미지 버튼일 경우에는 visibility를 이용해 다시 클릭하지 못하게
이미지를 가려버리는 방식 입니다.

▼ button일 경우 버튼을 불능화 처리
this.disabled=true;

▼ 이미지일 경우 히든 처리 
this.style.visibility='hidden';



마무리


프론트는 어떤식으로든 두번 전송이 가능하므로 
서버 언어 쪽에서 백엔드에서 처리 해줘야 합니다.


댓글을 달아 주세요