<body>
<h2>location & history & navigator & screen객체</h2>
<fieldset>
<legend>객체의 함수 혹은 속성 테스트</legend>
아이디 <input type="text" id="user" />
비밀번호 <input type="password" id="pass" />
<input type="button" value="로그인" onclick="fnLogin()" />
<input type="button" value="새로고침" onclick="location.reload();" />
<input type="button" value="history테스트" onclick="location.href='BOM10_1.html'" />
<input type="button" value="다음 페이지" onclick='history.go(1)' />
<input type="button" value="이전 페이지" onclick='history.back()' />
<input type="button" value="웹브라우저 종류" onclick="console.log(navigator.userAgent);" />
</fieldset>
<hr />
<span></span>
<script>
var span = document.querySelector('span');
window.onresize = function () {
console.log('브라우저의 크기 리사이징 발생');
console.log('브라우저화면의 가로폭:%spx,세로폭:%spx', window.innerWidth, window.innerHeight);
};
//이전 페이지 URL얻기:document.referrer
//단.history객체의 함수나 속성으로 페이지 이동시
//document.referrer는 빈 문자열
console.log('이전 페이지 URL:', document.referrer);
</script>
</body>
▲현재 body상태
<script>
console.log(location); // ▶Location
console.log(location.href);//http://시스템주소:포트번호/JavaScript_ES5/BOM10_2.html
console.log(location.protocol);//http
console.log(location.port);//포트번호
console.log(location.hostname);//시스템주소
//location.href="https://www.nate.com";//사용자 이벤트에 의하지 않고 자동으로 이동 - 뒤로가기 활성화(히스토리 있는 경우)
//location.replace("https://www.nate.com");//사용자 이벤트에 의하지 않고 자동으로 이동 - 뒤로가기 비활성화
//location.reload();//새로 고침▲BOM중에 location이라는 객체에 존재하는 다양한 함수들과 그 기능들
function fnLogin() {
//가정]아이디가 "KIM"이고 비번이 "1234"인 경우 회원이라고 가정하자
//회원이면 마이페이지(DOM9_4.html)로 자동으로 이동시키고
//회원이 아니면 회원가입 페이지(DOM9_5.html)로 자동 이동 시키자.
var username = document.querySelector('#user').value;
var password = document.querySelector('#pass').value;
if (username === 'KIM' && password === '1234') {
//location.href='DOM09_4.html';
//replace()함수로 페이지 이동시 뒤로가기가 비활성화 됨.
location.replace('DOM09_4.html');
}
else {
//location.href='DOM09_5.html';
location.replace('DOM09_5.html');
}
}///▲아이디 input에 아이디를, 비밀번호 input란에 비밀번호를 입력하고 로그인버튼을 눌렀을 때 아이디와 비밀번호가 일치하면 마이페이지로 자동이동, 틀리면 회원가입 페이지로 자동이동시키는 기능을 위한 코드
console.log(history);//BOM의 history객체
console.log(navigator);//BOM의 navigator 객체
console.log(screen);//BOM의 screen객체
console.log(screen.availWidth);//모니터 가로 해상도
console.log(screen.width);//모니터 가로 해상도
console.log(screen.availHeight);//모니터 세로 해상도(트레이바 제외)
console.log(screen.height);//모니터 세로 해상도(트레이바 포함));
//아래는 브라우저의 body내용이 뿌려지는 영역의 가로/세로 크기
console.log(window.innerWidth);
console.log(window.innerHeight);
'JavaScript > Javascript_Advanced' 카테고리의 다른 글
| [JS]Date 객체 (0) | 2022.04.19 |
|---|---|
| [JS]String 객체 (0) | 2022.04.19 |
| [JS]BOM(Browser Object Model) part.1 (0) | 2022.04.15 |
| [JS]DOM(Document Object Model) part.3 (0) | 2022.04.15 |
| [JS]DOM(Document Object Model) part.2 (0) | 2022.04.14 |