- 브라우저 오브젝트 -
브라우저 오브젝트는 브라우저에 마련된 기능이나 부품을 조작하는 것입니다.
예) 브라우저 창, 메뉴 표시줄, 작업 표시줄, 문장, 그림, 폼, 프레임 등 많은 브라우저 오브젝트가 있다.
브라우저 오브젝트를 다룰 때 DOM이라는 사양을 사용하면 HTML이나 XML로부터 요소를 지정하여 정보를 추출할 수 있다. Document Object Model의 약자이다. DOM은 HTML문서를 태그나 속성의 계층 구조로 간주하고, 참조할 위치를 지정하는 것이다.
Event 오브젝트는 이벤트 정보에 관한 오브젝트로, 2장에서 배운 이벤트 핸들러와 조합하여 사용한다.
Style 오브젝트는 CSS 프로퍼티를 다룬다.
Lesson 1 | |
window 오브젝트의 주요 프로퍼티와 메서드는 다음과 같다. | |
프로퍼티 | 기능 |
document | Document 오브젝트를 참조한다. |
history | history 오브젝트를 참조한다. |
location | location 오브젝트를 참조한다. |
frames | frame 오브젝트의 연상 배열을 참조한다. |
closed | 창이 닫혀있는지 참조한다. |
opener | 자기 자신을 오픈한 창을 참조한다. |
innerWith | 창 안쪽의 너비를 참조 설정한다. |
innerHeight | 창 안쪽의 높이를 참조 설정한다. |
outerWidth | 창 바깥쪽의 너비를 참조 설정한다. |
status | 상태 표시줄의 문자열을 참조 설정한다. |
defaultStatus | 상태 표시줄의 표준 문자열을 참조 설정한다. |
name | 창 이름을 참조 설정한다. |
메서드 | 기능 |
open() | 새 창을 연다. |
close() | 창을 닫는다. |
moveTo() | 창의 위치를 절대값으로 설정한다. |
moveBy() | 창의 위치를 상대값으로 설정한다. |
resizeTo() | 창의 크기를 절대값으로 설정한다. |
resizeBy() | 창의 크기를 상대값으로 설정한다. |
focus() | 창을 맨 앞으로 이동한다. |
blur() | 창을 맨 뒤로 이동한다. |
alert() | 경고 대화상자 표시 |
confirm() | 확인 대화상자 표시 |
prompt() | 문자 입력 대화 상자를 표시 |
setTimeout() | 일정 시간마다 반복 처리하는 타이머를 설정한다. |
clearTimeout() | setTimeout()의 타이머를 해제한다. |
setInterval() | 일정 시간 후 한번만 처리하는 타이머를 설정한다. |
clearInterval() | setInterval()의 타이머를 해제한다. |
Lesson 2 | |
mywin = window.open("http://www.google.co.jp/"); | open() 메서드로 새 창 열기 |
confirm("다운로드하시겠습니까?"); | confirm()메서드로 확인 대화 상자 표시 OK -> true 반환 |
| prompt("이름은?", "김ㅇㅇ"); | prompt() 메서드로 문자 입력 대화상자 표시 |
mytime = setInterval9"alert('5초경과')", 5000); | 타이머 설정하기 |
clearInterval(mytime); | 타이머 해제하기 |
Lesson 3 | |
Document 오브젝트는 브라우저에 표시되는 문자열, 그림, 폼, 링크 등과 같은 HTML문서를 다루는 오브젝트이다. | |
document 오브젝트의 프로퍼티를 참조하려면 'document.프로퍼티명'으로 기술한다. 주요 프로퍼티는 다음과 같다. | |
프로퍼티 | 기능 |
forms | Form 오브젝트의 연상 배열 |
anchors | Anchor 오브젝트의 연상 배열 |
lastModified | 마지막으로 수정한 날짜 참조하기 |
fgColor | 문자색 참조 설정 |
linkColor | 아직 열지 않은 링크의 문자 색 참조 설정 |
alinkColor | 활성화된 링크의 문자 색 참조 설정 |
vlinkColor | 이미 연 링크의 문자 색 참조 설정 |
bgColor | 배경색 참조 설정 |
domain | 표시한 페이지의 도메인 참조 |
URL | 표시한 페이지의 URL 참조 |
location | 표시한 페이지의 URL 참조 설정 |
title | 표시한 페이지의 제목 참조 |
cookie | 쿠키를 참조 설정 |
referrer | 분기처의 URL 참조 |
메서드를 참조하려면 'document.메서드명'으로 기술한다. 주요 메서드는 다음과 같다.
| |
메서드 | 기능 |
open() | 새 도큐먼트의 출력 시작 |
close() | 도큐먼트의 출력 종료 |
clear() | 도큐먼트 삭제 |
write() | 문자열 출력 |
writeIn() | 문자열 출력 및 줄 바꿈 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>도큐먼트 정보</title> </head> <body> <script type="text/javascript"> document.open(); document.write("도메인은",document.domain,"<br>"); document.write("제목은",document.title,"<br>"); document.write("최종수정일",document.lastModified); document.close(); </script> </body> </html> | |
Lesson 4 | |
Form 오브젝트는 입력 폼이다. <form> 태그와 관련있다. | |
프로퍼티 | 기능 |
elements | Element 오브젝트의 연상 배열 |
action | 송신처를 참조 설정 |
method | 송신 방법을 참조 설정 |
encoding | 인코딩 방식 참조 설정 |
length | 폼의 부품(element)수를 참조 |
name | 폼 이름을 참조 설정 |
target | <form>태그의 target 속성으로 |
메서드 | 기능 |
reset() | 폼의 입력 내용을 리셋 |
submit() | 폼의 입력 내용을 송신 |
<form name="myform" action="/cgi-bin/formobj.cgi" method="GET">이름<input type="text" name="NM"><br> | |
a = document.forms.length; | 도큐먼트 안에 있는 폼의 개수를 구하려면 forms의 length프로퍼티를 사용한다. |
b = document.forms[0].length b = document.myform.length; | 하나의 폼에 포함된 부품 개수를 구하려면 forms[참조번호]의 length 프로퍼티를 ghcnfgksek. |
Lesson 5 | |
Element 오브젝트는 폼의 각 부품(element)에 해당하는 것이다. | |
프로퍼티 | 기능 |
name | name속성에서 지정한 부품명을 참조 |
type | 부품 종류를 참조 |
checked | 체크 상자나 라디오 버튼의 체크 상태를 참조 설정 |
selected | 선택 메뉴의 선택 상태를 참조 설정 |
selectedIndex | 선택 메뉴의 선택 번호를 참조 설정 |
value | 부품의 값을 참조 설정 |
text | 서낵 메뉴에서 선택 항목의 문자열을 참조설정 |
options | 선택 메뉴에서 선택 항목의 배열 |
메서드 | 기능 |
click() | 버튼이나 상자 등을 클릭 |
blur() | 해당 부품의 초점을 흐리게 |
focus() | 해당 부품에 초점 맞추기 |
select() | 텍스트 문자를 선택 상대로 만들기 |
<form name ="myform" action="/cgi-bin/formobj.cgi" method = "GET">이름<input type="text" name="mytext"><br>
| |
a=document.forms[0].elements[0].type; a = document.myform.mycheck.type; | 부품을 참조하려면 elements[참조번호]를 사용한다. |
Lesson 6 | |
<select> - select 오브젝트 <option> - option 오브젝트 |
|
<form name = "myform" action="/cgi-bin/formobj.cgi" method="GET">승차역은? | |
a = document.myform.myselect.options[2].text; | 옵션 오브젝트를 참조하려면 select오브젝트의 options프로퍼티를 사용한다. options프로퍼티는 연상배열이다. |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta http-equiv="Content-Script-type" content="text/javascript"> <script type="text/javascript"> function check() { for(i=0; i<dcument.form1.length; i++) { if(document.form1.elements[i].value=="") { alert("구독을 원할 경우 모든 항목을 입력해주세요."); return false; } } return true; } </script> </head> <body> <h1>주간 매거진 구독 신청서</h1> 다음 항목을 입력한 후 보내기 버튼을 클릭하세요.<br><br> <form name="form1" action="/cgi-bin/formobj.cgi" method="get" onsubmit="return check()"> 이름: <input type="text" name="name"><br> 주소: <input type="text" name="add" size="55"><br> 구독합니다: <input type ="checkbox" name="evening" value=1><br><br> <input type="submit" name="" value="보내기"> <input type="reset" name="" value="리셋"><br> </body> </html> | |
Lesson 7 | |
Location 오브젝트는 window 오브젝트의 location 프로퍼티로 사용할 수 있다. | |
프로퍼티 | 기능 |
hash | 현재 페이지의 URL의 # 이후를 참조하거나 |
href | 현재 페이지의 URL을 참조하거나 지정한 URL로 이동한다. |
pathname | 현재 페이지의 경로명을 참조 |
host | 현재 페이지의 호스트 정보를 참조 |
hostname | 현재 페이지의 호스트명을 참조 |
port | 현재 페이지의 포트 번호를 참조 |
protocol | 현재 페이지의 프로토콜을 참조 |
search | CGI 등에 전달되는 검색부분(?이후 부분)을 참조 설정 |
메서드 | 기능 |
reload() | 페이지를 새로 고침 |
replace() | 현재 페이지의 이력을 남기지 않고 지정한 페이지로 URL 변경 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> 문자입력: <input type="text"><br> <input type="button" value="내 웹페이지" onclick="location='http://idoitforgood.tistory.com'"> <input type="button" value="URL" onclick="alert(location.href)"> <input type="button" name="" value="새로고침" onclick="location.reload()"> </body> </html>
| |
Lesson 8 | |
DOM(Document Object Model)은 HTML이나 XML의 프로퍼티나 메서드를 참조 및 조작하는 방법을 정의한 것이다. DOM에서는 HTML 문서를 트리 구조로 관리하며, 각 부품을 '노드' 단위로 나타낸다. 사용 설명서 같은 느낌. | |
<h1>그림책</h1> <p id="picbook">이솝우화 동화책</p> | |
프로퍼티 | 기능 |
innerHTML | 텍스트 내용의 참조나 설정을 수행 |
innerText | 문자열의 참조나 설정을 수행 |
textContent | 문자열의 참조나 설정을 수행 |
childNodes | 자식 노드의 배열 |
parentNode | 부모 노드를 참조 |
firstChild | 맨 처음 자식 노드를 참조 |
lastChild | 맨 마지막 자식 노드를 참조 |
previousSibling | 노드가 나열되어 있을 때 이전 노드를 참조 |
nextSibling | 노드가 나열되어 있을 때 다음 노드를 참조 |
메서드 | 기능 |
getElementById() | 하나의 특정 부품을 추출 |
getElementByTagName() | 인수로 지정한 태그의 부품을 배열로 모두 추출하여 반환 |
createElement() | 부품을 작성 |
appendChild() | 자식 노드를 추가 |
getAttribute() | 속성값 참조 |
setAttribute() | 속성에 값 설정 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/javascript"> <script type="text/javascript"> function getElementsNum() { var inp = document.getElementsByTagName("input"); alert('type="input"의 요소는' + inp.length +'개입니다.'); } </script> <title></title> </head> <body> <p id="picbook">이솝우화동화책</p> <textarea></textarea><br> <input type="submit" name="" value="보내기"><br><br> <input type="reset" name="" value="리셋"><br><br> <button onclick="getElementsNum()">type="input"의 요소 수는?</button> <script type="text/javascript"> a = document.getElementById("picbook"); a.innerHTML = "이솝우화"; </script> </body> </html> | |
Lesson 9 | |
Event 오브젝트는 발생한 이벤트 정보를 나타내는 오브젝트이다. | |
프로퍼티 | 기능 |
target | 이벤트 발생자의 오브젝트를 참조한다. |
type | 이벤트의 종류를 참조한다. |
modifiers | 수식 키의 번호를 참조한다. |
which | 키 코드를 참조한다. |
keyCode | 키 코드를 참조한다. |
altKey | alt키가 눌려졌는지 참조한다. |
button | 마우스 버튼의 종류를 참조한다. |
screenX | 화면에서 마우스의 X좌표를 참조한다. |
screenY | 화면에서 마우스의 y좌표를 참조한다. |
clientX | 페이지에서 마우스의 x좌표를 참조한다. |
clientY | 페이지에서 마우스의 y좌표를 참조한다. |
pageX | 페이지에서 마우스의 x좌표를 참조한다. |
pageY | 페이지에서 마우스의 y좌표를 참조한다. |
... function myEvent(){ alert("이벤트 종류는" + window.event.type+"입니다."); } ... <input type ="button" value="버튼" onclick="myEvent()"> ... | |
... function myEvent(eve){ alert("이벤트 종류는"+eve.type+"입니다."); } ... <input type="button" value+"버튼" onclick="myEvent(event)"> //event 프로퍼티 ...
| |
Lesson 10 | |
style 오브젝트는 DOM 규격으로 정해져 있다. style 오브젝트를 사용하면 CSS 스타일 프로퍼티 설정이나 참조가 가능하다. style 오브젝트의 프로퍼티는 HTML 태그의 style 속성으로 처리한다. | |
프로퍼티 | 기능 |
color | 문자 색 참조 설정 |
fontFamily | 글꼴군 참조 설정 |
fontSize | 글꼴 크기 참조 설정 |
fontWeight | 글꼴의 굵기 참조 설정 |
fontStyle | 글꼴 스타일 참조 설정 |
textDecoration | 문자 장식 참조 설정 |
textTransform | 영문자의 대,소문자 참조 설정 |
textAlign | 행정렬 참조 설정 |
texIindent | 첫번째 행의 들여쓰기 참조 설정 |
특정 요소에 스타일을 설정하려면 DOM의 getElementById()메서드 등으로 HTML 요소를 구성한다. | |
funtion typeChange(n){ var span = document.getElementById("mystyle"); if(n==0){ span.style.color="blue"; span.style.fontSize="x-Large"; } else{ span.style.color="black"; span.style.fontSize="medium"; } } ... <span id="mystle">스타일 전환</span><br> <input type="button" onclick="typeChange(0)" value="큰 글자"> <input type="button" onclick="typeChange(1)" value="보통 글자"> ... | |
Lesson 11 | |
브라우저의 이력을 다루는 History오브젝트와 그림을 다루는 Image 오브젝트 History 오브젝트를 사용하면 브라우저의 '앞으로' 버튼이나 '뒤로'버튼과 같은 동작을 수행할 수 있다. | |
History 오브젝트의 프로퍼티 | 기능 |
length | 이력 개수를 참조 |
History 오브젝트의 메서드 | 기능 |
back() | 한 페이지 뒤로 돌아간다. |
forward() | 한 페이지 앞으로 간다. |
go() | 지정한 값 만큼 이동한다. |
버튼을 클릭해서 한 페이지 뒤로 이동하기 <input type="button" value="뒤로" onclick="history.go(-1)">
| |
Image 오브젝트는 도큐먼트에 <img> 태그로 포함된 그림을 표시한다. Image 오브젝트는 Document 오브젝트의 images 프로퍼티로 사용할 수 있다. | |
Image 오브젝트의 프로퍼티 | 기능 |
src | 그림의 url을 참조 설정 |
name | 그림의 이름을 참조 설정 |
vspace | 텍스트와 그림의 가로 간격을 참조 |
hspace | 텍스트와 그림의 세로 간격을 참조 |
border | 그림 틀의 너비를 참조 |
complete | 그림 읽기가 끝났는지 참조 |
a = document.images.length | 도큐먼트 안에 있는 그림 수를 참조 |
b = document.images[0].src | 그림의 url을 참조 |
| b=document.myimage.src | <img>태그에서 name속성을 지정했을 때는 그림명으로 참조가능 <img name="myimage">인 경우 |
Lesson 12 | |
앵커를 조작하는 Anchor 오브젝트 브라우저 정보를 구하는 Navigator 오브젝트 | |
JavaScript의 앵커는 도큐먼트에서 <a = name="이름">~</a>를 사용하여 지정한 링크이다. Anchor 오브젝트는 Document 오브젝트의 anchors 프로퍼티로 사용할 수 있다. Anchor 프로퍼티는 연상배열이다. | |
Anchor 오브젝트의 프로퍼티 | 기능 |
name | 앵커명을 참조 설정 |
text | 앵커의 텍스트를 참조 설정 |
... <name="one">호프</a> <name="one">스텝</a> <name="one">점프</a> ... a=document.anchors.length; a=document.anchors[0].name; c=document.anchors[1].text; | 앵커의 이름이나 텍스트를 참조하기 anchors.length; 도큐먼트 안에 있는 앵커는 총 3개이다. anchors[0].name; anchors[0] 앵커명은 'one'이다. anchors[1].text; anchors[1] 앵커 텍스트는 '스텝'이다. |
Navigator 오브젝트는 사용자의 브라우저나 OS 환경에 관한 정보를 구하는 오브젝트이다.참조할 수 없을 때는 undefined를 반환한다. | |
Navigator 오브젝트의 프로퍼티 | 기능 |
appName | 애클리케이션명을 참조 |
appVersion | 브라우저의 버전 참조 |
appCodeName | 브라우저 코드명 참조 |
platform | OS 기종 참조 |
userAgent | 브라우저의 에이전트명(브라우저의 종류나 버전 등)을 참조 |
Navigator 오브젝트의 메서드 | 기능 |
javaEnabled() | Java 애플릿을 사용할 수 있는지 조사 |
document.write(navigator.userAgent); | 브라우저의 에이전트명을 표시 |
예제) 크기 등을 지정하여 새로운 창 열기 | |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function init(){ document.form1.txtURl.value="http://idoitforgood.tistory.com"; document.form1.txtWidth.value="600"; document.form1.txtHeight.value="480"; document.form1.txtClose.disabled= true; } function openWindow(){ var errMsg = errorCheck(); if(errMsg!=""){ alert(errMsg+"가 입력되지 않았습니다."); return; } var url=document.form1.txtUrl.value; var width=document.form1.txtWidth.value; var height=document.form1.txtHeight.value; if(confirm("새창에서 열겠습니까?")){ mywin = window.open(url,"","width="+width+",heigh=t"+height); document.form1.btnClose.disabled=false; } } function closeWindow() { mywin.close(); document.form1.btnClose.disabled=true; } function errorCheck(){ var errMsg=""; for(i=0, i<document.form1.length; i++){ if(document.form1.elements[i].type=="text"&&document.form1.elements[i].value==""){ switch(document.form1.elements[i].name){case "txtUrl":errMsg +="[URL]"; break; case "txtWidth": errMsg +="[너비]"; break; case "txtHeight": errMsg +="[높이]"; break; } } } return errMsg; } </script> </head> <body onload="setDefaultValue()"> <form name="form1"> <input type="button" name="btnOpen" value="Open" onclick="openWindow()"> <input type="button" name="btnClose" value="Close" onclick="closeWindow()"> <br> URL: <input type="text" name="txtUrl"><br> 너비: <input type="text" name="txtWidth"><br> 높이: <input type="text" name="txtHeight"><br> </form> </body> </html> | |
1. 폼에서 여행 패키지를 선택하는 프로그램을 작성하라. '확인' 버튼을 클릭하면 선택 정보가 대화상자에 나타난다. | |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Script-Type" content=""> <script type="text/javascript"> function myConfirm(){ str="이름: "+document.form1.txtName.value+"\n"; index=document.form1.selMoneyPlan.selectedIndex; str+="출발월:"+document.form1.selMoneyPlan.options[index].text+"\n"; for(i=0; i<=3; i++){ if(document.form1.r1[i].checked){ if(i==0) loc="유럽"; else if(i==1) loc="아시아"; else if (i==2) loc="하와이, 오세아니아"; else if(i==3) loc = "미국"; else loc = "미선택"; str +="목적지: "+loc+"\n"; break; } } index=document.form1.selMoneyPlan.selectedIndex; str+="예산:" +document.form1.selMoneyPlan.options[index].text; a=confirm(str); } </script> <title></title> </head> <body> <h1>여행 신청서</h1> 다음항목을 입려갛ㄴ 후 '확인'버튼을 누르세요.<br><br> <form name="form1"> 이름: <input type="text" name="txtName"><br><br> 출발월: <select name = "selMonth"> <option value="01" selected>1월</option> <option value="02">2월</option> <option value="03">3월</option> </selcted><br><br> 목적지 : <br><input type="radio" name="r1" value="1">유럽<br> <input type="radio" name="r1" value="2">아시아<br> <input type="radio" name="r1" value="3">하와이,오세나이아<br> <input type="radio" name="r1" value="4">미국<br> 예산: <select name="selMoneyPlan"> <option value="01" selected>50-100만원</option> <option value="02" selected>100-150만원</option> <option value="03" selected>150-200만원</option> </select><br><br> <input type="button" value="확인" onclick="myConfirm()"> <input type="reset" value="다시작성"><br> <script type="text/javascript"> //a.document.getElementById("travel"); </script> </body> </html> | |
댓글