[ JavaScript ] 자바스크립트 기본 문법 | Location 객체 | 자바스크립트 url 이동

 

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

 

 

자바스크립트 기본 문법  ::  Location 객체

 

 

 

 

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

 

이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고,

문서의 위치와 관련해서 다양한 정보를 얻을 수 있습니다.

 

 

Location 객체를 이용해서 현재 윈도우의 URL 알아내기

 

 

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

 

 

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

 

 

 

 

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

 

 

 

URL Parsing

 

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

 

 

 

 

 

 

protocol 은 말그대로 어떤 프로토콜을 이용하고 있는지를 나타냅니다.

 

구름은 https 를 사용하네요.

 

 

 

 

 

 

host 는 문서를 제공하는 서버를 의미하고,

 

 

 

 

 

 

port 는 우리가 아는 그 포트번호를 제공하는데, 구름은 웹 기본 포트인 80 을 사용하고 있나봅니다.

출력이 안되네요.

 

 

다른 것들의 결과는 아래 그림과 같이 나옵니다.

 

 

 

 

 

 

 

pathname 은 경로명, search 는 파라미터 명과 파라미터 값. 즉, url 에서 ? 뒤에 오는 값을 출력합니다.

 

hash 는 몰랐는데, 강의를 들어보니까 url 에 #bookmark 와 같은 해시를 붙이고,

 

location.hash 를 출력하면 아래 그림과 같이 나오더라고요.

 

 

 

 

 

 

첫번째 location.hash 는 #bookmark 를 입력하기 전이고,

 

두번째 location.hash 는 #bookmark 를 입력한 후 입니다.

 

 

 

 

 

URL 변경하기

 

 

 

아래의 코드는 현재 문서를 naver 로 이동시킵니다.

 

 

location.href = 'https://www.naver.com/';

 

 

제가 1학년 때 웹페이지 만들기 과제가 있었는데, 저때 아무것도 모르고 이동시킬때

 

location.href 만 주구장창 썼었던 기억이 있네요,,, 

 

 

 

 

아래와 같은 코드도 위의 코드와 동일한 효과를 냅니다.

 

 

 

location = 'https://www.naver.com/';

 

 

 

 

 

 

reload 메소드는 현재 문서를 새로고침하는 방법을 제공합니다.

 

 

location.reload();

 

 

물론, location.href = location.href 도 reload 메소드와 동일한 기능을 하지만,

 

reload 를 사용하면 훨씬 간단하게 코드를 작성할 수 있습니다.