■ 부모 기본 onload 설정
window.onload = function(){
        window.addEventListener('message', function(e) {
            console.log("parent message");
            console.log(e.data);
            console.log("e.origin : " +e.origin);
            
            if(e.data.childData === ' test data'){
                alert("iframe in data");
            }
        });
        
    }

■ 부모에서 iframe 메세지 전송
  var iframe = document.getElementById('child_iframe').contentWindow;
    iframe.postMessage({parentData : 'test parent data'}, "*");
        


■ 자식 기본 onload 설정
window.onload = function(){
        window.addEventListener('message', function(e) {
            console.log("child message");
            console.log(e.data);
            console.log("e.origin : " +e.origin);
            
            if(e.data.parentData === ' test parent data'){
                alert("parent in data");
            }
        });        
        
    }


■ 자식 iframe 에서 부모창으로 메세지 전송
  var iframe = document.getElementById('child_iframe').contentWindow;
    iframe.postMessage({parentData : 'test parent data'}, "*");
        
window.parent.postMessage({childData : 'test data'}, "*");
        

Web 에서 앱 설치 여부를 확인 하자

• 시나리오는 페이지가 안보이면 document.webkitHidden 과 document.hidden 으로 확인이 가능하다.
• https://developer.mozilla.org/ko/docs/Web/API/PageVisibilityAPI
• 2개인 이유는 정식 스크립트 등록으로 인해서라고 풍문으로 들었습니다.
• 하지만 문제점은 매우 많습니다. 구현 내용을 보면 알 수 있습니다. 왜 문제가 많은지
  • https://devtalk.kakao.com/t/topic/20684/3

1. 내용

• 인터벌 함수를 이용해서 hidden 을 계속 확인한다.
• 타임아웃 함수를 이용해서 특정시간이 되면 앱이 설치 안되어있다고 판단한다.

2. 문제

• 단순참고용 정도로 사용하면 좋을거 같습니다.
• 많이 테스트 안해보았습니다.
• document.webkitHidden || document.hidden 를 이용해서 설치 여부를 확인 하는 방법 입니다.
• 크롬에서 지원하는 intent 방식을 사용하면 항상 마켓이 실행되서 체크하기 어려우니 꼭 커스텀 스킴으로 테스트 해야 합니다.

3. 코드

var appSchem = 'mayapp://launch?Data=abcdefg';


isMyApp();

location.href = appSchem;

function isMyApp() {
    function clearTimers() {
        clearInterval(heartbeat);
        clearTimeout(timer);
    }

    function intervalHeartbeat() {
        if (document.webkitHidden || document.hidden) {
            clearTimers();
            console.log('앱이 설치 되어 있습니다.');
        }
    }
    heartbeat = setInterval(intervalHeartbeat, 200);
    var deLay = 1000;
    timer = setTimeout(function() {
        console.log('앱이 없습니다.');
    }, deLay);
  }
}

출처 : https://pyeongho.github.io/app_check

alert(   Object.getOwnPropertyNames(오브젝트 변수)   ) ;

console.log(   Object.getOwnPropertyNames(오브젝트 변수)   ) ;

간단하게 정리한거

달력.zip

참조.html

출처 : http://todduf.blogspot.kr/2014/06/jquery-datepicker.html

출처 : http://www.hyungjun.kr/227

참고 : http://taegon.kim/archives/3937

-> http://blog.naver.com/pureb612b?Redirect=Log&logNo=220597602756 

정규식(혹은 정규표현식)에 대한 문서들 정리

정규식(혹은 정규표현식)에 대해서 자료를 찾다가 괜찮은 문서들이 있길래 정리해봅니다. 1. IBM DeveloperWorks의 Special Issue중에서 초...

www.hyungjun.kr

정규식(혹은 정규표현식)에 대해서 자료를 찾다가 괜찮은 문서들이 있길래 정리해봅니다.

아래는 [카알의 적당한 인생 이야기]의 내용을 정리한 것입니다.

출처: http://www.nextree.co.kr/p4327/

 -> http://blog.naver.com/pureb612b?Redirect=Log&logNo=220597602756

날이 갈수록 개인정보 보호에 관련하여 보안정책을 점진적으로 강화하고 있습니다. 이에 따라 Web에서 회원가입 시 Password 설정을 복잡해진 보안정책에 맞추다 보니 복잡하게 조합해야만 정상적으로 가입을 할 수 있습니다. 이러한 강화된 보안정책 때문에 기존에 사용하던 자신만의 Password를 인위적으로 보안정책에 맞추는 경우가 많을 것입니다. 그러다 보니, 종종 Log-In을 할 때 Password를 잊어버려서 곤란한 상황이 발생하는 경우도 한번쯤은 있었을 것입니다. 일반적으로 이렇게 복잡한 조건이 필요한 경우 사용자에게 입력을 받을 때 여러 가지 조건을 주면서 정해진 규칙 안에서만 입력을 하도록 유도를 하고 있습니다. 이번 프로젝트를 진행하면서 사용자가 입력하여 DB에 형식에 맞도록 저장하기 위해 조건을 주는 부분이 있었는데, 간단하게 해결 하기 위해 정규표현식(Regular Expression)을 사용하였습니다. 이 글에서는 정규표현식을 실제로 사용하면서 필요한 정보들을 초보 개발자의 관점에서 해석하고 실제로 사용하는 과정을 담았습니다.

- 정규표현식이란?

정규표현식의 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어입니다. 주로 Programming Language나 Text Editor 등 에서 문자열의 검색과 치환을 위한 용도로 쓰이고 있습니다. 입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 다소 복잡할 수도 있지만, 정규표현식을 이용하면 매우 간단하게 표현 할 수 있습니다. 하지만 코드가 간단한 만큼 가독성이 떨어져서 표현식을 숙지하지 않으면 이해하기 힘들다는 문제점이 있습니다.

Regular Expression UML

- 정규표현식 표현방법

정규표현식은 표준인 POSIX의 정규표현식과 POSIX 정규표현식에서 확장된 Perl방식의 PCRE가 대표적이며, 이외에도 수많은 정규표현식이 존재하며 정규표현식 간에는 약간의 차이점이 있으나 거의 비슷합니다. 정규표현식에서 사용하는 기호를 Meta문자라고 합니다. Meta문자는 표현식 내부에서 특정한 의미를 갖는 문자를 말하며, 공통적인 기본 Meta문자의 종류로는 다음과 같습니다.

Meta 문자중에 독특한 성질을 지니고 있는 문자클래스’[ ]‘라는 문자가 있습니다. 문자클래스는 그 내부에 해당하는 문자열의 범위 중 한 문자만 선택한다는 의미이며, 문자클래스 내부에서는 Meta문자를 사용할 수 없거나 의미가 다르게 사용됩니다.

POSIX에서만 사용하는 문자클래스가 있는데, 단축키처럼 편리하게 사용할 수 있습니다. 대표적인 POSIX 문자클래스는 다음과 같으며 대괄호’[ ]‘ 가 붙어있는 모양 자체가 표현식이므로 실제로 문자클래스로 사용할 때에는 대괄호를 씌워서 사용해야만 정상적인 결과를 얻을 수 있습니다.

이밖에도 [:cntrl:] : 아스키 제어문자(0~31번, 127번), [:print:] : 출력 가능한 모든 문자, [:xdigit:] : 모든 16진수 숫자 등이 있습니다.

정규표현식을 실제로 사용할 때 언어마다 사용방법이 각각 다릅니다. 진행했던 프로젝트에서는 정규표현식을 JavaScript에서 사용했는데, JavaScript에서 사용하는 방법에 대해서 설명 하겠습니다. 사용하는 JavaScript 버전이 1.1이하 버전일 경우에는 정규표현식을 사용할 수 없습니다. 정규표현식을 사용하는 방법으로는 두 가지가 방법이 존재하며, 첫 번째로는 ‘RegExp’객체를 이용하는 방법이 있습니다. 주로 정규표현식이 자주 변경되는 경우 사용합니다.

두 번째로는 객체초기화(Object Initializer)를 사용하는 방법입니다. 주로 입력된 표현식이 거의 바뀌지 않는 상수 형태의 표현식을 사용할 때 사용합니다.

- Flag의 종류

자주 사용하는 Flag는 밑의 3종류가 있으며 Flag를 사용을 하지 않을 수도 있습니다. 만약 Flag를 설정 하지 않을 경우에는 문자열 내에서 검색대상이 많더라도 한번만 찾고 끝나게 됩니다.

이 외에도 공백을 무시하고 주석을 허용하는 x, 개행문자도 포함해서 찾는 s 등 다양한 Flag들이 있습니다.

- 정규표현식 실제 적용

사용자로부터 값을 입력 받는 부분에서 유효성 체크를 하기 위해 정규표현식을 간단하게 적용한 경우가 있었습니다. 먼저 입력 받은 값은 반드시 한글이 포함되지 않도록 유효성 체크를 하는 부분이 있었습니다. 사용자가 입력한 데이터 중에서 유효하지 않는 데이터를 정규표현식을 이용하여 검색한 뒤 Return하는 방법을 사용하였습니다.

다음으로는 8자리 이하 정수로 이루어진 x, y 좌표를 사용자로부터 입력 받는 경우가 있었습니다. 사용자가 조건에 충족하지 않은 값을 입력할 경우 DB에 적재 할 때나 좌표를 활용할 때 문제가 발생할 수 있기 때문에 유효성 체크가 필요했습니다. 사용자가 값을 입력할 때마다 유효한 값인지 체크를 하고, 잘못된 값을 입력하면 그 값은 Null로 치환을 하는 방법을 사용했습니다. 사용자 입장에서는 유효하지 않은 값을 입력하면 값을 입력하는 순간 아무런 동작을 하지 않은 것처럼 보입니다.

정규표현식으로 조건을 구현하니 매우 간단하게 해결하였습니다. 이 밖에도 Email Check, File 확장자 Check, 주민등록번호 Check, 문자열 공백제거, 문자열 첫 글자 대문자로 치환 등등 정규표현식을 이용하여 다양한 형태의 유효성검사를 구현할 수 있습니다. 정규표현식을 구현하면서 유용한 Utility들이 있습니다. 물론 이러한 Utility들은 Web에서 다양하게 찾아 볼 수 있지만 프로젝트를 진행하면서 유용하게 사용했던 Utility두가지에 대해서 간단하게 소개하도록 하겠습니다. 먼저 사용자가 정규표현식을 작셩하고 직접 원하는 문자열을 Test 할 수도 있고, quality 높은 표현식을 구현하는데 도움을 주는 Utility입니다. 정규표현식에 대해서 지식이 부족한 사용자도 우측의 정규식 표현 Sample과 그에 대한 설명이 자세하게 나와있어서 쉽게 구현할 수 있습니다. 프로그램을 다운받지 않고 Web에서 직접 실행하므로 별다른 설치 없이도 즉시 사용할 수 있는 편리성이 있습니다. 하지만 Web에서 실행하므로 Off-Line에서는 지원이 안되며, 프로그램 내부에서 전체적으로 Font Size가 작다는 단점이 있습니다.

http://gskinner.com/RegExr/

두번째 Utility는 표현식을 쉽게 이해할 수 있도록 도식화 하는 Utility입니다. 앞에서 정규표현식 표현방법을 소개 할 때 쉽게 이해할 수 있도록 도식으로 처리한 부분도 이 Utility를 이용하여 직접 구현하였습니다. 이 Utility는 표현식을 구현하기 보다는 복잡한 표현식을 해석하고 이해하는 목적이 가장 알맞다고 생각합니다. 프로젝트를 진행하면서 직접 구현한 표현식이 도식으로 목적에 맞게 구현 되는지 Test 할 수 있습니다. 정규표현식에 대해 어느 정도 지식을 갖추고 있는 사용자들에게 적합하다고 생각합니다. 이 Utility도 앞선 Utility와 마찬가지로 Web에서 별다른 설치 없이 즉시 사용 가능합니다.

http://www.regexper.com/

- 글을 마치며…

정규표현식은 자주 쓰지 않으면 금방 잊게 되는 수학공식과 같은 존재라고 생각합니다. 정규표현식에 대해서는 오래전부터 접해보긴 했지만, 매번 수박 겉 핥기 식의 학습으로 인해 정규표현식을 접할 때마다 새로운 느낌을 받았습니다. 이번에 정규표현식에 대해 글을 쓰는 목적 중에 하나는 회사 블로그에 글을 올리면서 이러한 얕은 지식을 정리하고 내 것으로 만드는 계기가 되도록 하는 마음으로 선택하였습니다. 이번 프로젝트에는 정규표현식을 다양하게 사용하지 못해서 한정된 부분만 구현하였지만, 기본 표현법만 제대로 익히면 JavaScript 이외에 다양한 정규표현식에서도 쉽게 응용할 수 있다고 생각합니다.

- 참조 Site

정규표현식 – wiki백과 : http://ko.wikipedia.org/wiki/정규표현식

정규표현식의 기본 문법 정리표 : http://blog.daum.net/creazier/15309380

정규표현식 사용하기 : http://icoon22.tistory.com/220

정규식이란 무엇인가 : http://twinstarbox.tistory.com/entry/Java-정규식이란-무엇인가

자바스크립트 정규 표현식 : http://yaku.tistory.com/75

Perl 정규표현식, 메타데이타 : http://blog.naver.com/PostView.nhnblogId=turtle1006&logNo=60107758671

- 정규표현식 관련 Utility Site

정규표현식 Test 및 생성 Util -> http://gskinner.com/RegExr/

정규표현식 도식화 표현Util -> http://www.regexper.com/

input 태그에 숫자만을 입력할 수 있도록 하려면¹ 자바 스크립트의 도움이 필요합니다. 구현이 쉬워 보이지만 다양한 웹 브라우저를 고려하다보면 생각보다 까다롭습니다.

1onkeydown 이벤트 핸들러

input 태그에 onkeydown 속성을 추가합니다.

<input type="text" onkeydown="filterNumber(event);">

filterNumber 함수는 다음과 같습니다.

function filterNumber(event) {
  event.preventDefault(); 1
}

1이 어떤 값도 입력할 수 없도록 합니다.

onkeypress 또는 onkeyup 이벤트 핸들러는 사용할 수 없습니다.

그런데 파이어폭스에서는 한글이 입력되는 문제가 있습니다. 이를 해결하려면 input 태그에 ime-mode 스타일을 추가합니다.

<input type="text" style="ime-mode: disabled;" onkeydown="filterNumber(event);">

2입력이 가능한 키 코드 설정하기

현재까지는 어떤 값도 입력할 수 없습니다. 지금부터는 다음 예외 규정을 filterNumber 함수에 반영하겠습니다.

• 숫자

• 점

• 단축키

• 특수 키

숫자 입력 허용

먼저 숫자 입력을 허용합니다. event 객체의 1keyCode 속성으로 사용자가 입력한 키 코드를 알 수 있습니다.

function filterNumber(event) {
  var code = event.keyCode; 1
  if (code > 47 && code < 58) {
    return;
  } 
  event.preventDefault(); 2
}

숫자 0의 키 코드는 48이고, 숫자 9의 키 코드는 57입니다. 따라서 키 코드가 47보다 크고 58보다 작으면 숫자를 입력한 것이기 때문에 2가 호출되지 않도록 반환합니다.

점 입력 허용

정수가 아닌 소숫점도 입력할 수 있도록 점(.)의 입력을 허용합니다.

function filterNumber(event) {
  var code = event.keyCode;
  if (code > 47 && code < 58) {
    return;
  }
  if (code === 110 || code === 190) {
    return;
  }
  event.preventDefault();
}

단축키 입력 허용

값을 입력할 때 다양한 단축키를 사용할 수 있습니다.

Ctrl + A

입력한 값을 선택

Ctrl + Z

실행 취소

Ctrl + Y

다시 실행

이런 단축키를 지원하기 위해 Ctrl 또는 Alt 키가 눌러진 상태라면 입력을 허용합니다.

function filterNumber(event) {
  var code = event.keyCode;
  if (code > 47 && code < 58) {
    return;
  }
  if (code === 110 || code === 190) {
    return;
  }
  if (event.ctrlKey || event.altKey) {
    return;
  }
  event.preventDefault();
}

특수 키 입력 허용

마지막으로 왼쪽(←) 또는 오른쪽(→) 방향키와 같은 특수 키 입력을 허용합니다.

function filterNumber(event) {
  var code = event.keyCode;
  if (code > 47 && code < 58) {
    return;
  }
  if (code === 110 || code === 190) {
    return;
  }
  if (event.ctrlKey || event.altKey) {
    return;
  }
  if (code === 9 || code === 36 || code === 35 || code === 37 ||
      code === 39 || code === 8 || code === 46) {
    return;
  }
  event.preventDefault();
}

주요 특수 키 코드는 다음과 같습니다.

출처 :   https://www.3rabbitz.com/blog_ko/a6068a3f953de9d8/10

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {

_x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

var x = getOffset( document.getElementById('yourElId') ).left;

var x = getOffset( document.getElementById('div_newPrintCount_' + listIdx) ).left;

unicode.html

var value = ' 02 - 1234 - 5678 ';

value = value.replace(/\-/g,''); //특정문자 제거

value = value.replace(/^\s+/,''); //앞의 공백 제거

value = value.replace(/\s+$/,''); //뒤의 공백 제거

value = value.replace(/^\s+|\s+$/g,''); //앞뒤 공백 제거

value = value.replace(/\s/g,''); //문자열 내의 공백 제거

value = value.replace(/\n/g,''); //개행 제거

value = value.replace(/\r/g,''); //엔터 제거

// 0 제거 

var value = '001002003004005006'

var result = value.replace(/[^(1-9)]/gi,"");

[정규식의 gi 설명]
* g : 발생할 모든 pattern에 대한 전역 검색
* i : 대/소문자 구분 안함
* m: 여러 줄 검색 (참고)

/**
*
*  Base64 encode / decode
*  http://www.webtoolkit.info/
*
**/
  
var Base64 = {
  
    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  
    // public method for encoding
    encode : function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
  
        input = Base64._utf8_encode(input);
  
        while (i < input.length) {
  
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
  
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
  
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
  
            output = output +
            this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
            this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
  
        }
  
        return output;
    },
  
    // public method for decoding
    decode : function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;
  
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
  
        while (i < input.length) {
  
            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));
  
            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
  
            output = output + String.fromCharCode(chr1);
  
            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
  
        }
  
        output = Base64._utf8_decode(output);
  
        return output;
  
    },
  
    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
  
        for (var n = 0; n < string.length; n++) {
  
            var c = string.charCodeAt(n);
  
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
  
        }
  
        return utftext;
    },
  
    // private method for UTF-8 decoding
    _utf8_decode : function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
  
        while ( i < utftext.length ) {
  
            c = utftext.charCodeAt(i);
  
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            }
            else if((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i+1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            }
            else {
                c2 = utftext.charCodeAt(i+1);
                c3 = utftext.charCodeAt(i+2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
  
        }
  
        return string;
    }
  
}

function fn_test() {

    for(var i=0, cnt=arguments.length; i < cnt; i++) {

        var arg = arguments[i];

        alert(arg);

    }

}

fn_test('홍길동', '이천원', 100);

jquery CDN  jquery

1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

versions:2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

페이지 로딩후 이벤트  jquery

<script>
    $(document).ready(
        function(){
            alert("로딩 완료");
        }
    );
</script>

<script>
    $(function(){
        alert("심플버전");
    });
</script>

jquery 엘리먼트 선택

-태그
$('tr')
$('div')

-id

$('#id')

-class
$('.class')

-태그.클래스 태그 태그
$('div.class a span')

jquery 필터

필터 : 특정 아이템을 제거하고 필요한 것만 남김

필터 => ":" 로 표시

:even =>  짝수번째 엘리먼트
:odd => 홀수번째 엘리먼트
:first => 첫번째 엘리먼트
:last => 마지막 엘리먼트
:eq => 특정 엘리먼트 선택시

jquery css 프로퍼티 사용

 - css 호출

$('#simple').css('height');
$('#simple').css('width');
$('#simple').css('font-size');

 - css 입력

$('#simple').css('height','300px');
$('#simple').css('width','200px');
$('#simple').css('font-size','12px');
$('#simple').css('background-color','#ff0000');

 - css 다중 입력

$('#simple').css({'height':'300px','width':'200px'});
 

jquery css 클래스 추가/삭제 

$('#simple').addClass('클래스네임');
$('#simple').removeClass('클래스네임');

hide, show, toggle  jquery
 
$('#simple').show();    //보이기
$('#simple').hide();    //숨기기
 

toggle 이용한 보이기,숨기기

$('#simple_btn').click(
    function(){
        if($('#simple').is(':visible')){
            $('#simple').hide();
            //$(this).hide();
        }else{
            $('#simple').show();
            //$(this).show();
        }
    }
);

toggle 이용한 value값 변경
$('#simple_btn').click(
    function(){
        if($('#simple').is(':visible')){
            $('#simple').val("hide");
            //$(this).val("hide");
        }else{
            $('#simple').val("hide");
            //$(this).val("show");
        }
    }
);

jquery 엘리먼트 추가/삭제

 - 형제 노드로 추가할 경우

$('<input type="button" value="추가"  id="btn">').insertAfter('#simple');
$('<input type="button" value="추가"  id="btn">').insertBefore('#simple');

 - 자식 노드로 추가할 경우

$('<strong>시작</strong>').prependTo('#simple');
$('<strong>끝</strong>').appendTo('#simple');

 - 엘리먼트 삭제

$('#simple').remove();

$('#simple').remove(':contains("텍스트")');

jquery 내용 바꾸기

$('span').html("변경");
$('span').innerHTML("변경");
$('span').text("변경");

jquery 부가적인 함수

.slideToggle();

.fadeIn();
.fadeOut();

.mouseover();
.mouseout();

.hover();  - [mouseover, mouseout]

 .end() : 선택식을 한단계 전으로 돌린다.

.filter() : 필터

.prev() : 앞의 형제노드

 
this 선택자  jquery

자기 자신을 호출할때나, 같은 태그가 반복될시

$("span", this).text('추가');
$("span", this).remove().text('삭제');

jquery checkbox 모두선택

if($("#simple_chkbox").attr("checked")){
    $("input[name=chk]:checkbox").attr("checked", true);
}else{
    $("input[name=chk]:checkbox").attr("checked", false);
}
 
 

jquery style 사용
 

$("#simple").attr("style", "display:none");

jquery 기본 css 셀렉터

*        : 모든 엘리먼트와 일치
E        : 태그명이 E인 모든 엘리먼트와 일치
E F      : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F      : E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E+F      : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F      : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F) : 태그명이 F인 자손을 하나 이상 가지고 태그명이 E인 모든 엘리먼트와 일치
E.C      : 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생락은 *.C와 동일함
E#I      : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A]     : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]   : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]  : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]  : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]  : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

jquery 위치 기반 셀렉터  jquery

 - 페이지에서 처음으로 일치하는 엘리먼트
:first

 - 페이지에서 마지막으로 일치하는 엘리먼트
:last

 - 첫번째 자식 엘리먼트
:first-child

 - 마지막 자식 엘리먼트
:last-child

 - 형제가 없는 모든 엘리먼트
:only-child

※ n은 1부터 시작

 - n번째 자식 엘리먼트
:nth-child(n)

 - 짝수 또는 홀수 자식 엘리먼트
:nth-child(even|odd)

 - 전달된 공식에 따른 n번째 자식 엘리먼트
:nth-child(Xn+Y)

 - 페이지 전체의 짝수 / 홀수 번째 엘리먼트
:even / :odd

n은 0부터 시작

 - n번째로 일치하는 엘리먼트
:eq(n)

 - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
:gt(n)

 - n번째 엘리먼트(포함되지 않음 ) 이전의 엘리먼트와 일치
:li(n)

jquery 필터 종류

jquery Command

function loadScript(url, callback) {
   var script = document.createElement('script');
   script.src = url;
   script.onload = callback;
   document.getElementsByTagName('head')[0].appendChild(script);
 }

var aa = function() {
  alert('출력');
};
loadScript('import.js', aa);

/*쿠키세팅*/
function setCookie(name,value,expiredays) 
{ 
 var todayDate = new Date(); 
 todayDate.setDate( todayDate.getDate() + expiredays ); 
 document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" 
}
 
 
setCookie('good','1',1)
 
 
/*쿠키추출*/
function getCookie( name )
{
 var nameOfCookie = name + "=";
 var x = 0;
 while ( x <= document.cookie.length )
 {
  var y = (x+nameOfCookie.length);
  if ( document.cookie.substring( x, y ) == nameOfCookie ) 
  {
   if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 ) endOfCookie = document.cookie.length;
   return unescape( document.cookie.substring( y, endOfCookie ) );
  }
  x = document.cookie.indexOf( " ", x ) + 1;
  if ( x == 0 ) break;
 }
 return "";
}
 
getCookie('good');  //출력값 1

여러 엘리먼트들을 한꺼번에 받아오려고 getElementById()에 document.getElementById('*').style.background ="#FFFFFF";

이런식으로 와일드카드를 쓸 수 없나 조사를 했더니 getElementById는 하나의 엘리먼트값만 받기 때문에 불가능하다는 것.
 와일드 카드를 쓸 수 있는 건 getElementsByTagName 밖에 없는 듯.

여러 클래스들의 엘리먼를 받아오는 메소드는 있다는 말을 듣고 클래스쪽으로 전환.
 메소드명은 getElementByClass가 아니라 getElementsByClassName 이다.

사용법은
 document.getElementsByClassName(className [, parentElement])
  인수: className = 클래스명, parentElement = 부모엘리먼트

'main' ID를 갖고있는 엘리먼트 내에서 'test'클래스를 갖고있는 엘리먼트의 모두를 얻음
  document.getElementById('main').getElementsByClassName('test')

'test' 클래스 내의 모든 노드들을 취득해, id 엘리먼트값을 추출
  var firstSlot = document.getElementsByClassName("test");
  if(firstSlot[0]){
    var nodes = firstSlot[0].childNodes;
    var id = nodes[0].id;
  }

더나아가 JavaScript 1.6의 배열 확장을 더해서 사용해보면,

'test'클래스를 가지고 있는 div 엘리먼트의 모두를 얻음
  Array.filter( document.getElementsByClassName('test'), function(elem){
    return elem.nodeName == 'DIV';
  });

'test'클래스를 가지고 있는 요소의 모두를 얻음(부모엘리먼트도 포함)
  var test = document.getElementsByClassName('test');
  Array.filter( test, function(elem){
    return Array.indexOf( test, elem.parentNode ) > -1;
  });

 또한, 직접 메소드를 만들어서 사용하는 것도 가능.
 getElementsByTagName을 사용해서 태그 네임을 받아온 후 체크를 해서 오브젝트를 얻어낸다.
 

function getElementsByClass(searchClass, node, tag) {
  var classElements = new Array();
  if ( node == null ) node = document;
  if ( tag == null ) tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i=0, j=0; i < elsLen ; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j++] = els[i];
    }
  }
  return classElements;
}

var curr_date = new Date(); 
var year = curr_date.getYear();		//년
var month = curr_date.getMonth();	//월
var day = curr_date.getDay();		//일
var hours = curr_date.getHours();	//시
var mins = curr_date.getMinutes();	//분
var secs = curr_date.getSeconds();	//초

//선언
var Request = function(){
	this.getParameter = function(name){
		var rtnval='';
		var nowAddress = unescape(location.href);
		var parameters = (nowAddress.slice(nowAddress.indexOf('?')+1,nowAddress.length)).split('&');
		for(var i = 0 ; i< parameters.length ; i++){
			var varName = parameters[i].split('=')[0];
			if(varName.toUpperCase() == name.toUpperCase()){
				rtnval = parameters[i].split('=')[1];
				break;
			}
		}
		return rtnval;
	}
}

 
//사용법
var request = new Request();
request.getParameter('key 값')

  //디바이스타입 파악을 위한 변수
  var MOBILE_USER_AGENT_PREFIXES = [ "w3c ", "w3c-", "acs-", "alav",
     "alca", "amoi", "audi", "avan", "benq", "bird", "blac", "blaz", "brew",
     "cell", "cldc", "cmd-", "dang", "doco", "eric", "hipt", "htc_", "inno",
     "ipaq", "ipod", "jigs", "kddi", "keji", "leno", "lg-c", "lg-d", "lg-g",
     "lge-", "lg/u", "maui", "maxo", "midp", "mits", "mmef", "mobi", "mot-",
     "moto", "mwbp", "nec-", "newt", "noki", "palm", "pana", "pant", "phil",
     "play", "port", "prox", "qwap", "sage", "sams", "sany", "sch-", "sec-",
     "send", "seri", "sgh-", "shar", "sie-", "siem", "smal", "smar", "sony",
     "sph-", "symb", "t-mo", "teli", "tim-", "tosh", "tsm-", "upg1", "upsi",
     "vk-v", "voda", "wap-", "wapa", "wapi", "wapp", "wapr", "webc", "winw",
     "winw", "xda ", "xda-" ];
  var MOBILE_USER_AGENT_KEYWORDS = [ "blackberry", "webos", "ipod",
     "lge vx", "midp", "maemo", "mmp", "netfront", "hiptop", "nintendo DS",
     "novarra", "openweb", "opera mobi", "opera mini", "palm", "psp",
     "phone", "smartphone", "symbian", "up.browser", "up.link", "wap",
     "windows ce" ];
  var TABLET_USER_AGENT_KEYWORDS = [ "ipad", "playbook", "hp-tablet" ]; 
 
  //디바이스타입 파악
  // @returns NORMAL(PC), MOBILE, TABLET
  function getDeviceType() {
   var userAgent = navigator.userAgent.toLowerCase();
   if (userAgent != null && userAgent.length > 0) {
    var tUserAgent = userAgent.slice(0, 4);
     
    for ( var i = 0; i < MOBILE_USER_AGENT_PREFIXES.length; i++) {
     if (tUserAgent.indexOf(MOBILE_USER_AGENT_PREFIXES[i], 0) != -1) {
      return 'MOBILE';
     }
    }
   }
   
   for ( var i = 0; i < MOBILE_USER_AGENT_KEYWORDS.length; i++) {
    if (userAgent.indexOf(MOBILE_USER_AGENT_KEYWORDS[i], 0) != -1) {
     return 'MOBILE';
    }
   }
   
   for ( var ii = 0; ii < TABLET_USER_AGENT_KEYWORDS.length; ii++) {
    if (userAgent.indexOf(TABLET_USER_AGENT_KEYWORDS[ii], 0) != -1) {
     return 'TABLET';
    }
   }
   
   if (userAgent.indexOf("android") != -1 && userAgent.indexOf("mobile") != -1) {
    return 'MOBILE';
   } else if (userAgent.indexOf("android") != -1
     && userAgent.indexOf("mobile") == -1) {
    return 'TABLET';
   }
   return 'NORMAL';
  } 
   
  //Parameters를 parsing
  // @returns (JSON) parameters
 function getBroadCastParam(){
  
  var param ={};
  var varName = '';
  var value = '';
  var nowAddress = decodeURIComponent(location.href);
  var parameters = '';
   
  if(nowAddress.indexOf('?') != -1){
   parameters = (nowAddress.slice(nowAddress.indexOf('?')+1,nowAddress.length)).split('&');
   for(var i = 0 ; i < parameters.length ; i++)  {
    varName = parameters[i].split('=')[0];
    value = parameters[i].split('=')[1];
    param[varName] = value;
   }
  }
   
  param["deviceType"] = getDeviceType();
  param["proxyPage"] = "Y";
   
  return param;
 }
  
 
  
 /* ★사용법★*/
  var param = getBroadCastParam();
  if (param["deviceType"] != 'MOBILE') {
      param["deviceType"] = 'NORMAL';
  }

aes.js

위 첨부 파일 호출

//암호화
var encrypted = CryptoJS.AES.encrypt(oldCntsSrc, "000102030405060708090a0b0c0d0e0f");
//복호화
var decrypted = CryptoJS.AES.decrypt(encrypted, "000102030405060708090a0b0c0d0e0f");
//인코딩
var codeValue = decrypted.toString(CryptoJS.enc.Utf8)
//결과물
alert(codeValue);