<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script>
function proc1(){
str = "protocol : " + location.protocol + "<br>"
str += "hostname : " + location.hostname + "<br>"
str += "post : " + location.post + "<br>"
str += "host(hostname + post) : " + location.host + "<br>"
str += "pathname : " + location.pathname + "<br>"
str += "href : "+ location.href + "<br>" //전체 정보 얻어오기
document.querySelector('#result1').innerHTML = str;
}
function proc2(){
//window.open("test.jsp")
//location.href = "windowsub.html";
location.href = "test.jsp";
}
function proc3(){
document.myform.action = "testPost.jsp";
document.myform.method = "post";
document.myform.submit();
}
function proc4(page){
location.replace(page); //페이지가 바뀌어서 뒤로 가지 못함
}
function proc5(){
arr = ["Hello", "Christmas", "happy", "JAVA", "Good", "JavaScript"]
rand = parseInt(Math.random() * arr.length);
str = "<h1>" + arr[rand] + "</h1>";
document.querySelector('#result5').innerHTML = str;
document.querySelector('#result5').style.color = "red";
result = document.querySelector('#result5');
result.innerHTML = str;
result.style.color = "red";
setTimeout(function(){
location.reload();
}, 1000)//1초 후에 다시 돌아옴
}
</script>
</head>
<body>
<div class = "box">
location객체 : URL 정보 얻기
<br>
<button type = "button" onclick="proc1()">확인</button>
<div id = "result1"></div>
</div>
<div class = "box">
location객체 : URL 정보 얻기
<br>
자동으로 특정 페이지 이동 할때 사용
<button type = "button" onclick="proc2()">확인</button>
<br>
a태그 이용 - script의 함수 호출 후 location.href이용
<a href ="javascript:proc2()">공지사항 목록</a>
<br></br>
get-----------------------------<br>
<input type="button" onclick="location.href='test.jsp?name=asdf'">get이동<br>
<br>
post----------------------------<br>
<form name="myform">
<input type="hidden" id="" name="korea" value="코리아">
<input type="button" onclick="proc3()">
</form>
</div>
<div class = "box">
location.replace(url) <br>
현재 화면을 새로운 화면으로 대체 <br>
이전 화면으로 돌아갈 수 없다 <br>
<br>
새로운 문서로 대체한다
<button type = "button" onclick="proc4('test.jsp')">공지사항목록</button>
</div>
<div class = "box">
location.reload()<br>
현재 문서를 재호출 한다<br>
result5에 랜덤으로 발생하는 문자를 출력 하고<br>
1분후에 원래페이지를 재호출 한다<br>
<br>
<button type = "button" onclick="proc5()">페이지재호출</button>
<div id = "result5"></div>
</div>
</body>
</html>
신입 개발자 입니다!!!