스크립팅 원소란? JSP페이지에서 java코드를 직접 작성할 수 있게 하는 기능이다.
선언부(Declaration)
- 형태는 <%!자바코드%>
- 멤버변수의 선언 또는 멤버 메서드를 선언하는 용도로 사용한다.
- _jspService() 메소드 외부에 선언된다.(클래스 안에 선언된다.)
<%!
//[선언부(Declaration)]
/*
선언부에 작성한 자바코드는 서블릿으로 변환시 Class안에 생성됨.
즉 멤버 변수 나 멤버 메소드 혹은 상수등을 선언부에서 선언함.
*/
//[멤버 상수]
public static final int INT_MAX = Integer.MAX_VALUE;
//[멤버 변수]
private String mVariable="<h3>선언부에서 선언한 변수</h3>";
//[멤버 메소드]
private int getMaxNumber(int num1,int num2){
return num1 > num2 ? num1 : num2;
}/////////////getMaxNumber
//[선언부에서 내장객체 사용하는 방법]
//방법1]
//멤버변수 선언]
private JspWriter out;
private void showMessage(String message){
try{
out.println(message);
}
catch(IOException e){e.printStackTrace();}
}//////////////////
//방법2]매개변수로 전달 받는다.
private void showMessage(String message,JspWriter out){
try{
out.println(message);
}
catch(IOException e){e.printStackTrace();}
}///////////////
%>
스크립트렛(Scriptlet)
- 형태는 <%자바코드%>
- 사용자의 요청에 따른 실행가능한 자바 코드를 작성.
- _jspService() 메소드내에 삽입된다.
- 이 안에서는 메소드를 구성할 수 없다.
- html 및 자바스크립트 코드 및 css코드안에도 사용가능
스크립틀릿안에 작성한 자바코드는 서블릿으로 변환시 _jspService()메소드 안에 생성됨.
고로 스크립트릿 안에서는 메소드 정의 불가.
※JSP에서 제공하는 내장객체는 _jspService()메소드 안에 선언된 변수(지역변수)로 고로
선언부에서는 사용 불가.(중요)
<%
//[스크립틀릿(Scriptlet)]
/*
스크립틀릿안에 작성한 자바코드는 서블릿으로 변환시 _jspService()메소드 안에 생성됨
고로 스크립트릿 안에서는 메소드 정의 불가.
※JSP에서 제공하는 내장객체는 _jspService()메소드 안에 선언된 변수(지역변수)로 고로
선언부에서는 사용 불가.(중요)
*/
//void method(){}//[x]메소드 정의 불가
String localVariable="<h4>스크립틀릿 안에서 선언한 변수(지역변수)</h4>";
out.println("<h1 class='display-4'>스크립틀릿으로 출력</h1>");
out.println(INT_MAX);
out.println(mVariable);
out.println(localVariable);
out.println("최대값:"+getMaxNumber(10, 100));
//클래스의 멤버변수(this.out) = 지역변수(out)
//선언부에서 선언된 out에 _jspService()메소드에서 선언된 out대입
this.out=out;
showMessage("<h4>this.out=out방식으로 선언부에 선언한 내장객체 전달</h4>");
//두번째 인자는 _jspService()메소드에서 선언된 내장객체]
showMessage("<h4>매개변수에 내장객체 전달</h4>",out);
%>
표현식(expression)
- 형태는 <%=자바코드%>
- _jspServive method 내의 자바 코드로 변환된다
- 문장의 끝에 세미콜론(;)을 붙이지 않는다
- 결과를 화면에 출력한다.
- 단순 표현식 외에 데이터의 연산이나 함수를 호출하는 것도 가능하다
- html 및 자바스크립트 코드 및 css코드안에도 사용가능
<!--
예]<%--="EXPRESSION" --%>
표현식은 _jspService()메소드 안에서 out.print("EXPRESSION");로 변환 됨
고로 표현식 안에서 ;을 붙이면 에러
out.print("EXPRESSION";);와 같이 변환됨으로 에러
-->
<%=INT_MAX %><!-- out.print(INT_MAX);변환됨 -->
<%=mVariable %>
<%=localVariable %>
<%="최대값:"+getMaxNumber(10, 100) %>
<%!
private int getTotal(int start,int end){
int sum=0;
for(int i=start;i<=end;i++) sum+=i;
return sum;
}////////////////
%>
<body>
<div class="jumbotron jumbotron-fluid bg-warning">
<div class="container-fluid">
<h1>Expression 정리</h1>
</div><!--container-fluid-->
</div><!--jumbotron-fluid-->
<div class="container">
<fieldset class="form-group border p-3">
<legend class="w-auto p-3">표현식(Expression) 사용하기</legend>
<h1 class="display-4">out내장객체를 사용한 출력</h1>
<h4>1부터 100까지 누적합</h4>
<%
out.println(getTotal(1, 100));
out.println("<h4>1부터 1000까지 누적합</h4>");
out.println(getTotal(1, 1000));
out.println("<h4>1부터 10000까지 누적합</h4>");
out.println(getTotal(1, 10000));
%>
<h1 class="display-4">표현식을 사용한 출력</h1>
<h4>1부터 100까지 누적합</h4>
<%=getTotal(1, 100) %>
<h4>1부터 1000까지 누적합</h4>
<%=getTotal(1, 1000) %>
<h4>1부터 10000까지 누적합</h4>
<%=getTotal(1, 10000) %>
</fieldset>
</div><!-- container -->
</body>
예제를 통해 사용해보자
CSSL안에서 스크립팅 요소를 사용해보자
1. HTML안에서 사용하기
<body>
<fieldset class="form-group border p-3">
<legend class="w-auto p-3">HTML안에서 사용하기</legend>
<% for(int i=1;i<=6;i++){ %>
<h<%=i %>>h<%=i %> Bootstrap heading</h1>
<%} %>
<form>
<input type="text" class="form-control mb-3" name="counter"/>
<input type="submit" class="btn btn-danger" value="이미지 카우터"/>
</form>
<%
String counter=request.getParameter("counter");
if(counter !=null){
char[] ch=counter.toCharArray();
for(char num : ch){
%>
<img src="<%=request.getContextPath() %>/images/num_<%=num %>.gif" alt="<%=num %>번 이미지"/>
<%
}//for
}//if %>
</fieldset>
</body>
▲숫자를 넣고 버튼을 누르면 해당 숫자를 이미지로 바꿔준다
2. CSS안에서 사용하기
<body>
<fieldset class="form-group border p-3">
<legend class="w-auto p-3">CSS안에서 사용하기</legend>
<span class="lead">CSS를 적용한 텍스트</span>
<form method="post">
<label>글자색</label>
<select name="color" class="form-control">
<option value="">색상 선택요망</option>
<option value="Red">빨강</option>
<option value="Green">그린</option>
<option value="Blue">블루</option>
</select>
<label>글꼴</label>
<select name="font" class="form-control">
<option value="">글꼴 선택요망</option>
<option value="굴림체">굴림체</option>
<option value="바탕체">바탕체</option>
<option value="휴먼옛체">휴먼옛체</option>
</select>
<input class="btn btn-info mt-2" type="submit" value="글꼴 및 색상 변경" />
</form>
</fieldset>
</body>
<%
//사용자 선택값 받기
String color=request.getParameter("color");
String font=request.getParameter("font");
//out.println(String.format("색상:%s,글꼴:%s",color,font));
if(color ==null || color.length()==0 ) color="black";
if(font ==null || font.equals("")) font="Helvetica Neue";
%>
<style>
span{
color:<%=color%>;
font-family:<%=font%>;
}
</style>▲색을 선택하지 않으면 변수 color와 font가 null이므로 if문에 진입하여 기본색상과 기본글씨체를 적용하고 그렇지 않다면 value값을 가져와서 style에 적용한다.
3. 자바스크립트안에서 사용하기
<fieldset class="form-group border p-3">
<legend class="w-auto p-3">자바스크립트안에서 사용하기</legend>
<form class="form-inline">
<label>아이디</label> <input class="form-control mx-2 mt-2" type="text" name="id" />
<label>비밀번호</label> <input class="form-control mx-2 mt-2" type="password" name="pwd" />
<input class="btn btn-info ml-2 mt-2" type="submit" value="로그인" />
</form>
</fieldset>
<%
//사용자 입력값 받기
String id=request.getParameter("id");
String pwd=request.getParameter("pwd");
%>▲ 자바코드
<script>
//파라미터 미 전달시 true
//파라미터 전달시 is not defined 에러
//console.log(<%=id%>==null);
//아래는 파라미터를 전달하든 안하든 에러는 안나지만 항상 false
//console.log("<%=id%>"==null);
//반드시 아래처럼 자스에서는 null체크 해야 한다
console.log("<%=id%>"=="null");
//방법1]자스로 null비교
if("<%=id%>"!="null"){
if("<%=id%>"==="KIM" && "1234" ==="<%=pwd%>"){
alert("<%=id%>님 즐감하세요");
}
else{
alert('회원가입후 이용하세요');
}
}
//방법2]스크립팅 요소안에서 자바로 null비교
<%
if(id !=null){
if("KIM".equals(id) && "1234".equals(pwd)){
out.println("alert('"+id+"님 즐감....');");
}
else{
out.println("alert(\"가입후 이용바람...\");");
}
}
%>
</script>
'JSP' 카테고리의 다른 글
| [JSP]out 객체 (0) | 2022.04.29 |
|---|---|
| [JSP]response 객체 (0) | 2022.04.29 |
| [JSP]request객체 (0) | 2022.04.29 |
| [JSP]지시어(Directive) (0) | 2022.04.28 |
| [JSP]JSP Basic (0) | 2022.04.27 |