48. (javascript/자바스크립트) location 사용해 url , port , host 정보 출력 및 새로운 페이지 링크 이동 (href , replace) 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>
    	/* 
    	[요약 설명]    	
    	1. location : 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다
    	2. location은 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있습니다
    	3. location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있습니다    	
    	*/
    	    	
    	
    	/* 이벤트 함수 정의 */
    	function main() {
    		
    		/* 예시 사이트 */
    		//https://www.testsite.com:8080/page/test.html/#label 
    		
    		    		    		
    		/* location 정보 출력 */    		    		    		
    		var urlData = location.href; // https://www.testsite.com:8080/page/test.html/#label
    		console.log("[url 주소] : " + urlData);
    		
    		var anchorData = location.hash; // #label
    		console.log("[해시 앵커] : " + anchorData);
    		    		
    		var protocolData = location.protocol; // https / file
    		console.log("[프로토콜] : " + protocolData);
    		
    		var portlData = location.port; // 8080 / port 번호가 80인 경우 아무것도 리턴하지 않음
    		console.log("[포트] : " + portlData);
    		    		    		
    		var hostNameData = location.hostname; // www.testsite.com
    		console.log("[호스트 이름] : " + hostNameData);
    		    		    		
    		var filePathData = location.pathname; // page/test.html/#label
    		console.log("[파일 경로 명] : " + filePathData);
    		
    		
    		/* 현재 문서에서 새로운 페이지 이동 */
    		location.href = "https://www.naver.com"; // 새로운 페이지로 이동 (뒤로가기 페이지 가능)
    		location.replace("https://www.naver.com"); // 기존페이지를 새로운 페이지로 변경 (뒤로가기 페이지 없음)			 	
    		
    	};  	    	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. location : 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다

2. location은 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있습니다

3. location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있습니다

*/

/* =========================== */