---
title: "JavaScript 정리 09"
date: "2019-02-15"
tags: ["JavaScript"]
status: archived
verified: false
---
---
## 페이지 이동
* **input태그 submit타입은 유효성 검증 없이 바로 값들을 서버로 전송**
* JS 값 검증을 실행 후 값이 유효하지 않아도 전송을 해버림
* 따라서 input submit타입은 사용하지 않도록 한다.
* **input태그 button타입일 경우 버튼을 눌러도 서버로 값이 전송되지 않는다.**
* JS로 유효성에 대한 검증가능
* 검증 후 location.href, location.replace(), document.폼이름.submit()로 페이지 이동
```javascript
// 페이지의 이동만 수행
location.href = "url";
location.replcae("url");
// 값을 가지고 페이지 이동
document.form이름.submit();
```
```html
```
```html
```
```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
Insert title here
서버에서 제공(응답)하는 페이지
입력하신 정보입니다.
이름 : <%= request.getParameter("name") %>
나이 : <%= request.getParameter("age") %>살 뒤로이동
```
## 페이지 이동 - history
* **브라우저에 남아있는 페이지 이동정보**
* 브라우저의 뒤 또는 앞 버튼을 가지고 이동가능
* 브라우저가 종료되면 다 사라진다.
* 서버로부터 응답을 받을 때마다 history가 추가된다.
* 서버로 요청을 보내지 않고 이전 응답기록(history)으로 이동한다.
* **히스토리 개수**
```javascript
history.length
```
* **뒤로(이전) 이동**
* 이동하는 이전 페이지에 HTML Form Control이 존재한다면 사용자가 입력한 모든 값이 그대로 보여진다
* password만 초기화 된다.
```javascript
history.back()
```
* 앞으로 이동
```javascript
history.go(이동할 히스토리 수) // +면 앞으로, -면 뒤로 이동
```
* 예) browser 열면 history 상태는 0
* daum.net에 들어가면 history가 1이됨
* naver.com으로 또 이동, history가 2가 됨
* google.com으로 또 이동, history가 3이됨
* nate.com으로 또 이동, history가 4가됨
* history.back()쓰면 google로 이동
* history.back()쓰면 naver로 이동
* history.back()쓰면 daum으로 이동
* history.go(1)쓰면 naver로 이동
* history.go(1)쓰면 google로 이동
* history.go(1)쓰면 nate로 이동
* history.go(-2)쓰면 naver로 이동
```html
```
```html
```
```html
뒤로이동history다시 입력
```
* **`뒤로 이동`**을 클릭하면 초기화됨(서버에 새로 요청한 응답을 받으므로)
* **`history다시 입력`**을 클릭한 경우 history.back()이 호출됨, 이전으로 이동
* **form의 정보가 남아있다.**
* password필드의 정보만 초기화된다.
## 창 닫기
* **popup인 경우 그냥 닫고 window인 경우 confrim dialog로 닫기 여부를 묻는다.**
```javascript
window.self.close()
```
## 이동할 url 없는경우
* `#void`를 입력해서 이동을 막는다.
<a href="#void"/>
## popup
* **부가적인 정보를 제공할 때 사용하는 창**
* 우편번호찾기가 대표적인 예
* popup은 window.onload로 많이 띄운다.
* 속성은 n개가 들어갈 수 있다.
* ""로 묶여있어야 된다.
* 속성값에 ""를 쓰지 않는다.
```javascript
// popup 세번째 파라미터, 속성들
"width=창의 넓이"
"height=창의 높이"
"top=y좌표"
"left=x좌표"
```
```javascript
window.open("팝업창에들어갈HTML","창id","속성");
```
* **popup.html**
```html
Insert title here
접속자에게 서비스 할 내용...
```
* **child.html**
```html
Insert title here
```
* **child.html**
```html