box/javascript+

Javascript 내장 객체 - location

location 객체

  • url 정보를 제어하는 객체이다. 페이지 이동, 새로고침 등 의 기능을 제공한다.

 

location 객체는 웹 브라우저의 주소 표시줄을 제어한다. 주소 표시줄의 현재 주소 혹은 그 일부를 조회할 수 있으며, 변경할 수도 있다. 이때 주소를 변경하게 되면, 웹 브라우저는 페이지를 이동시킨다.

[window.]location.속성 또는 메소드
[window.]location.속성 = "지정값"

 

 

 

⭐ location 객체의 기본 속성

속성 설 명
href 문서의 URL주소(주소 표시줄에 표시되는 URL전체를 의미)
host 주소 표시줄의 URL에서 호스트 이름과 포트 번호를 반환한다
hostname 호스트 이름을 반환한다. 일반적으로 URL에서 도메인을 반환 한다
protocol 프로토콜의 종류를 반환한다. 웹 주소에서 http:를 반환한다
pathname URL에서 경로 부분의 정보를 반환한다
port 포트 번호를 반환한다
hash 앵커이름을 반환한다. URL에 #기호와 함께 표시되는 언어를 의미한다

 

⭐ location 객체의 기본 메서드

메소드 설 명
reload() 현재 문서를 다시 읽도록 만드는 메소드이다
새로 고침 버튼을 누른 효과와 동일하게 처리 할 수 있다
[window.]location.reload()
replace() 현재 문서를 특정 URL에 있는 문서로 바꾸는 메소드이다
[window.]location.replace(“URL”)

 

 

 

⭐location 객체 예시

고객님 인증번호는 57189 

<head>
<script type="text/javascript">							
	function goNaver() {
		if(confirm("정말 네이버로 이동하겠습니까?")){
			location.href="https://www.naver.com/";
			//location.replace("https://www.naver.com/");
		}
	}
	function goPage() {
			location.href="10-event.html";
	}
	function authNo() {
		let value="";
		for(let i=0; i<5; i++){
			value += Math.floor(Math.random()*10);
		}
		document.getElementById("auth").innerHTML=value;
		document.getElementById("auth").style.color="blue"
	}
	function refresh() {
		location.reload();
	}
</script>
</head>
 
<body onload="authNo()">
	<form>
		<input type="button" value="네이버로 이동하기" onclick="goNaver()">
		<input type="button" value="html문서로 이동하기" onclick="goPage()">
	</form>
	
	<p>
		고객님 인증번호는 <strong id="auth">0000</strong>
	</p>
		
	<form>
		<input type="button" value="인증번호 새로 받기" onclick="refresh()">
	</form>
</body>

'box > javascript+' 카테고리의 다른 글

Javascript 내장 객체 - history  (0) 2022.06.30
Javascript 내장 객체 - navigator  (0) 2022.06.30
Javascript 내장 객체 - window  (0) 2022.06.30
Javascript 내장 객체 - Math  (0) 2022.06.30
Javascript 내장 객체 - Date  (0) 2022.06.30

티스토리툴바