[Javascript] 자바스크립트에서 replaceAll 하기.

Posted by Find my true self Fimtrus
2014.08.08 15:26 Programming/Web

자바에서는 친절하게 replaceAll을 제공하지만 


자바스크립트는 제공하지 않는다.


결국 해당 function을 만들어주는 수 밖에 없다..


마찬가지로 웹페이지 로드될 때, 아래코드를 추가시켜주면된다.


String.prototype.replaceAll = function() { 
	var a = arguments, length = a.length;
	
	if ( length == 0 ) {
		return this;
	}
	
	var regExp = new RegExp( a[0], "g");
	
	if ( length == 1 ) {
		
		return this.replace(regExp, "");
	} else {
		return this.replace(regExp, a[1]);
	}
	return this;
}



이 댓글을 비밀 댓글로

[Javacript] Array remove Index 배열 삭제

Posted by Find my true self Fimtrus
2014.08.08 14:28 Programming/Web

자바스크립트의 Array 객체 ( [] 대괄호를 통해 생성 또는 new Array 로 생성하는 경우) 에는 배열 객체를 삭제하거나, 인덱스를 입력받아 삭제하는 function이 없다.


물론 splice나 split 등의 function을 이용하면 되긴 하지만, 


익숙하지 않은 사람들에게는 상당히 귀찮은 작업이다.


그래서 function을 미리 만들어 놓고 사용하는데,


이것도 마찬가지로 웹페이지가 로드될 때 코드를 추가해주면


모든 Array가 아래 function들을 가지게 된다.



Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

Array.prototype.removeIndex = function () {
	var a = arguments, length = a.length;
	this.splice ( a[--length], 1 );
	return this;
}


추가한뒤 array 객체를 보면 remove와 removeIndex가 딱!



이 댓글을 비밀 댓글로

[Javascript] Date format 추가.

Posted by Find my true self Fimtrus
2014.08.08 14:15 Programming/Web

자바스크립트에서 Date 객체에 대한 format function을 지원해 주지 않는다.


해서..... 포멧을 만들려면 상당히 귀찮은 작업을 해야하는데,


아래 코드를 웹페이지 로드될 때, 추가해주면 format function 을 사용할 수 있다.

Date.prototype.format = function(f) { if (!this.valueOf()) return " "; var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"]; var d = this; return f.replace(/(yyyy|yy|MM|dd|E|HH|hh|mm|SSS|ss|a\/p)/g, function($1) { switch ($1) { case "yyyy": return d.getFullYear(); case "yy": return (d.getFullYear() % 1000).zf(2); case "MM": return (d.getMonth() + 1).zf(2); case "dd": return d.getDate().zf(2); case "E": return weekName[d.getDay()]; case "HH": return d.getHours().zf(2); case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2); case "mm": return d.getMinutes().zf(2); case "ss": return d.getSeconds().zf(2); case "a/p": return d.getHours() < 12 ? "AM" : "PM"; case "SSS": var temp = "0000"; var milliSeconds = d.getMilliseconds(); temp = temp + milliSeconds; temp = temp.substring ( temp.length - 3 , temp.length); return temp; default: return $1; } }); };


이 댓글을 비밀 댓글로

[Web] window.print() 로 원하는 영역 인쇄하기.

Posted by Find my true self Fimtrus
2014.06.19 10:47 Programming/Web

window.print 함수를 사용하여 인쇄할 때의 영역은 

document.body 의 innerHTML이 잡히게 된다.

흔히 많이 사용하는 것중에 하나로,

원하는 영역의 html을 body에 넣어서 인쇄하는 방법이다.

하지만 single page 기반이나, jsp를 사용하지 않는 순수한 html의 경우

이방법을 사용하였을 때, 페이지가 거침없이 깨지는 경우가 대부분이다.

그래서 새창을 통해 인쇄하는 방법을 사용한다.


먼저 팝업 윈도우하나를 선언한다.

이때 새창이 생기게 되고, 정상적으로 열렸다면 popupWindow에는

새창에 대한 window 객체가 들어오게 된다. 팝업 차단으로 인해 열리지 않았을 경우

popupWindow 에는 undefined가 리턴되게 된다.



var popupWindow = window.open("", "_blank" );


대부분 개발자들은 jquery를 사용한다.(아마도??)

그 중에 jquery ui를 쓰는 사람도 적지 않다.

그러면 당연히 새창에서도 화면 구성에 필요한 js, css 등

plugin 들을 importing 해줘야 정상적으로 화면이 뜰 것이다.

그래서 아래의 코드로 헤더를 추가해준다.

- write 함수의 경우 document 객체에 직접 html을 추가해주는 역할을 한다.

- $('head')를 통해 헤더 객체를 얻고, html 함수를 사용하여 모든 헤더정보를 불러온다.



popupWindow.document.write( "<헤드태그>"); //head 제대로 쓰니까..티스토리 에러가...
popupWindow.document.write( $('head').html() );
popupWindow.document.write( '<헤드태그 닫기>' ); 


헤더를 추가한 후, 실제 표시될 컨텐츠를 추가해주면

새창에 원하는 컨텐츠가 추가되게 된다.


var $table = $("화면에 표시할 컨텐츠");

popupWindow.document.write( '<바디태그>' );
popupWindow.document.write( '
' ); popupWindow.document.write( $table.html() ); popupWindow.document.write( '
<바디태그 닫기>' );


컨텐츠 추가 완료 후 document를 close 시킨 후(반드시 close 함수를 호출해야한다)

새 창에서 print 함수를 호출해주면 인쇄창이 뜬다.


popupWindow.document.close();

//popupWindow 의 print 이다. 가끔 document.print 를 치시는 분들이..
popupWindow.print();


위의 코드들은 크롬 기반에서 테스트 하였으며, 익스플로러의 경우 정상적으로 동작하지 않을 수 있다.

이 댓글을 비밀 댓글로