자바스크립트의 변수(variables)에 대해 이것저것 공부한 것.
자바스크립트(ECMA262)는 우선 Sun의 JAVA와는 전혀 상관이 없다는 것은 다들 알고 있는 사실이죠.

자료형의 종류
  • number : 숫자로 된 데이터. 숫자, NaN(Not a Number), infinity(범위 벗어난 숫자) 형태 중 하나.
  • string : 문자 데이터. ""(겹따옴표, 더블쿼테이션)으로 둘러싸인 형태. length() 메소드를 가짐
  • boolean : TRUE, FALSE 의 두가지 값 존재. 참과 거짓, 0 또는 1의 의미.
  • object : new 키워드로 예약한 객체, BOM or DOM, function, object, null
  • undefined : 정해져 있지 않은 것, 또는 아예 없는 것.

* HTML의 폼에서 input으로 들어가는 값은 전부 string으로 인식하기 때문에 만약 계산에 필요한 숫자형이라면 형변환을 해줘야 합니다.

* 숫자형(number)으로 형변환하는 방법은 Number(), parseInt(), parseFloat() 사용가능.

cf. parseInt() 함수는 숨겨진 두번째 인자가 있는데, parseInt("23",16); 등으로 두번째 인자 값을 숫자로 넣어주면 해당 진수로 변환시켜 줍니다. 디폴트는 10이며 2, 8, 10, 16 등을 사용가능.
cf2. 또는 숫자형 데이터는 앞에 0을 붙이면 8진수, 0x를 붙이면 16진수가 된다.
a = 10; // 10진수 (10)
a = 010; // 8진수 (8)
a = 0x10; // 10진수 (16)
cf3. Number(), String() 등의 함수는 이미 예약되어 있으며, 해당 형으로 형변환하는 기능을 함.

형변환을 잘 알고 있다면 자바스크립트의 소스 분석이 용이합니다.

형변환하기
  • String to Number : Number(), parseInt(), parseFloat()
  • Boolean to Number : false - 0, true - 1
  • Object to Number : valueOf, toString, NaN
  • String to Boolean : length=0 이라면 False, 그외에 length>0 이면 True
  • Number to Boolean : 0 이면 False, 그외에 모든 경우(음수,양수 포함)는 True
  • object = true
  • NULL, undefined = false

모든 연산자는 숫자로 형변환되어 처리되지만 "+" 연산자는 예외입니다. "+" 는 문자열 병합 기능도 가지고 있기 때문입니다. 따라서 "+" 연산자를 사용하여 연산할때 해당 변수 중 하나라도 string형이면 나머지 변수도 모두 string형으로 강제 형변환됩니다. (String Append 현상)

ex>
2 + true + "3" + false 를 연산할 때.
순서대로 계산되기 때문에 2+true는 true가 숫자형인 1로 바뀌어 3이 됩니다.
3+"3" 은 string형이 하나 존재하기 때문에 모두 string형으로 바뀌게 되어 "33"이 됩니다.
"33"+false 도 역시 string형이 존재하므로 최종 값은 "33false"


변수 선언하기
  • 지역변수 : 함수 내에서 var 예약어 사용. (함수 내에서만 사용하는 별도의 변수 생성)
  • 전역변수 : 함수 외부, 또는 global area에서 var 예약어 사용하거나, 그냥 변수를 만들면 문서 내에서 계속 사용가능.
변수명 규칙
  • 영문자, 숫자, _(밑줄) 사용 가능. 변수명의 첫 문자는 영문으로 시작.
  • 자바스크립트 예약어는 사용불가능. (var, this, if 등)
  • 한글 변수명은 원래 사용할 수 없었지만, 자바스크립트 내의 string은 유니코드로 처리되기 때문에 현재는 한글 변수명을 사용할 수 있습니다. (다만 영문 변수명 권장)

Posted by 아마티

2007/09/19 12:10 2007/09/19 12:10
, , ,
Response
No Trackback , No Comment
RSS :
http://minicube.kr/blog/rss/response/54

XRAY - 박스모델 표시기(Bookmarklet)

ajax나 자바스크립트에 관련된 소식을 많이 알려주는 해외 블로그 중에 ajaxian 이라는 사이트가 있습니다. 시간이 나면 자주 방문해서 글을 읽으면서 영어를 읽는 연습(?)도 하고 있습니다만, UI개발자로서 흥미있는 소식이 업데이트 되어서 스크랩 해봅니다.

ajaxian's article : http://ajaxian.com/archives/xray-your-internet-explorer/
Original Post : http://westciv.com/xray/


XHTML/CSS 개발을 하다 보면 박스 모델이란 난관에 부딪히게 됩니다. HTML의 각각 Element를 감싸는 요소는 margin, padding, border 등이 있는데, 컨텐츠를 박스 형태로 감싸는 이 요소를 더해서 정리한 것을 박스모델이라고 하죠. 그런데 이 박스모델을 렌더링 하는 방법이 각각의 브라우저들 끼리 차이가 발생합니다.
그래서 HTML 개발 시에는 이 박스 모델을 잘 파악하는 것도 일인데요, 이 작업을 도와주는 툴로는 IE의 플러그인인 Developer Toolbar 라던가 Firefox의 FireBug 같은 툴이 유명합니다.
FireBug 는 박스모델 외에도 여러 편리한 점이 많아서 유용하게 사용하는데 아무래도 문제는 IE 였습니다. IE에서 사용할 수 있는 Developer Toolbar 는 파이어폭스의 그것에 비하면 상당히 부실하죠. 그래도 어쨌든 없는 것보단 낫기 때문에 그럭저럭 사용하고 있었는데요...

XRAY 라는 스크립트가 개발되었다고 하네요.
이 툴은 자바스크립트로 되어 있고, 북마크 형태로 제공됩니다. 사용을 하면 아래 화면처럼 XRAY 안내가 뜨는데요.. 이상태에서 어떤 엘리먼트를 클릭하면 해당 엘리먼트의 정보를 상세히 보여줍니다. 엘리먼트의 이름, ID, class 부터 시작해서 position, border, margin, padding 등의 정보를 비쥬얼하게 보여준답니다.

사용자 삽입 이미지

사실 예전에 발표되었을때는 정작 중요한 IE6 이 지원이 안되서 이게 뭐야! 하면서 그냥 넘어갔었는데 (파이어폭스에선 그냥 FireBug를 쓰는게 훨씬 낫죠) 이번 발표된 XRAY 0.91a 버전의 경우엔 IE6 버전도 지원된다고 합니다!! 그래서 현재 저도 북마크해놓고 유용하게 사용중입니다.
정식으로 사용 가능한 브라우저는 IE6 이후, Webkit & Mozilla 계열 브라우저(Safari, Firebox, Camino, Mozilla)를 지원한다고 하는데 아쉽게 오페라를 지원하지 않는군요...

사용방법은 간단합니다. 사이트에서는 북마크렛(bookmarklet) 형태로 지원한다고 하는데요, 위에서 밝혔듯 북마크로 링크를 저장한 후 필요할 때에 클릭해서 사용하면 됩니다.

사용자 삽입 이미지

이렇게 XRAY버튼에서 오른쪽 마우스버튼을 클릭한 후 즐겨찾기에 추가(F) 를 선택하시고 이걸 "연결" 탭에 추가하시면 됩니다. (IE기준)

사용자 삽입 이미지
그 후 아무 사이트나 열어보시고 저 북마크를 클릭하면 가장 위의 그림처럼 안내 메세지가 뜨구요, 그 후부터 XRAY 툴을 사용할 수 있습니다. 그만 사용할 때는 사이트를 리로드(F5)하거나, X버튼을 클릭하시면 됩니다.

ajaxian.com 은 재미있는게 많이 올라와서 좋아요~ ㅋㅋ

Posted by 아마티

2007/08/30 20:10 2007/08/30 20:10
, , , ,
Response
No Trackback , 2 Comments
RSS :
http://minicube.kr/blog/rss/response/50


블로그 이미지

Professional front-end UI Developer.

- 아마티

Notices

Archives

Authors

  1. 아마티

Calendar

«   2012/02   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      

Site Stats

Total hits:
212475
Today:
84
Yesterday:
69