반응형
*JSTL(Jsp Standard Tag Library)
-
core 사용)
-
<%@ taglib prefix="이름(보통 c)" uri="http://java.sun.com/jsp/JSTL/core" %>
-
core일때 사용가능 한것)
-
<prefix : core에서 제공하는 tag 명 속성="값" .../>
-
변수 관련
-
선언 : <c:set var ="변수명" value="값" /> //스크립틀릿을 열지 않고도 변수선언 가능.
-
삭제 : <c:remove var="삭제할 변수명" />
-
출력
-
<c:out value="출력할 값"/>//들어온 값(value속성에 있는것)을 그대로 출력한다, 이때의 값은 표현식 또는 EL이 들어가는데, EL이 더 간단.
*EL(Expression Language)
-
///태생의 목적은 출력
-
출력하기 위해 만들어진 언어(브라우저에!)
-
페이지 지시자의 isELIgnored="false" 인 상태에서 사용할 수 있다.
-
null인 경우에는 출력하지 않는다.
-
문자열은 "", '' 모두 사용가능하다.
-
문법) ${ 코드 } //이렇게 나오면 무조건 출력
-
이때의 코드는 연산식-산술(+,-,*,/,%(mod)) , 관계(<(lt),>(gt),<=(le),>=(ge),==(eq),!=(ne)//문장을 쓰듯이 사용할 수 있다는 장점..//), 논리(&&(and) , ||(or)), 삼항 ? : , 단항 (!(not)) 외에는 에러!!(쉬프트 대입 안됨.....)
-
코드->연산자, Scope 객체 (생략가능해서 이름넣으면 나온다??), empty(비어있는지 물어볼때), 웹 파라메터(form controler에서 입력된 값->param.이름//이때의 이름은 HTML Form Control의 이름) 출력(이름이 같아 배열로나온다면 출력할 수 없다.. 옛날코드인 for로 해야...)
-
변수에 직접출력은 할 수 없다...하지만 <c:set var="i"~/>했을때 i를출력하면 값이 나올것....
-
scope객체를 사용하면 출력가능.(<%%>부분은 그 페이지에 없어 보이지 않는다..->잘 쓰지 않는다.)EL만 보게 됨!!
-
->pagecontext, request,responce,
-
pageContext
-
값은 현재페이지에서 만!
-
값 할당)
-
<% pageContext.setAttribute("이름", 값);
-
EL : pageScope.이름
-
-
반드시 어디서 부르는지 알수 있어야 나중에 찾느라 고생하지 않는다. (어디서 타고 들어오는지 알고 있어야 한다.)-잘쓰지 않음.
-
request
-
forward로 이동한 페이지 까지! 사용가능
-
<% request.setAttribute("이름", 값); %>////자주쓰지만 우리눈에 보이지 않아 값이 어디서 들어왔는지 알수 없다.
-
EL : ${ requestScope.이름}//이름찾아 그 값이 requestScope에 들어간다.
-
session
-
/////접속자마다 하나씩 각각 한번만 만들어져 각각 그정보를 사용할 수 있게 된다.
-
접속자 마다 하나씩 생성되고 모든 페이지에서 사용 가능
-
<% session.setAttribute("이름" , 값); %>
-
EL : ${session Scope.이름}
-
application
-
최초 접속자에 의해 하나만 생성되며 모든 접속자가 하나(공용) 사용
-
<% application.setAttrubute("이름", 값); %>
-
EL : ${applicationScope.이름}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
isELIgnored="false"
info="브라우저 출력을 목적으로 만들어진 EL사용-EL사용법"
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/jsp_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
<div>
<strong>연산자</strong>
<div>
<ul>
<li>산술</li>
<li>3+14=${3+14}</li>
<li>14-3=${14-3}</li>
<li>3*14=${3*14}</li>
<li>14/3=${14/3}</li>
<li>14%3=${14%3} / ${14 mod 3}</li>
<li>관계</li>
<li>14>3=${14>3} / ${14 gt 3}</li>
<li>14<3=${14<3} / ${14 lt 3}</li>
<li>14>=3=${14>=3} / ${14 ge 3}</li>
<li>14<=3=${14<=3} / ${14 le 3}</li>
<li>14==3=${14==3} / ${14 eq 3}</li>
<li>14!=3=${14!=3} / ${14 ne 3}</li>
<li>논리</li>
<li>14>3 && 3<14 =${14>3 && 3<14} / ${14 gt 3 and 3 lt 14}</li>
<li>14<3 || 3>14 =${14<3 || 3>14} / ${14 lt 3 or 3 gt 14}</li>
<li>삼항</li>
<li>10은 ${10%2==0?"짝수":"홀수"} / ${10 mod 2 eq 0?"짝수":"홀수" }</li>
<li>9는 ${9%2==0?"짝수":"홀수"} / ${9 mod 2 eq 0?"짝수":"홀수" }</li>
<%--산술,관계,논리,삼항 이외에는 사용할 수 없다.Error발생! <li>${1<<2 }</li> --%>
</ul>
</div>
<div>
<strong>EL을 사용하여 Parameter 처리(param 객체 사용)</strong>
<ul>
<li>이름 : <strong>
<!-- empty : 대상이 null이거나 ''인경우 비교할때 사용.(param.name==null) -->
<c:out value="${empty param.name ?'아래 링크를 클릭하거나 폼에 입력':param.name}"/></strong></li>
<li>나이 : <strong>${param.age}</strong></li>
<!-- EL에는 취약점이 존재하는데 출력은 잘 해주나, cross site script라는 취약점을 가짐.. -->
<!-- EL을 사용하여 출력하면 XSS취약점을 가지게 된다
XSS(cross site script) : 상위 취약점으로 악의적인 목적의 사용자가 HTML Form Control이나
QueryString에 JavaScript Code를 작성하여 서버에서 실행 시키기 위한 취약점.
<script type="text/javascript"> alert("zzzzz");</script>으로 탈취가능해버림..
크롬은 막혀있으나 익스는 뚫린다! => <c:out value=""/>로 막음!
JSTL의 c:out을 사용하면 XSS가 실행되지 않고 그대로 보여진다.(XSS 취약점 막기)
-->
</ul>
<%
String name="김";
//scope객체에 할당한 값은 EL에서 사용할 수 있다.
pageContext.setAttribute("pageName", name);//pageScope
request.setAttribute("reqName", name);//requestScope
session.setAttribute("sesName", name);//sessionScope
application.setAttribute("appName", name);//applicationScope
%>
<ul>
<li><strong>scope객체의 값 사용</strong></li>
<li>변수의 직접 사용(사용불가) :${name}</li>
<li>pageScope 사용 :${pageScope.pageName} / ${pageName}</li>
<li>requestScope 사용 :${requestScope.reqName} / ${reqName}</li>
<li>sessionScope 사용 :${sessionScope.sesName} / ${sesName}</li>
<li>applicationScope 사용 :${applicationScope.appName} / ${appName}</li>
</ul>
</div>
</div>
<a href="use_el.jsp?name=jungyun&age=30">파라메터 연습</a><br/>
<form action ="use_el.jsp" method="get">
<label>이름 :</label>
<input type="text" name="name" class="inputBox"><br/>
<label>나이 :</label>
<input type="text" name="age" class="inputBox"><br/>
<input type="submit" value="입력" class="btn">
</form>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
package day0314;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class TestForward extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name="이";
String[] hobby= {"집가기","점심먹기","낮잠자기"};
request.setAttribute("name", name);
request.setAttribute("hobby", hobby);
RequestDispatcher rd= request.getRequestDispatcher("day0314/use_forward.jsp");
rd.forward(request, response);
}//doGet
}//class
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/jsp_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
이름 :<strong>${name }</strong><br/>
취미 :<%-- ${hobby } --%>
<%
String[] hobby=(String[])request.getAttribute("hobby");
for(int i=0; i<hobby.length; i++){
out.print(hobby[i]);
out.println(", ");
}//end for
%>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
info="EL에서 제공하는 변수관련 태그 사용"
%>
<!-- JSTL을 사용하려면 지시자 선언! -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/jsp_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
<!-- 변수의 선언 -->
<%
int month=3;
pageContext.setAttribute("month", month);
//${}를 사용하려면 c:set을 위에 설정하거나 pageContext로 설정하여 사용할 수 있다.
%>
<c:set var="i" value="14" />
<c:set var="mon" value="<%= month %>"/>
<c:set var="name" value="기미철" />
<!-- 출력 -->
<%-- i=${i}//14 --%>
<%-- i=<c:out value="i"/>//그냥 i만 나옴.. --%>
i=<c:out value="${i+1}"/><br/><!-- 이렇게 씀으로 연산이 가능해 졌다. -->
<strong>${name}보다 <c:out value="${name}"/>취약점이 사라져 c:out 코드가 더 낫다.</strong><br/>
pageScope 사용: <c:out value="${month}"/> (<c:out value="${pageScope.month}"/>)<br/>
<c:set>사용 :<c:out value="${mon}"/>
<!-- 변수의 삭제 : 삭제된 변수는 아무것도 출력되지 않는다. -->
<c:remove var="i"/>
<c:remove var="name"/>
<br/>
변수 삭제 후<br/>
i= <c:out value="${i}"/><br/>
name= <c:out value="${name}"/><br/>
month= <c:out value="${mon}"/><br/>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
-제어문 관련
-
조건 : if -단일 if만 지원
-
<c:if test="조건식">
-
//조건에 맞을 때 수행 문장
-
</c:if>
-
여러 조건을 비교할 때
-
<c:choose>
-
<c:when test="조건식">
-
//조건에 맞을때 수행문장;
-
</c:when>
-
.....
-
<c:otherwise>
-
//모든 조건이 맞지 않을때 수행 문장
-
</c:otherwise>
-
</c:choose>
-
반복문
-
<c:forEach >
-
인덱스 사용
-
<c:forEach var="변수명" begin="시작값" end="끝값" step="증가값">
-
//반복코드 =>${ } //c:out안써도 여기는 안전..
-
</c:forEach>
-
배열/리스트 출력
-
<c:forEach var="변수명" items="${배열명|list명}">//배열명|list명 : scope객체에서 얻어낸 값
-
//반복코드
-
${변수명} //변수가 vo를 가지면 ${변수명.getter명}
-
</c:forEach>
-
<c:forTokens >
-
///문자열에서 특정문자열을 구분하여 출력(for+stringtokenizer)
-
특정 문자열로 구분하여 반복 출력할 때
-
<c:forTokens var="변수명" items="${특정문자가 반복되는 문자열}" delims="문자열을 구분할 조건">
-
${변수명}
-
</c:forTokens>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
info="JSTL의 if문"
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/jsp_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
<%--
조건은 true|false가 들어간다.
<c:if test="false">
오늘은 목요일 입니다.
</c:if>
--%>
<a href="#void">공지사항 읽기</a>
<c:if test="${param.user_role eq 'admin'}">
<a href="#void">공지사항 쓰기</a>
<a href="#void">공지사항 수정</a>
<a href="#void">공지사항 삭제</a>
</c:if>
<div>
<a href="use_if.jsp?user_role=user">일반사용자</a>
<a href="use_if.jsp?user_role=admin">관리자</a>
</div>
<form action="use_if.jsp">
<label>이름</label>:<input type="text" name="name" class="inputBox"/>
<input type="submit" value="입력" class="btn"/>
</form>
<div>
위의 Form Control에서 입력된 이름을 출력하는데, 이름이 '이재찬'이라면 흘러가도록 만들어 보세요. JSTL을 써서..
<c:if test="${param.name eq '이'}">
<marquee>
</c:if>
<c:out value="${param.name}"/><!-- 아닐땐 고정되게 하기 위해서 marguee에 조건을 줌. -->
<c:if test="${param.name eq '이'}">
</marquee>
</c:if>
<marquee>${param.name}</marquee>
</div>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
info="여러조건을 비교할 때 사용하는 choose"
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/jsp_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 250
}
});
$( ".hide-option" ).tooltip({
hide: {
effect: "explode",
delay: 250
}
});
$( ".open-event" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
} );
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
<form action="jstl_choose.jsp">
<label>혈액형 선택</label>
<select name="blood_type">
<option value="a"${param.blood_type eq'a'?" selected='selected'":''}>a형</option>
<option value="ab"${param.blood_type eq'ab'?" selected='selected'":''}>ab형</option>
<option value="b"${param.blood_type eq'b'?" selected='selected'":''}>b형</option>
<option value="o"${param.blood_type eq'o'?" selected='selected'":''}>o형</option>
</select>
<input type="submit" value="혈액형 선택" class="btn"/>
</form>
<div>
<!-- 여러조건을 비교할때 사용 -->
<c:choose>
<c:when test="${param.blood_type eq'a' }">
<c:set var="img" value="blood_type_a.png"/>
</c:when>
<c:when test="${param.blood_type eq'ab' }">
<c:set var="img" value="blood_type_ab.png"/>
</c:when>
<c:when test="${param.blood_type eq'b' }">
<c:set var="img" value="blood_type_b.png"/>
</c:when>
<c:otherwise>
<c:set var="img" value="blood_type_o.png"/>
</c:otherwise>
</c:choose>
<c:if test="${not empty param.blood_type}">
<img src="images/${img}"/>
</c:if>
</div>
<%-- <%
String[] tooltip={"show-option","hide-option","open-event"};
String random=tooltip[new Random().nextInt(3)];
pageContext.setAttribute("tooltip", random);
%>
<c:set var="tooltipId" value="${tooltip}"/>
--%>
<%
int random=new Random().nextInt(3);
pageContext.setAttribute("tooltip", random);
%>
<c:choose>
<c:when test="${tooltip eq 0 }">
<c:set var="tooltipId" value="open-event"/>
</c:when>
<c:when test="${tooltip eq 1 }">
<c:set var="tooltipId" value="show-option"/>
</c:when>
<c:otherwise>
<c:set var="tooltipId" value="hide-option"/>
</c:otherwise>
</c:choose>
<div style="width:500px; height:200px; overflow: auto; border:1px solid #333;">
1조는 PC방 프로그램을 아이템으로 구현하였고, 조장
<span class="${tooltipId}"title="좌석,메세지">이</span> 조원
<span class="${tooltipId}"title="주문,통계 담당">이</span>,
<span class="${tooltipId}"title="회원관리, 관리자관리 담당">김</span>,
<span class="${tooltipId}"title="상품관리">김</span>,
<span class="${tooltipId}"title="주문 담당">박</span>,
<span class="${tooltipId}"title="회원조회,요금제조회,마일리지 담당">백</span>,
<span class="${tooltipId}"title="로그인,회원관리,요금충전 담당">정</span> 으로 구성되어있습니다.
PC방 프로그램을 완벽하게 구현하기 위해서 조장 이하 모든 조원이 합심하여 PC으로 전격출근!하였습니다.
</div>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
info="반복문 forEach 사용"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/jsp_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
<select>
<!-- 증가하는 값을 반복시킬 때 -->
<c:forEach var="i" begin="1" end="100" step="1">
<option value="${i}"><c:out value="${i}"/></option>
</c:forEach>
</select>
<div>
<%
String[] movie={"시네마 천국","주토피아","코어","7인의 사무라이","트루먼쇼","인셉션"};
pageContext.setAttribute("movie", movie);
%>
<ul>
<%-- <c:forEach var="i" begin="1" end="6" step="1"> --%>
<c:forEach var="movie" items="${movie }">
<c:set var="i" value="${i+1}"/>
<li>${i})${movie}</li>
</c:forEach>
</ul>
</div>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
반응형
'국비지원학원 > JSP' 카테고리의 다른 글
99일차-JSP_JSTL+다이어리 (0) | 2019.04.03 |
---|---|
98일차-JSP_JSTL_forTokens (0) | 2019.04.03 |
96일차-JSP_액션태그 (0) | 2019.03.31 |
95일차-JSP_내장 객체 (0) | 2019.03.31 |
94일차-JSP tag's (0) | 2019.03.27 |