📌 코드 설명
1. 메인 페이지 (팝업 여닫기 버튼)
<script type="text/javascript">
function openWindow(){
// Ex01_popup.html 파일을 새 창으로 열기
my = window.open('Ex01_popup.html','pop','width=300,height=400');
}
function closeWindow(){
alert(1); // 닫기 전에 알림창 표시
my.close(); // window.open으로 연 창 닫기
}
</script>
<body>
안녕하세요
<input type="button" value="창 열기" onClick="openWindow()">
<input type="button" value="창 닫기" onClick="closeWindow()">
</body>
설명
- window.open(파일, 이름, 옵션) : 새로운 창을 엽니다.
- 파일 : 열 HTML 파일
- 이름 : 창 이름(고정하면 같은 창을 계속 씀)
- 옵션 : 크기/위치 등 지정 가능 (width, height, left, top 등)
- my.close() : open()으로 연 창을 닫음
- ()를 빼면 함수가 실행되지 않음 ⚠️
2. 팝업 페이지 (Ex01_popup.html)
<body>
<img src="../images/2over.jpg">
</body>
✅ 설명
- 단순히 이미지를 출력하는 HTML
- openWindow()로 열리면 새 창에 이 페이지가 표시
📌 주요 Window 객체 메서드
🔹 창 제어
- window.open(url, name, specs) : 새 창 열기
- window.close() : 현재 창 닫기
- window.resizeTo(width, height) : 창 크기를 지정 크기로 변경
- window.resizeBy(x, y) : 현재 크기에서 상대적으로 크기 조정
- window.moveTo(x, y) : 창을 화면의 (x, y) 좌표로 이동
- window.moveBy(x, y) : 현재 위치에서 상대적으로 이동
- window.focus() : 창을 활성화
- window.blur() : 창을 비활성화
🔹 대화 상자
- alert("메시지") : 확인 버튼만 있는 경고창
- confirm("메시지") : 확인/취소 버튼 (true/false 반환)
- prompt("메시지", "기본값") : 입력받는 창
🔹 타이머
- setTimeout(function, ms) : 일정 시간(ms) 뒤에 한 번 실행
- setInterval(function, ms) : 일정 시간(ms)마다 반복 실행
- clearTimeout(id) / clearInterval(id) : 실행 취소
🔹 위치/정보
- window.location : 현재 페이지 주소(URL) 정보
- location.href = 현재 URL
- location.reload() = 새로고침
- window.history : 방문 기록
- history.back() : 뒤로 가기
- history.forward() : 앞으로 가기
- window.screen : 화면 해상도 정보
- screen.width, screen.height
✅ 정리
- 창 열고 닫기 → open(), close()
- 창 크기/위치 제어 → resizeTo, moveTo …
- 사용자 대화창 → alert, confirm, prompt
- 시간 제어 → setTimeout, setInterval
- 페이지 제어 → location, history, screen
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 11. JavaScript_정규표현식 (0) | 2025.09.08 |
|---|---|
| 10.JavaScript_JavaScript로 폼 유효성 검정 (0) | 2025.09.08 |
| 8. JavaScript_Math 메서드/ String 메서드 (0) | 2025.09.08 |
| 7. JavaScript_Date (1) | 2025.09.08 |
| 6. JavaScript_배열 생성과 특징 정리 (1) | 2025.09.08 |