ToWis.net(블러그 정리중 40% 완료)

DB라고 하기는 그렇고... 노선명을 순순하게 텍스트로 나열한 데이타 입니다.
가끔 보니 노선도 정보가 있냐는 글이 올라온걸 본적이 있어서... 올려둡니다.

근데 이런 글을 어느 카테고리로 가야 되냐-_-;?

새삼스래 왠 재입문? JavaScript가 the world's most misunderstood programming language (세계에서 가장 잘못 이해되고있는 프로그래밍 언어)에 소개된 것과 같이 의미있는 비판을 받고 있기 때문입니다. 장난감 정도로 비웃음을 사고 있지만, 그 속기쉬운 이면에는 몇가지 강력한 언어 요소를 내재하고 있습니다. 2005년에는 이 기술에 대한 깊은 이해가 웹 개발자 누구에게 있어서도 중요한 능력이 된다는 것을 보여주는 많은 고급 JavaScript 응용 프로그램들이 나타났습니다.

언어의 역사에서 시작하는 것이 이 이야기를 이해하는데 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 이른 1996년에 Netscape 2와 함께 처음 릴리즈 된것입니다. 원래 LiveScript로 불리워지기로 되어있었지만, Sun Microsystem의 Java 언어의 성공에 편승해보려고 두 언어 사이의 공통점이 매우 적음에도 불구하고, 이런 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 사실은 사상 유래가 없는 혼란의 근원이 되어버립니다.

Microsoft는 몇달 후 IE3와 함께 JavaScript와 대부분이 호환되는 JScript로 불리워지는 언어를 발표합니다. Netscape는 1997년에 ECMAScript 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 Ecma International에 보냅니다. 표준은 1999년에 ECMAScript edition 3에 따라 큰 규모의 개정을 거친 후, 현재 4번째 판이 제정 준비 중에 있지만 유래없이 아주 안정된 상태로 계속 유지되고 있습니다.

이 안정 상태는 다양한 코드 구현을 하는데 충분한 시간이기 때문에 개발자들에게는 더없이 좋은 소식입니다. 저는 대부분 이 3판에 집중하려고 합니다. 친숙함을 위하여 JavaScript 전반에 걸쳐 여기서 사용된 용어를 준수하겠습니다.

대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, Yahoo! 위젯 엔진, 등의 제품에서도 발견할 수 있습니다.

개발 해 놓은 사이트의 일부 페이지가 특정 PC에서 열리지 않는 문제가 있어 해당 내용을 찾아 보니 MS사이트에 이미 버그리포트로 올라왔더군요.

위 이미지가 바로 문제의 PC에서 나타난 화면입니다. “인터넷 사이트를 열 수 없습니다. 작업이 중단되었습니다.”

MS에 올라온 기술자료입니다.

http://support.microsoft.com/kb/927917/ko

이번에 다룰 내용은 브라우저와 DOCTYPE에 따른 width와 height 그리고 padding, border등의 관계에 대해서 다루겠습니다. 단순하게 말하자면 브라우저와 DOCTYPE에 따른 박스모델 구현 정도로 알아 두시면 되겠습니다.

일단 이미지를 보여드리겠습니다.

Strict(W3C박스 모델)

Quirks

내용 적고, 소스 만드는 시간보다 저 이미지 만드는 시간이 훨씬 오래 걸렸답니다.

잡설은 집어치우고 계속 내용을 이어 가겠습니다. 한쪽은 승인된 DOCTYPE이 포함된 페이지이며, 한쪽은 DOCTYPE없는 페이지 입니다. IE에서 이처럼 차이를 나타내난 이유는 브라우저의 렌더링 차이 때문입니다.

IE는 기본적으로 렌더링 모드가 strict인지 quirks인지에 따라 렌더링 방식을 결정합니다. 즉 페이지에 선언한 DOCTYPE이나 혹은 DOCTYPE의 생략 여부에 따라 사용되는 렌더링 모드가 결정 된다는 말입니다.

IE는 quirks모드일 경우 width와 height안에서 엘리먼트를 구성합니다. padding과 border또한 처음 설정한 widht와 height안에서 결정 된다는 말이죠. 반면에 strict인 경우는 width와 height크기에 영향을 주지 않은 채로 padding과 border가 추가가 된다는 말이죠. (표현되는 엘리먼트의 크기는 이미지를 참고 하시기 바랍니다. 고생한 결과물은 봐줘야 합니다. ㅡㅡ;)

즉 박스모델은 padding및 border와 결합하여 엘리먼트의 컨텐츠 크기를 결정하게 됩니다. 참고로 margin또한 박스 모델의 일부분이지만 컨텐츠 크기를 결정하는 부분은 아닙니다. 사실 대부분의 브라우저가 W3C박스 모델을 지원하지만, 인터넷 익스플로러만 페이지의 렌더링 모드가 strict인지 quirks인지에 따라서 박스 모델을 결정하다 보니 엘리먼트의 크기가 달라진다고 할 수 있습니다.

사실 두 방법 중 어떤 방법이 더 좋다, 나쁘다 말할 수 없습니다. 서로 자신이 지지하는 방식에 따른 quirks방식이 좋다 strict방식이 좋다고 말할 뿐이죠.

마지막으로 글을 쓰다 보니 단순히 IE의 strict과 quirks에 대해서만 다루게 되었네요.
다음에 기회가 된다면 DOCTYPE에 대해서 다루겠지만, 본 내용을 잘 이해하시려면 DOCTYPE에 대해서 꼭 아셔야 합니다. 내용에 DOCTYPE부분이 많이 빠진 관계로 해당 내용은 링크로 대신합니다.

http://www.w3schools.com/tags/tag_doctype.asp
http://ko.wikipedia.org/wiki/XHTML

그리고 혹시 DOCTYPE 이슈에 관한 내용을 좀더 알고 싶다면(http://www.quirksmode.org/css/quirksmode.html) URL을 참고 하시기 바랍니다.

제목 그대로 함수의 값을 넘길 때 객체를 만들어 넘긴다는 말입니다.
이런 방법은 이미 많은 Javascript의 Framework에서 사용되고 있는 방법입니다. 사실 특이할 것도 없습니다.
그리고 파라메터 변수를 객체로 넘긴다고 했는데... 정확히는 리터럴 형식으로 사용한다는 표현이 더 정확 할 것입니다.

일단 예제를 보면 아래와 같습니다.

function tTest1(param1,options){
	var print = "param1 : " + param1;
	print += "ZIP1 : " + options.zip1;
	print += "ZIP2 : " + options.zip2;
	print += "ADDRESS : " + options.address;
	print += "CNT : " + options.cnt;
    alert(print);
}

fTest1(“값”,{
    zip1:’100’,
    zip2:’200’,
    address:’우리집’,
    cnt:3
});

용어상으론 이렇습니다.
일단 현재 작성하고 있는 내용이 자바스크립트이니 자바스크립트의 리터럴 형식에 대해 몇자 언급 하겠습니다. 사실 리터럴 형식에 대해 작성 하자면 그 내용 자체가 이 글과 성격이 맞지 않기 때문에 간단히 자바스크립의 리터럴 형식으로 설명하겠습니다.

자바스크립트에서 일반적으로 통용되고 있는 형식은 총 3가지 입니다.
배열 리터럴, 객체 리터럴, 혼합 리터럴 입니다.

소스 예제를 보여드리자면....
1. 배열 리터럴 형식

// 자바스크립트 배열 Array 생성자 이용
var aValues = new Array("string" , 24 , true , null);
// JSON 배열 표현식
var aNames = ["Benjamin" , "Michael" , "Scott"];

alert(aNames[0]); // Benjamin 출력
alert(aNames[1]); // Michael 출력
alert(aNames[2]); // Scott 출력

// 여러 가지 데이터 형식 저장
var aValues = ["string" , 24 , true , null ];

// 자바스크립트 객체 Object 생성자 이용
var oCar = new Object();
oCar.color = "red";
oCar.doors = 4;
oCar.paidFor = true;

// JSON 객체 표현식
var oCar = {
  "color" : "red",
  "doors" : 4,
  "paidFor" : true
};

alert(oCar.color); // "red" 출력
alert(oCar.doors); // "4" 출력
alert(oCar.paidFor); // "true" 출력

// 또는

alert(oCar["color"]);
alert(oCar["doors"]);
alert(oCar["paidFor"]);

var aCars = [
  {
    "color" : "red",
    "doors" : 2,
    "paidFor" : true
  },
  {
    "color" : "blue",
    "doors" : 4,
    "paidFor" : true
  },
  {
    "color" : "white",
    "doors" : 2,
    "paidFor" : false
  }
];

function fTest1(param1, zip1,zip2,address,cnt){
//code...
}
fTest1(“값”,”100”,”200”,”우리집”,3)

문자열로 넘어오는 값을 Date형태로 바꿔야 할 때 참조 하기 바람...

//[IE only]
//Variable with Date Format as MM-dd-yyyy:
var dateString = "03-20-2008"	//MM-dd-yyyy

//[IE, FF]
//Variable with Date Format as yyyy/MM/dd:
var dateString = "2008/03/20";  // yyyy/MM/dd

//[IE, FF]
//Variable with Date Format as MM/dd/yyyy:
var dateString = "03/20/2008";  // MM/dd/yyyy

//[IE, FF]
//Variable with Date Format as MMMM dd, yyyy:
var dateString = "March 20, 2008";  // MMMM dd, yyyy

//[IE, FF]
//Variable with Date Format as MMM dd, yyyy:
var dateString = "Mar 20, 2008";  // MMM dd, yyyy

var myDate = new Date(dateString);
document.write("Date :" + myDate.getDate());
document.write("Month : " + (myDate.getMonth()+1));
document.write("Year : " + myDate.getFullYear());

var date1 = new Date();
var sDate1 = date1.setFullYear(2010,4,31);
var sDate2 = date1.setFullYear(2010,5,31);
if(sDate1>sDate2){
	document.write("sDate1 더크다.");
}else{
	document.write("sDate2 더크다.");
}

제목은 자바스크립트 이벤트에 대해서 라고 했지만, 거창한 내용을 쓰는 글을 아니며 그냥 가볍게 쓰는 글이니 읽는 분들도 가벼운 마음으로 봐주시기 바랍니다.

HTML에서 엘리먼트에 이벤트를 거는 경우 아래와 같은 형식을 본적이 있을 겁니다.
<a href="link" onclick="return func()"></a>
<form action="link" method="post" onsubmit="return func(this)"></form>

소스를 보시면 제가 의도하는 바를 눈치 채셨을 겁니다.
onclick="return func()", onsubmit="return func()" 즉 함수앞의 return 구문입니다.

만약 이 부분까지 보시고 내용을 파악 하셨다면 아래 내용은 안보시길 바랍니다. 위 내용에서도 언급했듯이 가볍게 쓰는 글이다 보니 더 이상의 깊이는 없습니다.

위와 같이 return 구분을 사용하면 func()에서 return값을 넘겨주기 전까지 대기 상태가 됩니다.
return false를 하면 이벤트 자체가 취소가 됩니다.

좀더 정확한 소스를 통해서 사용법에 대해 알아 보겠습니다.

        


function func(formObj){
        try{
               if(formObj.a.value == ''){
                       alert("값이 없잖아....!!!!");
                       return false;
               }
        }catch(var e){
               alert(e.message);
               return false;
        }
}

기본적으로 설정 되어 있는 엘리먼트의 padding, margin, outline등의 속성을 없앨때 사용하시면 됩니다.
저 같은 경우는 이렇게 많은 값을 한번에 초기화 하지 않고 필요한 값만 그때 그때 초기화 했었는데... 일단 알아 두면 차후 도움은 될듯합니다.

/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} /* *{margin:0; padding:0;}은 모든 요소에 상속이 되어 컨텐츠가 많은 경우 속도가 느려진다고 합니다 */ 
body { 
    line-height: 1; 
} /* 필요한 경우 적절하게 line-height를 조정하면 될 것 같습니다 */ 
ol, ul { 
    list-style: none; 
} /* 대부분의 리스트를 리스트 스타일을 제거하고 bullet은 백그라운드 이미지로 처리하는 경우 필요합니다 */ 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} /* 인용구 태그의 앞뒤를 정리하는데 쓰입니다. */ 

/* remember to define focus styles! */ 
:focus { 
    outline: 0; 
} /* 이 속성을 쓰면 개체에 포커스가 간 경우 outline이 안 보이기 때문에 저는 지우고 사용합니다. */ 

/* remember to highlight inserts somehow! */ 
ins { 
    text-decoration: none; 
} /* ins 태그는 중간에 삽입된 개체에 대해 씁니다. 기본값은 underline이기 때문에 필요한 정도로 수정하여 쓰면 됩니다 */ 
del { 
    text-decoration: line-through; 
} /* del 태그는 중간에 삭제된 개체에 대해 씁니다. */ 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}