Javascript 로 암호화 할 일이 생겨서 Search 중 발견 했다.


※ github - https://github.com/tomyun/crypto-js


보통 서버에서 암호화 작업을 하거나, SSL 을 사용 하는대 어쩔 수 없이 암호화 를 하는 점도 있는거 같다.


단방향 암호화 알고리즘 사용에는 편리 한것 같다. 


적용 방법

소스 다운 후 아래와 같이 적용 한다. 다른 알고리즘을 사용할 경우 다른 js를 사용 한다.


<script type="text/javascript" src="/core.js"></script>
<script type="text/javascript" src="/sha256.js"></script>

CryptoJS.SHA256('test').toString()


Web 개발 시 `Scroll` 과 상당한 씨름을 하게 된다.

요구 사항에 따라 다양하게 적용을 해야 하는데 각 브라우저 마다 `Scroll` 값을 조회 하는 방법이 다르다.


`jQuery` 를 확장해서 여러 브라우저에서 사용 할 수 있게 작성된 라이브러리가 있다.



사용 방법


$(window).scrollMaxX();
$(window).scrollMaxY();


위와 같이 적용 하면 된다.


'Javascript' 카테고리의 다른 글

jQuery Checkbox 전체 선택, 해제 방법  (0) 2014.09.22
Javascript 암호화 하기  (2) 2014.04.30
Html Tag Default 동작 제거 하기  (0) 2013.03.06
jQuery Enter Event 걸기  (0) 2013.02.18
Date 관리 하기 sugar.js 이용  (0) 2013.02.18



    $('a').on('click', function(e){
         e.preventDefault();
     });



e.preventDefault(); 를 이용하면 기본 동작을 제거 할 수 있다. 조건을 주면 좀 더 활용 할 수 있다.


'Javascript' 카테고리의 다른 글

Javascript 암호화 하기  (2) 2014.04.30
각 브라우저 scroll 값 구하기  (0) 2014.04.17
jQuery Enter Event 걸기  (0) 2013.02.18
Date 관리 하기 sugar.js 이용  (0) 2013.02.18
Array 요소 없애는 함수  (0) 2013.02.05


jQuery Selector를 이용하여 대상을 걸고, Enter Code로 처리 하면 된다.


Example



// enter event
$('input').keyup(function(e) {
    if (e.keyCode == 13) action();       
});



위의 예제는 모든 input 태그에 관한 Event 이다.



Date의 처리가 까다로운 관계로 개선을 위해서 opensource library인 sugar.js 를 활용 하였다.


※ 공식 사이트: http://sugarjs.com/



공식 사이트 일부 화면이다. Download 한다. 아래와 같이 js 파일을 추가 해 준다.



<script type="text/javascript" src="/javascripts/sugar/sugar-1.3.9.min.js"></script>



Date와 String의 간단한 변환을 위해서 작성 하였다.


추가 소스

whitelife.js



// whitelife.js
// sugar.js is used

Date.prototype.toShortString = function() {
    return this.format('{yyyy}-{MM}-{dd}');
}

Date.prototype.toLongString = function() {
    return this.format('{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}');
}

Date.prototype.beforeDate = function(regex) {
    return this.rewind(regex);
}

Date.prototype.afterDate = function(regex) {
    return this.advance(regex);
}

String.prototype.toDate = function() {
    return Date.create(this);
}

String.prototype.isBeforeDate = function(endDate) {
    return this.toDate().isBefore(endDate.toDate());
}

String.prototype.isAfterDate = function(endDate) {
    return this.toDate().isAfter(endDate.toDate());
}



사용 예제

sugar.js 의 Date 라이브러리 와 추가된 함수들의 조합 이다.



var startDate = Date.create('today').beforeDate('5 day').toShortString();

var endDate = Date.create('today').afterDate('5 day').toShortString();
           
console.log(Date.create('today').toShortString());
console.log(Date.create('today').toLongString());
console.log(Date.create('today').beforeDate('5 day').toLongString());
console.log(Date.create('today').afterDate('5 day').toLongString());
           
console.log(startDate.isBeforeDate(endDate)); // 시작 날짜가 마지막 날짜 보다 [이전: true, 이후: false]
console.log(startDate.isAfterDate(endDate)); // 시작 날짜가 마지막 날짜 보다 [이전: false, 이후: true]
           
console.log(startDate.toDate());
console.log(endDate.toDate());



결과



2013-02-18

2013-02-18 12:00:00

2013-02-13 12:00:00

2013-02-23 12:00:00

true

false

Date {Wed Feb 13 2013 00:00:00 GMT+0900 (KST)}

Date {Wed Feb 23 2013 00:00:00 GMT+0900 (KST)}



조금 더 수월하게 작업을 할 수 있다.



순차적으로 요소를 제거 한다.


샘플 코드


var testArr =[1, 2, 3, 4, 5, 6];


testArr.shift();

console.log(testArr);



실행 화면


[ 2, 3, 4, 5, 6 ]



참고 사이트:  http://www.w3schools.com/jsref/jsref_shift.asp



자바스크립트에서는 각각의 이벤트리스너를 추가/삭제 할 수 있는 메서드를 제공한다.
그러나, 불행히도 IE와 다른 브라우저들간의 차이점이 존재하고 있다.


W3C 표준은 다음과 같은 addEventListener 메서드를 사용한다.


window.addEventListener('load', FunctionName, false);



IE는 attachEvent 메서드를 사용한다.


window.attachEvenet('onload', FunctionName);



'Javascript' 카테고리의 다른 글

Date 관리 하기 sugar.js 이용  (0) 2013.02.18
Array 요소 없애는 함수  (0) 2013.02.05
jQuery로 Ajax 처리시 Array 전송하기  (0) 2012.12.06
jQuery 다수의 Ajax 요청 처리 관련  (2) 2012.11.27
Date 함수 관련  (0) 2012.11.16


Ajax 처리시 배열로 전송할 경우도 생길 수 있다. 이런 경우 아래 코드를 참고 하자.



$.ajaxSettings.traditional = true;



위 옵션을 적용하고 배열로 전송을 하면 서버에서 아래와 같은 형태로 받아 볼 수 있다.



public @ResponseBody String testMethod(int[] testArr) {

// process

}



Array 형태로 파라미터를 받을 수 있게 된다.

'Javascript' 카테고리의 다른 글

Array 요소 없애는 함수  (0) 2013.02.05
Javascript 페이지내에서 다수의 스크립트 실행하기  (0) 2012.12.23
jQuery 다수의 Ajax 요청 처리 관련  (2) 2012.11.27
Date 함수 관련  (0) 2012.11.16
jQuery Ajax  (0) 2012.11.09

+ Recent posts