Javascript

[Javascript]

sian han 2022. 4. 25. 21:16

 

 

▶ 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 입니다