달력

5

« 2021/5 »

  •  
  •  
  •  
  •  
  •  
  •  
  • 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
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  
Pro Javascript를 전체적으로 한번 흩어 보고나서는, Javascript에 대한 이해도가 무척 높아졌다. 물론 당연히 알아야 할 것들을 그동안 모르는 채 잘 지내왔을 뿐이다.
내가 알던 쉬운 자바스크립트는 지금의 것과는 너무도 많이 달랐다. 아니 자바스크립트의 가능성과 기능에 대해서 너무 간과해 왔는지도 모른다.

HTML의 DOM 구조는 개발자로 하여금 문서의 구조을 쉽게 이해할 수 있도록 도와주고, 이는 CSS와
Javascript를 통해서 쉽게 제어할 수 있어 매우 유용하다.

<html>
<head>
<title>Introduction to the DOM</title>
<script>
    // We can't manipulate the DOM until the document
    // is fully loaded
    window.onload = function(){
    // Find all the <li> elements, to attach the event handlers to them
    var li = document.getElementsByTagName("li");
    for ( var i = 0; i < li.length; i++ ) {
        // Attach a mouseover event handler to the <li> element,
        // which changes the <li>s background to blue.
        li[i].onmouseover = function() {
            this.style.backgroundColor = 'blue';
        };

        // Attach a mouseout event handler to the <li> element
        // which changes the <li>s background back to its default white
        li[i].onmouseout = function() {
            this.style.backgroundColor = 'white';
        };
    }
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the
DOM is awesome, here are some:</p>
<ul>
    <li id="everywhere">It can be found everywhere.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>

위의 코드는 "Pro Javascript"에 나오는 예제인데, HTML은 XML의 구조를 가지고 있지만, 가장 단순한 형태중에 하나로 문서를 구성하는 Object를 정의하고 있다. 이러한 구조는 "태그(Tag)"라는 형태로 정의되어지는데, 위 예제는 태그에 Event의 handler를 할당하는 코드이다.

코드에 대한 설명을 덧 붙이자면,
1. var li = document.getElementsByTagName("li");
    - 위 코드를 통해서 HTML 문서에 정의된 "li" 태그들의 리스트를 가져와서 var li에 저장한다.
    - document.getElementsByTagName 메소드는 태그 이름을 이용하여 Element를 가져오는
      함수이다.

2. li[i].onmouseover = function() {this.style.backgroundColor = 'blue'; );
   - 위 코드를 정의하기 전에, "li.length"를 통해서 리스트의 갯수를 알수 있고 이를 For 루프 문의
     통해서 반복을 시킨다.
   - 이는 동일한 이벤트를 "li"태그로 정의된 Object에 할당하기 위새서이다.
   - li[i].onmouserover 이벤트 메소드는 위와 같이 새로 정의된 메소드를 통해서 마우스가 "li"태그
     위에서 움직일 때 태그의 배경색을 "blue"로 바꾸어 준다.

3. li[i].onmouseout = function() {this.style.backgroundColor = 'white'; };
    - 이 코드는 "li" 태그의 onmouseout event 메소드를 정의하는 코드로, 마우스가 태그를 벗어날때
      태그의 배경색을 "white"로 바뀌게 만들어 준다.

위의 코드를 이해할 수 있으면, jQuery에서 얼마나 직관적으로 같은 코드를 간략하고 단순한 형태로 사용할 수 있는지 알게된다면, 깊은 인상을 받을 것이다.
Posted by 행복상자

댓글을 달아 주세요

원래는 책에서 Closure에 대한 설명에 대한 설명이 있는데, 나의 관심을 끈 것은 Anonymous함수의 사용에 대한 것이었다.

아래의 예제는 동일한 동작을 하는 메소드를 Event에 추가하는 예제인데, 중간 정도에 보면 난데 없이 "(function(){" 으로 시작하는 구문이 나온다. 이 부분이 Anonymoun function 이다.
이렇게 만들면 "Global"로 선언할 필요없이 임시적으로 함수 블럭의 사용이 가능하다.
구문을 닫을 경우는 "})();"를 이용하면 된다.

 // An element with an ID of main
var obj = document.getElementById("main");

// An array of items to bind to
var items = [ "click", "keypress" ];

// Iterate through each of the items
for ( var i = 0; i < items.length; i++ ) {
    // Use a self-executed anonymous function to induce scope
    (function(){
        // Remember the value within this scope
        var item = items[i];
        // Bind a function to the elment
        obj[ "on" + item ] = function() {
            // item refers to a parent variable that has been successfully
            // scoped within the context of this for loop
            alert( "Thanks for your " + item );
        };
    })();
}

사실 위의 코드는 불필요한 내용들이 많이 들어있다. 굳지 저렇게 써야하나 라는 생각이 들지도 모르지만, 이것은 단지 예제 정도록 사용하면 된다.
그래도 몇가지 건질 것이 있다면, 위의 코드에서 "id"를 이용하여 오브젝트를 가져오고, Event를 Bind하는 내용을 담고 있는데, Event명을 obj["on" + item]의 형태로 Event를 binding한다.
위의 코드는 "click" 과 "keypress"에 대한 이벤트가 발생하면 메시지를 발생시키는 예제이다.

Posted by 행복상자

댓글을 달아 주세요

지난 번에 VirtualBox를 설치하고, Window 7을 설치해서 사용하는 것에 대해, 알아보기로 했는데 이제서야 글을 올린다. 설치는 무척 간단하였다. 왜냐하면 기본적으로 설정을 변경하지 않고, VirtualBox의 기본 옵션들을 그대로 이용하였기 때문이다. Winodos 7을 설치하고 이를 테스트 하였는데, 일단 듀얼 CPU가 장착되어 있는 PC에서 사용하는 것이 유용하다. 물로 메모리는 2G 이상의 시스템에서 사용하는 것이 좋다. 윈도우즈 7을 설치하게 되면, 비디오의 메모리는 변경해 주는 것이 좋다. 너무 적게 잡으면 시스템이 느리고, 부자연 스럽다. 대락 200메가 내외이면 적당하다.

자 그럼 설치방법에 대해서 알아보도록 하겠다.
VirtualBox를 이용하여 설치시의 옵션들은 나중에 재 수정 가능하므로, 초기에는 기본으로 설정하는 것이 쉽고 빠를 거라 생각된다. (별다른 고민을 하지 않으므로 빠르다. ^^)

먼저 VirtualBox의 아이콘을 클릭하여 프로그램을 실행한후, 왼쪽 상단의 "새로 만들기" 버튼을 메뉴에서 클릭하면 아래와 같은 화면이 나타난다. 처음에 프로그램을 설치할 때는 영문으로 메뉴와 텍스트가 표시되었는데, 그래서 한글을 별로 기대하지 안했는데, 친절하게 한글로 메뉴와 기능들을 사용자에게 제공한다. (이쯤되면, 감동이 시작된다. 별로 기대하지 않했는데, 뭔가를 주게되면, 찡하게 느끼게 되니까.)


간단하게 다음 버튼을 클릭한다.
그러면 아래과 같이 "새 가상 머신 만들기" 창이 나타나고, 사용자는 여기서 자신이 설치할 OS를 고르면 된다. Windows, Linux, Unix등 설치하기를 원하는 것을 고프면 된다. 나는 Windows 7 Beta를 설치할 예정이므로 아래와 같이 "Microsort Wondows"를 선택하고 버전은 "Windows 7"을 선택했다.


"다음 > "을 클릭하면 은 가상 머신의 메모를를 할당해 주어야 한다. 아래와 같은 창이 나오면, 적절하게 잡아 주면 된다. 나의 경우는 총 사용가능한 메모리가 2GByte 이므로 1GByte를 할당하였다. 이는 나중에 조정이 가능하므로 적당히 넣어 주면 된다. (본인이 한번 정하면 절대 바꾸지 않는 완벽 주의자가 아니라면 말이다.)
 

자, 여기서 부터는 속도를 내자, 기본크기를 20GByte를 사용할 수 있도록 했다. 파일 명과 저장 위치는 "새로 만들기(N)..." 버튼을 클릭해서 정할 수 있다.


만약 위에서 "새로 만들기를 클릭하였다면" 아래와 같은 화면을 만날 수 있을 것이다.

위 화면에서 "다음 >" 버튼을 누르면 아래화면이 나타나는데, 옵션중에 "동적 확장 저장소"를 선택한다. (설명을 화면의 내용에 표시 되어 있다.) 




사용할 가상 하드디스크의 크기를 설정한다. 아까 이야기 한것처럼 최소 권장 크기가 20GB바이트이므로 그냥 20GByte를 선택한다.

위의 단계를 마지막으로, 윈도우즈 7을 설치를 위한 준비 단계는 모두 마쳤다.
아래 화명에서 "마침"버튼을 누르면 된다.


이제 생성한 이미지를 이용해서, Window 7을 설치하면 된다.
VirtualBox 프로그램을 실행하고, 상단의"시작" 버튼을 이용하여, 설치 CD 또는 DVD를 이용해서, 설치하면 된다.

아래는 윈도우 7의 설치 화면이다.

설치는 무척 XP보다도 간단하였다. 내가 가진 시스템은 듀얼코어가 아닌 원 코어의 Intel의 2.3Gbyte 포로세슬르 사용하는 시스템이다. 약 25~30분정도 걸렸다.

아래는 VirtualBox에서 Windows 7을 처음 실행시켰을 때, Windows 7이 실행을 준비하고 있는 화면이다. 약간의 시간이 걸렸다. 

마지막으로, 이 화면이 윈도우 7이 실행된 화면이다. 화면의 하단 오른쪽에 조그만하게 Windows 7 이라고 표시된 것이 보인다.

혼자 있는 물고기가 외로와 보인다.

윈도우즈 7을 설치하면, 네트워크는 기존 시스템의 IP를 Proxy해서 사용하게되는데, 네트워크 설정을 보면, IP6를 기본으로 지원하게 되어 있는 부분이 특이점이다.
이에 대한 사용기는 별도로 따로 올리거나 이야기하지는 않겠지만, 시스템을 가볍고, 사용자를 끌만한 매력을 가지고 있다. Vista의 실패만큼 앞으로 성공할 가능성이 많은 MS의 새로운 OS이고, 써볼만한 가치가 있다고 생각이 든다.

올해에는 정식 버전이 출시될거라는 예측이 여려 경로를 통해서 들려온다. 이는 Windows 7이 Beta버전이지만, 안정성에 큰 문제가 없다는 반증이기도 하지만, 지난 해의 Vista의 실패로 인한 MS의 매출이 많이 줄어든 탓이기도 하다.

 
Posted by 행복상자

댓글을 달아 주세요

어떤 사람들은 믿지 않겠지만, Javascript도 Object Oriented Programming을 지원하는 Language이다. 이전에 자바 스크립트가 출현하 지난 10년동안 언어적인 측면과 사용적인 측면에서 많은 변화가 있었지만, 실제로 개발자들은 굉장히 소극적으로 이를 사용했었다. 따라서 별도의 Javascript 함수들을 모은 ".js" 파일을 이용하기도 했지만, 이는 단지 함수들을 재 사용하는 측명에서 였다. 이유는 코드를 고치거나 수정하기 어렵다는 것인데, 자바 스크립트가 가지고 있는 기본적인 속성들을 몰라서 일지도 모른다.
많은 사람들이 Javascript를 다시 보기된 계기는 Google의 Application들이 이를 이용해서 사람들에 자신들의 Application을 제공하기 시작했기 때문이라 생각하는데, 이어서 나온 Yahoo의 YUI도 내게 많은 놀라움을 주었다. 그리고 다른 오픈 소스 라이브러리들 역시 놀라운 정도의 편리함과 쉬운 사용법을 내세우고 개발자들의 쉴 틈(?)을 만들어 주고 있다.

그러나, 남의 것을 사용할 때도, 기본적이고 기초적인 것은 알아야 덜 고생한다.
세상에는 날로 먹을 만한 것이 그리 많지 않다.

오늘은 내가 잘 이해하지 못했던 Javascript의 Scope에 대해 설명할 거다.

자바스크립트는 기본적으로 웹브라우져의 페이지별로 실행된다. 그래서 대부분이 함수를 만들어서 그안에서 지역 변수를 생성하거나, 전역으로 생성해서 사용한다.
일반적으로 사용할때는 별 문제가 없겠지만, Java, C#, C/C++과는 Scope의 영향범위가 다르므로 주의해야 한다.

아래는 셈플 코드인데, 전역으로 foo 변수를 생성했고, 이어서 if 문안에 생성했고, 마지막으로
 function 문 안에서 생성하였다.

위에 주석으로 설명이 다 되어있지만, 다시 설명을 하면
6번째 줄에서 foo변수를 전역으로 선언하고 "test"라는 문자열을 저장하였다. 그리고 나서 12번째 줄에 새로운 foo 변수를 정의하고 "new test"라는 문자열을 저장하였다. 그러나 이는 이전에 생성했던 전경 변수와 동일하다. 다시 말하면, 이는 전역 Scope의 영향 아래에 있다. Java나 C#, C/C++은 전혀 다르므로 혹시 이를 착각하고 사용할 가능성이 많다.
이의 확인은 15번째 줄에서 알수 있다. 이를 실행하면 동일함을 확인할 수 있다.

이어서, 17번째에 함수 test를 만들고 24번째 줄에서 실행하면, 이전에 function test에서 할당한 문자는 function Scope에서 이미 생명주기가 다했음을 알수있다.

그럼다면, 함수안에 if 문에서 변수 foo를 새로 정의한 경우는 어떻게 될까?

한번 실행보면 알겠지만, 역시 if구문 안에 정의한 변수는 주의해야 한다. 자신이 원치 않는 결과를 가져올수 있다.
Posted by 행복상자

댓글을 달아 주세요