Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체

Romantic_Developer 2018. 7. 28. 17:00

안녕하세요, 영감을 주는 개발자 방민방민입니다.


오늘은 자바스크립트에서의 Location 객체에 대하여 알아보고자 합니다.


Location 객체를 활용하면, 윈도우의 문서 URL 을 변경할 수도 있고, 그 위치와 관련된 다양한 정보를 얻을 수 있습니다. 그럼 바로 실습을 시작해 보도록 하겠습니다:)


1. 현재 문서의 URL 


현재 문서의 URL 은 location 객체를 통해 접근이 가능합니다.

<!DOCTYPE html>
<html>
	<body>
		
		<script>
			alert(location);
			alert(location.href);
		</script>
	</body>
</html>

location은 alert 창에서는 자연스럽게 string 으로 변환되기 때문에 위의 코드는 location.string 과 같은 내용이라고 생각하시면 됩니다. 이는 아래의 결과를 출력합니다.


href 도 같은결과를 출력합니다.


실질적으로 location 은 많은 속성(프로퍼티) 들을 포함하고 있습니다. 아래는 location 의 콘솔 실행 결과입니다. 그중 원래는 href 를 출력하는것이 정확한 표현이지만 alert 를 사용하는 경우에는 location 만 입력하더라도 문서 URL 을 출력하고 있습니다.



로케이션 각각의 프로퍼티 URL 주소의 다른 값을 나타냅니다.

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

그림으로 나타내면 아래와 같습니다.(출처 : 생활코딩)


protocol : http 위치의 값이 알고싶을때

host : 실제 식별 주소

port : 서버 컴퓨터의 애플리케이션 포트 번호

pathname: 서버 애플리케이션의 특정 정보

search : 애플리케이션에 전달한 값

hash : 애플리케이션의 특정한 구간 위치 식별값


즉, 이와같이 location 을 통해서, 구간별로 쪼개서 받아올 수 있다는 것입니다.


2. 주소 이동


다른 URL 로 상황에 따라 이동할 때에도 location 객체를 사용할 수 있습니다.

location.href = 'URL';//다른 주소로 이동시킴
location = 'URL';//다른 주소로 이동시킴
location.reload();//리 로드함



이렇게 오늘은 location 객체를 이용한 주소 이동 및 주소 값 받아오기에 대하여 알아보았습니다.


지금까지 영감을 주는 개발자 방민방민이었습니다!

저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 BOM (4) 창제어  (0) 2018.07.29
(Web JavaScript) 웹 자바스크립트 BOM (3) Navigator 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (1) 유저 커뮤니케이션  (0) 2018.07.27
(Web JavaScript) 웹 자바스크립트 (2) 오브젝트 모델  (0) 2018.07.26
(Web JavaScript) 웹 자바스크립트 (1) 웹에서의 자바스크립트  (0) 2018.07.25
'Romantic Developer/Web JavaScript' Related Articles more