자바스크립트 location/navigator - 자바스크립트 강좌 3강
※Location 객체
Location 객체는 문서의 주소와 관련된 객체입니다.
이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 습니다.
그리고 문서의 위치와 관련된 다양한 정보를 얻을 수 있죠.
△Location 객체를 이용해 주소 알아보기
예제) 문서의 주소를 가져와 보여주는 예제
<script>
var locationObj = location.toString();
alert(locationObj);
</script>
locationObj라는 변수에 location의 정보를 문자열로 변환하여 저장하였습니다.
그리고 경고 메시지로 출력해보는 예제입니다.
결과) 크롬 브라우저
결과) 익스플로러 브라우저
크롬은 한글 그대로 출력이 되지 않고 변환되어 출력되네요.
익스는 한글 그대로 출력이 되는걸 볼 수 있습니다.
△Location 객체를 이용한 페이지 이동
사용법)
location.href = "이동할 주소";
예제)
<script>
function locationExe(){
location.href = "02.html";
}
</script>
<body>
<div id="wrap">
첫 번째 페이지! <br>
<input type="button" onclick="locationExe()" value="페이지이동">
</div>
</body>
결과)
△Location 객체를 이용한 페이지 새로고침
사용법)
location.reload();
예제)
<script>
function locationReload(){
location.reload();
}
</script>
<body>
<div id="wrap">
<input type="button" onclick="locationReload()" value="새로고침">
</div>
</body>
결과)
데이터베이스의 값을 새로이 로드하는 것이 아니라서 별다른 변화가 없습니다.
직접 테스트를 해보세요.
※Navigator 객체
웹 문서에 접근하는 브라우저의 종류나, 접속 OS 환경, app 버전 등을 알아내는 객체입니다.
Navigator 객체를 이용하여 브라우저별로 발생하는 호환성 관련 오류들을 처리할 수 있는데요.
그 작업을 '크로스브라우징' 이라고 합니다.
△Navigator 객체를 이용하여 정보 가져오기
예제)
<script>
var navObj = navigator.userAgent.toString();
document.write(navObj);
</script>
navObj라는 변수에 navigator를 이용하여 사용자의 정보를 문자열로 변환하고 저장하였습니다.
그리고 document 객체를 이용하여 navObj의 값을 출력하는 예제입니다.
결과) 크롬 브라우저
결과) 익스플로러 브라우저
△Navigator 객체를 이용하여 사용자의 접속환경이 모바일인지 알아보기
예제)
<script>
var browserType = "PC";
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
if (navigator.userAgent.match(mobileKeyWords[word]) != null){
browserType = "MOBILE";
}
}
document.write("당신이 접속한 환경은 " + browserType + "입니다.");
</script>
(1)browserType 이라는 변수에 기본값으로 'PC'를 저장.
(2)mobileKeyWords 이라는 배열변수에 다양한 모바일 OS를 저장.
(3)for 문을 이용하여 word라는 변수와 mobileKeyWords에 저장된 값들을 비교.
(4)mobileKeyWords에 저장된 배열값 중 하나라도 일치하면 browserType에 MOBILE 이라는 값을 저장.
결과) PC 접속
결과) 폰 접속
테스트 주소)
http://kiara77.phps.kr/mobile_test.php
위 주소를 통해 모바일, 혹은 PC로 접속하여 테스트 해보세요.
예제를 올리다 보니 또 다시 새로운 문법들을 사용하게 되었네요.
새로운 문법들에 대한 강좌도 차후에 올리도록 하겠습니다.
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |
|---|---|
| 자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 (1) | 2016.05.03 |
| 자바스크립트 팝업/window - 자바스크립트 강좌 4강 (0) | 2016.04.17 |
| 자바스크립트 윈도우 객체 / 자바스크립트 강좌 2강 alert, confirm, prompt, if~else (2) | 2016.04.09 |
| 자바스크립트 개념 / 기본구성 자바스크립트 강좌 1강 (0) | 2016.04.06 |