Daily coding
JavaScript : 자바스크립트에서 페이지 이동 및 페이지 관련 메소드 본문
1. html에서 Anchor 태그 이용
* a : 페이지주소.html?데이터아이디=데이터&데이터아이디2=데이터2 (url으로 넘어감)
- 페이지 주소로 넘어갈 때, 데이터를 넘겨줌 (모두 String)
ex> a href="NewFile.jsp?name=홍길동&age=24
2. html에서 form의 input 태그 이용하기 ( type: submit )
2. 자바스크립트에서 location.href 이용하기
ex > location.href = "index3.html";
// form 에서는 페이지 이동 전에 데이터가 들어있는지 확인이 번거롭다.
// 입력받은 데이터를 확인 후, 그 데이터를 가지고 링크를 이동하기 위해서는
// 자바스크립트에서 먼저 데이터 확인을 거친 후 직접 보내주는 것이 좋다.
** java script에서 배경색 바꾸기
- 스크립트 태그안쪽에 document.bgColor 이용해서 색상코드 입력해주기
* 페이지와 관련된 함수
: 버튼을 만들어 클릭 시(onclick) 다양한 페이지로 이동할 수 있도록 만든 함수
history.back() : 이전 페이지로 돌아가는 함수
location.reload() : 현재 페이지를 refresh
history.forward() : 페이지 앞으로 가기 (갔던 페이지 없을 경우 변화 없음)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
* 링크로 이동가능한 태그
<a href="링크">
<form> ==> submit
* 자바스크립트에서 링크 이동하기
-->
<h1>여기는 index1.html입니다.</h1>
<a href="index2.html">index2.html로 이동</a>
<script type="text/javascript">
// 자바스크립트에서 배경 컬러바꾸기
document.bgColor = "#ff0000";
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#00ff00">
<h2>여기는 index2.html입니다.</h2>
<!-- history.back() : 이전 페이지로 돌아가는 함수 -->
<input type="button" value="이전으로 돌아가기" onclick="history.back()">
<!-- location.reload() : 현재 페이지를 refresh -->
<input type="button" value="현재 페이지를 갱신" onclick="location.reload()">
<!-- history.forward() : 페이지 앞으로 가기(갔던 페이지 없을 경우 변화없음) -->
<input type="button" value="진행" onclick="history.forward()">
<button type="button" onclick="gopage()">index3.html로 이동</button>
<script type="text/javascript">
function gopage() {
// 자바스크립트로 링크 이동하기 : location.href
location.href = "index3.html";
// form에서는 페이지 이동 전에 데이터가 들어있는지 확인이 번거롭다.
// 데이터를 확인하고 그 데이터를 가지고 링크를 이동하기 위해서는
// 자바스크립트에서 데이터 확인을 거치고 직접 보내주는 것이 좋다
}
</script>
</body>
</html>
< a 태그로 연결된 페이지에 데이터 넘겨주기 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- a : 페이지주소.html?데이터아이디=데이터&데이터아이디2=데이터2 (url으로 넘어감) -->
<a href="NewFile.jsp?name=홍길동&age=24">NewFile.jsp로 이동</a>
<!-- form -->
<form action="NewFile.jsp">
이름: <input type="text" name="name">
<br>
나이: <input type="text" name="age">
<br>
<input type="submit" value="이동">
</form>
<!-- java script -->
이름: <input type="text" id="name">
<br>
나이: <input type="text" age="age">
<br>
<button type="button" onclick="func()">이동</button>
<script type="text/javascript">
function func() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
if(name== "")
alert("이름을 기입해 주십시오.");
else{
location.href= "NewFile.jsp?name="+name+"&age="+age";
}
}
</script>
</body>
</html>'Front-end > Java Script' 카테고리의 다른 글
| JavaScript : DOM 객체 ( Document Object Model ) (0) | 2020.01.08 |
|---|---|
| JavaScript : 자바스크립트 핸들링 / 마우스 이벤트 (0) | 2020.01.08 |
| JavaScript : 자바스크립트 2진수, 8진수, 10진수, 16진수 표현 (0) | 2020.01.08 |
| JavaScript : String 변수와 Number변수 (0) | 2020.01.08 |
| JavaScript : setInterval() 이용하여 타이머 만들기 (0) | 2020.01.07 |