22-03-25(금) 040일차 [HTML, JavaScript, JSP] jsp와 jQuery 기초

수업내용

---

1교시 (09:30-10:20)

• 지난 시간 복습
  자바스크립트 브라우저 객체
  screen navigator histiry location document
  
  한글 인코딩
  https://d2.naver.com/helloworld/19187
  
  HTTP 프로토콜
  https://www.joinc.co.kr/w/Site/Network_Programing/AdvancedComm/HTTP
  
  인터프리터란?
  함수 블록 내부에서 한줄씩 순서대로 읽는 것

2교시 (10:30-11:20)

• 지난 시간 복습, 폼 태그 설명
  form 태그 
  웹문서(html 태그로 만든 문서)에서 웹 서버로
  데이터를 요청할 수 있는 유일한 태그 
  
  웹 문서에서 웹 서버로 데이터를 요청할 수 있는 방법 : request
  1. form  태그 
  2. XMLHttpRequest 객체
  3. Ajax (XMLHttpRequest 객체를 가지고 구글 엔진니어가 만든 형식)
  
  form 속성 attribute
  id form 태그의 유일한 이름
  name form 태그의 이름 
  method 요청할 때 데이터 보내는 방식을 정하기 
  get, post, put, delete, update ..
  get
  1. 사이즈 제한 있다. 
  HTTP1.0 : 500 바이트 정도 , HTTP1.1 : 제한이 없음
  get 256 ~ 4096byte 서버로 전송 가능
  2. 요청 데이터를 header 에 전송
  post
  1. 사이즈 제한 없음 
  2. 요청 데이터를 body 에 전송
  action  웹 서버의 파일위치 및 파일의 이름 또는 별칭(앨리어스)
  
  
  HTTP 프로토쿨
  --------------
  request 요청
  헤더
  바디
  response 응답
  헤더
  서버에서 잘 동작을 해서 결과를 잘 만들어서 클라이언트에게 전달할 때 : 200
  요청한 정보에서 요청한 파일을 찾지 못하면 : 404
  요청한 정보를 파일을 잘 찾아서 일하다가 서버에서 에러가 나면 : 500
  바디
  헤더에서 200번 일 때만 
  바디 태그에 응답 정보를 전송한다.
  
  서버에 요청 정보를 보낼 때
  =======================================================
  form 태그에 있는 input 태그의 type 속성 정해서(선택해서)
  input 태그의 name 속성에 서버에 보내고자하는 정보를 담어서 보낸다.
  서버에서는 jsp 인 경우
  request.getParameter("input 태그의 name 속성의 이름");
  리퀘스트의 객체에 있는 getParameter 함수의 인자로 
  input 태그의 name 속성의 이름 으로 받아온다.
  =======================================================
  
  
  자바스크립트 
  ==============================
  자바 스크립트 세계에 입문한 것을 축하합니다. 
  완전히 개고생이당 ....
  개고생을 하지 않으려면 눈치(내가 지금 사용하는 스크립트가 몬지를 알아야 한다.)가 있어야 한다. 
  
  브라우저 렌더링 엔진 자바스크립트 엔진
  ---------------------------------------------------------------------
  Chrome 블링크(Blink) <- 웹킷(Webkit) V8
  Firefox 게코(Gecko) 스파이더몽키(SpiderMonkey)
  Internet Explorer 트라이덴트(Trident) 차크라(Chakra)
  Safari 웹킷(Webkit) 자바스크립트코어(JavascriptCore)
  Opera 블링크(Blink) V8
  
  
  자바 스크립트는 
  웹 브라우저에서 자바스크립트 소스 읽고 처리하는 해석기 javascript intereter 로 구동한다.
  자바 스크립트는 웹 문서에서 <scrpit>  태그를 이용해서 작성한다.
  
  =============================================
  https://www.ecma-international.org/
  
  ECMA 스크립트 ECMAScript 또는 ES
  Ecma International이 ECMA-262 기술 규칙에 따라
  정의하고 있는 표준화된 스크립트 프로그래밍 언어.
  
  넷스케이프가 표준화를 위해 자바스크립트 기술 규격을
  Ecma 인터내셔널에 제출하고, 이 규격에 대한 작업은
  ECMA-262의 이름으로 1996년 11월부터 시작
  ECMA-262의 초판은 1997년 6월에 채택
  
  ECMA-262 10개 판이 출판, 10판 표준은 2019년 6월 
  
  3판 1999년6월
  5.1판 2011년6월
  6판 2015년6월 ECMAScript 2015, ES2015, ES6
  ~~
  10판 2019년6월 ECMAScript 2019, ES2019, ES10
  매년 6월에 출판 2022년 버전도 나와있음
  =============================================
  
  
  자바스크립트 객체
  ---------------
  자바스크립트에서의 객체는
  프로그램에서 인식할 수 있는 모든 대상을 가리킨다.
  자바스크립트는 웹 사이트나 웹 애플리케이션을 개발하는 언어이므로
  웹과 관련된 대상을 모두 객체로 인식한다.
  
  문서 객체 모델 : Document Object Model : DOM
  웹 문서 자체 document, 이미지 img, 링크 link 등 etc.
  
  브라우저 관련 객체 : Browser Model Object : BOM 
  웹 브라우저에서 사용하는 정보
  screen, navigater, history, location, document 등 
  
  내장 객체 : 
  웹 프로그래밍에서 자주 사용하는 요소들
  Object, String, Number, Boolean, Math, Array, Date
  Function, RegExp, Error, Symbol, XMLHttpRequest 등
  
  기타 객체
  JSON 등
  
  사용자 정의 
  사용자 정의로 만드는 객체
  
  자바스크립트 내장함수
  --------------------
  encodeURI() 문자를 유니 코드값으로 인코딩
  영문, 숫자, 일부 기호(; , / ? : @ & = + $ 등)는 제외
  decodeURI() 유니 코드값을 디코딩 다시 문자로
  
  encodeURIComponent() 문자를 유니 코드값으로 인코딩
  영문, 숫자, 일부 기호(- _ . ! ~ * ' () 둥)는 제외
  decodeURIComponent() 유니 코드값을 디코딩해 다시 문자로
  
  escape() ASCII 이외 문자 인코딩 1바이트 : %XX, 2바이트 : %uXXXX
  unescape() escape() 인코딩한 문자를 디코딩
  
  parseInt() 문자열 정수로
  parseFloat() 문자열 실수로
  
  String() 문자형 데이터 반환
  Number() 숫자형 데이터 반환
  Boolean() true, false 반환
  Boolean(null) -> false
  
  isNaN() is Not a Number의 약자
  숫자가 아닌 문자가 포함되어 있으면 true 반환
  eval() 문자형 데이터를 자바스크립트 코드로 변환 <-- 보안 취약성
  
  
  객체 인스턴스 만들기
  -----------------
  자바스크립트에서 객체는 참조 형태로 사용한다.
  객체 자체가 아니라 인스턴스 instance의 형태로 만들어서 사용한다.
  인스턴스 할 때는 new 예약어를 사용한다.
  new 객체명
  var date = new Date();
  
  객체 = 프로퍼티(속성) property + 메서드 method
  
  
  브라우저 관련 객체
  ------------------
  브라우저 객체 모델 Browser Model Object BOM
  
  window 브라우저 창이 열릴 때마다 하나씩 만들어진다. 최상위 요소
  screen 현재 사용하는 화면 정보
  navigator 현재 사용하는 브라우저의 정보
  history 현재 창에서 사용자의 방문 기록을 저장
  location 현재 페이지의 URL 정보
  document 웹 문서마다 하나씩 있으며, body 태그를 만나면 만들어진다.
  
  window 객체
  -----------------
  open("URL", "새창이름", "새창옵션")
  alter(data)
  
  prompt("질문", "답변")
  
  confirm("질문내용")
  
  moveTo(x, y)
  resizeTo(width, height)
  
  setInterval(function(){ 자바스크립트 코드 }, 일정시간 간격)
  
  setTimeout(function(){ 자바스크립트 코드 }, 일정시간 간격)
  
  navigator 객체
  -----------------
  navigator.userAgent 브라우저와 운영체제 정보
  
  
  history 객체
  -----------------
  history.length 방문 기록에 저장된 목록의 개수
  history.back(n) 이전 방문 사이트로 이동
  history.forward() 다음 방문 사이트로 이동
  history.go(n) n 번째로 이동, +, -
  
  
  location 객체
  -----------------
  location.href URL을 반환한다
  location.hash URL 해시값(#에 명시된 값)
  location.hostname 호스트 이름
  location.host 호스트 이름, 포트번호
  location.protocol 프로토콜
  location.search 쿼리스트링
  loactin.reload() 브라우저 F5 새로고침 기능
  
  screen 객체
  -----------------
  screen.width 화면 너비
  screen.height 화면 높이
  screen.availWidth 작업표시줄 제외한 화면 너비
  screen.availHeight 작업표시줄 제외한 화면 높이
  screen.colorDepth 사용자 모니터 컬러 bit
  
  
  문서 객체 모델 DOM 
  ---------------
  Documnet Object Model 정의
  자바스크립트를 이용해서 웹 문서에 접근하고 제어할 수 있도록
  객체를 사용해 웹 문서를 체계적으로 정리하는 방법
  
  DOM은 웹 문서를 하나의 객체로 정의한다. 
  웹 문서 전체는 document 객체이고 
  텍스트, 이미지, 표 등 모든 요소도 각각 객체이다.
  
  DOM 트리 
  DOM은 웹 문서의 요소를 부모요소와 자식요소로 구분하며
  요소를 부모와 자식구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.
  DOM 트리에서 각 항목을 노드 node 라고 한다.
  루트 노드 root node
  부모 노드 parent node 
  자식 노드 chiled node
  형제 노드 sibling node 
  
  DOM 구성 규칙
  1. 모든 HTML 태그는 요소(element) 노드이다.
  2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드 text node 이다.
  3. HTML 태그에 있는 속성은 자식 노드의 속성 노드 attribute node 이다.
  4. 주석은 주석 노드 comment node 이다. 
  
  
  DOM 요소에 접근하기
  --------------------
  
  HTML 요소(HTMLMCollection)를 가져오는 함수들 
  
  id 선택자
  document.getElementById("id명")
  
  class 선택자
  document.getElementsByClassName("클래스명")
  
  tag 이름 선택자
  document.getElementsByTagName("태그명")
  
  
  
  웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티
  ----------------------------------------------
  자바스크립트에서 웹 요소의 내용을 수정
  innerText 프로퍼티는 텍스트 내용을 표시 
  innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시 
  
  요소명.innerText = 내용;
  요소명.innerHTML = 내용;
  
  속성을 가져오거나 수정하는 getAttribute(), setAttribute()
  ---------------------------------------------------
  getAttribute("속성명");
  setAttribute("속성명", "값")
  
  
  addEventListener() 함수 이벤트 처리
  ---------------------------------------
  요소.addEventListener(이벤트, 함수, 캡쳐여부);
  이벤트 : 이벤트 유형을 지엉(단, on을 붙이지 않는다.)
  함수 : 이벤트가 발생하면 실행할 명령이나 함수 지정
  캡쳐여부 : true (캡처링 : 부모노드에서 자식노드로 전달) default
  false(버블링 : 자식노드 에서 부모노드로 전달)
  
  CSS 속성 접근하기
  -----------------
  document.요소명.style.속성명
  
  
  자바 자료형 
  ------------------
  1. 기초 자료형 : 원시 자료형 : 원시 타입 : primitive type
  2. 참조 자료형 : 객체 자료형 : 객체 타입 : reference type
  
  
  자바스크립트 자료형 : var , let, const
  ---------------
  원시 타입
  -------
  숫자 정수, 실수 : 따옴표 없이 숫자로만 표시 
  var b = 2000;
  문자 작은따옴표 '2022' 큰따옴표 "Hello!" 
  a b 따옴표(쿼테이션)을 사용 않하면 null 을 구분자로 인식
  숫자를 따옴표로 묶으면 문자로 인식 : 문자 숫자
  var g = "Hello!";
  var n = '2022';
  논리 true, false
  var isEmpty = true;
  undefined 자료형이 지정되지 않았을 때의 상태
  변수를 선언하고 값을 할당하지 않은 변수
  없는 객체의 프로퍼티를 읽으려고 시도했을 때의 값
  없는 배열의 요소를 읽으려고 시도했을 때의 값
  아무것도 반환하지 않는 함수가 반환하는 값
  함수를 호출했을 때 전달받지 못한 인수의 값
  null 값이 유효하지 않은 상태
  
  객체 타입
  -------
  객체
  객체 리터럴로 객체 생성하기 
  var card = {suit:"하트", rank:"A"};
  var card1 = {"suit":"하트", "rank":"A"};
  객체 리터럴, 리터럴 객체 : {....}
  변수 card
  프로퍼티 이름 : suit, "suit"
  프로퍼티 값 : "하트", "A"
  배열
  배열 리터럴로 생성
  var evens = [2, 4, 6, 8];
  var evens = new Array(2, 4, 6, 8);
  var empty = new Array();
  함수
  함수 선언문으로 정의하는 법
  function square(x) { return x*x; }
  함수 리터럴로 정의하는 법
  var square = function(x) { return x*x; }
  Function 생성자로 정의하는 방법
  var square = new Function("x", "return x*x");
  화살표 함수(애로우 함수) 표현식으로 정의하는 방법
  var square = x => x*x;
  
  
  변수 
  ----------
  var 예약어 사용 : "바" 라고 발음 : Variable 약자
  =====================================
  자바스크립트에서는 테이터 타입을 사용하지 않는다.
  =====================================
  var 데이터 타입에 변수명을 선언하고 데이터 타입을 대입하면
  자바스크립트 엔진이 알아서 데이터 타입을 맞추어서 생성해 준다. 
  
  var s = "abc"; 아 문자열 이구나 
  var i = 11; 아 숫자, 정수 구나 
  var f = {a:"a", b:"b"}; 리터럴 객체구나 
  var a = new Array[1, 2, 3]; 배열 객체구나 
  var fu = function(abc){ return abc;}: 함수 객체 구나 
  =============================================
  데이터 타입을 알고 싶으면 typeof() 함수를 사용하면 된다.
  =============================================
  
  지역변수 local variable
  함수 안에서 선언하고 
  함수 안에서만 사용
  전역변수 global variable
  스크립트 소스 코드 전체에서 사용
  함수 밖에서 선언
  --------------------------
  함수 안에서 var 예약어 빼고 선언
  --------------------------
  
  ES6 변수 추가
  let 함수 블럭에서만 사용 가능 
  const 상수 역활
  
  =====================================
  변수 사용은
  1. 전역변수는 최소한 사용
  2. var 변수는 함수의 시작 부분에서 선언
  3. for문 카운트 변수로 var 사용하지 말기
  let 으로 사용하기 
  =====================================
  
  함수 
  ------------
  함수를 선언할 때는 
  function 예약어와 중괄호 {} 을 사용한다.
  
  1. 함수 선언문
  ----------
  function 함수명() { 명령문; }
  function 함수명(변수) { 명령문; }
  
  함수 호출 또는 함수 실행
  함수명() 또는 함수명(변수)
  
  
  2. 익명 함수 선언
  --------------
  함수 이름이 없는 함수
  function(){}
  var 변수 = function(){} <-- 함수를 리터럴로 정의
  
  익명 함수 실행
  var sum = function (a, b){ return a+b; }
  document.write(sum(10, 20));
  
  
  3. 즉시 실행 함수
  ---------------
  한 번만 실행하는 함수 
  (function() { 명령 }());
  (function(매개변수) { 명령 }(인수));
  
  
  4. 화살표 함수 : ES6
  -----------------
  (매개변수) => { 함수 내용 }
  
  매개변수가 없는 경우
  const hi = () => { return "안녕하세요" };
  매개변수가 1개인 함수
  let hi = user => { document.writer(user + "안녕하세요");}
  매개변수가 2개 이상인 경우
  let sum = (a,b) => a+b;
  
  
  이벤트 와 이벤트 처리기
  ------------------------
  
  마우스 이벤트
  click 사용자가 HTML 요소르 클릭할 때 이벤트가 발생
  mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생
  .....
  
  키보드 이벤트
  keydown 사용자가 키를 누르는 동안 이벤트가 발생
  keypress 사용자가 키를 눌렀을 때 이벤트가 발생
  keyup 사용자가 키에서 손을 뗄 때 이벤트가 발생
  
  문서로딩 이벤트
  load 문서 로딩이 끝나면 이벤트가 발생
  resize 문서 화면 크기가 바뀌었을 때 이벤트가 발생
  scroll 문서 화면이 스크롤되었을 때 이벤트가 발생
  
  폼 이벤트
  blur 폼 요소에 포커스를 잃었을 때 이벤트가 발생
  change <input>, <select>, <textarea> 태그에서
  목록이나 체크 상태들이 변경되면 이벤트가 발생
  focus 폼 요소에 포커스가 놓였을 때 이벤트가 발생
  <label>, <select>, <textarea>, <button> 태그에서 사용
  reset 폼이 리셋되었을 때 이벤트가 발생
  submit submit 버튼을 클릭했을 때 이벤트가 발생
  
  
  이벤트 처리기 이벤트 핸들러 
  ===================================================
  HTML 태그 안에서 'on' 다음에 '이벤트명'을 붙여서 속성이름을 만들고
  ===================================================
  실행할 이벤트 처리기의 함수명을 작성한다.
  <태그 on이벤트명 = "함수명">
  
  이벤트 처리방법
  HTML 요소의 이벤트 처리기 속성에 설정하는 방법
  <input type="button" onclick="changeColor();">
  DOM 요소 객체의 이벤트 처리기 프로퍼티에 설정하는 방법
  vat btn = document.getElementById("button");
  btn.onclick = changeColor();
  addEventListener 메서드를 사용하는 방법
  vat btn = document.getElementById("button");
  btn.addEventListener("click", changeColor, false);
  
  자바스크립트 브라우저 객체
  screen navigator histiry location document

3교시 (11:30-12:20)

• Servlet
  • https://tomcat.apache.org/tomcat-8.0-doc/servletapi/index.html
• JSP ← 자바를 활용
  ASP : Active Server Page
  JSP : Java Server Page
  request 내장형 객체를 선언해서 사용하면
  javax.servlet.http.HttpServletRequest 인터페이스가 호출되서
  실제로는
  javax.servlet.http.HttpServletRequestWrapper 이 일을 한다.
  
  HTTP 프로토콜을 이용해서 서버에 request를 요청받는 객체
  javax.servlet.HttpServletRequest
  javax.servlet.http.HttpServletRequest
  javax.servlet.http.HttpServletRequestWrapper
  
  response 내장형 객체를 선언해서 사용하면
  javax.servlet.http.HttpServletResponse 인터페이스가 호출되서
  실제로는
  javax.servlet.http.HttpServletResponseWrapper 이 일을 한다.
  
  HTTP 프로토콜을 이용해서 서버에서 response 응답을 하는 객체
  javax.servlet.HttpServletResponse
  javax.servlet.http.HttpServletResponse
  javax.servlet.http.HttpServletResponseWrapper
  
  out 내장형 오브젝트
  javax.servlet.jsp.jspWriter를 사용한다.
  
  C:\00.KOSMO108\30.Web\eclipse_web_work\.metadata\.plugins
  org.eclipse.wst.server.core
  publish
  tmp0
  work
  Catalina
  localhost
  firstWeb
  org.apache.jsp
  hello_jsp.java <--- hello.jsp
  hello_jsp.class
  wtpwebapps
• hello.jsp

<%@ 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>
	Hello Jsp !!!<br>
	<hr>
	<%
		out.println("Hello JSP !!!!");
		out.println("<hr>");
		java.util.Date d = new java.util.Date();
		out.println("Date >>> : " + d + "<br>");
		
		// java.lang.String getParameter(java.lang.String name)
		// Returns the value of a request parameter as a String,
		// or null if the parameter does not exist.
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		System.out.println("id >>> : " + id);
		System.out.println("pw >>> : " + pw);
		out.println("id >>> : " + id + "<br>");
		out.println("pw >>> : " + pw + "<br>");
	%>
</body>
</html>

4교시 (12:30-13:20)

• 자바에서 웹 관련 기술
  ------------------------
  applet : 클라이언트 브라우저에서 jvm이 돌아가는 기술이다.
   이 기술은 보안 상의 이유로 사용 금지.
  Servlet : Server + applet
  JSP : Servlet 을 대체하는 기술 (jsp를 사용하면 Servlet이 사용된다).
  
  현재는
  웹 에서는 JSP를 사용한다.
  Servlet은 대부분 사용하지 않고
  Spring 프레임워크에서 콘트롤러 역할로 사용한다.
  
  JSP : Java Server Page <-- Servlet을 변경한 기술이다.

---

5교시 (14:30-15:20)

• form_1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cgiForm Test</title>
<!-- 디바이스에 최적화된 크기로 출력됨 -->
<meta name="viweport" content="width=device-width, iitail-scale=1">
<style type="text/css">
	div {
			margin: 50px 0px 0px 100px;
		}	
</style>
<script type="text/javascript">

	
	function formTestCheck() {
		alert("formTestCheck()함수 진입");
		// http://localhost:8088/firstWeb/jsp/form_1.jsp
		document.form_1.action="/firstWeb/jsp/form_1.jsp";
		document.form_1.method="GET";
		document.form_1.enctype="application/x-www-form-urlencoded";	// key=value			
		document.form_1.submit();		
	}
</script>
</head>

<body>
<div>
	<form name="form_1" id="form_1">
		<table border="1">
			
			<tr>
				<td>이름</td>
				<td><input type="text" name="mname" /></td>
			</tr>
			<tr>
				<td>아이디</td>
				<td>	
					<input type="text" name="mid" value="아이디" />
					<input type="button" name="midCheck" value="아이디중복확인" />
				</td>
			</tr>
			<tr>
				<td>패스워드</td>
				<td>
				<input type="text" name="mpw" />
				</td>
			</tr>
			<tr>
				<td>핸드폰</td>
				<td>
				<input type="text" name="mhp" />
				</td>
			</tr>
			<tr>
				<td>성별</td>
				<td> 
					<input type="radio" name="mgender" value="M" checked="checked" />남자
					<input type="radio" name="mgender" value="F" /> 여자
				</td>
			</tr>
			<tr>
				<td>취미</td>
				<td> 
					<input type="checkbox" name="mhobby" value="book" />독서		      
					<input type="checkbox" name="mhobby" value="sports" />운동
					<input type="checkbox" name="mhobby" value="mugic" />음악감상
					<input type="checkbox" name="mhobby" value="trable" />여행
				</td>
			</tr>
			<tr>
				<td>지역</td>
				<td> 
					<!-- drop down box -->
					<select name="mlocal">
						<option value="seoul">서울</option>
						<option value="gunggido">경기도</option>
						<option value="junju">전주</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>소개글</td>
				<td>
					<textarea name="mmsg" rows="5" cols="50"></textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2"> 
					<!-- 
						hidden 타입은 화면에 display 되는지 않는다.value 는 서버로 전송이 된다. 
					-->
					<input type="hidden" id="isudtype" name="isudtype" value="I">		
					<input type="button" value="jsp_보내기" id="jspBtn" onclick="formTestCheck()"/>	
					<input type="reset" value="취소" />
				</td>				
			</tr>
		</table>				 		        		     
	</form>	
</div>		
</body>
</html>

6교시 (15:30-16:20)

• form_1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Enumeration" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cgiForm 테스트</title>
</head>
<body>
	<h3>cgiForm 테스트</h3>
	<hr>
	<% request.setCharacterEncoding("UTF-8"); %>
	<%-- 요청한 웹브라우저에서 header 정보 추출하기  --%>
	<%
		Enumeration<String> em = request.getHeaderNames();
		while (em.hasMoreElements()){
			String name = em.nextElement();
			String value = request.getHeader(name);
			out.println(name + " : " + value + "<br>");
			System.out.println(name + " : " + value);		
		}
	%>
	<h3>getParameter</h3>
	<hr>
	<%
		String method = request.getMethod();	
		String isudtype = request.getParameter("isudtype");
		if (isudtype != null) isudtype.toUpperCase();
		
		if (isudtype != null && isudtype.length() > 0){
			System.out.println("isudtype >>> : " + isudtype);
			System.out.println("method >>> : " + method);
			
			if ("I".equals(isudtype)){
				
				// input type="text"
				String mname = request.getParameter("mname");
				out.println("mname >>> : " + mname + "<br>");
				System.out.println("mname >>> : " + mname);
				
				String mid= request.getParameter("mid");
				out.println("mid >>> : " + mid + "<br>");
				System.out.println("mid >>> : " + mid);
				
				String mpw= request.getParameter("mpw");
				out.println("mpw >>> : " + mpw + "<br>");
				System.out.println("mpw >>> : " + mpw);
				
				// input type="radio"
				String mgender= request.getParameter("mgender");
				out.println("mgender >>> : " + mgender + "<br>");
				System.out.println("mgender >>> : " + mgender);
				
				// input type="checkbox"
				String mhobby = "";
				String hobby[] = request.getParameterValues("mhobby");
				if (hobby != null) {
					for (int i=0; i < hobby.length; i++) {
						// out.println("hobby :" + hobby[i] + ", <br>");
						// System.out.println("hobby :" + hobby[i] + ",");
						mhobby += hobby[i] + ",";
					}
				}
				out.println("mhobby >>> : " + mhobby + "<br>");
				
				// input type="select"
				String mlocal= request.getParameter("mlocal");
				out.println("mlocal >>> : " + mlocal + "<br>");
				System.out.println("mlocal >>> : " + mlocal);
				
				// textarea
				String mmsg= request.getParameter("mmsg");
				out.println("mmsg >>> : " + mmsg + "<br>");
				System.out.println("mmsg >>> : " + mmsg);
			}
		} else {
			System.out.println("isudtype 타입을 잘 넘기세요 >>> : ");
		}
	%>
</body>
</html>

7교시 (16:30-17:20)

• jQuery
  ========================
  CDN Content Delivery Network
  --------------------------------
  웹 사이트의 접속자가 콘텐츠를 다운로드할 때
  자동으로 가장 가까운 서버에서 다운로드할 수 있도록 하는 기술입니다.
  
  jQuery 버전
  ----------------------------
  jQuery 3.x
  jQuery 2.x
  jQuery 1.x
  
  uncompressed : 원본 파일 (확장자 : .js)
  minified : 원본을 압축한 파일 (확장자 : .min.js)
  slim : 해당 버전에서 필요없다고 생각하는 라이브러리를 제거한 파일 (.slim.js)
  slim minified : slim 파일을 압축한 파일(.slim.min.js)
  
  jQuery 1.12.14 minified 버전
  ----------------------------------
  <script scr="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  integrity : URL을 SHA256 방식으로 해시한 값
  crossorgin : CORS(Cross-Origin Resource Sharing 교차 출처 자원 공유)
             요청을 받은 웹서버가 허용할 경우에는
             다른 도메인의 웹 페이지 스크립트에서도 자원을 주고받을 수 있게 해줌
  
  하위버전 마이그레이션
  ----------------------------------
  jQuery 1.12.x or jQuery 2.2.x이상 버전을 사용중이고 jQuery 3.x 이상으로 Upgrade 하는 경우
  <script src="https://code.jquery.com/jquery-migrate-3.3.2.js"></script>
  
  jQuery 1.9이하 버전 사용중 jQuery 1.12.x or jQuery 2.2.x로 먼저 Upgrade 필요할 경
  <script src="https://code.jquery.com/jquery-migrate-1.4.1.js"></script>
  
  다른 CDNS
  ----------------------------------
  Google CDN
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  
  Microsoft CDN
  https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js
  
  우리가 사용할 CDN =========================================================================
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  =========================================================================

8교시 (17:30-18:30)

• form_2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form_2.jsp</title>
</head>

<body>
	<h3>jQuery Test</h3>
</body>
</html>

• form_2.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JavaScript vs jQuery</title>
	<!-- CDN -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		
		alert("스크립트 블록에 진입 성공 >>> : ");
		
		// jQuery는 스크립트 블록 ready 함수 블록에 만들어야 한다.
		$(document).ready(function(){
			alert("jQuery ready() 함수에 진입 성공 >>> : ")
			
			$("#jQuery_btn_1").click(function(){
				alert("jQuery_btn_1 버튼 클릭 성공 >>> : ");
				
				// 함수 체이닝 기법
				// $("#form_2").attr().submit();
				// http://localhost:8088/firstWeb/jsp/form_2.jsp
				$("#form_2").attr(
					{
						"action":"/firstWeb/jsp/form_2.jsp",
						"method":"GET"
					}
				).submit();
			});
			
			$("#jQuery_btn_2").click(function(){
				alert("jQuery_btn_2 버튼 클릭 성공 >>> : ");
				
				var form_2 = $("#form_2");
				alert(form_2);
				form_2.attr("action", "/firstWeb/jsp/form_2.jsp");
				form_2.attr("method", "GET");
				form_2.submit();
			});
		});
	</script>
</head>

<body>
	<h3>javaScript vs jQuery</h3>
	<hr>
	<form name="form_2" id="form_2">
		<input type="text" name="mid"><br>
		<button type="button" id="jQuery_btn_1">jQuery_btn_1</button>
		<button type="button" id="jQuery_btn_2">jQuery_btn_2</button>
	</form>
</body>
</html>

---

Notes

---