JavaScript Bad Practices

이 페이지의 내용은 jQuery CookBook의 13장 도입부에 나오는 내용 중 document.write()의 올바른 사용법에 관해서 언급하고 있는 부분을 읽으면서 알게된 정보를 실어봅니다.
관련 내용은 http://quirksmode.org/blog/archives/2005/06/three_javascrip_1.html#link4 의 article과 관련이 있습니다. 그리고 피터 폴 콕의 article은 또다른 참고 페이지를 제공합니다.
http://christianheilmann.com/2005/06/21/six-javascript-features-we-do-not-need-any-longer/

일단 피터 폴 콕이 말하는 내용을 잠깐 정리를 하자면 ,
자신은 Chris Heilmann이 제시하는 6가지 bad practices에 동의하지만 document.write()의 단 한가지 올바른 사용법이 있다는 것을 주장합니다.

Chris Heilmann의 Six Javascript features we do not need any longer(더 이상 필요없는 6가자 자바스크립트 사양)의 내용은 아래와 같습니다.

  • 1. document.write(actually, there is one situation in which it remains useful)
  • 2. <noscript>
  • 3. the javascript: pseudo-protocol
  • 4. onclick="void(0)" (I must admit I never saw this one in the wild)
  • 5. document.layers, document.all, and navigator.userAgent
  • 6. inline event handlers

document.write()의 단 한가지 올바른 사용예란 뭘까요? 피터 폴 콕에 따르면 자바스크립트를 사용할 때 style을 같이 사용해야 하는 상황에서는 유용하게 사용할 수 있다는 말을 합니다.
예를 들자면 네비게이션 메뉴를 자바스크립트로 구현할 때, 숨겨지는 하위 메뉴들이 있는 경우, 하위 메뉴를 숨겨두기 위해서 숨겨질 대상 요소에 직접 style일로 display:none;을 구현한다거나, 자바스크립트에서 element.style.display = "none"을 적용할 것이 아니라 자바스크립트가 작동할 때만 document.write()를 이용해서 해당 요소에 style을 처리한 css 파일을 불러 들이는 방법을 사용하는 것입니다.
아래의 피터 폴 콕이 제시하는 예제입니다.

							var W3DOM = (document. getElementsByTagName && document.createElement);
							if (W3DOM) {
								document.write('<link rel="stylesheet" href="advaced.css" />');
							}
							
							window.onload = function () {
								if (!W3DOM) return;
								// start up W3C DOM scripts
								
							}							
						

아래는 jQuery CookBook에서 제시하는 방법과 그 내용을 실어 봅니다.

							<script type="text/javascript">
								/* <![CDATA[ */
								document.write('<link rel="stylesheet" type="text/css" href="preload.css" />');
								/* ]]> */
							</script>						
						

"상기 코드에서 CSS 파일은 페이지가 렌더링을 시작하기도 전인 <head> 영역에 작성되어 있다. 일단은 모든 콘텐트를 미리 숨긴 후 자용자가 페이지와 상호작용하게 되면 나타나게 하기 위해서 말이다. 자바스크립트로 CSS 참조를 작성한 이유는 자바스크립트가 지원되지 않는 경우를 대비하기 위함이다. 그렇기에, 브라우저가 자바스크립트를 지원하지 않는 경우에도 모든 콘텐트는 보여지고 확실히 접근할 수 있을 것이다."