JSP 1일차 : 기본태그, 내장객체
JSP
-
Java Server Page
-
HTML5 구조 + Java
-
Java언어를 사용 : 맨 위 페이지 디렉티브 부분
<%@ **page** language=*"java"* contentType=*"text/html; charset=UTF-8"* pageEncoding=*"UTF-8"*%>
-
cf) Survlet : Java 구조 + HTML
- JSP -> Servlet으로 변환됨 -> 화면에 출력
- JSP 핵심정리
JSP 태그
-
주석
-
-
일반주석 : 소스보기에서 보임. 주로 코딩에 대한 설명을 쓸 때 사용
<!-- 주석내용 --> -
JSP주석 : 소스보기에서 안보임. 안에있는 명령들은 실행하지 않음
<%-- 주석내용 --%>
-
-
자바영역표시 : Scriptlet
<% 자바코드 %> -
자바의 변수, 문자열 출력 : 표현식, 모두 지역변수로 취급됨
<%= 출력할 변수 또는 문자열 =%> -
멤버변수선언 : 선언문
<!% 변수 또는 메서드 %>
예제
- import 확인하기
- out 내장객체 이용해 브라우저에 출력하기
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ 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>
<h2>JSP 공부하기</h2>
HTML 주석 <!-- 안녕!!! 나는 HTML주석 소스코드에서 보이지! -->
JSP 주석 <%-- 반가워 나는 JSP주석! --%>
<%
// 이곳은 자바 영역 입니다.
System.out.println("printed on console");
out.println("printed on browser<br>"); //PrintWriter타입. 내장객체~
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm EEE");
out.println(sdf.format(date) + "<br>");
%>
</body>
</html>
표현식 공부하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표현식에 대한 공부를 해봅시다</title>
</head>
<body>
<%
//스크립트릿 영역 안의 변수는 지역변수로 등록된다. => 이영역 아랫에서만 이 변수들을 꺼내 쓸 수 있다.
String msg = "have a nice day!";
String color = "magenta";
%>
<h1 style="color: <%=color %>;"><%=msg %></h1> <!-- 표현식을 이용하여 자바영역의 변수를 출력하기 -->
<%= msg2 %><br>
<%!
//선언문 : 멤버변수, 멤버메서드로 등록된다. => 이 영역 밖 어디서든 꺼내쓸 수 있다.
String msg2 = "this is msg2";
public String getDay(){
return "getDay method printed";
}
%>
<%=getDay() %>
</body>
</html>
자바 코드와 HTML코드 번갈아가며 코딩하기 연습
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바코드와 HTML코드!</title>
<style>
table{
border: 5px groove grey;
width: 200px;
}
tr, td, th{
font-size: 20px;
border: 1px solid olive;
}
</style>
</head>
<body>
<%
String str[] = {"rose", "daisy", "tulip", "sunflower", "sakura"};
String color[]={"pink","orange","skyblue","purple","grey"};
%>
<table>
<caption><b>배열 출력</b></caption>
<%
for(int i = 0 ; i<str.length ; i++ ){
%><tr>
<td align="center"> <%=i+1 %></td>
<td align="center" style="color:<%=color[i]%>"> <%=str[i] %> </td>
<%
}
%>
</table>
</body>
</html>
2단부터 9단까지 구구단 출력
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 출력해보기~</title>
<style>
table{
border: 1px dotted grey;
width: 500px;
}
tr, td, th{
font-size: 10px;
border: 1px solid grey;
text-align: center;
}
#title{
color: skyblue;
}
#contents{
color: lightpink;
}
</style>
</head>
<body>
<table>
<tr>
<%
for(int i=2 ; i<=9 ; i++){
%><td id="title"> <%=i +" 단!"%></td><%
}
%>
</tr>
<tr>
<%
for(int i=2 ; i <= 9 ; i++){
%><td id="contents"><br><%
for(int j=1 ; j <=9 ; j++){
%><%=i + " x " + j + " = " + i*j %><br><%
}
%><br></td><%
}
%>
</tr>
</table>
</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>
<style>
img{
width:100px;
}
</style>
</head>
<body>
<%
for(int i = 1 ; i <=10 ; i++){
String imgName = "ani" + (i<10?"0":"") + i + ".gif";
%><img src="../image/<%=imgName%>"><%
}
%>
</body>
</html>
벡터 출력하기
<%@page import="test.code.DataDTO"%>
<%@page import="java.util.List"%>
<%@page import="test.code.JavaEx6"%>
<%@page import="java.util.Vector"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>벡터에 있는 데이타를 출력해봅시다!</title>
<style>
div{
width:100px;
height: 100px;
margin: 10px;
text-align: center;
font-size: 15px;
float:left;
}
table{
border: 1px dotted grey;
width: 500px;
}
tr, td, th{
font-size: 15px;
border: 1px solid grey;
text-align: center;
}
th{
background-color: lightpink;
}
</style>
</head>
<body>
<%
Vector<String> list1 = new Vector<String>();
list1.add("olive");
list1.add("skyblue");
list1.add("hotpink");
list1.add("lightgrey");
list1.add("coral");
for(int i = 0 ; i<list1.size() ; i++){
String color = list1.get(i);
%><div style="background:<%=color%>;"> >_< </div><%
}
%>
<hr style="clear:both;">
<h1>Java클래스의 메서드로부터 데이타불러서 출력해보깅~</h1>
<%
JavaEx6 jj = new JavaEx6();
List<DataDTO> list = jj.getDatas();
%>
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
<%
for(int i = 0 ; i < list.size() ; i++){
%>
<tr>
<td><%=list.get(i).getName() %></td>
<td><%=list.get(i).getAge() %></td>
<td><%=list.get(i).getAddr() %></td>
</tr>
<%
}
%>
</table>
<%
%>
</body>
</html>
내장객체 Request, Response
- Request : ServletRequest타입으로, 클라이언트의 http요청을 담고있는 객체
- Response : ServletResponse타입으로, 요청에 대한 응답
| 메서드 | 기능 |
|---|---|
| getParameter | 폼태그에서 입력한 값을 읽어온다 |
| getParameterValues | 폼태그에서 여러개의 값을 한번에 반환하는 경우(checkbox, 멀티 select) |
Ex7_FormTag.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>간단한 폼태그 1</title>
</head>
<body>
<div style="margin:auto;">
<form action="Ex7_Action.jsp" method="post">
<table style="500px">
<tr>
<th>이름</th>
<td>
<input type="text" size="10" name="name" placeholder="name">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" size="10" name="password" placeholder="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="서버로 전송">
<input type="reset" value="초기화">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Ex7_Action.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>간단한 폼태그</title>
</head>
<body>
<%
//한글 인코딩 해주자~ 글자 안깨지게~
request.setCharacterEncoding("UTF-8");
//폼태그를 읽어오자~~
String name = request.getParameter("name");
String pass = request.getParameter("password");
%>
<h2>이름 : <%=name %>, 비밀번호: <%=pass %></h2>
<a href="javascript:history.back()">자료가 남아있는 형태로 이전으로 돌아가기</a><br>
<a href="javascript:history.go(-1)">go(-1)로 이전으로 돌아가기</a><br>
<a href="Ex7_FormTag.jsp">자료가 모두 초기화 된 형태로 이전으로 돌아가기</a>
</body>
</html>
-
한번에 여러개의 값을 가져오는 경우(체크박스,셀렉트 복수개)
FormTag.jsp
<%@ 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>
<form action="Ex8_Action.jsp">
<table border="1">
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="game">game
 
<input type="checkbox" name="hobby" value="cooking">cooking
 
<input type="checkbox" name="hobby" value="travel">travel
 
<input type="checkbox" name="hobby" value="reading">reading
 
</td>
</tr>
<tr>
<th>외국어</th>
<td>
<select style="width:150px" multiple="multiple" size="5" name="lang">
<option value="kor">kor</option>
<option value="eng">eng</option>
<option value="jpn">jpn</option>
<option value="spn">spn</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit!">
</td>
</tr>
</table>
</form>
</body>
</html>
Action.jsp
<%@ 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");
//hobby
String hobby[] = request.getParameterValues("hobby");
String lang[] = request.getParameterValues("lang");
%>
<h2>취미:
<%
if(hobby ==null){
%><b style="color:red">취미가 없음.</b><%
}else{
for(int i = 0 ; i < hobby.length ; i++){
%><b style="color:skyblue"><%=hobby[i] + " " %> </b> <%
}
}
%>
</h2><br>
<h2>언어:
<%
if(lang ==null){
%><b style="color:red">할줄아는 언어가 없음.</b><%
}else{
for(int i = 0 ; i < lang.length ; i++){
%><b style="color:skyblue"><%=lang[i] + " " %> </b> <%
}
}
%></h2>
</body>
</html>
-
날짜, 컬러 등등 받아보기
FormTag.jsp
<%@ 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>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
th{
text-align:center;
font-size:15pt;
color:white;
}
tr{
text-align:center;
}
</style>
</head>
<body>
<form action="Ex9_Action.jsp" method="post" class="form-inline">
<table class="table table-striped">
<tr>
<th bgcolor="lightgrey">name</th>
<td>
<input type="text" name="name" class="form-control">
</td>
</tr>
<tr>
<th bgcolor="lightgrey">start</th>
<td>
<input type="date" name="startday" class="form-control">
</td>
</tr>
<tr>
<th bgcolor="lightgrey">end</th>
<td>
<input type="date" name="endday" class="form-control">
</td>
</tr>
<tr>
<th bgcolor="lightgrey">font color</th>
<td>
<input type="color" name="fontcolor" class="forn-control" value="red">
</td>
</tr>
<tr>
<th bgcolor="lightgrey">location</th>
<td>
<label class="radio-inline">
<input type="radio" name="location" class="form-control" checked="checked" value="thailand">thailand
</label>
<label class="radio-inline">
<input type="radio" name="location" class="form-control" value="usa">usa
</label>
<label class="radio-inline">
<input type="radio" name="location" class="form-control" value="france">france
</label>
<label class="radio-inline">
<input type="radio" name="location" class="form-control" value="japan">japan
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit" class="btn btn-success btn-lg">
<input type="reset" value="reset" class="btn btn-danger btn-lg">
</td>
</tr>
</table>
</form>
</body>
</html>
Action.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Itinerary</title>
</head>
<body>
<%
//한글 인코딩 해주자~ 글자 안깨지게~
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String startday = request.getParameter("startday");
String endday=request.getParameter("endday");
String fontcolor=request.getParameter("fontcolor");
String location = request.getParameter("location");
%>
<h2>My Itinerary</h2>
<img src="../image/ani09.gif">
<br><br>
<b style="color: <%=fontcolor %>">
<pre>
name : <%=name %>
start : <%=startday %>
end : <%=endday %>
location : <%=location %>
</pre>
</b>
</body>
</html>
Comments