관리 메뉴

거니의 velog

231113_JSP 개론 13 본문

대덕인재개발원_웹기반 애플리케이션

231113_JSP 개론 13

Unlimited00 2023. 11. 13. 08:29

[core01.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
						<!--  
							request.getHeader("User-Agent") request 내장 객체를 이용하여 가져온 header
							'User-Agent'를 EL에서 header['User-Agent']로 작성이 가능하다.
						-->
						browser 변수 값 설정 <br />
						
						<c:set value="${header }" var="hd" />
						User-Agent : <c:out value="${hd['User-Agent'] }" /><br />
						Host : <c:out value="${hd['Host'] }" /><br />
						Accept : <c:out value="${hd['Accept'] }" /><br />
						Accept-Language : <c:out value="${hd['Accept-Language'] }" /><br />
						Referer : <c:out value="${hd['Referer'] }" /><br />
						Connection : <c:out value="${hd['Connection'] }" /><br />
						Cache-Control : <c:out value="${hd['Cache-Control'] }" /><br />
						
						<hr />
						<c:set value="${header['User-Agent'] }" var="userAgent" />
						User-Agent : <c:out value="${userAgent }" /><br />
						
						<p>browser 변수 값 제거 후(userAgent)</p>
						<c:remove var="userAgent" />
						User-Agent : <c:out value="${userAgent }" /><br />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>

- http://localhost/ch17/core01.jsp


[core02.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
						<form action="core02_process.jsp" method="post">
							숫자 : <input type="text" name="number" /><br />
							<button type="submit">전송</button>
						</form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>

[core02_process.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
						<% 
							String number = request.getParameter("number");
						%>
						<c:set value="<%= number %>" var="number" />
						<!--  
							c:when 태그를 사용하여 조건문 number % 2 == 0 이 참이면 number 변수 값을 출력하도록 out 태그를 작성
							위 조건문에 해당하지 않으면 c:otherwise가 실행되도록 작성(c:when과 반대의 결과)
						-->
						<c:choose>
							<c:when test="${number % 2 == 0 }">
								<c:out value="${number }" />는 짝수입니다.
							</c:when>
							<c:otherwise>
								<c:out value="${number }" />는 홀수입니다.
							</c:otherwise>
						</c:choose>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>

- http://localhost/ch17/core02.jsp


[core03.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
                    	<table class="table table-bordered">
							<c:forEach var="i" begin="1" end="9">
								<tr>
									<c:forEach var="j" begin="1" end="9">
										<td width="100">${i } * ${j } = ${i*j }</td>
									</c:forEach>
								</tr>
							</c:forEach>
                    	</table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>

- http://localhost/ch17/core03.jsp


[function01.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
						<p>java 문자열 검색</p>
						<!-- 설정된 문자열에 검색 문자열 java 가 포함되었는지 확인하도록 fn:contains 태그를 작성한다. -->
						<p>Hello, Java Server Page! => ${fn:contains("Hello, Java Server Page!", "java") }</p>
						<!-- 
							설정된 문자열에 검색 문자열 java 가 포함되었는지 확인하도록 fn:containsIgnoreCase 태그를 작성한다. 
							대소문자를 상관하지 않고 검색한다.
						-->
						<p>Hello, Java Server Page! => ${fn:containsIgnoreCase("Hello, Java Server Page!", "java") }</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>

- http://localhost/ch17/function01.jsp


[function02.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
                    	<!--  
                    		split 함수를 이용하여 해당 문자열을 ' '(띄어쓰기)를 구분자로 각각 나눈다.
                    		변수 texts는 ' '로 나뉘어진 배열
                    	-->
						<c:set value="${fn:split('hello, Java Server Pages!', ' ') }" var="texts" />
						
						<!-- 분리된 문자열 길이만큼 반복하여 분리된 문자열을 출력하도록 작성 -->
						<c:forEach var="i" begin="0" end="${fn:length(texts) - 1 }">
							<p>texts[${i }] = ${texts[i] }</p>
						</c:forEach>
						
						<br /><hr />
						
						<!-- 분리된 문자열과 '-'를 연결하도록 fn:join 태그를 작성한다. -->
						<p>
							<c:out value="${fn:join(texts, '-') }" />
						</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>

- http://localhost/ch17/function02.jsp


[ch17_test.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
						<!--  
							문제) 306호 학생들의 각 성씨에 따른 인원수는 각각 몇명인지 작성해 주세요.
							
							[출력예시]
							'김'씨 성을 가진 사람 : 00명
							'박'씨 성을 가진 사람 : 00명
							'이'씨 성을 가진 사람 : 00명
							...
							...
							JSTL을 적극 활용하여 문제를 풀어주세요!
						-->
						<% 
							String[] studentsArr = {
								"강민택", "강진석", "김민채", "김선욱", "김영진",
								"김지호", "민지현", "박상협", "서강민", "신찬섭",
								"유민욱", "이건정", "장낙훈", "전민균", "전승표",
								"정소현", "최룡", "최성동", "최예원", "하지웅",
								"한동욱", "홍창용"
							};
						%>
						<!-- 스크립트릿 태그를 통해 넣은 이름들을 names 변수로 설정(JSTL) -->
						<c:set value="<%= studentsArr %>" var="students" />
						
						<!-- 각 성씨마다 증가할 카운트 변수 -->
						<c:set value="0" var="gangCnt" />
						<c:set value="0" var="kimCnt" />
						<c:set value="0" var="minCnt" />
						<c:set value="0" var="parkCnt" />
						<c:set value="0" var="seoCnt" />
						<c:set value="0" var="shinCnt" />
						<c:set value="0" var="yuCnt" />
						<c:set value="0" var="leeCnt" />
						<c:set value="0" var="jangCnt" />
						<c:set value="0" var="jeonCnt" />
						<c:set value="0" var="jeongCnt" />
						<c:set value="0" var="choiCnt" />
						<c:set value="0" var="haCnt" />
						<c:set value="0" var="hanCnt" />
						<c:set value="0" var="hongCnt" />
						
						<c:forEach items="${students }" var="stu" varStatus="stat">
							<c:choose>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '강' }">
									<c:set var="gangCnt" value="${gangCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '김' }">
									<c:set var="kimCnt" value="${kimCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '민' }">
									<c:set var="minCnt" value="${minCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '박' }">
									<c:set var="parkCnt" value="${parkCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '서' }">
									<c:set var="seoCnt" value="${seoCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '신' }">
									<c:set var="shinCnt" value="${shinCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '유' }">
									<c:set var="yuCnt" value="${yuCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '이' }">
									<c:set var="leeCnt" value="${leeCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '장' }">
									<c:set var="jangCnt" value="${jangCnt + 1 }" />
								</c:when>
							</c:choose>
							<p>[${stat.count }] 당신의 이름은 ? ${stu }</p>
							<font color="red">'${fn:substring(students[stat.index], 0, 1) }'씨 Count 증가!</font>
							<table class="table table-bordered">
								<tr>
									<td>강</td>
									<td>김</td>
									<td>민</td>
									<td>박</td>
									<td>서</td>
									<td>신</td>
									<td>유</td>
									<td>이</td>
									<td>장</td>
								</tr>
								<tr>
									<td>${gangCnt }</td>
									<td>${kimCnt }</td>
									<td>${minCnt }</td>
									<td>${parkCnt }</td>
									<td>${seoCnt }</td>
									<td>${shinCnt }</td>
									<td>${yuCnt }</td>
									<td>${leeCnt }</td>
									<td>${jangCnt }</td>
								</tr>
							</table>
						</c:forEach>
						
						<h5>최종 집계 결과!</h5>
						<table class="table table-bordered">
							<tr>
								<td>강</td>
								<td>김</td>
								<td>민</td>
								<td>박</td>
								<td>서</td>
								<td>신</td>
								<td>유</td>
								<td>이</td>
								<td>장</td>
							</tr>
							<tr>
								<td>${gangCnt }</td>
								<td>${kimCnt }</td>
								<td>${minCnt }</td>
								<td>${parkCnt }</td>
								<td>${seoCnt }</td>
								<td>${shinCnt }</td>
								<td>${yuCnt }</td>
								<td>${leeCnt }</td>
								<td>${jangCnt }</td>
							</tr>
						</table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>

- http://localhost/ch17/ch17_test.jsp


<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">JSP 표준 태그 라이브러리</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>CH17</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
						<!--  
							문제) 306호 학생들의 각 성씨에 따른 인원수는 각각 몇명인지 작성해 주세요.
							
							[출력예시]
							'김'씨 성을 가진 사람 : 00명
							'박'씨 성을 가진 사람 : 00명
							'이'씨 성을 가진 사람 : 00명
							...
							...
							JSTL을 적극 활용하여 문제를 풀어주세요!
						-->
						<% 
							String[] studentsArr = {
								"강민택", "강진석", "김민채", "김선욱", "김영진",
								"김지호", "민지현", "박상협", "서강민", "신찬섭",
								"유민욱", "이건정", "장낙훈", "전민균", "전승표",
								"정소현", "최룡", "최성동", "최예원", "하지웅",
								"한동욱", "홍창용"
							};
						%>
						<!-- 스크립트릿 태그를 통해 넣은 이름들을 names 변수로 설정(JSTL) -->
						<c:set value="<%= studentsArr %>" var="students" />
						
						<!-- 각 성씨마다 증가할 카운트 변수 -->
						<c:set value="0" var="gangCnt" />
						<c:set value="0" var="kimCnt" />
						<c:set value="0" var="minCnt" />
						<c:set value="0" var="parkCnt" />
						<c:set value="0" var="seoCnt" />
						<c:set value="0" var="shinCnt" />
						<c:set value="0" var="yuCnt" />
						<c:set value="0" var="leeCnt" />
						<c:set value="0" var="jangCnt" />
						<c:set value="0" var="jeonCnt" />
						<c:set value="0" var="jeongCnt" />
						<c:set value="0" var="choiCnt" />
						<c:set value="0" var="haCnt" />
						<c:set value="0" var="hanCnt" />
						<c:set value="0" var="hongCnt" />
						
						<c:forEach items="${students }" var="stu" varStatus="stat">
							<c:choose>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '강' }">
									<c:set var="gangCnt" value="${gangCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '김' }">
									<c:set var="kimCnt" value="${kimCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '민' }">
									<c:set var="minCnt" value="${minCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '박' }">
									<c:set var="parkCnt" value="${parkCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '서' }">
									<c:set var="seoCnt" value="${seoCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '신' }">
									<c:set var="shinCnt" value="${shinCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '유' }">
									<c:set var="yuCnt" value="${yuCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '이' }">
									<c:set var="leeCnt" value="${leeCnt + 1 }" />
								</c:when>
								<c:when test="${fn:substring(students[stat.index], 0, 1) == '장' }">
									<c:set var="jangCnt" value="${jangCnt + 1 }" />
								</c:when>
							</c:choose>
							<p>[${stat.count }] 당신의 이름은 ? ${stu }</p>
							<font color="red">'${fn:substring(students[stat.index], 0, 1) }'씨 Count 증가!</font>
							<table class="table table-bordered">
								<tr>
									<td>강</td>
									<td>김</td>
									<td>민</td>
									<td>박</td>
									<td>서</td>
									<td>신</td>
									<td>유</td>
									<td>이</td>
									<td>장</td>
								</tr>
								<tr>
									<td>${gangCnt }</td>
									<td>${kimCnt }</td>
									<td>${minCnt }</td>
									<td>${parkCnt }</td>
									<td>${seoCnt }</td>
									<td>${shinCnt }</td>
									<td>${yuCnt }</td>
									<td>${leeCnt }</td>
									<td>${jangCnt }</td>
								</tr>
							</table>
						</c:forEach>
						
						<h5>최종 집계 결과!</h5>
						<table class="table table-bordered">
							<tr>
								<td>강</td>
								<td>김</td>
								<td>민</td>
								<td>박</td>
								<td>서</td>
								<td>신</td>
								<td>유</td>
								<td>이</td>
								<td>장</td>
							</tr>
							<tr>
								<td>${gangCnt }</td>
								<td>${kimCnt }</td>
								<td>${minCnt }</td>
								<td>${parkCnt }</td>
								<td>${seoCnt }</td>
								<td>${shinCnt }</td>
								<td>${yuCnt }</td>
								<td>${leeCnt }</td>
								<td>${jangCnt }</td>
							</tr>
						</table>
						
						<h5>두번째 방법(Map과 JSTL을 이용하여)</h5>
						<% 
							List<String> list = new ArrayList<String>();
							String[] studentsArr2 = {
								"강민택", "강진석", "김민채", "김선욱", "김영진",
								"김지호", "민지현", "박상협", "서강민", "신찬섭",
								"유민욱", "이건정", "장낙훈", "전민균", "전승표",
								"정소현", "최룡", "최성동", "최예원", "하지웅",
								"한동욱", "홍창용"
							};
							for(int i=0; i<studentsArr2.length; i++){
								list.add(studentsArr2[i]);
							}
							Map<String, Integer> map = new HashMap<>();
						%>
						
						<!-- 성을 key로 성에 따른 카운트 값을 value로 설정할 map 셋팅 -->
						<c:set value="<%= map %>" var="map" />
						
						<!-- list안에 들어 있는 이름들 전부 출력 -->
						<c:forEach items="<%= list %>" var="item">
							<c:out value="${item }"></c:out>
						</c:forEach>
						<br /><hr />
						
						<!--  
							list의 이름을 하나씩 꺼내서 substring 함수를 이용하여 성을 만든 후,
							map의 키로 넣어 값이 있는지 여부를 체크한다.
							값이 없으면 map의 성을 키로 값은 1로 초기 셋팅한다.
							여부를 체크 후 값이 있으면 해당 성을 키로, 해당 성의 값을 +1한 값을 추가로 넣는다.
						-->
						<c:forEach items="<%= list %>" var="item">
							<c:choose>
								<c:when test="${map.get(fn:substring(item, 0, 1)) == null }">
									<c:out value="${map.put(fn:substring(item, 0, 1), 1) }" />
								</c:when>
								<c:otherwise>
									<c:out value="${map.put(fn:substring(item, 0, 1), map.get(fn:substring(item, 0, 1)) + 1) }" />
								</c:otherwise>
							</c:choose>
						</c:forEach>
						<br />
						
						<c:forEach items="<%= map.keySet() %>" var="item">
							<c:out value="'${item }'씨 성을 가진 사람 수 : ${map.get(item) }명" /><br />
						</c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>

</html>


[question01.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">Script Test</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>01</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
						<div class="table-responsive">
							<table class="table table-bordered table-hover" width="100%">
								<tr>
									<th>번호</th>
									<th>제목</th>
									<th>작성자</th>
									<th>작성일</th>
									<th>조회수</th>
								</tr>
								<tr>
									<td class="bno">10</td>
									<td class="btitle">네이버웍스 비정기 업데이트 소식</td>
									<td class="bwriter">관리자</td>
									<td class="bdate">2022-11-16</td>
									<td class="bhit">1455</td>
								</tr>
								<tr>
									<td class="bno">9</td>
									<td class="btitle">네이버웍스 일부 기능의 사양 변경 및 종료 안내</td>
									<td class="bwriter">관리자</td>
									<td class="bdate">2022-11-15</td>
									<td class="bhit">234</td>
								</tr>
								<tr>
									<td class="bno">8</td>
									<td class="btitle">[프로모션 공지] 네이버웍스 X 워크플레이스 결합 서비스 신규 가입 20%추가 할인(~12.31)</td>
									<td class="bwriter">관리자</td>
									<td class="bdate">2022-11-14</td>
									<td class="bhit">23444</td>
								</tr>
								<tr>
									<td class="bno">7</td>
									<td class="btitle">[중요] 네이버웍스 V3.5 정기 업데이트 소식</td>
									<td class="bwriter">관리자</td>
									<td class="bdate">2022-11-13</td>
									<td class="bhit">12466</td>
								</tr>
								<tr>
									<td class="bno">6</td>
									<td class="btitle">[프로모션 사전 공지] 네이버웍스 X 워크플레이스 결합 서비스 20% 추가 할인</td>
									<td class="bwriter">관리자</td>
									<td class="bdate">2022-11-12</td>
									<td class="bhit">111</td>
								</tr>
								<tr>
									<td class="bno">5</td>
									<td class="btitle">드라이브 서비스 DB 업그레이드 작업 사전 안내</td>
									<td class="bwriter">관리자</td>
									<td class="bdate">2022-11-11</td>
									<td class="bhit">2233</td>
								</tr>
							</table>
						</div>
						<hr/><br/>
						<div class="col-md-12 stretch-card grid-margin">
							<div class="card">
								<div class="card-body">
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="checkbox" id="chk" value="Y"> 
										<label class="form-check-label" for="chk">append 여부</label>
									</div>
										<h6>선택한 td안에 있는 글자를 아래 P태그에 출력해주세요!</h6>
									<p id="output" class="text-info">출력란</p>
								</div>
							</div>
						</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>
<script type="text/javascript">
	$(function(){
		var html = "";
		$("td").on("click", function(){
			var chkVal = $("#chk:checked").val();
			
			if(chkVal == "Y"){
				html += $(this).text() + "<br />";
			}else{
				html = $(this).text() + "<br />";
			}
			$("#output").html(html);
		});
	});
</script>
</html>

- http://localhost/scripttest/question01.jsp


[question02.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>쉽게 배우는 JSP 웹 프로그래밍</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%@ include file="/pageModule/headPart.jsp" %>
    <style>
    	td {
    		cursor: pointer;
    		transition: all 0.4s;
    	}
    	td:hover {
    		background-color: orange;
    		color: white;
    	}
    </style>
</head>

<body>
    <%@ include file="/pageModule/header.jsp" %>

    <div class="breadcrumbs" style="padding-top:40px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="breadcrumbs-content">
                        <h1 class="page-title">Script Test</h1>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <ul class="breadcrumb-nav">
                        <li><a href="/">INDEX</a></li>
                        <li>01</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="about-us section">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="content-left wow fadeInLeft" data-wow-delay=".3s">
                   		<div class="table-responsive">
							<caption>앞(SEM PC 자리)</caption>
							<table class="table table-bordered" width="100%" style="text-align:center; font-size:24px;">
								<tr width="100%" height="80px">
									<td width="10%">김지호</td>
									<td width="10%">홍창용</td>
									<td width="10%">김선욱</td>
									<td width="10%">김영진</td>
									<td width="20%"></td>
									<td width="10%">이건정</td>
									<td width="10%">최룡</td>
									<td width="10%">강민택</td>
									<td width="10%">강진석</td>
								</tr>
								<tr height="80px">
									<td>장낙훈</td>
									<td>최성동</td>
									<td>한동욱</td>
									<td>송시운</td>
									<td></td>
									<td>김민채</td>
									<td>정소현</td>
									<td>최예원</td>
									<td></td>
								</tr>
								<tr height="80px">
									<td>박상협</td>
									<td>전승표</td>
									<td>민지현</td>
									<td></td>
									<td></td>
									<td>전민균</td>
									<td>하지웅</td>
									<td></td>
									<td></td>
								</tr>
								<tr height="80px">
									<td></td>
									<td>조현준</td>
									<td>신찬섭</td>
									<td>서강민</td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</table>
							<p id="process">진행 Process를 나타내주세요! <br /></p>
						</div>
						<hr/><br/>
						
						<button type="button" id="clickBtn" class="btn btn-primary">출력</button>
						<div id="output"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@ include file="/pageModule/footer.jsp" %>

    <%@ include file="/pageModule/footerPart.jsp" %>
</body>
<script type="text/javascript">
	$(function(){
		
		var clkVal = "";
		var idx = new Array();
		var temp = new Array();
		
		$("td").on("click", function(){
			var thisIs = $(this);
			
			clkVal = thisIs.text().trim();
			temp.push(clkVal);
			$("#process").html("진행 Process를 나타내주세요! <br />");
			$("#process").append(" <span style='color: red;'>" + temp[0] + "님</span>과 ");
			if(!temp[1]){
				$("#process").append(" <span style='color: red;'> 님</span>의 자리를 바꿉니다.");
			}else {
				$("#process").append(" <span style='color: red;'>" + temp[1] + "님</span>의 자리를 바꿉니다.");
			}
			
			var coord = thisIs.parent().index() + "," + thisIs.index();
			idx.push(coord);
			
			if(idx.length == 2 && temp.length == 2){
				
				var firstCooX = idx[0].split(",")[0].trim();
				var firstCooY = idx[0].split(",")[1].trim();
				var firstNm = temp[0].trim();
				
				var secondCooX = idx[1].split(",")[0].trim();
				var secondCooY = idx[1].split(",")[1].trim();
				var secondNm = temp[1].trim();
				
				$("tr:eq(" + firstCooX + ") td:eq(" + firstCooY + ")").text(secondNm);
				$("tr:eq(" + secondCooX + ") td:eq(" + secondCooY + ")").text(firstNm);
				
				idx = [];
				temp = [];
				
			}
		});
		
		$("#clickBtn").on("click", function(){
			$("#output").empty();
			
			var tblClone = $(".table").clone(true);
		    
		    tblClone.find('td:contains("이건정")').html("<marquee>이건정</marquee>");
		    tblClone.find('td:contains("이건정")').css({
		    	'background-color': 'orange',
		        'color': 'white'
		    });
			
			$("#output").html(tblClone);
		});
		
	});
</script>
</html>

- http://localhost/scripttest/question02.jsp

'대덕인재개발원_웹기반 애플리케이션' 카테고리의 다른 글

231115_SPRING 1 (1)  (0) 2023.11.15
231114_JSP 개론 14  (1) 2023.11.14
231110_JSP 개론 12  (0) 2023.11.10
231109_CRUD 과제  (1) 2023.11.09
231109_JSP 개론 11  (0) 2023.11.09