ITWILL : 브라우저객체모델안의 history객체, screen객체, navigator객체

히스토리 객체

사용자가 방문한 기록을 가지고 페이지를 이동.
ex) 페이지 앞으로 가기, 페이지 뒤로 가기.

• history.back(); 뒤로가기
• history.forward(); 앞으로가기
• history.go(+/-) : 양수는 앞으로 그 숫자만큼이동, 음수는 뒤로 그 숫자만큼이동
  • ex)history.go(-2) : 뒤로 두번가기.
  • ex)history.go(-1) : history.back()이랗 같은 역할. 뒤로 한번가기.
  • ex)history.go(screenTop) : 탑으로이동
• history.length; 몇번 왔다갔다했는지 길이로 알려준다.
• 등등

<input type="button" value="뒤로가기" onclick="history.back();">
<input type="button" value="앞으로가기" onclick="history.forward()">
<input type="button" value="탑으로" onclick="history.go(screenTop)">
<input type="button" value="홈으로" onclick="history.go(-1)"> <!-- history.back();같은역할 -->

history.back()차이점

아래 세 코드의 차이점은 무엇일까?

<input type="button" class="btn" value="뒤로가기" onclick="javascript:history.back()">
<input type="button" class="btn" value="뒤로가기" onclick="location.href='history.back()'">
<input type="button" class="btn" value="뒤로가기" onclick="history.back()">

1. javascript:history.back() : 잘 작동한다. js호출. javascript:를 쓴 이유는 명시를 해서 우선순위를 줄 수 있기때문이다.
2. location.href='history.back() : 문법에 어긋나 404 에러가 발생한다. location객체안에 history객체가 없기때문에 에러가 발생한다.
3. history.back() : 잘 작동한다. js호출.

스크린객체

사용자의 모니터 정보/속성을 제공해주는 객체이다.

• screen.width; : 모니터의 가로길이를 알려준다. 반응형웹에 주로 사용함.
• 등등

document.write("<hr>"+screen.width+"<br>");
//출력값 1920

네비게이터객체

현재 방문한 사람의 브라우저 정보, OS정보를 제공해준다.

• navigator.userAgent : 방문자의 브라우저 및 운영체제 정보를 확인할 수 있다.
• navigator.appCodeName : 방문자의 브라우저 코드명 정보
• 등등

document.write(navigator.userAgent)
document.write(navigator.appCodeName+"<br>")
document.write(navigator.appName+"<br>")
document.write(navigator.appVersion+"<br>")
document.write(navigator.language+"<br>")
document.write(navigator.product+"<br>")
document.write(navigator.platform+"<br>")
	
//출력값은
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36Mozilla

Netscape

5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36

ko-KR

Gecko

Win32