본문 바로가기

DEVELOPMENT/클라이언트사이드

10-31, 클라이언트사이드

브라우저객체모델 (Browser Object model)

(window, location, navigator, history, screen,document)

위에 잇는 것은 변수선언 ㄴ

브라우저 기능들을 제공하는 객체틀


window - 브라우저 객체 구조에서 최상위

브라우저의 기본 토대를 제공하는 중요한 객체

생성, 삭제, 수정등을 포함하는 모든 동작의 출발점

var로 선언한 변수들은 모두 windows객체의 속성이 됨

공개된 표준이 적용되는 객체가 아니지만 브라우저마다 모두 제공함


메소드

->alert(msg) 경고창으로 메시지 출력

->prompt(msg, <default msg>) msg를 출력하고 입력 문자열 받기

입력 저장 : let name = prompt("안내드립니다 문자열 입력해주세요");

("안내드립니다 문자열 입력해주세요", "문자열은 빈 칸 없이 입력 하시오")

      alert(`${name}\n입력한 것 맞나요?`); name 입력을 받아 출력한다.

confirm(msg) msg를 출력하고 [확인][취소]선택

      let ans = confirm("위 내용 맞나요");

      alert(ans);

참이면 true, 거짓이면 false로 출력됨

항상 메소드 앞에 window.confirm 이런식으로 해야되지만 window객체는 안적어도 됨



location

window 객체의 속성

현재 URL에 관한 정보들을 제공

공개된 표준이 적용되는 객체가 아니지만 브라우저마다 모두 제공함

속성

href 문서의 URL 주소

    for(let key in location)

    document.write(`[<b>${key}]</b> : ${location[key]}<br>`)

host

pathname

hostname

port


navigator

웹브라우저 정보 제공

windows 객체 제공


history

웹브라우저의 앞으로 가기,뒤로 가기 기능을 담당

windows 객체 제공


Screen

웹브라우저가 아닌 운영체제의 바탕화면의 정보 제공


document->DOM(Browser Object model)



문서 객체 모델

웹 브라우저가 HTML 문서를 인식하고 관리하는 방법

객체 document과 관련된 객체들의 집합

노드들이 트리 형태로 구성됨

요소 노드 (element node)

->객체로 다룰 수 있어 JS로 다양한 처리 가능

텍스트 노드 (text node)


HTML 문서 <=> DOM  [기말고사 문제 출제] - 자료 확인하여 추가 할 것

<html>

<head>

<title></title>

<script>

</script>

<body>

</body>

</html>

-  HTML->브라우저는 DOM으로 해석


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      //alert("지금은 경고창 띄우는 연습중");
      //let name = prompt("안내드립니다\n 문자열 입력해주세요", "문자열은 빈 칸 없이 입력 하시오");
      //alert(`${name}\n입력한 것 맞나요?`);
 
      let ans = confirm("위 내용 맞나요");
      alert(ans);
 
    </script>
  </head>
  <body>
    <h1>브라우저 객체 모델 ( Browser Object Model )</h1>
    <hr>
 
  </body>
  <script type="text/javascript">
    for(let key in screen)
    document.write(`[<b>${key}]</b> : ${screen[key]}<br>`)
  </script>
</html>
 
cs