Tag Archives: 자바스크립트

[코딩팁] JS 함수 리터럴을 실행하는 방법

자바스크립트에는 다음과 같이 표현하는 함수 리터럴이 있습니다.

function(){
    alert('Run!');
}

함수 리터럴은 다른 함수에 인수로서 사용되기도 하지만, 독립적으로 실행되기도 합니다. 독립적으로 실행할 때는 주로 다음과 같이 함수 리터럴 양쪽을 괄호로 감싼 후 다시 괄호 한 쌍을 추가해주는 방식을 주로 사용합니다.

(function(){
    alert('Run!');
})();

여기서 함수 리터럴을 감싸는 괄호가 없으면 에러가 발생하기 때문에 괄호는 반드시 필요합니다. 하지만, 괄호가 너무 많아서 보기에 좋지 않다 싶으면 다음과 같은 방법을 통해 괄호를 생략할 수도 있습니다.

!function(){
    alert('Run!');
}();

사실 ! 대신+-를 붙여도 상관없습니다. 중요한 것은 function() 앞에 의미없는 연산 등을 추가하면 된다는 것입니다. 그래서, 앞서 말한 것보다는 지저분하지만 다음과 같은 방법도 사용할 수 있습니다.

// with comma
0,function(){
    alert('Run!');
}();
// with AND operation
1&function(){
    alert('Run!');
}();
// with multiplication
2*function(){
    alert('Run!');
}();

이 팁을 활용하면 코드를 조금 더 깔끔하게 만들 수 있겠습니다.

예제로 배우는 자바스크립트 1 – 문서에 포함하는 방법

<script type="text/javascript">
alert(1);
</script>

자바스크립트를 문서에 포함할 때는 <script>를 사용합니다. 웹 브라우저는 여는 <script>와 닫는 </script> 사이에 작성된 코드를 자바스크립트 엔진으로 전달하고, 엔진은 자바스크립트 코드를 해석하고 실행합니다.

type 속성

HTML5 이전에는 <script>요소에는 type 속성은 반드시 필요했습니다. HTML5 부터는 type 속성을 생략할 수 있으며 생략하면 text/javascript가 기본값으로 사용됩니다. 그러나 HTML5는 여전히 초안 상태이므로 아직까지는 type 속성을 반드시 사용해야 합니다.

예전에는 language 속성을 사용하기도 했으나 HTML4부터 폐지 예정(deprecated)이 되었으므로 가급적 사용하지 않는 것이 좋습니다.
Continue reading

DOM2 Range를 사용한 pasteHTML 구현

Range 객체는 문서에서 선택된 영역의 데이터를 추출하거나 조작할 때 사용하는 객체입니다. 인터넷 익스플로러를 제외한 대부분의 브라우저는 DOM Level2에 정의된 Range 스펙을 따르고 있습니다. DOM은 표준 스펙이지만, IE TextRange의 pasteHTML 메소드를 사용할 수 없다는 점은 아쉬운 부분입니다. 예를 들어, IE에서는 다음과 같이 선택 영역의 텍스트를 치환하거나 새로운 텍스트를 삽입할 수 있었습니다.

var sel = document.selection;
 if (sel) {
     var rng = sel.createRange();
     if (!rng) rng.pasteHTML("<strong>Hello, <em>World!</em></strong>");
 }

이 기능을 DOM Level2의 Range 객체를 사용하면 다음과 같이 구현할 수 있습니다.
Continue reading

자바스크립트 인기 순위 및 시장 점유율 (2011년 2월)

인기 순위

TIOBE 언어 인기도 순위에 따르면 자바스크립트의 이번 달 인기 순위는 9위이다. 몇 달전에 10위 밖으로 밀려난 듯 했는데 다시 회복했다.

프레임워크 점유율

웹 기술을 주로 조사하는 W3Techs에 따르면[1], 아직까지 어떤 프레임워크도 사용하지 않는 웹 사이트가 60% 가량 되고 이 수치는 조금씩 감소하고 있다(링크 참고). 반면 jQuery는 조금씩 성장하여 30%를 넘어서고 있으며 이는 전체 프레임워크에서 75.6%를 차지하는 비율이다.

자바스크립트 라이브러리 사용 현황
2010
10월1일
2010
11월1일
2010
12월1일
2011
1월1일
2011
2월1일
2011
2월23일
사용안함 64.8% 63.9% 62.8% 61.8% 60.8% 60.0%
jQuery 25.0% 26.0% 27.2% 28.3% 29.3% 30.2%
MooTools 4.0% 4.0% 5.0% 5.1% 5.1% 5.2%
Prototype 4.9% 4.9% 4.9% 4.8% 4.8% 4.8%
Script.aculo.us 3.5% 3.4% 3.4% 3.4% 3.4% 3.4%
YUI 2.5% 2.5% 2.5% 2.6% 2.6% 2.6%

자바스크립트 사용현황 (2011년 2월)

프레임워크 내에서의 점유율만 계산하면 jQuery가 75.6%로 단연 선두이고, 2위가 MooTools 13.0%, 3위가 Prototype 11.9% 정도이다. Dojo, Ext JS는 예상외로 0.5%도 안되는 부진한 점유율을 보이고 있다(자세한 자료는 링크 참고).

  1. [1] 이 사이트의 자료를 신뢰할 수 있는지에 대해서는 확신이 없으나 다른 자료들과 수치가 크게 다르지 않는 점으로 미루어 어느 정도는 믿을만하다고 판단한다.

KWAG 워크샵 발표 자료

클라이언트측 스크립트 기법

Lecture 페이지에 13번째 KWAG 워크샵에서 발표했던 ‘클라이언트측 스크립트 기법(Client-side Scripting Techniques for WCAG 2.0)’의 슬라이드를 공개했습니다.

부족한 자료지만 필요하신 분들이 계시다면 잘 사용해주셨으면 합니다. ^^