JSP 스크립트 요소 기능(1)

허다람·2022년 3월 2일
Spring
0

Spring

목록 보기
3/5
post-thumbnail

JSP 스크립트 요소

JSP 스크립트 요소란 JSP 페이지에서 여러가지 동적인 처리를 제공하는 기능으로, <% %> 기호 안에 자바 코드로 구현한다. <% %> 기호를 스크립트릿이라고 부른다.

스크립트 요소의 종류는 세가지이다.

  • 선언문 : JSP에서 변수나 메서드를 선언할 때 사용한다.
  • 스크립트릿 : JSP에서 자바 코드를 작성할 때 사용한다.
  • 표현식 : JSP에서 변수의 값을 출력할 때 사용한다.

먼저 선언문의 기능부터 알아보자

선언문 사용하기

선언문은 JSP 페이지에서 사용하는 멤버 변수나 멤버 메서드를 선언할 때 사용한다. 선언문 안의 멤버는 서블릿 변환시 서블릿 클래스의 멤버로 변환된다.

선언문의 형식

<%! 멤버 변수 or 멤버 메서드 %>

JSP가 처음 나온 초기에는 이렇게 자바 코드를 이용해 JSP 페이지의 필요한 변수나 메서드를 구현했다.

JSP에서 선언문 실습

선언문은 일반적으로 JSP 페이지의 상단에서 주로 사용한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	String name = "다람";
	public String getName(){ return name;}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>안녕하세요 <%=name %>님!!</h1>
</body>
</html>
실행결과

스크립트릿 사용하기

스크립트의 형식

<% 자바 코드 %>

스크립트 실습 예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	String name = "이순신";
	public String getName(){return name;}
%>
<% String age=request.getParameter("age"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트릿 연습</title>
</head>
<body>
	<h1>안녕하세요 <%=name %>님!!</h1>
	<h1>나이는 <%=age %>살입니다!!</h1>
</body>
</html>

실행 결과

http://localhost:9090/javaWebPro/pro12/hello2.jsp?age=22으로 요청하면 나오는 화면이다.

JSP의 스크립트 요소는 브라우저로 전송되지 않고 브라우저로 전송되기 전에 컨테이너에서 자바 코드로 변환되는 것을 알 수 있다.

표현식 사용하기

표현식은 JSP 페이지의 정한 위치에 값을 출력하는 기능이다. 즉, JSP 페이지에서 변수나 메서드의 결과값 등을 브라우저에 출력하는 용도로 사용한다.

표현식의 형식

<%= 값 or 자바 변수 or 자바 식%>

표현식 실습 예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	String name = "이순신";
	public String getName(){return name;}
%>
<% String age=request.getParameter("age"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표현식 연습</title>
</head>
<body>
	<h1>안녕하세요 <%=name %>님!!</h1>
	<h1>나이는 <%=age %>살입니다!!</h1>
	<h1>안녕하세요 <%=name %>님!!</h1>
	<h1>키는 <%=180 %>cm입니다!!</h1>
	<h1>나이+10은 <%=Integer.parseInt(age)+10 %>살입니다!!</h1>
</body>
</html>

실행 결과

JSP 주석문 사용하기

JSP 페이지에서 사용되는 주석문들이다

  • HTML 주석
    <!-- HTML 주석문 -->
  • 자바 주석
    /* 자바 주석문*/ 또는 //
  • JSP 주석
    <%-- JSP 주석문--%>

스크립트 요소 이용해 실습하기

로그인 예제

<login.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<form name="frmLogin" method="post" action="result.jsp" encType="utf-8">
		아이디 : <input type="text" name="user_id"><br>
		비밀번호 : <input type="password" name="user_pw"><br>
		<input type="submit" value="로그인">
		<input type="reset" value="다시 입력">
	</form>
</body>
</html>

<result.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>
	<h1>결과 출력</h1>
<%
	request.setCharacterEncoding("utf-8");
	String user_id=request.getParameter("user_id");
	String user_pw=request.getParameter("user_pw");
%>
	<h1>아이디      : <%= user_id %></h1>
	<h1>비밀번호   : <%= user_pw %></h1>
</body>
</html>

실행 결과

ID와 비밀번호를 입력하면

로그인 정보가 출력된다.

이번에는 스크립트릿 안에 자바 코드를 사용해 ID가 정상적으로 입력되었는지 체크한 후 정상 입력 여부에 따라 동적으로 다른 결과를 출력하는 예시를 해보겠다.
<result2.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String user_id = request.getParameter("user_id");
	String user_pw = request.getParameter("user_pw");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과 출력창</title>
</head>
<body>
	<%
		if(user_id == null || user_id.length() == 0){
	%>
	아이디를 입력하세요.<br>
	<a href="login.html">로그인 하기</a>
	<%
		}else{
	%>
	<h1>환영합니다. <%=user_id %>님!!</h1>
	<%
		} 
	%>
</body>
</html>

실행 결과

login.html의 action 속성을 result2.jsp로 수정 후 실행하여 ID를 정상적으로 입력한 화면이다.

만약 ID를 입력하지 않고 실행한다면

이와 같은 화면을 볼 수 있다.

위의 예제를 좀 더 응용하여 관리자지정을 만들어 보겠다.
<result3.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%	// getParameter() 메서드를 이용해 입력 정보를 가져온다.
	request.setCharacterEncoding("utf-8");
	String user_id = request.getParameter("user_id");
	String user_pw = request.getParameter("user_pw");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과 출력창</title>
</head>
<body>
<%
	if(user_id == null || user_id.length() == 0){
%>
	아이디를 입력하세요.<br>
	<a href="login.html">로그인 하기</a>
<%
	}else{
		if(user_id.equals("admin")){
%>
	<h1>관리자로 로그인 했습니다.</h1>
	<%			
		}
%>
	<h1>환영합니다. <%=user_id %>님!!</h1>
<%
	} 
%>
</body>
</html>

마찬가지로 login.html 액션 태그를 result3으로 변경해 주고 실행하여 ID에 admin을 입력하여 로그인 한다.

실행 결과


관리자로 로그인함을 확인할 수 있다.

다른 아이디로 로그인 할 경우에는 result2에서와 같은 결과가 나오는 것을 확인 할 수 있다.

학점 변환 예제

<scoreTest.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<h1>시험 점수를 입력해 주세요</h1>
	<form method=get action="scoreTest.jsp">
	시험점수 : <input type=text name="score" /><br>
			<input type="submit" value="변환하기">
	</form>
</body>
</html>

<scoreTest.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	int score=Integer.parseInt(request.getParameter("score"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>점수 출력창</title>
</head>
<body>
	<h1>시험점수 <%=score %>점</h1><br>
	<%
	if(score>=90){
	%>
	<h1>A학점 입니다.</h1>
	<% 
	}else if(score>=80 && score<90){
	%>
	<h1>B학점 입니다.</h1>
	<%
	}else if(score>=70 && score<80){
	%>
	<h1>C학점 입니다.</h1>
	<%
	}else if(score>=60 && score<70){
	%>
	<h1>D학점 입니다.</h1>
	<%
	}else{
	%>
	<h1>F학점 입니다.</h1>
	<%
	}
	%>
	<br>
	<a href="scoreTest.html">시험점수입력</a>
</body>
</html>

실행 결과

시험점수 입력창에 시험 점수를 입력한 후 변환하기를 클릭한다.

시험 점수를 학점으로 변환하여 출력해준다.

profile
허다람
나 java봐라
이전 포스트

JSP 정의와 구성 요소

다음 포스트

JSP 스크립트 요소 기능(2)

0개의 댓글