[Js] Location 객체 | 문서의 주소 정보 | URL Parsing | 파싱

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

 

---

Location 객체

현재 브라우저의 창에 열려있는 문서의 url을 알려주는 객체이다.

 

Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티다.

이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.

 

 

 

현재 윈도우의 URL 알아내기

 

아래는 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법이다.

console.log(location.toString(), location.href);

위처럼 콘솔로 나타내는 방법이 있고, 경고창에 띄울 수도 있는데, 콘솔로 출력 시 url링크가 하이퍼링크(클릭 시 그 위치로 갈 수 있음)되어 있고 경고창으로 출력하면 링크가 문자취급 되어 문자열로 출력된다.

 

 

URL Parsing

location 객체는 URL을 의미에 따라서 별도의 프로퍼티로 제공하고 있다.

console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)

 

결과

 

 

각 기능에 대한 설명은 생략하므로 아래 영상을 참고하길 바란다.

 

www.youtube.com/watch?v=EBhtT9TGtqY&feature=youtu.be

 

 

간단히 나타내보자면 아래와 같다.

 

 

 

URL 변경하기

 

location 객체는 현재 url을 알려주는 것 뿐 아니라, url을 변경하고 리로드 하는 등의 기능 또한 제공한다.

 

아래 코드는 현재 문서를 이동시킨다.

<script>
    location.href = 'http://haeun.com';
</script>

 

아래와 같은 방법도 같은 효과를 낸다.

<script>
	location = 'http://haeun.com';
</script>

 

아래는 현재 문서를 리로드 하는 간편한 방법을 제공한다.(리로드란 F5를 누른것과 비슷한 역할이라 생각하면 됨)

<script>
    location.reload();
    location.href = location.href // 현재 문서의 url을 현재 문서의 url로 바꾸는 것.
</script>

요