<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
location 객체
- 페이지 이동 관련 정보를 관리하는 객체(= 페이지 이동 관련 작업 담당)
- window 객체의 하위 객체이므로 window.location 형식으로 접근하지만
보통 window 객체명은 생략하고 location.xxx 형식으로 사용
- 페이지 관련 속성(변수) 및 함수가 제공됨
=> location 객체의 href 속성(변수)이 URL 정보 관리
*/
function func1() {
// URL 정보 확인을 위해 location 객체의 href 속성 확인
alert(location.href);
// => http://localhost:8080/StudyJSP/javascript2/test5.html
// func3() 함수의 새로고침 기능 확인을 위한 배경색 변경
document.body.style.background = "GRAY";
}
function func2() {
// URL 정보 변경을 위해 location 객체의 href 속성값 변경
// => 변경되는 주소로 새로운 요청이 발생함 = 해당 주소로 이동
// location.href = "test4.html"; // test4.html 페이지로 이동
location.href = "http://www.naver.com"; // 네이버 홈페이지로 이동
}
function func3() {
// URL 정보 새로고침을 위해 location 객체의 reload() 함수 호출
// => 주소표시줄의 URL 에 해당하는 페이지를 다시 로딩 = 페이지 새로고침(F5 키)과 동일
location.reload();
}
// target 파라미터를 전달받는 func4() 함수 정의
// => 전달받은 문자를 비교하여 "cart" 일 경우 test5_page_cart.html 페이지로 이동,
// "order" 일 경우 test5_page_order.html 페이지로 이동
function func4(target) {
// if(target == "cart") {
// location.href = "test5_page_cart.html";
// } else if(target == "order") {
// location.href = "test5_page_order.html";
// }
location.href = "test5_page_" + target + ".html"
}
</script>
</head>
<body>
<h1>test5.html</h1>
<input type="button" value="URL 정보 출력" onclick="func1()"><br>
<input type="button" value="URL 정보 변경" onclick="func2()"><br>
<input type="button" value="URL 새로 고침" onclick="func3()"><br>
<hr>
<!-- 복수개의 버튼을 하나의 함수에서 구분하여 서로 다른 페이지로 이동 -->
<!-- 즉시구매 : test5_page_order.html 로 이동, 장바구니 : test5_page_cart.html 로 이동 -->
<!-- 함수 호출 시 파라미터로 특정 값을 문자로 전달할 때 서로 다른 값을 전달하여 판별 -->
<input type="button" value="즉시구매" onclick="func4('order')"><br>
<input type="button" value="장바구니" onclick="func4('cart')"><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>장바구니 페이지</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>즉시구매 페이지</h1>
</body>
</html>
