- 계층구조
- Window 객체
브라우저 내장객체 중에 최상위에 있는 객체로 window 하위에 있는 객체를 가리킬때 window객체를
생략해도 된다.- window 객체의 특성
- window 객체의 메소드
메소드 의미 open() 윈도우 열기 close() 윈도우 닫기 confirm() 사용자로부터 확인을 받기위한 다이얼로그 박스 prompt() 사용자로부터 문자열을 입력받기 위한 다이얼로그 박스 alert() 메세지를 전달하기 위한 경고창 back() 뒤페이지로 이동 forward() 앞페이지로 이동 home() 홈페이지로 이동 find() 윈도우에 포함된 텍스트 검색 setTimeout() 지정된 시간동안 기다린후 지정된 명령실행 clearTimeout() setTimeout 해제 setInterval() 주기적으로 명령실행 stop() 문서전송 중지 print() 윈도우에 포함된 내용출력 moveBy() 윈도우 상대이동 moveTo() 윈도우 절대이동 resizeBy() 윈도우의 상대적 크기 바꾸기 resizeTo() 윈도우의 절대적 크기 바꾸기 scrollBy() 윈도우의 보여지는 부분을 상대적으로 스크롤 scrollTo() 윈도우의 보여지는 부분을 절대적으로 스크롤 - window 객체의 이벤트 핸들러
이벤트핸들러 의미 onFocus 브라우저가 포커스를 얻었을때 onBlur 브라우저가 포커스를 잃었을때 onError 브라우저가 문서를 읽다가 에러가 발생했을때 onLoad 브라우저가 문서를 모두 읽은후에 실행할 명령지정 onUnload 브라우저가 현재문서를 지운후에 실행할 명령지정 onDragDrop 브라우저에서 객체를 드래그앤드롭 시켰을때 onResize 윈도우 크기를 바꾸었을때 onMove 윈도우를 움직였을때 예제1 실행화면 <a onclick="window.open('http://mirage728.com.ne.kr/index.html','_blank',
'toolbar=no,location=yes,menubar=no,status=no,width=350,height=250')"
onMouseOver="window.status='mirage728홈으로 이동합니다' ; return true" onMouseout="window.status=' ' ; return true">
마우스 올린후 상태선을 보세요 </a>마우스 올린후 상태선을 보세요 - open() 메소드
open("문서이름","윈도우이름","윈도우특징")
문서이름은 만들고자 하는 윈도우에 보여줄 html파일 이름을 지정하면 된다
윈도우 이름은 만들고자 하는 윈도우의 이름으로 target 지정할때 쓰이게 된다.
(_top,_self,_parent,_blank,프레임이름,윈도우이름,"")윈도우 특징의 종류
윈도우특징 입력값 설명 status boolean 상태선 width 픽셀수 윈도우 바깥너비 height 픽셀수 윈도우 바깥 높이 toolbar Boolean 툴바메뉴 location Boolean 문서위치 정보 directories Boolean 디렉토리메뉴 menubar Bollean 메뉴 scrollbars Boolean 스크롤바 resizable Boolean 윈도우 크기조절 가능 copyhistory Boolean 히스토리 정보 복사 예제2 실행화면 <script>
function win1() {
window.open("","","")
}
</script>
<a href="javascript:onclick=win1()">윈도우열기</a>
윈도우열기 예제3 실행화면 <script>
function win2() {
window.open("","","status=no,width=200,height=100")
}
</script>
<a href="javascript:onclick=win2()">윈도우열기</a>
윈도우열기 예제4 실행화면 <script>
function win3() {
window.open("aaa.html","win3","status=no,width=200,height=100,directories=yes")
}
</script>
<a href="javascript:onclick=win3()">윈도우열기</a>
윈도우열기 예제5 실행화면 <script>
function win4() {
make1 = window.open("aaa.html","win3","status=no,width=200,height=100")
make1.document.write("mirage728홈 입니다<p>")
make1.document.write("<input type='button' value='닫기' ")
make1.document.write("+ onclick='window.close()' >")
}
</script>
<a href="javascript:onclick=win4()">윈도우열기</a>
윈도우열기 예제6 실행화면 <script>
var make1 = null // make1 변수에는 아직 값이 없다
function win5() {
make1 = window.open("aaa.html","win3","status=no,width=200,height=100")
// 텅빈 make1 변수에 새로 만들어진 윈도우를 집어 넣는다
// make1은 이제 새로 만들어진 윈도우 자체이다
make1.document.write("mirage728홈 입니다<p>")
// make1에 글을 출력한다
}
function close5() {
if(make1 != null) // 윈도우가 만들어져 있다면 = make1에 값이 들어 있다면
make1.close() // 윈도우(make1)를 닫아라
}
</script>
<a href="javascript:onclick=win5()">윈도우 열기</a><p>
<!-- 링크를 클릭하면 win5()함수를 호출(실행)하라 -->
<a href="javascript:onclick=close5()">윈도우 닫기</a><p>
<!-- 링크를 클릭하면 close5()함수를 호출(실행)하라 -->
<a style="cursor:hand;" onmouseOver=win5() onmouseOut=close5() >마우스위로</a>윈도우 열기
- setTimeout() 메소드
지정된 시간동안 기다린후 지정된 명령실행
setTimeout(함수-명령,시간)
함수-명령은 지정된 시간이 지난후 실행할 함수또는 명령어이다.
시간은 기다리는 시간이다.단위:1/1000초
예제7 실행화면 <script>
function wtime() {
var today = new Date()
var mirage = "현재시각 : " + today.getHours()
mirage += "시 " + today.getMinutes() + "분 "
mirage += today.getSeconds() + "초"
window.status = mirage;
timecall = setTimeout("wtime()",1000) }function stime() {
clearTimeout(timecall)
}
</script><input type=button value="시계실행" onclick="wtime()">
<input type=button value="시계멈춤" onclick="stime()">
상태선을 보세요<br>
<INPUT onfocus="this.blur()" onclick="wtime()" type="button" value="시계실행"> <INPUT onfocus="this.blur()" onclick="stime()" type="button" value="시계멈춤"> 상태선을 보세요
- clearTimeout() 메소드
setTimeout() 메소드로 지정한 것을 해제하는 역활을 한다.
clearTimeout(setTimeout-ID)
setTimeout-ID는 setTimeout() 실행시 리턴된 값이다(식별자)
위 예제에서 setTimeout() 메소드로 지정한 실행명령을 clearTimeout() 메소드로 해제시킨 경우이다.예제8 실행화면 <script>
function load1() {
location = 'http://mirage728.com.ne.kr/index.html'
}
</script>
<body onLoad="setTimeout('load1()',4000)">
<center><b>잠시후에 이동합니다.</b></center>
setTimeout 예제2 - setInterval() 메소드
일정한 간격을 두고 명령을 주기적으로 실행 시킬때 사용된다.
setTimeout은 지정된 명령를 일정한 시간이 지난후에 한번만 실행 시키기 때문에
시간을 계속 보여주는 경우에는 setInterval() 메소드를 사용하는 것이 효과적이다.
예제9 실행화면 <script>
function rtime() {
var today = new Date()
var mirage = "현재시각 : " + today.getHours()
mirage += "시 " + today.getMinutes() + "분 "
mirage += today.getSeconds() + "초"
window.status = mirage;
}
function r1time() {
setInterval("rtime()",1000)
}
</script>
<input type=button value="시계실행" onclick="r1time()">
<INPUT onfocus="this.blur()" onclick="r1time()" type="button" value="시계실행"> - find() 메소드
윈도우에 포함되어 있는 텍스트 중에서 원하는 문자열을 찾고자 할때 사용한다.
find("검색할문자열",대소문자구분(Boolean),뒤로-앞으로(Boolean))
검색할 문자열을 지정하지 않으면 찾기 다이얼로그 박스가 나타난다.
대소문자 : true=대소문자구분,false=구분하지않음(디폴트값)
뒤로-앞으로: true=뒤로검색 ,false=앞으로검색(디폴트)
리턴값: true:찾았을때,false:찾지못했을때 - print() 메소드
현재 보여지는 내용을 프린트로 출력하는 기능이다.
예제10 실행화면 <input type=button value='프린트하기' onClick="window.print()"> <INPUT onfocus="this.blur()" onclick="window.print()" type="button" value="프린트하기"> - moveBy() 메소드
윈도우를 상대적인 위치로 이동시킨다.
moveBy(수평거리,수직거리)
- moveTo() 메소드
윈도우를 절대적인 위치로 이동시킨다.
moveBy(x좌표,y좌표)
예제11 실행화면 <script>
function move1() {
mirage3 = window.open("","ret","width=300,height=200");
mirage3.moveTo(50,20);
return mirage3.focus();
}
function move2() {
mirage3 = window.open("","ret","width=300,height=200");
mirage3.moveBy(50,20);
return mirage3.focus();
}
</script>
<input type=button value="moveTo" onclick="move1()">
<input type=button value="moveBy" onclick="move2()">
<INPUT onclick="move1()" type="button" value="moveTo"> <INPUT onclick="move2()" type="button" value="moveBy"> 여러번 클릭 해보면 moveBy는
상대적인 위치 이동을 한다
- resizeBy() 메소드
윈도우의 크기를 상대적인 길이만큼 바꾼다.
resizeBy(가로길이,세로길이)
- resizeTo() 메소드
윈도우의 크기를 절대적인 길이만큼 바꾼다.
resizeTo(가로길이,세로길이)
예제12 실행화면 <script>
function inone() {
window.resizeBy(10,10);
}
function outone() {
window.resizeBy(-10,-10);
}
function inone1() {
window.resizeBy(10,10);
}
function outone1() {
window.resizeBy(-10,-10);
}
</script>
<input type="button" value="윈도우확대(by)" onclick="inone()">
<input type="button" value="윈도우축소(by)" onclick="outone()">
<input type="button" value="윈도우확대(to)" onclick="inone1()">
<input type="button" value="윈도우축소(to)" onclick="outone1()">
<INPUT onclick="inone()" type="button" value="윈도우확대(by)"> <INPUT onclick="outone()" type="button" value="윈도우축소(by)"> <INPUT onclick="inone1()" type="button" value="윈도우확대(to)"> <INPUT onclick="outone1()" type="button" value="윈도우축소(to)">
- scrollBy() 메소드
상대적인 크기만큼 윈도우를 스크롤시킨다.
scrollBy(수평길이,수직길이)
- scrollTo() 메소드
절대적인 크기만큼 윈도우를 스크롤시킨다.
scrollBy(x,y)
x:가로 좌표값이 x가 되도록 스크롤
y:세로 좌표값이 y가 되도록 스크롤
예제13 실행화면 <input type=button value="scrollBy" onclick='window.scrollBy(0,-400)'>
<input type=button value="scrollTo" onclick='window.scrollTo(0,300)'>
<INPUT onclick="window.scrollBy(0,-400)" type="button" value="scrollBy">
<INPUT onclick="window.scrollTo(0,300)" type="button" value="scrollTo">[출처] [9]브라우저 책체1|작성자 붉은매
특성 의미 toolbar 윈도우의 툴바를 보여줄지의 여부 status(bar) 윈도우의 상태선을 보여줄지의 여부 ()←생략 scrollbars 윈도우의 스크롤바를 보여줄지의 여부 menubar 윈도우의 메뉴를 보여줄지의 여부 location(bar) 윈도우의 주소창을 보여줄지의 여부 ()←생략 personalbar 윈도우의 Personalbar를 보여줄지의 여부 status 상태선에 나타날 문자열 defaultStatus 상태선에 지정된 문자열이 없을 때 나타날 문자열 self 자기 자신 객체 perent 윈도우 객체간에 게층구조가 생길때 상위객체 top window 객체간에 계층구조가 생길때 최상위 객체 frames 윈도우 객체안에 들어간 프레임들 tags html문서에 사용된 모든 택들 classes html문서에 사용된 모든 스타일시트 클래스들 opener open() 메소드로 윈도우를 연 문서가 있는 윈도우 innerWidth 윈도우에서 내용이 나타나는 영역의 너비 innerHeight 윈도우에서 내용이 나타나는 영역의 높이 outerWidth 윈도우 바깥테투리 너비 outerHeight 윈도우 바깥테투리 높이 pageXOffset 윈도우에서 현재 나타나는 페이지의 x 위치 pageYOffset 윈도우에서 현재 나타나는 페이지의 Y 위치
| 계층구조 | 계층순위 |
|---|---|
| window | ↑상위
↓하위 |
| frames document history locations classes tags | |
| layers title anchors links forms pathname protocol port hostname | |
| elements action method |
예외)navigator(브라우저 정보)