| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- jpa entity자동
- memcached
- generate entity
- ollama langflow
- MySQL
- header setting
- docker 설치
- Java
- NextJS
- custom valid
- CentOS6
- java8
- docker
- JPA
- dto valid
- 리눅스
- jvm
- 도커
- spring boot
- generate pojos
- SpringBoot
- java9
- Next.js 14
- 초기 구축
- spring
- 초기 세팅
- React
- JavaScript
- 헤더 설정
- swagger
- Today
- Total
개발자의 길
자바스크립트 - window 객체 본문
[window 객체]
window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.
창 열기, 창 닫기, 창 크기 조절 등 창을 제어하는 다양한 작업을 할 수 있다.
사용형식) window.속성
window.속성 = 값
window.메소드()
window.메소드(인자 값)
예) window.status="환영합니다." //상태 표시줄에 문자 표시
window.close() // 창을 닫는다.
window.open() // 새 창을 연다.
---------------- window 객체의 속성 -------------------
○ defaultStatus
- 브라우저 상태 표시줄에 표시할 문자열의 초기 값 설정
○ status
- 상태 표시줄에 표시할 문자열 지정
○ window
- 창 자신을 가리킴
○ frames
- 창에 포함된 프레임을 배열 형태로 지정
○ opener
- open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴
○ parent
- 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴
○ self
- 현재 작업 중인 창, 즉 자기자신을 가리킴
○ top
- 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음
○ classes
- 문서 안에 정의된 모든 스타일시트의 정보를 갖음
○ tags
- 문서 안에 정의된 모든 태그의 정보를 나타냄
○ screenX
- 창의 x 좌표 반환
○ screenY
- 창의 y 좌표 반환
○ closed
- 창이 닫혀 있는지 확인한 후 true, false 반환
○ name
- 창 이름 반환
○ length
- 창 안에 프레임 수 반환
------------- 넷스케이프 네비게이터 전용 -----------
○ innerHeight
- 브라우저 내용의 높이
○ innerWidth
- 브라우저 내용의 넓이
○ outerHeight
- 브라우저 전체 높이
○ outerWidth
- 브라우저 전체 넓이
○ pageXoffset
- 현재 나타나는 페이지의 x 좌표
○ pageYofset
- 현재 나타나는 페이지의 y 좌표
---------------- window 객체의 메소드 -------------------
※ 윈도우 객체에서 사용할수 있는 이벤트 핸들러로는 onBlur, onDragdrop, onError, onFocus, onLoad, onUnload 가 있다.
----------------->사용자의 응답을 요구하는 대화상자를 생성하는 메소드<---------------------
○ alert("메시지")
- 경고 창 띄움
○ prompt("메시지","구문")
- 입력 창 띄움
○ confirm("메시지")
- 확인, 취소 창 띄움
-----------------> 창 생성과 제거 메소드 <---------------------
○ open("문서명","창이름","속성")
- 새 창을 염
○ close()
- 창을 닫음
----------------->브라우저 크기, 위치 설정 <---------------------
○ moveBy(x,y)
- 브라우저를 상대좌표로 지정한 픽셀만큼 이동
○ moveTo(x,y)
- 브라우저를 절대좌표로 지정한 위치로 이동
○ resizeBy(x,y)
- 브라우저의 크기를 상대적으로 지정한 픽셀만큼 설정
○ resizeTo(x,y)
- 브라우저의 크기를 절대 값으로 지정한 픽셀만큼 설정
○ scroll(x,y)
- 창이나 프레임 안의 내용을 스크롤함
○ scrollBy(x,y)
- 스크롤을 상대좌표로 이동
○ ScrollTo(x,y)
- 스크롤을 절대좌표로 이동
-----------------> 동작 시간 간격을 조절하는 메소드 <---------------------
○ setTimerout("명령문",시간간격)
- 일정한 시간 간격으로 명령문을 반복 실행 (시간 1/1000초 단위)
○ clearTimerout()
- SetTimerout() 으로 동작되는 타이머 해제
-----------------> 기타 <---------------------
○ print()
- 현재 문서 출력
----------------->넷스케이프 네이게이터 전용<---------------------
○ back()
- 한단계 이전 URL로 이동
○ forward()
- 한단계 이후의 URL로 이동
○ home()
- 브라우저에세 home으로 지정된 URL으로 이동
○ stop()
- 브라우저의 stop 버튼처럼 불러오기 중지
○ find("문자열")
- 지정된 문자열이 있는지 검사(true,false 값)
----------------------------------------------------------------------
=== open() 메소드로 창열기 ===
open() 메소드는 새 창을 열어준다. 옵션을 다양하게 설정하여 다양한 모양의 새 창을 열 수 있다.
window.open() 메소드의 인자 값은 반드시 세 개를 포함해야 한다. 아무런 속성도 지정하지 않을경우에는
window.open("","","") 와 같이 입력한다.
형식) window.open("문서명","창이름","설정");
예) 다음 코드는 allim.html 문서를 좌표 50, 50 위치에 200*300 크기로 새 창을 연다.
window.open("allim.html","popup","top=50 left=50 width=200 height=300")
---------- window.open() 메소드에 설정할 수 있는 창 옵션 --------------------
○ directories : yes/no
- 연결 등 디렉토리 메뉴 표시 여부
○ menubar : yes/no
- 메뉴 바 표시 여부
○ toolbar : yes/no
- 툴 바 표시 여부
○ location : yes/no
- 주소 입력줄 표시 여부
○ resizable : yes/no
- 크기 재설정 버튼 표시 여부
○ status : yes/no
- 상태 표시줄 표시 여부
○ scrollbars : yes/no
- 스크롤 바 표시 여부
○ copyhistory : yes/no
- 히스토리 정보를 저장할지 여부
○ channelmode
- 전체화면 모드
○ fullscreen
- 전체화면으로 표시
○ width : pixel
- 창 넓이
○ height : pixel
- 창 높이
○ left : pixel
- 창의 좌측 좌표 값
○ top : pixel
- 창의 위쪽 좌표 값
----------------------------------------------------------------------
[실습하기]
----------------------open 으로 창 열기 예제-----------------------------------
<html>
<head>
<title>Test</title>
<script language="javascript">
function openWin()
{
window.open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");
}
</script>
</head>
<body onload="openWin()">
</body>
</html>
---------------------------------------------------------------------
----------------------close 으로 창 닫기 예제-----------------------------------
현지 활성화된 창을 닫을 때는 아래 세 가지 명령어 중 하나를 사용한다.
window.close()
self.close()
this.close()
만약 특정 창을 닫으려면 창을 열 때 해당 창에 객체명을 지정해야 한다.
1. 새 창을 열 때 창에 객체명 지정하기
윈도우 객체명 = window.open("문서명","창이름","옵션설정")
2. 새 창으로 열린 창 닫기
윈도우 객체명.close()
---------------------------------------------------------------
[실습하기]
------------------- 객체명.close() 으로 창닫기 -----------------------
<html>
<head>
<title>Test</title>
<script language="javascript">
var win = null
function openWin()
{
win = open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");
}
function closeWin()
{
win.close();
}
</script>
</head>
<body>
<img src=images/zoom.gif style="cursor:hand" onclick="openWin()">
<form name=info>
<input type=button name=bt value=창닫기 onclick="closeWin()">
</form>
</body>
</html>
'2. JS' 카테고리의 다른 글
| 자바스크립트로 특정 url 소스 가져오기 (0) | 2010.02.23 |
|---|---|
| 자바스크립트 - location 객체와 String 객체 (0) | 2010.01.21 |
| jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작 (0) | 2010.01.10 |
| 비밀번호 체크 자바스크립트 [영문+숫자 혼합] (2) | 2010.01.05 |
| delay 시키는 함수 setTimeout,setInterval (1) | 2009.12.17 |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.