Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- NestedFor
- 집합_SET
- 참조형변수
- 인터페이스
- 메소드오버로딩
- abstract
- Java
- 추상메서드
- exception
- EnhancedFor
- GRANT VIEW
- 정수형타입
- 컬렉션 타입
- 한국건설관리시스템
- 자동차수리시스템
- cursor문
- 오라클
- 제네릭
- 예외미루기
- 생성자오버로드
- 예외처리
- 다형성
- 어윈 사용법
- 컬렉션프레임워크
- 환경설정
- oracle
- 대덕인재개발원
- 객체 비교
- 자바
- 사용자예외클래스생성
Archives
- Today
- Total
거니의 velog
231114_JSP 개론 14 본문
[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;
}
</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 nameBox = ""; // 이름을 담을 공간
var elementBox; // Element를 담을 공간
var flag = false; // 첫번째 클릭인지 두번째 클릭인지 나타내는 스위칭 플래그
$("td").on("click", function(){
// 첫 번째 클릭과 두 번째 클릭을 나누어 처리
if(flag) { // 두 번째 클릭 시
flag = false; // 두 번째 클릭 했음!
elementBox.html($(this).html());
$("#process").html(nameBox + "님과 " + $(this).html() + "님을 변경합니다!");
$(this).html(nameBox);
nameBox = "";
elementBox = null;
$("td").css("background-color", "white");
}else{ // 첫 번째 클릭 시
flag = true; // 먼저 클릭 했음!
nameBox = $(this).html(); // 이름을 담는다.
elementBox = $(this);
$(this).css("background-color", "yellow");
$("#process").html(nameBox + "님과 ");
}
});
$("#clickBtn").on("click", function(){
$("#output").html("");
var tds = document.getElementsByTagName("td");
var html = "<table class='table table-bordered' style='text-align:center; font-size: 24px;'><tr>";
for(var i = 1; i <= tds.length; i++){
if(tds[i-1].innerText == "이건정"){
html += "<td width='10%'><marquee><font color='blue'>"+ tds[i-1].innerText +"</font></marquee></td>";
}else{
html += "<td width='10%'>"+ tds[i-1].innerText +"</td>";
}
if(i % 9 == 0){
html += "</tr><tr>";
}
}
html += "</table>";
$("#output").html(html);
});
});
</script>
</html>- http://localhost/scripttest/question02.jsp
[question03.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">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>CH01</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="card">
<div class="card-body">
<p class="card-title text-info">DAEDEOK COFFEE MENU</p>
<div class="row">
<div class="col-md-4 grid-margin grid-margin-md-0 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">COFFEE & ESPRESSO</h4>
<ul class="list-ticked">
<li>
스타벅스 돌체 라떼 <code class="text-primary">5600</code>원
</li>
<li>
화이트 초콜릿 라떼 <code class="text-primary">5600</code>원
</li>
<li>
카라멜 마끼아또 <code class="text-primary">5600</code>원
</li>
<li>
볼론드 에스프레소 라떼 <code class="text-primary">5600</code>원
</li>
<li>
카페 모카 <code class="text-primary">5100</code>원
</li>
<li>
카푸 치노 <code class="text-primary">4600</code>원
</li>
<li>
카페 라떼 <code class="text-primary">4600</code>원
</li>
<li>
오늘의 커피 <code class="text-primary">3800</code>원
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 grid-margin grid-margin-md-0 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">TEAVANA</h4>
<ul class="list-arrow">
<li>
제주 유기농 말차로 만든 라떼 <code class="text-primary">6100</code>원
</li>
<li>
유자 민트 티 <code class="text-primary">5600</code>원
</li>
<li>
라임 패션 티 <code class="text-primary">5600</code>원
</li>
<li>
자몽 허니 블랙 티 <code class="text-primary">5100</code>원
</li>
<li>
차이 티 라떼 <code class="text-primary">5100</code>원
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 grid-margin grid-margin-md-0 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">DAEDEOK FIZZIO</h4>
<ul class="list-star">
<li>
요거트 주스 & 망고 젤리 피지오 <code class="text-primary">6100</code>원
</li>
<li>
쿨 라임 피지오 <code class="text-primary">6600</code>원
</li>
<li>
패션 망고 티 레모네이드 피지오 <code class="text-primary">7100</code>원
</li>
<li>
그린 티 레모네이드 피지오 <code class="text-primary">7100</code>원
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 grid-margin grid-margin-md-0 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">주문 진행표</h4>
<div class="table-responsive">
<table class="table table-bordered text-center" width="100%">
<tr height="100px">
<td width="20%">
<p data-menu="돌체 라떼">
돌체 라떼<br/>
</p>
<code class="text-primary">5600</code>
</td>
<td width="20%">
<p data-menu="화이트 초콜릿 라떼">
화이트<br/>
초콜릿 라떼<br/>
</p>
<code class="text-primary">5600</code>
</td>
<td width="20%">
<p data-menu="카라멜 마끼아또">
카라멜<br/>
마끼아또<br/>
</p>
<code class="text-primary">5600</code>
</td>
<td width="20%">
<p data-menu="볼론드 에스프레소 라떼">
볼론드<br/>
에스프레소 라떼<br/>
</p>
<code class="text-primary">5600</code>
</td>
<td width="20%">
<p data-menu="카페모카">
카페모카<br/>
</p>
<code class="text-primary">5100</code>
</td>
</tr>
<tr height="100px">
<td width="20%">
<p data-menu="카푸치노">
카푸치노<br/>
</p>
<code class="text-primary">4600</code>
</td>
<td width="20%">
<p data-menu="카페 라떼">
카페 라떼<br/>
</p>
<code class="text-primary">4600</code>
</td>
<td width="20%">
<p data-menu="오늘의 커피">
오늘의 커피<br/>
</p>
<code class="text-primary">3800</code>
</td>
<td width="20%">
</td>
<td width="20%">
</td>
</tr>
<tr height="100px">
<td width="20%">
<p data-menu="제주 유기농 말차로 만든 라떼">
제주 유기농<br/>
말차로<br/>
만든 라떼<br/>
</p>
<code class="text-primary">6100</code>
</td>
<td width="20%">
<p data-menu="유자민트 티">
유자<br/>
민트 티<br/>
</p>
<code class="text-primary">5600</code>
</td>
<td width="20%">
<p data-menu="라임 패션 티">
라임<br/>
패션 티<br/>
</p>
<code class="text-primary">5600</code>
</td>
<td width="20%">
<p data-menu="자몽 허니 블랙 티">
자몽 허니<br/>
블랙 티<br/>
</p>
<code class="text-primary">5100</code>
</td>
<td width="20%">
<p data-menu="차이 티 라떼">
차이<br/>
티 라떼<br/>
</p>
<code class="text-primary">5100</code>
</td>
</tr>
<tr height="100px">
<td width="20%">
<p data-menu="망고 젤리 피지오">
망고 젤리<br/>
피지오<br/>
</p>
<code class="text-primary">6100</code>
</td>
<td width="20%">
<p data-menu="쿨 라임 피지오">
쿨<br/>
라임 피지오<br/>
</p>
<code class="text-primary">6600</code>
</td>
<td width="20%">
<p data-menu="레모네이드 피지오">
레모네이드<br/>
피지오<br/>
</p>
<code class="text-primary">7100</code>
</td>
<td width="20%">
<p data-menu="그린티 피지오">
그린 티<br/>
피지오<br/>
</p>
<code class="text-primary">7100</code>
</td>
<td width="20%">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4 grid-margin grid-margin-md-0">
<div class="card">
<div class="card-body">
<h4 class="card-title">주문 내역</h4>
<br/>
<h6 id="ord-id">A-001</h6>
<div class="table-responsive">
<table class="table table-bordered text-center" width="100%" >
<thead>
<tr style='font-size:9px;'>
<th>메뉴명</th>
<th>수량</th>
<th>금액</th>
</tr>
</thead>
<tbody id="order-table">
</tbody>
</table>
</div>
<div>
<h5>총 금액 : <font id="total"></font></h5>
</div>
</div>
</div>
</div>
</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 dataArr = new Array(); // 주문시 음료를 저장할 배열 공간
var countArr = new Array(); // 주문시 저장한 음료의 카운트 수 배열 공간
$("td").on("click", function(){
var price = 0;
var dataFlag = false;
var html = "";
var orderMenu = $(this).find("p").data("menu"); // 클릭한 주문명
var orderPrice = $(this).find("code").text(); // 클릭한 음료의 금액
if(dataArr.length == 0){ // 음료를 저장할 공간이 0일 때 (첫 주문)
dataArr.push(orderMenu + "_" + orderPrice);
countArr.push(1);
}else { // 이미 저장된 데이터가 있을 때
// 음료를 저장하기 위한 dataArr 길이 만큼 반복문을 돌린다.
// 같은 음료를 주문할 시 새로운 공간에 데이터를 추가하는게 아니라
// 같은 음료의 카운트를 증가시킨다.
for(var i = 0; i < dataArr.length; i++) {
if(orderMenu == dataArr[i].split("_")[0]) {
countArr[i]++;
dataFlag = true; // 주문한 음료가 들어 있을 때 flag 변경(스위칭)
break;
}else{
countArr.push(1);
}
}
if(dataFlag == false) { // 새로운 주문 시
dataArr.push(orderMenu + "_" + orderPrice);
}
}
// 주문표를 dataArr 길이만큼 다시 초기화해준다.
for(var i = 0; i < dataArr.length; i++) {
html += "<tr class='menu'>";
html += "<td style='font-size: 9px;'>";
html += "" + dataArr[i].split("_")[0];
html += "</td>"
html += "<td style='font-size: 9px;'>";
html += "" + countArr[i];
html += "</td>"
html += "<td style='font-size: 9px;'>";
html += "" + dataArr[i].split("_")[1];
html += "원</td>"
html += "</tr>"
price += parseInt(dataArr[i].split("_")[1]) * countArr[i];
}
$("#order-table").html(html);
$("#total").html(price);
});
});
</script>
</html>- http://localhost/scripttest/question03.jsp
[question04.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">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>CH01</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" 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>
<hr/>
<div class="progress" style="height: 40px;">
<div class="progress-bar progress-bar-striped" id="myBar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 1px; height: 40px;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<br/>
<h4 id="txt"></h4>
<button type="button" onclick="SeatMoveEvent()" style="padding:12px;border:none;cursor:pointer;">출력</button>
</div>
</div>
</div>
</div>
</div>
</section>
<%@ include file="/pageModule/footer.jsp" %>
<%@ include file="/pageModule/footerPart.jsp" %>
</body>
<script type="text/javascript">
// 학생 랜덤 추첨기
var myArray = [
"김지호", "홍창용", "김선욱", "김영진", "이건정",
"최룡", "강민택", "강진석", "장낙훈", "최성동",
"한동욱", "송시운", "김민채", "정소현", "최예원",
"박상협", "전승표", "민지현", "전민균", "하지웅",
"신찬섭", "서강민"
];
var cnt = 0; // myArray에서 이름을 꺼낼 때 사용하는 index 변수
var seat = 0; // show를 위한 index(td에 index를 배정할 때 사용) 변수
// 학생들 선정을 위한 setInterval 이벤트를 활용
// # 랜덤 이벤트 설정
// - Math.floor(Math.random() * 원하는 숫자 범위); // 0 ~ 원하는 범위 - 1
function SeatMoveEvent(){
var elem = document.getElementById("myBar");
var width = 0;
var seatMove = setInterval(move, 100);
function move(){
$("td").css("background-color", "white"); // 처음에 선택된 td 자리를 흰색으로 초기화
if(width >= 100){ // progressbar가 100% 일때
cnt = Math.floor(Math.random() * 22); // 0~21 학생 수
$("#txt").html(myArray[cnt]); // 결과 출력
var tds = document.getElementsByTagName("td");
for(var j = 0; j < tds.length; j++){
if(tds[j].innerText == myArray[cnt]){ // 테이블 td의 이름과 이름 집합 배열의 이름이 같을 때
tds[j].style.backgroundColor = "yellow"; // 최종 선택된 학생의 이름에 노란색 배치
}
}
clearInterval(seatMove); // interval 이벤트가 종료
}else { // 결과를 꾸미기 까지의 show
seat = Math.floor(Math.random() * 36); // 0~35자리수
$("td:eq("+seat+")").css("background-color", "yellow");
width++; // 프로그레스바 증가
elem.style.width = width + "%";
elem.innerHTML = width + "%";
// 프로그레스바 진행률에 따른 결과 출력
if(width == 10){
$("#txt").html("학생을 랜덤으로 셋팅중입니다!!!");
}
if(width == 20){
$("#txt").html("학생을 선정중입니다!!!");
}
if(width == 30){
$("#txt").html("학생을 출력중입니다!!!");
}
if(width == 80){
$("#txt").html("학생이 곧 출력됩니다!!!");
}
}
}
}
</script>
</html>- http://localhost/scripttest/question04.jsp
'대덕인재개발원_웹기반 애플리케이션' 카테고리의 다른 글
| 231116_SPRING 1 (2) (0) | 2023.11.16 |
|---|---|
| 231115_SPRING 1 (1) (0) | 2023.11.15 |
| 231113_JSP 개론 13 (0) | 2023.11.13 |
| 231110_JSP 개론 12 (0) | 2023.11.10 |
| 231109_CRUD 과제 (1) | 2023.11.09 |
'대덕인재개발원_웹기반 애플리케이션' Related Articles
more
