▶ Location 객체
- 브라우저의 주소 표시줄과 관련된 객체
- 현재 브라우저의 윈도우에 열려진 html 문서의 주소를 포함한 URL에 관련된 각종 정보를 제공하는 객체로서
주소 관련 정보는 물론 특정 사이 트에 접속하는 경우에도 사용됨
- 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보가 있음
<SCRIPT type="text/javascript">
document.write("<H3>")
document.write("URL : " + location.href); // 문서의 URL 주소
document.write("Host Name And Port Number : " + location.host); // 호스트이름 , 포트번호
document.write("Host Name : " + location.hostname); // 호스트이름
document.write("Protocol : " + location.protocol); // 프로토콜종류 : http:
document.write("Port Number : " + location.port); // 포트번호
document.write("Directory : " + location.pathname); // 디렉토리경로
document.write("Hash : " + location.hash); // 앵커이름(#~)
document.write("</H3>")
</SCRIPT>
· location.href()
- 문서의 URL주소를 알려주거나 특정 사이트에 접속하는 등의 기능을 가지고 있는 속성
//Javascript
function loadURL(){ // 선택된 index의 value의 URL 로 이동
location.href
=document.frm1.site.options[document.frm1.site.selectedIndex].value;
console.log("index="+document.frm1.site.selectedIndex);
}<FORM name="frm1">
<SELECT NAME="site">
<OPTION VALUE="http://www.google.co.kr">구글 홈페이지
<OPTION VALUE="http://www.naver.com" selected>네이버 홈페이지
<OPTION VALUE="http://www.daum.net">다음 홈페이지
</SELECT> // Value에 URL 넣어서 콤보박스생성
<input type="button" VALUE="접속" onClick="loadURL()"> // 위에 만들어둔 메서드 실행시킬 버튼생성
</FORM>
· location.reload();
· location.replace();
▶ history 객체
- 현재 윈도우에서 사용자가 가장 최근에 방문했던 사이트 들의 URL목록, 즉 히스토리를 관리하는 객체
back() : 현재 페이지의 이전 페이지로 이동함, history.go(-1)과 동일
go() : 히스토리 목록 내의 임의의 페이지로 이동함, 양수값: 현재 문서의 다음 문서로 이동, 음수이면 이전 문서로 이동
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h3>첫번째 페이지</h3>
<a href="b.html">두번째로</a>
<a href="c.html">세번째로</a>
<a href="d.html">네번째로</a><br>
<input type="button" value="세번째 페이지로" onclick="pageMove()">
<hr>
<input type="button" value="전전페이지" onclick="history.go(-2)"> //전전으로 이동
<input type="button" value="이전페이지" onclick="history.back()">
<input type="button" value="다음페이지" onclick="history.forward()">
<input type="button" value="다다음페이지" onclick="history.go(2)">
<script>
function pageMove(){
location.href="c.html";
}
</script>
</body>
</html>
※ innerHTML 속성
- HTML 요소의 innerHTML 속성에 HTML 코드 지정하기
- innerHTML 속성에 원하는 HTML 코드만 값으로 주면 해당 내용이 변경됨
오늘 날짜는 <div id="info"></div> 입니다.
<script type="text/javascript">
var divinfo = document.getElementById('info');
divinfo.innerHTML = "<b>2013-10-21</b>";
</script>= > 오늘날짜는 2013 - 10 - 21 입니다
'Javascript' 카테고리의 다른 글
| [Javascript] Symbol / 배열메소드 / 문자열메소드 (1) | 2022.12.03 |
|---|---|
| [Javascript] 객체 메소드 / computed property (1) | 2022.12.03 |
| [Javascript] ES6 / 익명함수 / 가변인자 함수 / 콜백함수 / 클로저 함수 (0) | 2022.06.22 |
| [Javascript] DOM / 객체 / 함수 / 메서드 (0) | 2022.04.25 |
| [Javascript] 자바스크립트란 / 변수 / 배열 / 조건문 / 반복문 / this (0) | 2022.04.25 |