💡 학습 목표
|
JSP는 기본적으로 HTML 문서 안에 자바 언어를 삽입해 사용할 수 있도록 설계 되어 있습니다.
그래서 실제로 대부분의 변수 선언, 메서드 선언, 로직 등은 자바 언어로 작성할 수 있습니다.
하지만 HTML 사이에 자바 코드를 끼워 넣을 때 필요한 문법이 몇가지 있습니다.
💡 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)란?
자바빈즈와 스코프
|
코드 실습 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>'JSP > CH03 - JSP 기본 문법과 구조' 카테고리의 다른 글
| 06. JSP 지시자(Directive) 간단 정리 (0) | 2024.07.04 |
|---|---|
| 05. JSP 기본 태그 (스크립트릿, 선언, 표현식) (0) | 2024.07.04 |
| 4. JSP 주석과 지시자 (0) | 2024.07.03 |
| 2. JSP 라이프사이클 (0) | 2024.07.03 |
| 1. JSP(Java Server Pages)란? (1) | 2024.07.03 |
