[JSP, HTML5]구구단

[JSP, HTML5]구구단



FOR문 두개로 TABLE의 가로( j ) 세로( i )를 만들어 

내부 FOR문에서 IF문으로 총 4부분을 나누어서 설정 하였습니다.



<웹페이지>




<코드>



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>구구단</title>    
</head>
<body>
    <center>
        <form>
            <h3 font-size=30px;>구구단</h3>
            <br>
            <TABLE border="1">
                <%
                    for (int i = 0; i < 10; i++) {/* 구구단표의 세로 */
                %>
                <TR align="center">
                    <%
                        for (int j = 1; j < 10; j++) {/* 구구단의 가로 */
                    %>
                    <%
                        if (i == 0 && j == 1) { /* 상단왼쪽칸 */
                    %>
                    <TD bgcolor="red"></TD>
                    <%
                        } else if (j == 1) {
                    %>
                    <TD width="69" bgcolor="red"><%=(i)%></TD>
                    <%
                        } else if (i == 0) {
                    %>
                    <TD width="69" bgcolor="red"><%=(j)%></TD>
                    <%
                        } else {
                    %>
                    <TD><%=(j + "x" + i + "=" + i * j)%></TD>
                    <%
                        }
                    %>
 
                    <%
                        }
                    %>
                </TR>
                <%
                    }
                %>
            </table>
        </form>
    </center>
</body>
</html>
cs


[JSP]현재시간 표시하기


[JSP]현재시간 표시하기



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<%@ page import = "java.text.SimpleDateFormat" %>
<%@ page import = "java.util.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>현재시간은 <%= new SimpleDateFormat().format(new Date()) %>입니다.</h1>
</body>
</html>
cs


Servlet개념1

Servlet



  • Servlet은 Server Side Applet의 약어로 Web 서버 측. Servlet 컨테이너에서 수행되는 Java  클래스.
  • Servlet은 서버의 응용 프로그램을 구현하는 기술로서 서버 프로토콜 종류에 관계 없이 여러가지 어플리케이션 계층 프로토콜 기반의 응용 프로그램을 개발할 수 있다.
  • Servlet을 활용하는 주요 서버환경은 WEB으로써, 웹환경에서는 HTTP 프로토콜을 사용하고 있으므로 HTTP 프로토콜을 기반으로 한 Servlet 프로그램을 주로 구현하게 됨.
  • 다중 스레드 서비가 기본적으로 제공된다. 그러므로 CGI(프로세스 기반의 서비스)보다 빠름.

 



Servlet의 변천

  1. 서블릿무제점대두                    

  2. JSP등장                            

  3. JSP스크립트 기술의 한계      

  4. MVC패턴 주목받기 시작       





Servlet의 이점(웹 애플리케이션 개발시...)

  1. 컨텐츠와 비즈니스 로직을 분리 가능

  2. 컨트로러와 뷰의 역할 분담

  3. 웹 디자이너와 개발자간의 원활한 공동작업 가능

  4. 유지보수 수월

  5. 기능의 확자잉 용이





Servlet의 구조와 생명주기


1. GET방식

  • 서버에 있는 정보를 가져오기 위해 설계됨.

  • 240Byte까지 전달할 수 있음.

  • QUERY_STRING 환경변수를 통해 전달.

  • 형식 : http://xxx.xxx.co.kr/servlet/login?id=hj&name=hong

  • URL노출로 보안성이 요구되는 경우에는 사용할 수 없음.

  • 검색엔진에서 검색단어 전송에 많이 이용함.

2. POST방식


  • 서버로 정보를 올리기위해 설계됨.
  • 데이터크기의 제한은 없다.
  • URL에 파러미터가 표시되지 않음.


[JavaScript & CSS & HTML5]CALCULATOR

[JavaScript & CSS & HTML5]CALCULATOR


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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!-- CALCULATOR -->
 
<!DOCTYPE html>
<html>
<head>


    <style type="text/css">
    
    .input1 {
        font-size: 20pt; font-weight:bold;
        width:268px ;height:30px;}
        .btn1 {
            font-weight:bold; font-size:12pt; 
            background-color:white; padding-top:3px; 
            width:50px ;height : 50px;}    
            .btn2 {
                font-weight:bold; font-size:12pt; 
                background-color:white; padding-top:3px; 
                width:104.8px ;height : 50px;}
            </style>
 
            <script language="JavaScript">
 
                PI = 3.141592654;
                var P = "^";
 
                /*reset output*/
                function clearcal(){
                    CALCULATOR.screen.value = "";}
                    /*+ >>> - || - >>> +*/
                    function CHANGE() {
                        CALCULATOR.screen.value = 
                        (-1* CALCULATOR.screen.value;
                    }
 
                    /*set*/
                    function cal(num){
                        CALCULATOR.screen.value += num;
                    }
 
 
                    /*=*/
                    function answer(){
                        try{
                            MATH_FOW();
                            CALCULATOR.screen.value = eval(document.CALCULATOR.screen.value);
 
                        }catch(e){alert('ERROR')}} 
                        /**/
 
                        /*involution*/                
                        function MATH_FOW() {
                            if(CALCULATOR.screen.value.indexOf(P) != -1) {
                                var POW = CALCULATOR.screen.value.split('^');
                                CALCULATOR.screen.value = Math.pow(POW[0],POW[1]);
                            }
                        }
                        /*sine*/
                        function MATH_SIN() {
                            CALCULATOR.screen.value = eval(document.CALCULATOR.screen.value);
                            CALCULATOR.screen.value = Math.sin(CALCULATOR.screen.value * PI /180);
                        }
                        /*cosine */
                        function MATH_COS() {
                            CALCULATOR.screen.value = eval(document.CALCULATOR.screen.value);
                            CALCULATOR.screen.value = Math.cos(CALCULATOR.screen.value * PI /180);
                        }
                        /*tangent */
                        function MATH_TAN() {
                            CALCULATOR.screen.value = eval(document.CALCULATOR.screen.value);
                            CALCULATOR.screen.value = Math.tan(CALCULATOR.screen.value * PI /180);
                        }
                    </script>
                </head>
<!--      
계산기
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
       입 력 칸        |        0TD
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
  CLEAR  |   =   |PI|        1TD
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
1 | 2 | 3 | + | x^y |        2TD
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
4 | 5 | 6 | - | sin |        3TD
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
7 | 8 | 9 | * | cos |        4TD
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
0 |+/-| . | / | tan |        5TD
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
-->
<body>
    <form name="CALCULATOR">
        <table border="0" bgcolor="#eeeeee" cellspacing="0" cellpadding="5" style="border-width:1px; border-color:black; border-style:solid;" align="center">
            <tr>        <!-- 0TD -->
                <td height="0" bgcolor="#E2E2E2"><input type="text" name="screen" size="23" class="input1"> </td>
            </tr>
            <tr>
                <td>    <!-- 1TD -->
                    <input type="button" value="CLEAR" onclick="clearcal()" class="btn2">
                    <input type="button" value="=" onclick="answer()" class="btn2">
                    <input type="button" value="PI"    onclick="cal(PI)" class="btn1">
                </td>
            </tr>
            <tr>
                <td>    <!-- 2TD -->
                    <input type="button" value="1" onclick="cal(value)" class="btn1">
                    <input type="button" value="2" onclick="cal(value)" class="btn1">
                    <input type="button" value="3" onclick="cal(value)" class="btn1">
                    <input type="button" value="+" onclick="cal(value)" class="btn1">
                    <input type="button" value="^" onclick="cal('^')" class="btn1">
                </td>
            </tr>
            <tr>
                <td>    <!-- 3TD -->
                    <input type="button" value="4" onclick="cal(value)" class="btn1">
                    <input type="button" value="5" onclick="cal(value)" class="btn1">
                    <input type="button" value="6" onclick="cal(value)" class="btn1">
                    <input type="button" value="-" onclick="cal(value)" class="btn1">
                    <input type="button" value="sin" onclick="MATH_SIN()" class="btn1">
                </td>
            </tr>
            <tr>
                <td>    <!-- 4TD -->
                    <input type="button" value="7" onclick="cal(value)" class="btn1">
                    <input type="button" value="8" onclick="cal(value)" class="btn1">
                    <input type="button" value="9" onclick="cal(value)" class="btn1">
                    <input type="button" value="*" onclick="cal(value)" class="btn1">
                    <input type="button" value="cos" onclick="MATH_COS()" class="btn1">
                </td>
            </tr>
            <tr>
                <td>    <!-- 5TD -->
                    <input type="button" value="0" onclick="cal(value)" class="btn1">
                    <input type="button" value="+/-" onclick="CHANGE()" class="btn1">
                    <input type="button" value="." onclick="cal(value)" class="btn1">
                    <input type="button" value="/" onclick="cal(value)" class="btn1">
                    <input type="button" value="tan" onclick="MATH_TAN()" class="btn1">            
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
cs


[GitHub] Install(ver. Window)

[GitHub] Install(ver. Window)




설치파일 주소 : https://git-scm.com/download/win


사용중인 PC(window)에 맞게 선택하여 설치하시면 됩니다.
저는 64-bit!


Next>>>


C드라이브에 저장해주세요.


체크된 항목 확인!

나머지 체크 항목들은 굳이 안해도 될꺼 같아서 안했습니다.


1번 체크해제 후 Next


Next


Next


Next


Next


Next


Next


Next


모두 체크해제해주시고 끝내시면 됩니다.



이상 깃허브(윈도우 64bit)설치 방법이었습니다.


MacOS용 설치는 다음에...


◀ PREV 12 NEXT ▶