1. navigator 객체
- 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온,오프라인 등의 여러 정보가 담겨 있음
- 렌더링 엔진
-> 웹 브라우저가 점점 다양해짐에 따라 모든 사용자의 웹 브라우저에서 똑같이 동작하는
웹 문서를 개발할 필요성이 생김
-> 아직 표준화되지 않은 css 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix) 지정
-> why? 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진(rendering engine)이 다름
- userAgent 프로퍼티
-> 사용자 에이전트 문자열
-> 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용
- navigator 객체의 주요 프로퍼티
| battery | 배터리의 충전 상태 |
| cookieEnabled | 쿠키 정보를 무시하면 flase, 허용하면 true 반환 |
| geolocation | 모바일 기기를 이용한 위치 정보 |
| language | 브라우저 UI의 언어 정보 |
| oscpu | 현재 운영체제의 정보 |
| userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열 |
2. history 객체
- 브라우저에서 [뒤로]나 [앞으로] 또는 주소표시줄에 입력해서 방문한 사이트 주소가 배열형태로 저장
- 읽기 전용
- 방문한 URL정보가 저장
- history 객체의 프로퍼티와 메서드
| 프로퍼티 | length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장 |
| 메서드 | back() | history 목록에서 이전 페이지를 현재 화면으로 불러옴 |
| forward() | history 목록에서 다음 페이지를 현재 화면으로 불러옴 | |
| go() | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴. history(1) 다음페이지 history(-1) 이전페이지 |
3. location 객체
- 브라우저의 주소 표시줄과 관련
- 현재 문서의 URL 주소 정보가 들어 있음
- 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정
- location 객체의 프로퍼티와 메서드
| 프로퍼티 | hash | URL 중에서 #으로 시작하는 해시 부분의 정보 |
| host | URL의 호스트 이름과 포트 번호 | |
| hostname | URL의 호스트 이름 | |
| href | 전체 URL | |
| pathname | URL 경로 | |
| port | URL의 포트 번호 | |
| protocol | URL의 프로토콜 | |
| password | 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우 passoword의 정보 | |
| serach | URL 중에서 ?로 시작하는 검색내용 | |
| username | 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우 username의 정보 | |
| 메서드 | assign() | 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옴 |
| reload() | 현재 문서를 다시 불러옴 | |
| replace() | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체 | |
| toStirng() | 현재 문서의 URL을 문자열로 반환 |
- 사이트 위치 고정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 위치 고정하기</title>
<style>
#display {
width:400px;
height:150px;
border:1px solid black;
}
button :hover {
background-color:antiquewhite;
}
</style>
</head>
<body>
<h1>location 객체 </h1>
<div id="display">
<script>
document.write("<p><b>location.href:</b>"+location.href+"</p>");
document.write("<p><b>location.host:</b>"+location.host+"</p>");
document.write("<p><b>location.protocol:</b>"+location.protocol+"</p>");
</script>
</div>
<button onclick="location.replace('https://juju-study.tistory.com/')">쥬쥬의 개발일기로 이동하기</button>
</body>
</html>
4. screen 객체
- 사용자의 화면크기나 정보를 알아낼때 사용
- screen 객체의 프로퍼티와 메서드
| 프로퍼티 | availHeight | UI영역을 제외한 영역의 높이 |
| availWidth | UI영역을 제외한 내용 표시 영역의 너비 | |
| colorDepth | 화면에서 픽셀을 렌더링할 떄 사용하는 색상수 | |
| height | UI 영역을 포함한 화면의 높이 | |
| orientation | 화면의 현재 방향 | |
| pixelDepth | 화면에서 픽셀을 렌더링할 떄 사용하는 비트 수 | |
| width | UI 영역을 포함한 화면의 너비 | |
| 메서드 | lockOrientation() | 화면 방향을 잠금 |
| unlockOrientation() | 화면 방향 잠금을 해제 |
- screen 객체로 화면의 너비와 높이 알아내기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen 객체로 화면의 너비와 높이 알아내기</title>
<style>
#display {
width:400px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<h1>Screen 객체 </h1>
<div id="display">
<script>
document.write("<p><b>screen.availWidth:</b>"+screen.availWidth+"</p>");
document.write("<p><b>screen.availHeight:</b>"+screen.availHeight+"</p>");
document.write("<p><b>screen.width:</b>"+screen.width+"</p>");
document.write("<p><b>screen.height:</b>"+screen.height+"</p>");
</script>
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 16장 실습 4 (0) | 2023.04.11 |
|---|---|
| 16장 실습 3 (0) | 2023.04.11 |
| 16장 예제 - 브라우저와 관련된 객체 (1) (0) | 2023.04.11 |
| 16장 실습 2 (0) | 2023.04.11 |
| 16장 실습 (0) | 2023.04.11 |
