무하프로젝트

Chapter 7. 이벤트 다루기

DOM Level 1, DOM Level 2 이벤트 할당 방식.

참고 사이트:

DOM Level 1 Event Model

http://mohwaproject.tistory.com/entry/dom-event-1

Dom Level 2 Event Model

http://mohwaproject.tistory.com/entry/dom-event-4

1. 페이지를 완전히 읽어 들인 순간을 탐지하기

2. 이벤트 객체를 사용해서 마우스가 클릭된 위치 캡처하기

참고 사이트:

자바스크립트 Dimension (Screen, Viewport, Scroll, Element, Mouse Event)

http: //mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Dimension-Screen-Viewport-Scroll-Element-Mouse-Event

3. 이벤트 삭제하기

4. 기본 이벤트 막기

보통 폼(Form or A(앵커)) 엘리먼트와 같이 기본 동작(Submit)이 할당된 엘리먼트는 해당 이벤트 시 다른 이벤트로 전파되기 전에 기본으로 할당된 이벤트를 취소해야 한다.

참고 사이트:

엘리먼트의 기본 동작 막기:

http: //mohwaproject.tistory.com/entry/dom-event-3

5. 중첩된 요소로 이벤트 전파 방지하기

참고 사이트:

Event Bubbling or Capture 이란?

http://mohwaproject.tistory.com/entry/dom-event-bubbling-capture%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

6. 키보드 동작 핸들링 하기

ketCode or charCode 속성:

keyCode: IE or 오페라(사파리, 파폭, 크롬 또한 keyCode 속성을 지원하지만 keyCode 속성만 지원하는 브라우저(IE or 오페라)와 반환되는 keyCode가 일치하지 않는다.)

charCode: 사파리, 파폭, 크롬

키보드 이벤트 설명:

e.keydown: 키가 눌렸을때(모든 키에 반응한다.)

e.keyup: 키가 올라올때(모든 키에 반응한다.)

e.keypress: keydown 다음(단 문자(Enter 키 제외)를 입력했을때만 반응한다. 즉, Ctrl, Shift 키에서는 반응하지 않는다.)

7. HTML5 드래그 앤 드롭 사용하기

이 내용과 같은 경우 이전에 정리한 포스트 내용으로 대체 한다.

참고 사이트:

HTML5 File API 구현

http: //mohwaproject.tistory.com/entry/HTML5-File-API-%EA%B5%AC%ED%98%84

Chapter 6. 재사용 가능한 JS 함수 작성하기

1. 함수의 종류

1.1. 기명 함수

function 키워드 및 명시적인 함수명을 사용하여 생성한다. 또한, JS 실행 시 생성되며, 객체 맴버에 접근 가능하다.

1.2 익명 함수 or 함수 생성자

함수 생성자는 new 연산자 및 Function 생성자를 통해 생성한다.

1.3 함수 리터럴

다른 JS 객체(String, Number 등)와 마찬가지로 함수도 객체와 리터럴 모두 사용할 수 있다. 또한,  JS 실행 시 생성되며, 객체 맴버에 접근 가능하다.

참고 사이트:

자바스크립트 함수 유효범위(Scope) 관리 및 Closer

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98-%EC%9C%A0%ED%9A%A8%EB%B2%94%EC%9C%84Scope-%EA%B4%80%EB%A6%AC

자바스크립트 강좌2 - 데이터 타입값

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C-2-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85%EA%B0%92

2. 함수에 복잡한 데이터 객체 전달하기

JS 함수의 인수는 "문자열"이나 "숫자"와 같은 "값 타입"(call by value)일 수도 있고 배열과 같은 "객체"일 수도 있다.

또한, 전달된 인수가 값 타입(call by value)인 경우 해당 데이터의 복사본이 전달되며, 그와 반대로 객체는 참조(call by reference)로 전달되기 때문에 함수 안에서 전달된 인수 변경 시 호출한 프로그램에도 반영된다.

3. 재귀 알고리즘 구현하기

참고사이트:

자바스크립트 재귀 함수:

http://mohwaproject.tistory.com/search/%EC%9E%AC%EA%B7%80

4. 상태를 기억하는 함수

아래 코드와 같이 바깥 함수(outer)의 반환 값으로 내부 함수(inner)설정 시 내부 함수는 바깥 함수 유효범위 안의 모든 변수(name)를 포함한다.

즉, 클로저 발생으로 인해 포함된 바깥 함수 유효범위 안의 변수가 해당 메모리에서 소멸되지 않는 현상이 일어나며, 그 현상을 이용하여 정적 데이터를 기억할 수 있는 함수를 작성한다.

5. 메모제이션 패턴을 통한 프로그램 성능 개선

함수에 프로퍼티를 추가하여 결과(반환 값)를 캐시하면 다음 호출 시점에 복잡한 연산을 반복하지 않을 수 있다. 

이런 활용 방법을 "메모이제이션 패턴" 이라 한다.

6. 익명 함수를 사용해서 전역 변수 감싸기

JS 클로저를 이용해 익명 함수의 지역 변수(i)를 마치 전역 변수와 같이 사용할 수 있다.

Chapter 6. 배열과 반복문 다루기

배열은 순서가 매겨진 원소의 집합이며,  "배열 리터널([])"에서 객체(Array) 맴버 접근 시 JS 엔진은 즉시 Array 객체를 만들어 해당 배열 리터널([])을 Wrapping 시킨 후 메서드를 호출한다. 또한, 메서드 종료 시 자동 생성된 Array 객체를 소멸 시킨다.

또한, JS 배열은 서로 다른 데이터 값을 저장할 수 있으며,(데이터 타입에 대해 엄격하지 않다.) 출력 시 문자열 타입으로 반환한다.

1. 반복문에서 배열 사용하기

Chapter 5. 숫자와 수학 연산 다루기

JS에서 숫자와 숫자 연산은 Number와 Math라는 두 개의 객체를 활용한다.

1. Number 객체와 리터럴

1.1. JS의 모든 숫자(-2의 53승 ~ 2의 53승)는 부동 소수점(10.23과 같이 소수 부분이 있는 10진수를 의미)이다.

1.2. Number 리터럴에서 객체(Number) 맴버 접근 시 JS 엔진은 즉시 Number 객체를 만들어 해당 Number 리터럴을 Wrapping 시킨 후 메서드를 호출한다. 또한, 메서드 종료 시 자동 생성된 Number 객체를 소멸 시킨다.(String 리터럴과 동일)

1.3. Number 객체는 직접 접근해야 하는 몇 가지 정적(Static) 맴버를 포함하며, 그 중 NaN(Not a Number)이라는 속성은 전역으로 정의된 NaN과 동일한 값으로 "숫자가 아닌 값"을 나타낸다.

참고 사이트:

Math API:

http://koxo.com/lang/js/method/jsGroup.html#JNumber

Chapter 3. 날짜, 시간, 그리고 타이머

CHAPTER 3.의 경우 Date 객체 메서드와 window 객체의 "타이머" 관련 메서드(setTimeout, setInterval)를 함꼐 정리하는 내용으로 이루어져 있다.

Date 객체는 날짜와 시간을 표현하는 숫자를 포함하며, Date 객체의 숫자값은 1970년 1월 1일 UTC 시간으로부터 지난 시간을 초 단위로 표현한 값이고 이때 윤초는 계산하지 않는다.

오래된 브라우저에서는 날짜 문자열이 반드시 UTC(협정 세계시)형식이어야 한다.

하지만 전반적인 내용은 메서드 알아보기 정도였다.;;(또한, 저자는 타이머 관련 메서드가 window 객체가 아닌 Date객체에 포함되어야 한다고 책에서 말한다.(개인적인 생각으로는 Date 객체에 있는것 또한, 그리 맞지는 않는 듯 하다.)) 여하튼 이런 이유로 인해 이번 CHAPTER는 개인적 선별로 알아두면 좋을 듯한 범위 정도만 정리하겠다.(사실 그러고 나니 별로 정리할 내용이 많지 않았다.;;)

1. UTC(협정 세계시) 날짜 및 시간 출력하기

2. ISO 8601(국제 표준시) 형식으로 출력하기

보통 API를 제공하는 어플리케이션에서 "ISO 8601" 형식(범용적인 제공 API(facebook, twitter)의 JSON 포멧은 보통 ISO 8601을 사용한다.)을 필요로할 때가 있다. 

또한, ISO 형식은 아래와 같이 구성된다.

년도, 월, 일 다음에는 시간을 뜻하는 'T'가 나오고 그 뒤에 시, 분, 초, 그리고 소수점 이하의 초단위 시간이 나온다.

참고 사이트:

ISO 8601 스펙:

http://ko.wikipedia.org/wiki/ISO_8601

JS Date 문자열 스펙

http://koxo.com/lang/js/method/jsGroup.html#JDateTime

Chapter 2. 정규표현식 사용하기

정규표현식은 주어진 패턴에 일치하는 문자열을 찾기 위해 사용하는 검색 패턴이다.

물론, String 여러 객체 메서드(+ 문법)를 활용하여 검색할 수도 있겠지만 보통(실제 코드 작성 시) 코드 가독성이 현저히 떨어지는 단점이 존재한다.

1. RegExp 리터럴

1.1. String 객체와 마찬가지로 RegExp도 리터럴과 객체 모두를 가지고 있다.

1.2. RegExp 리터럴은 스크립트가 실행될 때 컴파일 된다. 즉, 표현식이 변경되지 않을 것이라면 RegExp 리터럴을 사용하는것이 좀 더 효율적이며, 런타임시 패턴이 변경되거나 생성된다면 객체를 사용한다.(실상 이 부분에 대해, 어느정도 효율을 가질 수 있을지 모르나 크게 염려할 부분은 아니라고 생각한다.)

1.3. 패턴은 슬래시(/) 내부에 배치한다. 또한, 문자열이 아니므로 따옴표(', '')를 사용해 리터럴 값을 Wrapping 하지 않는다.

1.4 . "RegExp 리터널"에서 객체(RegExp) 맴버 접근 시 JS 엔진은 즉시 RegExp 객체를 만들어 해당 RegExp 리터널을 Wrapping 시킨 후 메서드를 호출한다. 또한, 메서드 종료 시 자동 생성된 RegExp 객체를 소멸 시킨다.

var rgbHax = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/g.exec('#AD46E0');

window.onload = function () {
    document.body.style.backgroundColor = 'rgb(' + parseInt(rgbHax[1], 16) + ',' + parseInt(rgbHax[2], 16) + ',' + parseInt(rgbHax[3], 16) + ')';
}

2. RegExp 객체

2.1. RegExp 객체는 자바스크립트 실행 시 컴파일 되지 않으므로 런타임 시 표현식이 변경되거나 만들어진다면 객체를 사용한다.

var rgbHax = new RegExp("^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$").exec('#AD46E0');


window.onload = function () {
    document.body.style.backgroundColor = 'rgb(' + parseInt(rgbHax[1], 16) + ',' + parseInt(rgbHax[2], 16) + ',' + parseInt(rgbHax[3], 16) + ')';
}

3. 검색하는 문자열이 존재하는지 확인하기

RegExp 객체의 test 메서드는 두 개의 인수를 가진다. 첫 번째 인수는 문자열이고, 두 번째는 변경자 이다. 또한, 두 번째 인수는 생략 가능하다.

- 문자열의 매칭 여부(true/false)를 반환한다.

4. 대소문자를 구분하지 않고 문자열 검색하기

아래 코드와 같이 정규식 "i" 플래그를 사용하면 대소문자 구분을 무시할 수 있다.

5. 패턴과 일치하는 모든 부분 찾기

정규식 "g" 플래그를 사용하면 매칭된 모든 문자열을 찾아낼 수 있다.

즉, 아래 코드와 같이 정규식 "g" 플래그는 매칭된 마지막 위치를 기억하고 있다가 다음 검색 시 그 마지막 위치 다음부터 검색 한다.

6. 캡처 괄호(())를 사용하기

정규식 캡처 괄호(()) 사용 시 문자열 안의 특정 패턴을 찾을 수 있을 뿐만 아니라 이후 찾은 부분의 문자열을 참조할 수 있다.

즉, 아래 코드와 같이 검색된 부분 문자열((t\w*s)\s(t\w*e) === 'tims($1) the($2)')은 왼쪽에서 오른쪽으로 번호(1 ~ 2)가 매겨지며, String 객체의 replace 메서드에서 "$1", "$2"와 같은 형태로 참조할 수 있다.

당분간 전에 구입한 책 2권(C#4.0, Javascript Cookbook)에 대한 내용(개인 테스트 및 내용 정리)으로 연재 포스트를 한번 진행할까 한다.

아마도 이번이 JS 와 C#에 대한 기초 정리는 마무리 될 듯 싶으며, 앞으로는 개인 프로젝트 및 언어에 대한 심화 과정 위주로 포스트를 진행해야 겠다는 계획을 갖고 있다.

그 첫 번째 시간으로 책(cookbook)의 Chapter 1. 과정인 "JS 문자열 다루기" 에 관해 정리해 보겠다.

Chapter 1. JS 문자열 다루기

JS 문자열은 원시 데이터 자료형(Number(int, float), Boolean(true, false), null(empty literal), undefined(not defined)) 중 가장 사용 빈도가 높은, 데이터 자료형이자 객체이다.

1. 표현

작은 따옴표('')와 큰따옴표("") 사용에 대한 규칙은 따로 존재하지 않지만, 아래 코드에서 처럼 HTML 작성 시 태그의 Attribute Wrapping은 큰 따옴표가 기본이므로 일일이 이스케이프(\\)를 사용하지 않기 위해 작은 따옴표를 기본으로 하는 것이 좋다.

2. String 객체:

2.1. "String 객체"는 String 생성자 함수와 new 연산자를 통해 생성되며, 객체 맴버에 접근할 수 있다.

2.2.  new 연산자를 사용하지 않고 String 함수 호출 시 객체는 생성되지 않으며, 문자열 리터럴을 생성한다.

2.3. "문자열 리터널"에서 객체(String) 맴버 접근 시 JS 엔진은 즉시 String 객체를 만들어 해당 문자열 리터널을 Wrapping 시킨 후 메서드를 호출한다. 또한, 메서드 종료 시 자동 생성된 String 객체를 소멸 시킨다.

2.4 String 객체 사용 시기는 메서드 접근 유/무에 따라 달라진다. 즉, 메서드 접근 시에는 생성된 객체에 직접 접근하는 것이 보다 효율적이며, 그 반대의 경우 리터럴을 사용하는것이 바람직하다.(객체 메서드 접근이 없는 문자열(실제 코딩 시 이같은 경우는 사실상 제로에 가깝다.))

Jquery API "delegate() 메서드" 구현해 보기

이번 포스트에서는 Jquery API 메서드인 .delegate() 메서드를 직업 구현(Jquery 소스 자체를 분석하여 구현하지는 않았다.)해 보았다.

.delegate() / .on() 메서드 예제 페이지:

.delegate()

http://api.jquery.com/delegate/

.on()

http://api.jquery.com/on/

메서드(.delegate()) 기능으로는 생성된 엘리먼트(document.getElementById('delegate_container1'))에 click 이벤트를 바인딩 시키며, 그 자식 엘리먼트(document.getElementById('delegate_container1') > div) 중 세번째 argument로 할당된 태그(div) 엘리먼트를 감시 및 동일한 이벤트로 할당 시킨다. ("capture" 이벤트 동작 방식을 생각하면 이해가 빠르다.) 또한, 이 방식은 위와 같이 동적 요소(엘리먼트) 추가 시 유용하게 쓰일 수 있다.

또한, .on() 메서드 구현 중 특별히 알아둬야 할 부분이 있다면, .bind() 메서드의 세번째 argument인 callback 함수 호출 시 함수 내부에 "버블링 중지" 함수인 stopPropagation(e) 함수를 추가시키는 것이다.

즉, 이벤트 시 버블링이 발생하여, 이벤트가 발생된 엘리먼트와 같은 타입으로 할당된 모든 부모 엘리먼트들의 이벤트가 발생하여 의도 않은 결과가 나올 수 있다.(해당 엘리먼트의 부모 엘리먼트의 갯수가 둘이라면, 할당된 이벤트 또한 두 번 발생하게 된다.)

참고 사이트:

소스 전체 페이지

http://jsfiddle.net/mohwa/eRmmX/1/

소스 결과 페이지

http://mohwa.org/html/delegate.html

이벤트 버블링 or 캡춰

http://mohwaproject.tistory.com/entry/dom-event-bubbling-capture%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

delegate로 이벤트 한방에 등록

http://uix.kr/archives/973