[Javascript] screen, location, history, navigator 객체와 속성 (+메서드)

📝 JavaScript

 

✅ 1. screen 객체

screen 객체는 사용자의 모니터 정보(속성)을 제공하는 객체입니다. 예를 들어 모니터의 너비나 높이 또는 컬러 표현 bit을 반환합니다. 
 

1-1. 기본형

screen.속성;

screen.width; //모니터의 너빗값 반환

 

1-2. screen 객체 의 속성 종류

종류	설명
screen.width	화면의 너비값 반환
screen.height	화면의 높이값 반환
screen.availWidth	(작업 표시줄을 제외한) 화면의 너비값 반환
screen.availHeight	(작업 표시줄을 제외한) 화면의 높이값 반환
screen.colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환

 

---

 

✅ 2. location 객체

location 객체는 사용자 브라우저와 관련된 속성과 메서드를 제공해요. 특히 현재 URL에 대한 정보(속성)와 새로 고침(reload) 메서드를 제공합니다.

2-1. 기본형

location.속성;

location.메서드();

// 사용자 브라우저의 URL 경로 값 가져오기
location.href;

// 사용자 브라우저의 URL경로를 지정한 URL 주소(http://www.google.com)로 변경
location.href= "http://www.google.com"

// 사용자 브라우저를 새로 고침
location.reload();

 

1-2. screen 객체 의 속성 종류

종류	설명
location.href	주소 영역의 참조 주소를 설정하거나 URL을 반환
location.hash	URL의 해시값(#에 명시된 값) 반환
location.hostname	URL의 호스트 이름을 설정하거나 반환
location.host	URL의 호스트 이름과 포트 번호 반환
location.protocol	URL의 프로토콜을 반환
location.search	URL의 쿼리(요청값) 반환
location.reload()	마치 브라우저에서 F5키를 누른 것처럼 새로고침

 

location.href

현재 문서의 URL을 반환

현재 페이지의 URL이 "https://www.example.com/page.html"인 경우:

console.log(location.href); // "https://www.example.com/page.html"

 
location.hash
해시는 URL의 끝 부분에 # 기호와 함께 나타나며, 주로 웹 페이지 내에서 특정 섹션을 식별하는 데 사용됨.
예를 들어, URL이 "https://www.example.com/page.html#section1"인 경우:

console.log(location.hash); // "#section1"

 
location.hostname
현재 페이지의 호스트(도메인) 이름 반환
예를 들어, URL이 "https://www.example.com/page.html#section1"인 경우:

console.log(location.hostname); // "www.example.com"

 
location.host
현재 URL의 호스트(도메인) 이름과 포트 번호를 포함하는 문자열을 반환
예를 들어, URL이 "https://www.example.com:8080/page.html"인 경우:

console.log(location.host); // "www.example.com:8080"

 
location.protocol
프로토콜은 웹 페이지에 사용된 통신 프로토콜을 반환
예를 들어, URL이 "https://www.example.com/page.html"인 경우:

console.log(location.protocol); // "https:"

 
location.search
현재 URL의 쿼리 문자열 반환
쿼리 문자열은 URL의 물음표(?) 뒷부분으로, 주로 웹 페이지에 전달되는 매개변수와 값의 쌍을 포함
예를 들어, URL이 "https://www.example.com/page.html?name=John&age=30"인 경우:

console.log(location.search); // "?name=John&age=30"

 

---

✅ 3. history 객체

history 객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문사이트로 다시 돌아갈 수 잇는 속성과 메서드를 제공해요

 

3-1. 기본형

history.속성;
history.메서드();
history.메서드(n);

// 사용자가 방문한 사이트의 기록을 남긴 총 수량
history.length;

// 사용자가 방문한 사이트 중 바로 이전에 방문한 사이트로 이동
history.back();

// 사용자가 방문한 사이트 중 두 단계 이전에 방문한 사이트로 이동
history.back(2);

 

3-2. history 객체 의 속성 종류

종류	설명
history.back()	이전 방문 사이트로 이동
history.forward()	다음 방문사이트로 이동
history.go(이동 숫자)	이동 숫자에 -2를 기입하면 2단계 이전의 방문 사이트로 이동
history.length	방문 기록에 저장된 목록의 개수를 반환

 

---

 

✅ 4. navigator 객체

현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체입니다.

4-1. 기본형

navigator.속성;
아래는 크롬(Chrome) 브라우저에서 테스트한 결과

// 방문자의 브라우저와 운영체제(Operating System) 정보를 제공합니다.
// ex) navigator.userAgent;

"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/60.0.3112.113 Safari/537.36"

 
- Mozilla/5.0 기본플랫폼
- (Windows NT 6.1; Win64; x64) 운영체제 정보
- AppleWebKit/537.36 (KHTML, like Gecko) 사용중인 브라우저의 엔진 이름
- Chrome/60.0.3112.113 사용 중인 브라우저의 이름
- Safari/537.36 같은 엔진을 사용중이며 호환 가능한 다른 브라우저
 

4-2. navigator 객체 의 속성 종류

종류	설명
navigator.appCodeName	현재 브라우저의 코드명 반환 예) "Mozilla" 반환
navigator.appName	현재 브라우저의 이름 반환 예) "Netscape" 반환
navigator.appVersion	현재 브라우저의 버전 정보 반환 예) 5.0(Windows) 반환
navigator.language	현재 브라우저가 사용하고 있는 언어 반환 예) 한국어를 사용중이면 "ko"반환
navigator.product	현재 브라우저의 엔진 이름 반환 예) Chrome의 경우 "Gecko" 반환
navigator.platform	현재 컴퓨터의 운영체제 정보 제공  운영체제가 윈도우이고 시스템 종류가 64비트(bit)라도 브라우저가 32비트로 설치되었다면 "Win32" 반환
navigator.onLine	온라인 상태 여부에 대한 정보 제공 만일 인터넷이 정상적으로 연결되어 있는 상태라면 true 값 반환
navigator.userAgent	브라우저와 운영체제의 종합 정보 제공

---

 

브라우저 객체 모델을 사용해서 운영체제 및 스크린 정보 얻기!

<script>
    var info = navigator.userAgent.toLowerCase();
    var osImg = null;

    if(info.indexOf('windows') >= 0 ) {
        osImg = "windows.png";
    } else if(info.indexOf('macintosh') >= 0 ) {
        osImg = "macintosh.png";
    } else if(info.indexOf('iphone') >= 0 ) {
        osImg = "iphone.png";
    } else if(info.indexOf('android') >= 0 ) {
        osImg = "android.png";
    }

    document.write("<img src=\"images/" + osImg + "\">", "<br>");
    var scr = screen;
    var sc_w = scr.width;
    var sc_h = sc.height;

    document.write("모니터 해상도 너비: " + sc.w + "px","<br>");
    document.write("모니터 해상도 높이: " + sc.h + "px","<br>");
</script>