04. 자바스크립트의 내장 객체를 사용한 문제 II
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
(문서 안에 html 파일이 있다고 가정한다.)
1. [현재 시간 보기] 버튼을 누르면 현재 시간이 있는 html 파일이 팝업 창으로 나타나는 프로그램을 작성한다.
2. 화면의 너비값에서 팝업 창의 너비값(400px)을 빼고 2로 나누면, 팝업 창이 시작할 left 가 된다.
3. 화면의 높이값에서 팝업 창의 높이값(200px)을 빼고 2로 나누면, 팝업 창이 시작할 top 이 된다.
4. 팝업 창의 좌표값(left, top)과 창의 크기 width, height 를 하나의 문자열로 저장한다.
5. window.open( ) 메서드를 실행하여 팝업 창을 보여준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVA SCRIPT 문제 4</title>
<style>
#container{
width:200px;
margin:50px auto;
}
button {
border:1px solid #ccc;
background:#fff;
padding:20px 30px;
}
</style>
</head>
<body>
<div id="container">
<button id="bttn">현재 시간 보기</button>
</div>
<script>
document.getElementById('bttn').onclick = displayTime;
// 버튼 클릭하면 displayTime 함수 실행
function displayTime(){
// 코드를 작성하세요
}
</script>
</body>
</html>결과 화면
A. 해설
1. [현재 시간 보기] 버튼을 누르면 현재 시간이 있는 html 파일이 팝업 창으로 나타나는 프로그램을 작성한다.
2. 화면의 너비값에서 팝업 창의 너비값(400px)을 빼고 2로 나누면, 팝업 창이 시작할 left 가 된다.
--> var 예약어로 left 변수에 (screen.availWidth - 400) / 2의 값을 넣는다.
3. 화면의 높이값에서 팝업 창의 높이값(200px)을 빼고 2로 나누면, 팝업 창이 시작할 top 이 된다.
--> var 예약어로 top 변수에 (screen.availHeight - 200) / 2의 값을 넣는다.
4. 팝업 창의 좌표값(left, top)과 창의 크기 width, height 를 하나의 문자열로 저장한다.
--> var 예약어로 opt 변수에 width, height, left, top 값을 넣는다.
5. window.open( ) 메서드를 실행하여 팝업 창을 보여준다.
--> window.open("경로", "창이름", "창옵션");
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JAVA SCRIPT 문제 4</title>
<style>
#container {
width: 200px;
margin: 50px auto;
}
button {
border: 1px solid #ccc;
background: #fff;
padding: 20px 30px;
}
</style>
</head>
<body>
<div id="container">
<button id="bttn">현재 시간 보기</button>
</div>
<script>
document.getElementById("bttn").onclick = displayTime;
// 버튼 클릭하면 displayTime 함수 실행
function displayTime() {
var left = (screen.availWidth - 400) / 2;
var top = (screen.availHeight - 200) / 2;
var opt =
"left=" + left + ",top=" + top + ",width=" + 400 + ",height=" + 200;
window.open("time.html", "pop", opt);
}
</script>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠문제 풀이 > JavaScript 문제 풀이' 카테고리의 다른 글
| 06. 새로운 요소 추가하기 (0) | 2022.08.29 |
|---|---|
| 05. DOM 에 접근하기 (0) | 2022.08.29 |
| 03. 자바스크립트의 내장 객체를 사용한 문제 I (0) | 2022.08.23 |
| 02. 함수 선언하고 호출하는 문제 II (0) | 2022.08.16 |
| 01. 함수 선언하고 호출하는 문제 I (0) | 2022.08.16 |