안녕하세요. 정상현입니다.: 11월 2009

2009년 11월 13일 금요일

알아두면 유용한 사이트

http://hooney.net/
후니넷

http://www.clearboth.org/wiki/doku.php

클리어 보스

2009년 11월 12일 목요일

CSS를 이용한 앵커네비게이션(?)

자바스크립트를 사용하지 않고 CSS만 이용하여 탭메뉴같은 UI를 만들수 있는 방법이 있어서 블로그 한다.

http://naradesign.net 를 참고 하였으며, 아래 예제 코드는 본인이 직접 작성 하였다. 블로그 에디터로 제작하여, 스타일을 먹이는데 제한되었으므로, 어떤방식인지만 볼수있도록 코딩한다.

a메뉴 내용
b메뉴 내용
c메뉴 내용

내용 1

내용 2

내용 3

위의 코드는 다음과 같다.

위 예제는 컨텐츠의 내용이 가로폭과 세로폭이 동일할경우 사용이 가능하다.

먼저 일반 앵커와 마찬가지로 링크에 앵커값을 넣어준뒤,

해당 div컨텐츠의 아이디로 이동할수 있더록 id값에도 같은 값을 넣어준다.

다음으로 컨텐츠 영역 전체를 같은 크기의 div로 감싼후 overflow 의 값을 hidden 으로 주게 되면,

해당 컨텐츠를 제외한 나머지 영역이 숨겨지므로, 자바스크립트로 구연하는 탭메뉴와 같은 효과를 줄수 있다.

논리연산자

논리연산자에는 세가지가 있다.

두가지는 이항 연산자 이고 하나는 단항 연산자 이다.

AND 연산자

var aNum = 1;

if( ( aNum >0.2 ) && ( aNum >2 ) ){ 실행문 } // aNum 이 02. 보다 크고 2보다 크면 참

AND 연산자는 && 으로 표시하며 두가지 조건식 모두 참일때 참이다.

OR 연산자

var aNum = 1;

if( ( aNum >0.2 ) || ( aNum >2 ) ){ 실행문 } // aNum 이 02. 보다 크거나 2보다 크면 참

OR 연산자는 || 으로 표시하며 둘중 한가지 조건식이 참이면 참을 반환한다.

NOT 연산자

var aNum = 1;

if(!(aNum == 1)) // aNum 이 1과 같으면 거짓, 그렇지 않으면 참

NOT 연산자는 논리식의 참과 거짓을 반대로 바꾸어 준다. 즉 참이면 거짓, 거짓이면 참...

삼항 조건 연산자

단항, 이항이 아닌 삼항 조건 연산자...복잡한 조건식을 한줄에 끝내버릴수 있는 장점이 있다.

ex )

var numberTest = 1.0;

var numberOk = (numberTest > 0.5) ? "number over 0.5" : "number not over 0.5";

위의 예제를 보면 저건식이 참이기 때문에 numberOk 에는 "number over 0.5" 가 배정된다.

삼항 조건 연산자의 형식은 다음과 같다.

-> 조건 ? 참일때의 값 : 거짓일 때의 값

위의 예제를 if 문을 통해서 표현하기 위해서는...

var numberTest = 1.0;

var numberOk = "nan"

if ( numberTest > 0.5 ) { numberOk = "number over 0.5"; }

else { numberOk = "number not over 0.5"; }

뭐....대충 이렇다.

오늘 어떤 코드를 보다가 삼항조건 연산자를 흥미롭게 사용하는 방법을 발겼했다.

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

대충보면 html의 호환성 관련된 것이라는데 자세한것은 좀더 알아봐야 할듯하다.

해당 코드는 브라우저의 차이점을 해결하기 위해 만들어 진 것이라고 한다.

2009년 11월 10일 화요일

자바스크립트 코드의 위치

자바스크립트는 <head> 와 </head> 사이에 삽입하여 사용할수 있으며, <body>와 </body> 사이에 삽입하여 사용할 수 도 있다. 물론 두가지 방법을 혼용하여 사용하는 것 역시 가능하며, css와 같이 자바스크립트도 js 파일을 따로 만들어 마크업 페이지에서 불러와 사용할수도 있다.

w3c 및 모질라 제단에서는 후자인 js파일을 따로 만들어 불러와 사용하는 것 을 권장하고 있다.

//<![CDATA[

자바스크립트 내용

//]]>

</script>

외부 JS 파일을 불러올 경우

*외부 js파일을 불러올 경우 <head>와 </head> 사이에 삽입한다.

2009년 11월 9일 월요일

자바스크립트의 역사

자바스크립트는 웹을 동적으로 표현하고 폼필드를 검사하는등의 행위를 하는데 있어 쉽고 간단한 언어입니다.

자바스크립트라는 것은 독립되어 혼자 프로그램을 실행해 내는것이 아닌 웹브라우저에게 실행할 내용을 이야기 해주는 언어 입니다. java 나 C, C++ 등과는 조금 다르다고 생각하시면 될듯 합니다.

자바스크립트는 다른 언어를 배운적 없어도(물론 다른언어를 배운사람이 접근하기는 매우 쉽습니다) 배우기 쉬운 언어 입니다.

최초에 자바스크립트는 본래 이름이 아니었습니다.

넷스케이프가 라이브 커넥트 라는 서버측 기술을 개발했을때, 서버측 컴포넌트와 연동할 수 있는 클라이언트측의 스크립트 언어를 필요로 하여 '라이브 스크립트' 라는 언어를 개발해 냅니다. 그이후 JAVA 프로그래밍 언어의 소유권 회사인 SUN 사와 제휴를 맺으며, 네스케이프사의 엔지니어가 라이브스크립트를 자바스크립트 라는 이름으로 변경하게 됩니다. 이유는 당시 유명세를 타고있던 JAVA의 이름을 본따 자바스크립트라는 이름으로 변경하면 마케팅 측면에서 유리했기 때문입니다.

네스케이프 사와 썬 사는 1995년 12월 4일에 자바스크립트를 HTML과 자바를 보완하는 언어로 공표 하였습니다.

이에 마이크로 소프트 사는 네스케이프 사에 대항하기 위해 IE와 VB스크립트(비주얼베이직 기반)를 발표합니다. 이후 마이크로 소프트 사는 자바스크립트와 유사한 언어인 J스크립트를 발표합니다.

이에따라서 브라우저/언어 간의 경쟁은 자바스크립트의 도입을 더욱 촉진시켰으며, 통일되지 않은 언어로 인해 개발자 및 디자이너 들은 여러 브라우저에서 호환되는 웹페이지를 만들기위한 부담을 떠안아야 했습니다.

이러한 호환성 문제 해결을 위해 네스케이프 사는 표준화를 추진하여 1996년 자바스크립트의 스펙을 ECMA국제회의에 제출했으며, 1997년 ECMA스크립트의 첫번째 버전인 EMCA-262를 발표합니다.

그 이후 대부분의 회사들은 EMCA-262를 지원하는데 동의합니다.

ECMA-262의 두 번째 버전은 첫버전의 수정/보완한 메인터넌스 릴리즈 이며, 현재 버전인 세번째는 1999년 12월에 발표 합니다.

현재 ECMA-262에 XML기능을 추가한것을 2004년에 발표하였습니다.

지금사용하고 있는 자바스크립트 버전은 1.6이며, 여기에 2004년 발표한 E4X가 부분적으로 구현되어 있습니다.

중요한점은 여러가지 구 버전의 스크립트가 현재까지 사용되고 있는것입니다.

과거에 만들어진 스크립트소스틀이 웹을통해 계속적으로 쓰임으로서 문제가 계속되는 것 이지요.

브라우저	스크립트 지원 사항
IE 6.X	ECMA-262(V3) / J스크립트 5.6
IE 7.X	ECMA-262(V3) / J스크립트 5.6
오페라 8 및 8.5	ECMA-262(V3) / 자바스크립트 1.5
파이어폭스 1.5	ECMA-262(V3) 및 ECMA-357(E4X)일부분/자바스크립트 1.6
사파리 2.X	ECMA-262(V3)
카미노 1.0	ECMA-262(V3) / 자바스크립트 1.5
넷스케이프 8.1	ECMA-262(V3) / 자바스크립트 1.5
여러 소형 무선기기의 브라우저	다양

자바스크립트는 다양한 플랫폼과 환경에서 실행되므로 여러 운영체제에서 동작하는 웹페이지 및 프로그램을 개발하는데 사용할수 있습니다. 또한 대부분의 브라우저에 내장되어 있기 때문에 별도의 다운로드나 설치가 필요 없다는 장점이 있습니다.

대부분의 브라우저는 자바스크립트 언어의 일정부분을 공통적으로 구현해 놓았습니다. 이로써 대부분의 코드가 여러 브라우저에서 호환되게 됩니다.

그렇다면 브라우저간의 호환성 문제는 왜 생기는 걸까요?

대부분의 브라우저 호환성 문제는 자바스크립트 그 자체보다 문서객체모델(DOM)이 서로 다른것 때문입니다.문서 객체 모델의 엘리먼트를 표현하는 방식이 브라우저 마다 다르게 구현되어 있어 호환성 문제를 일으키는 것이지요. 또한 CSS가 처리하는 부분과 자바스크립트가 처리하는 부분이 중복되는 문제도 있습니다.

브라우저 회사들이 시장을 선점하기 위해 DOM을 경쟁에서 이기기 위한 무기로 삼아 전쟁을 벌이는 동안

W3C는 DOM을 표준으로 만들었습니다. 많은 브라우저 회사들은 W3C와 함께 작업하여 1998년 10월에 DOM레벤1이라는 새 표준을 만들었습니다.

하지만 그전 코드들과의 충돌등 여러가지 문제가 존재하는것이 사실입니다.

- 출처 : JavaScript:How Did We Get Here? / O'Reilly Network, April 2001/ O'Reilly 자바스크립트 for 웹 2.0 / 에이콘 제레미 키스 저자 DOM스크립트 / 개인지식-

2009년 11월 6일 금요일

select 활성 비활성

DOM 을 이용한 셀렉트 박스의 활성/비활성 예제이다.

회사에서 작은 프로젝트중 필요해서 만들어 봤다.

<head>와 </head> 사이에 아래의 스크립트를 넣는다

</script>

그리고 body 안에 있는 셀렉트에는 id 값에 'text_select' 를 넣는다

tasklock() 함수가 호출되면 셀렉트 박스가 잠기며, taskopen() 함수가 호출되면 셀렉트 박스가 활성화 된다.

input 의 text 등에서도 활용이 가능하다.

버튼을 이용하여 테스트 하려면..

이와같이 테스트 할수 있다.

익스 6,7,8, 및 파이어폭스 최신버전에서 테스트 결과 이상없었다.

2009년 11월 5일 목요일

doctype 에대하여

흔히들 많이 사용하는 에디트 플러스나 드림위버등의 프로그램에서 html 파일을 생성할경우 문서 상단에 자동으로 doctype 이 생성된다. 따라서 대부분의 퍼블리셔 및 디자이너들은 이를 무시하고 넘어가기 쉽다.

혹 이로 인하여 어떤 개발자는 doctype을 제거하고 프로그램을 입히기도 한다.

doctype은 문서의 종류, 성격을 나타낸다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위 예는 XHTML 1.0 Transitional 로 지정했다.

doctype 을 Transitional 로 지정하면 대부분의 브라우저에서 standard모드로 인식한다.

모드는 크게

strict, standard, quirks으로 나뉜다.

strict 모드는 문법과 구조가 모두 맞아야 한다.

standard 모드는 어느정도 구버전의 속성 혹은 태그까지 허용된다.

quirks 모드는 doctype 설정을 하지 않았을경우 활성화 되며, IE는 과거의 브라우저를 기준으로 렌더링 하게 된다.

과거 브라우저는 표준화 되지 않고 각각 렌더링 하는 방식과 각 엘리먼트의 속성값이 달랐기 때문에 현제 표준화된 브라우저를 통해 과거의 방식으로 만들어진 페이지를 보게될경우 심하게 틀어지게 된다.

이를 위해 각 브라우저 개발자들은 호환성 모드를 만들어 두어 doctype이 지정되 있지 않을경우 과거브라우저 모드로 페이지를 표시한다.

자바스크립트의 경우 과거 네스케이프와 마이크로 소프트 사 간의 경쟁으로 표준화 되지 않은 스크립트들이 많이 생겨났으며, 물론 현재는 어느정도 표준화 되어 있지만 과거에 사용되었던 스크립트들이 최근 브라우저와 호환되지 않는경우가 많기 때문에 doctype을 제거하는 경우가 있다.

하지만 이는 좋지 않은 방법이며, 가급적이면 doctype을 넣고, 이와 호환되는 스크립트를 이용하여 코딩하는것을 추천한다.

현재 w3c에서 권고하는 doctype은

http://www.w3schools.com/tags/tag_DOCTYPE.asp

에서 확인할수 있다.

더블마진 플로트 버그

IE6이하버전에서 float 가 지정된 엘리먼트의 마진을 두배로 표시하는 버그가 있다.

예로 float:left 되어 있는 엘리먼트에 margin-left:40px 을 주면 IE6 에서 마진 레프트 값이 80px로 먹는 버그이다.

이버그는 해당 엘리먼트에 display:inline 을 지정해 주면 해결되며, 해당엘리먼트는 float 지정이 되어 있으므로 실제 화면상에서는 아무런 영향을 주지 않는다.

2009년 11월 4일 수요일

parseFloat()

parseFloat() 은 자바스크립트 엔진이 문자열로 간주하는 변수를 숫자로 사용할수 있다.

이외에 parseInt , Number 가 있다.