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 객체 예시
고객님 인증번호는 0000
<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 |