2022-코딩 수업 정리
JSP, HTML 활용 코드
lee-coding
2022. 9. 26. 17:45
함수, 변수의 연산
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.util.Date" %>
<%//<%@page import="java.util.Date" 로 Date를 사용할 수 있게 한다 %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수, 변수의 연산</title>
</head>
<body>
<%
//지역 변수 선언
Date date=new Date();//Date(날짜, 시간)을 사용할 수 있게 한다.
int hour=date.getHours();//hour은 date에서 시간을 가져온 수
int one=10;
int two=12;
%>
<%! //함수는 변수와 달리 무조건 !를 붙여서 전역변수&함수 선언을 해야한다.
public int operation(int i, int j){
if(i>j) return i;//i>j이면 i값을 반환한다.
else return j;// 아닌 경우 j값을 반환한다.
//return i>j? i: j; ==>삼항 연산자로도 할 수 있다.
}
%>
<p>지금은 <%=hour %>시</p>
<p>오전인가 오후인가?:<%= hour<12? "오전": "오후"%></p>
<%
//hour=현재 시간 출력
//삼항 연산자
//hour이 12보다 작다면 오전 출력, 12보다 크다면 오후 출력
%>
<p><%=one %> or <%=two %> 중 큰 수는 <%=operation(one, two) %></p>
<%
//operation(one, two)을 사용하여 함수를 호출하고 함수 안의 내용을 실행시킨 후 출력한다
%>
</body>
</html>
폼 데이터를 다음 페이지로 전송하기
formtest_input.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폼 데이터 전송</title>
</head>
<body>
<form action="formtest_output.jsp" name="form" method="post">
<p>
<label for="name">이름:</label><input type="text" name="name" id="name" value="이름을 입력하세요">
</p>
<p><label for="color">좋아하는 색상:</label>
<select name="color" id="color">
<option value="skyblue">하늘색</option>
<option value="red">붉은색</option>
<option value="green">초록색</option>
<option value="yellow">노란색</option>
</select>
</p>
<%//좋아하는 색상 p태그 종료 %>
<p><input type="submit" vlaue="다음 페이지로 전송하기"></p>
</form>
</body>
</html>formtest_output.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="out_form" >
<%
request.setCharacterEncoding("utf-8");//한글 깨짐 방지
String output_name= request.getParameter("name");
String output_color= request.getParameter("color");
String msg;
%>
<p><%= output_name %>님이 좋아하는 색은 <%=output_color %> 입니다.</p>
<%if(output_color.equals("skyblue")){%>
<div style="width:200px; padding:50px; background-color:skyblue"></div>
<%}else if(output_color.equals("red")){%>
<div style="width:200px; padding:50px; background-color:red"></div>
<%}else if(output_color.equals("green")){%>
<div style="width:200px; padding:50px; background-color:green"></div>
<%}else{%>
<div style="width:200px; padding:50px; background-color:yellow"></div>
<%} %>
<%//다른 방식으로 출력해보기 %>
<%
if(output_color.equals("skyblue")){
msg="하늘색";
}
else if(output_color.equals("red")){
msg="붉은색";
}
else if(output_color.equals("green")){
msg="초록색";
}
else{
msg="노란색";
}
%>
<p><%= output_name %>님이 좋아하는 색은 <%=msg %> 입니다.</p>
<div style="width:200px; padding:50px; background-color:<%=output_color%>"></div>
</body>
</html>
html의 태그, JSP를 활용해서 세로로 구구단 출력하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>구구단 출력하기</title>
</head>
<style>
tr, td{
border: 1px solid #444444;
}
</style>
<body>
<table style= "border: 1px solid #eee;">
<tr>
<%for(int i=2; i<=9; i++){%>
<td><%=i %>단</td>
<%}%>
</tr>
<%for (int i=1; i<=9;i++){%>
<tr>
<%for (int j=2; j<=9;j++){%>
<td><%=j %>X<%=i %>=<%=i*j %></td>
<%}%>
</tr>
<%}%>
</table>
</body>
</html>
에러 발생 페이지
DirectivePage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
import="java.util.*"
errorPage="DirectivePage_error.jsp"
%>
<%//errorPage="DirectivePage_error.jsp"로 에러가 났을 경우 에러 발생 페이지로 연결한다 %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Page 디렉티브: Directive</title>
</head>
<body>
에러 발생 페이지 테스트
<br>
<% Date date=new Date(); //현재 시간을 알 수 있는 date 가져오기%>
<%=date.toLocaleString() %>
<% out.flush();
int one=1;
int zero=0;
%>
<br>
<%=1/0%>
<%//일부러 사용한 에러 코드 %>
<%//에러가 발생하면 에러가 발생한 위치의 아래쪽에 에러 페이지를 붙인다 %>
</body>
</html>DirectivePage_error.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
에러 발생!!
</body>
</html>
html에서 JSP를 사용하여 배열 사용
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열 사용</title>
</head>
<body>
<table style="border: 1px solid #eee; width:300px; height: 150px" >
<%
String[] arry={"java","jsp","html"};
for(int i=0;i<arry.length;++i){
%>
<tr>
<td><%=i %></td>
<td><%=arry[i] %></td>
</tr>
<%} //for문의 end %>
</table>
</body>
</html>
JSP 변수 초기값
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수 초기값</title>
</head>
<body>
<%!//전역변수 선언
int one;//선언부에서는 초기값을 지정하지 않아도 0으로 자동 초기화
//단, 스크립트릿에서는 초기화값을 적어야한다
int two=1;
public int plusMethod(){
return one+two;
}
String msg;//String은 초기값이 null이다
int three;
%>
<p>plusMethod() 함수의 값은? :<%=plusMethod() %></p>
<p>String msg의 값은?:<%=msg%></p>
<p>int three의 값은?:<%=three%></p>
</body>
</html>
JAVA, HTML, JSP 연동
JAVA
package prtClass;
public class Cal {
public static String cmdPrt(int num1, int num2) {
int result=num1+num2;
return "홍길동은 "+result+"살 입니다.";
}
}
패키지 명
prtClass
클래스 명
Cal
매소드 명
cmdPrt
html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="prtClass.*" %>
<%//(패키지명).* 으로 패키지에 있는 class import 하기%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String strMsg;
strMsg=Cal.cmdPrt(10,5);//클래스명.매소드명(넣어야하는 변수)로 호출
out.println(strMsg);
%>
</body>
</html>
include 활용하여 페이지 만들기
include 폴더 안에 위치한 header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
header{padding:50px; background-color: #000;color:#fff;}
</style>
<body>
<article>
<header>
<p>이곳은 로고 및 메뉴가 위치하는 곳입니다.</p>
</header>
</article>
</body>
</html>include 폴더 안에 위치한 footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
footer{padding:50px; background-color: #000;color:#fff;}
</style>
<body>
<article>
<footer>
Korea
</footer>
</article>
</body>
</html>
include.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#container{padding:1px; background-color: #ccc;color:#fff;}
</style>
</head>
<body>
<%@ include file="/include/header.jsp" %>
<jsp:include page="include/header.jsp"></jsp:include>
<%// include를 같은 결과를 가지는 다른 방식으로 사용. %>
<%// 출력하고자 하는 jsp 파일인 include.jsp와 다른 파일에 있기 때문에 경로를 표시하여 연결한다%>
<div id="container">이곳은 내용이 포함되는 부분입니다</div>
<%@ include file="/include/footer.jsp" %>
</body>
</html>