ITWILL학원 : 13강 JSP기초 BY 정규태강사

JSP 내장객체

서블릿(JSP -> JAVA로 변환하는 것)을 실행할때 필요한 정보를 저장하고 있는 객체이다.
원래 객체는 외부에 있기에 import를 추가해야하지만,
내장객체의 경우 기본적으로 포함되어있기때문에 따로 객체를 생성하거나, import로 추가할 필요가 없다.

자주사용하는 객체 6가지는 무조건 암기할 것!

내장객체는 총 9가지이다.

• java.servlet 패키지 8가지

  1. request : 클라이언트의 Http 요청 정보를 저장하는 객체
  2. response : Http 요청을 처리하는 응답 정보를 저장하는 객체
  3. session : 해당 클라이언트의 세션정보를 저장하는 객체
     • 예시 : 은행웹접속하면 10분지나면 ‘로그인세션이 만료하였습니다’
  4. pageContext : 페이지가 실행할때 필요한 컨텍스트 정보를 저장하는 객체
     • 컨텍스트정보 = 프로젝트정보
  5. out : 응답페이지에 전송하기위한 출력스트림 객체
     • 버퍼링 : 버퍼라는 공간을 채우는 작업이 버퍼링이다. 데이터가 큰 경우 전체 데이터를 작은 단위로 잘라서(버퍼) 먼저 데이터를 보여주는 것이다. 이것이 발전된 형태가 스트림이다.
     • 스트림 : 데이터를 글자단위로 보내는 것이 아니라 스트림단위로 보낸다. 물흐르듯 데이터를 계속 보내는 것을 스트림이라고 한다.
       • 예시 : 음악스트리밍
  6. application : 해당 애플리케이션의 정보를 저장하는 객체
     • 헷갈릴수있는게 스마트폰등의 안드로이드 앱이 아니라 응용프로그램전체라는 의미이다.
       • 개념을 분리하자. jsp에서는 애플리케이션의 정보를 저장한 객체이다.
       • 예시 : 누적페이지방문수를 표시할때 application객체를 이용한다
  7. config : 페이지의 서블릿설정 정보를 저장하는 객체
     • 서블리설정 = 초기화값
  8. page : 페이지의 서블릿 객체

• java.lang 패키기 1가지

  1. exception : 예외처리를 다루는 객체

2. 자주 사용하는 내장객체 : request객체

클라이언트의 Http 요청 정보를 저장하는 객체이다
js에서 객체는 아래와 같이 만들었다.

1

let 참조변수a = new 객체();

HttpServeltRequest 클래스를 객체로 구현한 뒤 request 이름(참조변수a)으로 사용한다.
웹페이지에서 사용하는 왠만한 데이터들은 다 request객체로 가져 올 수있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

서버도메인명 : <%= request.getServerName() %><br>
서버포트번호 : <%= request.getServerPort() %><br>
URL : <%= request.getRequestURL() %><br>
URI : <%= request.getRequestURI() %><br>
클라이언트호스트명 : <%= request.getRemoteHost() %><br>
클라이언트IP주소 : <%= request.getRemoteAddr() %><br>
프로토콜정보 : <%= request.getProtocol() %><br>
요청정보방식(전송방식) : <%= request.getMethod() %><br>
컨텍스트경로(프로젝트경로) : <%= request.getContextPath() %><br>

물리적경로 : <%= request.getRealPath("/") %><br>
- 물리적경로란? 하드디스크의 어디에 저장하는 지가 물리적경로<br>

Http헤더(user-agent) : <%= request.getHeader("user-agent") %><br>
- Http헤더(user-agent)란? 이용자가 사용하고있는 웹사이트 정보<br>

Http헤더(accept-language) : <%= request.getHeader("accept-language") %><br>
Http헤더(host) : <%= request.getHeader("host") %><br>
Http헤더(connection) : <%= request.getHeader("connection") %><br>

3. 자주 사용하는 내장객체 : response객체

Http 요청을 처리하는 응답 정보를 저장하는 객체이다.

1
2
3
4
5
6
7
8
9
10
11

<%
   response.setHeader("해더이름", 값);
   response.addCookie("쿠키값");
   response.setContentType("타입");
   response.sendRedirect("주소");

//예시

 response.sendRedirect("httl://www.naver.com"); 
 //코드를 작성한 html파일에서 실행했지만 자동으로 네이버로 이동됨
%>

4. 자주 사용하는 내장객체 : session객체

해당 클라이언트의 세션정보를 저장하는 객체
세션은 만들어지는 시간, 최종시간등을 확인할 수 있다.

• 예시 : 은행웹접속하면 10분지나면 ‘로그인세션이 만료하였습니다’

1
2
3
4
5
6
7
8
9
10

세션 ID : <%=session.getId() %><br>
세션 생성 시간 : <%=session.getCreationTime() %>
세션 최종 접속시간 : <%=session.getLastAccessedTime() %> <br>
세션 유지시간 : <%=session.getMaxInactiveInterval() %> <br>
- 세션 유지시간 default값 : 1800초 = 30분<br>
<%
// 세션 유지시간 변경 :30분 -> 60분
session.setMaxInactiveInterval(3600);
%>
변경된 세션 유지시간 (3600초,60분): <%=session.getMaxInactiveInterval() %> <br>

5. 자주 사용하는 내장객체 : application객체

해당 애플리케이션의 정보를 저장하는 객체
헷갈릴수있는게 스마트폰등의 안드로이드 앱이 아니라 응용프로그램전체라는 의미이다.
개념을 분리하자. jsp에서는 애플리케이션의 정보를 저장한 객체이다.
예시 : 누적페이지방문수를 표시할때 application객체를 이용한다

1
2
3

서버정보 : <%=application.getServerInfo() %><br>
물리적경로 : <%=application.getRealPath("/") %><br>
-슬러시(/)는 root라는 의미로 최상위경로를 의미한다.

6. 자주 사용하는 내장객체 : out객체

응답페이지에 전송하기위한 출력스트림 객체

1. 버퍼링 : 버퍼라는 공간을 채우는 작업이 버퍼링이다. 데이터가 큰 경우 전체 데이터를 작은 단위로 잘라서(버퍼) 먼저 데이터를 보여주는 것이다. 이것이 발전된 형태가 스트림이다.

2. 스트림 : 데이터를 글자단위로 보내는 것이 아니라 스트림단위로 보낸다. 물흐르듯 데이터를 계속 보내는 것을 스트림이라고 한다.

   • 예시 : 음악스트리밍

버퍼사이즈를 다 사용하면 출력에 문제가 생길수있다. 입출력작업자체가 자원을 많이 사용하므로 out객체를 사용하고나서 out.close()매서드를 사용해야한다

1
2
3
4
5
6
7
8
9

<%
	out.print("out객체 사용<br>");
%>
버퍼 사이즈 : <%=out.getBufferSize() %> BYTE<br>
사용후 남은 버퍼사이즈 : <%=out.getRemaining() %> BYTE<br>
- out객체를 사용하고나서 out.close()매서드를 사용해야한다
<%
  out.close(); //자원해제	
%>

Select 구문을 사용한 데이터 검색

테이블 구조조회

describe 테이블명이지만 실무에선 줄여서 desc 테이블명 명령어를 사용한다.

ITWILL학원 : 13강 JSP기초 BY 정규태강사

jsp는 html과 java를 합쳐서 사용하는 것이기때문에 주석을 두가지를 사용할 수 있다.

1. JSP주석 <%– – %>

%로 시작하는 주석은 jsp주석이다. 이는 엘리먼트요소이다.
html 주석문과 <!– –> 과 차이점은 html주석은 개발자도구에서 보이지만 JSP주석은 개발자도구에서 보이지않는다.

1
2

HTML주석 : <!-- <h1>에이치티엠엘yo!</h1> --!> 
JSP주석 : <%-- <h1>제이에스피yo!</h1> --%>

2. JSP가 어떻게 JAVA와 연결되어있을까?

연결성을 알기 위해서 아래 경로를 찾아가보자.

경로 : D:\JAVA저장경로.metadata.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\JSP7\org\apache\jsp\JSP1

해당 폴더에는 내가 생성한 적 없는 아래 파일 두개가 들어가있다.

• 파일명.java
• 파일명.class

해당 폴더안에 .java파일을 열어보면 내가 만들었던 .jsp파일이 내부적으로 .java파일을 생성하고 그 뒤 .class파일을 실행시키는 방식으로 연결되어있다.
이런 .java파일을 서블릿이라고 부른다.

즉, 내가 .jsp파일을 만들면 컴파일러가 알아서 서블릿이라는 형태인 .java파일을 만들고 그 뒤 .class파일을 실행시킨다.

3. JSP 디렉티브(directive)

jsp 디렉티브(directive)는 jsp페이지가 실행될때 필요한 정보를 지정하는 것이다.
jsp페이지는 사용자가 페이지를 요청할때 실행된다.
<%@ 내용내용블라블라 %> 형태로 사용한다.
크게 3가지 지시어가 존재한다.

• page

• include

• taglib

1. JSP 디렉티브(directive)의 page지시어 속성

아래는 page예시이다.

1. import

1
2
3

<%@ page import="java.util.*" %>

<%-- import란 외부로부터 다른 파일(클래스/객체)가져와서 추가해서 지정할수있다. --%>

2. contentType

사용자의 요청을 응답할때 응답할 페이지의 MIME타입을 지정하기위한 속성이다.
따라서 css나 aac오디오, azw전자책등등 다양한 종류의 페이지타입을 만들수있다.

contentType 종류

1

<%@ page contentType="text/html; %>

5. JSP 스크립트 요소

JSP 스크립트요소에는 총 3가지가 있다.

1. 선언문 : 변수, 매서드(함수)를 선언해서 사용한다.
2. 스크립틀릿 : 자바코드를 작성(변수와 매서드 사용가능)해서 사용한다.
3. 표현식 : 화면에 출력할 내용을 작성하여 사용한다.

1. 선언문

선언문 형태 : <%! %>
변수, 매서드(함수)를 선언해서 사용하기때문에 배열은 생성할수없다. 배열을 생성하고싶으면 스크립틀릿안에 써야한다.
멤버변수(전역변수)형태로 사용가능.

1
2
3
4
5
6

<%!
//자바코드를 사용해서 변수,메서드 사용(전역변수)
	public void Method(){
	System.out.println("안녕하세요");
	}
%>

2. 스크립틀릿

스크립틀릿 형태 : <% %>
자바코드를 작성(변수와 매서드 사용가능)해서 사용한다.
지역변수형태로만 사용가능.

1
2
3
4
5
6
7
8

<%
	//java
	System.out.println(name);
	System.out.println(a);

	// html 영역의 출력
	out.print("안녕하세요(html)");
%>

3. 표현식

표현식 형태 : <%= 자바의 값 %>
화면에 출력할 내용을 작성하여 사용한다.
즉 표현식은 값 또는 자바변수의 값을 화면에 출력가능한 코드이다.

1
2
3
4
5
6
7

<%
for (int i=0; i<strArr.length; i++){
	%>
	<%= i%>는 <%= strArr[i]%> <br> 
	<%
}
%>

표현식으로 테이블만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<%
String[] strArr = new String[5];
strArr[0] = "java";
strArr[1] = "jsp";
strArr[2] = "web";
strArr[3] = "DB";
strArr[4] = "spring";
%>

<table border="1">
  <tr>
    <td>인덱스</td><td>값</td>
  </tr>
  
  <%
    for(int i=0;i<strArr.length;i++){
  %>
   <tr>
     <td><%=i %></td><td><%=strArr[i] %></td>
   </tr>
  <%
    }
  %>

4. 선언문과 스크립틀릿 차이

선언문은 전역변수로 사용가능하지만 스크립틀릿은 지역변수로만 사용가능하다.
자주 사용할 것은 선언문보다 스크립틀릿이다.

ITWILL학원 : 12강 JS기초 BY 정규태강사

이때까지 배웠던 내용을 가지고 회원가입페이지를 작성해보자

회원가입페이지에서 구현해볼 기능.
1. 모든정보입력시 회원가입가능
2. 각항목의 입력값이 없을 경우 해당 요소의 알림과 함께 포커싱
3. id는 최소 4자리에서 최대10자리만 허용
4. 비밀번호확인시 두개의 값이 같은 경우 회원가입가능, 다른경우 비밀번호 확인창에 포커싱 후 경고창띄우기
5. 주민번호를 입력받으면 성별자동체크
6. 취미 선택안된경우 1번 옵션 선택
7. 과목 선택안된경우 경고창

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

<form action="itwill.com" name="fr" method="get" onsubmit="return checkall();">
	<table border="1">
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id" minlength="4" maxlength="10"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="pw"></td>
		</tr>
		<tr>
			<td>비밀번호 확인</td>
			<td><input type="password" name="repw"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" name="name"></td>
		</tr>
		<tr>
			<td>주민번호</td>
			<td><input type="text" name="idnum1" maxlength="6"> - <input type="password" name="idnum2" maxlength="7"></td>
		</tr>
		<tr>
			<td>성별</td>
			<td>
				<input type="radio" name="gender" value="여">여
				<input type="radio" name="gender" value="남">남
			</td>
		</tr>
		<tr>
			<td>취미</td>
			<td>
				<input type="checkbox" name="hobby" value="reading">독서
				<input type="checkbox" name="hobby" value="swmming">수영
				<input type="checkbox" name="hobby" value="breathing">침대에서숨쉬기
			</td>
		</tr>
		<tr>
			<td>좋아하는 과목</td>
			<td>
				<select name="sel">
					<option value="">선택</option>
					<option value="자바">JAVA</option>
					<option value="js">JavaScript</option>
					<option value="db">DataBase</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>하고싶은 말</td>
			<td><textarea rows="5" cols="30" placeholder ="자유롭게 입력하세요" name="txt"></textarea></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="제출">
				<input type="reset" value="초기화">
			</td>
		</tr>
	</table>
</form>

위는 html태그이고 아래는 js태그이다

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

<script type="text/javascript">

function checkall(){ //데이터유효성체크
	let id = document.fr.id.value
	let pw = document.fr.pw.value
	let repw = document.fr.repw.value
	let name = document.fr.name.value
	let idnum1 = document.fr.idnum1.value
	let idnum2 = document.fr.idnum2.value
	let womyn = document.fr.gender[0]
	let men = document.fr.gender[1]

	if(id == ""){
		alert("아이디를 입력하세요")
		document.fr.id.focus();
		return false;
	}

	if(pw == ""){
		alert("비밀번호를 입력하세요")
		document.fr.pw.focus();
		return false;
	}

	if(pw != repw){
		alert("비밀번호가 일치하지않습니다.")
		document.fr.repw.select();
		return false;
	}

	if(name == ""){
		alert("이름을 입력하세요.")
		document.fr.name.select();
		return false;
	}

	if(idnum1 == ""){
		alert("주민번호를 입력하세요.")
		document.fr.idnum1.focus();
		return false;
	}

	if(idnum2 == ""){
		alert("주민번호를 입력하세요.")
		document.fr.idnum2.focus();
		return false;
	}

	if(womyn.checked == false && men.checked == false){
		if(idnum2.charAt(0) == 2 || idnum2.charAt(0) == 4){
		womyn.checked = true;
		return false;
		}

		if(idnum2.charAt(0) == 1 || idnum2.charAt(0) == 3){
		men.checked = true;
		return false;
		}
	}

	if(document.fr.hobby[0].checked == false 
			&& document.fr.hobby[1].checked == false
			&& document.fr.hobby[2].checked == false){
		alert("취미를 선택하세요");
		//document.fr.hobby[0].focus(); //사용자의 입력을 기다림
		document.fr.hobby[0].checked == true; //사용자입력안할시 자동으로 0번을 선택함
	}

	if(document.fr.sel.selectedIndex == 0){
		alert("과목을 선택하세요")
		document.fr.sel.focus();
		return false;
	}

	if(document.fr.txt.value == ""){
		alert("메모를 입력하세요");
		document.fr.txt.focus();
		return false;
	}

}
</script>

ITWILL학원 : 12강 JSP기초 BY 정규태강사

기존 html코드에 java를 추가한 것이 바로 jsp이다.

1. Project Explorer 우클릭

2. new > dynamic web project > 프로젝트이름을 적어주고 next > next 후 Generate web.xml deployment descriptor를 꼭 틱해주고 Finish클릭

3. 새로만든 프로젝트 우클릭 > new > jsp file 클릭 : 코드가 이미 있는 파일이 만들어졌다

이제 JSP 프로젝트를 톰캣서버와 연결해야한다.

4. 새로 만든 프로젝트 우클릭 > properties 클릭 > java build path > libraries > server runtime 클릭 후 next를 눌러준다

6. tomcat을 클릭해주고 finish를 눌러준다

7. jsp파일에 첫번째행에 밑줄이 쳐져있던 것이 깨끗하게 사라진걸 확인할 수 있다 > 서버와 연결 끝!

혹시나 안된다면 이클립스를 껐다 키거나 최상단 project 탭에 clear클릭하여 메모리를 한번 정리해준다

ITWILL학원 : 9강 JAVA BY 윤미영강사

JAVA 369게임만들기

369게임을 만들어보았다.
일의 자리와 소수점첫번째자리를 나누어서 처리했다.

변수 input는 사용자가 scanner를 통해 입력하는 숫자이다.
변수 remainder는 숫자를 10으로 나눈뒤 소수점첫째짜리를 3,6,9인지확인한다.

함수 divideTen()는 10으로 나눠서 369인지 체크하는 반복되는 코드이므로 밖으로 뺐다.
함수를 어디로 빼야하는지몰랐는데 main함수밖이면서 class안으로 빼야하는 것이었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

public class game369 {
	public static void main(String[] args) {
		Scanner sc = new Scanner(System.in);
		System.out.println("1~99까지 정수를 입력해주세요");
		int input = sc.nextInt();
		int remainder = input%10;  //소수점첫번째자리체크

		if(remainder == 3){
			divideTen(input);
		}else if(remainder == 6){
			divideTen(input);
		}else if(remainder == 9){
			divideTen(input);
		}
	}

	private static void divideTen(int input){
		if(input/10 == 3 || input/10 == 6 || input/10 == 9){ //1의자리체크
			System.out.println("박수짝짝");
		}else{
			System.out.println("박수짝");
		}
	}
}

강사님 코드는 아래와 같다.
박수치는 횟수를 카운드해서 if조건문으로 박수2번이면 박수짝짝을 입력하는 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

public static void main(String[] args) {
	Scanner sc = new Scanner(System.in);
	System.out.println("1~99까지 정수를 입력해주세요");
	int num = sc.nextInt();
	int digit10 = num/10; //1의자리체크
	int digit1 = num%10; //소수점첫째자리체크

	int clapCnt = 0;//박수횟수

	if(digit1%3 == 0 && digit1 !=0){ clapCnt++; } //else가 필요없다. 변수가 0일때도 카운트되기때문에 꼭 제거해야한다.
	if(digit10%3 == 0 && digit10 !=0){ clapCnt++; } //변수가 0일때도 카운트되기때문에 꼭 빼줘야한다.

	if(clapCnt == 2){
		System.out.println("박수짝짝");
	}else if(clapCnt == 1){
		System.out.println("박수짝");
	}
}

ITWILL학원 : 4강 WEB(HTML, CSS) BY 김영희

1. form태그안의 input태그

input type="" 의 종류는 엄청 많다.

그중에서 아래 코드를 가지고 몇가지 속성과 함께 예시를 알아보자.

1
2
3
4
5
6
7
8
9

<form action="test.jsp" method="POST">
	<label for="id">ID <input type="text" id="id" minlength="6"><br></label>
	<label for="pw">Password <input type="password" id="pw"><br></label>
	<label for="idNumber">Identification Number(without -)<input type="password" maxlength="13" size="20"><br></label>
	<textarea name="memo" id="" cols="50" rows="10"></textarea>
<hr>
<input type="submit" value="입력한대로 제출">
<input type="reset"> 
</form>

1. label for=””와input id=””는 꼭 일치시켜준다

2. input type=”password” maxlength=”13” size=”20”

   • type=”password”는 type=”text”랑 동일하나 외부에 암호화되어 보여진다.
   • maxlength=”13”속성으로 전화번호나 주민등록번호등 최대길이가 지정되어있는 정보들을 데이터 입력길이 지정해줄수있다.
   • size=”20” 는 input에 쓰여진 글자의 숫자를 새고 그만큼 size를 늘리는 방식이다.
   • size속성의 경우 한글 및 영문, 폰트크기에 따라서 size가 달라지기 때문에 width값이 정확하지 않기때문에 잘 사용하지않는다. 보통 css로 크기작업을 해준다

3. input type=”submit”

   • value속성을 적어주지 않으면 브라우저마다 기본 이름이 나온다
   • 기본이름 크롬 : 제출 / 익스엑스 : 퀴리전송
   • 기본이름을 바꾸고싶으면 value=”입력한대로 제출” 이렇게 바꿔주면 버튼안의 글자가 입력한 내용으로 바뀐다

4. input type=”reset”

   • value속성을 적어주지 않으면 브라우저마다 기본 이름이 나온다
   • 기본이름 크롬 : 초기화 / 익스엣지 : 초기화
   • 기본이름을 바꾸고싶으면 value=”입력한 내용 초기화” 이렇게 바꿔주면 버튼안의 글자가 입력한 내용으로 바뀐다

5. 위의 input type="submit"와 input type="submit"은 form태그안에 위치해있을때 사용가능하다!

1
2
3
4
5
6
7
8

<h1>파일전송</h1>
<label for="ph">증명사진</label> <input type="file" value="너의파일" name="" id="ph">

<h1>검색어 삭제</h1>
<label for=""></label><input type="search" name="" id="" value="검색어삭제">

<h1>히든</h1> 숨은데이터전송
<label for=""></label> <input type="hidden" name="membership" id="" value="gold">

6. input type=”file”

   • 로컬 컴퓨터의 파일을 선택하는 기능을 하는 파일전송버튼을 생성한다.
   • 기본벨류값은 “파일전송”이고 value=”너의파일”이렇게 지정해줘도 보여지는 글이 바뀌지않는다.

7. input type=”search”

   • 검색창을 입력하는 기능은 하지 않고 입력된 검색어를 한꺼번에 삭제해주는 버튼을 만들어주는 기능을 한다. 유저에게 유용한 기능이다

8. input type=”hidden”

   • hidden타입은 문서상에 출력되지않는다. 그럼 어디다 쓸까? DB를 다룰때 주로 사용된다.

2. form태그안의 textarea태그

닫힘태그가 꼭 필요하다.
속성들도 꾸미기이기때문에 최근에는 속성을 사용하는대신 css에서 크기를 조작한다.

• 속성
  • cols=”” : 가로길이 ex)cols=”10” : 10줄이 들어가는 크기의 길이
  • rows=”” : 세로길이 ex)rows=”5” : 5열이 들어가는 크기의 길이

1

<textarea name="textarea" cols="50" rows="10"></textarea>

3. form태그안의 button태그

버튼태그의 타입에는 4가지 종류가 있다

1. type=”submit”
   type을 적지않아도 기본으로 적용되는 디폴트값이다

1
2

<button type>제출</button>
<button type="submit">제출</button>

2. type=”button”
   그냥 일반 버튼이다. 따라서 onclick=””으로 function이나 url을 연결할수있다.

1

<button type="button">그냥버튼</button>

3. type=”menu”
   타입을 메뉴라고 주게되면 minlength=””를 적용하였을때 안내메세지를 띄어주는 신통방통한 기능이다
   그런데 구글링해보니 많이 사용하지 않는 타입속성이었다.
   왜지?
   나는 좋은데… 아무튼 잘 사용하지 않는 속성인 것 같다.

1

<button type="menu">메뉴</button>

4. type=”reset”
   입력했던 값을 초기화시키는 버튼이다.

1

<button type="reset">리셋</button>

4. input="button"태그와 button태그의 차이점

input="button"태그와 button태그는 submit을 수행하기에 기능적으로 동일하다.
그렇다면 왜 나눠져있을까?

button태그를 사용하면
버튼안에 이미지를 함께 넣거나 버튼글자의 형태(굵기,기울기등)를 바꾸거나 웹아이콘을 넣는 등의 활용도가 높다.

참고링크 : web icon 사용방법

참고링크 : web icon 종류

따라서 요즘에는 input="button"보다는 button태그를 더 많이 사용한다.

참고링크 : input type=”submit” vs button 비교

5. 드롭다운리스트 Dropdown List

dropdown list는 항목이 많을때 선택할 수 있게끔 아래로 내려오는 목록형식으로 나타내는 태그이다.
공간절약형 객관식이다.

드롭다운 리스트를 이미지로 먼저 만나보자.

위의 4가지 형태를 어떻게 html 태그로 만들수있을까?

1. 기본형

1
2
3
4
5
6
7

<select name="과목" id="">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

기본적으로 적은 순서대로 출력된다
selected 속성 : checked 속성처럼 selected를 주면 HTML이 아닌 JSP를 먼저 출력할 수 있다.

2. multiple 적용

드롭다운리스트는 다중선택이 가능할까?

예스예스예스!

select태그에 multiple속성을 추가해주면 된다.
사용할때는 ctrl를 누르고 다중선택을 하면 표시가 된다.
선택된채로 출력되는 selected도 적용가능하다

1
2
3
4
5
6
7

<select name="과목" multiple>
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

3. size 적용

드롭다운리스트는 다중선택되진않지만 박스리스트형태로 출력하고싶다면?

속성 size="n"을 추가해주면 된다.
항목 n개가 보이는 상자형으로 출력된다.

1
2
3
4
5
6
7

<select name="과목" size="10">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

4. optgroup label=”” 적용

만약 optgroup마다 selected를 추가해주면 어떻게 될까?

selected가 다 출력되는 것이 아니라 selected속성이 들어간 제일 마지막(순서가 제일 아래인)태그 하나만 선택된채로 출력된다.

1
2
3
4
5
6
7
8
9
10
11

<select name="과목">
	<optgroup label="오전수업선택">
		<option value="HTML" selected>HTML</option>
		<option value="CSS">CSS</option>
	</optgroup>
	<optgroup label="오후수업선택">
		<option value="JSP" selected>JSP</option>
		<option value="JAVA">JAVA</option>
		<option value="직업기초">직업기초</option>
	</optgroup>
</select>

CUI환경 VS GUI환경

GUI(Graphic User Interface)

문자가 아닌 그래픽 위주로 이루어진 방식을 말하며 현재의 우리가 쓰고있는 환경을 말한다.
운영체제에서 작업할때 명령어 대신 아이콘을 더블클릭하여 사용하는 등 그래픽으로 데이터를 처리하는 환경이다.

ITWILL학원 : 11강 JS기초 BY 정규태강사

1. if문에 return;의 역할

return : 문제발생시 다른 조건을 실행하지않는다. -> 지금 문제를 먼저 해결
예를들어 회원가입페이지의 필수항목인 아이디를 입력하지않았다면 그 다음 항목인 비밀번호는 아예 체크하지않겠다는 의미가 된다.

아래 태그는 if조건문이 연달아 있다.
첫번째 if는 아이디를 입력했는지 체크하는 조건이고 두번째 if는 비밀번호를 입력했는지 체크하는 조건문이다.

여기서 return;의 역활에 집중해보자.
아이디를 입력하지않았다면 비밀번호를 체크할 필요도 없다.
따라서 첫번째 if문에서 아이디가 없을시 return;를 주어 뒤의 비밀번호를 아예 체크하지않고 function이 종료된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function check(){
	if(inputId.length > 0){
		alert("사용자 ID : " + inputId + "\n" + userInfo.memo.value);
	}else{ // 아이디 입력값이 없을때
		alert("사용자ID를 입력하세요");
		document.userInfo.id.focus();
		return;	
	} 

	if(inputPw == ""){ //비밀번호 입력값이 없을 때
		alert("비밀번호를 입력하세요")
		document.userInfo.pw.focus();
	}
}

check();

2. 라디오 Radio 태그

라디오버튼은 동일한 name을 써야 한 그룹으로 묶인다.
value를 꼭 작성해주어여한다.

checked=”checked” 또는 checked라고 속성을 주면 해당 속성에 틱 된 상태로 출력된다.
만약 여러 태그를 다 checked한 경우, 제일 마지막 태그의 속성이 틱 된 상태로 출력된다.

아래 코드는 성별체크하는 라디오버튼이다.

1
2
3
4
5
6
7
8

<fieldset> //테두리생성되는 태그
	<form action="#" name="fr" method="get">
	<label> 성별 체크 : </label>
		<input type="radio" name="gender" value="여"> 여성
		<input type="radio" name="gender" value="남"> 남성
	<input type="button" value="성별체크유무" onclick="checkRa();">
	</form>
</fieldset>

여기서 성별을 틱하지않고 성별체크유무 버튼을 클릭하게되면
성별을 선택하라는 알림 팝업이 뜨고 난 뒤 focus()를 주는 checkRa() 함수를 만들어보자.

1
2
3
4
5
6
7
8
9

function checkRa(){ 
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
		womyn.focus();
	}
}

알림창은 잘 뜨지만 focus()는 티가 나지않는다
이럴때 enter를 눌러보면 여성라디오버튼에 굵은 검정테두리를 통해 focus가 됨을 알 수 있다.

enter를 안누르고 티나게 하는 방법은 없을까?
기존에는 보였으나 브라우저가 업데이트되면서 그런것같다는게 강사님의 의견.
w3school에서도 동일한 현상이 나타나는 것을 보니 방법이 없나보다..

3. 체크박스 checkbox 태그

라디오버튼과 다른 점은 중복체크가 가능하다는 점이다.
또한 체그해지도 가능하다

내 코드

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

function checkRa(){ //라디오버튼체크유무
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
//			womyn.focus(); //동일코드
//			document.forms["fr"].elements["gender"][0].focus(); //동일코드
		document.getElementsByName('gender')[0].focus();
	}else{
		checkRa = true;
	}
}

function checkCh(){ //체크박스체크유무
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkboth(){ //라디오버튼과 체크박스 둘다 체크했는지 확인
	console.log(checkRa == true)
	console.log(checkCh == true)
	if(checkRa == true && checkCh == true){
		return true;
	}else{
		return false;
	}
}

강사님 코드 => 다음시간에 다시

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

function checkRa(){
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
			womyn.focus();
	}else{
		checkRa = true;
	}
}

	function checkCh(){ //내코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkCh(){ //강사님코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
		return;
	}

	checkRa();
	document.fr.submit();
}

ITWILL학원 : 8강 JAVA BY 윤미영강사

1. JAVA format string

자바 format string은 System.out.printf(“”,)를 이용하여 나타낸다.

주요한 변환코드는 아래와 같다.

포맷스트링으로 자릿수도 표현할 수 있다.

2. Random 숫자 뽑기

• Random 라이브러리 : 무작위 숫자를 생성하기 위해 Random 객체를 사용해야하기때문에 import해야한다.

• null : 아무 값이 없다. 예약어이고 실제 값은 맨 뒤에 위치해있다.

  • 실무에선 null보단 “”로 String을 초기화시켜준다.
  • 왜냐하면 보통 DB에서 데이터를 가져와서 사용하는 경우가 많은데 null로 초기화해버리면 생각하지 못한 에러가 발생할 수 있기때문이다.

• nextlnt(n); : 매서드로 0 ~ (n-1)사이의 무작위 정수를 생성한다.

아래 코드는 0부터 99중에 랜덤숫자를 뽑아서 50이상이면 큰수로 출력하고 그 이하면 작은수로 출력한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import java.util.Random;

public static void main(String[] args) {
	String result = null;
	Random myRandom = new Random();

	System.out.println("----- 큰수 작은수체크");

	int num1 = myRandom.nextInt(100); //0 ~ 99사이의 정수
	if(num1 >= 50){
		result ="큰 수";
	}else{
		result ="작은 수";
	}
	System.out.printf("%d는 %s이다.%n", num1, result);
}

2. 상황별 반복문 추천

반복문은 크게 3가지 종류가 있다.
for 문, while 문, do ~ while문!

상화별로 추천하는 반복문이 있다.

• for 문 : 반복해야하는 횟수가 지정될 경우 유리

  • ex) 10번 먹으세요

  • 1 2 3

    for(초기화;조건식;증감식){ 조건식이 true일때 실행할 문장 }

• while 문 : 반복횟수보다는 상황에 의한 반복을 정의할 경우 유리

  • ex) 다 먹으세요

  • 1 2 3 4

    while(조건식){ 조건식이 true일 경우 실행할 문장 증감식; }

• do ~ while문 : while작업 중 최소 한 번은 실행해야 할 작업이 있는 경우 유리

  • ex) 한 번 먹어보고 맛있으면 다 먹으세요, 홈페이지의 메뉴 (꼭 한번은 실행되어져야하기때문에)

  • 1 2 3 4 5

    초기화; do{ 조건식이 true일때 실행할 문장 증감식; } while(조건식);