본문 바로가기
03. 웹 표준 기술/JavaScript

13. BOM

by moca7 2024. 8. 19.

[ 19일 월 12시 25분 ~ 12시 50분까지 그냥 다 ]

 

 

ㅁ < BOM >

- 브라우저 객체 모델 Browser Object Model

- 브라우저의 구성 요소와 관련된 객체

 

 

 

ㅁ BOM 종류

 

(1) window : 브라우저 화면 자체를 의미 (모든 Java 

(2) history : 방문했던 경로를 기억하고 있는 객체          //   뒤로가기, 앞으로가기를 가능하게 함

(3) location : 경로(URL)를 관리하는 객체                      // 주소창과 연관

(4) screen : 브라우저 화면 정보를 관리하는 객체

 

 

ㅁ 브라우저에도 뒤로 가기, 앞으로 가기가 가능하지만, 

우리가 버튼을 둬서 뒤로가기 앞으로 가기 할 수 있다. 12시 25분쯤 1분.

 

 

 

 

ㅁ history 주요 메소드 

(1) history.back() : 이전 페이지로 이동

(2) history.forward() : 다음 페이지로 이동

(3) history.go(n) : n단계 페이지로 이동

 

 

- 깃에서 확인해야 함.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h2>history</h2>
    <button onclick="console.log(history)">history객체확인</button>
    <!-- 12시 26분 ~ 27분 history객체 설명 놓침. -->

    <!-- 12시 ~ 31분 fontAwesome으로 아이콘 삽입 -->
    <div>
        <button id="back-btn">뒤로가기</button>
        <button id="forward-btn">앞으로가기</button>
    </div>


    <hr>
    <a href="./11_event.html">같은 폴더의 event.html 문서로 가기</a>


    <script>

        document.getElementById('back-btn').addEventListener('click', () => {
            history.go(-1); // 이전 페이지로 이동. history.back();과 동일
        })

        document.getElementById('forward-btn').addEventListener('click', () => {
            history.go(1) ; // 다음 페이지로 이동. history.forward();과 동일
        })


    </script>



   
</body>
</html>
 

 

- fontAwesome 때문에 다시해야함.

 

 

 

 

ㅁ location 객체 주요 속성 및 메소드

(1) location.href                 : 현재 주소창의 url 주소를 가지는 속성

(2) location.assign(url)      : 전달된 url로 페이지 이동 (뒤로가기 가능)

(3) location.replace(url)     : 전달된 url로 페이지 이동 (뒤로가기 불가능)

(4) location.reload()           : 현재 페이지 새로고침

 

 

 

 

 

---

자바스크립트 수업끝

 

ㅁ 자바스크립트를 기반으로 해서 코드를 좀 더 편리한게 하는 제이쿼리가 남았다.

ㅁ 스크립트 코드를 HTML 문서가 아닌 외부 문서에 정리할 때도 있다. 너무 길어져서.

외부 문서에 작성해두고 연결해서 쓸 수도 있다. js파일.

html문서에는 요소 작업만. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글

[자바스크립트] 14. Data 속성 (Data Attribute)  (0) 2024.08.20
12. 정규 표현식  (0) 2024.08.19
[자바스크립트] 복습2  (0) 2024.08.16
[자바스크립트] 실습문제4 - 함수, 객체 실습문제  (0) 2024.08.14
[자바스크립트] 11. event + 정규표현식 맛보기  (0) 2024.08.14

관련글

티스토리툴바