💡 학습 목표
- JSP 페이지에서 사용할 수 있는 기초 문법을 익힌다.
- 다양한 JSP 태그와 표현식을 이해한다.
- 간단한 JSP 페이지를 작성하여 동적인 웹 콘텐츠를 생성할 수 있다.
JSP는 기본적으로 HTML 문서 안에 자바 언어를 삽입해 사용할 수 있도록 설계 되어 있습니다.
그래서 실제로 대부분의 변수 선언, 메서드 선언, 로직 등은 자바 언어로 작성할 수 있습니다.
하지만 HTML 사이에 자바 코드를 끼워 넣을 때 필요한 문법이 몇가지 있습니다.
💡 JSP 기초 문법에 종류
- ****JSP 지시어, Directive
- 스크립트릿(Scriptlet)
- 선언부(Declaration)
- 표현부(Expession)
- JSP 액션 태그
JSP 지시어, Directive
<%@ xxxx…. %>
JSP 디렉티브는 JSP 페이지의 전반적인 속성을 설정합니다.
주로 페이지 속성, import 등을 지정합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page import="java.lang.Math" %>
스크립트릿(Scriptlet)
- Java 코드를 HTML 중간에 삽입할 때 사용한다.
- <% ... %> 태그 사이에 Java 코드를 작성한다 (코드 실행 영역에 해당)
<% String greeting = "Hello, JSP!"; out.println(greeting); %>
선언부(Declaration)
JSP 페이지에서 변수를 선언하거나 메서드를 정의할 때 사용한다.
- <%! ... %> 태그를 사용한다.
<%!
private String greeting = "Hello, JSP!";
public String getGreeting() {
return greeting;
}
%>표현식(Expression)
- 값을 출력할 때 사용하며, Java 표현식을 평가한 결과를 HTML로 출력한다.
- <%= ... %> 태그를 사용한다.
<%
String greeting = "Hello, 길동!";
%>
<p>Greeting: <%= greeting %></p>
JSP 액션 태그(Action Tags)
- JSP 페이지에서 자바빈즈(Beans)를 사용하거나 다른 JSP 페이지를 포함시키는 등의 작업을 수행할 때 사용됩니다.
// 자바빈즈를 생성하거나 찾을 때 사용합니다.
<jsp:useBean id="myBean" class="com.example.MyBean" scope="session" />
// 자바빈즈의 속성 값을 설정할 때 사용합니다.
<jsp:setProperty name="myBean" property="username" value="JohnDoe" />
// 자바빈즈의 속성 값을 가져올 때 사용합니다.
<p>Username: <jsp:getProperty name="myBean" property="username" /></p>
// 다른 JSP 페이지를 포함시킬 때 사용합니다.
<jsp:include page="header.jsp" />
// 다른 JSP 페이지로 요청을 포워드할 때 사용합니다.
<jsp:forward page="nextPage.jsp" />
... 등💡 자바빈즈(JavaBeans)란?
- 재사용 가능한 객체: 자바빈즈는 재사용 가능하도록 설계된 Java 객체입니다.
- 특정 규약이 적용된 객체: 자바빈즈는 캡슐화, 기본 생성자, 직렬화 등의 규약을 따릅니다.
- 캡슐화(Encapsulation): 필드는 private으로 선언하고, 접근자 메서드(getter)와 설정자 메서드(setter)를 통해 접근합니다.
- 기본 생성자(Default Constructor): 자바빈즈 클래스는 기본 생성자를 반드시 가져야 합니다.
- 직렬화(Serialization): 자바빈즈는 Serializable 인터페이스를 구현하여 직렬화할 수 있습니다.
- 데이터 저장, 연산 및 전송: 자바빈즈는 애플리케이션에서 데이터를 저장하고, 연산을 수행하며, 다른 컴포넌트나 시스템으로 데이터를 전송하는 데 도움을 줍니다.
정리 - 동일한 클래스를 여러 곳에서 인스턴스화 해서 사용가능하며 스코프(scope) 내에서 재사용될 수 있습니다. 세션 스코프(scope)에서 생성된 자바빈즈 객체는 세션 내내 동일한 객체로 유지될 수 있습니다.
자바빈즈와 스코프
- page: 현재 페이지에서만 사용 가능 (기본값)
- request: 하나의 요청 동안 사용 가능
- session: 세션 동안 사용 가능
- application: 애플리케이션 전체에서 사용 가능
코드 실습 1 - 인사말 생성기
1. HTML 폼 만들기
2. greet.jsp 작성하기
3. 결과 및 테스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>인사말 생성기</h1>
<!-- 절대 경로 -->
<!-- 상대 경로 -->
<form action="greet.jsp" method="POST">
<label for="name">당신에 이름을 입력하세요: </label>
<input type="text" id="name" name="name" >
<button type="submit">서버로 제출</button>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- JSP 페이지의 설정을 정의하는 지시자 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>인사말을 완성 하였습니다.</h1>
<%
// 자바 실행 코드
// request 객체에서 값 추출
String name = request.getParameter("name");
if(name == null || name.trim().isEmpty()) {
out.println("<p> 앗! 당신에 이름을 먼저 입력해주세요 </p>");
} else {
out.print("<p>반가워, " + name + "! 나의 JSP Site 잘 왔어 환영~~");
}
%>
<!-- 다시 이젠 페이지로( 특정 페이지로 이동) -->
<a href="greet_from_page.html">Back</a>
</body>
</html>
코드 실습 2 - 간단한 계산기
1. HTML 폼 만들기
2. calculate.jsp 작성하기
3. 결과 및 테스트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
background-color: #f0f0f0;
}
.container{
width: 300px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form{
display: flex;
flex-direction: column;
}
label{
margin-bottom: 10px;
}
input[type="number"] {
height: 30px;
border: 1px solid #bababa;
border-radius: 5px;
margin-bottom: 20px;
}
input[type="submit"] {
height: 40px;
border-radius: 5px;
border: 0;
background-color: #45a049;
color: #fff;
}
input[type="submit"]:hover{
background-color: #1c5a1f;
}
</style>
</head>
<body>
<div class="container">
<h1>간단한 계산기</h1>
<form action="calculator.jsp" method="post">
<label for = "num1">첫번째 숫자를 입력하세요</label>
<input type="number" id="num1" name="num1" required="required">
<label for = "num2">첫번째 숫자를 입력하세요</label>
<input type="number" id="num2" name="num2" required="required">
<input type="submit" value="계산 요청하기">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
background-color: #f0f0f0;
}
.container{
width: 300px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form{
display: flex;
flex-direction: column;
}
label{
margin-bottom: 10px;
}
input[type="number"] {
height: 30px;
border: 1px solid #bababa;
border-radius: 5px;
margin-bottom: 20px;
}
input[type="submit"] {
height: 40px;
border-radius: 5px;
border: 0;
background-color: #45a049;
color: #fff;
}
input[type="submit"]:hover{
background-color: #1c5a1f;
}
</style>
</head>
<body>
<div class="container">
<h1>간단한 계산기</h1>
<form action="calculate.jsp" method="post">
<label for = "num1">첫번째 숫자를 입력하세요</label>
<input type="number" id="num1" name="num1" required="required" value="10">
<label for = "num2">첫번째 숫자를 입력하세요</label>
<input type="number" id="num2" name="num2" required="required" value="20">
<input type="submit" value="계산 요청하기">
</form>
</div>
</body>
</html>'Java > JSP' 카테고리의 다른 글
| JSP 기본 태그 (스크립트릿, 선언, 표현식) (0) | 2024.07.15 |
|---|---|
| JSP 주석과 지시자 (0) | 2024.07.15 |
| JSP 라이프사이클 (0) | 2024.07.15 |
| JSP(Java Server Pages)란? (0) | 2024.07.15 |
| 서블릿 필터와 리스너란 뭘까? (0) | 2024.07.15 |
