JavaScript에서 사용되는 변수들이 가리키는 객체의 유형은 항상 유동적으로 변할 수 있기 때문에 변수에 담겨있는 객체(Objects)의 유형을 검사(type checking)하는 일은 자주 있으며 그 방법에는 두 가지가 있다.
첫 번째 방법은 typeof 연산자를 사용하는 방법. 이것은 변수에 담겨있는 객체의 유형을 String 값으로 돌려준다.
if ( typeof num == "string" )
num = parseInt( num );
if ( typeof arr == "string" )
arr = arr.split(",");
하지만, 이 방법은 Object와 Arrary 혹은 맞춤 Object를 구분하지 못하고 그냥 “object”로 인식하기 때문에 이것을 구별하려면 모든 JavaScript Object들이 가지고 있는 constructor 속성을 확인하면 된다.
var obj = { an: "object" };
var arr = [ an, arrary ];
var myObj = new MyObject();
if ( obj.constructor == Object ) alert('This is an object!');
if ( arr.constructor == Array ) alert('This is an array!');
if ( myObj.constructor == MyObject ) alert('My holy object!');
아래는 웹 문서에서 많이 쓰이는 대표적인 활자들과 그들의 올바른 HTML entities 표기이다.
- “ 큰 시작 따옴표 “
- ” 큰 마침 따옴표 ”
- ‘ 작은 시작 따옴표 ‘
- ’ 작은 마침 따옴표 ’
- – 반각 대시 기호(en dash) –
- — 전각 대시 기호(em dash) —
- − 빼기 −
- × 곱하기 ×
- … 말 줄임표 …
웹에서의 활자 표시는 종이 인쇄 역사 보다 훨씬 짧은 이유로 제대로 된 활자를 표현하는 데는 비교적 더 많은 제약을 받지만, 그것이 불가능한 것도 아니고 단지 아직 잘 알려지지 않았을 뿐이다.
(여기서는 WordPress의 콩나물 따옴표 문제로 설치했던 Unfancy Quote Plugin 때문에 따옴표들이 밋밋하게 표시된다.)
참고 글:
예전에는 블로그 글에 포함된 코드의 문법을 색깔별로 구분하기 쉽게 표시되도록 WordPress의 plugin인 iG:Syntax Hiliter를 사용했었다. 하지만, 보이는 코드의 모양도 별로 마음에 들지 않거니와 코드 속에 쓸데없이 자동으로 포함되는 특정 요소 관련 링크들은 오히려 코드의 해석을 어렵게 하고, 문서의 구조까지 해치는 부작용이 있었다. 물론 지원되는 언어들도 한정적이었고.
그래서, 바램이었다면 평소 애용하는 TextMate를 이용해서 지원하는 여러 가지 다양한 테마들에서 보이는 코드의 모양을 그대로 블로그에도 옮겨놓을 수 없을까 궁금해하던 차에, 찾아보니 딱 내가 바라던 방법을 소개해 놓은 글을 발견하게 되었다. 그 후로 소개된 요령을 참고 해서 이미 올려두었던 코드들을 일일이 바꾸면서 이곳에도 비슷하게 적용해서 만족하게 사용하고 있다. 물론 코드를 올릴 일이 있으면 그 전에 TextMate에서 또 한 번의 변환 과정이 필요하지만 “Create HTML From Selection” 메뉴에 단축키만 지정해 두면 이것 또한 번거로운 작업은 아니다.
그런데, 사람의 욕심은 끝이 없어서인지 작업은 여기서 멈추지 않고, 이렇게 변환돼서 예쁘게 올려진 코드라도 실제로 쓰려고 복사할 때는 줄 바꿈이라든지 코드의 원래 모양이 제대로 전달되지 못하는 부작용이 있을 수 있다. 이것을 해결하기 위해서는 블로그에서 코드의 원래 모양을 그대로 전달해 주는 또 하나의 간단하면서도 깨끗한 버전의 모양새를 선택할 수 있게 해야 하는데, 일반적으로 떠오르는 방법으로 JavaScript의 힘을 빌려 새로운 창에 보여주는 방법이 있지만, 이것도 그리 깔끔한 방법은 아닌 듯 보였다.
마침, 요새 주무르고 있는 jQuery에서 제공하고 있는 몇 가지의 동작 효과들을 사용하면 간단하게 원하는 기능을 구현할 수 있을 것 같아서 바로 적용해 보았고, 참고를 위해 그 적용 방법을 여기에도 남겨둔다. jQuery를 이용해서 코드의 모양새(style)를 자동으로 바꾸어 주기(이)란 제목의 글 마저 읽기 →
WordPress에다 종종 프로그램 코드를 붙여두는 편이지만, 항상 자동 변환되는 이 콩나물 모양의 따옴표(curly quotes)가 골치거리였다. 특히나 특정 단어를 제대로 감싸주지 못하고 제멋대로 그 방향이 틀어지는 버그는 WordPress 2.2 버전에나 가서야 고쳐질 예정이지만, 이 문제가 심각한 것은 올려놓은 코드를 복사해서 그대로 프로그램 상에 적용했을 경우 제대로 작동하지 않거나 Internet Explorer에서는 쌍으로 된 꽁나물 따옴표가 제대로 표시되지도 않는 문제가 있기 때문에 차라리 자동 변환 기능을 없애주는 것이 상책이다.
결국 웹에서 찾은 Unfancy Quote Plugin를 설치해 주었다.
‘ ’ “ ” 놈들의 머리만 따서 밋밋한 ' "로 되돌려 준다.
여러 JavaScript Library들 중에서 최근에 와서야 발견했지만 아주 마음에 드는 놈인 jQuery의 이모저모를 맛보고 있는데, 마침 TextMate 용 jQuery Bundle이 제공되고 있어서 바로 설치해서 사용하고 있다.
그런데, 사용하다 보니 jQuery bundle에 정의되어 있는 snippet들은 HTML 문서에서는 바로 사용할 수 없다는 사실을 알게 되었다. 실험 목적으로 HTML 문서에 바로 JavaScript를 삽입해서 쓸 경우에는 이 점이 무척 아쉬운 부분이다.
하지만, 해결책은 바로 옆에 있었다.
TextMate의 Languages Bundle Editor를 열고 HTML bundle을 선택한 후에, 다음과 같은 코드를 HTML의 기본 pattern이 정의되어 있는 부분(16 번째 줄 부터 시작 됨)에 추가해 주면 된다.
{ name = 'source.js.jquery.embedded.html';
begin = '(?:^\\s+)?(<)((?i:script))\\b(?![^>]*/>)';
end = '(?<=</(script|SCRIPT))(>)(?:\\s*\\n)?';
patterns = ( { include = 'source.js.jquery'; } );
},
TextMate을 재실행하면, HTML bundle이 적용된 환경에서도 바로 jQuery snippet들을 불러와서 사용할 수 있게 된다. 🙂
jQuery bundle의 다음 버전에서는 아마도 위와 같은 추가 설정 작업이 필요 없도록 수정될 모양이다.
추가: Getting jQuery bundle to work within script tags embedded in HTML