1. 브라우저 관련 객체의 계층 구조
| no | 종류 | 설명 |
| 1 | window | 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있습니다. |
| 2 | document | 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨 있습니다. |
| 3 | navigator | 현재 사용하는 브라우저의 정보가 들어 있습니다. |
| 4 | history | 현재 창에서 사용자의 방문 기록을 저장합니다. |
| 5 | location | 현재 페이지의 URL 정보가 담겨 있습니다. |
| 6 | screen | 현재 사용하는 화면 정보를 다룹니다. |
2. window
◎ window 객체의 프로퍼티
▷ 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용합니다.
| No | 종류 | 설명 |
| 1 | document | 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다. |
| 2 | frameElement | 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환합니다. |
| 3 | innerHeight | 내용 영역의 높이를 나타냅니다. |
| 4 | innerWidth | 내용 영역의 너비를 나타냅니다. |
| 5 | localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환합니다. |
| 6 | location | window 객체의 위치 또는 현재 URL을 나타냅니다. |
| 7 | name | 브라우저 창의 이름을 가져오거나 수정합니다. |
| 8 | outerHeight | 브라우저 창의 바깥 높이를 나타냅니다. |
| 9 | outerWidth | 브라우저 창의 바깥 너비를 나타냅니다. |
| 10 | pageXOffset | 스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같습니다. |
| 11 | pageYOffset | 스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같습니다. |
| 12 | parent | 현재 차이나 서브 프레임의 부모입니다. |
| 13 | screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다. |
| 14 | screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냅니다. |
| 15 | scrollX | 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냅니다. |
| 16 | scrollY | 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냅니다. |
| 17 | sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환합니다. |
둘 다 캐시의 역할이지만 sessionStorage(임시 저장 공간), localStorage(영구 저장 공간)입니다.
◎ cache 캐시 : 캐시의 영어 뜻은 '은닉처'이고 내용 용량이 좀 큰 파일을 임시 저장하는 역할입니다.
브라우저에서 서버로 파일을 임시 저장합니다.(브라우저 → 서버)
캐시는 용량이 좀 작습니다. (한 파일당 4k), 로컬 스토리지는 캐시와 같은 역할이지만 5MB까지 저장 가능합니다.
캐시사용자가 빠르게 홈페이지가 열리게 할 수 있고 브라우저마다 가지고 있습니다.
아직 캐시에 대해 정확하게 이해하지는 못했기 때문에 다음에 제대로 이해한 후 다뤄보겠습니다!
◎ window 객체의 메서드
| NO | 종류 | 설명 |
| 1 | alert() | 알림 창을 표시합니다. |
| 2 | blur() | 현재 창에서 포커스를 제거합니다. |
| 3 | close() | 현재 창을 닫습니다. |
| 4 | confirm() | [확인], [취소] 버튼이 있는 확인 창을 표시합니다. |
| 5 | focus() | 현재 창에 포커스를 부여합니다. |
| 6 | moveBy() | 현재 창을 지정한 크기만큼 이동합니다. |
| 7 | moveTo() | 현재 창을 지정한 좌표로 이동합니다. |
| 8 | open() | 새로운 창을 엽니다. |
| 9 | postMessage() | 메세지를 다른 창으로 전달합니다. |
| 10 | print() | 현재 문서를 인쇄합니다. |
| 11 | prompt() | 프롬프트 창에 입력한 텍스트를 반환합니다. |
| 12 | resizeBy() | 지정한 크기만큼 현재 창의 크기를 조절합니다. |
| 13 | resizeTo() | 동적으로 브라우저 창의 크기를 조절합니다. |
| 14 | scroll() | 문서에서 특정 위치로 스크롤합니다. |
| 15 | scrollBy() | 지정한 크기만큼씩 스크롤합니다. |
| 16 | scrollTo() | 지정한 위치까지 스크롤합니다. |
| 17 | sizeToContent() | 내용에 맞게 창의 크기를 맞춥니다. |
| 18 | stop() | 로딩을 중지합니다. |
◎ 새로운 브라우저 창을 여는 open() 메서드
▷ 링크를 클릭하거나 웹 문서를 열때 새 창이 자동(팝업창)으로 뜨게하려면 window.open() 메서드를 사용
▷ 새 브라우저에서 창열기 : window.open(경로, 창 이름, 창 옵션)
▷ 경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소) 나타냅니다.
▷ 창 이름 : 팝업 창의 이름을 지정하면 이 창에 팝업 내용이 나타나도록 할 수 있습니다.
이름을 지정하지 않으면 팝업창이 계속 새로 나타납니다.
▷ 창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있습니다.
위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타납니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>문서를 열면 팝업 창이 표시됩니다.</p>
<script>
window.open("notice.html", "", "width = 500, height = 400");
</script>
</body>
</html>
아래와 같은 팝업창이 형성되고 새로고침을 하면 이름을 지정하지 않았기 때문에 계속해서 팝업창이 중복으로 나타납니다. 만약 window.open에서 이름을 지정해 준다면 중복으로 생성되지 않습니다.
ex) window.open("notice.html", "pop", "width = 500, height = 400")
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload = "openPopup()">
<p>문서를 열면 팝업 창이 표시됩니다.</p>
<script>
var blocked = false;
function openPopup(){
var newWin = window.open("notice.html", "pop", "width = 500, height = 400");
if(newWin == null){
alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.");
}
newWin.moveBy(100, 100);
}
</script>
</body>
</html>
위의 코드는 팝업이 차단되어 있으면 차단되어 있다는 창이 나타나게 합니다.
3. navigator
▷ 사용하는 브라우저가 많아지고, 웹 애플리케이션이 등장하면서
navigator 객체에 여러 프로퍼티가 등장하고 있습니다.
▷ 일부 브라우저에서만 지원하는 프로퍼티도 있습니다.
◎ 주요 프로퍼티
▷ navigator 프로퍼티는 https://developer.mozilla.org/en-US/docs/Web/API/Navigator
위의 주소로 접속하시면 됩니다.
| No | 종류 | 설명 |
| 1 | battery | 배터리 충전 상태를 알려줍니다. |
| 2 | cookieEnabled | 쿠기 정보를 무시하면 false, 허용하면 true를 반환합니다. |
| 3 | geolocation | 모바일 기기를 이용한 위치 정보를 나타냅니다. |
| 4 | language | 브라우저 UI의 언어 정보를 나타냅니다. |
| 5 | oscpu | 현재 운영체제 정보를 나타냅니다. |
| 6 | userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열입니다. |
4. history 객체 : 방문한 사이트 주소가 배열 형태로 저장됩니다.
◎ 프로퍼티와 메서드
| No | 구분 | 설명 | |
| 1 | 프로퍼티 | length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장됩니다. |
| 2 | 메서드 | back() | history 목록에서 이전 페이지를 현재 화면으로 불러옵니다. |
| 3 | forward() | history 목록에서 다음 페이지를 현재 화면으로 불러옵니다. | |
| 4 | go() | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옵니다. 예를 들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러옵니다. | |
4. location 객체
▷ 현재 문서의 URL 주소 정보가 담겨 있음
▷ 이 정보를 편집해서 브라우저 창에 열 사이트/문서 지정
◎ 프로퍼티와 메서드
| No | 구분 | 설명 | |
| 1 | 프로퍼티 | hash | URL 중에서 #로 시작하는 해시 부분의 정보를 담고 있습니다. |
| 2 | host | URL의 호스트 이름과 포트 번호를 담고 있습니다. | |
| 3 | hostname | URL의 호스트이름이 저장됩니다. | |
| 4 | href | 전체 URL입니다. 이 값을 변경하면 해당 주소로 이동할 수 있습니다. | |
| 5 | pathname | URL 경로가 저장됩니다. | |
| 6 | port | URL의 포트 번호를 담고 있습니다. | |
| 7 | protocol | URL의 프로토콜을 저장합니다. | |
| 8 | password | 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장합니다. | |
| 9 | search | URL 중에서 ?로 시작하는 검색 내용을 저장합니다. | |
| 10 | username | 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장합니다. | |
| 11 | 메서드 | assign() | 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옵니다. |
| 12 | reload() | 현재 문서를 다시 불러옵니다. | |
| 13 | replace() | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체합니다. | |
| 14 | toString() | 현재 문서의 URL을 문자열로 반환합니다. | |
최근 : https://www.naver.com:443
s(security) : 보안
최근 보안이 강해졌기 때문에 https를 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location Object</title>
<style>
#container {
width:500px;
margin:10px auto;
}
#display {
margin-top:10px;
padding:10px;
border:1px solid #222;
box-shadow: 1px 0 1px #ccc;
}
p {
font-size:1em;
}
button {
margin-top:20px;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<h2>location 객체 </h2>
<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>");
document.write("<p><b>location.hostname : </b>" + location.hostname + "</p>");
</script>
</div>
<button onclick="location.replace('http://www.easyspub.com')">이지스퍼블리싱 홈페이지로 이동하기</button>
</div>
</body>
</html>
location을 이용한 출력입니다. 현재 주소와 관련된 정보들을 출력합니다.
브라우저 관련 객체들은 HTML 코드끼리 연결할 수 있도록 해줍니다. 이런 것들을 잘 이용하면 현재 일상생활에서 이용되고 있는 홈페이지나 웹페이지 상의 연결 방법들에 대해 더 잘 이해할 수 있을 것 같네요!!
저는 나중에 홈페이지 하나를 혼자서 만들어 보고싶어요! 열심히 실력을 길러볼게요~!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'FrontEnd > java script' 카테고리의 다른 글
| [java script] addEventListener의 이벤트 종류 (0) | 2022.12.19 |
|---|---|
| [java script] 문서 객체 모델(DOM) (0) | 2022.12.19 |
| [java script] 객체 2(내장 객체 Date, Math) (0) | 2022.12.17 |
| [java script] 객체 1(object, 내장 객체 Array) (0) | 2022.12.16 |
| [java script] 자바 스크립트 함수 2(function) (0) | 2022.12.16 |
