JSP의 기본 구성요소인 지시어와 주석, 스크립트 요소를 실습해보며 익숙해지기 위한 종합예제이다.
이글에선 다음 요소를 다룬다.
- 주석
- 선언과 참조
- include 지시어
- 스크립트릿
1️⃣ JSP 생성
webapp 우클릭 후 ch06 폴더를 생성한 다음 JSP 파일을 생성해주자.
생성이름은 jspTotal 이다.
생성된 코드는 아래와 같다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>주석 작성
<body> 내부에 아래의 코드를 작성해주자.
<h3>
<!-- HTML 주석 : 화면에서 안보이고 소스보기엔 보임-->
<%-- JSP 주석 : 화면과 소스보기에서 보이지 않음--%>
</h3>선언과 참조
일반변수 선언은 스크립트릿에서 가능하지만
멤버 변수 / 함수 선언은 스크립트릿에서 불가능하다.
따라서 선언문을 이용해 배열과 함수를 선언하자.
일단 <body> 태그의 위에서 작성한 <h3>위에 아래의 코드를 작성해주자.
<%!
String[] members = {"김길동", "홍길동", "김사랑", "박사랑"};
int num1 = 10;
int calc(int num2) {
return num1+num2;
}
%>- 배열로 4명의 이름 저장.
- num1 변수를 10으로 초기화.
- calc() 메서드는 인자로 받은 숫자를 num1과 더해서 결과 리턴
선언된 코드는 다음과 같이 본문의 표현식 / 스크립트릿 등에서 자유롭게 사용가능하다.
스크립트릿을 활용하여 calc()메서드를 호출한다.
아래의 코드를 <h3>태그의 아래부분에 작성해주자.
<h3>
2. calc(10) 메서드 실행 결과 :
<%=calc(10)%>
</h3>
<hr>include 지시어
테스트를 위해 예전글에서 작성했던 hello.jsp를 포함해보자. 이후에도 다른 파일을 포함시킬수 있으니 잘봐두길 바란다.
파일의 위치와 경로를 작성할때 주의해야한다. 현재 코드 위치는 ch06폴더에 있고,
hello.jsp는 webapp폴더 바로 아래에 있기 때문에 상대 경로로 위치를 표핸해주어야 한다.
바로 위에서 작성한 코드의 <hr> 아래에 아래 코드를 작성해주자.
<h3>3. include: hello.jsp</h3>
<%@include file="../hello.jsp"%>스크립트릿
스크립트릿 요소를 사용해 자바의 for문으로 앞에서 선언한 members 배열의 값을 모두 출력해보자.
이름 출력 부분에 out.println()을 사용하지 않기 위해
for문 중간에 닫고 스크립트 요소를 사용한후
다시 for문을 닫는 코드 형식으로 구현하자.
다음 코드를 위에서 작성한코드 아래에 작성해주자.
<h3>4. 스크립트(배열 데이터 출력)</h3>
<ul>
<%
for(String name : members) {
%>
<li><%=name%></li>
<%
}
%>
</ul>2️⃣ 실행 및 결과 확인
최종 코드는 다음과 같다.
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 종합 예제</title>
</head>
<body>
<h2>JSP 종합 예제</h2>
<hr>
<%!
String[] members = {"김길동", "홍길동", "김사랑", "박사랑"};
int num1 = 10;
int calc(int num2) {
return num1+num2;
}
%>
<h3>
<!-- HTML 주석 : 화면에서 안보이고 소스보기엔 보임-->
<%-- JSP 주석 : 화면과 소스보기에서 보이지 않음--%>
</h3>
<h3>
2. calc(10) 메서드 실행 결과 :
<%=calc(10)%>
</h3>
<hr>
<h3>3. include: hello.jsp</h3>
<%@include file="../hello.jsp"%>
<h3>4. 스크립트(배열 데이터 출력)</h3>
<ul>
<%
for(String name : members) {
%>
<li><%=name%></li>
<%
}
%>
</ul>
</body>
</html>
마지막으로 톰캣 서버를 실행시킨후 화면을 확인해보자.
http://localhost:8081/ch06/jspTotal.jsp 로 들어가주면된다.
이런식으로 뜨면 성공이다.
[메인으로 돌아가기]
'Java Spring > 책공부 1 (JSP와 스프링)' 카테고리의 다른 글
| 11. 액션 종합: 계산기 구현 (0) | 2022.07.09 |
|---|---|
| 10. JSP 프로그래밍: 계산기 구현 (0) | 2022.07.09 |
| 8. 계산기 구현 (0) | 2022.07.08 |
| 7. Hello World! (0) | 2022.07.08 |
| 6. ToDo리스트 앱 만들기 (0) | 2022.07.07 |