1. window
1)
클라이언트 오브젝트 : 브라우저 관련 객체
window
|
location history frame document screen navigator
|
anchor applet area form image layer link plugin title
|
button checkbox fileupload hidden password radio reset select submit text textarea
|
option
window 메서드
window.alert() : 경고창 (window 생략 가능)
window.prompt() : 입력창 (window 생략 가능)
window.confirm() : 선택창 (window 생략 가능)<title>alert,prompt,confirm</title>
</head>
<body>
<script type="text/javascript">
alert('경고창');
let season = prompt('좋아하는 계절은?','');
document.write('좋아하는 계절은 ' + season + '이다.<br>');
let choice = confirm('야근을 하겠습니까?');
//확인 true, 취소 false 반환
if(choice){
document.write('야근 확정!');
}else{
document.write('야근 취소!');
}
</script>
</body>
</html>2)
window.open(url, 새 창 이름, 옵션)
옵션
width : 새 윈도우 넓이
height : 새 윈도우 높이
location : 주소 입력창 유무
menubar : 메뉴의 유무
resizable : 화면 크기 조절 기능 여부
status : 상태 표시줄의 유무
toolbar : 툴바 유무
scrollbars : 스크롤바 유무
left : 창의 가로축 위치 지정
top : 창의 세로축 위치 지정
window.close() : 창 닫기<title>새 윈도우 객체 생성</title>
<script type="text/javascript">
let win;
function winOpen(){
win = window.open('https://www.naver.com','child',
'toolbar=no,location=no,status=no,menubar=no,resizable=no,scrollbars=no,width=400,height=300');
}
function winClose(){
win.close(); //열려있는 창을 닫음
}
</script>
</head>
<body>
<input type="button" value="창 열기" onclick="winOpen()">
<input type="button" value="창 닫기" onclick="winClose()">
</body>
</html>3)
* setTimeout(function, millisecond) : 일정 시간 후에 함수를 한 번 실행
* setInterval(function, millisecond) : 일정 시간마다 함수를 반복해서 실행<title>setTimeout</title>
</head>
<body>
<script type="text/javascript">
//윈도우가 로드될 때
window.onload=function(){
alert('경고창을 닫고 3초 후 이 페이지는 종료됩니다.');
//3초 후에 함수를 실행
window.setTimeout(function(){
window.close(); //현재 윈도우를 닫음
},3000); //=3초
};
</script>
</body>
</html>2. location
1)
<title>location</title>
</head>
<body>
<script type="text/javascript">
document.write('location.href : ' + location.href + '<br>');
document.write('location.protocol : ' + location.protocol +'<br>');
document.write('location.host : ' + location.host +'<br>');
document.write('location.hostname : ' + location.hostname +'<br>');
document.write('location.port : ' + location.port +'<br>');
document.write('location.pathname : ' + location.pathname);
</script>
</body>
</html>2)
<title>location</title>
</head>
<body>
<!-- 페이지 이동을 할 수 있고, history 정보가 남아있어서 원래 페이지로 돌아갈 수 있음 -->
<input type="button" value="이동(href)" onclick="location.href='s02_window.html'"><br>
<input type="button" value="이동(assign)" onclick="location.assign('s04_location.html')"><br>
<!-- 페이지 이동을 할 수 있지만 history 정보가 지워져서 원래 페이지로 돌아갈 수 없음 -->
<input type="button" value="이동(replace)" onclick="location.replace('s02_window.html')"><br>
<input type="button" value="새로고침" onclick="location.reload()">
</body>
</html>3. history
<title>history</title>
</head>
<body>
<input type="button" value="뒤로 한 칸" onclick="history.back()">
<input type="button" value="뒤로 한 칸" onclick="history.go(-1)">
<input type="button" value="앞으로 한 칸" onclick="history.forward()">
<input type="button" value="앞으로 한 칸" onclick="history.go(1)">
</body>
</html>