Screen
웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체이다.
속성
width : 화면의 너비
height : 화면의 높이
availWidth : 실제 화면에서 사용 가능한 너비
availHeight : 실제 화면에서 사용 가능한 높이
colorDepth : 사용 가능한 색상 수
pixelDepth : 한 픽셀당 비트 수
location
브라우저의 주소 표시줄과 관련된 객체
속성
href : 문서의 URL 주소
host : 호스트 이름과 포트 번호
hostname : 호스트 이름
port : 포트 번호
pathname : 디렉토리 경로
hash : 앵커 이름(#~)
search : 요청 매개 변수
protocol : 프로토콜 종류
메서드
assign(link) : 현재 위치를 이동
reload() : 새로 고침
replace(lick) : 현재 위치를 이동(뒤로가기 버튼 사용 X)
navigator
웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가진 객체
속성
appcodeName : 브라우저의 코드명
appName : 브라우저의 이름
appVersion : 브라우저의 버전
platform : 사용 중인 운영체제의 시스템 환경
userAgent : 브라우저의 전체적인 정보
2013년 2월 23일 토요일
[JS] 브라우저 객체 모델(BOM) - Document
Document 객체는 최상위 객체인 window객체의 하위 객체로 문서에 대한 모든 정보를 관리하는 객체이다.
속성
nodeName : 노드 이름
nodeType : 특정 노드의 형식을 지정
nodeValue : 텍스트 노드의 문자열 값
childNodes : 하위 노드의 리스트
firstChild : 하위 노드 리스트 중 첫번째 노드
lastChild : 하위 노드 리스트 중 마지막 노드
parentNode; 자신의 부모 노드
nextSibling : 자신의 다음 형제노드
previousSibling : 자심의 바로 앞 형제 노드
innerHTML : 태그의 내용
nodeType : 특정 노드의 형식을 지정
nodeValue : 텍스트 노드의 문자열 값
childNodes : 하위 노드의 리스트
firstChild : 하위 노드 리스트 중 첫번째 노드
lastChild : 하위 노드 리스트 중 마지막 노드
parentNode; 자신의 부모 노드
nextSibling : 자신의 다음 형제노드
previousSibling : 자심의 바로 앞 형제 노드
innerHTML : 태그의 내용
메소드
open() : HTML문서에 데이터를 보낼 준비를 하거나 데이터를 모두 전송했음을 알림
close() : open()로 열려진 문서를 닫아 주는 역할
clear() : 브라우저에 나타난 문서를 지움
write() : 지정된 문서의 데이터를 출력
writeln() : 지정된 문서의 데이터를 출력
createElement(tagName) : 요소 노드를 생성
createTextNode(text) : 텍스트 노드를 생성
appendChild(node) : 객체에 노드를 연결
item(index) : 객체배열 중 해당하는 이덱스 객체 리턴
getElementById(id) : id를 가진 태그(객체)를 리턴
getElementsByName(name) : name을 가진 태그의 배열 리턴
getElementsByTagName(tagName) : tagName과 일치하는 태그의 배열 리턴
getAttribute(String attrName) : 속성값 검색
setAttribute(String attrName, String attrValue) : 속성값 설정
removeChild(child) : 자식노드 제거
insertBefore(Nod new, Node target) : target 엘리먼트의 형제로 앞에 추가(특정 위치 앞)
replaceChild(Node new, Node old) : 자식노드교체
hasChildNodes() : 자식 노드 여부 검사
cloneNode(boolean deep) : 노드복사
createElement(tagName) : 요소 노드를 생성
createTextNode(text) : 텍스트 노드를 생성
appendChild(node) : 객체에 노드를 연결
item(index) : 객체배열 중 해당하는 이덱스 객체 리턴
getElementById(id) : id를 가진 태그(객체)를 리턴
getElementsByName(name) : name을 가진 태그의 배열 리턴
getElementsByTagName(tagName) : tagName과 일치하는 태그의 배열 리턴
getAttribute(String attrName) : 속성값 검색
setAttribute(String attrName, String attrValue) : 속성값 설정
removeChild(child) : 자식노드 제거
insertBefore(Nod new, Node target) : target 엘리먼트의 형제로 앞에 추가(특정 위치 앞)
replaceChild(Node new, Node old) : 자식노드교체
hasChildNodes() : 자식 노드 여부 검사
cloneNode(boolean deep) : 노드복사
다음은 Document 객체의 하위 객체에 대해 알아보자.
Image 객체
<img>태그의 정보를 가진 객체
속성
name : 이미지 객체의 이름
src : 이미지의 URL 주소
lowsrc : 이미지의 URL 주소를 나타내며 해상도가 낮은 이미지를 전송할 때 사용
height : 이미지의 높이
width : 이미지의 넓이
border : 이미지의 테두리
complete : 이미지를 모두 전송받았는지를 알림(boolean)
Form 객체
<form>태그의 정보를 가진 객체로써 폼안에 데이터를 접근하기 위해 많이 사용된다.
속성
action : 서버 CGI 프로그램의 URL을 지정
elements : Form입력 양식에 대한 객체 정보들의 배열
enctype : 서버 CGI 프로그램에 보낼 데이터의 타입을 지정
method : 데이터 전송방식(get, post 등)
target : 처리된 결과를 출력할 윈도우 또는 프레임
length : Form 객체의 갯수
name : Form의 이름
핸들러
onSubmit : 사용자가 입력 양식의 데이터를 서버로 전송할 때 사용되는 이벤트 핸들러
onReset : 입력 양식을 초기화 할 때 사용되는 이벤트 핸들러
메소드
submit() : 입력 양식의 데이터를 서버로 전송할 때 사용
reset() : 입력 양식을 초기화 할 때 사용
---------------------------------------------------------------------------------
Form 객체에는 <input>태그의 타입으로 하위 객체들이 있다. text, button, checkbox, radio, select, textarea, password, hidden 이 하위 객체들의 종류다. 하나씩 살펴보자.
text 객체
문자열을 입력할 때 사용되는 객체이다.
속성
name : 객체의 이름
id : 객체의 id
value : 객체의 값
defaultValue : 관리자에 의해 미리 지정된 객체의 값
type : text객체임을 지정
메소드
focus() : 포커스를 얻음
blur() : 포커스를 잃음
select() : 입력된 값을 선택
핸들러
onFocus : 포커스가 text 객체 안으로 이동할 때 발생
onBlur : 포커스가 text 객체 밖으로 이동할 때 발생
onSelect : text 객체에 입력된 문자열을 선택할 때 발생
onKeypress : text 객체 내에서 키보드를 눌렀을 때 발생
onChange : text 객체에 입력한 문자열이 변경할 때 발생
checkbox 객체
여러 개의 선택 항목 중에서 하나 이상의 항목을 선택하는 객체
속성
checked : 선택여부 지정
name, value, type은 텍스트와 동일
핸들러
onClick : 객체를 클리할 때 발생
radio 객체
여러 개의 선택 항목 중에서 하나의 항목을 선택할 때 사용되는 객체
속성
defaultChecked : 디폴트로 선택되었음을 지정
length : 객체의 갯수
checked, name, value, type은 checkbox와 동일
핸들러
checkbox와 동일
select 객체
여러 개의 목록 중에서 하나 이상을 선택할 때 사용되는 객체
option 객체를 하위객체로 가진다.
속성
selectedIndex : 현재 선택된 목록의 인덱스
options : 목록 정보 배열
options[i].index : 각 목록의 인덱스
options[i].value : 각 목록에 할당된 값
options[i].text : 각 목록에 할당된 문자열
options[i]. selected : 각 목록이 선택되어 있는지 여부
options[i].defaultSelected : 각 목록이 처음 선택되어 있는지 여부
핸들러
onChange : 다른 목록을 선택할 때 발생
textarea 객체
text객체의 속성, 메소드, 핸들러 동일하며 다른 점은 줄바꾸기가 가능하다.
password 객체
입력한 글자를 "*"와 같은 문자로 표현
hidden 객체
시각적으로 표현되지 않은 감추어진 데이터 전송시에 사용
[JS] 브라우저 객체 모델(BOM) - Window
브라우저 객체는 웹 브라우저와 관련된 객체의 집합으로써 브라우저가 보여주고 있는 문서에 관한 정보 뿐만 아니라 윈도우 정보, 히스토리 정보, 문자가 존재하고 있는 위치정보 등의 관련된 객체들이다.
그 종류로는 window, location, navigator, history, screen, document이고 각각의 객체는 계층구조로 이루어져 있어 .으로 구분할 수 있다.
예) window.document.write();
Window
자바스크립트의 브라우저 내장 객체 중 최상위 객체이다.
속성
status : 브라우저 상태 바에 출력되는 문자열을 처리
defaulfStatus : 디폴트로 상태창 문자열 지정
frames : 윈도우 객체 내의 프레임정보
innerHeight : 브라우저의 내용이 나타날 수 있는 영역의 높이
innerWidth : "" 넓이
locationbar : 윈도우의 locationbar를 보여줄지 판별
parent : 상위(부모)객체
self : 자기 자신의 객체
top : 계층구조 중 가장 최상위 객체
opener : open()를 사용한 윈도우
scrollbar : scrollbar 정보
핸들러
onBlur : 브라우저가 포커스를 읽어 비활성화가 됨
onDragDrop : 브라우저에 객체를 끌어다 놓았을 때 발생
onError : 브라우저의 문서를 읽는 도중 에러가 발생할 경우 이를 처리함
onFocus : 브라우저가 포커스를 얻어 활성화가 됨
onResize : 윈도우의 크기를 조절해야 할 때 발생
onLoad : 문서나 URL을 읽어 들인 후 실행할 명령을 지정
onUpload : 문서나 URL을 지운 다음 실행할 명령을 지정
window.onload는 HTML을 다 읽은 후에 실행한다.
메소드
alert() : 사용자에게 간단한 메세지를 전달하는 대화상자
back() : 이전에 방문했던 문서나 URL로 이동
clearTimeout() : setTimeout()를 이용하여 임의의 시간지정을 해제
close() : open()를 이용해서 생성한 윈도우나 최초의 윈도우를 닫음
comfirm() : 확인과 취소를 선택할 수 있는 대화상자
find() : 검색
forward() : 다음에 방문할 문서나 URL로 이동
moveBy() : 윈도우의 위치를 기준으로 상대적으로 이동
moveTo() : 윈도우를 지정되어 있는 절대위치로 이동
open() : 새로운 윈도우 생성
print() : 문서의 내용 출력
prompt() : 문자열을 입력하는 창
resizeBy() : 윈도우의 크기를 상대적으로 변경
resizeTo() : 윈도우의 크기를 절대적 크기로 변경
scrollBy() : 윈도우에서 상대적으로 스크롤바를 나타냄
scrollTo() : 윈도우에서 절대적으로 스크롤바를 나타냄
setTimeout() : 임의의 지정된 시간 이후 명령어 단일수행
setInterval() : 주기적 명령을 실행
stop() : 문서나 URL을 전송하거나 받는 것을 중지
그 종류로는 window, location, navigator, history, screen, document이고 각각의 객체는 계층구조로 이루어져 있어 .으로 구분할 수 있다.
예) window.document.write();
Window
자바스크립트의 브라우저 내장 객체 중 최상위 객체이다.
속성
status : 브라우저 상태 바에 출력되는 문자열을 처리
defaulfStatus : 디폴트로 상태창 문자열 지정
frames : 윈도우 객체 내의 프레임정보
innerHeight : 브라우저의 내용이 나타날 수 있는 영역의 높이
innerWidth : "" 넓이
locationbar : 윈도우의 locationbar를 보여줄지 판별
parent : 상위(부모)객체
self : 자기 자신의 객체
top : 계층구조 중 가장 최상위 객체
opener : open()를 사용한 윈도우
scrollbar : scrollbar 정보
핸들러
onBlur : 브라우저가 포커스를 읽어 비활성화가 됨
onDragDrop : 브라우저에 객체를 끌어다 놓았을 때 발생
onError : 브라우저의 문서를 읽는 도중 에러가 발생할 경우 이를 처리함
onFocus : 브라우저가 포커스를 얻어 활성화가 됨
onResize : 윈도우의 크기를 조절해야 할 때 발생
onLoad : 문서나 URL을 읽어 들인 후 실행할 명령을 지정
onUpload : 문서나 URL을 지운 다음 실행할 명령을 지정
window.onload는 HTML을 다 읽은 후에 실행한다.
메소드
alert() : 사용자에게 간단한 메세지를 전달하는 대화상자
back() : 이전에 방문했던 문서나 URL로 이동
clearTimeout() : setTimeout()를 이용하여 임의의 시간지정을 해제
close() : open()를 이용해서 생성한 윈도우나 최초의 윈도우를 닫음
comfirm() : 확인과 취소를 선택할 수 있는 대화상자
find() : 검색
forward() : 다음에 방문할 문서나 URL로 이동
moveBy() : 윈도우의 위치를 기준으로 상대적으로 이동
moveTo() : 윈도우를 지정되어 있는 절대위치로 이동
open() : 새로운 윈도우 생성
print() : 문서의 내용 출력
prompt() : 문자열을 입력하는 창
resizeBy() : 윈도우의 크기를 상대적으로 변경
resizeTo() : 윈도우의 크기를 절대적 크기로 변경
scrollBy() : 윈도우에서 상대적으로 스크롤바를 나타냄
scrollTo() : 윈도우에서 절대적으로 스크롤바를 나타냄
setTimeout() : 임의의 지정된 시간 이후 명령어 단일수행
setInterval() : 주기적 명령을 실행
stop() : 문서나 URL을 전송하거나 받는 것을 중지
2013년 2월 22일 금요일
[JS] 이벤트 버블링과 캡쳐링
태그안에 태그를 감싸는 형태로 HTML문서를 구성했을 경우가 있다. 따라서 가장 안쪽(자식) 태그에 이벤트를 걸 때 이벤트 버블링이 생긴다.
이벤트 버블링은 자식 노드에서 부모 노드 순으로 이벤트를 실행하느 것을 의미한다.
자식노드에서 이벤트를 발생시키켰다고 해서 부모노드까지 이벤트가 전달될 필요는 없다. 따라서 이를 제거해주어야한다.(물론 버블링을 잘 활용할 수도 있다.)
그렇다면 캡쳐링은 무엇일까? 버블링과 반대되는 개념으로 부모노드의 이벤트가 자식노드로 전달되는 것을 의미한다. 그러나 IE브라우저에서는 캡쳐링을 지원하지 않음으로 거의 사용되지 않는다.(표준 브라우저에서는 사용 가능하나 역시 잘 활용하지 않는다)
그렇다면 이벤트 버블링 제거를 해보자.
자식노드의 버튼을 btn이라고 한다면
예)
btn.onclick = function(e){
var event = e || window.event;
event.cancleBubble = true;// IE 이벤트 버블링 제거
if(event.stopPropagation)
event.stopPropagation();// 표준 브라우저 이벤트 버블링 제거
}
이벤트 버블링은 자식 노드에서 부모 노드 순으로 이벤트를 실행하느 것을 의미한다.
자식노드에서 이벤트를 발생시키켰다고 해서 부모노드까지 이벤트가 전달될 필요는 없다. 따라서 이를 제거해주어야한다.(물론 버블링을 잘 활용할 수도 있다.)
그렇다면 캡쳐링은 무엇일까? 버블링과 반대되는 개념으로 부모노드의 이벤트가 자식노드로 전달되는 것을 의미한다. 그러나 IE브라우저에서는 캡쳐링을 지원하지 않음으로 거의 사용되지 않는다.(표준 브라우저에서는 사용 가능하나 역시 잘 활용하지 않는다)
그렇다면 이벤트 버블링 제거를 해보자.
자식노드의 버튼을 btn이라고 한다면
예)
btn.onclick = function(e){
var event = e || window.event;
event.cancleBubble = true;// IE 이벤트 버블링 제거
if(event.stopPropagation)
event.stopPropagation();// 표준 브라우저 이벤트 버블링 제거
}
2013년 2월 21일 목요일
[JS] 이벤트
이벤트란? 웹브라우저에서 일어나는 어떤 사건
이벤트 핸들러 : 이런한 이벤트를 처리해 주는 것.
이벤트 종류와 핸들러
이벤트의 종류는 마우스 클릭이라든지 마우스오버와 같은 것들이 있다. 그 예는 다음과 같다.
abort : 문서, 이미지 또는 URL을 읽어 들이는 도중에 중지할 때 발생
blur : 포커스를 읽어버렸을 때 발생
click : 마우스를 클릭할 때 발생
change : text, textarea, select의 값이 변화할 때 발생
focus : 포커스를 놓았을 때 발생
load : 문서 또는 URL을 읽을 때 발생
mouseout : 마우스 커서가 해당 영역을 벗어날 때 발생
mouseover : 마우스 커서가 해당 영역에 놓였을 때 발생
reset : reset버튼을 누를 때 발생, 입력 양식의 화면을 초기화함.
select : 해당 필드를 선택할 때 발생
submit : submit버튼을 누를 때 발생
unload : 해당 문서 또는 URL을 빠져나갈 때 발생
핸들러란 이러한 이벤트가 실행되었을 때 어떠한 기능적 처리를 해주는 함수라는 의미가 강하다. 즉 클릭을 했을 때 글자가 커지거나 새로운 페이지가 띄워지는 등의 이벤트 처리를 말한다.
브라우저 이벤트 모델 특징
- HTML 웹 페이지의 인터페이스는 비동기적이고 이벤트 주도방식이다.
- 따라서 사용자의 이벤트에 따른 이벤트 핸들러를 적절히 구현하여야한다.
- W3C가 발표한 DOM이벤트 레벨 2의 표준을 잘 따르는 브라우저와 그렇지 않은 브라우저간 차이점을 고려하여 이벤트를 처리해야만 한다.
객체에 이벤트를 연결하는 방식은 4가지가 있다.
1. 인라인 모델 방식
2. DOM Level 0 고전 이벤트 모델 방식
3. DOM Level 2 이벤트 모델 방식(리스너 방식)
4. Cross 이벤트 모델 방식
1. 인라인 이벤트 모델
HTML페이지의 가장 기본적인 이벤트 연결 방법
예)
<body>
<h1 onclick="alert('클릭')">Click</h1>
</body>
간단한 이벤트를 처리해주기는 좋으나 WEB의 표준에서 구조와 동작을 분리시키는 원칙에서벗어난다, 따라서 HTML태그의 이벤트 속성 안에 코드를 모두 쓰기보다는 script로 처리하는 방식을 많이 사용한다.
2. DOM Level 0 고전 이벤트 모델
자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법
예)
<script>
window,onload = {
var hi= document.getElementById("hi");
hi.onclick = function(){
alert("클릭");
}
}
</script>
<body>
<h1 id="hi">Click</h>
</body>
이벤트를 제거하는 방법
단순히 이벤트 핸들러에 null을 넣으면 끝
window,onload = {
var hi= document.getElementById("hi");
hi.onclick = null;
}
고전 이벤트 모델은 이벤트 하나에 이벤트 핸들러 하나만 연결할 수 있다.
기본 이벤트 제거
HTML태그 중 이미 이벤트 핸들러를 가지고 있는 태그가 있다. 예를 들어 <a>가 가지고 있는 기본 이벤트는 <a>를 클릭하면 페이지 이동을 하는 이벤트가 걸려있다. 이를 기본 이벤트라 한다.
<a>뿐만 아니라 submit버튼에도 이벤트가 걸려있다. 기본 이벤트가 있음으로 좋은 점도 있지만 불편한 점도 있다. 이런 이유로 기본 이벤트를 제거하는 경우가 있다. 코드를 보자
예)
<script>
window.onload = function(){
document.getElementById("my_from").onsubmit = function(){
return false;
}
}
</script>
<body>에는 my_from이란 Id를 가진 submit버튼이 있다. 버튼을 누르면 자동으로 입력 양식을 서버로 보내고 페이지를 새로고친다. 이 기본 이벤트를 지우기 위해서는 간단히 이벤트 핸들러에 false를 리턴해주면 된다.
사용자는 입력양식(form)을 만나게 되면 자신이 원하는 데이터를 입력하게 된다. 그리고 submit버튼을 이용하여 그 데이터를 서버로 보낸다. 하지만 어떤 데이터를 입력했는지 확인 없이 서버에 무작정 보낼 수는 없다. 입력양식을 적절하게 구성했다는 것을 확인해야한다.
그렇다면 어떻게 입력양식의 데이터값을 검사할 수 있을까?
document.getElementById("sn").value;
이렇게 sn이라는 id를 가진 태그의 값을 가져와 유효성을 검사할 수 있다.
3. DOM Level 2 이벤트 모델(리스너 방식)
IE를 제외한 최신 브라우저에서 지원한다.
레벨 0 API와는 다른 고급 이벤트 처리가 가능하다.(중복 이벤트 연결)
표준 이벤트 핸들러 등록 함수
addEventListener(String eventType, function listener, boolean captures)
- eventType : 이벤트 이름의 문자열 (예 : "click", "mouseover")
- listener : 핸들러 함수명
- captures : true/false (버블과 캡쳐에 관한 인자)
예)
<script type="text/javascript">
function doProcess(){ alert("JavaScript"); } window.onload = function(){ var btn1 = document.getElementById("btn1"); btn1.addEventListener("click", doProcess, false); }
</script>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>
IE(인터넷 익스플로러)에서는 그 방식이 다르다. 예제를 보자
IE 이벤트 핸들러 등록 함수
attachEvent(String eventType, function listener)
- eventType : 이벤트 속성명(예: onClick, onmouseover)
- listener : 핸들러 함수명
예)
<script type="text/javascript">
function doProcess(){
alert("JavaScript");
}
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.attachEvent("onclick", doProcess);
}
</script>
</head>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>
4. 크로스 이벤트 모델 방식
위의 DOM Level 2 이벤트 모델 방식일 경우 항상 표준 브라우저와 IE브라우저를 고려해야 하며 따라서 항상 같은 이벤트를 두번씩 정의해야하는 번거로움이 있다. 이런 과정을 줄이기 위해 새로운 js파일에 사용자 정의 객체를 만들어줌으로써 표준 브라우저와 IE브라우저의 이벤트를 한번에 등록할 수 있다.
예)
var cross = {};
cross.Event = {};
cross.Event.addListener = function(element, name, handler, capture){//사용자 정의 함수(crossEvent브라우저를 지원할 함수)
capture = capture || false;
//표준브라우저인지 IE인지 구분
if(element.addEventListener){
//표준브라우저 일때
element.addEventListener(name, handler, capture);
}else{
//표준브라우저가 아닐때, 즉 IE일 경우
element.attachEvent("on" + name, handler);
}
};
---------------------------------------------------------------------------------
마지막으로 표준 이벤트 연결 방식에 대해 유의점을 언급하겠다.
IE에서는 핸들러에서 this키워드를 사용하면 window을 가르킨다. 핸들러 안에서 객체를 받기 위해 this를 사용하면 안될 것이다. 대신에 srcElement라는 속성을 이용해야만 객체를 가져올 수 있다.
그러나 표준 브라우저에서는 핸들러에서 this를 사용하여 쉽게 객체를 가져올 수 있다.
이 차이점이 IE와 표준 브라우저간의 큰 차이점임으로 꼭 기억하도록 하자.
이벤트 핸들러 : 이런한 이벤트를 처리해 주는 것.
이벤트 종류와 핸들러
이벤트의 종류는 마우스 클릭이라든지 마우스오버와 같은 것들이 있다. 그 예는 다음과 같다.
abort : 문서, 이미지 또는 URL을 읽어 들이는 도중에 중지할 때 발생
blur : 포커스를 읽어버렸을 때 발생
click : 마우스를 클릭할 때 발생
change : text, textarea, select의 값이 변화할 때 발생
focus : 포커스를 놓았을 때 발생
load : 문서 또는 URL을 읽을 때 발생
mouseout : 마우스 커서가 해당 영역을 벗어날 때 발생
mouseover : 마우스 커서가 해당 영역에 놓였을 때 발생
reset : reset버튼을 누를 때 발생, 입력 양식의 화면을 초기화함.
select : 해당 필드를 선택할 때 발생
submit : submit버튼을 누를 때 발생
unload : 해당 문서 또는 URL을 빠져나갈 때 발생
핸들러란 이러한 이벤트가 실행되었을 때 어떠한 기능적 처리를 해주는 함수라는 의미가 강하다. 즉 클릭을 했을 때 글자가 커지거나 새로운 페이지가 띄워지는 등의 이벤트 처리를 말한다.
브라우저 이벤트 모델 특징
- HTML 웹 페이지의 인터페이스는 비동기적이고 이벤트 주도방식이다.
- 따라서 사용자의 이벤트에 따른 이벤트 핸들러를 적절히 구현하여야한다.
- W3C가 발표한 DOM이벤트 레벨 2의 표준을 잘 따르는 브라우저와 그렇지 않은 브라우저간 차이점을 고려하여 이벤트를 처리해야만 한다.
객체에 이벤트를 연결하는 방식은 4가지가 있다.
1. 인라인 모델 방식
2. DOM Level 0 고전 이벤트 모델 방식
3. DOM Level 2 이벤트 모델 방식(리스너 방식)
4. Cross 이벤트 모델 방식
1. 인라인 이벤트 모델
HTML페이지의 가장 기본적인 이벤트 연결 방법
예)
<body>
<h1 onclick="alert('클릭')">Click</h1>
</body>
간단한 이벤트를 처리해주기는 좋으나 WEB의 표준에서 구조와 동작을 분리시키는 원칙에서벗어난다, 따라서 HTML태그의 이벤트 속성 안에 코드를 모두 쓰기보다는 script로 처리하는 방식을 많이 사용한다.
2. DOM Level 0 고전 이벤트 모델
자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법
예)
<script>
window,onload = {
var hi= document.getElementById("hi");
hi.onclick = function(){
alert("클릭");
}
}
</script>
<body>
<h1 id="hi">Click</h>
</body>
이벤트를 제거하는 방법
단순히 이벤트 핸들러에 null을 넣으면 끝
window,onload = {
var hi= document.getElementById("hi");
hi.onclick = null;
}
고전 이벤트 모델은 이벤트 하나에 이벤트 핸들러 하나만 연결할 수 있다.
기본 이벤트 제거
HTML태그 중 이미 이벤트 핸들러를 가지고 있는 태그가 있다. 예를 들어 <a>가 가지고 있는 기본 이벤트는 <a>를 클릭하면 페이지 이동을 하는 이벤트가 걸려있다. 이를 기본 이벤트라 한다.
<a>뿐만 아니라 submit버튼에도 이벤트가 걸려있다. 기본 이벤트가 있음으로 좋은 점도 있지만 불편한 점도 있다. 이런 이유로 기본 이벤트를 제거하는 경우가 있다. 코드를 보자
예)
<script>
window.onload = function(){
document.getElementById("my_from").onsubmit = function(){
return false;
}
}
</script>
<body>에는 my_from이란 Id를 가진 submit버튼이 있다. 버튼을 누르면 자동으로 입력 양식을 서버로 보내고 페이지를 새로고친다. 이 기본 이벤트를 지우기 위해서는 간단히 이벤트 핸들러에 false를 리턴해주면 된다.
사용자는 입력양식(form)을 만나게 되면 자신이 원하는 데이터를 입력하게 된다. 그리고 submit버튼을 이용하여 그 데이터를 서버로 보낸다. 하지만 어떤 데이터를 입력했는지 확인 없이 서버에 무작정 보낼 수는 없다. 입력양식을 적절하게 구성했다는 것을 확인해야한다.
그렇다면 어떻게 입력양식의 데이터값을 검사할 수 있을까?
document.getElementById("sn").value;
이렇게 sn이라는 id를 가진 태그의 값을 가져와 유효성을 검사할 수 있다.
3. DOM Level 2 이벤트 모델(리스너 방식)
IE를 제외한 최신 브라우저에서 지원한다.
레벨 0 API와는 다른 고급 이벤트 처리가 가능하다.(중복 이벤트 연결)
표준 이벤트 핸들러 등록 함수
addEventListener(String eventType, function listener, boolean captures)
- eventType : 이벤트 이름의 문자열 (예 : "click", "mouseover")
- listener : 핸들러 함수명
- captures : true/false (버블과 캡쳐에 관한 인자)
예)
<script type="text/javascript">
function doProcess(){ alert("JavaScript"); } window.onload = function(){ var btn1 = document.getElementById("btn1"); btn1.addEventListener("click", doProcess, false); }
</script>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>
IE(인터넷 익스플로러)에서는 그 방식이 다르다. 예제를 보자
IE 이벤트 핸들러 등록 함수
attachEvent(String eventType, function listener)
- eventType : 이벤트 속성명(예: onClick, onmouseover)
- listener : 핸들러 함수명
예)
<script type="text/javascript">
function doProcess(){
alert("JavaScript");
}
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.attachEvent("onclick", doProcess);
}
</script>
</head>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>
4. 크로스 이벤트 모델 방식
위의 DOM Level 2 이벤트 모델 방식일 경우 항상 표준 브라우저와 IE브라우저를 고려해야 하며 따라서 항상 같은 이벤트를 두번씩 정의해야하는 번거로움이 있다. 이런 과정을 줄이기 위해 새로운 js파일에 사용자 정의 객체를 만들어줌으로써 표준 브라우저와 IE브라우저의 이벤트를 한번에 등록할 수 있다.
예)
var cross = {};
cross.Event = {};
cross.Event.addListener = function(element, name, handler, capture){//사용자 정의 함수(crossEvent브라우저를 지원할 함수)
capture = capture || false;
//표준브라우저인지 IE인지 구분
if(element.addEventListener){
//표준브라우저 일때
element.addEventListener(name, handler, capture);
}else{
//표준브라우저가 아닐때, 즉 IE일 경우
element.attachEvent("on" + name, handler);
}
};
html파일이 있는 곳에 js폴더를 하나 만들어 js파일에 위와 같이 입력한다. 의미는 cross 객체안에 Event를 처리할 객체를 하나더 만들어줬다. 이렇게 만든 이유는 패키지라는 개념이로 이해하면 좋다. 이렇게 함으로써 최대한 속성이나 함수의 이름이 중복되는 것을 막기 위함이다.
cross.Event.addListener()는 사용자 정의 함수로써 표준 브라우저와 IE 브라우저 각각에 이벤트를 동시에 연결하도록 정의하였다.
---------------------------------------------------------------------------------
마지막으로 표준 이벤트 연결 방식에 대해 유의점을 언급하겠다.
IE에서는 핸들러에서 this키워드를 사용하면 window을 가르킨다. 핸들러 안에서 객체를 받기 위해 this를 사용하면 안될 것이다. 대신에 srcElement라는 속성을 이용해야만 객체를 가져올 수 있다.
그러나 표준 브라우저에서는 핸들러에서 this를 사용하여 쉽게 객체를 가져올 수 있다.
이 차이점이 IE와 표준 브라우저간의 큰 차이점임으로 꼭 기억하도록 하자.
[JS] 내장객체
내장객체란 자바스크립트에 이미 정의된 객체를 의미한다.
내장객체는 브라우저 객체와는 달리 웹브라우저에 보이지 않는다.
Object
자바스크립트의 가장 기본적인 내장 객체
생성방법
var object = {};
var object = new Object();
매소드
constructor() : 객체의 생성자 함수
hasOwnProperty(name) : 객체가 name속성을 가지고 있는가 확인
isPrototypepf(object) : 객체가 object의 프로토타입인지 검사
propertyIsEnumerable(name) : 반복문을 사용해 열거할 수 있는지 확인
toLoscaleString() : 객체를 호스트 환경에 맞는 언어의 문자열로 변환
toString() : 객체를 문자열로 변환
valueOf() : 객체의 값을 나타냄
------------------------------------------------------------------
Array
가장 많이 쓰이는 내장객체이다. 자바스크립트에는 배열말고는 다른 자료구조가 존재하지 않기 때문이다. 즉, 모든 데이터 형식의 배열변수를 만들어 데이터를 관리 할 수 있도록 지원하는 객체이다.
Array객체 생성방법은 다양한다.
1. var fruit = []; //빈 배열선언
2. var fruit = new Array();//빈 배열선언
3. var fruit = new Array(8);//배열의 크기가 8인 배열
4. var fruit = new Array(34, 456, '하하')//데이터 직접 입력
속성
length : 배열의 크기
매소드
concat() : 배열을 결합하여 새로운 배열을 만듬
join() : 지정된 구분자로 모든 배열의 요소를 문자열로 결합
pop() : 마지막 배열요소 삭제
push() : 마지막 배열요소에 새로운 요소를 추가
reverse() : 배열의 요소를 역순으로 바꿈
slice() : 배열 자르기
splice() : 지정요소를 리턴하면서 배열에서 삭제
sort() : 정렬(기본 오름차순 정렬)
정렬에 변화를 주기위한다면 다음과 같다.
array.sort(function(a, b){
...함수내용...
});
내림차순
array.sort(function(a, b){
return b-a;
});
또는 if문으로 함수를 정의할 수 있다.
array.sort(function(a, b){
if(a<b){
return 1;//리턴값이 1일때 자리바꿈
} else if(a>b){
return -1;
} else
return 0;
});
오름차순은 위의 함수로 쉽게 구현가능하다.
-----------------------------------------------------------------
Date
날짜와 시간을 처리할 수 있도록 하는 객체
밀리초 단위까지 특정 시간을 나타내는 숫자로 되어 있다.
생성방법
var date = new Date();
매소드
getDate() : 일자를 반환
getDay() : 요일을 반환
getMonth() : 월을 반환
getYear() : 두자리 숫자의 연도를 반환
getFullYear() : 네자리 숫자의 연도를 반환
getHours() : 시간을 반환
getMinutes() : 분을 반환
getSeconds() : 초를 반환
get매서드가 있듯이 똑같이 set매서드가 존재한다.
-----------------------------------------------------------------
Math
수학 계산을 처리할 수 있도록 하는 객체
static 객체라 new연산자를 사용하지 않고 Math만을 이용해 계산
속성
E : 오일러 상수를 반환
LN2 : 2의 자연대수를 반환
LK10 : 10의 자연대수를 반환
PI : 원주율을 반환
SQRT1_2 : 2의 제곱의 여수를 반환
SQRT2 : 2의 제곱근을 반환
매서드
random() : 난수를 발생(0과 1사이의 무작위값 반환)
나머지는 필요할때 참고하도록하자
-----------------------------------------------------------------
String
문자열을 사용하거나 조작을 위한 객체
new 연산자를 사용하지 않는다.
속성
length : 문자열의 길이
매서드
charAt(position) : position에 위치하는 문자 반환
indexOf(searchString, position) : 앞에서부터 일치하는 문자열의 위치를 반환
slice(start, end) : 특정 위치의 문자열을 추출해 리턴
split(separator, limit) : separator로 문자열을 잘라 배에 저장한 뒤 배열을 리턴
substr(start, count) : start부터 count만큼 문자열을 리턴
substring(start, end) : start부터 end까지 문자열 리턴
많이 사용하는 매서드만을 기술하였다. 그밖에 더 많은 매서드는 직접 알아보자. 한가지 참고할 것은 String객체의 매서드는 자기 자신을 변화시키지 않는다. 그 이유는 문자열은 변하지 않는 상수의 개념으로 지정되기 때문이다.
------------------------------------------------------------------
Number
엄연히 new연산자로 생성할 수 있는 객체로서 수를 다룬다.
생성
var number = new Number(123);
속성
MAX_VALUE : 자바스크립트의 숫자가 나타낼 수 있는 최대 숫자
MIN_VALUE : "" 최소 숫자
NaN : 숫자로 나타낼 수 없는 숫자
NEGATIVE_INFINITY : 음의 무한대
POSITIVE_INFINITY : 양의 무한대
매서드
toExponential() : 숫자를 지수 표시로 나타내는 문자열 리턴
toFixed() : 숫자를 고정 소수점 표시로 문자열 리턴
toPrecision() : 숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열 리턴
내장객체는 브라우저 객체와는 달리 웹브라우저에 보이지 않는다.
Object
자바스크립트의 가장 기본적인 내장 객체
생성방법
var object = {};
var object = new Object();
매소드
constructor() : 객체의 생성자 함수
hasOwnProperty(name) : 객체가 name속성을 가지고 있는가 확인
isPrototypepf(object) : 객체가 object의 프로토타입인지 검사
propertyIsEnumerable(name) : 반복문을 사용해 열거할 수 있는지 확인
toLoscaleString() : 객체를 호스트 환경에 맞는 언어의 문자열로 변환
toString() : 객체를 문자열로 변환
valueOf() : 객체의 값을 나타냄
------------------------------------------------------------------
Array
가장 많이 쓰이는 내장객체이다. 자바스크립트에는 배열말고는 다른 자료구조가 존재하지 않기 때문이다. 즉, 모든 데이터 형식의 배열변수를 만들어 데이터를 관리 할 수 있도록 지원하는 객체이다.
Array객체 생성방법은 다양한다.
1. var fruit = []; //빈 배열선언
2. var fruit = new Array();//빈 배열선언
3. var fruit = new Array(8);//배열의 크기가 8인 배열
4. var fruit = new Array(34, 456, '하하')//데이터 직접 입력
속성
length : 배열의 크기
매소드
concat() : 배열을 결합하여 새로운 배열을 만듬
join() : 지정된 구분자로 모든 배열의 요소를 문자열로 결합
pop() : 마지막 배열요소 삭제
push() : 마지막 배열요소에 새로운 요소를 추가
reverse() : 배열의 요소를 역순으로 바꿈
slice() : 배열 자르기
splice() : 지정요소를 리턴하면서 배열에서 삭제
sort() : 정렬(기본 오름차순 정렬)
정렬에 변화를 주기위한다면 다음과 같다.
array.sort(function(a, b){
...함수내용...
});
내림차순
array.sort(function(a, b){
return b-a;
});
또는 if문으로 함수를 정의할 수 있다.
array.sort(function(a, b){
if(a<b){
return 1;//리턴값이 1일때 자리바꿈
} else if(a>b){
return -1;
} else
return 0;
});
오름차순은 위의 함수로 쉽게 구현가능하다.
-----------------------------------------------------------------
Date
날짜와 시간을 처리할 수 있도록 하는 객체
밀리초 단위까지 특정 시간을 나타내는 숫자로 되어 있다.
생성방법
var date = new Date();
매소드
getDate() : 일자를 반환
getDay() : 요일을 반환
getMonth() : 월을 반환
getYear() : 두자리 숫자의 연도를 반환
getFullYear() : 네자리 숫자의 연도를 반환
getHours() : 시간을 반환
getMinutes() : 분을 반환
getSeconds() : 초를 반환
get매서드가 있듯이 똑같이 set매서드가 존재한다.
-----------------------------------------------------------------
Math
수학 계산을 처리할 수 있도록 하는 객체
static 객체라 new연산자를 사용하지 않고 Math만을 이용해 계산
속성
E : 오일러 상수를 반환
LN2 : 2의 자연대수를 반환
LK10 : 10의 자연대수를 반환
PI : 원주율을 반환
SQRT1_2 : 2의 제곱의 여수를 반환
SQRT2 : 2의 제곱근을 반환
매서드
random() : 난수를 발생(0과 1사이의 무작위값 반환)
나머지는 필요할때 참고하도록하자
-----------------------------------------------------------------
String
문자열을 사용하거나 조작을 위한 객체
new 연산자를 사용하지 않는다.
속성
length : 문자열의 길이
매서드
charAt(position) : position에 위치하는 문자 반환
indexOf(searchString, position) : 앞에서부터 일치하는 문자열의 위치를 반환
slice(start, end) : 특정 위치의 문자열을 추출해 리턴
split(separator, limit) : separator로 문자열을 잘라 배에 저장한 뒤 배열을 리턴
substr(start, count) : start부터 count만큼 문자열을 리턴
substring(start, end) : start부터 end까지 문자열 리턴
많이 사용하는 매서드만을 기술하였다. 그밖에 더 많은 매서드는 직접 알아보자. 한가지 참고할 것은 String객체의 매서드는 자기 자신을 변화시키지 않는다. 그 이유는 문자열은 변하지 않는 상수의 개념으로 지정되기 때문이다.
------------------------------------------------------------------
Number
엄연히 new연산자로 생성할 수 있는 객체로서 수를 다룬다.
생성
var number = new Number(123);
속성
MAX_VALUE : 자바스크립트의 숫자가 나타낼 수 있는 최대 숫자
MIN_VALUE : "" 최소 숫자
NaN : 숫자로 나타낼 수 없는 숫자
NEGATIVE_INFINITY : 음의 무한대
POSITIVE_INFINITY : 양의 무한대
매서드
toExponential() : 숫자를 지수 표시로 나타내는 문자열 리턴
toFixed() : 숫자를 고정 소수점 표시로 문자열 리턴
toPrecision() : 숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열 리턴
2013년 2월 20일 수요일
[JS] 객체
자바스크립트는 객체지향 언어!
객체모형(Object Model)
객체모형(Object Model)
브라우저 객체 : Window, Document, Location 등 (DOM)
내장 객체 : Date, Math, Array 등
특징
클래스 선언과 상속을 지원하지 않지만 객체의 정의가 가능하다. 그러나 한정된 수준에 그친다. 객체의 생성과 상속이 다른 언어처럼 완벽하지는 않으나 어느정도의 형태는 비슷하게 취할 수 있다.
객체의 생성
예)
var product{
제품명 : "7D 건조 망고',
유형 : "당절임",
성분 : "망고, 설탕",
원산지 : "필리핀"
}
이처럼 객체를 정의할 때 사용하는 방법이 Json표기법이다. 키값인 제품명, 유형 등으로 값(Value)를 뽑아 오는 방법이다. (Hash자료구조를 떠올리면 비슷하다.)
속성접근
product.제품명
product.유형
생성자 함수
객체를 만드는 방법은 여러가지가 있지만 개인적으로는 생성자 함수로 객체를 생성하는 것이 코드의 재사용측면에서 좋고 자바에서의 생성자 함수와 유사하게 사용하기 때문에 좀 더 쉽게 와닿는다.
예)
function Student(name, kor, eng, mat){
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
////생성자에서 매서드 추가//////
this.getSum = function(){
return this.kor + this.eng + this.mat;
}
this.getAvg = function(){
return this.getSum()/3;
}
}
프로토타입
위와 같이 student객체를 new키워드로 만들 수 있다. 그러나 문제가 있다. 매번 객체를 생성할 때마다 생성자 안에 선언한 함수를 계속해서 개체의 속성으로 만드는 것이다. 분명 메모리 낭비이다.
이를 해결하기 위해 프로토타입이 생겼다. 객체의 매서드부분만 따로 모아서 공유하는 것을 말한다.
예)
function Student(name, kor, eng, mat){
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
}//생성자 정의 끝
Student.prototype.getSum = function(){
return this.kor + this.eng + this.mat;
}
Student.prototype.getAvg = function(){
return this.getSum()/3;
}
이렇게함으로써 자바에서 만들던 객체의 틀인 클래스와 비슷?하게되었다. 그러나 절대 클래스가 아니라는 것을 꼭 기억하자. 자바스크립트에는 클래스라는 개념이 없다. 하지만 실재로는 다음과 같은 방식으로 많이 사용한다.
예)
function Student(name, kor, eng, mat){
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
}//생성자 정의 끝
Student.prototype = {
getSum : function(){
return this.kor + this.eng + this.mat;
},
getAvg : function(){
return this.getSum()/3;
}
}
이렇게 프로토타입으로 매서드를 묶어서 이용한다. 사용법은 둘다 같다.
이렇듯 객체는 하나의 프로토타입 객체를 가지고 있고 그 목적은 객체의 메서드들을 관리하기 위한 용도이다.
캡슐화
만일의 상황을 대비하여 특정 속성이나 매서드를 사용자가 알 수 없도록 또는 알 필요가 없도록 숨겨놓은 것이다. 즉 개발자의 의도가 잘 반영되어 사용자가 코드를 재사용하는데 혼돈하지 않거나 의도되지 않은 행위를 막을 수 있는 등 다양한 이점이 있다.
상속
기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 만드는 것
예)
function Unit(name) {
this.name = name;
this.attack = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + " 공격!");
unit.attacked(this);
}
this.attacked = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + "으로부터 공격받음!");
}
}
function BionicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}
function MechanicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}
window.onload = function() {
BionicUnit.prototype = new Unit;
MechanicUnit.prototype = new Unit;
var unit1 = new BionicUnit("지상", "마린");
var unit2 = new MechanicUnit("공중", "커세어");
unit1.attack(unit2);
alert(unit1 instanceof Unit);
}
상속을 아주 잘 보여주는 예이다. 먼저 부모가 되는 유닛을 정의했다. 생성자 함수안에 이름 속성과 2개의 매서드를 정의했다.
그다음 바이오닉유닛과 메카닉유닛을 정의하였고 윈도우에 이벤트를 걸어 실행해보았다. 상속에서 가장 핵심인부분이 진한 글씨로 표현한 곳이다. 유닛을 base라는 속성으로 받아와 유닛의 이름을 초기화하였고 유닛의 매서드들을 각각의 객체에 프로토타입에 추가함으로써 상속이 이루어지는 것이다.
마지막에 alert창을 띄워 상속이 잘 되었는지 instanceof키워드로 확인해보고 있다.
상속의 예를 하나 더 들어보자. 이번엔 call()함수를 이용한 상속이다.
function Rectangle(w, h){
this.width = w;
this.height = h;
this.getWidth = function(){ return this.width;};
this.getHeight = function(){ return this.height;};
this.setWidth = function(value){
if(value < 0){
throw "길이는 음수일 수 없습니다.";
} else{
this.width = value;
}
}
this.setHeight = function(value){
if(value < 0){
throw "높이는 음수일 수 없습니다.";
} else{
this.height = value;
}
}
}
Rectangle.prototype.getArea = function(){
return this.getWidth()*this.getHeight();
}
function Square(length){
Rectangle.call(this, length, length);
}
Square.prototype = new Rectangle();
Square.prototype.constructor = Square;
var square = new Square(5);
var rectangle = new Rectangle(5, 7);
alert(rectangle.getArea() + " " + square.getArea());
Square생성자에서 Rectangle를 생성하는데 call()를 이용해서 this를 인자로 넘겨주고 있다. 이렇게 함으로써 Rectangle객체의 this는 Square을 가르키게 되고 따라서 상속이 되었다고 할 수 있다. 즉, this를 원하는 객체로 재정의 하는 것이다. call()함수는 자주 쓰일 함수이므로 그 쓰임을 잘 이해하자
객체의 생성
예)
var product{
제품명 : "7D 건조 망고',
유형 : "당절임",
성분 : "망고, 설탕",
원산지 : "필리핀"
}
이처럼 객체를 정의할 때 사용하는 방법이 Json표기법이다. 키값인 제품명, 유형 등으로 값(Value)를 뽑아 오는 방법이다. (Hash자료구조를 떠올리면 비슷하다.)
속성접근
product.제품명
product.유형
생성자 함수
객체를 만드는 방법은 여러가지가 있지만 개인적으로는 생성자 함수로 객체를 생성하는 것이 코드의 재사용측면에서 좋고 자바에서의 생성자 함수와 유사하게 사용하기 때문에 좀 더 쉽게 와닿는다.
예)
function Student(name, kor, eng, mat){
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
////생성자에서 매서드 추가//////
this.getSum = function(){
return this.kor + this.eng + this.mat;
}
this.getAvg = function(){
return this.getSum()/3;
}
}
프로토타입
위와 같이 student객체를 new키워드로 만들 수 있다. 그러나 문제가 있다. 매번 객체를 생성할 때마다 생성자 안에 선언한 함수를 계속해서 개체의 속성으로 만드는 것이다. 분명 메모리 낭비이다.
이를 해결하기 위해 프로토타입이 생겼다. 객체의 매서드부분만 따로 모아서 공유하는 것을 말한다.
예)
function Student(name, kor, eng, mat){
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
}//생성자 정의 끝
Student.prototype.getSum = function(){
return this.kor + this.eng + this.mat;
}
Student.prototype.getAvg = function(){
return this.getSum()/3;
}
이렇게함으로써 자바에서 만들던 객체의 틀인 클래스와 비슷?하게되었다. 그러나 절대 클래스가 아니라는 것을 꼭 기억하자. 자바스크립트에는 클래스라는 개념이 없다. 하지만 실재로는 다음과 같은 방식으로 많이 사용한다.
예)
function Student(name, kor, eng, mat){
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
}//생성자 정의 끝
Student.prototype = {
getSum : function(){
return this.kor + this.eng + this.mat;
},
getAvg : function(){
return this.getSum()/3;
}
}
이렇게 프로토타입으로 매서드를 묶어서 이용한다. 사용법은 둘다 같다.
이렇듯 객체는 하나의 프로토타입 객체를 가지고 있고 그 목적은 객체의 메서드들을 관리하기 위한 용도이다.
캡슐화
만일의 상황을 대비하여 특정 속성이나 매서드를 사용자가 알 수 없도록 또는 알 필요가 없도록 숨겨놓은 것이다. 즉 개발자의 의도가 잘 반영되어 사용자가 코드를 재사용하는데 혼돈하지 않거나 의도되지 않은 행위를 막을 수 있는 등 다양한 이점이 있다.
상속
기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 만드는 것
예)
function Unit(name) {
this.name = name;
this.attack = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + " 공격!");
unit.attacked(this);
}
this.attacked = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + "으로부터 공격받음!");
}
}
function BionicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}
function MechanicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}
window.onload = function() {
BionicUnit.prototype = new Unit;
MechanicUnit.prototype = new Unit;
var unit1 = new BionicUnit("지상", "마린");
var unit2 = new MechanicUnit("공중", "커세어");
unit1.attack(unit2);
alert(unit1 instanceof Unit);
}
상속을 아주 잘 보여주는 예이다. 먼저 부모가 되는 유닛을 정의했다. 생성자 함수안에 이름 속성과 2개의 매서드를 정의했다.
그다음 바이오닉유닛과 메카닉유닛을 정의하였고 윈도우에 이벤트를 걸어 실행해보았다. 상속에서 가장 핵심인부분이 진한 글씨로 표현한 곳이다. 유닛을 base라는 속성으로 받아와 유닛의 이름을 초기화하였고 유닛의 매서드들을 각각의 객체에 프로토타입에 추가함으로써 상속이 이루어지는 것이다.
마지막에 alert창을 띄워 상속이 잘 되었는지 instanceof키워드로 확인해보고 있다.
상속의 예를 하나 더 들어보자. 이번엔 call()함수를 이용한 상속이다.
function Rectangle(w, h){
this.width = w;
this.height = h;
this.getWidth = function(){ return this.width;};
this.getHeight = function(){ return this.height;};
this.setWidth = function(value){
if(value < 0){
throw "길이는 음수일 수 없습니다.";
} else{
this.width = value;
}
}
this.setHeight = function(value){
if(value < 0){
throw "높이는 음수일 수 없습니다.";
} else{
this.height = value;
}
}
}
Rectangle.prototype.getArea = function(){
return this.getWidth()*this.getHeight();
}
function Square(length){
Rectangle.call(this, length, length);
}
Square.prototype = new Rectangle();
Square.prototype.constructor = Square;
var square = new Square(5);
var rectangle = new Rectangle(5, 7);
alert(rectangle.getArea() + " " + square.getArea());
Square생성자에서 Rectangle를 생성하는데 call()를 이용해서 this를 인자로 넘겨주고 있다. 이렇게 함으로써 Rectangle객체의 this는 Square을 가르키게 되고 따라서 상속이 되었다고 할 수 있다. 즉, this를 원하는 객체로 재정의 하는 것이다. call()함수는 자주 쓰일 함수이므로 그 쓰임을 잘 이해하자
피드 구독하기:
글 (Atom)