| 클라이언트사이드 |
브라우저객체모델 (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 |