JavaScript/Default2010. 5. 28. 13:27

자바스크립트 이벤트에 대해서...

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

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;
        }
}


위와 같이 onsubmit 이벤트가 발생시  func함수를 호출하고 이 함수에서 돌려주는 값이 false일 경우 submit은 일어 나지 않습니다.

일단 위와 같은 방법으로 사용 할 수 있으며 특정 함수에서도 값 체크를 통해서 대기 상태를 만들어야 할 경우 함수 앞에 return 문을 써주시면 됩니다.
Posted by Jake Kim
HTML/CSS2010. 5. 28. 11:41

브라우저 리셋 CSS

출처: http://meyerweb.com/eric/tools/css/reset/

기본적으로 설정 되어 있는 엘리먼트의 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; 
}
Posted by Jake Kim
JavaScript/Default2010. 5. 28. 11:25

스크립트 작성 위치와 함수 사용시 주의점...

스크립의 작성 위치는 기본적으로 <head>역역과 <body>영역에 작성할 수 있습니다.
<head>영역에 적성할 경우 문서가 로딩되기 전에 스크립트 코드가 전달 되기 때문에 문서의 로딩과 동시에 스크립트 실행이 가능합니다. 하지만 <body>영역에 스크립트 코드가 작성되어 있다면 로딩 되면서 스크립트 코드가 실행 됩니다.

이 부분은 스크립트의 실행에도 중요한 부분을 차지 하지만 스크립트 파일을 불러올 경우 head와 body역영의 위치에 따라 불러오는 차이도 있습니다.

무슨말인가 하면 head에 스크립트 파일이 위치 한다면 화면상 내용이 렌더링이 안되고 있다는 말입니다. 이 렌더링 부분은 브라우저 마다 약간의 차이는 있지만 보통 body 안의 내용을 순차적으로 보여줍니다.

근데 만약 head에 무거운 자바파일이 존재 할 경우(처음 파일을 받기전) body의 렌더링은 head안의 스크립트가 모두 전달 된 후 시작 된다는 말입니다.

즉 당장 렌더링 되는 과정에 필요한 함수가 있다면 또는 렌더링 되는 과정에 인벤트를 발생 할 필요가 있다면 그 함수는 head에 넣어 두는게 좋으며, 그 외의 스크립트는 body 하단 부분에 두는게 렌더링 측면에서 효과가 있을 것입니다.

Posted by Jake Kim

티스토리툴바