반응형
*페이지 이동
-
클라이언트가 서버에 a.html을 요청하면 서버는 응답하여 페이지를 띄워준다. 이때 이름과 나이를 누르고 버튼을 누르면 버튼은 페이지를 넘길수 없다.버튼의 기본속성=>(값이 서버로전송x) =>전송하기위해 location.href|replace or document.폼이름.submit();
-
:단지 페이지의 이동만 함(값은x) :값을 가지고 페이지를 이동.
-
이때 <form action="test.jsp">를 선언하여 test.jsp를 서버에 요청하여 사용자가 입력한 이름과 나이 입력받게끔 함
-
이때 j.s파일은 입력값 검증을 한다. submit을 사용하면 값이 잘못되든 잘되든 js실행하고 전송하기 때문에 쓰지 않는다!(구현할땐 전혀 안씀)
-
서버는 결과를 가지고 응답을 해주게 된다.
-
-웹의 비연결성
-
웹은 동일한페이지를 모든사람에게 똑같이 보여준다,똑같이 제공 : 멱등성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
function useSubmit(){
var obj=document.frm;
if(obj.name.value.replace(/ /g,"")==""){/* replace(/ /g,"")==trim */
obj.name.value="";
obj.name.focus();
alert("이름은 필수 입력 입니다.");
return;
}//end if
if(obj.age.value.replace(/ /g,"")==""){/* replace(/ /g,"")==trim */
obj.age.value="";
obj.age.focus();
alert("나이는 필수 입력 입니다.");
return;
}//end if
alert("서버(BackEnd)로 전송합니다.");
//단순 페이지 이동 : 값은 전송되지 않고 페이지 이동만 한다.
//location.href="request.jsp";
//<form>태그가 감싸고 있는 모든 HTML Form Control의 값을 가지고 페이지 이동.
//document.frm.submit();
obj.submit();
}//useSubmit
</script>
</head>
<body>
<form action="request.jsp"method="get"name=frm>
<label>이름</label>
<input type="text" name="name" id="name" class="inputBox"/><br/>
<label>나이</label>
<input type="text" name="age" id="age" class="inputBox"/><br/>
<label>주민번호</label>
<input type="password" name="ssn" id="ssn" class="inputBox"/><br/>
<input type="button" value="버튼 전송" class="btn" onclick="useSubmit()"/><br/>
<!-- 버튼은 페이지 이동을 하지 못하고 서브밋은 잘못된 정보도 전송해 버린다. -->
<!-- submit은 JavaScript의 유효성 검증 결과에 상관없이 BackEnd로 전송한다. -->
<input type="submit" value="submit 전송" class="btn" onclick="useSubmit()"/><br/>
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
서버에서 제공(응답)하는 JSP페이지<br/>
입력하신 정보입니다.<br/>
이름 : <%=request.getParameter("name") %><br/>
나이 : <%=request.getParameter("age") %>살<br/>
<!-- 서버에게 요청하여 페이지를 이동 : 입력값이 모두 사라진다. -->
<a href="form_submit.html">링크로 다시 입력</a>
<!-- history를 사용하여 페이지를 이동 : 입력값이 유지된다.password빼고! -->
<a href="javaScript:history.back()">history로 다시 입력</a>
</body>
</html>
<<jsp build path - apach추가>>
*페이지 이동
-
history 이동 :
-
브라우저에 남아있는 페이지 이동정보(서버로 요청을 보내지 않고 이동하는 것)
-
브라우저가 종료되면 사라진다.
-
브라우저의 뒤로, 앞으로 버튼을 가지고 이동할 수 있다.
-
서버의 변경정보를 받아올 수 없다.
-
-
클라이언트가 서버에 a.html을 요청->응답을 받고 b.html, c.html을 요청->응답을 받아 c.html페이지 상태에서
-
뒤로버튼을 누르면 서버로 요청을 보내지 않고 열었던 페이지의 기록을 불러온다. 내 컴퓨터(FrontEnd)에 남아있는 파일을 보여주게 된다.
-
제일 뒤까지 가서 앞으로를 누르면 똑같이 요청을 보내지 않고 브라우저캐쉬에 남아있는 파일을 보여준다.
-
히스토리의 갯수
-
history.length (갯수확인만 된다, 옛날엔 초기화가 되었다)
-
뒤로(이전_바로 전에 열었던 페이지)
-
[window.]history.back()
-
이동하는 이전페이지에 HTML Form Control이 존재한다. 사용자가 입력한 모든 값이 보여진다(단, password제외)
-
앞으로
-
history.go(이동할 history수) //-1을넣으면 뒤로 한칸도 가능!
-
ex) browser 열기-0 ↓ history.go(1) history.go(3)이라면 google.com이 나오게 됨daum.net을 들어감- 1 ↑ history.back() ↓ history.go(1)naver.com을 들어감 = 2 ↑ history.back() ↓ history.go(1)google.com =3 ↑ history.back() ↓ history.go(1) history.go(-2)라면 2번 올라가 naver.com이 나오게됨nate.com = 4 ↑ history.back()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
function historyCnt(){
alert(history.length);
}//historyCnt
function historyBack(){
history.back();
//history.go(-1);//뒤로 한칸, 잘안쓰는 추세
}//historyBack
function historyGo(){
history.go(1);//그냥쓰면 Error 매개변수가 꼭 쓰여야 한다. 내가원하는 수만큼 이동가능
}//historyGo
</script>
</head>
<body>
<input type="button" value="히스토리의 수 " onclick="historyCnt()"/>
<input type="button" value="뒤로" onclick="historyBack()"/>
<input type="button" value="앞으로" onclick="historyGo()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function(){
//alert(window.screenX+"/"+window.screenY);
//윈도우의 현재 좌표 얻기 : x좌표-window.screenX, y좌표 :window.screenY
window.open("newyear_popup.html","new_id",
"width=470,height=550,top="+(window.screenY+100)+",left="+(window.screenX+100));
}//function
</script>
</head>
<body>
접속자에게 서비스 할 내용...
<div>
<img src="images/Ryan.gif"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#popupWrap
#popupContainer
#popupFooter
</style>
<script type="text/javascript">
function closeWin(){
//팝업창 닫기 : popup인경우에는 그냥 닫히고 window인 경우는 confirm dialog로 닫기여부를 묻는다.
self.close();
}//closeWin
</script>
</head>
<body>
<div id="popupWrap">
<div id="popupContainer">
<img src="images/newyear_2019.jpg"/>
</div>
<div id="popupFooter">
<input type="checkbox" name="closeFlag"/>오늘하루 이창을 열지 않음.
<!-- <a href="winClose()">닫기</a>: -->
<a href="#void" onclick="closeWin()">닫기</a>
</div>
</div>
</body>
</html>
*popup
-
부가적인 정보를 제공할 때 사용하는 창 (dialog같은 느낌)(자식창)
-
(자체적으로 걸러 안띄워 주기도)
-
ex) 우편번호 찾기, 광고
-
window.open("팝업창에 들어갈 HTML", "창의 id", "창의 속성") //이렇게 3개의 매개변수를 갖는다.
-
근데, 속성이 n개 가 들어가고 ""로 묶는다.
-
"width=창의 넓이,height=창높이, top=y좌표(px), left=x좌표"
-
창닫기
-
self.close();
-
값 전달(중복확인이나 주소창의 팝업은 한번더창을 띄웠다 다닫고 값을 넣어주는데~)
-
부모창->자식창은 x
-
: 자식창(popup)에서 부모창으로 값을 전달
-
부모창( 자식창을 띄어준 창) 자식창
-
<form name="frm" <form name="cFrm"
-
<input type="text" name="p_name" <input type="text" name="C_name">
-
<===값====
-
문법)
-
opener.window.document.부모창폼이름.value=부모창에 전달할 값;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btnDup").addEventListener("click",popupCenter);
document.getElementById("btnSendDup").addEventListener("click",popupCenterSend);
}//function
function popupCenter(){
//자식창을 띄운 상태에서 자식창이 전달하는 값받기
window.open("child.html","idDup","width=502,height=303,top="+(window.screenY+100)+",left="+(window.screenX+200));
}//popupCenter
function popupCenterSend(){
//자식창을 띄울때 부모창에 있는 값을 전달하여 띄우기
//1.자식창을 변수에 저장
var subWin=window.open("child.html","idDup","width=502,height=303,top="+(window.screenY+100)+",left="+(window.screenX+200));
//2.부모창의 값을 자식창으로 전달
var id=document.pFrm.pid.value;
//3.자식창으로 값전달
subWin.window.document.cFrm.id.value=id;
}//popupCenterSend
</script>
</head>
<body>
<form name="pFrm">
<label>아이디</label>
<input type="text" name="id" id="id" readonly="readonly" class="inputBox"/>
<input type="button" value="중복확인" id="btnDup" class="btn"/>
<input type="text" name="pid" id="pid" class="inputBox"/>
<input type="button" value="값전송 중복확인" id="btnSendDup" class="btn"/>
</form>
</body>
</html>
-
exploer만 되는 부모->자식창으로 값 전달
-
ie에서 동작/크롬은 안됨
-
1.자식창 받기
-
var 변수명=window.open("자식창html","id","속성");
-
2.자식창에 값 전달
-
저장한 변수명.window.document.자식창의폼이름.control명.value= 값;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#idWrap
#idContainer
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("sendId").addEventListener("click", sendOpener);
document.getElementById("id").addEventListener("keydown", keyCheck);
}//function
function keyCheck(){
if(window.event.keyCode==13){
sendOpener();
}//end if
}//keyCheck
function sendOpener(){
//1.자식창에서 전송할 값을 받는다.
var idObj=document.cFrm.id;
if(idObj.value==""){
alert("전송할 id를 입력해 주세요.");
idObj.focus();
return;
}//end if
//2.부모창으로 값 넘기기
opener.window.document.pFrm.id.value=idObj.value;
//3.자식창 닫기
self.close();
}//sendOpener
</script>
</head>
<body>
<div id="idWrap">
<div id="idContainer">
<form name="cFrm">
<label>아이디</label>
<input type="text" name="id" id="id" class="inputBox" autofocus="autofocus"/>
<input type="button" value="사용" class="btn" id="sendId"/>
</form>
</div>
</div>
</body>
</html>
window.open() 에 대한 자세한 설명)
2021/02/05 - [web관련 공부들] - JavaScript popup - 1.window.open()
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 81일차-JavaScript_회원가입 추가/canvas,storage,JSON (0) | 2019.02.28 |
|---|---|
| 80일차-javaScript_회원가입 유효성 검증(더해야 함) (0) | 2019.02.20 |
| 78일차-JavaScript+a (0) | 2019.02.18 |
| 77일차-JavaScript_함수 (0) | 2019.02.17 |
| 76일차-JavaScript_값 (0) | 2019.02.15 |