HTML 파일 내에 css 스타일 파일을 삽입 <style type="text/css">
<!-- @import url("style.css");
-->
</style> ===================== window 객체 .........................................................
아래는 최상위 window객체가 가진 속성과 메서드,이벤트 핸들러의 종류를 훓어보고 몇가지 예제를 해본다. 필요한 작업이 있을 때마다 객체를 찾아보고 속성이 있나, 메서드를 가졌나, 이벤트핸들러가 있는지를 찾아봄으로써 점점 내공이 깊어지는 것이다. |
| status | 브라우저의 상태바에 문자열을 출력하는 경우에 사용 | | defaultStatus | 브라우저의 상태바에 초기 문자열을 설정 | | length | 창안의 프레임 수 | | name | 창 이름 | | self | 현재 창 자신, window와 같음 | | window | 현재 창 자신, self와 같음 | | parent | 프레임에서 현재프레임의 상위프레임 | | top | 현재프레임의 최상위프레임 | | opener | open()으로 열린 창에서 볼 때 자기를 연 창 | | document | document 오브젝트 | | frames | 창안의 모든 프레임에 대한 배열정보 | | history | history 오브젝트 및 배열 | | location | location 오브젝트 | | closed | 창이 닫혀 있는 상태 | | locationbar | location 바 | | menubar | 창 메뉴 바 | | innerHeight | 창 표시 영역의 높이(픽셀), 익스플로러 지원되지 않음 | | innerWidth | 창 표시 영역의 너비(픽셀), 익스플로러 지원되지 않음 | | outerHeight | 창 바깥쪽 둘레의 높이, 익스플로러 지원되지 않음 | | outerWidth | 창 바깥쪽 둘레의 너비, 익스플로러 지원되지 않음 | | pageXOffset | 현재 나타나는 페이지의 X위치, 익스플로러 지원되지 않음 | | pageYOffset | 현재 나타나는 페이지의 Y위치, 익스플로러 지원되지 않음 | | personalbar | 창의 퍼스널 바 | | scrollbar | 창의 스크롤 바 | | statusbar | 창의 상태 바 | | toolbar | 창의 툴 바 |
| alert() | 경고용 대화상자를 보여줌 | | clearTimeout() | setTimeout 메소드를 정지 | | confirm() | 확인, 취소를 선택할 수 있는 대화상자를 보여줌 | | open() | 새로운 창을 오픈 | | prompt() | 입력창이 있는 대화상자를 보여줌 | | setTimeout() | 일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정 | | eval() | 문자열을 숫자로 바꿈 | | toString() | 오브젝트를 문자열로 바꿈 | | blur() | focus를 이동 | | focus() | focus를 줌 | | scroll() | 창을 스크롤 함 | | valueOf() | 오브젝트 값을 반환 | | back() | 한 단계 전 URL(이전화면)로 돌아감. 익스플로러 지원 안함 | | find() | 창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false. 익스플러러 지원 안함 | | forward() | 한 단계 뒤의 URL(다음화면)로 이동. 익스플로러 지원 안함 | | home() | 초기화 홈페이지로 이동. 익스플로러 지원 안함 | | moveby() | 창을 상대적인 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정 | | moveto() | 창을 절대적인 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정 | | resizeby() | 창의 크기를 상대적인 좌표로 재설정. 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정 | | resizeto() | 창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정 | | scrollby() | 창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정 | | scrollto() | 창을 절대적인 좌표를 스크롤. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정 | | stop() | 불러오기를 중지. 익스플로러는 지원 안함 | | captureEvents() | 모든 타입의 이벤트를 판단 | | setInterval() | 일정시간마다 지정된 처리를 반복 | | clearInterval() | setInterval 메소드의 정지 | | handleEvent() | 이벤트 취급자를 정함 | | print() | 화면에 있는 내용을 프린터로 출력 | | releaseEvent() | 다른 계층의 이벤트로 이벤트를 넘김 | | routeEvent() | 판단한 이벤트와 같은 계층의 이벤트 | | toSource() | 오브젝트값을 문자열로 반환 |
| onBlur | 브라우저가 포커스를 잃을 때 발생 | | onDragDrop | 사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생. 익스플로러는 지원 안함 | | onError | 문서를 읽는 중에 에러가 생길 때 발생 | | onFocus | 브라우저에 포커스를 얻을 때 발생 | | onLoad | 문서를 읽을 때 발생 | | onMove | 브라우저의 위치를 변경했을 때 발생. 익스플로러는 지원 안함 | | onResize | 창의 크기를 변경했을 때 발생. 익스플로러는 지원 안함 | | onUnload | 현재 문서를 지울려고 할 때 발생 |
window.open("문서url","창이름","창의 특성")
웹여행중에 많이 본 것일텐데 링크나,버튼,이미지를 누를 때 많이 뜨죠!
첫째인수로 url이 필요하죠. 새창에도 내용을 넣어야 하니까요.
둘째인수로 창이름, 이게 같은 경우엔 계속 창을 열 때 새로 열지 않고 이미 열린 창을 이용합니다.
세째인수는 새로 열릴 창의 너비,높이,툴바,상태바등을 지정하는거죠. |
| directories | yes || no | 익스플로러 연결도구모음, 익스플로러 전용 | | location | yes || no | 주소입력란 | | menubar | yes || no | 메뉴표시줄 | | scrollbars | yes || no | 스크롤바 | | status | yes || no | 상태표시줄 | | toolbar | yes || no | 도구모음 | | copyhistory | yes || no | 히스토리정보를 복사 | | resizable | yes || no | 창 크기 조절 가능여부 | | width | 픽셀 | 창의 너비 | | height | 픽셀 | 창의 높이 |
| <script language="javascript">
// 페이지로딩시 새창 열기
function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>
<body onLoad="winOpen()">
<script language="javascript">
// 클릭시 새창열기
function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>
<font onClick="winOpen()">
<script language="javascript">
// 클릭시 새창열기 , 링크에서
function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>
<font onClick="winOpen()"> 클릭열기 </font>
<a href="javascript:winOpen()"> 링크열기 </a>
<script language="javascript">
// 매개변수를 이용하기
function winOpen(url,winname,winhow) {
window.open(url,winname,winhow)
}
</script>
<a href= "javascript:winOpen('123.html','newWin','width=300,height=200,toolbar=no')"> 매개열기 </a>
|
| <script language="javascript">
function winClose() {
window.close()
}
</script>
<a href= "javascript:winClose()"> 함수이용해서 닫기 </a>
<a href= "javascript:window.close()"> 메서드 이용 닫기 </a>
|
| <script language="javascript">
// 창 닫기 전에 연 창의 폼요소에 값 넘기기
function winClose(addr) {
opener.form1.address=addr
self.close()
}
</script>
<a href= "javascript:winClose('서울 종로구')"> 종로구</a>
<a href= "javascript:winClose('서울 마포구')"> 마포구</a>
<script language="javascript">
// 창 닫기 전에 연 창을 리로드하기
function winClose() {
opener.location.reload()
self.close()
}
</script>
<a href= "javascript:winClose()"> 함수이용해서 닫기 </a>
|
■ 새로 열린 창에서 크기 조절하기 window.resizeTo |
| <script language="javascript">
// 페이지로딩시 크기 조절
function winSize() {
window.resizeTo(300,200) // 너비,높이
}
</script>
<body onLoad="winSize()"> |
■ 새로 열린 창에서 위치 조절하기 window.moveTo |
| <script language="javascript">
// 페이지로딩시 위치 조절
function winMove() {
window.moveTo(200,200) // X,Y 좌표
}
</script>
<body onLoad="winMove()"> |
window 객체에서 가장 많이 사용되는 필수 기능인 새창관련만 살펴보았다.
나머지는 필요할 때 검색을 통해 많은 예제 소스를 접할 수 있을 것이다!!!
|
|
