티스토리 뷰

수업문제

[문제] 11월 22일 (jsp 파일로 구구단 / ★별 찍기(익스프레션 빈공간), 스크립트릿, 선언, 표현식, 지시자, bootstrap pricing)

WhaleTREE 2021. 11. 22. 23:39

학습정리-11-22.txt
0.00MB

 

 

1. 아래를 프로그래밍 하시오.
/context명/gugudan.jsp - 구구단을 찍으시오(테이블로)

테이블 만드는 거 자꾸 헷갈리네....

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
32
33
34
35
36
37
<%@ 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>
</head>
<body>
    <table border="1">
        <tr>
            <%
            for (int i = 2; i <= 9; i++) {
            %>
            <td><%=i%> 단</td>
            <%
            }
            %>
        </tr>
        <%
        for (int i = 1; i <= 9; i++) {
        %>
        <tr>
            <%
            for (int j = 2; j <= 9; j++) {
            %>
            <td><%=j + " x " + i + " = " + (j * i)%></td>
            <%
            }
            %>
        </tr>
        <%
        }
        %>
    </table>
</body>
</html>
 cs

 

구구단 bootstrap 적용 버전!

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Insert title here</title>
</head>
<body>
<div class="container">
	<table class="table table-warning table-striped table-hover">
	<thead>
		<tr>
			<%
			for (int i = 2; i <= 9; i++) {
			%>
			<td><%=i%> 단</td>
			<%
			}
			%>
		</tr>
		</thead>
		<%
		for (int i = 1; i <= 9; i++) {
		%>
		<tr>
			<%
			for (int j = 2; j <= 9; j++) {
			%>
			<td><%=j + " x " + i + " = " + (j * i)%></td>
			<%
			}
			%>
		</tr>
		<%
		}
		%>
	</table>
	</div>
</body>
</html>

 

 


/context명/five_star.jsp - 아래의 별을 찍으시오
    *
    **
    ***
    ****
    *****

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
<%@ 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>
</head>
<body>
    <%
    for (int i = 0; i < 5; i++) {
    %>
    <%
        for (int j = 0; j <= i; j++) {
        %>
            *
        <%
        }
        %>
        <br>
    <%
    }
    %>
</body>
</html>
 cs

왜 출력 결과에 *이 한칸씩 떨어져서 출력될까? -ㅋㅋㅋ난 아무생각도 없이 출력 잘된다고 생각했는데....ㅋㅋ....

jsp가 웹페이지에 출력될때는 jsp를 .java 파일로 변환 이것을 jvm이 .class 파일로 컴파일

.java 파일 꼭 확인해보기!

익스프레션으로 감싸이지 않은 빈 공간도 모두 코드로 표현된다. 따라서 빈 공간없이 출력되길 원하면 한줄로 익스프레션을 모두 붙여써야한다.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%@ 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>
</head>
<body>
<%
for(int i = 0; i < 5; i++){
    for(int j = 0; j <= i; j++){
        
        out.print("*");
 
    }
 
    out.println("<br>");
}
%>
============================================= <br>
<!-- 즉, 익스프레션으로 감싸이지 않은 공간은 모두 코드로 처리가 된다... -->
<%
for(int i = 0; i < 5; i++){
    for(int j = 0; j <= i; j++){
%>        
        <%="*" %> 
        <!-- out.write("      "); 앞의 빈공간도 표시된다...
        왜냐하면 앞에 어떤 내용이 들어갈 수도 있기 때문에 -->
<%
    }
%>
<%    
    out.println("<br>");
}
%>
============================================= <br>
<%
for(int i = 0; i < 5; i++){
    for(int j = 0; j <= i; j++){
%><%="*" %><%
    } // 이렇게 익스프레션을 다 붙여서 쓰면 빈공간이 없어진다!!!
%>
<%    
    out.println("<br>");
}
%>
</body>
</html>
 cs

 

Tomcat\apache-tomcat-9.0.55\work\Catalina 파일에 들어가서 .java 파일 확인(코드 중 일부만 발최)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
    try {
      response.setContentType("text/html; charset=UTF-8");
      pageContext = _jspxFactory.getPageContext(this, request, response,
                  null, true, 8192, true);
      _jspx_page_context = pageContext;
      application = pageContext.getServletContext();
      config = pageContext.getServletConfig();
      session = pageContext.getSession();
      out = pageContext.getOut();
      _jspx_out = out;
 
      out.write("\r\n");
      out.write("<!DOCTYPE html>\r\n");
      out.write("<html>\r\n");
      out.write("<head>\r\n");
      out.write("<meta charset=\"UTF-8\">\r\n");
      out.write("<title>Insert title here</title>\r\n");
      out.write("</head>\r\n");
      out.write("<body>\r\n");
 
for(int i = 0; i < 5; i++){
    for(int j = 0; j <= i; j++){
        
        out.print("*");
 
    }
 
    out.println("<br>");
}
 
      out.write("\r\n");
      out.write("\r\n");
      out.write("============================================= <br>\r\n");
      out.write("<!-- 즉, 익스프레션으로 감싸이지 않은 공간은 모두 코드로 처리가 된다... -->\r\n");
 
for(int i = 0; i < 5; i++){
    for(int j = 0; j <= i; j++){
 
      out.write("        \r\n");
      out.write("        ");
      out.print("*" );
      out.write(" \r\n");
      out.write("        <!-- out.write(\"      \"); 앞의 빈공간도 표시된다...\r\n");
      out.write("        왜냐하면 앞에 어떤 내용이 들어갈 수도 있기 때문에 -->\r\n");
 
    }
 
      out.write('\r');
      out.write('\n');
    
    out.println("<br>");
}
 
      out.write("\r\n");
      out.write("\r\n");
      out.write("============================================= <br>\r\n");
 
for(int i = 0; i < 5; i++){
    for(int j = 0; j <= i; j++){
 
      out.print("*" );
 
    } // 이렇게 익스프레션을 다 붙여서 쓰면 빈공간이 없어진다!!!
 
      out.write('\r');
      out.write('\n');
    
    out.println("<br>");
}
 
      out.write("\r\n");
      out.write("</body>\r\n");
      out.write("</html>");
 cs

 

 

/context명/five_star_inverse.jsp - 아래의 별을 찍으시오
    *****
    ****
    ***
    **
    *

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
<%@ 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>
</head>
<body>
    <%
    for (int i = 0; i < 5; i++) {
    %>
 
        <%
        for (int j = i; j < 5; j++) {
        %>
            *
        <%
        }
        %>
    <br>
    <%
    }
    %>
</body>
</html>
 cs

 

 

 


2. 아래에 대하여  예를 들어 설명하시오.
- 지시자

.jsp의 전체적인 속성을 지정할 때 사용한다. 지시자는 page, include, taglib 가 있으며, <%@  속성 %>형태로 사용한다.

page  :  <%@page import="java.util.Arrays"%> 이런 식으로 쓰이며 java의 import와 같은 역할을 한다.

taglib  : 사용자가 만든 tag들을 태그라이브러리라고 한다.  이 태그라이브러리를 사용하기 위해 필요한 지시자이다.

uri 및 prefix 속성이 있으며, uri는 태그라이브러이의 위치 값을 가지며, prefix는 태그를 가리키는 이름 값을 가진다.

 


- 스크립틀릿

<%  java 코드 %>

jsp 문서 안에 java 문법을 넣기 위한 방식.

안에 자바 문법을 넣어서 사용할 수 있다. 이로써 동적인 웹페이지가 된다!

 


- expression(표현식)

<%=        %>

기본적으로 JSP에서출력하려면 아래와 같이 out.println() 메소드를 사용해야 한다.
<% out.println(Arrays.toString(iArr)) %>
이 떄 out.println()을 사용하지 않고 출력하고 싶다면 expression을 사용하면 된다.

<%= Arrays.toString(iArr) %>

세미콜론(;)은 자동으로 붙으니 표현식 내에는 세미콜론을 쓰지 않아도 된다. 또한 표현식 내에는 리턴 타입이 void인 메소드를 호출하지 말자. (표현식 출력값은 String 타입이다.)

 

 

- include
<%@ include file="include01.jsp" %>

"include01.jsp" 파일 내용을 불러와 넣는다.

넣을 때는 해당 파일의 html코드를 모두 가져다 넣기 때문에 html태그 안에 html 태그.....그래서 실제로는 잘 쓰이지 않는다.

 


- declaration(선언)

<%!       %>

변수나 메소드를 선언할 때 사용한다. (전역의 의미)





3. 부트스트랩 Pricing 을 완성하시오.

아........왜 난 이것도 어렵지.....ㅠㅠ하....... 하긴 했는데 코드는 망한듯ㅠㅠㅠㅠㅠㅠㅠ

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- Bootstrap CSS -->
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous">
 
        <title>Pricing example - Bootstrap</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom pr-4 pl-4 shadow-sm rounded-bottom">
            <div class="container-fluid">
            <a class="navbar-brand" href="#">Company name</a>
            
              <div class="navbar-nav justify-content-end flex-row">
                <a class="nav-item nav-link active p-3" href="#">Features<span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link active p-3" href="#">Enterprise</a>
                <a class="nav-item nav-link active p-3" href="#">Support</a>
                <a class="nav-item nav-link active p-3" href="#">Pricing</a>
                <button type="button" class="btn btn-outline-primary align-self-center">Sign up</button>
              </div>
           
            </div>
        </nav>
          <div class="container mx-auto text-center mt-5">      
                <h3 class="display-4">Pricing</h3>
                <p class="lead mb-5">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
          </div>
 
          <div class="container-fluid row m-0">   
                <div class="col-md-4 mb-4">
                    <div class="card text-center">
                        <div class="card-header pt-1 pb-1">
                          <h4 class="font-weight-normal">Free</h4>
                        </div>
                        <div class="card-body text-center">
                          <h1 class="card-title">$0<small class="font-weight-normal text-secondary"> / mo</small></h1>
                          <p class="card-text">
                              <ul class="list-unstyled">
                                  <li>10 users included</li>
                                  <li>2 GB of storage</li>
                                  <li>Email support</li>
                                  <li>Help center access</li>
                              </ul>                           
                          </p>    
                          <a href="#" class="btn btn-outline-primary btn-lg btn-block">Contact us</a>
                        </div>
                      </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card text-center">
                        <div class="card-header pt-1 pb-1">
                          <h4 class="font-weight-normal">Pro</h4>
                        </div>
                        <div class="card-body text-center">
                          <h1 class="card-title">$15<small class="font-weight-normal text-secondary"> / mo</small></h1>
                          <p class="card-text">
                              <ul class="list-unstyled">
                                  <li>20 users included</li>
                                  <li>10 GB of storage</li>
                                  <li>Priority email support</li>
                                  <li>Help center access</li>
                              </ul>                           
                          </p>    
                          <a href="#" class="btn btn-primary btn-lg btn-block">Contact us</a>
                        </div>
                      </div>
                </div>
                <div class="col-md-4 mb-4 shadow">
                    <div class="card text-center">
                        <div class="card-header pt-1 pb-1">
                          <h4 class="font-weight-normal">Enterprise</h4>
                        </div>
                        <div class="card-body text-center">
                          <h1 class="card-title">$29<small class="font-weight-normal text-secondary"> / mo</small></h1>
                          <p class="card-text">
                              <ul class="list-unstyled">
                                  <li>30 users included</li>
                                  <li>15 GB of storage</li>
                                  <li>Phone and email support</li>
                                  <li>Help center access</li>
                              </ul>                           
                          </p>    
                          <a href="#" class="btn btn-primary btn-lg btn-block">Contact us</a>
                        </div>
                      </div>
                </div>       
        </div>
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>
 cs

 

23일 진척도
/context명/gugudan.jsp - 구구단을 찍으시오(테이블로)

 

23번 문제
Money money = new Money(-126000);
money.show();
출력 
잘못된 입력입니다.
오만원 0장....
오만원 0장....
등등등....

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
32
33
34
35
36
37
38
39
40
41
42
43
class Money{
    private int money;
 
    public Money(int money) {
        this.money = money;
    }
    
    public void show() {
        if(money <= 0) {
            money = 0;
            System.out.println("잘못된 입력입니다.");
        }
        
        System.out.println("오만원 " + (money / 50000) + "장");
        money = (money % 50000);
        
        System.out.println("만원 " + (money / 10000) + "장");
        money = (money % 10000);
        
        System.out.println("오천원 " + (money / 5000) + "장");
        money = (money % 5000);
        
        System.out.println("천원 " + (money / 1000) + "장");
        money = (money % 1000);
        
        System.out.println("오백원 " + (money / 500) + "개");
        money = (money % 500);
        
        System.out.println("백원 " + (money / 100) + "개");
        money = (money % 100);
            
    }
    
}
 
public class Test {
 
    public static void main(String[] args) {
        Money money = new Money(-126000);
        money.show();
        
    }
}
 cs

'수업문제' 카테고리의 다른 글

[문제] 11월 24일 (쿠키, 세션)  (0) 2021.11.24
[문제] 11월 23일 (redirect , forward, 액션 태그, 쿠키)  (0) 2021.11.23
[문제] 11월 19일 (servlet으로 학점, 별 찍기, 가위바위보 게임, input 태그)  (0) 2021.11.19
[문제] 11월 18일(Servlet, GET & POST 방식, HttpServletRequest, HttpServletResponse)  (0) 2021.11.18
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함