window 자식 객체로는 history, screen, navigator, location, document가 있다.
이 중 screen, location, history 객체를 알아보고자 한다.
🔻screen 객체🔻
- 화면 정보를 제공한다.
속성
- availWidth, availHeight : 작업표시줄을 제외한 화면크기
<body>
<script>
console.log(window.screen.availWidth);
console.log(window.screen.availHeight);
console.log(window.screen.colorDepth); //24bit color를 제공한다.
console.log(window.screen.orientation); //모니터 회전각도를 알 수 있다.
</script>
</body>🔻location 객체🔻
- 현재 창의 페이지주소와 관련된 객체를 참조한다.
<body>
<form name="form1">
<input type="button" value="버튼" name="btn1">
</form>
<script>
window.document.form1.btn1.onclick=m1;
function m1() {
//현재 페이지주소를 콘솔에 보여준다.
//console.log(window.location.href);
//페이지 이동(프로퍼티)
//window.location.href = 'https://naver.com';
//페이지 이동(메소드)
//window.location.assign('https://google.com');
//새로고침
window.location.reload();
}
</script>
</body>
🔶전역이벤트로 단축키 만들기
<body>
<ul>
<li><a href="https://naver.com">네이버(n)</a></li>
<li><a href="https://google.com">구글(g)</a></li>
<li><a href="https://daum.net">다음(d)</a></li>
</ul>
<script>
//전역 이벤트 : 어떤 상황에서 행동하든 항상 발생하는 이벤트
window.onkeydown = m2;
function m2() {
// alert(event.keyCode);
if (event.keyCode == 78) {
window.location.href = 'https://naver.com';
} else if (event.keyCode == 71){
window.location.href = 'https://google.com';
} else if (event.keyCode == 68){
window.location.href = 'https://daum.net';
}
}
</script>
</body>화면에서 n, g, d를 누르면 네이버, 구글, 다음으로 접속된다.
🔻history 객체🔻
- 브라우저가 방문한 탐색 기록을 접근한다.
메소드
- back : 이전페이지로 이동
- forword : 다음페이지로 이동
- go(위치) : -1(이전페이지), 1(다음페이지) ...
<body>
<form name="form1">
<input type="button" value="뒤로가기" name="btn1">
<input type="button" value="앞으로가기" name="btn2">
<input type="button" value="뒤로가기(2단계)" name="btn3">
</form>
<script>
window.document.form1.btn1.onclick = m1;
window.document.form1.btn2.onclick = m2;
window.document.form1.btn3.onclick = m3;
function m1() {
//뒤로가기
window.history.back();
}
function m2() {
//앞으로가기
window.history.forward();
}
function m3() {
//뒤로가기(2단계)
//현재페이지 > 네이버 > 구글 > 현재페이지
window.history.go(-2); //네이버로 이동
}
</script>
</body>
'WEB > JavaScript' 카테고리의 다른 글
| image 조작 (0) | 2023.10.06 |
|---|---|
| [JavaScript] collection(내장배열) (0) | 2023.10.06 |
| [Javascript] BOM - window (0) | 2023.10.05 |
| [JavaScript] HTML 속성 조작하기 (0) | 2023.10.05 |
| [JavaScript] Event Handling + 마우스 이벤트 + 키 이벤트 (0) | 2023.10.05 |
