4. location 객체

location 객체란 ?

---

현재 브라우저 창에 열려있는 문서의 URL에 대한 정보를 얻을 수 있는 객체이다.

 

크롬 개발자도구를 이용해서 테스트 해본다.

 

1) 현재 브라우저의 URL 알아내기

---

console.log는 콤마(,)로 인자값을 더 할 수 있다.

현재 브라우저창에 띄워진 창의 URL 주소를 출력하는 것을 확인할 수 있다.

인자값으로 들어간 location.toString() 과 location.href 둘 다 현재 window의 URL을 알아낼 수 있는 방법이나,

location.href 가 조금 더 선호되는 방식이다.

 

2) location 객체에 대한 정보

---

console.log(location)은 location 이라는 객체에 대한 정보를 보여준다.

location 이라는 객체에 대한 프로퍼티들을 console.log 가 내부적으로 분석하여 객체가 어떻게 구성되어있는지(?)를 나타낸다.

 

3) location 에 대한 alert

---

alert(location), alert(location.toString()), alert(location.href)

이 세가지 모두 URL 주소에 대한 경고창을 띄운다.

 

alert의 인자값은 문자값이어야 하기 때문에 자바스크립트가 location이라는 객체를 문자화 하여 보여준다.

따라서 console.log 와는 다르게 문자화된 결과인 URL 을 출력한다.

 

4) location 정보의 세분화

---

상황에 따라 URL 주소에 대한 정보를 조각조각 쪼갤 필요가 있을 수 있다.

그럴 때 다음과 같은 방법을 이용한다.

location.protocol : 현재 브라우저에 대한 프로토콜이다. 만약 SSL이 적용되어있다면 https: 가 나올 것이다.

location.host : 현재 브라우저의 호스트(도메인이나 IP주소)

location.port : 현재 브라우저의 포트번호. 아무것도 출력되지 않는다면 80 포트를 의미한다.

location.pathname : 현재 브라우저의 웹문서 경로

location.search : 믈음표뒤에 나오는 정보를 나타낸다. 위에서 ?test=1 은 웹서버에 test=1 이라는 값을 전달한다는 의미.

location.hash : 특정 위치에 대해서 #을 이용하여 북마크를 지정한다. 그 북마크에 대한 정보를 나타낸다.

 

5) location.reload(), location.href

---

이건 그냥 단순하다.

 

location.reload() 는 말그대로 현재 URL을 새로고침 하겠다는 뜻이고,

location.href 는 현재 URL을 다른 URL로 이동시키는 것이다.

 

예를들어, location.href = "http://google.com" 이라고 한다면 현재 URL을 구글로 이동시킨다.