태그 보관물: JavaScript

숫자에 1000단위 콤마 넣기

구글해서 찾은 소스입니다. 정규식도 제대로 공부를 해야 할 듯…

/**
 * 통화 형식 만들기
 * @param {Number} 가격
 */
function convertCurrency(n){
	n = "" + n;
	if( /\d{3}\d+/.test(n) ){
		return convertCurrency(n.replace(/(\d{3}?)(,|$)/, ',$&'));
	}
	return n;
}

location.hash vs. history.pushState()

URL의 해시 값을 제어하기 위해서 아래와 같이 location.hash를 사용합니다.

location.hash = "string";

그런데 모바일 브라우저에서 location.hash가 변경되면 다음 이미지처럼 주소표시줄이 화면에 나타납니다.
hash_change

이를 피하려면 HTML5의 history.pushState() 함수를 이용하면 됩니다.

history.pushState(null, null, "#string");

단, history.pushState() 사용할 때 주의할 점은, location.hash와는 달리, 실행 시에 Window.onhashchange 이벤트가 발생하지 않는다는 것입니다.

location.hash = "string";//trigger onhashchange event
history.pushState(null, null, "#string");//DON'T trigger onhashchange event

참고 링크
Location hash Property
Manipulating the browser history
Window.onhashchange

new Date(datestring) 사용 시 주의점

자바스크립트에서 Date 객체를 생성할 때 파라메터에 날짜를 문자열로 넣어 줄 수 있습니다.

new Date("October 13, 1975 11:13:00");

다음과 같이 yyyy/mm/dd 형식의 문자열도 사용할 수도 있습니다.

new Date("2014/03/01");
new Date("2014-03-01");
new Date("2014,03,01");

그런데 정확한 원인은 알 수 없지만, 날짜가 하루 이전으로 생성되는 문제가 간헐적으로 발생하는군요. 그러므로 좀 귀찮더라도, 년, 월, 일을 직접 쪼개서 넣어주는 방식을 사용하는 것이 좋겠습니다.

new Date(yyyy, mm, dd);

JavaScript와 SVG를 사용해서 아크(Arc) 그리기

사각형이나 라운드 사각형, 원 같은 경우는 레이어와 CSS로 얼마든지 표현할 수 있지만, 좀 더 복잡한 도형의 경우에는 CSS로는 표현하기가 어렵습니다. 그래서 SVG를 사용하는 방법을 찾던 중, 아크를 그리는데 어려움이 있어서 샘플로 만들어 봤습니다.

우선 데모를 보시죠.

Path 객체를 사용해서 원하는 모양의 아크를 만들려니 계산식이 복잡해 지더군요. 그래서 중심좌표, 반지름 및 각도를 가지고 아크를 그릴 수 있도록 공식을 짜 봤습니다.
시작점의 위치는 12시 방향으로 고정해서 잡고, 끝점의 좌표를 계산하여 시계 반대방향으로 아크를 그리도록 했습니다. 시계방향으로 그리거나, 시작점과 끝점을 제어하도록 하는 부분은 위 샘플을 응용하면 될 것 같네요.

물론 쉽게 사용할 수 있는 공개된 소스들도 많이 있지만, 개념을 이해하는 차원에서…

JavaScript Star Rating

별점 체크 기능을 자바스크립트로 구현했습니다.
아래 HTML 태그와 같이 data-labeldata-value 값만 설정해 주면, 내부 코드가 자동으로 생성됩니다.

<div class="star_rating_wrap"
    data-label="Quality,Delivery,Design,Price,Service"
    data-value="0,5,2,1,4"></div>

Star Rating라곤 했지만 별모양 이미지 작업은 귀찮아서 그냥 원으로 처리. 디자인 적인 부분은 CSS 스타일을 수정해서 사용하세요.
PC와 모바일 브라우저 모두 지원합니다. (IE7 이전 버전은 제외)

Demo: http://hangunsworld.com/blogSamples/starRating/