Notice
Recent Posts
Recent Comments
Link
Today
Total
05-03 08:25
Archives
관리 메뉴

Jeongchul Kim

Javascript 02 Javascript 객체 및 이벤트 처리 본문

Web프로그래밍

Javascript 02 Javascript 객체 및 이벤트 처리

김 정출 2016. 4. 29. 15:34


Javascript 02 Javascript 객체 및 이벤트 처리





JavaScript의 객체

1. JavaScript 객체의 개요

JavaScript의 객체

JavaScript는 객체기반의 스크립트 언어로 JavaScript를 이루고 있는 거의 모든 것들이 객체로 존재하며, 자신의 정보를 가지고 있는 독립적인 주체입니다. 또한 객체는 키와 값으로 이루어졌으며, 중괄호로 객체를 생성하고, 객체의 속성 값에 접근할 때는 키로 접근합니다. 만약 객체의 키로 식별자가 아닌 문자를 사용했을 때는 무조건 대괄호를 사용하여 접근합니다. 그럼, 제시된 객체를 사용한 소스코드를 확인해 보세요.



속성과 메소드에 대해 살펴보도록 하겠습니다. 속성은 객체 내부에 있는 값을 의미하며 객체의 속성은 모든 형태의 자료형을 가질 수 있습니다. 메소드는 속성 중에서 함수 자료형인 속성을 의미하며 메소드 내에서 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용하고, 다른 언어에서는 같은 객체 내부에서 this 키워드를 생략할 수 있지만, JavaScript에서는 this 키워드를 생략할 수 없습니다.

다음은 this 키워드를 사용한 소스코드입니다. this가 사용된 부분을 확인해 보세요.


배열은 단순 for 반복문과 for in 반복문으로 요소에 쉽게 접근할 수 있습니다. 하지만 객체는 단순 for 반복문으로 객체의 속성을 살펴보는 것이 불가능하며, 객체의 속성을 모두 살펴보려면 for in 반복문을 사용해야 합니다.

그럼, for in 반복문을 사용한 소스코드를 확인해 보세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>객체와 반복문!!</title>

<script>

var info = {

    name : '김정출',

    age : 26,

    phone : '010-0000-0000',

    address : '서울'

};

var output = '';

for (var key in info) {

 output += '-' + key + ' : ' + info[key] + '\n';

}

alert(output);

</script>

</head>

<body>

</body>

</html>


2. JavaScript 객체 관련 키워드

JavaScript 객체 관련 키워드를 살펴보겠습니다. in 키워드는 for 키워드와 별도로 사용하면 해당 키가 객체 안에 있는지 확인할 수 있으며, 속성이 존재하면 true를 출력하고, 존재하지 않으면 false를 출력합니다. 그럼, in 키워드를 사용한 소스코드를 확인해 보세요.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>in 키워드!!</title>

<script>

var output = '';

var info = {

    name : '황현서',

    age : 26,

    phone : '010-1234-5678',

    address : '충남 천안'

};

output += "'name' in info: " + ('name' in info) + '\n';

output += "'e-mail' in info: " + ('e-mail' in info);

alert(output);

</script>

</head>

<body>

</body>

</html>


with 키워드는 복잡하게 사용해야 하는 코드를 짧게 줄여주는 키워드입니다.

with 키워드를 사용하지 않은 경우와 사용한 경우의 소스코드를 비교해 보세요.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>with 키워드!!</title>

<script>

var info = {

    name : '황현서',

    age : 26,

    phone : '010-1234-5678',

    address : '충남 천안'

};

var output = '';

with(info) {

output += 'name : ' + name + '\n';

output += 'age : ' + age + '\n';

output += 'phone : ' + phone + '\n';

output += 'address : ' + address + '\n';

}

alert(output);

</script>

</head>

<body>

</body>

</html>



JavaScript의 이벤트

1. 이벤트 관련 용어

JavaScript의 이벤트

JavaScript의 이벤트는 키보드 입력, 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미합니다. 이벤트 유형으로는 마우스 이벤트, HTML 프레임 이벤트, HTML 입력 양식 이벤트 등이 있습니다.


제시된 소스코드를 통해 이벤트 관련 용어를 살펴보면, 이벤트 연결은 window 객체의 onload 속성에 함수 자료형을 할당하는 것으로, 이벤트 이름은 load이고, 이벤트 속성은 onload입니다. 이벤트 리스너는 이벤트 속성에 할당한 함수이고, 이벤트 모델은 문서 객체에 이벤트를 연결하는 방법으로 객체에 이벤트를 연결하는 방법은 DOM Level 단계에 따라 두 가지로 분류하고 각기 두 가지로 또 나눠집니다.


DOM Level 0은 인라인 이벤트 모델과 기본 이벤트 모델로 나뉘고, DOM Level 2는 마이크로소프트 인터넷 익스플로러 이벤트 모델과 표준 이벤트 모델로 나뉩니다. 이벤트 종류는 팁버튼을 클릭하여 확인보세요.



2. 이벤트 모델 및 객체

이벤트 모델에는 인라인 이벤트 모델, 인터넷 익스플로러 이벤트 모델, 표준 이벤트 모델이 있습니다. 먼저, 인라인 이벤트 모델은 HTML 페이지의 가장 기본적인 이벤트 연결 방법으로 한 번에 하나의 이벤트 리스너만을 가질 수 있습니다. 제시된 소스코드는 인라인 이벤트 모델을 이용하여 코드를 작성하는 순서입니다.


인터넷 익스플로러 이벤트 모델은 한 번에 하나의 이벤트 리스너만을 가질 수 있는 DOM Level 0이벤트 모델들의 단점을 보완하기 위해 만들어진 DOM Level 2 이벤트 모델입니다. DOM Level 2 이벤트 모델에는 인터넷 익스플로러 모델과 표준 이벤트 모델이 있으며, 국내에서는 인터넷 익스플로러 이벤트 모델을 많이 사용합니다. 제시된 두 가지 메소드는 이벤트를 연결하거나 제거할 수 있는 방법으로 첫 번째 매개변수에 이벤트 속성을 넣어줍니다.


표준 이벤트 모델은 웹 표준을 만드는 단체인 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델입니다. 제시된 소스코드는 이벤트를 연결할 때 사용하는 메소드로 매개변수 useCapture는 입력하지 않으면 자동으로 false를 입력합니다. 그리고 이벤트 리스너 안에서 this 키워드가 이벤트 발생 객체를 의미합니다. 표준 이벤트 모델은 인터넷 익스플로러 이벤트 모델과는 달리 이벤트 이름을 매개변수로 입력한다는 점에 주의해야합니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>이벤트 발생 객체!!</title>

<script>

window.onload = function() {

document.getElementById('header').onclick = function() {

this.style.color = 'red';

}

};

</script>

</head>

<body>

<h1 id="header">Click</h1>

</body>

</html>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>인라인 이벤트 모델!!</title>

<script>

function whenClick(e) {

alert('클릭3');

}

</script>

</head>

<body>

<h1 onclick="alert('클릭1')">Click1</h1>

<h1 onclick="var alpha='클릭2'; alert(alpha);">Click2</h1>

<h1 onclick="whenClick(event)">Click3</h1>

</body>

</html>




저작자표시

'Web프로그래밍' 카테고리의 다른 글

NodeJS Express 웹서버 Webserver  (0) 2017.08.22
음성인식 STT 한글 음성인식 Annyang API  (4) 2017.07.03
Javascript 01 Javascript의 개요  (0) 2016.04.29
CSS 05 CSS3 좌표계  (0) 2016.04.29
CSS 04 CSS3 선택자  (0) 2016.04.27
'Web프로그래밍' Related Articles more
Comments