때때로, JavaScript의 type coercion은 유용할 때가 있다.

var myVar = "1.234"; // string 
+myVar; // 1.234 
typeof +myVar; // number 
(+myVar).toFixed(2); // "1.23" string 

하지만, String을 다룰 때는 주의가 필요하지.

String("1.234") instanceof String; // false 진짜? 
(new String("1.234")) instanceof String; // true 어디보자... 
String("1.234") == (new String("1.234")); // true 설마? 
String("1.234") === (new String("1.234")); // false 그렇군. 
 
(function(){return 2*3;}).toString() === (function(){return 6;}).toString(); // true in FF & Opera, false in IE & WebKit 

이쯤 되면 다음과 같은 결과도 미리 예상해 볼 수 있다.

0 == "0"; // true 이젠 안 속아. 
0 === "0"; // false 그렇지. 

세상 속 사실로 알려진 명제도 JavaScript의 요지경 속에 한 번 빠지면,

3 > 2 > 1; // false 

이것은 아래와 같은 true의 변심에서 시작되었음을 알 수 있다.

(true + 1) === 2;​ ​// true 
(true + true) === 2; // true 
true === 2; // false 
true === 1; // false 

어디 한 번 JavaScript의 요지경 속으로 빠져 봅시다! (⊙﹏⊙)

2010년이 돼서도 차별대우는 어쩔 수 없다.

var isMSIE = /*@cc_on!@*/false;
 
// or shorter one next 
 
var isMSIE//@cc_on=1 

Dean Edwards씨가 몇 년전 쌀짝 공개했던 코드로 알려지게 되었는데, Internet Explorer에서만 채용된 JavaScript의 짝퉁, JScript의 Conditional Compilation Statements때문이란다.

혹은 더 짧게,

if(!+"\v1") // true only in IE 

jQuery가 네 번째 생일을 맞아 새 버전(1.4)을 발표했다.

지금 당장 jQuery Minified 버전과 jQuery Regular 버전을 내려받아 둘러보고 자신의 사이트에 바로 적용시킬 수가 있다. 물론 Google에서 호스팅하고 있는 놈을 자신의 사이트에 직접 추가놓는 것이 여러모로 유리할 것이다.

참고로, WordPress에 새로운 버전의 jQuery를 추가할 때는 plugin들의 중복 loading을 막기위한 약간의 주의가 필요한데, 사용하고 있는 테마 디렉토리 밑에 있는 functions.php 파일에 다음과 같이 추가해 준다.

if ( !is_admin() ) {
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"), false, '1.4.0');
  wp_enqueue_script('jquery');
}

새 버전에서는 자주 쓰이는 method들의 function calls 횟수를 줄이면서 실행 속도가 무척 빨라졌다고 하니 반가운 일이다.

다음은 코드로 본 새로운 기능들 중 눈에 띄는 것들:

// Easy Setter Functions 
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});
 
// Quick Element Construction 
jQuery("<div/>", {
  id: "foo",
  css: {
      height: "50px",
      width: "50px",
      color: "blue",
      backgroundColor: "#ccc"
  },
  click: function() {
     $(this).css("backgroundColor", "red");
  }
}).appendTo("body");
 
// Per-property Easing 
$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
    $(this).after("<div>Animation complete.</div>");
  });
});
 
// Event Multi-binding 
$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

더불어서, jQuery API도 자기만의 sub-domain에 자리잡게 되었다: http://api.jquery.com/
PDF 혹은 JPEG 형식의 jQuery 1.4 API Cheat Sheet과 jQuery 1.4 iPhone reference app도 챙겨놓고 볼 일.

추가 참고 문서: jQuery 1.4 Resources For Developers | W3Avenue

갱신: 과거 전통(?)에 어긋나지 않게 일주일여 만에 버그를 잡은 jQuery 1.4.1 버전이 발표되었다.

웹 접근성을 논할 때마다 하나의 권고 사항으로 얘기되는 것이 바로 그림을 설명하는 대체 텍스트(alternative text)를 꼭 입력해 주라는 말이 있다. 이 alt 속성으로서의 올바른 사용 유형이라면, 그림의 성격에 따라 글자 형태의 로고 파일의 경우에는 간단하게 읽히는대로 써주면 될 것이고, 사진일 경우 전달하고자 하는 내용이나 상황을 설명해 주면 될 것이다.

원래 이 alt 속성에 지정되어 있는 텍스트는 브라우저의 그림 파일 표시 기능을 꺼주지 않는 한 그림 밖으로 보여질 수가 없는 운명이다. 하지만, 그림 밑에 주석을 달고자 할 경우, 이 대체 텍스트가 그 자리에 안성맞춤이 될 수 있지 않을까? 그래서, jQuery를 이용한 간단한 구현 방법을 소개하고자 한다.

먼저, 글에 올려진 주석을 달고자 하는 img를 찾고나서, alt 속성에 있는 대체 텍스트를 구해야 한다.

var targetImg = $('.entry img');
var altText = targetImg.attr('alt');

차후 CSS로 스타일의 정의를 쉽게 하기 위해서 특정 class 값이 주어진 div으로 감싸주는 것이 편할 것이다. 그리고 나서, 그림 밑에 달릴 주석을 위한 공간을 마련해준다. 여기에는 다음과 같은 방법이 사용될 수 있다:

targetImg.wrap('<div class="img-with-description"></div>').after('<span class="img-description">' + altText+'</span>');

여기서 하나 고려해봐야 할 것이, 만약 그림이 글 내용 중에서 float되어 있는 상태라면, 이를 감싸고 있는 div도 같이 float되게 해주어야만 원래 의도한 그림 표시 스타일을 유지할 수 있다. 그래서, img의 float 속성과 너비값을 알아내야 한다.

var imgWidth = targetImg.width();
var floatProperty = targetImg.css('float');

이렇게 해서 얻어진 float 속성을 가지고 그대로 이 속성값을 감싸는 div에도 적용해 준다. 만약, float 속성이 ‘none’이라면 그림 파일은 중앙 정렬된 상태라고 가정할 수 있고, 따라서 감싸는 div도 margin 값으로 중앙 정렬해준다.

var descriptionImage = $('div.img-with-description');
if(floatProperty == 'none') // aligned center 
  descriptionImage.width(imgWidth).css('margin', '0 auto');
else
  descriptionImage.width(imgWidth).css('float', floatProperty);

마지막으로, 감싸주는 div과 주석 부분을 위한 적당한 CSS를 정의해주면 되겠다.

이렇게 해서 완성된 코드는 아래의 페이지에서 확인할 수 있다:
➡ img 속 alt 속성에 있는 내용을 그림 밑으로 끄집어내어 표시해주는 본보기 페이지

alt 속성의 색다른(alternative) 봄나들이 외출.

JavaScript 코딩을 하거나 CSS 디자인을 하다 보면, 웹 문서의 DOM에 위치한 특정 element를 끄집어내기 위해 CSS selector를 지정해 주어야 할 일이 많은데, 복잡한 구조 속에 위치한 특정 element만을 끄집어 내기 위한 맞춤형 selector를 정의하기란 종종 난처할 때가 있다. 이럴 때 SelectorGadget은 안성맞춤의 CSS selector를 생성하는데 도움을 준다.

SelectorGadget bookmarklet을 책갈피 해놓고, 필요할 때마다 실행해서 point and click만으로 족집게 CSS selector를 얻을 수 있으니 아주 요긴한 도구가 될 듯. 아직 IE7에선 약간 문제가 있단다.