이벤트

마우스 관련 :

이벤트 핸들러	설명
onmouseenter	포인터가 한 요소로 이동될 때 발생
onmouseleave	포인터가 요소의 바깥으로 나갈 때 발생
onmousemove	요소 위에서 포인터가 움직일 때
onmousedown	요소에서 마우스 버튼을 눌렀을 때 발생
onmouseup	요소위에서 마우스 버튼을 눌렀을 때 발생(release)

자주 사용하는 이벤트 메소드 :

이벤트 핸들러	설명
e.preventDefault()	기본 기능이 동작하는 걸 막는다.
e.stopPropagation()	부모 노드 방향으로 이벤트가 전파되지 않도록 한다.

배열

var arr = [1,2,3];

// indexOf : 배열에 값이 존재하면 인덱스값을 리턴. 없으면 -1
arr.indexOf(1); // 0
arr.indexOf(4); // -1

// 배열에 원소 추가
arr.push(4); // [1,2,3,4]

// 배열에서 원소 제거
// 3의 인덱스를 구해서
var idx = arr.indexOf(3);
// 그 인덱스 값을 기준으로 1개 제거
arr.splice(idx, 1);

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14

						var arr = [1,2,3];
 
// indexOf : 배열에 값이 존재하면 인덱스값을 리턴. 없으면 -1
arr.indexOf(1); // 0
arr.indexOf(4); // -1
 
// 배열에 원소 추가
arr.push(4); // [1,2,3,4]
 
// 배열에서 원소 제거
// 3의 인덱스를 구해서
var idx = arr.indexOf(3);
// 그 인덱스 값을 기준으로 1개 제거
arr.splice(idx, 1);

					

			

map

const files = ["F1", "F2", "F3"]

const result = files.map(file => {
    return "- " + file;
});

console.log(result); // ["- F1", "- F2", "- F3"]

				1
2
3
4
5
6
7

						const files = ["F1", "F2", "F3"]
 
const result = files.map(file => {
    return "- " + file;
});
 
console.log(result); // ["- F1", "- F2", "- F3"]

template (ES6)

const foo = 'FOO';
const bar = 'BAR';
console.log(`${foo}-${bar}`); // FOO-BAR

				1
2
3

						const foo = 'FOO';
const bar = 'BAR';
console.log(`${foo}-${bar}`); // FOO-BAR

유용한 객체

// 유저 에이전트
navigator.userAgent

				1
2

						// 유저 에이전트
navigator.userAgent

2017년 4월 10일2018년 1월 12일

ES6 Generator 예제

Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수다.

파일 업로드 처리 하는데, 동시에 처리하는 파일의 갯수를 제한할 필요가 있었다. while과 setInterval 조합으로 처리하려다가 좀 더 세련되고, 최근 기술을 사용하고 싶어서 Generator를 사용했다.

1번 예제는 써도 괜찮지만 2번 예제는 보완이 필요해 보인다.

비동기 함수를 순차적으로 실행하는 예제

다음은 Generator를 사용해서 비동기 함수를 순차적으로 실행하는 간단한 코드다.

// 실행하려는 비동기 함수
function PromiseFunc(i) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('returned', i)
            resolve();
        }, 1000);
    });
}

// 이터레이터를 만드는 함수. *과 yield 사용
function* getIterator() {
    for (let i=0; i<10; i++) {
        yield PromiseFunc(i);
    }
}

// 이터레이터를 가져온다.
const it = getIterator();
(function nextItem(val) {
    // ret = {value: ..., done: true or false}
    let ret = it.next(val);

    // 이터레이터의 다음이 있는지?
    if(!ret.done) {
        ret.value.then(nextItem);
    } else {
        console.log("finished");
    }
})()

				
					
				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

						// 실행하려는 비동기 함수
function PromiseFunc(i) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('returned', i)
            resolve();
        }, 1000);
    });
}
 
// 이터레이터를 만드는 함수. *과 yield 사용
function* getIterator() {
    for (let i=0; i<10; i++) {
        yield PromiseFunc(i);
    }
}
 
// 이터레이터를 가져온다.
const it = getIterator();
(function nextItem(val) {
    // ret = {value: ..., done: true or false}
    let ret = it.next(val);
 
    // 이터레이터의 다음이 있는지?
    if(!ret.done) {
        ret.value.then(nextItem);
    } else {
        console.log("finished");
    }
})()

					

			

동시에 10개씩 처리하는 예제

이번에는 10개씩 동시 처리하는 예제다.

// 실행하려는 비동기 함수
function PromiseFunc(i) {
    return new Promise((resolve) => {
        console.log('invoked', i)

        // 비동기 처리
        setTimeout(() => {
            console.log('returned', i)
            resolve(i);
        }, 1000);
    });
}

// 이터레이터를 만드는 함수. *과 yield 사용
function* getIterator() {
    for (let i=0; i<100; i++) {
        yield PromiseFunc(i);
    }
}

// 이터레이터를 가져온다.
const it = getIterator();

// 동시에 처리할 개수 지정
const CONCURRENT = 10;

// 카운트 초기화
let cnt = 0;

// 처리 시작
(function nextItem() {
    let ret = it.next();

    // 카운트 증가
    cnt++;

    if(!ret.done) {
        ret.value.then(() => {
            // 처리가 완료되어 카운트 감소
            cnt--;
        });

        let timer = setInterval(() => {
            if(cnt < CONCURRENT) {
                nextItem();
                clearInterval(timer);
            }
        }, 0);
    } else {
        console.log("finished");
    }
})()

				
					
				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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

						// 실행하려는 비동기 함수
function PromiseFunc(i) {
    return new Promise((resolve) => {
        console.log('invoked', i)
 
        // 비동기 처리
        setTimeout(() => {
            console.log('returned', i)
            resolve(i);
        }, 1000);
    });
}
 
// 이터레이터를 만드는 함수. *과 yield 사용
function* getIterator() {
    for (let i=0; i<100; i++) {
        yield PromiseFunc(i);
    }
}
 
// 이터레이터를 가져온다.
const it = getIterator();
 
// 동시에 처리할 개수 지정
const CONCURRENT = 10;
 
// 카운트 초기화
let cnt = 0;
 
// 처리 시작
(function nextItem() {
    let ret = it.next();
 
    // 카운트 증가
    cnt++;
 
    if(!ret.done) {
        ret.value.then(() => {
            // 처리가 완료되어 카운트 감소
            cnt--;
        });
 
        let timer = setInterval(() => {
            if(cnt < CONCURRENT) {
                nextItem();
                clearInterval(timer);
            }
        }, 0);
    } else {
        console.log("finished");
    }
})()

					

			

2017년 3월 24일2018년 1월 12일

서브라임텍스트에서 자바스크립트 파일 ES6 Syntax Highlight 설정하기

프로젝트를 진행할 때 자바스크립트를 사용하는데, 오래된 프로젝트는 ES3, ES5를 사용하고, webpack을 사용한 이후에는 ES6만 사용한다. 프로젝트에 따라 문법을 다르게 써야할 필요가 있는데, 서브라임에서는 기본적으로 한 확장자에 하나의 언어만 지원한다. 물론 변경할 수도 있지만 파일마다 변경해야해서 귀찮다. 그래서 찾은 플러그인이 sublime-project-specific-syntax이다.

이 플러그인을 사용하면, 프로젝트마다 syntax를 설정할 수 있다.

방법은 플러그인 설치 후 프로젝트에서 다음과 같이 설정하면 된다.

Project – Edit Project

{
    ...
    "syntax_override":
    {
        "\\.js|\\.jsx$":
        [
            "Babel",
            "JavaScript (Babel)"
        ]
    }
}

				
					
				1
2
3
4
5
6
7
8
9
10
11

						{
    ...
    "syntax_override":
    {
        "\\.js|\\.jsx$":
        [
            "Babel",
            "JavaScript (Babel)"
        ]
    }
}

					

			

2013년 8월 5일2018년 1월 12일

자바스크립트 DOM

Dom 이란?

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

DOM의 처리 순서

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

Dom Method

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

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

HTML

<h1>testByTagName - 색 변경 - getElementsByTagName 예제</h1>
<ul id="test1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
  
<h1>testByName - 색 변경, getElementsByName 예제</h1>
<ul id="test2">
    <li name="li_name">1</li>
    <li name="li_name">2</li>
    <li name="li_name">3</li>
    <li name="li_name">4</li>
    <li name="li_name">5</li>
</ul>
  
  
<h1>drawBox - 박스 그렸다 5초만에 지우기</h1>

<h1>testByTagName - 색 변경 - getElementsByTagName 예제</h1>

</ul>

<h1>testByName - 색 변경, getElementsByName 예제</h1>

</ul>

<h1>drawBox - 박스 그렸다 5초만에 지우기</h1>

Javascript

<script type="text/javascript">
//DIV 박스를 body 태그 안에 추가해주는 함수
function drawBox() {
    // DIV 요소 생성
    var div = document.createElement("div");
  
    // DIV의 속성 지정 (id, style)
    div.setAttribute("id","testDiv");
    div.setAttribute("style","border:1px solid #000000;padding:10px;height:100px;");
  
    // DIV 내용으로 위에서 지정한 속성을 출력 
    div.innerHTML = div.getAttribute("style");
  
    // DIV를 body 태그안에 추가해준다. 
    document.body.appendChild(div);
  
    // 5초 보여주고 지우기
    setTimeout(function() {
        // 요소 제거
        document.body.removeChild(div);
    },5000);
}
  
function testByTagName() {
    // test1이란 아이디를 가진 요소를 JS 변수로 선언
    var test2 = document.getElementById("test1");
  
    // test2에서 tagName으로 검색해서 li인 것만 찾아서 배열로 저장
    var arrLi = test2.getElementsByTagName("li");
  
    // 배열 갯수
    var cnt = arrLi.length;
  
    // 배열 루프
    for(var i=0;i<cnt;i++) {
        // 선택된 li 요소의 색상 변경
        arrLi[i].setAttribute("style","color:red;");
    }
}
  
function testByName() {
    var arrLi = document.getElementsByName("li_name");
  
    // 배열 갯수
    var cnt = arrLi.length;
  
    // 배열 루프
    for(var i=0;i<cnt;i++) {
        // 선택된 li 요소의 색상 변경
        arrLi[i].setAttribute("style","color:blue;font-size:14px;");
    }
}
  
// 함수 실행
drawBox();
testByName();
testByTagName();
</script>

//DIV 박스를 body 태그 안에 추가해주는 함수

function drawBox() {

// DIV 요소 생성

var div = document.createElement("div");

// DIV의 속성 지정 (id, style)

div.setAttribute("id","testDiv");

div.setAttribute("style","border:1px solid #000000;padding:10px;height:100px;");

// DIV 내용으로 위에서 지정한 속성을 출력

div.innerHTML = div.getAttribute("style");

// DIV를 body 태그안에 추가해준다.

document.body.appendChild(div);

// 5초 보여주고 지우기

setTimeout(function() {

// 요소 제거

document.body.removeChild(div);

},5000);

}

function testByTagName() {

// test1이란 아이디를 가진 요소를 JS 변수로 선언

var test2 = document.getElementById("test1");

// test2에서 tagName으로 검색해서 li인 것만 찾아서 배열로 저장

var arrLi = test2.getElementsByTagName("li");

// 배열 갯수

var cnt = arrLi.length;

// 배열 루프

for(var i=0;i<cnt;i++) {

// 선택된 li 요소의 색상 변경

arrLi[i].setAttribute("style","color:red;");

}

function testByName() {

var arrLi = document.getElementsByName("li_name");

// 배열 갯수

var cnt = arrLi.length;

// 배열 루프

for(var i=0;i<cnt;i++) {

// 선택된 li 요소의 색상 변경

arrLi[i].setAttribute("style","color:blue;font-size:14px;");

}

// 함수 실행

drawBox();

testByName();

testByTagName();

</script>

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 : 선택된 요소의 자식 요소를 선택한다.

2013년 8월 5일2018년 1월 12일

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

준비물

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

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

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

Hello World!

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

<html>
<head>
<title>Hello World</title>
</head>
<body>
<script type="text/javascript">
console.log("Hello World!");
</script>

<html>

<head>

<title>Hello World</title>

</head>

<body>

console.log("Hello World!");

</script>

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

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

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

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

2013년 8월 5일2018년 1월 12일

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

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

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

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

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

먼저 HTML과 CSS를 정의한다.

HTML

<!-- 모달 창을 여는 버튼 -->
<button id="button">Open Modal</button>
  
<!-- 모달창 -->
<div id="modal">
    <h3>Test Modal</h3>
    <p>이 창은 모달창입니다.</p>
    <button id="confirm_button">확인</button>
    <button class="js_close">닫기</button>
</div>

<button id="button">Open Modal</button>

<h3>Test Modal</h3>

<p>이 창은 모달창입니다.</p>

</div>

CSS

#modal {display:none;background-color:#FFFFFF;position:absolute;top:300px;left:200px;padding:10px;border:2px solid #E2E2E2;z-Index:9999}

1	#modal {display:none;background-color:#FFFFFF;position:absolute;top:300px;left:200px;padding:10px;border:2px solid #E2E2E2;z-Index:9999}

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

Javascript

<!-- 스크립트 영역 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/Example.Modal.js"></script>
<script type="text/javascript">
// 모달창 인스턴트 생성
var myModal = new Example.Modal({
    id: "modal" // 모달창 아이디 지정
});
  
// 모달 창 여는 버튼에 이벤트 걸기
$("#button").click(function() {
    myModal.show(); // 모달창 보여주기
});
  
// 모달 창 안에 있는 확인 버튼에 이벤트 걸기
$("#confirm_button").click(function() {
    alert("나는 모달창이다.");
    myModal.hide(); // 모달창 감추기
});
</script>

// 모달창 인스턴트 생성

var myModal = new Example.Modal({

id: "modal" // 모달창 아이디 지정

});

// 모달 창 여는 버튼에 이벤트 걸기

$("#button").click(function() {

myModal.show(); // 모달창 보여주기

});

// 모달 창 안에 있는 확인 버튼에 이벤트 걸기

$("#confirm_button").click(function() {

alert("나는 모달창이다.");

myModal.hide(); // 모달창 감추기

});

</script>

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

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

Example.Modal.js

if(typeof(Example) == "undefined") var Example = {};
 
(function($){
    Example.Modal = function() {
    this.initialize.apply(this,arguments);
}
 
Example.Modal.prototype = {
    initialize : function(hash) {
        var obj = this;
 
        // 멤버변수 정의
        this.hash = this.getHashData(hash);
        this.width = 0; // 콘텐츠 레이어 너비
        this.height = 0; // 콘텐츠 레이어 높이
        this.c_width = 0; // body 화면 너비
        this.c_height = 0; // body 화면 높이
        this.s_width = 0; // body 전체 너비
        this.s_height = 0; // body 전체 높이
 
        // 콘텐츠 레이어 사이즈 구하기(멤버변수에 저장)
        this.getLayerSize();
 
        // body 사이즈 구하기(멤버변수에 저장)
        this.getBodySize();
 
        // 추가 엘리먼트 생성
        this.addElement();
 
        // 마우스, 키 이벤트 정의
        this.addEvent();
    },
 
    // Hash 변수정의
    getHashData : function(hash) {
        if(typeof(hash.id) == "undefined") hash.id = "modal"; // 개체 아이디
        if(typeof(hash.is_slide) == "undefined") hash.is_slide = 0; // 슬라이딩 여부
 
        return hash;
    },
 
    // 추가 엘리먼트 생성 - JS에서 추가해 주어야 할 HTML 작성합니다.
    addElement : function() {
        // 배경 레이어 HTML 받아오기
        var html = this.addOverlay();
 
        // 배경레이어 HTML을 콘텐츠레이어 앞에 추가
        $("#"+this.hash.id).before(html);
    },
 
    // 마우스, 키 이벤트 정의
    addEvent : function() {
        var obj = this;
 
        // 닫기 버튼 클릭 이벤트 정의
        $("#"+this.hash.id+" .js_close").click(function() {
            // 모달창 감추기(여기서 obj는 Example.Modal 인스턴트 자체를 의미)
            obj.hide();
        });
    },  
 
    /* 주요기능 */
 
    // 모달창 보여주기
    show : function() {
        // 가운데로 이동
        this.moveCenter();
 
        // 배경레이어 적용
        this.applyOverlay();
 
        // 콘텐츠 레이어 보여주기
        $("#"+this.hash.id).show(); 
 
        // 배경 레이어 보여주기
        $("#"+this.hash.id+"_overlay").show();
    },
 
    // 모달창 감추기
    hide : function() {
        $("#"+this.hash.id).hide(); // 콘텐츠 레이어 감추기
        $("#"+this.hash.id+"_overlay").hide(); // 배경 레이어 감추기
    },  
 
    /* 부가 기능 */
 
    // 콘텐츠 레이어의 너비와 높이를 구해서 멤버변수에 정의
    getLayerSize : function() {
        this.width = $("#"+this.hash.id).outerWidth();
        this.height = $("#"+this.hash.id).outerHeight();
    },
 
    // body 사이즈 구해서 멤버변수에 정의
    getBodySize : function() {
        this.c_width = document.documentElement.clientWidth;
        this.c_height = document.documentElement.clientHeight;
        this.s_width = document.documentElement.scrollWidth;
        this.s_height = document.documentElement.scrollHeight;
    },
 
    // 배경 레이어 HTML 생성
    addOverlay : function() {
        var html = "";
        html += "<div id='"+this.hash.id+"_overlay' style='display:none;width:100%;position:absolute;top:0px;left:0px;opacity:0.5;background-color:#000000;z-Index:999'></div>";

        return html;
    },
 
    // 콘텐츠 레이어를 가운데로 이동(top, left 조절해 줌)
    moveCenter : function() {
        // left 좌표 구하기
        var left = Math.floor((this.c_width-this.width)/2);
 
        // top 좌표 구하기
        var res_height; // 콘텐츠를 화면상의 가운데로 두었을 때의 높이
        if(this.c_height < this.height) { // 화면 높이 < 콘텐츠 레이어 높이
            res_height = 0;
        } else { // 화면 높기 >= 콘텐츠 레이어 높이
            res_height = Math.floor((this.c_height-this.height)/2); // 차이를 빼서 2로 나눔. 그리고 내림.
        }
        var top = res_height+$(document).scrollTop(); // 화면상의 높이에 스크롤높이를 더한 절대좌표를 top에 저장
 
        // css의 top,left 조정
        $("#"+this.hash.id).css("top",top);
        $("#"+this.hash.id).css("left",left);
    },
 
    // 배경 레이어 적용
    applyOverlay : function() {
        // body 사이즈 구하기(멤버변수에 저장)
        this.getBodySize();
 
        // 배경 레이어에 width, height css 값 조정
        $("#"+this.hash.id+"_overlay").css("width",this.s_width);
        $("#"+this.hash.id+"_overlay").css("height",this.s_height);
    }
}
 
})(jQuery);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

if(typeof(Example) == "undefined") var Example = {};

(function($){

Example.Modal = function() {

this.initialize.apply(this,arguments);

}

Example.Modal.prototype = {

initialize : function(hash) {

var obj = this;

// 멤버변수 정의

this.hash = this.getHashData(hash);

this.width = 0; // 콘텐츠 레이어 너비

this.height = 0; // 콘텐츠 레이어 높이

this.c_width = 0; // body 화면 너비

this.c_height = 0; // body 화면 높이

this.s_width = 0; // body 전체 너비

this.s_height = 0; // body 전체 높이

// 콘텐츠 레이어 사이즈 구하기(멤버변수에 저장)

this.getLayerSize();

// body 사이즈 구하기(멤버변수에 저장)

this.getBodySize();

// 추가 엘리먼트 생성

this.addElement();

// 마우스, 키 이벤트 정의

this.addEvent();

// Hash 변수정의

getHashData : function(hash) {

if(typeof(hash.id) == "undefined") hash.id = "modal"; // 개체 아이디

if(typeof(hash.is_slide) == "undefined") hash.is_slide = 0; // 슬라이딩 여부

return hash;

// 추가 엘리먼트 생성 - JS에서 추가해 주어야 할 HTML 작성합니다.

addElement : function() {

// 배경 레이어 HTML 받아오기

var html = this.addOverlay();

// 배경레이어 HTML을 콘텐츠레이어 앞에 추가

$("#"+this.hash.id).before(html);

// 마우스, 키 이벤트 정의

addEvent : function() {

var obj = this;

// 닫기 버튼 클릭 이벤트 정의

$("#"+this.hash.id+" .js_close").click(function() {

// 모달창 감추기(여기서 obj는 Example.Modal 인스턴트 자체를 의미)

obj.hide();

});

/* 주요기능 */

// 모달창 보여주기

show : function() {

// 가운데로 이동

this.moveCenter();

// 배경레이어 적용

this.applyOverlay();

// 콘텐츠 레이어 보여주기

$("#"+this.hash.id).show();

// 배경 레이어 보여주기

$("#"+this.hash.id+"_overlay").show();

// 모달창 감추기

hide : function() {

$("#"+this.hash.id).hide(); // 콘텐츠 레이어 감추기

$("#"+this.hash.id+"_overlay").hide(); // 배경 레이어 감추기

/* 부가 기능 */

// 콘텐츠 레이어의 너비와 높이를 구해서 멤버변수에 정의

getLayerSize : function() {

this.width = $("#"+this.hash.id).outerWidth();

this.height = $("#"+this.hash.id).outerHeight();

// body 사이즈 구해서 멤버변수에 정의

getBodySize : function() {

this.c_width = document.documentElement.clientWidth;

this.c_height = document.documentElement.clientHeight;

this.s_width = document.documentElement.scrollWidth;

this.s_height = document.documentElement.scrollHeight;

// 배경 레이어 HTML 생성

addOverlay : function() {

var html = "";

html += "<div id='"+this.hash.id+"_overlay' style='display:none;width:100%;position:absolute;top:0px;left:0px;opacity:0.5;background-color:#000000;z-Index:999'></div>";

return html;

// 콘텐츠 레이어를 가운데로 이동(top, left 조절해 줌)

moveCenter : function() {

// left 좌표 구하기

var left = Math.floor((this.c_width-this.width)/2);

// top 좌표 구하기

var res_height; // 콘텐츠를 화면상의 가운데로 두었을 때의 높이

if(this.c_height < this.height) { // 화면 높이 < 콘텐츠 레이어 높이

res_height = 0;

} else { // 화면 높기 >= 콘텐츠 레이어 높이

res_height = Math.floor((this.c_height-this.height)/2); // 차이를 빼서 2로 나눔. 그리고 내림.

}

var top = res_height+$(document).scrollTop(); // 화면상의 높이에 스크롤높이를 더한 절대좌표를 top에 저장

// css의 top,left 조정

$("#"+this.hash.id).css("top",top);

$("#"+this.hash.id).css("left",left);

// 배경 레이어 적용

applyOverlay : function() {

// body 사이즈 구하기(멤버변수에 저장)

this.getBodySize();

// 배경 레이어에 width, height css 값 조정

$("#"+this.hash.id+"_overlay").css("width",this.s_width);

$("#"+this.hash.id+"_overlay").css("height",this.s_height);

}

})(jQuery);

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

Initialize

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

getHashData

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

this.hash = this.getHashData(hash);

1	this.hash = this.getHashData(hash);

addElement

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

addEvent

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

show

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

hide

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

getLayerSize

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

getBodySize

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

addOverlay

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

moveCenter

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

applyOverlay

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

2013년 8월 5일2018년 1월 12일

Javascript 이벤트

이벤트란?

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

IE에서 이벤트 추가하기

element.attachEvent(event, callback);

1	element.attachEvent(event, callback);

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

element.addEventListener(event, callback, useCapture);

1	element.addEventListener(event, callback, useCapture);

이벤트 추가하는 함수

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

function addEvent(ele,evt,callback, useCapture) {   
    if(ele.addEventListener) {
        ele.addEventListener(evt,callback, useCapture);
    } else if(ele.attachEvent) {
        ele.attachEvent("on"+evt, callback);
    }
}

function addEvent(ele,evt,callback, useCapture) {

if(ele.addEventListener) {

ele.addEventListener(evt,callback, useCapture);

} else if(ele.attachEvent) {

ele.attachEvent("on"+evt, callback);

}

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

<h1>Event Test</h1>
<div id="wrap">
    <div id="wrap2">
        <button id="test_btn">click</button>
    </div>
</div>
  
<h1>DEBUG <button id="clear">clear</button></h1>
<div id="console"></div>

<h1>Event Test</h1>

<button id="test_btn">click</button>

</div>

<h1>DEBUG <button id="clear">clear</button></h1>

CSS

#wrap {border:1px solid #000000;padding:10px;margin-bottom:10px;}
#wrap2 {border:1px solid #E2E2E2;padding:10px;margin-bottom:10px;}
#console {height:400px;overflow-y:scroll;border:1px solid #E2E2E2;padding:10px;}

#wrap {border:1px solid #000000;padding:10px;margin-bottom:10px;}

#wrap2 {border:1px solid #E2E2E2;padding:10px;margin-bottom:10px;}

#console {height:400px;overflow-y:scroll;border:1px solid #E2E2E2;padding:10px;}

Javascript

<!-- 스크립트 영역 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
// HTML 엘리먼트를 자바스크립트 변수로 저장
var wrap = document.getElementById("wrap"); // 감싸는 레이어
var wrap2 = document.getElementById("wrap2"); // 감싸는 레이어2
var clear_btn = document.getElementById("clear"); // 클리어 버튼
var test_btn = document.getElementById("test_btn"); // 클릭 버튼
var consol_div = document.getElementById("console"); // 콘솔창
  
// 카운트 변수 정의
var logCnt = 1;
  
// 로그를 출력하기 위한 함수
function logConsole(msg) {
    consol_div.innerHTML = logCnt+" : "+msg+"<br />"+consol_div.innerHTML;
    logCnt++;
}
  
// 로그 초기화 함수
function clearConsole() {
    consol_div.innerHTML = "";
    logCnt = 1;
}
  
// 이벤트 등록을 위한 브라우저 호환을 위한 함수 정의
function addEvent(ele,evt,callback, useCapture) {   
    if(ele.addEventListener) {
        ele.addEventListener(evt,callback, useCapture);
    } else if(ele.attachEvent) {
        ele.attachEvent("on"+evt, callback);
    }
}
  
/*** 구현 ***/
  
// 로그 clear 버튼 클릭 이벤트 걸기
addEvent(clear_btn,"click", function(e) {
    clearConsole();
},false);
  
// 감싸는 레이어 클릭 이벤트 걸기
addEvent(wrap,"click", function(e) {
    logConsole("wrap click");
},false);
  
//감싸는 레이어2 클릭 이벤트 걸기
addEvent(wrap2,"click", function(e) {
    logConsole("wrap2 click");
},false);
  
// 버튼 클릭 이벤트 걸기
addEvent(test_btn,"click", function(e) {
    // 표준 브라우저일 경우
    if(typeof(e.stopPropagation) == "function") {
         e.stopPropagation();       
    } else { // IE 일 경우           
        window.event.cancelBubble = true;       
    } 
  
    logConsole("button click");
},false);
</script>

// HTML 엘리먼트를 자바스크립트 변수로 저장

var wrap = document.getElementById("wrap"); // 감싸는 레이어

var wrap2 = document.getElementById("wrap2"); // 감싸는 레이어2

var clear_btn = document.getElementById("clear"); // 클리어 버튼

var test_btn = document.getElementById("test_btn"); // 클릭 버튼

var consol_div = document.getElementById("console"); // 콘솔창

// 카운트 변수 정의

var logCnt = 1;

// 로그를 출력하기 위한 함수

function logConsole(msg) {

consol_div.innerHTML = logCnt+" : "+msg+"<br />"+consol_div.innerHTML;

logCnt++;

}

// 로그 초기화 함수

function clearConsole() {

consol_div.innerHTML = "";

logCnt = 1;

}

// 이벤트 등록을 위한 브라우저 호환을 위한 함수 정의

function addEvent(ele,evt,callback, useCapture) {

if(ele.addEventListener) {

ele.addEventListener(evt,callback, useCapture);

} else if(ele.attachEvent) {

ele.attachEvent("on"+evt, callback);

}

/*** 구현 ***/

// 로그 clear 버튼 클릭 이벤트 걸기

addEvent(clear_btn,"click", function(e) {

clearConsole();

},false);

// 감싸는 레이어 클릭 이벤트 걸기

addEvent(wrap,"click", function(e) {

logConsole("wrap click");

},false);

//감싸는 레이어2 클릭 이벤트 걸기

addEvent(wrap2,"click", function(e) {

logConsole("wrap2 click");

},false);

// 버튼 클릭 이벤트 걸기

addEvent(test_btn,"click", function(e) {

// 표준 브라우저일 경우

if(typeof(e.stopPropagation) == "function") {

e.stopPropagation();

} else { // IE 일 경우

window.event.cancelBubble = true;

}

logConsole("button click");

},false);

</script>

2013년 8월 5일2018년 1월 12일

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

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

데이터 타입

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

JSON

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

// 예
var rss = [ 
{no: 1, title: "블로그글 제목1", content:  "블로그 내용1",  wdate: "2011-06-25"}, 
{no: 2, title: "블로그글 제목2", content:  "블로그 내용2",  wdate: "2011-06-27"} 
];

// 예

var rss = [

{no: 1, title: "블로그글 제목1", content: "블로그 내용1", wdate: "2011-06-25"},

{no: 2, title: "블로그글 제목2", content: "블로그 내용2", wdate: "2011-06-27"}

];

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

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

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

주요 용어

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

객체의 특징

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

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

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

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

if(typeof(Module) == "undefined") var Module = {};

(function($){

Module.Template = function() {
    this.initialize.apply(this,arguments);
}

Module.Template.prototype = {
    initialize : function(hash) {
        var obj = this;

        this.hash = this.getHashData(hash);
        this.addElement();
        this.addEvent();
    },

    getHashData : function(hash) {
        if(typeof(hash.id) == "undefined") hash.id = "";

        return hash;
    }
}

})(jQuery);

if(typeof(Module) == "undefined") var Module = {};

(function($){

Module.Template = function() {

this.initialize.apply(this,arguments);

}

Module.Template.prototype = {

initialize : function(hash) {

var obj = this;

this.hash = this.getHashData(hash);

this.addElement();

this.addEvent();

getHashData : function(hash) {

if(typeof(hash.id) == "undefined") hash.id = "";

return hash;

}

})(jQuery);

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

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

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

실습 예제

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

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>OOP 테스트 프로그램</title>
</head>
 
<body>
<button id="person1">신짱구</button>
<button id="person2">나미리</button>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="Module.Example.js"></script>
<script type="text/javascript">
// 인스턴스 생성
var P1 = new Module.Person({ // 신짱구
    id: "person1",
    data: data1
});
var P2 = new Module.Person({ // 나미리
    id: "person2",
    data: data2
});
</script>
</body>
</html>

<html>

<head>

</head>

<body>

// 인스턴스 생성

var P1 = new Module.Person({ // 신짱구

id: "person1",

data: data1

});

var P2 = new Module.Person({ // 나미리

id: "person2",

data: data2

});

</script>

</body>

</html>

data.js

// 데이터 정의
var data1 = {
    name: "신짱구",
    age: 5
}
var data2 = {
    name: "나미리",
    age: 22
}

// 데이터 정의

var data1 = {

name: "신짱구",

age: 5

}

var data2 = {

name: "나미리",

age: 22

}

Module.Example.js

// 클래스 정의
if(typeof(Module) == "undefined") var Module = {};

(function($){

Module.Person = function() {
    this.initialize.apply(this,arguments);
}

Module.Person.prototype = {
    initialize : function(hash) {
        var obj = this;

        this.hash = this.getHashData(hash);
        this.addEvent();
    },

    getHashData : function(hash) {
        if(typeof(hash.id) == "undefined") hash.id = "";
        if(typeof(hash.data) == "undefined") hash.data = {};

        return hash;
    },

    addEvent : function() {
        var THIS = this;

        $("#"+this.hash.id).mouseover(function() {
            THIS.alertName();
        }).mouseout(function() {
            THIS.alertAge();
        });

    },

    alertName : function() {
        console.log("내 이름은 "+this.hash.data.name+"입니다.");
    },

    alertAge : function() {
        var who;

        if(this.hash.data.age > 19) {
            who = "어른";
        } else {
            who = "미성년자";
        }

        console.log(this.hash.data.age+"살 "+who+"에요.");
    }
}

})(jQuery);

// 클래스 정의

if(typeof(Module) == "undefined") var Module = {};

(function($){

Module.Person = function() {

this.initialize.apply(this,arguments);

}

Module.Person.prototype = {

initialize : function(hash) {

var obj = this;

this.hash = this.getHashData(hash);

this.addEvent();

getHashData : function(hash) {

if(typeof(hash.id) == "undefined") hash.id = "";

if(typeof(hash.data) == "undefined") hash.data = {};

return hash;

addEvent : function() {

var THIS = this;

$("#"+this.hash.id).mouseover(function() {

THIS.alertName();

}).mouseout(function() {

THIS.alertAge();

});

alertName : function() {

console.log("내 이름은 "+this.hash.data.name+"입니다.");

alertAge : function() {

var who;

if(this.hash.data.age > 19) {

who = "어른";

} else {

who = "미성년자";

}

console.log(this.hash.data.age+"살 "+who+"에요.");

}

})(jQuery);

2013년 8월 5일2018년 1월 12일

아이패드에서 한글로 해시에 저장할 때 문제점

location.hash = "name=한글";

1	location.hash = "name=한글";

이런식으로 입력을 하게 되면 아이패드 사파리에서는 자동으로 인코딩이 되는데,

location.href = location.href+"#name=한글"

1	location.href = location.href+"#name=한글"

이런식으로 입력하면 한글이 인코딩 안되게 저장이 된다.

2013년 8월 5일2018년 1월 12일

getElementsByClassName 메소드에 대해서

getElementsByClassName 메소드의 용도

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

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

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

// 미지원 브라우저에서는 메소드 정의
if(typeof(document.getElementsByClassName) !== "function") {
    document.getElementsByClassName = function(className) {
        var arr = [];
        var ele = document.getElementsByTagName("*");
        var cnt = ele.length;
         
        for(var i=0;i -1) {
                arr.push(ele[i]);
            }
        }
         
        return arr;
    };
}

// 미지원 브라우저에서는 메소드 정의

if(typeof(document.getElementsByClassName) !== "function") {

document.getElementsByClassName = function(className) {

var arr = [];

var ele = document.getElementsByTagName("*");

var cnt = ele.length;

for(var i=0;i -1) {

arr.push(ele[i]);

}

return arr;

};

}