자바스크립트 DOM

Dom 이란?

Document Object Model의 약자로 HTML을 제어 할 수 있는 API의 역할을 한다.

DOM의 처리 순서

  • 제어 대상 탐색
  • 제어 대상 메소드 실행 및 이벤트 핸들러 등록

Dom Method

  • createElement : HTML 요소를 생성
  • appendChild : 자식에 요소를 추가
  • getAttribute : 속성을 가져옴
  • setAttribute : 속성을 넣음
  • getElementById : ID속성으로 요소를 가져옴
  • getElementsByName : NAME속성으로 요소를 가져옴(배열)
  • getElementsByTagName : 엘리먼트명으로 요소를 가져옴(배열)

이러한 Dom 메소드를 어떻게 사용하는지 알아볼 것이다.

HTML

Javascript

jQuery 에서는?

Manipulation – 조작

  • append : 자식요소를 가장 뒤에 추가한다.
  • prepend : 자식요소를 가장 앞에 추가한다.
  • after : 형제요소를 뒤에 추가한다.
  • before : 형제 요소를 앞에 추가한다.
  • attr : 속성을 가져오거나 지정할 수 있다.(get/set)
  • html : 선택된 요소 안에 HTML을 가져오거나 지정할 수 있다.(get/set)
  • text : 선택된 요소 안에 텍스트만 가져오거나 지정할 수 있다.(get/set)
  • val : 선택된 요소의 value 값을 가져오거나 지정할 수 있다.(get/set)
  • css: 선택된 요소의 css 값을 가져오거나 지정할 수 있다.(get/set)
  • remove : 선택된 요소를 삭제한다.

Traversing – 탐색

  • find : 선택된 요소 아래에 있는 요소를 검색해서 선택한다.
  • next : 선택된 요소 다음 요소를 선택한다.
  • prev : 선택된 요소 이전 요소를 선택한다.
  • parent : 선택된 요소의 부모 요소를 선택한다.
  • children : 선택된 요소의 자식 요소를 선택한다.

 

자바스크립트 개발환경 구축과 디버깅

준비물

  • 텍스트 에디터 – 이클립스, 에디트 플러스, 메모장 등 자신에게 가장 편한 텍스트 에디터
  • 파이어폭스, 파이어버그 플러그인 이 문서의 내용을 따라가기 위해서는 반드시 파이어폭스와 파이어버그 플러그인을 설치해야 한다.

파이어폭스, 파이어버그 설치하기

  • 모질라 파이어폭스 사이트에서 다운로드 받는다.
  • 다운로드 받은 파일을 실행해서 설치한다.
  • 파이어폭스 프로그램을 실행한다.
  • 메뉴에서 [도구] – [부가기능]을 선택한다.
  • [전체검색] 탭을 선택하고, Firebug 를 검색해서 설치한다.
  • 파이어폭스를 닫고 다시 시작한다.

Hello World!

이제 텍스트 에디터를 이용해서 helloworld.html 파일을 생성하고, 아래 코드를 입력하고 저장한다.

helloworld.html 파일을 파이어폭스에서 불러온다.(탐색기에서 파이어폭스로 드래그)

  • 파이어폭스 우측 하단에 벌레 아이콘을 클릭해서 파이어버그를 실행한다.
  • 콘솔 탭의 화살표를 눌러 Enable 상태로 바꾼다.
  • 새로고침을 하게 되면 콘솔창에 Hello World!라고 출력된다.

지금까지 파이어버그의 콘솔창을 이용해서 Hello World를 출력했다. 여기서 중요한 것은 console.log를 이용한 디버깅인데, 위의 예제는 String 값을 출력하는 것이지만 Object나 Array를 넣게 되면 안에 들어가는 내용이 무엇인지 보기 좋게 나오게 된다.

이러한 디버깅 방법은 Opera의 기본 디버거인 잠자리나 크롬의 개발자도구에서 별도의 플러그인 없이 지원하며, IE8 개발자도구에서도 String까지는 지원한다. 게다가 모바일 사파리에서도 디버그 설정을 활성화 시키면 console.log를 사용해서 디버깅할 수 있다.

자바스크립트로 모달창 만들기

자바스크립트로 모달창을 만들려고 한다.

모달창은 보통 배경은 어둡게 되고, 팝업 레이어가 뜨는 형태로 많이 사용있는데, 모달창을 만들기 위해서 모달창에 어떤 기능을 넣을지 기능정의를 해야한다.

  • 보여주기
  • 감추기
  • 배경 어둡게 하는 레이어 생성
  • 가운데 보여주기

간단하게 기능정의를 해봤는데, 이정도 기능을 가진 모달창을 어떻게 만드는지 알아보겠다.

먼저 HTML과 CSS를 정의한다.

HTML

CSS

버튼이 하나가 있고, 감춰진 레이어(모달창)가 있다. 버튼을 누르면 감춰진 레이어가 모달창으로 나타나고, 확인 버튼이나 닫기 버튼을 누른다는 것이 예상되는 HTML이다.

Javascript

자바스크립트를 살펴보면, 3가지 액션을 한다.

  • 모달창 인스턴트 생성
  • 모달 창 여는 버튼에 이벤트 걸기
  • 모달 창 안에 있는 확인 버튼에 이벤트 걸기

Example.Modal.js

이 메소드들이 어떤 일을 하는지 알아봐야겠다.

Initialize

인스턴트를 생성했을 때 초기화를 시켜주는 생성자다. 인스턴트 생성되었을 때 하는 모든일은 여기서 정의한다. getLayerSize(), getBodySize(), addElement(), addEvent() 메소드를 실행한다.

getHashData

다음과 같은 부분이 있는데, getHashData 메소드를 실행시키고 그 반환값을 멤버변수인 this.hash에 집어넣는다는 의미다. 이 메소드는 자바스크립트 인스턴트의 기본(default)값을 정의하는 역할을 한다.

addElement

추가 엘리먼트를 생성한다. 모달창 div 나 버튼 같은 요소들은 Javascript로 처리되기 전에 있어도 상관 없지만, 백그라운드 레이어 같은 경우는 모달창이 뜰때만 필요한 부분일 수도 있기 때문에 동적으로 생성되는게 더 효율적이라고 생각한다.

addEvent

모듈에 관련된 요소들에 이벤트를 걸어준다. 여기서는 모달창 모듈의 닫기 버튼에 클릭이벤트를 걸었다.

show

가장 중요한 보여주기 기능이다. 콘텐츠 레이어를 가운데로 옮기고, 배경레이어 사이즈 조정 후 콘텐츠와 배경레이어를 보여준다.

hide

감추는 기능이다. 모달창과 배경레이어를 감추는 내용이다.

getLayerSize

콘텐츠 레이어의 너비와 높이를 구하는 메소드다. 가운데 정렬하기 위해서 필요한 수치이기 때문에 이 메소드를 따로 두게 되었다.

getBodySize

body의 너비와 높이를 구하는 메소드다. 이 메소드 역시 가운데 정렬을 하기 위해 필요하다.

addOverlay

단순히 배경 레이어를 생성하고, css를 in-line으로 정의되어서 독립적으로 쓸 수 있다.

moveCenter

위 메소드를 실행시켜 구한 수치들을 이용해서 계산을 하는 메소드다. 마지막에는 css의 top, left 의 수치를 변화시켜서 가운데 정렬을 하게된다.

applyOverlay

배경 레이어의 사이즈를 body의 사이즈에 따라서 변화한다. 이 메소드는 resize를 할 때 body의 사이즈가 달라졌을 경우 실행하도록 하면 항상 body를 덮는 배경레이어를 만들 수 있다.

Javascript 이벤트

이벤트란?

웹페이지에서 사용자가 클릭을 하거나 키보드 입력과 같은 상호작용을 하게 되는데, 클릭이나 키 입력과 같이 발생하는 것을 이벤트라고 한다. 창 사이즈를 조절하거나 스크롤을 내리거나 올릴 때에도 이벤트는 발생하고, 이벤트가 발생했을 때 실행되는 메소드를 이벤트 핸들러라고 한다.

IE에서 이벤트 추가하기

표준 브라우저에서 이벤트 추가하기

이벤트 추가하는 함수

IE와 표준브라우저에서 사용할 수 있는 함수를 만들겠다.

IE와 표준 브라우저의 이벤트에 대한 차이점

  • 이벤트를 등록, 해제하는 메소드가 다르다.
    • IE : attachEvent, detachEvent
    • 표준 브라우저 : addEventListener, removeEventListener
  • 이벤트 지정 문자열이 다르다. IE의 경우는 앞에 on이 붙음.
  • 이벤트 객체를 받는 방법이 다르다.
    • IE : window.event 객체로 전달 받음.
    • 표준 브라우저 : callback 함수에서 인자로 전달 받음.
  • 기본 이벤트의 실행 방지 방법이 다르다.
    • IE : return 값에 의해서 결정된다.
    • 표준 브라우저 : preventDefault 메소드를 사용해서 결정한다.

자주 사용하는 이벤트 리스트

  • click : 마우스 클릭
  • mouseover : 마우스 오버
  • mouseout : 마우스 아웃
  • change : 셀렉트박스의 값이 달라졌을 때
  • scroll : 스크롤 되었을 때
  • resize : 사이즈가 변경 되었을 때
  • keyup : 키가 눌린 후 뗄 때
  • focus : 포커스
  • blur : 포커스 해제 되었을 때

캡쳐와 버블링

이벤트는 최상위 엘리먼트로부터 이벤트가 발생한 엘리먼트까지 찾아 들어간 후 다시 최상위 요소까지 올라가며 이벤트를 발생한다. 여기서 이벤트가 발생한 엘리먼트까지 들어가는 과정을 이벤트 캡쳐라 하고, 최상위 요소까지 다시 올라가는 과정을 이벤트 버블링이라고 한다.

예제

지금까지 얘기한 이벤트를 실제 사용한 예제를 만들겠다.

HTML

CSS

Javascript

 

 

자바스크립트로 OOP 구현하기

자바스크립트로 OOP 스타일의 개발을 위해 필요한 개념에 관해 알아보려고 한다.

데이터 타입

  • 객체(Object) : 예) {name: “정기철”, age: 30}
  • 배열(Array) : 예) [1,2,3]
  • 문자열(String) : 예) “abc123”
  • 숫자(int,float) : 예) 1
  • Boolean : 예) true , false

JSON

경량의 데이터 교환방식으로 자바스크립트에서는 객체에 속한다.

JSON에 대한 자세한 내용은 다음 링크를 참고한다. JSON의 개요

객체지향 프로그래밍(OOP)

OOP는 대상을 객체로 정하고 이를 다루는 개념이다. 자바스크립트가 OOP를 기본적으로 지원하지 않지만 OOP처럼 개발할 수 있다.

주요 용어

  • Class : 다루고자 하는 대상으로 객체라고도 한다. 객체는 Method와 Attribute로 정의된다.
  • Instance : Class에 정의되어 있는 것을 바탕으로 만들어진 활성체를 말하며 개체라고 한다.
  • Method : 메소드, 멤버함수라고도 하면 객체에서 행동을 담당하는 부분이다. 보통 동사+목적어 카멜표기법을 사용한다.
  • Attribute : 속성, 멤버변수라고도 하며 객체의 속성이다.

객체의 특징

  • 추상화 : 객체는 속성과 메소드로 정의한다.
  • 캡슐화(은닉) : 객체는 블랙박스와 같을 수 있다. 안에서 어떻게 처리되는 것은 중요하지 않고, 해당 객체의 인터페이스만을 알면 다룰 수 있다.
  • 상속 : 슈퍼클래스나 부모클래스에 정의되어 있는 내용을 상속 받을 수 있다. 상속도 자바스크립트로 구현 가능하다.

기타 OOP와 관련된 자세한 내용은 관련 서적이나 참고자료가 많이 있으니 그것을 참고하면 될 것 같다.

모듈 개발을 위한 기본 OOP 패턴

이제부터 자바스크립트에서 객체지향 프로그래밍의 형태로 개발할 것이다. 아래 패턴은 모듈이나 페이지를 개발하기 위해 만들었는데, 다른 형태로도 OOP를 구현할 수 있다.

  • Line 1 : Module이라는 네임스페이스를 전역으로 정의한다.
  • Line 3 ~ Line 31 : Template라는 클래스를 정의한다.

Module.Template 클래스에는 3개의 메소드로 구성되어 있다.

  1. initialize : 생성자의 역할을 하고, 실행과 동시에 getHashData와 addEvent 메소드를 실행한다.
  2. getHashData : 생성자를 통해 넘어온 데이터를 처리하고, 변경된 결과를 리턴한다.
  3. addEvent : HTML 개체에 이벤트를 일괄적으로 추가하는 역할을 한다.

실습 예제

이제 위의 패턴을 이용해서 간단한 예제를 만들고, 실행할 것이다.

index.html

data.js

Module.Example.js

 

getElementsByClassName 메소드에 대해서

getElementsByClassName 메소드의 용도

클래스명을 가지고 요소를 선택할 때 사용하는 메소드로 웹킷 전용 메소드다. getElementsByTagName과 같이 선택된 요소의 배열을 리턴해 주는데, 이 메소드를 쓰는 것이 따로 JS 라이브러리로 구현하거나 XPATH를 사용하는 것보다 엄청나게 빠르다.

지원되지 않는 브라우저에서 대체하는 방법

IE9에서는 지원하는 반면에 IE 6,7,8은 지원하지 않기 때문에 getElementsByTagName 함수를 직접 만들어한다.

 

Ajax에 대해서(jQuery를 이용한 플리커 API 처리)

AJAX란?

대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

Asynchronous Javascript and XML - 비동기적인 자바스크립트와 XML

  • 표현정보를 위한 HTML과 CSS
  • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
  • 웹서버와 비동기적으로 데이터 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest

AJAX의 장점과 단점

장점

  • 페이지 이동이 없이 빠른속도로 화면전환할 수 있다.
  • 서버처리를 기다리지 않고 비동기 요청이 가능하다.
  • 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수 있다.

단점

  • Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
  • 지원하는 캐릭터셋이 한정되어 있다.
  • 디버깅이 용이하지 않다.

웹 브라우저

Ajax 지원

  • MS IE5 이상 – 오페라 8.0 이상
  • 오페라 모바일 8.0 이상 – 구글크롬

Ajax 미지원

  • 오페라 7이하
  • MS IE 4.0 이하
  • 텍스트 기반 브라우저 lynx, w3m
  • 시각장애인을 위한 브라우저
  • 1997년 이전 브라우저

활용사례

  • 검색어 자동완성
  • 회원가입폼에서의 아이디 중복 체크
  • 페이스북이나 구글의 알림 서비스(숫자)

크로스 도메인 문제

기본적으로 Ajax 요청은 도메인이 같은 호스트로만 요청이 가능하고, 도메인이 다른 호스트에 요청을 하게 되면 콘텐츠를 받아올 수 없다. 예를들어 aaa.com 이라는 호스트에서 http://bbb.com/rss.xml 을 ajax 요청해서 받아 올 수는 없다. 이를 해결할 수 있는 4가지 방법이 있다.

  • 프록시 방식
  • 호출되어지는 호스트에서 허용하는 헤더를 넣는 방식
  • script 태그를 동적으로 생성하는 방식

플리커 API 활용 예제

HTML

 

Javascript

 

Date 객체와 Timing 관련 메소드

Timing

setTimeout

setTimeout 메소드는 지정된 시간 이후에 함수를 실행한다.

clearTimeout

clearTimeout 메소드는 setTimeout을 시켰을 경우 타이머가 동작하게 되는데 이 타이머를 해제하는 역할을 한다.

setInterval

setTimeout 메소드는 지정된 시간 이후에 단 한 번만 함수를 실행시키는 반면에 setInterval 메소드는 지정된 시간마다 함수를 실행한다.

clearInterval

clearTimeout 메소드는 setInterval 메소드로 타이머를 동작시켰을 때 해제하는 역할을 한다.

Example

HTML

Javascript

Date 객체

자바스크립트에서는 날짜에 관한 기본적인 것들은 Date 객체가 담당한다. 예를들면 현재시간을 가져오거나, 1월1일이 무슨 요일인지 등을 알수 있게 돕는 객체다.

참조 URL

아래 링크에서 Date 객체의 모든 것을 확인 할 수 있다.

http://w3schools.com/jsref/jsref_obj_date.asp

Example

Javascript