<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send01.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 01</h1>
<hr>
</div>
<!--
○ 데이터 송수신 실습 01
- 이름과 전화번호를 입력받는 html 페이지를 작성한다.
이름 [ text box ] ← 연수양
전화번호 [ text box ] ← 010-1111-1111
< 회원 가입 > → button
- 회원 가입 버튼 클릭 시
『연수양님, 회원가입이 완료되었습니다.
회원님께서 등록하신 전화번호는 010-1111-1111 입니다.』
라는 내용을 출력하는 JSP 페이지(Receive01.jsp)로 구성하여
데이터를 전달할 수 있도록 한다.
- 사용자의 최초 요청 주소는
http://localhost:8090/WebApp07/Send01.html 로 한다.
○ 물리적 파일 구성
- Send01.html
- Receive01.jsp
-->
<!-- 내 풀이
<div>
<form action="Receive01.jsp" method="post">
<div style="height: 80px;">
이름       <input type="text" name="name"> <br>
전화번호 <input type="text" name="tel">
</div>
<div>
<button type="submit" name="register">회원가입</button>
</div>
</form>
</div>
-->
<!--
1. 클라이언트 측에서 서버 측에 데이터 전송 및 페이지 요청을 위해 form 태그 필요
2. form 태그 영역 안에 들어가야 하는 대상 : 이름, 전화번호, submit
3. form 태그의 action 속성은 데이터를 전송하며 요청하는 jsp 페이지의 주소 지정
→ Receive01.jsp
4. form 태그의 method 속성은 데이터 전송 및 페이지 요청 방식
→ get 또는 post
-->
<div>
<form action="Receive01.jsp" method="post">
<!--
5. id, name 속성은 어떤 영역에서 어떤 선택자를 활용하느냐에 따라
적절히 판단하여 부여해야 한다.
6. name 속성은 JSP 에서 가용하게 될 식별자
-->
<table>
<tr>
<th>이름</th>
<td>
<input type="text" name="userName" class="txt">
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type="text" name="userTel" class="txt">
</td>
</tr>
<tr>
<td colspan="2">
<!--
7. submit 을 통해 전송 기능을 수행할 수 있다.
『<input type="submit" value="회원가입">』과 동일한 코드
button 은 이미지 또는 다른 태그들을 포함할 수 있으며
input 은 스타일 구성을 폭넓게 할 수 있다.
-->
<button type="submit" class="btn" style="width: 150px;">회원 가입</button>
<button type="reset" class="btn" style="width: 150px;">취소</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%-- <%
//내 풀이
// 한글 데이터 깨짐 방지
request.setCharacterEncoding("UTF-8");
// 이전페이지(Send01.html) 데이터 수신
String name = request.getParameter("name");
String tel = request.getParameter("tel");
%> --%>
<%
// 이전 페이지(Send01.html)로 부터 데이터 수신
// 한글 수신을 위한 인코딩 방식 지정
request.setCharacterEncoding("UTF-8");
//-- 웹은 UTF-8 을 기본 인코딩 방식으로 삼고 있음
// 그러므로 기본 설정은 UTF-8로 구성하는 것이 좋음
// (하지만, 데이터를 전송하는 페이지에서 EUC-KR 과 같이 다른 인코딩 방식으로
// 처리하고 있는 상황이라면... 그에 따른 인코딩 방식이 지정되어야 한글이 깨지지 않음.
// 또한 지금 하고 있는 이 처리는... 데이터를 수신해서 사용하는 처리보다
// 먼저 수행되어야 한글이 깨지지 않은 상태로 사용할 수 있음)
String userName = request.getParameter("userName");
String userTel = request.getParameter("userTel");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Receive01.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 01</h1>
<hr>
</div>
<%-- 내 풀이
<%=name %> 님, 회원가입이 완료되었습니다.<br>
회원님께서 등록하신 전화번호는 <%=tel %> 입니다.
--%>
<div>
<h2>가입 확인</h2>
<!-- <span style="color: skyblue; font-weight: bold;">연수양</span>님, -->
<span style="color: skyblue; font-weight: bold;"><%=userName %></span>님,
회원가입이 완료되었습니다.<br>
회원님께서 등록하신 전화번호는
<%-- <span style="color: skyblue; font-weight: bold;">010-1111-1111</span> 입니다.<br> --%>
<span style="color: skyblue; font-weight: bold;"><%=userTel %></span> 입니다.<br>
</div>
</body>
</html>
Send02 & Receive02 - 입력 값 예시 : placeholder
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 02</h1>
<hr>
</div>
<!--
○ 데이터 송수신 실습 02
- 이름과 성적데이터를 입력받는 html 페이지를 작성한다.
이름 [ text box ] ← 상훈문
국어점수 [ text box ] ← 90
영어점수 [ text box ] ← 80
수학점수 [ text box ] ← 70
< 전송 > < 취소 > → button
- 내용 입력 후, 전송 버튼 클릭시
『상훈문님, 성적 처리가 완료되었습니다.
회원님의 점수는 국어 90 점, 영어 80점, 수학 70점 입니다.
총점은 240점, 평균은 80.0 입니다.』
라는 내용을 출력하는 JSP 페이지(Receive02.jsp)로 구성하여
데이터를 전달할 수 있도록 한다.
- 사용자의 최초 요청 주소는
http://localhost:8090/WebApp07/Send02.html 로 한다.
○ 물리적 파일 구성
- Send02.html
- Receive02.jsp
-->
<div>
<form action="Receive02.jsp" method="post">
<div>
이름 <input type="text" class="txt" name="name" style="width: 130px" placeholder="ex) 폼폼푸린">
</div>
<div>
국어점수 <input type="text" class="txt" name="kor" style="width: 100px" placeholder="0 ~ 100"> <br>
영어점수 <input type="text" class="txt" name="eng" style="width: 100px" placeholder="0 ~ 100"> <br>
수학점수 <input type="text" class="txt" name="mat" style="width: 100px" placeholder="0 ~ 100"> <br>
</div>
<div>
<input type="submit" class="btn" value="전송" style="width: 60px">
<input type="reset" class="btn" value="취소" style="width: 60px">
</div>
</form>
</div>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
//한글 처리
request.setCharacterEncoding("UTF-8");
//이전페이지(Send02) 데이터 수신
String name = request.getParameter("name");
String korStr = request.getParameter("kor");
String engStr = request.getParameter("eng");
String matStr = request.getParameter("mat");
int kor, eng, mat;
kor = eng = mat = 0;
int tot=0;
double avg=0;
try
{
kor = Integer.parseInt(korStr);
eng = Integer.parseInt(engStr);
mat = Integer.parseInt(matStr);
tot = kor + eng + mat;
avg = tot/3.0;
}
catch (Exception e)
{
System.out.println(e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 02</h1>
<hr>
</div>
<div>
<h2>성적 처리 결과</h2>
<!-- <span>상훈문</span>님, 성적 처리가 완료되었습니다.<br> -->
<span style="font-weight: bold;"><%=name %></span>님,
성적 처리가 완료되었습니다.<br>
<%-- 회원님의 점수는 <span>국어90점, 영어 80점, 수학 70점 </span>입니다.<br> --%>
회원님의 점수는
<span style="font-weight: bold; color: blue;">국어 <%=kor %>점, 영어 <%=eng %>점, 수학 <%=mat %>점</span> 입니다.<br>
<%-- <span>총점은 240점, 평균은 80.0</span> 입니다. --%>
<span style="font-weight: bold; color: red;">총점은 <%=tot %>점,
평균은 <%=String.format("%.1f", avg) %></span> 입니다.
<!-- ---------------------------- 소수점 처리 -->
</div>
</body>
</html>
Send03 & Receive03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send03.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 03</h1>
<hr>
</div>
<!--
○ 데이터 송수신 실습 03
- 두 개의 정수를 입력받고 연산자를 선택하는 html 페이지를 구성한다.
selectbox
정수1 [ text box ] [ 더하기▼ ] 정수2 [ text box ]
↑ 빼기 ↑
43 곱하기 31
나누기
< 결과 확인 > < 취소 > → button
- 데이터 입력 및 선택 후, 결과 버튼 클릭시
『입력하신 43와(과) 31의 연산 결과는 74 입니다.』
라는 내용을 출력하는 JSP 페이지(Receive03.jsp)로 구성하여
데이터를 전달할 수 있도록 한다.
- 사용자의 최초 요청 주소는
http://localhost:8090/WebApp07/Send03.html 로 한다.
○ 물리적 파일 구성
- Send03.html
- Receive03.jsp
-->
<div>
<form action="Receive03.jsp" method="post">
<div>
정수 1 <input type="text" class="txt" name="num1" style="width: 50px;">
<!--
<select name="operator">
<option value="1" selected="selected">더하기</option>
<option value="2">빼기</option>
<option value="3">곱하기</option>
<option value="4">나누기</option>
</select>
-->
<!-- option 의 value 값은 연산자를 직접 전달하는 것은 권장되지 않는다
특히 주소창으로 값이 넘겨질 때 특수문자의 경우 문자열 결합이 일어나기도 한다 -->
<select name="operator">
<option value="+" selected="selected">더하기</option>
<option value="-">빼기</option>
<option value="*">곱하기</option>
<option value="/">나누기</option>
</select>
정수 2 <input type="text" class="txt" name="num2" style="width: 50px;">
</div>
<br>
<div>
<input type="submit" class="btn" value="결과 확인">
<input type="reset" class="btn" value="취소">
</div>
</form>
</div>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
//한글
request.setCharacterEncoding("UTF-8");
//Send03 전송 데이터
String num1Str = request.getParameter("num1");
String num2Str = request.getParameter("num2");
String op = request.getParameter("operator");
int num1, num2;
num1 = num2 = 0;
//check ! 산술연산임에도 불구하고 문자열로 선언 -- 소수점을 내가 원하는 형태로 처리하기 위해서
// double res=0; //-- 내 풀이 res 변수
String result = "";
/*
// 내 풀이
try
{
num1 = Integer.parseInt(num1Str);
num2 = Integer.parseInt(num2Str);
switch(Integer.parseInt(op))
{
case 1 : res = num1 + num2; break;
case 2 : res = num1 - num2; break;
case 3 : res = num1 * num2; break;
case 4 : res = num1 / (double)num2; break;
}
}
catch (Exception e)
{
System.out.println(e.toString());
}
*/
try
{
num1 = Integer.parseInt(num1Str);
num2 = Integer.parseInt(num2Str);
// check -- String.valueOf() : 연산결과를 문자열로 담는다
if(op.equals("+"))
result = String.valueOf(num1 + num2);
else if(op.equals("-"))
result = String.valueOf(num1 - num2);
else if(op.equals("*"))
result = String.valueOf(num1 * num2);
else if(op.equals("/"))
{
//result = String.valueOf(num1 / num2); // 자바 연산
//result = String.valueOf(num1 / (double)num2);
result = String.format("%.1f", num1/(double)num2); // check
}
}
catch (Exception e)
{
System.out.println(e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Receive03.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 03</h1>
<hr>
</div>
<div>
<h2>결과 확인</h2>
<!-- 입력하신 43와(과) 31의 연산 결과는 74 입니다. -->
입력하신 <span style="font-weight:bold; color: blue;"><%=num1 %></span>와(과)
<span style="font-weight:bold; color: blue;"><%=num2 %></span>의
연산 결과는
<%-- 내 풀이 res 연산
<span style="font-weight:bold; color: red;"><%=String.format("%.1f", res) %></span>입니다.
--%>
<span style="font-weight:bold; color: red;"><%=result %></span>입니다.
</div>
</body>
</html>
Send04 & Receive04 ★ - onsubmit 이벤트 - display 다루기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send04.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
.msg {color: red; font-size:small; display:none;}
</style>
<script type="text/javascript">
/*
function functionTest()
{
// 확인
alert("함수 호출 확인");
// 확인
//-- 아래서 onsubmit=return functionTest() 하고 난 후
//return false;
//return true;
}
*/
function formCheck()
{
//return true; //-- 요청 페이지로 제어권 이전
//return false; //-- 현재 페이지에 그대로 남아있음
//문서의 내용 점검 → 통과 → return true; → submit 액션 처리로 제어권을 넘김
//문서의 내용 점검 → 반려 → return false; → submit 액션 처리로 제어권을 넘기지 않고 현재 페이지에 잔류
/*
점검사항 체크
→ 문제 발생(발견) → return false;
→ 문제 발생하지 않음(발견되지 않음) → return true;
*/
var userId = document.getElementById("uId");
var userPwd = document.getElementById("uPwd");
var userName = document.getElementById("uName");
var userTel = document.getElementById("uTel");
var idMsg = document.getElementById("idMsg");
var pwdMsg = document.getElementById("pwdMsg");
var nameMsg = document.getElementById("nameMsg");
var telMsg = document.getElementById("telMsg");
idMsg.style.display="none";
pwdMsg.style.display="none";
nameMsg.style.display="none";
telMsg.style.display="none";
if (userId.value == "") //-- 아이디가 입력되지 않은 상황
{
//확인
// alert("아이디가 입력되지 않은 상황");
idMsg.style.display = "inline";
userId.focus();
return false;
}
if (userPwd.value == "") //-- 패스워드가 입력되지 않은 상황
{
//확인
//alert("패스워드가 입력되지 않은 상황");
pwdMsg.style.display = "inline";
userPwd.focus();
return false;
}
if (userName.value == "") //-- 이름이 입력되지 않은 상황
{
//확인
//alert("이름이 입력되지 않은 상황");
nameMsg.style.display = "inline";
userName.focus();
return false;
}
if (userTel.value == "") //-- 전화번호가 입력되지 않은 상황
{
//확인
//alert("전화번호가 입력되지 않은 상황");
telMsg.style.display = "inline";
userTel.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>데이터 송수신 실습 04</h1>
<hr>
</div>
<!--
○ 데이터 송수신 실습 04
- 회원 가입과 관련한 기본 정보를 입력받는 html 페이지를 작성한다.
- 입력된 데이터를 서버로 전송하기 전에
(즉, 클라이언트 측에서 작성한 내용을 서버에 제출하기 전에)
입력 데이터에 대한 기본적인 검사 과정을 자바스크립트를 활용하여 추가할 수 있도록 한다.
아이디(*) [ text box ]
패스워드(*) [ password ]
이름(*) [ text box ]
전화번호(*) [ text box ]
성별 ● 여자 ○ 남자
지역 [ 서울 ▼ ]
대전
광주
대구
수강과목 □자바기초 □오라클중급 □JDBC심화 □JSP응용
< 회원 가입 > < 취소 >
- 필수 입력 항목(*)을 포함한 입력 내용을 구성한 후,
회원가입 버튼 클릭시
회원 입력 정보들의 내용을 출력하는 JSP 페이지(Receive04.jsp)를 구성하여
데이터를 전달할 수 있도록 한다.
- 사용자의 최초 요청 주소는
http://localhost:8090/WebApp07/Send04.html 로 한다.
○ 물리적 파일 구성
- Send04.html
- Receive04.jsp
-->
<div>
<!-- form 이 submit 되었을 때 라는 이벤트 처리-->
<!-- <form action="Receive04.jsp" method="post" onsubmit="functionTest()"> --> <!-- 함수 호출은 되나 return false는 반환 안됨 -- 제어권이 Receive04.jsp로 이미 넘어감-->
<!-- <form action="Receive04.jsp" method="post" onsubmit="return false;"> --> <!-- 여기서 직접 return false 하면 페이지가 안넘어감 -- 제어권 안 줌-->
<!-- <form action="Receive04.jsp" method="post" onsubmit="return true;"> --> <!-- return true 하면 페이지 넘어감 -->
<!-- <form action="Receive04.jsp" method="post" onsubmit="return functionTest();"> --> <!-- 함수가 true 또는 false 를 반환함에 따라 변함 -->
<form action="Receive04.jsp" method="post" onsubmit="return formCheck();">
<div>
<!-- id 와 name 의 속성 값은 동일해도 무관 -->
아이디(*)
<input type="text" class="txt" id="uId" name="uId">
<!-- 개별안내메세지 출력 가능 -->
<span class="msg" id="idMsg">아이디를 입력하세요.</span>
<br>
패스워드(*)
<input type="password" class="txt" id="uPwd" name="uPwd">
<span class="msg" id="pwdMsg">패스워드를 입력하세요.</span>
<br>
이름(*)
<input type="text" class="txt" id="uName" name="uName">
<span class="msg" id="nameMsg">이름을 입력하세요.</span>
<br>
전화번호(*)
<input type="text" class="txt" id="uTel" name="uTel">
<span class="msg" id="telMsg">전화번호를 입력하세요.</span>
<br>
</div>
<br>
<div>
성별
<input type="radio" name="gender" value="F" id="genF" checked="checked"><label for="genF">여자</label>
<input type="radio" name="gender" value="M" id="genM"><label for="genM">남자</label>
</div>
<br>
<div>
지역
<select name="uCity" id="uCity">
<option value="서울" selected="selected">서울</option>
<option value="대전">대전</option>
<option value="광주">광주</option>
<option value="대구">대구</option>
</select>
</div>
<br>
<div>
수강과목
<label><input type="checkbox" name="subject" id="check1" value="자바기초">자바기초</label>
<label><input type="checkbox" name="subject" id="check2" value="오라클중급">오라클중급</label>
<label><input type="checkbox" name="subject" id="check3" value="JDBC심화">JDBC심화</label>
<label><input type="checkbox" name="subject" id="check4" value="JSP응용">JSP응용</label>
</div>
<br>
<div>
<button type="submit" class="btn control">회원가입</button>
<button type="reset" class="btn control">취소</button>
</div>
<!--
<div>
안내메세지 구성 (한 번에 뭉뚱그려서 알릴 때)
</div>
-->
</form>
</div>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 한글
request.setCharacterEncoding("UTF-8");
// 이전페이지(Send04.html)에서 데이터 수신
// 필수항목
String id = request.getParameter("uId");
String pwd = request.getParameter("uPwd");
String name = request.getParameter("uName");
String tel = request.getParameter("uTel");
// 선택항목
String gender = request.getParameter("gender");
String city = request.getParameter("uCity");
// 과목 -- 다중선택
String[] subject = request.getParameterValues("subject");
if(gender.equals("F"))
gender = "여자";
else if(gender.equals("M"))
gender = "남자";
else
gender = "확인불가";
String res = "";
//check! -- null 값 확인하지 않으면 null point exception 등 발생...
if(subject != null)
{
for(int i=0; i<subject.length; i++)
{
res += "[" + subject[i] + "] ";
}
}
// ※ 추후에는 수신된 데이터를 쿼리문을 통해
// DB에 입력하는 처리과정드잉 포함될것임을 염두하며 작업을 진행할 수 있도록 한다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Receive04.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 04</h1>
<hr>
</div>
<div>
<h2>가입 승인 내역</h2>
<p>아이디 : <%=id %></p>
<p>패스워드 : <%=pwd %></p>
<p>이름 : <%=name %></p>
<p>전화번호 : <%=tel %></p>
<p>성별 : <%=gender %></p>
<p>지역 : <%=city %></p>
<p>수강과목 : <%=res %></p>
</div>
</body>
</html>
Send05 & Receive05 - form.submit();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send05.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
//function formChange()
//function formChange(obj) // this
function formChange(obj) // this.form
{
//확인
//alert("함수호출");
//alert(obj); //--==>> [object HTMLSelectElement] (this)
//--==>> [object HTMLFormElement] (this.form)
// ※ 『this.form』을 넘기며 함수를 호출했을 경우
// obj 변수 (이 함수의 매개변수) 에는 form 객체가 저장되어있다.
// 필요에 따라 전송하기 전에 검증 절차를 추가하는 것이 가능하다.
obj.submit();
//-- 『폼.submit()』
// 함수 호출을 통해 form 객체의 데이터를
// 서버로 전송하는 것이 가능하다.
}
</script>
</head>
<body>
<div>
<h1>데이터 송수신 실습 05</h1>
<hr>
</div>
<!--
○ 데이터 송수신 실습 05
- 구구단 결과를 출력하는 페이지(Receive05.jsp)를 작성한다.
- 사용자로부터 원한느 단수를 입력받아(Send05.html)
결과를 화면에 출력해주는 형태의 페이지로 구성한다.
- 단, submit 버튼 없이 이벤트 처리를 할 수 있도록 한다.
단 수 선택 [ 1단 ▼ ] → select
2단
3단
:
8단
9단
- select 선택 시
해당 단의 구구단 내용을 출력하는 JSP 페이지(Receive05.jsp)로
데이터를 전달하여 내용을 구성할 수 있도록 한다.
- 사용자의 최초 요청 주소는
http://localhost:8090/WebApp07/Send05.html 로 한다.
○ 물리적 파일 구성
- Send05.html
- Receive05.jsp
-->
<div>
<h2>당신의 구구단을 선택하세요!</h2>
<!--
<form action="Receive05.jsp" method="get">
<select id="gugudan" name="gugudan" onchange="this.form.submit()"> select 에서 값이 바뀌면 함수를 호출해라
<select id="gugudan" name="gugudan" onchange="this.form.submit()">
<option value="0">선택</option> 아래의 문제를 해결하기 위해서 선택지 추가
<option value="1">1단</option> 1단으로 시작하면 1단 선택이 불가능한 onchange
<option value="2">2단</option>
<option value="3">3단</option>
<option value="4">4단</option>
<option value="5">5단</option>
<option value="6">6단</option>
<option value="7">7단</option>
<option value="8">8단</option>
<option value="9">9단</option>
</select>
</form>
-->
<form action="Receive05.jsp" method="get"> <!-- submit의 대상이 되는 것은 form! -->
<!-- <select id="gugudan" name="gugudan" onchange="formChange(this)"> --> <!-- this만 하면 select 관련 obj -->
<select id="gugudan" name="gugudan" onchange="formChange(this.form)"> <!-- this.form 은 해당 폼을 반환 -->
<option value="0">선택</option>
<option value="1">1단</option>
<option value="2">2단</option>
<option value="3">3단</option>
<option value="4">4단</option>
<option value="5">5단</option>
<option value="6">6단</option>
<option value="7">7단</option>
<option value="8">8단</option>
<option value="9">9단</option>
</select>
</form>
</div>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 이전 페이지(Send05.html)로부터 넘어온 데이터 수신
String dan = request.getParameter("gugudan");
int nDan=0;
String res = "";
try
{
nDan = Integer.parseInt(dan);
for(int i=1; i<=9; i++)
res += nDan + " * " + i + " = " + (nDan*i) + "<br>";
}
catch(Exception e)
{
System.out.println(e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Receive05.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 05</h1>
<hr>
</div>
<div>
<h2> (❁´◡`❁) 당신의 구구단을 소개합니다!</h2>
your pick! <%=dan %>단
<hr>
<!--
2 * 1 = 2 <br>
2 * 2 = 4 <br>
:
2 * 9 = 18 <br>
-->
<%=res %>
</div>
</body>
</html>
<!-- 뷰페이지 : 사용자에게 보여지는 페이지
-> 그렇다면 사용자에게 보여지지 않은 페이지도 존재한다는 것!
※ 뷰페이지의 경우 꼭 값을 받아와야만 만들 수 있는 것이 아니라는 점을 명심
-->
SendAndReceive06 - 보내고 받는것 모두 자기자신이 하는 실습
<%@ page contentType="text/html; charset=UTF-8"%>
<%
//-- 스크린 릿 영역은 해당 파일이 실행되면 무조건 실행되는 영역
//-- 처음 페이지를 생성해서 영역이 실행되어도 request 는 있다. (페이지를 들어오는 요청 자체)
//-- 하지만 제일 초기에 들어오게 되면 request 객체는 빈 상태, 즉 null 이다.
// 이전 페이지(SendAndReceive06.jsp)로부터 넘어온 데이터 수신 → userInput
// 즉, 자기 자신 페이지로부터 데이터를 수신하게 되는 상황
request.setCharacterEncoding("UTF-8");
String temp = "";
temp = request.getParameter("userInput");
if(temp==null) //-- 최초 요구시 null 인 상태를 위한 조건문
temp = "없음";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SendAndReceive06.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>데이터 송수신 실습 05</h1>
<hr>
</div>
<!-- 404 Error : Test999.jsp 파일 존재 x & 값을 넘겨주지도 못함
<div>
<form action="Test999.jsp" method="post">
입력
<input type="text" id="userInput" name="userInput" class="txt">
<br>
<button type="submit" class="btn control">테스트</button>
<button type="reset" class="btn control">취소</button>
</form>
</div>
-->
<!--
<div>
action 에 빈문자열 -> 입력값은 사라지고 해당 페이지에 남아있는 것 처럼 보임
빈문자열의 의미 : 나 자신!
<form action="" method="post">
입력
<input type="text" id="userInput" name="userInput" class="txt">
<br>
<button type="submit" class="btn control">테스트</button>
<button type="reset" class="btn control">취소</button>
</form>
</div>
-->
<!--
<div>
action 속성 생략시 "" 빈문자열과 동일
<form method="get">
입력
<input type="text" id="userInput" name="userInput" class="txt">
<br>
<button type="submit" class="btn control">테스트</button>
<button type="reset" class="btn control">취소</button>
</form>
</div>
-->
<div>
<!-- -->
<form method="post">
입력
<input type="text" id="userInput" name="userInput" class="txt">
<br>
<button type="submit" class="btn control">테스트</button>
<button type="reset" class="btn control">취소</button>
</form>
<!-- check -->
<!--
※ form 의 action 속성을 『action=""』와 같이 구성하거나
action 속성을 생략하여 『<form method="post">』와 같이 구성하게 되면
페이지 요청 및 데이터 전송에 대한 수신처 페이지는
자기자신이 된다.
-->
</div>
<div>
<h2>수신된 데이터 확인</h2>
<h3>→<%=temp %></h3>
</div>
</body>
</html>
