JavaScript 기본 (2) 이벤트&객체&메서드

본내용은 Doit! HTML+CSS+자바스크립트 웹표준의 정석 책을 참고하여 작성하였습니다.
http://www.yes24.com/Product/Goods/96674934

이벤트

• 사용자가 화면에서 버튼을 클릭하거나 항목을 선택하는 것을 ‘이벤트’라고 한다.
• 이벤트가 발생했을 때 실행하는 함수를 ‘이벤트 처리기’라고 한다.

1) 마우스 이벤트

2) 키 이벤트

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

3) 폼 이벤트

4) 로드 및 기타 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경 되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

이벤트	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소에 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생
error	문서가 정확히 로딩되지 않았을때 발생

이벤트 처리기(핸들러)

• 웹문서에서 이벤트가 발생하면 처리하는 함수
• 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결 <태그 on이벤트명 = “함수명”> ex) <a href= “#” onclick=”alrert(’버튼을 클릭했습니다.’)”> Green</a>
  

DOM을 이용한 이벤트 처리기

• DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결한다.
• 웹요소.onclick = 함수;

var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor; // 함수 이름 뒤에 괄호가 없다

function changeColor(){
document.querySelector("p").style.color = "#f00";
}

객체

• 객체란 프로그램에서 인식할 수 있는 모든 대상을 가리킨다.
• 객체는 참조형태로 사용해야한다.
  • 인스턴스의 형태로 만들어서 사용해야 한다.
  • new 객체명

종류

종류	설명
기본내장객체	기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체
BOM(Browser Object Model)	브라우저오브젝트 모델, 브라우저 관련 객체
DOM(Document Object Model)	문서객체모델, 태그나 컨텐츠 등을 의미하는 객체
사용자정의객체	개발자가 직접적으로 생성하는 새로운 객체

프로퍼티

• 객체의 특징이나 속성

메서드

• 객체에서 할 수 있는 동작을 표현

배열

• push()배열 맨 끝에 요소추가
• unshift() 배열 맨 앞에 요소추가
• 요소를 추가하면 원래 있던 배열이 바뀐다.
• pop() 뒤에 있는 요소를 꺼낸다.
• shift() 앞에 있는 요소를 꺼낸다.
• splice() 원하는 위치에 요소를 추가, 삭제하는 기능
• slice() 기존 배열을 바꾸지 않으면서 요소를 꺼낸다.

BOM 객체

종류	설명
window	브라우저 창 객체, BOM의 최상위 객체
location	주소표시줄 객체
screen	운영체제 화면 객체
history	방문기록 객체
navigator	브라우저정보 객체
document	문서객체 - body태그부분을 의미

Window 객체 속성

속성 종류	설명
closed	창이 닫혀 있는지 열려 있는지를 불표현식으로 반환닫혀 있으면 true반환, 열려 있으면 false반환
innerHeight	창의 콘텐츠 영역 높이를 반환 - 스크롤바나 제목표시줄 등은 제외
innerWidth	창의 콘텐츠 영역 폭을 반환 - - 스크롤바나 제목표시줄 등은 제외
length	현재 창의 아이프레임 개수를 숫자로 반환
outerHeight	창의 모든 인터페이스요소(스크롤바등)을 포함한 높이를 반환
outerWidth	창의 모든 인터페이스요소(스크롤바등)을 포함한 높이를 반환
pageXOffset	현재 문서가 창의 왼쪽에서 얼마나 스크롤되어 있는지를 픽셀수치로 반환
pageYOffset	현재 문서가 창의 위쪽에서 얼마나 스크롤되어 있는지를 픽셀수치로 반환
parent	아이프레임으로 되어 있는 페이지의 부모가되는 페이지를 선택하는 속성
screenLeft	창이 화면 좌측을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
screenTop	창이 화면 상단을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
screenX	창이 화면 좌측을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
screenY	창이 화면 상단을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
self	현재 창을 반환
top	현재 창의 최상위 브라우저 창을 반환

Window 객체 메서드

메서드 종류	설명
close()	창을 닫는 메서드 - 매개변수는 없음
moveBy(x,y)	창을 상대적으로 이동시키는 메서드
moveTo(x,y)	창을 절대적으로 이동시키는 메서드
open(url,name,specs,replace)	새창 혹은 새탭으로 창을 여는 메서드, 새로고침시 똑같은 팝업창이 여러번 나타나는것은 팝업창 이름을 지정해줌으로써 해결 가능
print()	현재 창을 인쇄할수 있는 창을 띄워주는 메서드
resizeBy(w,h)	창 사이즈를 상대적으로 변경시키는 메서드
resizeTo(w,h)	창 사이즈를 절대적으로 변경시키는 메서드
scrollBy(x,y)	창의 스크롤바 위치를 상대적으로 이동시키는 메서드
scrollTo(x,y)	창의 스크롤바 위치를 절대적으로 이동시키는 메서드
stop()	창이 로드되는 것을 멈추는 메서드 - ie 및 edge는 사용 불가능
confirm()	확인창을 띄운다.
prompt()	프롬프트 창을 띄운다.

navigator 객체

• 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온. 오프라인 등의 여러 정보가 담겨있다.

navigator 객체 프로퍼티

속성 종류	설명
appCodeName	브라우저의 코드명을 반환모든 최신 브라우저는 호환성을 이유로 [Mozilla]를 반환
appName	브라우저의 이름을 반환IE11, Firefox, Chrome, Safari는 [Netscape]를 반환IE10이하의 버전은 [Microsoft Internet Explorer]를 반환Opera는 [Opera]를 반환
appVersion	브라우저의 버전 정보를 반환
cookieEnabled	브라우저에서 쿠키를 사용할지 여부를 지정하는 불표현식(true/false)를 반환
geolocation	사용자의 위치를 찾는데 사용할 수 있는 Geolocation개체를 반환
language	브라우저의 언어버전을 반환
onLine	브라우저가 온라인 또는 오프라인 모드인지 불표현식(true/false)를 반환
platform	브라우저가 컴파일되는 플랫폼을 반환
product	브라우저의 엔진 이름을 반환모든 브라우저가 [Gecko]라고 반환
userAgent	브라우저에서 서버로 보낸 사용자 에이전트 헤더의 값을 반환

history 객체

구분	속성 종류	설명
프로퍼티	length	현재 브라우저 창의 기록 목록에 있는 URL 수를 반환
메서드	back()	현재 브라우저 창의 기록 목록 중 이전목록으로 보내는 메서드
메서드	forward()	현재 브라우저 창의 기록 목록 중 다음목록으로 보내는 메서드
메서드	go(n)	현재 브라우저 창의 기록 목록에서 매개변수 숫자를 이용하여 그 목록으로 보내는 메서드음수는 이전으로 보내고, 양수를 작성하면 다음으로 처리

location 객체

속성

속성 종류	설명
hash	hash속성은 url의 해시기호(#)를 포함하여 주소를 설정하거나 반환하는 속성
host	host속성은 url의 호스트명과 포트를 설정하거나 반환하는 속성
hostname	hostname속성은 url의 호스트명을 설정하거나 반환하는 속성
href	href속성은 현재 페이지의 전체 url를 설정하거나 반환하는 속성
origin	origin속성은 url의 프로토콜, 호스트명, 포트번호를 반환하는 속성
pathname	pathname속성은 url의 경로이름을 설정하거나 반환하는 속성
port	port속성은 서버가 url에 사용하는 포트번호를 설정하거나 반환하는 속성
protocol	protocol속성은 콜론을 포함하여 현재 url의 프로토콜을 설정하거나 반환하는 속성
search	search속성은 ?(물음표)를 포함하여 url의 쿼리 문자열을 설정하거나 반환하는 속성

메서드

메서드 종류	설명
assign(url)	주소표시줄의 주소를 매개변수의 url주소로 변경하는 메서드현재 문서 기록에서 url이 남아 [뒤로가기]버튼을 사용하여 원래 페이지로 돌아갈수 있습니다. 최근 크롬에서는 안되는 이슈가 있습니다.
replace(url)	주소표시줄의 주소를 매개변수의 url주소로 변경하는 메서드현재 문서 기록에서 url을 제거하여 [뒤로가기]버튼을 눌러 원래 페이지로 돌아갈수 없습니다.
reload()	주소표시줄을 새로고침하는 메서드

scree 객체

속성

속성 종류	설명
availHeight	운영체제의 작업표시줄과 같은 인터페이스기능을 제외한 사용자 화면의 높이를 픽셀단위로 반환
availWidth	운영체제의 작업표시줄과 같은 인터페이스기능을 제외한 사용자 화면의 폭을 픽셀단위로 반환
colorDepth	이미지를 표시하기 위한 색상 팔레트의 비트심도(픽셀 당 비트수)를 반환
height	사용자의 화면의 총 높이를 픽셀단위로 반환
pixelDepth	방문자 화면의 색상 해상도(픽셀 당 비트)를 반환
width	사용자의 화면의 총 폭을 픽셀단위로 반환

메서드

종류	설명
lockOrientation()	화면 방향 잠금
unlockOrientation()	화면 방향 잠금 해제