CSS Selector Syntax

CSS를 사용할 때 다음과 같은 코드를 볼수 있습니다.

.separatorLine {
   border: 0;
   padding: 0;
   margin-left: 4px;
   margin-right: 2px;
}

여기에서 .separatorLine의 경우 CSS에서 Selector라고 부르며 syntax는 다음과 같습니다.

출처 : http://www.w3.org/TR/CSS21/selector.html

event 처리시 return false를 하는 이유는?

javascript를 태그의 이벤트에 직접 추가하는 경우 return true 또는 false를 추가하는 경우가 있습니다. 예를 들자면 다음과 같이 onclick 이벤트 뒤에 return false를 붙이는 경우입니다.

onclick="showPic(this);return false;"

return 값을 돌려줌으로 이벤트 헨들러에게 Boolean 값을 넘겨주게 되는데요. 이벤트 헨들러들은 이 값을 받은 다음에 true인 경우 onclick 이벤트가 발생하였다라고 판단하고 동작을 취하며 false인 경우 onclick 이벤트가 발생하지 않았다고 판단하고 동작을 취하지 않습니다.

위의 예제 중 위의 두개는 return false를 발생하였고 세번째 놈은 onclick="showPic(this);"만 호출 시켰고, 네번째 놈은 return true를 발생시켰습니다. 세번째, 네번째의 경우 링크 클릭시 해당 리소스로 페이지가 이동하는 기본적인 동작이 수행됩니다.

만약 onclick 이벤트를 직접 처리하고 기본동작이 발생하지 않기를 원한다면 onclick 이벤트를 처리하는 코드 끝에 return false를 추가하시면 됩니다.

Try Ruby!

Ruby on Rails는 오픈 소스 웹 애플리케이션 프레임웤입니다. 재미있는 것인 Ruby on Rails가 MVC 아키텍쳐로 만들어져있는데 그중 Model이 RDBMS 테이블을 나타내는 클래스로 구성되어 있습니다.

Why's guide의 한그림?

Ruby를 알고 싶으시면 '조엘 온 소프트웨어 블로그 베스트 29선'의 마지막에 나와있는 "Why's guide to Ruby"를 보시거나 해당 저자의 또다른 작품 "Try Ruby"를 강력히(!) 추천합니다. ^^

"Try Ruby" 소스를 보니 'Prototype' 자바스크립트 라이브러리를 사용해서 만들어졌는데 상당히 깔끔하네요 ^^;;

RIA - OpenLaszlo, WinFX, Flex에 관한 기사가 나왔네요.

Read/WriteWeb에 Rich Internet Application - An Instruction이라는 기사가 올라왔습니다. OpenLaszlo, WinFX, Flex 세가지에 대한 비교를 하고 있는데요. 한번 꼭 보세요.

개인적으로 Web이 너무 빠르게 변하고 있다는 생각도 들고 소화하기도 힘들다는 생각이 드네요.
WinFX의 WPF(Windows Presentation Foundation)의 경우 WPF/E를 사용하여 windows의 ie를 비롯 여러 타 브라우저와 다른 디바이스도 지원할 계획으로 알고 있습니다. Linux 및 Solaris, Mac도 포함해서요. 배포형태는 브라우저의 플러그인 형태입니다.

http://blogs.msdn.com/mharsh/archive/2006/03/23/559106.aspx

Web Style

Web Style : Web Style이란? 다음의 것들로 구성된다.

• 인터넷 상에서 메시지 교환을 위한 기본적인 것들
  
• 매우 엄격하게 제약된 MEP(Message Excahnge Pattern)을 사용하는 HTTP
  (특정 URI를 가리키니는 Single-request, Single-Response)
  
• URI에 의해 모든 것이 구분되는 리소스들
  
• 기본적인 구성 단위로 사용되는 Hyperlink
• 가장 중요한 Request의 subset(HTTP의 GET)은 Read-only, Safe, Idempotent(멱등원)하다.
  
• Request와 Response의 body에 많은 URI를 포함하여 전송할 수 있고 Application에서 해당 URI를 사용하여 동작할 수 있다.
  

출처 및 관련 링크 :

본문인 Styles Beyond WS and REST
본문에 나와있는 Rest관련 논문

getElementsByTagName

Summary

현재 주어진 element에서 인자로 받은 tagName에 해당하는 하위 element들의 list를 리턴합니다. 

Syntax

elements = element.getElementsByTagName(tagName)

Parameters

• return값인 elements들은 하위 element들의 리스트입니다 .
• parameter인 tagName은 string 형태로 element들의 이름을 나타냅니다. special character로 "*"를 사용하여 전체 element들을 나타낼 수 있습니다.
  

Example

// check the alignment on a number of cells in a table. 
table = document.getElementById("forecast-table"); 
cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    status = cells[i].getAttribute("status"); 
    if ( status == "open") { 
        // grab the data 
    }
}

Notes

element에서 사용되는 getElementsByTagName는 탐색 시 자신의 하위 element들에만 접근할 수 있음을 제외하고는 document에서 사용되는  getElementsByTagName와 동일합니다.  

Ant에서 FTP task를 사용하려면?

빌드 완료시 빌드된 파일들을 ftp로 자동 전송하도록 빌드 시스템을 만들고 싶은 경우..
Ant의 <ftp>를 사용한다. 그냥 <ftp>만 써주고 실행해주고 싶은데 불행히도 그냥은 안된다.

먼저, Ant Manual 페이지로 가서 <ftp>를 찾아보자.(Ant Task를 찾으려면 Apache의 Ant User Manual로 들어가서 Ant task를 찾으면 된다.)

FTP

Description

The ftp task 어쩌구 저쩌구....

Note: This task depends on external libraries not included in the Ant distribution.See Library Dependencies for more information.

...

글 초반에 보면 Note와 함께 <ftp>를 쓰려면 외부 라이브러리를 다운 받아야 한다는 메시지가 나온다. 아래의 Library Dependencies에 들어가면 commons-net.jar가 나온다. network와 관련된 공통모듈이니 다운받아야 한다. (클릭해서 들어가면 Download가 잘 안보일 것이다. 자세히보면 Documentation아래에 Download 메뉴가 있다.)

jar파일을 받은 후에 Ant 실행 시 Classpath에 걸어주면된다. (^^;; 그렇다. 이글은 이클립스 사용자 기준으로 작성되었다. 킄)

[Windows] Ant 사용시 파일 접근 권한 때문에 에러가 발생하는 경우

Ant를 이용하여 빌드시스템을 만들 때 부득이하게 Native 명령어를 호출해야할 때가 있다.
어제, 고생했던 것중에 하나가 exe 명령어를 호출해야하는데 파일 퍼미션 문제로 인하여 에러가 발생하는 문제가 많았던 것. [(ㅡㅡ;;) 이놈때문에 도대체 몇 시간을 날린건지 에휴~]

이런 때에는 attrib를 호출하여 파일의 권한을 변경하면 된다. attrib의 세부 옵션은 다음과 같다.

attrib

이 명령은 파일이나 디렉터리에 지정된 읽기 전용, 기록, 시스템 및 숨김 속성을 표시하거나 설정 또는 해제합니다. 매개 변수 없이 사용하면 attrib는 현재 디렉터리에 있는 모든 파일의 속성을 표시합니다.

구문

attrib [{+r|-r}][{+a|-a}][{+s|-s}][{+h|-h}][[Drive:][Path] FileName] [/s[/d]]

매개 변수

+r

읽기 전용 파일 속성을 설정합니다.

-r

읽기 전용 파일 속성을 해제합니다.

+a

기록 파일 속성을 설정합니다.

-a

기록 파일 속성을 해제합니다.

+s

시스템 파일 속성을 설정합니다.

-s

시스템 파일 속성을 해제합니다.

+h

숨김 파일 속성을 설정합니다.

-h

숨김 파일 속성을 해제합니다.

[drive:][path] filename

속성을 표시하거나 변경할 디렉터리, 파일 또는 파일 집합의 위치와 이름을 지정합니다. FileName 매개 변수에 와일드카드 문자(? 및 *)를 사용하여 파일 그룹의 속성을 표시하거나 변경할 수 있습니다.

/s

현재 디렉터리와 모든 하위 디렉터리의 일치하는 파일에 attrib와 명령줄 옵션을 적용합니다.

/d

디렉터리에 attrib와 명령줄 옵션을 적용합니다.

/?

명령 프롬프트에서 도움말을 표시합니다.

설명

• 파일 그룹 작업

  FileName 매개 변수에 와일드카드 문자(? 및 *)를 사용하여 파일 그룹의 속성을 표시하거나 변경할 수 있습니다. 파일이 시스템 속성 또는 숨김 속성으로 설정되어 있으면 해당 파일의 다른 속성을 변경하기 전에 이 속성을 해제해야 합니다.

• 기록 속성 사용

  기록 속성(+a)은 마지막으로 백업한 후 변경된 파일을 표시합니다. xcopy 명령은 기록 속성을 사용합니다. 기록 속성 및 xcopy에 대한 자세한 내용은 관련 항목을 참조하십시오.

• 다른 매개 변수를 사용하는 attrib 명령은 복구 콘솔에서 사용할 수 있습니다.

예제

현재 드라이브에 있는 News86이라는 파일 이름의 속성을 표시하려면 다음과 같이 입력합니다.

attrib news86

Report.txt라는 파일 이름에 읽기 전용 속성을 지정하려면 다음과 같이 입력합니다.

attrib +r report.txt

B 드라이브의 \Public\Jones 디렉터리에 있는 파일과 \Public\Jones의 모든 하위 디렉터리에 있는 파일에서 읽기 전용 속성을 해제하려면 다음과 같이 입력합니다.

attrib -r b:\public\jones\*.* /s

A 드라이브에서 확장명이 .bak인 파일을 제외하고 기본 디렉터리의 모든 파일이 포함된 디스크를 연결하는 것을 고려해 보십시오. xcopy를 사용하면 기록 속성으로 표시된 파일만 복사할 수 있으므로 복사할 파일에 대해 기록 속성을 설정해야 합니다. 먼저 드라이브 A의 모든 파일에 대해 기록 속성을 설정해야 합니다. 그리고 확장명이 .bak인 파일의 기록 속성을 해제해야 합니다. 예를 들어, 다음과 같이 입력합니다.

attrib +a a:*.* attrib -a a:*.bak

그런 다음 xcopy 명령을 사용하여 A 드라이브에서 B 드라이브로 파일을 복사합니다. 다음 명령에서 /a 명령줄 옵션을 사용하면 xcopy 명령을 사용하여 기록 속성으로 표시된 파일만 복사할 수 있습니다. 예를 들어, 다음과 같이 입력합니다.

xcopy a: b: /a

xcopy로 파일을 복사한 후 각 파일의 기록 속성을 해제하려면 /a 대신 /m 명령줄 옵션을 사용합니다. 예를 들어, 다음과 같이 입력합니다.

xcopy a: b: /m

서식 범례

서식	의미
기울임꼴	사용자가 제공해야 하는 정보
굵게	사용자가 보이는 대로 정확하게 입력해야 하는 요소
줄임표(...)	명령줄에서 여러 번 반복되는 매개 변수
대괄호([])	옵션 항목
중괄호({}) 또는 세로줄(|)로 구분된 선택 항목 예: {even|odd}	사용자가
굴림 글꼴	코드 또는 프로그램 출력 중 하나만 선택해야 하는 선택 집합

ant의 경우에는 다음과 같이 호출해주면 현재 디렉토리와 하위 폴더 및 파일들의 권한을 '읽기전용해제, 쓰기 가능'하게 해준다. .

   <target name="chg_attrib_docs">
       <exec executable="cmd">
           <arg line="attrib -r +a /s"/>
       </exec>
   </target>

Office 2007 포멧

MS 2007

서명덕 기자님의 새 기사 '오피스 2007 문서 확장자 세분화 된다.'가 올라왔습니다.

보도에 따르면 오피스 2007에선 전반적인 시스템 개편과 함께 파일 규격에도 대대적인 변화가 있을 예정이다. 우선 'doc,xls, ppt'처럼 3자리였던 파일 확장자가 4자리로 늘어난다. 새 파일 규격은 XML 기반으로, 'docx, xlsx,pptx' 등으로 구성된다. 또 각각의 문서 파일도 그 세부규격에 따라 확장자 종류가 달라진다. <기사 하단 목록참고>

이에 따라 기존에 사용하던 3자리 파일 확장자는 제거되거나 제거가 확실시된다. 하위 버전과의 호환성을 위해 MS는 오피스 2000 파일 규격으로 되돌릴 수 있는 호환 모드를 제공할 예정이다.

이 밖에 오피스 2007에서는 어도비의 'PDF' 문서 파일을 만들 수 있고, 개방형 XML 문서 규격(XPS, open XML Paper Specification)도 지원할 것으로 알려졌다.

워드 2007 지원 파일 규격
Word Document (.docx) - Default format
Word Macro-enabled Document (.docm)
Word Template (.dotx)
Word Macro-enabled Document Template (.dotm)

엑셀 2007 지원 파일 규격
Excel Workbook (.xlsx) - Default format
Excel Macro-enabled Workbook (.xlsm)
Excel Template (.xltx)
Excel Macro-enabled Workbook Template (.xltm)
Excel Binary Workbook (.xlsb)
Excel Add-in (.xlam)

파워포인트 2007 지원 파일 규격
PowerPoint Presentation (.pptx) - Default format
PowerPoint Macro-enabled Presentation (.pptm)
PowerPoint Slide Show (.ppsx)
PowerPoint Macro-enabled Slide Show (.ppsx)
PowerPoint Template (.potx)
PowerPoint Macro-enabled Presentation Template (.potm)
PowerPoint Add-in (.ppam)

2007의 파일 포멧의 경우. zip 포멧을 기준으로 하고 있습니다. 모든 파일들은 확장자를 변경후 zip을 푸는 경우 파일을 열 수 있으며 폴더안에는 문서에 대한 xml 파일 이외에도 이 문서에 대한 UI도 사용자가 지정해 줄 수 있는 특징을 가지고 있습니다.

~m으로 끝나는 확장자의 경우에는 매크로를 의미합니다. 매크로의 경우 vb 사용에 따른 강력함에도 불구하고 바이러스 등의 문제가 존재하여서, 2007 포멧부터는 이를 차단하기 위해서 아예 구분을 한것 같다고 하더군요.

xml 포멧을 공개함으로서 포멧 우위를 포기하는 듯 하더니만... UI의 xml제어(xaml)를 통하여 또 다른 포멧 우위를 확보하는 것 같군요.

Observer 패턴

Dean Edwards씨의 The window.onload Problem글의 댓글에 달린 글 중에서 Ian Darke씨가  쓴 Observer패턴을 이용한 구현입니다.

window.onloadListeners = new Array();

window.addOnLoadListener = function(listener) {
    window.onloadListeners[window.onloadListeners.length]=listener;
}

function init() {
       // quit if this function has already been called

       if (arguments.callee.done) return;

       // flag this function so we don't do the same thing twice

       arguments.callee.done = true;

       // iterates through array of registered functions 

       for (var i=0; i<window.onloadListeners.length; i++) {

        var func = window.onloadListeners[i];
        func();
    }
 };

아직, javascript 문법에 익숙하지 않아서인지 몰라도 굉장히 단순하면서도 깔끔하다는 인상을 주는 구문이네요. Array에 function을 type으로 그냥 넣어버리고 실행하는 것도 var func로 빼내서 괄호추가 후 실행~ ^^
디버깅할 때는 곤란한 면도 많겠지만 나름대로 재미있군요. 다음의 코드는 listener를 추가하는 부분입니다.

window.addOnLoadListener(YourFunctionName);

내가 MS Explorer 7 preview를 좋와하는 이유

아직 IE 7 preview가 무겁기도하고 인터넷 뱅킹도 안되는 등의 문제가 있다.
그러나, IE가 나의 마음을 사로잡는 가장 큰이유는 선택된 항목만 출력할 수 있다는 점이다.

다음과 같은 페이지를 출력한다고 생각해보자. 좌측의 항목 카테고리 우측의 배너 광고들이 너저분하게 출력될 것이다.

원본 페이지

출력된 결과(아래, 좌측)를 보면~ 역시나 전체 출력이라서 이것 저것 다 나올 수 밖에 없다. 그러나~ 위그림처럼 선택하고 선택한 부분만 인쇄하면 전혀 다른 결과(아래, 우측)를 얻을 수 있다.

너무 깔끔하지 않은가? 그래서 내자리에서 IE는 출력 전용으로 사용된다.
아.. 네이버에서는 이 기능을 쓸필요가 없다. 프린트 출력하기가 따로 있다.

DOM요소들은 언제 사용가능 해지는가?

Javascript 공부를 하다가 Ajaxian의 'When do DOM elements become avilable?'을 읽게 되었습니다.

만약 <div id="foo">라는 element를 생성하고 이 element를 얻어오는 getEelementById('foo')를 호출했을 때 foo element를 확실히 얻어올 수 있는가?

- When do DOM elements becom available to embedded scripts? -
Dave Flanagan   

일반적인 경우에 안전한 처리를 위하여 onload()를 호출하여 처리합니다.(load 이벤트는 모든 문서들이 다 로딩된 다음에 발생합니다. 이 시점에 문서안의 모든 객체들은 DOM안에 존재하게 됩니다.) 그러나, HTML문서의 body에 포함되어 있는 스크립트 태그를 사용하는 경우에, 브라우저 벤더들이 HTML파일이 파싱되는 도중에 DOM을 사용가능하게 하는 것으로 보여지므로, Document에 들어가 있지 않은 element에 접근할 수 있다는 것이 Dave Flanagan씨가 가진 문제였습니다.

그가 알고 싶었던 것은 DOM element들의 로딩완료 시점이 언제인가 였습니다 .

이문제의 해결책을 내놓은 Dean Edwards씨의 경우는 이문제와 조금 다른 문제를 가졌습니다. onload이벤트에 초기화 작업을 놓을 때, 이미지가 많이들어있는 HTML페이지에서 DOM에 접근하기 위해서는 이미지들이 모두 로딩된 다음에서야 실행될 수 있는 문제점이 있었습니다.

만약, 이미지가 무수히 많은 웹페이지가 존재하는 경우 웹페이지가 다 로딩되기도 전에 onload 이벤트가 발생할 수도 있으며, 일반적인 경우 초기화 작업을 onload이벤트에서 처리하므로 web application에서는 치명적인 문제가 발생할 수 있다는 문제를 가지고 있었습니다.

Dean Edwards씨의 내놓은 해결책은 다음과 같습니다.
Mozilla인 경우 DOMContentLoaded를 사용하여 DOM이 모두 로딩되었는지를 확인할 수 있습니다.

// for Mozilla browsers

if (document.addEventListener) {

    document.addEventListener("DOMContentLoaded", init, false);

}

IE의 경우에는 <script>태그의 defer 속성을 사용하여 해결하였습니다. defer 속성을 사용하는 경우 DOM이 모두 로딩되기 전까지 스크립트 로딩을 연기시킬 수 있습니다.

<script defer src="ie_onload.js" type="text/javascript"></script>

그러나 다른 브라우져들이 위의 스크립트 태그를 만났을 때 defer 속성을 무시하고 script를 바로 실행할 수 있는 문제점이 있기 때문에 IE에서만 처리할 수 있는 conditional compilation과 conditional comments 사용하는 방법을 제시하고 있습니다 .

// 1. conditional compilation

/*@cc_on @*/

/*@if (@_win32)

    document.write("<script defer src=ie_onload.js><"+"/script>");

/*@end @*/

 

//2. conditional comments
<!--[if IE]><script defer src="ie_onload.js"></script><![endif]-->

※ script태그를 document.createElement로 생성한 후 setAttribute로 defer로 주는 방법도 있을 수 있지만, 동작하지 않기 때문에 외부 js파일로 처리합니다.

이외에도 comment에 여러가지 추가 solution들이 올라왔습니다. 대부분이 document의 readyState를 사용하여 DOM이 로딩되었는지를 체크하는 방법이었습니다.

/* for IE */

function statechange() {

    if (document.readyState == "interactive")

        init();

}



document.onreadystatechange = statechange;

Dean씨가 말하길~ 'readyState 속성은 document가 로드되었는지 또는 파싱되었는지 여부를 결정하는데 사용하기에는 신뢰하기 어렵다'고 하는군요.

Dean Edwards씨의 다음 기사로 An Alternative Solution으로 CSS를 사용하는 방법도 제시되어 있습니다만, CSS와 Javascript를 섞어쓰는 경우라서... 생략 ^^

출처 :
Dave Flangan : When do DOM elements become available to embedded scripts?
Dean Edwards : The window.onload Problem -Solved!
MSDN : DEFER Attribute | defer Property
Gecko DOM Reference : window.onload

Javascript 파일을 문서화하는 JSDoc

JSDoc - JavaScript Documentation Tool

Introduction

• JSDoc은 말그대로 JavaScript 파일을 분석해서 JavaScript 문서를 생성해주는 툴입니다.
  
• Javadoc을 기반으로해서 만들어졌습니다.
  
• 출력양식으로는 HTML, XML, XMI을 지원합니다.

Installation

1. JSDoc은 Perl로 만드어져있기 때문에, Window를 사용하시는 분들은 ActivePerl을 먼저 받으신 다음에 설치를 해주셔야 합니다.
   
2. XP의 '시작 >실행 >cmd'을 실행하여서 명령프롬프트를 띄웁니다 .
   
3. 프롬프트 상에서 PPM을 입력한 후 엔터를 눌러 Perl Package Manager를 실행시킵니다.
   
4. 다음의 "PPM> install HTML-Template"명령을 실행시켜서 HTML 템플릿을 설치합니다.
   
   
   
   
5. 설치가 완료되었으면 "PPM> quit"를 실행하여 PPM을 종료합니다.
   
6. JSDoc을 다운받아서 압축을 풀어줍니다.

여기까지 다되었으면 설치는 완료입니다.

Usage
실행하는 방법은 간단합니다. perl.exe를 사용하여, jsdoc.pl 파일을 실행시켜주면 됩니다.

perl.exe jsdoc.pl [OPTION값들] [JS소스파일] [Output디렉토리]

예) perl.exe jsdoc.pl -p -r sample.js ../output

옵션으로 줄 수 있는 항목들은 여러가지가 있습니다만, 세가지 정도면 충분할 것 같습니다.(^^ 저의 경우지만요)

-r  재귀적으로 지정한 디렉토리와 이하의 파일들까지 JSDoc으로 처리를 합니다.
-p  private 항목들도 출력합니다.
-d  출력할 디렉토리를 지정합니다. (디폴트로는 js_docs_out입니다.)

옵션항목 다보기

Usage: jsdoc [OPTIONS] <js sourcefiles and/or directories>+

-h | --help  : Show this message and exit
-r | --recursive : Recurse through given directories
-p | --private : Show private methods and fields
-d | --directory : Specify output directory (defaults to js_docs_out)
-q | --quiet : Suppress normal output

--page-footer : Specify (html) footer string that will be added to all docs
--project-name : Specify project name for that will be added to docs
--logo : Specify a path to a logo to be used in the docs
--project-summary : Specify a path to a text file that contains an overview summary of the project

--no-sources : Don't include the source code view
※ JavaScript 파일 자체를 Syntax Hightlighting해서 보여줍니다. JavaScript파일 중에서도 prototype.js의 상속구조를 쓴 경우, JavaDoc형식의 문서를 볼 수 없기 때문에 파일 자체를 보는 것도 도움이 되기도 하더군요.

--extensions : Provide a comma-separated list of file extensions to be considered as JavaScript source files
--nested-file-naming : Use package-style naming (i.e. keep directory names in the file path). This is useful if you have multiple files with the same name, but in different directories. This option is only useful if --recursive is also used.
--globals-name :  Specify a 'class name' under which all unattached methods will be classified. The defaults to GLOBALS
--format : Set the output format. The options are html, xml and xmi, defaulting to html. The others are currently alpha software.
--template-dir : Provide another directory containing HTML templates
--no-lexical-privates : Ignore "private" variables and functions that are lexically defined within constructors
--package-naming : Use packages, with a package being defined as a class that only contains nested classes and possibly static members.

이클립스에서 좀 더 쉽게 사용한다면, '이클립스 메뉴 > External Tools > External Tools'를 클릭해서 Externals Tools창을 띄운 다음에 Program항목에서 JSDoc항목을 등록합니다.

그리고, Location항목에는 perl.exe의 위치를 지정하시구요. Working Directory에는 JSDoc이 설치되어 있는 위치를 지정하신 다음에 Arguments로 jsdoc.pl -r -r -d 소스파일 출력위치를 지정해주시면 이클립스에서 바로 실행시킬 수 있습니다.

Problems
JSDoc에는 몇가지 문제점이 있습니다. Java의 경우 엄격한 문법구조로 인하여 문서화가 쉬운 반면에, JavaScript의 경우 동적인 언어라서 자동으로 문서화하기가 쉽지 않습니다.

그래서인지, Prototype.js로 작성한 파일들의 상속구조로 작성한 파일들의 경우 JSDoc으로 전혀 생성이 되지 않더군요. (예를 들자면 Object.extend({}, {});로 작성된구조.)

출처 : jinoxst님의 AJAX 강의 5-1장 - JSDoc 을 이용한 자바스크립트 다큐먼트 생성하기

Javascript의 Refactoring

AJAX로 인하여 Javascript 사용량이 늘어난 만큼 Javascript도 소프트웨어 디자인 원칙에 따라 설계하고 코딩할 필요가 발생했습니다. 이를 위해서 작성된 문서가  'Javascript Refactoring For Safer Faster Better AJAX'입니다.

문제점

너무나 광범위하게 사용되는 글로벌 변수들에 의해서 개발, 테스팅, 소스코드의 재사용 등을 어렵게 만들었습니다.

해결책

1. 글로벌 변수의 사용을 피합니다. [객체의 사용]
2. 다른 프로젝트에서 재사용이 가능한 자바스크립트 파일을 생성합니다.
3. 브라우저에 종속적인 코드를 캡슐화합니다.
4. 동시 발생하는 XMLHttpRequest를 처리할 수 있도록 허락합니다.
5. 에러 처리와 에러 리포트를 개선합니다.
6. 기본적인 퍼포먼스 메트릭스를 추가합니다. (add basic performance metrics)

자세한 내용은 원문을 보셔야 될 것 같구요 ^^;; 기본적인 원칙은 private, public으로 캡슐화를 통하여 재사용 가능한 클래스의 설계가 아닌가 싶습니다.

// declaration
function myClass(){
   // variables
   var privateVar = "I am private";
   this.publicVar = "I am public";

   // functions
   var privateFunction = function(){
       return "privateMethod";
   }

   this.publicFunction = function(){
       alert("I am public");
   }

   this.callPrivateFunction = function(){
       return "called private function: " + privateFunction();
   }
}

// usage
var myInstance = new myClass();

myInstance.publicVar = "new value";
alert(myInstance.privateVar);             // undefined!

myInstance.publicFunction();
myInstance.privateFunction();             // error!

         alert(myInstance.callPrivateFunction());          

// return "called private fuction: privatemethod"

function을 사용해서 클래스를 정의하고 내부에 변수선언을 해서 private로, this를 이용하여 public으로 사용할 수 있습니다.

이 외에도 prototype을 사용하여서도 메소드 정의가 가능합니다.
prototype을 사용하여 메소드를 정의할 때 생성자에서 정의한 private 변수 메소드는 사용불가능합니다. (--;; 어찌보면 당연한걸...)

출처 :

Javascript Refactoring For Safer Faster Better AJAX

나도따라 자미두수

천조 님의 블로그에 '자미두수'가 올라와있길래 나도 따라 해봤다.

밍숭맹숭..

결과보기..

이 사람은 비교적 청렴 결백하고 공정한 성격으로 대인관계가 활발하고 임기응변에 뛰어난 스타일이며 자기 일은 뒷전이고 남의 일에바쁘게 쫒아 다닐 때가 많다.
음.. 아닌 것 같은데..
일을 할 때도 꼼꼼하게 잘 하다가도 대충 넘어가기 시작하면 한이 없어 건성이 될 때가 많고
헉.. 이건...맞다. ^^;;;
마음이인자하고 약한 편이라 남의 부탁이라면 무엇이든 대답부터 하고 보는데 실천 못할 일은 확실하게 거절도 하는 냉정함이 필요하다.감정 표현도 눈에 보이는 스타일이라 남에게 거짓말도 못하고 화가 나면 금방 얼굴에 나타나는 성격이지만 사람이 좋아서 풀리기도금방 풀리고 돌아서면 뒤끝은 없는 사람이다.
또한 사람이 인정이 많아서 남의 초상집에 가서 상주는 안 우는데 본인이 울어주는 격으로 마음이 착한 사람이 많고 남에게 따지러갔다가도 싫은 소리를 못하고 있다가 상대에게 맞장구를 치고 오는 형이라 하겠다. 이런 사람은 어려서부터 환경의 영향을 많이 받고공부를 얼만큼 했느냐에 따라서 삶의 방향이 천차만별인데 노동이나 힘든 일은 하지 못하는 체질이고 남을 시키는 지위에 있어야자신의 실력을 발휘하는 타입으로 평소 아는 것이 많아도 배운 것이 없으면 실력이 딸리고 인정을 못 받아 실속이 없는 빛 좋은개살구가 되고 만다. 되도록 외국어도 기본으로 익혀야하고 대학원에 유학까지 갔다와야 자신이 원하는 대로 삶이 풀리며
ㅡㅡ;; 이미 꼬인 인생이었다는 것인가??
또한 존경과명성이 따르고 참 멋있는 인생을 사는 사람이라 볼 수 있다.
직업으론 기술적인 것이나 서비스 쪽도 잘 맞고 정치인,대변인, 방송인, 기자, 의사, 연구원, 교수, 가이드, 통역, 광고 기획가, 법관, 외교관, 행정관, 유통업, 출판업,부동산, 건축가 등이 좋은데 투기 쪽은 패가망신하니 절대 금물이다. 이런 사람은 성격이 급하지만 사고력이 있고 침착한 편으로여러 가지 재주가 있는 팔방미인 격이며 친구도 많고 이성도 많이 따르는 타입인데 젊어서 초반에 인생의 진로를 잡지 못하면 나이가들수록 어렵고 후회가 따르니 주의하라. 사람이 대범한 면도 있고 자기 주장이 강한 면이 있는데 대화를 할 때 말이 끝나기 전에성급하게 결론을 내리려 하는 경향이 있어 가끔 실수가 따르며 일도 매사 확인은 하지만 허술한 것이 많아 지나고 보면 후회를 하게되는 일이 많으니 신중할 필요가 있다. 주변에 항시 사람은 많아서 도움도 많이 주고 또한 자신도 도움을 받으며 살아가는 타입으로이 사람은 평생 재물에 그렇게 구애를 받는 팔자는 아니며 처음 사회생활에 기본 토대가 있어야 매사 순조롭게 풀리는 경향이 강하여젊어서 부모로부터 유산을 받는 사람이 많다.
이런 사람이 집에서는 인색하지만 나가서는 호인 소리를 듣는 사람이 많고실속보다 겉치레에 치중하는 편인데 어떤 일을 할 때도 금방 난리라도 난 것처럼 서둘지만 금방 시들해지고 매사 쉽게 시작하며 쉽게포기를 하는 일면이 있어 끈기가 부족한 것이 흠이다. 공부는 서기로 짝수 년에 더 잘되고 시험 합격 운도 좋게 들어오는데 공부를하는 것도 미루지 말고 그때그때 잠깐씩 하는 것이 효율적이고 부모가 간섭하며 감독하는 것이 나중을 위해서는 좋다. 이 사람은머리가 총명하여 마음먹고 공부하면 수재소리도 듣지만 머리만 믿고 자만하거나 게을리 하는 경향이 있고 결론만 대충 보고 넘어가기초를 놓치는 일이 많으니 주의해야한다.
대학은 연고대, 중앙대, 서강대, 경희대, 외대, 동국대, 명지대, 국민대, 이대 등이잘 맞고 전공은 정치학, 신문 방송, 법률, 의학, 사범, 관광, 광고, 외교학, 행정 관리 등 기술분야나 서비스 분야가 적성에어울리며 종교는 불교가 괜찮지만 천주교나 기독교 등 다양한 편이다.
음 ^^;;학교는 제대로 나왔다는 예기네 ㅎㅎ
결혼은 서기로 짝수 년에 남녀가 만나서 짝수 년에결혼해야 순탄하게 살며 중매보다는 연애 결혼이 많지만 특히 주의해야 할 것은 이 사람은 서로 조금만 안 맞아도 실패하는 커플이많으니 사전에 궁합을 잘 보고 결혼해야 하고 되도록 부인 말을 듣고 살아야 문제가 없는 편이다. 배우자를 고르는데도 인물이나학벌 등 안정된 조건을 많이 따지고 까다로운 편이라 평소 연애는 많지만 결혼 상대는 별로 없는 사람이라 하겠다. 상대도 맏이는안 맞고 중간이나 외동, 막내에서 만나야 무난하고 부모를 모시지 않고 떨어져서 효도하는 것이 문제가 없으며 사업가보다는 직장인이안정적이다. 상대는 다정다감하고 자상하며 가정적인 사람이 맞으며 큰 것을 바란다기보다 작은 것에 감동을 하는 타입이라 하겠고사람이 똑똑하며 세련된 멋이 있는 정직한 스타일이다.
쳇.. 엉터리다.

Jotspot의 Joe Kraus가 생각하는 Web Office

한동안 정신없이 살다가 주말에 싸여있던 Feed들을 소화해버렸습니다. 그냥 제목만 보고 지나쳤었는데 Jotspot의 Joe Kraus씨의 인터뷰가 있더군요.

• Embracing and Extending Microsoft : JotSpot's Joe Kraus on the Web Office

Joe Kraus씨가 생각하는 Web Office(Excel이겠죠)는 다음과 같은 가정에서 비롯되었습니다.

"Excel을 사용하는 사람들은 Excel이 제공하는 함수, 계산기능을 위해서 사용하는 사람과 글을 작성하고 이를 추적(track)하기 위해서 사용하는 사람으로 나눌 수 있습니다. 예를 들자면, 한 팀에서 스프레드 시트에 글을 적고 여기에 대한 피드백을 얻기 위해서 팀원들에게 스프레드 시트를 보냅니다. 그리고 팀원들이 이 스프레드 시트에 피드백을 추가 후 돌려줍니다."

개인적으로는 Excel의 주용도가 '계산 기능'과 '그리드로 나누어진 공간에서의 격식을 갖춘 문서작성'이라고 생각합니다. (ㅡㅡ;; 뒤의 용도는 본인이 많이 사용하는 용도입니다..ㅎㅎ) 인터뷰 리플 분중에는 분석툴이라고 하시는 분도 있네요.

이러한 가정하에서 Jotspot이 목표로 하는 기능(웹 상에 Excel이 제공하던 기능을 확장하기 위한)들은 다음과 같습니다.

1. Sharing - making spreadsheets available to people as either read/write or read only.
2. Every row is a wiki page - essentially meaning each row accommodates rich data types and has things such as version control; and
3. the ability to mashup data from your own hard drive with data on theWeb. As Joe put it: "connecting your spreadsheet to the Web is reallythe idea."

sharing과 version control, mashup 기능은 Web Office가 갖춰야 할 기본 기능으로 되어버린 것 같습니다. Web Office를 어떻게 봐야할지에 대해서 생각해볼 수 있는 재미난 글이라 생각됩니다.

※ 주의 : 글쓴사람이 비몽사몽간에 보면서 글썼기 때문에 오역 또는 잘못 생각한 부분이 있을 수 있습니다.  ^^;;;

innerHTML과 outerHTML

다음과 같은 HTML 구문이 주어졌다고 가정을 해봅시다.

<div id="d">
   <p>Content</p>
   <p>Further Elaborated</p>
</div>

위의 HTML구문에서 "d"를 기준으로 innerHTML과 outerHTML을 구하면 innerHTML은 <div id="d"></div>의 안에 있는 HTML 코드만 리턴(<p>Content</p><p>Further Elaborated</p>)하고 outerHTML은 <div id="d"></div>를 포함한 코드를 리턴(<div id="d"><p>Content</p><p>Further Elaborated</p></div>)합니다.

d = document.getElementById("d");
alert(d.innerHTML);
alert(d.outerHTML);

아래의 그림은 innerHTML을 Firefox에서 출력한 화면 입니다. outerHTML의 경우에는 IE에서만 지원하므로 IE이외의 브라우져에서는 따로 처리를 해야 합니다.

outerHTML을 가지고 오는 코드는 다음과 같습니다.

1. outerHTML을 가지고 올 element의 ownerDocument에 "body"를 생성합니다.
   var d = elem.ownerDocument.createElement("body");
2. 생성된 body에 outerHTML을 가지고 올 element를 더합니다.
   d.appendChild(e);
3. body의 안에 설정되어 있는 HTML코드를 리턴합니다.
   return d.innerHTML;
   

outerHTML을 설정하는 코드도 동일합니다. 차이는 d.innerHTML에 추가할 outerHTML코드를 대입하면 됩니다.

d.innerHTML = outer;

document에 css 파일 import하기

Javascript에서 css파일을 동적으로 추가하는 ie와 w3c(mozilla계열 firefox, webkit, safari에서 테스트를 해봤습니다.)가 다르게 처리합니다.

1. ie의 경우 createStyleSheet를 사용하여 css를 동적으로 추가할 수 있습니다.

Syntax

oStylesheet = document.createStyleSheet( [sURL] [, iIndex])

sURL에는 css의 url이 들어가며, index에는 document.styleSheets(비표준, document에 사용된 style sheet들의 집합)의 index를 받습니다.

사용 예)

document.createStyleSheet(urlOfCss);

2 . w3c의 경우 createElement를 사용하여서 css를 동적으로 추가할 수 있습니다.
일반적인 element를 DOM으로 생성하는 방법을 사용하여 만들면 됩니다.

사용 예)

var linkElm = document.createElement("link");
linkElm.rel = "stylesheet";
linkElm.href = url_of_css;

var headTag = document.getElementsByTagName("head")[0];
headTag.appendChild(linkElm);

참고 자료 :

MSDN createStyleSheet Method

DOM Client Object Cross-Reference:document

typeof 연산자

javascript의 typeof 연산자는 변수에 저장하고 있는 type이 무엇인지를 반환하는 함수입니다. 순서는 다음과 같습니다.

1. Evaluate UnaryExpression.
2. If Type(Result(1)) is not Reference, go to step 4.
3. If GetBase(Result(1)) is null, return "undefined".
4. Call GetValue(Result(1)).
5. Return a string determined by Type(Result(4)) according to the following table:

리턴되는 결과는 다음과 같습니다.

String.prototype.replace(searchValue, replaceValue)

String.prototype.replace(searchValue, replaceValue)

• searchValue를 찾아서 replaceValue의 값으로 변환해줍니다.
  
• searchValue는 RegularExpression이 들어갈 수도 있습니다.
  이 때 searchValue.global이 true인 경우 찾아낸 모든 값들을 변경합니다. 반대로, searchvalue.global이 false인 경우 가장 처음에 찾아낸 값만 변경합니다.
  
• replaceValue를 function으로 설정하는 등의 자세한 사항은 ECMAScript를 참고하시는게 나을듯.. ^^
  
• javascript 파일에서 쉽게 볼 수 있는 obj.replace(/\s+/,'') 구문은 공백을 제거하기 위한 구문입니다.
  [\s: 탭, 개행문자, 캐리지 리턴, 폼피드, 수직 탭등의 모든 공백문자를 의미합니다.]

Object Initializer

Objec Initializer

syntax

objectName = {property_1 : value_1, property_2 : value_2, ...., property _n: value_n}

사용방법은 위와 같습니다. 객체를 생성하고 객체의 프로퍼티를 초기화하는데 사용됩니다. 배열에도 사용가능합니다.
출처 :

Core Javascript 1.5 Guide : Using Object Initializers