html 1
<!DOCTYPE html>
<!--
html(입력) --------------- > .java ---- > .class(객체, 서블릿)
html(입력) ---- > JSP ---- > .java ---- > .class(객체, 서블릿)
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type="text/css" href="css/css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
.container-md{
background-color: #FAF0E6;
border: 1px solid #FFA07A;
box-shadow: 1px 2px 3px gray;
}
</style>
<script type="text/javascript">
function chk() {
if(frm.name.value==""){
alert("이름을 입력해주세요!");
frm.name.focus();
return false;
}
if(!frm.age.value){ //값이 있으면 true, 없으면 flase
alert("나이는 필수입력사항입니당");
frm.age.focus();
return false;
}
if(isNaN(frm.age.value)){
alert("나이는 숫자이어야 합니다");
frm.age.focus();
frm.age.value="";
return false;
}
let ch == false;
for(i=0; i<=1; i++){
if(frm.gender[i].checked){
ch = true;
break;
}
}
if(ch==false){
alert("성별을 체크하지 않으셨습니다.ㅇㅅㅇ");
return false;
}
/* 메일수신은 하나이상은 체크되어야 한다 */
let mail_ch = false;
for(i=0; i<frm.mail.length; i++){
if(frm.mail[i].checked){
mail_ch = true;
break;
}
}
if (mail_ch=false){
alert("수신메일 항목은 하나이상 선택해야 합니당");
return false;
}
/* 취미는 3개이상 선택하면 초과로 처리한다 */
let n=0;
for(i=0;i<5;i++){
if(frm.hobby[i].selected){
n++;
}
}
if(n>3){
alert(n+"개를 선택하여 초과되었습니다. 다시선택해주세용");
return false;
}
return true;
}
</script>
</head>
<body>
<div class = "container-md mt-5 p-5">
<h2>회원가입</h2>
<form action="jsp1.jsp" method="post" name="frm" onsubmit="return chk()">
<!-- text -->
이름 : <input type = "text" name="name"><p>
나이 : <input type = "text" name="age"><p>
<!-- radio -->
성별 : <label for = "g1">남자</label>
<input type = "radio" id = "g1" name = "gender" value = "남자">
<label for = "g2">여자</label>
<input type = "radio" id = "g2" name = "gender" value = "여자">
<!-- check box -->
수신메일 : <label for = "m1">공지사항</label>
<input type = "checkbox" id = "m1" name = "mail" value = "공지" checked>
<label>광고</label>
<input type = "checkbox" id = "m2" name = "mail" value = "광고">
<label for = "m3">배송</label>
<input type = "checkbox" id = "m3" name = "mail" value = "배송">
<label>스팸</label>
<input type = "checkbox" id = "m4" name = "mail" value="스팸"><p>
<!-- select -->
취미 : <br><select name = "hobby" size = "4" multiple="multiple">
<option>운동하기</option>
<option>공부하기</option>
<option>게임하기</option>
<option>잠자기</option>
<option>요리하기</option>
</select><br>
<input type = "submit" value = "확인">
</form>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>jsp1
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.Enumeration, java.util.Map"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<%
request.setCharacterEncoding("utf-8"); //요청메세지에 대한 한글인코딩 처리
//폼태그에 있는 name:value 읽어오기
String name = request.getParameter("name");
String age = request.getParameter("age");
String gender = request.getParameter("gender");
String[] mail = request.getParameterValues("mail");
String[] hobby = request.getParameterValues("hobby");
//폼태그의 전체내역조회
Enumeration<String> names = request.getParameterNames(); //html의 name들만 모아서 enumeration객체로 반환
Map<String,String[]> m = request.getParameterMap();
%>
<h2><%=name %>님 환영합니다.</h2>
<hr>
<%
while(names.hasMoreElements()){
//name
String n = names.nextElement();
out.print(n+",");
//values
String[]v = m.get(n); //n- name, age, hobby, mail, gender
for(String str: v){
out.print(str+",");
}
}
%>
<br><br>
나이 : <%=age %><p>
성별 : <%=gender %><p>
수신메일 : <%
if(mail != null){
for(int i=0; i<mail.length; i++){
if(i==mail.length-1){
out.print(mail[i]);
}
else{
out.print(mail[i]+",");
}
}
}
%><p>
취미 : <%
if(hobby != null){
for(int i=0; i<hobby.length; i++){
if(i==hobby.length-1){
out.print(hobby[i]);
}
else{
out.print(hobby[i]+",");
}
}
}
%>
</body>
</html>
html2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경색상 선택하기</title>
<link rel = "stylesheet" type="text/css" href="css/css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
.container-md{
background-color: #FAF0E6;
border: 1px solid #FFA07A;
box-shadow: 1px 2px 3px gray;
}
</style>
<script type="text/javascript">
function chk() {
let ch == false;
}
for(i=0; i<=1; i++){
if(frm.color[i].checked){
ch = true;
break;
}
}
if(ch==false){
alert("색상을 선택하지 않으셨습니다.ㅇㅅㅇ");
return false;
}
</script>
</head>
<body>
<div class = "container-md mt-5 p-5">
<h2>배경색상 선택</h2>
<form action="jsp2.jsp" method="post" name="frm" onsubmit="return chk()">
배경색 :
<br><select name = "color" size = "5">
<option>#FFE4E1</option>
<option>#98FB98</option>
<option>#AFEEEE</option>
<option>#FFFFF0</option>
<option>#E6E6FA</option>
</select><br>
<input type = "submit" value = "확인">
</form>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>jsp2
<%@ 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>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<% request.setCharacterEncoding("utf-8");
String color = request.getParameter("color"); %>
</head>
<body style="background-color:<%=color %>">
현재 배경 색상 : <%=color %>
</body>
</html>
html3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 선택하기</title>
<link rel = "stylesheet" type="text/css" href="css/css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
.container-md{
background-color: #FAF0E6;
border: 1px solid #FFA07A;
box-shadow: 1px 2px 3px gray;
}
</style>
</head>
<body>
<div class = "#">
<h2>구구단을 선택해주세요ㅇㅅㅇ</h2>
<hr>
<form action="jsp3.jsp" method="get" name="frm">
<label for="m1">1단</label>
<input type="radio" id="m1" name="num" value="1"><br>
<label for="m1">2단</label>
<input type="radio" id="m2" name="num" value="2"><br>
<label for="m1">3단</label>
<input type="radio" id="m3" name="num" value="3"><br>
<label for="m1">4단</label>
<input type="radio" id="m4" name="num" value="4"><br>
<label for="m1">5단</label>
<input type="radio" id="m5" name="num" value="5"><br>
<label for="m1">6단</label>
<input type="radio" id="m6" name="num" value="6"><br>
<label for="m1">7단</label>
<input type="radio" id="m7" name="num" value="7"><br>
<label for="m1">8단</label>
<input type="radio" id="m8" name="num" value="8"><br>
<label for="m1">9단</label>
<input type="radio" id="m9" name="num" value="9"><br>
<input type = "submit" value = "확인">
</form>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>jsp3
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% //요청
request.setCharacterEncoding("utf-8");
String num = request.getParameter("num");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 결과</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h3>구구단 <%= num %>단을 출력합니당</h3>
<hr>
<%
//응답
response.setContentType("text/html;charset=utf-8");
int dan = Integer.parseInt(num);
for(int su=1; su<=9;su++){
%>
<%=num %>*<%= su %> = <%=dan*su %><br>
<%
}
%>
</body>
</html>
html4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 값이 없거나, 숫자가 아닌경우 -->
<style type="text/css">
#tb{
border: 1px solid lightgray;
border-collapse: collapse;
background-image: url("images/rol5.jpg");
background-repeat: repeat;
width: 900px;
height: 350px;
}
</style>
<script type="text/javascript">
function chk() {
if(frm.num.value==""){
alert("숫자를 입력해주세요!");
frm.num.focus();
return false;
}
if(isNaN(frm.num.value)){
alert("숫자만 입력해야 합니다");
frm.num.focus();
frm.num.value="";
return false;
}
</script>
</head>
<body>
<h1>1부터 더하고 싶은 수를 입력해 주세용</h1>
<hr>
<form action="jsp4.jsp" method="post" name="frm" onsubmit="return chk()">
<table id="tb">
<tr>
<td align="center"><input type="number" name="num">까지 더해주세요!</td>
</tr>
<tr align="center">
<td><input type="submit" value="확인"></td>
</tr>
</table>
</form>
</body>
</html>jsp4
<%@ 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>
<%
request.setCharacterEncoding("utf-8");
int num = Integer.parseInt(request.getParameter("num"));
%>
<h3><%=num %>까지 합산한 결과입니당</h3>
<%
int sum = 0;
for(int i=1; i<=num; i++){
sum += i;
}
%>
<h3>1부터 <%=num %>까지의 합산한 결과는 <%=sum %>입니다.</h3>
</body>
</html>
jsp5 (jsp 하나로 만들기)
<%@page import="java.text.DecimalFormat"%>
<%@ 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>
<style type="text/css">
form{
background: #FFF5EE;
width: 400px;
height: 200px;
padding-top: 50px;
text-align: center;
box-whadow: 2px 2px 3px pink;
}
</style>
</head>
<body>
<h3>1부터 누적하고 싶은 숫자를 입력해 주세용</h3>
<hr>
<form action="jsp5.jsp" name="frm" method="get">
숫자: <input type="text" name="num"><p>
<input type="submit" value="확인">
</form>
<hr>
<%
/* 예외처리를 포함하여 구현 */
int num = 0;
int sum = 0;
try{
num = Integer.parseInt(request.getParameter("num"));
for(int i=1; i<=num; i++){
sum += i;
}
}catch(Exception e)
{ out.print("0을 입력하셨습니다.");
}
DecimalFormat f = new DecimalFormat("#,###.#"); //자릿수 콤마 출력폼 지정
%>
<h2> 1부터 <%=num %>까지의 합산한 결과는 <span><%=f.format(sum) %></span>입니다.</h2>
</body>
</html>