System.out.println("Hello, World");

○ 개요

 - 로그인창과 패스워드창,가입하기 버튼과 초기화 버튼을 구현한다. 

 - 아직 DB를 연동안하기 떄문에 ID와 PASSWORD를 각각 'java'와 'servlet'로 정한후 이 아이디와 패스워드로만 접속하게 만든다.

1. 우선 LoginServlet을 만들어준다.

2. 그리고 login.html을 만들어준다.

3. LoginServlet을 다음과 같이 코딩해준다.

4. login.html을 다음과 같이 코딩한다.

5. web.xml도 다음과 같이 묶어준다.

6. 다음과 같이 로그인 form이 꾸며지고 아까 말한 java와 servlet으로 접속을 한다.

7. 다음은 아이디와 패스워드에 따라 변하는 화면이다.

-로그인 성공했을때

-로그인시 ID가 다를때

-로그인시 PASSWORD가 다를때

○ 개요

 - 두개의 숫자를 연산하기 위해서 숫자가 들어가는 텍스트창을 2개 구현한다.

 - Radio버튼이나 Select를 이용하여 연산자(+,-, X, /)를 구현한다.

 - 계산버튼을 눌러서 계산이 되게 해야 한다.

1. 우선 Calculator 클래스 파일을 만들어준다.

2. 작업하기 쉽게 WebContent쪽에 form폴더를 만들어준후 calculator.html파일을 생성한다.

3. 우선 Calculator.java를 코딩한다.

4. 그리고 아까 form폴더에 만들어둔 calculator를 코딩한다.

5. 그다음 역시 Web.xml에 가서 연결한다.

6. 결과

String value = getParameter(String name)

String[] values = getParameter(String name)

만약 name을 모를 경우 

Ennameration names = getParameterName()을 쓰면 된다.

○ <, >

 - 꺽쇠의 의미. 

&lt -> "<"

&gt -> ">"

○ type = "text"

value는 텍스트창에 기본값으로 넣는 용도로 쓰이며, size는 화면에 길이가 X인 텍스트창을 표시하며 maxlength는 최대 입력 길이 제한을 의미한다.

○ type = "password"

패스워드 입력을 할 수 있는 입력폼이 생성된다. 텍스틑 입력할때에는 안보이게 표시된다.

○ type = "checkbox"

위 그림과 같이 체크박스가 생긴다.

○ type = "checkbox" label 연결하기

하루동안 안보이기를 선택해도 체크박스에 체크가 된다. 

라벨 연결은 다음과 같이 연결해도 되지만 전자처럼하는 방법이 정석이니 참고만 한다.

○ type = "radio"

○ type = "radio" 그룹묶기

○ type = "hidden"

화면에서는 아무것도 표시가 안된다. 

○ type = "button"

type="button"은 단독으로 쓰이지 않고 자바 스크립트랑 같이 연동해서 쓰인다. 뒤에 있는 onclick은 자바스크립트다.

value는 버튼에 쓰여질 문구로 쓰인다.

○ type = "reset"

위와 같이 체크박스와 버튼 등을 선택한 다음 [초기화버튼]을 누르게 되면

위와 같이 선택된것이 모두 초기화 된다. 

○ type = "button"

전송버튼을 누르게 되면 input에 입력된 모든 값들이 넘어가게 된다. 

변환

 - 변환이란 어떠한 점 또는 벡터를 사용자가 원하는 점이나 벡터로 이동시키거나 회전 시키는 것.

 - 캐릭터의 이동, 캐릭터의 회전

 - 카메라의 이동, 카메라의 회전

 - 스케일(scale)

○ 좌표계

 - 좌표계는 하나의 기준. 한 점을 측정하기 위한 하나의 기준과 방법일 뿐이며 물리적으로 점 자체가 이동하는 것은 아니다.

종류로는 직죠좌표계, 원기둥 좌표계, 구면 좌표계가 있다.

○ 직교 좌표계

 - 3차원 공간에서 어떠한 점이나 벡터의 위치를 지정할때 가장 일반적으로 사용하는 좌표계(Direct3D, OpenGL에서 사용된다.)

○ 이동 변환

 - 하나의 좌표를 이동 시키는 것.

 - 모든 물체는 하나 이상의 좌표로 표현 할 수 있으며 하나의 이동 변환ㅇ르 통해서 물체를 구성하는 여러 개의 좌표에 같은 이동변환을 수행.

 - 2차원 직교 좌표계에서 이동변환

○ 회전 변환

 - 주어진 크기 만큼 회전축을 기준으로 회전하는 변환

◎ 2차원 평면 회전

 - 회전점 또는 고정점 기준으로 좌표를 회전하는 것.

 - 4개의 모서리 좌표가 모여서 하나의 사각형을 이루므로 4개의 좌표를 회전변환하면 사각형의 회전변환을 수행 할 수 있음.

 - 회전점은 원점(0,0)이다. 원점이 아닐 경우 좌표들을 원점으로 이동 변환한 우에 회전변환을 수행하고 다시 원래의 위치로 이동변환 해야 한다.

◎ 2차원 평면 회전의 3차원 확장

 - 3차원 회전변환은 x,y,z축 각각을 기준으로 회전하여 회전변환을 수행 할 수 있다.

ex) 3차원 좌표P를 x축을 기준으로 30 회전시킨 후, y축을 기준으로 60 회전시키기

○ 오일러 변환

 - x,y,z축을 각각 회전축으로 했을때 각 회전축에 대한 회전각으로 3차원 공간 회전 변환 행렬을 정의

 - 회전 행렬이나 좌표축 자세를 표현하는 직관적인 방법

 - z-y-x 오일러 변환

○ 동차 좌표계

 - 3차원 좌표를 세개의 요소로 표현할 경우 점인지, 벡터인지 혼동 될수 있기 때문에 4개의 요소로 표현한 동차 좌표를 이용한다.

○ 동차 좌표계에서의 이동변환

X' = x + dx

Y' = y + dy

Z' = z + dz

○ 동차 좌표계에서의 크기변환 행렬

X' = X x a

Y' = Y x a

Z' = Z x a

 - 한개체를 x,y,z방향으로 Sx, Sy, Sz배 확대, 축소한다.

○ 동차 좌표계에서의 회전 행렬

- X축 중심으로 θ 회전 Rx

- Y축 중심으로 θ 회전 Ry

- Z축 중심으로 θ 회전 Rz

 - 개체를 i축 주위로 라디안만큼 회전 i축상에 있는 모든 점들은 변하지 않는다.

○ 변환의 결합

 - 행렬들을 하나로 결합하는 이유는 효율을 높이기 위해서다.

[예]수천개의 정점을 가진 물체가 있다. 이 물체가 크기 조정, 회전 후에 마지막으로 평행 되어야 한다고 하면 모든 정점을 세 형랠과 각각 곱하는 대신

세 행렬을 하나로 결합한 후 그 행렬들을 모든 정점들에 적용한다. 

이동행렬 =T, 회전행렬 R, 크기변형 = S

C=TRS이다.

 [변환의 결합은 순서가 중요하다. 왜냐하면 행렬의 곱셈에서 교환법칙은 적용되지 않기 때문이다. AB ≠ BA]

행렬(Matrix)

-행렬이란 2차원으로 배열된 순서쌍.

 - 가로로된 숫자 나열을 행(row)

 - 세로로 된 숫자 나열을 열(columm).

 - m과 n이 같은 행렬을 정방행렬이라고 한다.

○ 대각행렬(diagonal matrix)

 - 행렬의 기본 Aij에서 i와 j가 같은 원소를 대각선 성분이라고 함.

 - 대각선 성분을 제외한 모든 성분이 0인 특별한 형태의 행렬이 가능

○ 단위행렬(identity matrix)

 - 단위 행렬은 실수의 곱에서 1과 같은 역할을 한다.

 - AI = IA = A

○ 전치행렬(transpose matrix)

 - 행을 열로 자리바꿈하거나, 열을 행으로 자리바꿈한 행렬

○ 행렬의 덧셈

○ 행렬의 뺄셈

○ 행렬의 곱셈

 - AB = C

○ 행렬과 스칼라의 곱

KA = AK

○ 행렬의 연산 법칙

 - 덧셈법칙

A + B = B + A

(A+B)+C = A+(B+C)

A + 0 = 0 + A

A + (-A) = 0

-곱셈법칙

AB ≠ BA ( 교환법칙)

A(BC) = (AB)C (결합법칙)

A(B±C) = AB ± AC

AI = IA = A

k(AB) = (kA)B = A(kB)

-스칼라의 곱 법칙

(K+I)A = kA + IA

K(A+B) = kA + kB

(KI)A = K(IA)

(-I)A = -A

0A = 0

-정방행렬 A에 대하여

  - A0 = I

 - A1 = A

 - An+1 = AnA

 - AmAn = Am+n

○ 역행렬

 - 역행렬이란 정방행렬에서만 존재

 - 다음 조건을 만족시키는 행렬의 이미

AA-1 = A-1A = I

 - 정방행렬 이라고 해서 모두 역행렬이 존재하는 것은 아니다. 역행렬이 존재하는 행렬을 가역(inverible)행렬이라고 하고 

    존재하지 않는 행렬을 특이(singular)행렬이라 함.

벡터 Vector

[스칼라]

크기만으로 정해지는 양을 스칼라(scalar)라 한다.

[벡터]

○ 개요

 - 힘, 속도, 도형의 평행이동과 같이 크기와 방향을 함꼐 가지는 양을 벡터라고 한다.

 - 벡터란 크기와 방향을 나타내는 수학적인 도구

 - 일반적으로 벡터를 시각화할때에는 화살표로 표시한다.

시점 A의 위치에는 관계없이 크기와 방향만을 생각하여 로 나타낸다.

○ 동등벡터

 - 벡터는 크기와 방향을 나타내기 때문에 벡터의 시작점은 의미가 없다.

 - 크기와 방향이 같은 벡터를 동등 벡터라고 한다.

○ 성분

 - 벡터의 성분이란 벡터 V의 괄호안의 V1, V2, Vn을 말한다.(말 그대로 벡터의 성분을 의미한다.)

 - 벡터의 성분은 하나의 좌표계로 표현한다.

○ 평행이동

 시점 A의 위치에 관계없이 크기와 방향만을 생각하는 이유

 - 시점 A가 어떤 점에 위치하더라도 도형의 각 점 P에서 AB와 같은 방향이면서 평행이고 또 길이가 

    같은 선분 PP'를 그어 점 P가 옮겨지는 점 P'를 구할 수 있음

○ 단위 벡터

 - 벡터의 크기는 1이며 방향만을 나타낸다.

 - 크기가 1이 아닌 벡터를 단위 벡터로 만들어 주는 것을 벡터의 정규화(Normalization)라고 한다.

○ 주의점!

<HTML 입력 관련 태그들>

-form 태그

 ○ 입력태그들을 묶어주는 태그

 ○ 속성

- action : 요청할 URL - 요청 파라미터를 전송할 CGI의 URL 지정

- method : 요청방식(기본 : GET)

- 기본속성

- name : 전송할 값에 name 값

- 입력태그 : <select>, <textarea>, <input>

- <select> 태그

         ○ 목록 리스트중 선택하도록 하는 태그

         ○ 속성 : multiple : 다중 선택

         ○ 하위태그

-<option> : 선택한 item 등록

-<textarea> 태그

 ○ 여러줄 입력폼

 ○ 속성

- cols : 열수

- rows : 행수

-<input> 태그

○ 다양한 입력폼을 만드는 태그

○ 입력폼의 모양은 Type 속성을 이용하여 지정한다.

○ type

º text : 한줄짜리 text 입력 폼

º password : 패스워드 입력 폼

º checkbox : yes/no를 선택하기 위한 선택 폼

º radio : 여러개중 하나만을 선택하기 위한 선택 폼(여러개중 한개만 선택할 경우 쓰이게 된다)

º file : 전송할 파일을 선택하기 위한 폼

º hidden : 클라이언트에게 보이지 않고 전송할 값을 지정하는 폼

º submit : 전송 버튼

º reset : 초기화 버튼

º button : 그냥버튼(버튼 모양) .javascript와 연동하여 사용한다.

º image : 이미지 전송 버튼

ex)<input type="text">

<직접 HTML구현>

1. WebContent 밑에 form폴더를 만들어준다.

2. 그리고 form폴더에 basic.html을 만들어준다.

3. form 태그를 이용하여 입력태그들을 묶어주게 코딩한다.

4. http://127.0.0.1:8088/myweb/form/basic.html에 들어가면 빈 화면으로 나온다면 성공한 것이다.

5. Select태그를 구현해 볼 것이다. 다음과 같이 구현해본다.

값이 넘어가는 과정은 name="select"로 지정되었기 때문에 select=010과 같이 적용된다.

6. 웹페이지를 실행했을때 다음과 같이 익숙해보이는 화면이 나온다면 성공한 것이다.

7. 만약 사용자가 011을 선택했을때 다른값(SKT)를 보내고 싶다면 <option value="SKT">로 작성하면 된다.

8. 값을 여러개 선택하고 싶다면 select쪽에 multiple을 추가해주면 된다.

9. 다음과 같이 출력된다. 동시에 여러개를 선택하고 싶다면 드래그를 이용하여 지정해주고, 순서적이지 않은 값을 선택하고 싶다면 

ctrl을 이용하여 선택하면 된다.

이렇게 여러 선택된 값들이 넘어갈때에는 select=010&select=017&select=019로 &으로 묶여서 넘어간다.

10. 이번에는 TextArea태그를 이용해보도록 하겠다. 

TextArea코드는 위와 같이 코딩하면 된다.

11. 위 사진과 같이 웹페이지에서 많이 봐오던 텍스트 영역이 나오면 성공한 것이다.

12. 이번에는 TextArea에다가 행과 열 수를 지정해보겠다.

앞에서 언급한것처럼 cols : 열수, rows : 행수를 의미한다. 위와 같은 상황이라면 한줄에 80자를 입력할 수 있으며 

10줄이 늘어난다는 뜻이다.

13. 밑과 같은 그림처럼 텍스트영역이 늘어난것을 확인할 수 있다.

14. 참고로 <TextArea>와 </TextArea> 사이에 문자열을 입력하면 웹페이지에 출력된다. 이게 TextArea의 Default 값이다.

사이에다가 Default값 : 자기소개라고 넣고 돌려보기로 한다.

돌려보았더니 텍스트영역에 Default값 : 자기소개가 Default값으로 같이 출력된다.

15. 참고로 <textarea>와 </textarea>사이는 엔터와 스페이스바를 모두 인식하기 때문에 작성할떄 유의해야 한다. 

다음 그림과 같이 엔터와 스페이스바를 많이 입력해보겠다.

17. 엔터와 스페이스바를 인식하기 때문에 다음과 같이 출력된다. 이에 유의하고 코딩을 해야 한다.

요청 파라미터

 - 클라이언트가 CGI(서블릿)으로 전송하는 데이터

 - CGI가 일처리를 위해 클라이언트로부터 입력 받아야 하는 데이터

 - HTML의 form 태그나 QueryString을 이용해 전송한다.

 - name=value 형태로 전송된다.

javax.servlet.http.HttpServletRequest

- 클라이언트의 요청과 관련된 정보와 동작을 가지고 있는 객체

 - Web Container가 생성하여 service()의 인수로 넘겨준다.

 - ServletRequest의 하위

 - 주요 기능

  º 요청 파라미터 조회

  º HttpSession 객체 조회

  º request scope 상의 component간의 데이터 공유 지원

javax.servlet.http.HttpServletResponse

- 응답할 client에 대한 정보와 동작을 가지고 있는 객체

 - Web container가 생성하여 service()의 인수로 넘겨준다.

 - ServletResponse의 하위

 - 주요 기능

  º 응답 Header 정보 설정(Content type 설정)

  º 응답 Stream 조회

  º Redirect 방식으로 수행 넘기기