Categories
Javascript + jQuery 개발(Development)

JavaScript, jQuery 공부에 유용한 사이트들

회사 신입에게 JavaScript와 jQuery를 좀 알려줘야 할 일이 생겼다. 1:1로 붙어서 알려주면 좋겠지만 회사에서는 그러기 힘드니, 사이트를 몇 개 던져주고 공부시켰다(…). 궁금한 거 있으면 질문하라고 하며 틈틈히 체크해보는 방식으로 했는데, 꽤나 도움이 된 것 같아 공유차원에서 정리해보는 글.

Code School – JavaScript Path (영어)

CodeSchool - Javascript Path
CodeSchool – Javascript Path

기본적으로 많은 도움이 된 사이트가 바로 이 Code School이다. 위에 링크한 JavaScript Path에서는 자바스크립트 전문가가 되기까지 도움이 되는 지식들이 단계별로 구성되어 있다. JavaScript Road Trip Part 1과 Try jQuery는 무료로 체험해 볼 수 있고, 이후 과정은 등록(월 US $29) 이후 수강이 가능하다. 단계를 넘어갈 때마다 포인트가 누적되기 때문에 게임을 하는 기분도 들고 입력에 따라 인터랙티브한 피드백을 계속 받을 수 있기 때문에 배우는 과정도 재미있다. 무언가 새로운 언어를 배우고 싶다면 이곳을 강추한다. JavaScript 외에도 Ruby, iOS 등 다양한 과정이 있다. (전체 코스 보러가기)
* jQuery는 try.jquery.com 으로도 접속할 수 있다.

Learning Advanced JavaScript (영어)

John Resig의 Learning Advanced JavaScript
John Resig의 Learning Advanced JavaScript

jQuery의 창시자인 John Resig이 자신의 저서 Secrets of the JavaScript Ninja를 위해 공개한 예제 사이트. 조금 더 난이도가 있는 JavaScript 기법들을 익힐 수 있다. 책 없이 하려니 주석과 예제를 통해 내용을 파악해야 하지만, 그래도 인터랙티브한 환경을 제공하기 때문에 이것저것 즉석에서 확인해 볼 수 있는 점이 장점.

JSFiddle

JSFiddle
JSFiddle

간단하게 HTML, CSS, JavaScript 코드를 넣고 결과물을 확인할 수 있는 사이트. 한 눈에 모든 것을 볼 수 있어서 테스트가 필요할 때면 틈틈히 사용하고 있다. jQuery 등의 플러그인을 참조하여 사용할 수도 있어 유용하다. 결과물을 Save 한 경우 별도의 URL이 생성되는데, 이를 통해 중간 결과물들을 다른 사람들과 공유할 수도 있게 되어 있어 유용하다. 비슷하게는 JS Bin이란 곳도 있는 것 같다.


여기까지가 신입에게 알려준 사이트들. 한국어 사이트가 없다(…). 아무래도 인터랙티브하게 익힐 수 있는 곳을 찾다보니 위의 곳들을 알려주게 되었다. 한국어로 된 사이트 중 알고 있는 곳은 생활코딩이 유일한데, 인터랙티브한 환경을 제공하지는 않지만 한국어라는 점과 동영상 강의가 제공되니 듣기 편하다는 장점이 있다.
위의 사이트들을 보면, 이제는 뭔가 배우려고 할 때 더 재밌게 배울 수 있는 방법이 늘어나고 있다는 걸 느낄 수가 있었다. 가만히 주입식으로 배우기보다는 직접 만지고 따라해보면서 게임처럼 익힐 수 있는 곳들. 앞으로 이런 시장이 좀 더 커져서 원하는 것을 재미있게 배울 수 있는 길이 더 많아졌으면 좋겠다.
+ 2013/12/12 추가
한군데 더 생각나서 추가한다. jsPerf 라는 곳인데, JavaScript 코드들의 성능을 비교해볼 수 있는 사이트이다. 예시로 jQuery selector와 표준 selector를 비교한 페이지를 링크해둔다.

Categories
Javascript + jQuery 개발(Development)

placeholder 미지원 브라우저 대응

낮은 버전의 IE처럼 HTML5에 추가된 placeholder 속성을 지원하지 않는 브라우저가 있다.
그런 경우 javascript를 이용하여 placeholder 속성을 지원하는 것처럼 흉내내는 방법.
focus를 잃었을 때 placeholder 속성의 값을 value로 넣어주고, focus를 얻어주면 빈값을 넣어주는 방식이다.
이 방법의 단점은 Form을 submit 할 때 input 값에 placeholder 속성값이 들어가 있는지 확인을 해주어야 한다는 점이다. (아래 추가된 내용으로 해결)
또 script 내에서 input 값을 빈값으로 변경할 경우(ex. $(“#input1”).val(“”);), 다시 placeholder를 노출시키기 위해서는 blur() 함수를 따로 호출해야 한다.(focus 변화가 없으므로) (아래 추가된 내용으로 해결)
HTML

Javascript

// placeholder를 지원하지 않는 브라우저 대응
function initPlaceholder() {
	if (!("placeholder" in document.createElement("input"))) {	// 지원여부 체크
		var $input_placeholder = $("input[placeholder]");
		$input_placeholder.each(function () {
			var value = $(this).val().trim();
			$(this).focus(function () {
				if ($(this).val().trim() == $(this).attr("placeholder")) {
					$(this).css("color", "");
					$(this).val("");
				}
			}).blur(function () {
				if ($(this).val().trim() == "") {
					$(this).css("color", "#a6a6a6");
					$(this).val($(this).attr("placeholder"));
				} else {
					$(this).css("color", "");
				}
			}).blur();
		});
	}
}

+ 내용 추가
jQuery의 val function을 오버라이딩해주면 값 변경시마다 blur를 호출할 필요가 없다(값을 val 함수로 변경한다는 전제조건 하에서. input1.value = “”; 는 적용 안됨).
+ 내용 추가
val function 오버라이딩 부분 중 getter 부분도 placeholder 값과 비교하여 리턴하도록 변경.
한계점은 $(“#input1”).val(); 시에는 원하는대로 동작하지만 document.getElementById(“input1”).value 처럼 접근할 때에는 placeholder 값이 나온다는 것.
기존에는 focus 함수에서 placeholder 값과 비교했는데, val() getter를 오버라이드 했기 때문에 “” 와 비교하는 점에 주의.

function initPlaceholder() {
	if (!("placeholder" in document.createElement("input"))) {	// Browser 지원여부 체크
		var $input_placeholder = $("input[placeholder]");
		$input_placeholder.each(function () {
			$(this).focus(function () {
				if ($(this).val().trim() == "") {
					$(this).css("color", "").val("");
				}
			}).blur(function () {
				if ($(this).val().trim() == "") {
					$(this).css("color", "#a6a6a6").val($(this).attr("placeholder"));
				} else {
					$(this).css("color", "");
				}
			}).blur();
		});
		// jQuery val function overriding for placeholder
		(function ($) {
			var org_val = $.fn.val;
			$.fn.val = function (value) {
				var placeholder = $(this).attr("placeholder");
				if (typeof value != "undefined") { // setter
					if ((value == "" || value == placeholder) && $(this).is("input[placeholder]:not(:focus)")) {
						$(this).css("color", "#a6a6a6");
						value = placeholder;
					} else {
						$(this).css("color", "");
					}
					return org_val.call(this, value);
				}
				else { // getter
					if( this[0].value == placeholder ) {
			                        this[0].value = "";
    			                }
					return org_val.call(this);
		                }
			};
		})(jQuery);
	}
}

Gist Github에서 update 시키고 있다.