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를 비교한 페이지를 링크해둔다.

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 시키고 있다.

[Javascript] 팝업 차단 피하기

User action이 있을 때 popup을 띄우는 것은 허용된다. ex) click 등
ajax 처리를 하는 경우에도 callback 함수 바깥에서 띄우면 된다.

안 되는 경우

// 클릭 이벤트 핸들러
function didClick() {
	$.ajax({
		url: "someurl.php",
		success: function() {
			window.open("popup.html"); // blocked
		}
	});
}

해결 방안

// 클릭 이벤트 핸들러
function didClick() {
	var result = false;
	$.ajax({
		url: "someurl.php",
		success: function() {
			result = true;
		}
	});

	if( result ) {
		window.open("popup.html"); // it will works
	}
}