JSP (Java Server Page)


1. JSP는 동적인 웹 페이지를 제공하는 서버에서 실행되는 스크립트 언어. 확장자는 .jsp



2. 기본문법은 Java를 따르지만 표기법은 JSP를 따른다.




//JSPSample01.jsp -> 서버에서 실행되는 JSP 페이지는 결과가 HTML Document가 된다.


<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<%

String str = "Hello, JSP World!";

%>    

<!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>Insert title here</title>

</head>

<body>

<div>

<h3><%=str%></h3>

</div>

</body>

</html>




//클라이언트에게 전달된 HTML Document 의 모습

//->JSP 영역의 소스코드는 서버에서 실행되었기 때문에 클라이언트에 전달되는 것은 결과값만 전달된다.


<!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>Insert title here</title>

</head>

<body>

<div>

<h3>Hello, JSP World!</h3>  //->결과값

</div>

</body>

</html>



//최종 실행된 웹페이지 모습


Hello, JSP World!







JSP 구성 요소


1. 디렉티브(Directive) : 페이지에 대한 설정 정보 지정. 클래스의 속성을 변경.

<%@  ...  %>


2. 선언부(Declaration) : 스크립트릿이나 표현식에 사용할 사용자 정의 메소드 작성시 사용.

<%!  ...  %>


3. 표현식(Expression) : HTML 문서에 결과 값을 출력할 때 사용.

<%=   ...  %>


4. 스크립트릿(Scriptlet) : JSP에서 자바 코드를 기술할 때 사용. 미리 준비된 메소드의 내부 코드가 된다.

<%   ...   %>






서식 지정 출력 예


//JSPSample02.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

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

<%

// 서식 지정 출력 예

String str = String.format("%d + %d = %d <br>", 10, 20, (10+20));


%>

<!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>Insert title here</title>

</head>

<body>

<div>

<h3><%= str %></h3>

</div>

</body>

</html>





자료형


1. JSP에서의 자료형은 Java와 동일


기본자료형 - 숫자형(정수(byte, short, int, long), 실수(double, float)), 불린(boolean)형, 문자(char)형

참조형 - 클래스, 배열, 문자열(String)형







변수


1. JSP에서의 변수는 Java와 동일


2. 스크립트릿에서 선언된 변수는 지역변수. 선언부에서 선언된 변수는 멤버변수.

   스크립트릿에서 선언된 변수는 JSP 페이지 내부 전체에서 사용가능.






연산자


1. JSP에서의 연산자는 Java와 동일.


2. 산술, 관계, 논리, 대입 연산자.






제어문(if, while, for, switch, break, continue, 확장 for)


1. JSP에서의 제어문은 Java와 동일.






반복문을 이용해서 1~100사이의 짝수만 출력. JSP 이용.


//JSPSample03.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<%


String str = "";

int sum = 0;


for (int a=1; a<=100; a++) {

if (a%2 == 0) {

str += a + "<br>";

sum += a;

}

}

str += sum;


%>

<!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>Insert title here</title>

</head>

<body>

<div>

<h3><%=str%></h3>

</div>

</body>

</html>






문제) 반복문을 이용해서 1~100 사이의 짝수만 출력. 

마지막에 짝수들의 합까지 출력. JSP 이용.

실행 예)

2

4

6

8

...


100

------

합계:2550


//JSPSample04.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<%


StringBuilder str = new StringBuilder();

int sum = 0;


for (int a=1; a<=100; a++) {

if (a%2 == 0) {

str.append(String.format("%d<br>", a));

sum += a;

}

}

str.append(String.format("----------<br>합계: %d", sum));


%>

<!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>Insert title here</title>

</head>

<body>

<div>

<h3><%=str%></h3>

</div>

</body>

</html>






데이터 송수신 테스트1     (텍스트 박스 객체)


//send01.jsp -> 입력 페이지 역할. 입력된 데이터를 서버로 전송.

<%@ 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>Insert title here</title>

</head>

<body>

<div>

<h2>데이터 송수신 테스트1</h2>

<!-- <form> 에서 action 속성과 method 속성 필수 -->

<form action="Receive01.jsp" method="post">

<!-- JSP에서는 식별자를 name 속성으로 구분 -->

이름 <input type="text" name="name">

전화 <input type="text" name="tel">

<!-- submit 버튼을 클릭하면 데이터 전송됨 -->

<input type="submit" value="회원가입">

</form>

</div>

</body>

</html>




//receive01.jsp -> 처리, 출력 페이지 역할. 클라이언트가 전송한 데이터 수신 및 처리. 결과 메세지를 클라이언트에게 전송.

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<%

//request JSP 전용 내장 객체(HttpServletRequest 클래스)

//getParameter() 메소드는 데이터 수신 담당. 자료형은 전부 String 변수로 받아야함.

//송수신 데이터에서 한글이 포함된 경우는 인코딩 추가 필요.

request.setCharacterEncoding("euc-kr");

String name = request.getParameter("name");

String tel = request.getParameter("tel");

//결과 메시지 출력

StringBuilder str = new StringBuilder();

str.append(String.format("name: %s, tel: %s<br>", name, tel));

%>

<!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>Insert title here</title>

</head>

<body>

<div>

<h2>데이터 송수신 테스트1</h2>

<h3><%=str%></h3>

</div>

</body>

</html>





데이터 송수신 테스트2 (라디오 객체)



//Send02.jsp

<%@ 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>Insert title here</title>

<script type="text/javascript">


function myFunc(obj) {

//데이터 검사

var radios = document.getElementsByName("size");

var check = 0;

for (var a=0; a<radios.length; a++) {

if (radios[a].checked) {

check = radios[a].value;

}

}

//데이터 전송

var msg = document.getElementById("msg");

msg.style.display = "none";

if (check == 0) {

msg.style.display = "inline";

} else {

obj.form.submit();

}

}


</script>

</head>

<body>

<div>

<h2>데이터 송수신 테스트2</h2>

<form action="Receive02.jsp" method="post">

-사이즈 선택- <br>

<input type="radio" name="size" value="1"> 싱글레귤러(1)<br>

<input type="radio" name="size" value="3"> 파인트(3)<br>

<input type="radio" name="size" value="5"> 쿼터(5)<br>

<input type="button" value="확인" onclick="myFunc(this)"><br>

<span id="msg" style="color:red; display:none;"> 사이즈를 선택해야 합니다.</span>

</form>

</div>

</body>

</html>



//Receive02.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<%


//서버에 수신되는 라디오 객체의 값은 선택된 항목만 수신된다. 즉, 라디오는 최대 한개 수신

//라디오 객체의 value 속성의 값이 수신된다.

String size = request.getParameter("size");


String str = "";

//switch(변수) {} 에서 변수값은 int형 자료만 허용함

switch (Integer.parseInt(size)) {

case 1: str = "싱글레귤러(1)"; break;

case 3: str = "파인트(3)"; break;

case 5: str = "쿼터(5)"; break;

}


%>

<!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>Insert title here</title>

</head>

<body>

<div>

<h2>데이터 송수신 테스트2</h2>

<h3>출력 -----------------</h3>

<div>선택한 사이즈는 <%=str%>입니다.</div>

</div>

</body>

</html>






데이터 송수신 테스트3 (체크박스 객체)



//Sand03.jsp



//Receive03.jsp







문제) 이름, 국어, 영어, 수학 점수를 입력 받아서 총점, 평균 계산해서 결과 출력하는 페이지 작성. JSP 이용.


//Send04.jsp 

//-> 이름, 국어, 영어, 수학 점수를 입력받는 페이지 작성. 서버에 데이터 전송.

//-> 데이터 검사 과정 추가. 자바스크립트 이용.



//Receive04.jsp 

//-> 이름, 국어, 영어, 수학 점수를 수신해서 총점, 평균 계산 및 결과 메시지 출력.

//-> 테이블 태그 이용해서 표 형태로 출력.






문제) 거스름돈을 환폐단위로 구분해서 출력. JSP 이용

실행 예)

금액(10~1000) [ 990 ] [결과]


총액 : 990원

오백원 1개, 백원 4개, 오십원 1개, 십원 4개


//Send&Receive05.jsp








문제) 세 개의 숫자를 전달받아 가장 큰 숫자, 가장 작은 숫자 구하기. JSP 이용.

실행 예)

숫자1 [XX  ]    숫자2 [YY   ]    숫자3 [ZZ   ]    [결과]


입력 받은 숫자 : XX, YY, ZZ

가장 큰 숫자 :  ZZ

가장 작은 숫자 : XX


//Send_Receive05.jsp


WRITTEN BY
빨강꼬마

,

텍스트박스(<input type="text"> 태그) 객체 다루기



1. value 속성.


//Script40.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var msg = document.getElementById("msg");

msg.style.display = "none";

var result = document.getElementById("result");

//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)

if (id.value == "" || pw.value == "") {

msg.style.display = "inline";

id.focus();

} else {

if(id.value=="admin" && pw.value =="1234") {

result.innerHTML = "회원으로 로그인 되었습니다.";

} else {

result.innerHTML = "아이디 또는 패스워드가 틀렸습니다.";

}

}

}

</script>

</head>

<body>

<div>

<h2>텍스트 박스 객체 다루기</h2>

<form>

아이디<input type="text" id="id">

패스워드<input type="password" id="pw">

<input type="button" value="로그인" onclick="myFunc()">

<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>

</form>

<h3>출력----------------------</h3>

<div id="result"></div>

</div>

</body>

</html>




2. readonly, disabled 속성


//Script41.html


<!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>Insert title here</title>

<script type="text/javascript">

function myCheck(obj) {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var btn = document.getElementById("btn");

if(obj.checked) {

//약관동의 선택한 경우

//아아디, 패스워드 입력가능상태로 변경

//회원가입버튼을 사용가능상태로 변경

id.readOnly = false;

pw.readOnly = false;

btn.disabled = false;

} else {

//약관동의 취소한 경우

//아이디, 패스워드에 입력된 데이터 삭제

//아아디, 패스워드 입력 불가 상태로 변경

//회원가입버튼을 사용 불가 상태로 변경

id.value = "";

pw.value = "";

id.readOnly = true;

pw.readOnly = true;

btn.disabled = true;

}

}

function myFunc() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)

if (id.value == "" || pw.value == "") {

msg.style.display = "inline";

id.focus();

} else {

result.innerHTML = "회원으로 가입되었습니다.";

}

}

</script>

</head>

<body>

<div>

<h2>텍스트 박스 객체 다루기</h2>

<form>

<input type="checkbox" id="check" onclick="myCheck(this)"> 약관동의<br>

아이디<input type="text" id="id" readOnly="readOnly"><br>

패스워드<input type="password" id="pw" readOnly="readOnly"><br>

<input type="button" id="btn" value="회원가입" onclick="myFunc()" disabled="disabled">

<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>

</form>

<h3>출력----------------------</h3>

<div id="result"></div>

</div>

</body>

</html>






선택목록(<select> 태그) 객체 다루기



1. selected 속성, onchange 이벤트 지원


//Script42.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc(obj) {

var emailAddr = obj.options[obj.selectedIndex].value;

var email02 = document.getElementById("email02");

if (emailAddr == "2") {

//직접입력.

email02.value = "";

email02.readOnly = false; //Only 에서 O는 대문자 표기

email02.focus();

} else {

email02.readOnly = true;

email02.value = emailAddr;

}

}


</script>

</head>

<body>

<div>

<h2>선택목록 객체 다루기</h2>

<form>

이메일

<input type="text" id="email01">

@

<input type="text" id="email02" readOnly="readOnly">

<select id="emailAddr" onchange="myFunc(this)">

<option value="">선택</option>

<option value="naver.com" selected="selected">naver.com</option>

<option value="nate.com">nate.com</option>

<option value="hanmail.net">hanmail.net</option>

<option value="2">직접입력</option>

</select>

</form>

</div>


</body>

</html>



//Script43.html

<!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>Insert title here</title>


<script type="text/javascript">

function myFunc(obj) {

var jikwi = obj.options[obj.selectedIndex].value;

var msg = document.getElementById("msg");

var basicpay = document.getElementById("basicpay");

msg.style.display = "none";

switch(jikwi) {

case "1":

msg.style.display = "inline";

msg.innerHTML = "100만원 이상";

break;

case "2":

msg.style.display = "inline";

msg.innerHTML = "120만원 이상";

break;

case "3":

msg.style.display = "inline";

msg.innerHTML = "200만원 이상";

break;

}

basicpay.focus();

}

</script>


</head>

<body>

<div>

<h2>선택목록 객체 다루기2</h2>

<form>

직위

<select id="jikwi" onchange="myFunc(this)">

<option value="1">사원</option>

<option value="2">대리</option>

<option value="3">과장</option>

</select><br>

기본급

<input type="text" id="basicpay" style="width:80px;">

<span id="msg" style="color:red;display:none;"></span>

<br>

<input type="button" value="직원등록">

</form>

</div>

</body>

</html>






윈도우(브라우저 자신) 객체 다루기



1. window 객체는 자바스크립트에서는 브라우저 자신을 의미.


2. 최상위 객체. 생략 가능.


3. 팝업창을 생성할 때 window.open(), window.close() 사용.


//Script44.html -> 부모창


<!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>Insert title here</title>

<script type="text/javascript">

function myPopup() {

window.open("Script44_1.html", "popup", "width=200, height=400");

//window.open("http://www.gmarket.co.kr/popup/indexPopunder.html", "popup", "width=400, height=450");

}

</script>

</head>

<body onload="myPopup()">

<div>

<h2>윈도우 객체 다루기</h2>

<p>

<a href="javascript:myPopup()" >로그인 전용 화면</a>

</p>

</div>

</body>

</html>





//Script44_1.html -> 자식창


<!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>Insert title here</title>

</head>

<body>

<div>

<h3>광고 페이지</h3>

<a href ="javascript:window.close();">close</a>

</div>

</body>

</html>






DOM (Document Object Model)


1. HTML 태그를 객체로 받아들여서 객체를 다루는 명령.


2. 태그 수정, 삭제, 추가 등이 가능하다.


//DOM01.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//Node - 엘리먼트, 속성 등의 객체

//Element - 태그 객체

//Attribute - 속성 객체

var parent = document.getElementById("target");


var str = "";

/*

var nodeList = parent.childNodes;

str += "nodeList.length : " + nodeList.length + "<br>";

for (var a=0; a<nodeList.length; a++) { 

str += "nodeList[" + a + "].nodeType : " + nodeList[a].nodeType + "<br>";

str += "nodeList[" + a + "].nodeValue : " + nodeList[a].nodeValue + "<br>";

}

//nodeType이 1이면 엘리먼트

//nodeType이 2이면 속성

//nodeType이 3이면 텍스트

var pnode = nodeList[0]; //첫 번째 <p> 엘리먼트

var textnode = pnode.childNodes[0]; // <p> 엘리먼트의 텍스트

str += "textnode.nodeValue : " + textnode.nodeValue;  // <p> 엘리먼트의 텍스트 값

*/

//순차적으로 텍스트 노드를 접근해서 출력

var pNodes = parent.childNodes;

for (var a=0; a<pNodes.length; a++) {

str += pNodes[a].firstChild.nodeValue + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;


}


</script>

</head>

<body>

<div>

<h2>DOM</h2>

<form>

<input type="button" value="DOM테스트" onclick="myFunc()">

</form>


<div id="target"><p>첫번째 문장</p><p>두번째 문장</p><p>세번째 문장</p></div>

<h2>출력 --------------------------</h2>

<div id="result"></div>

</div>

</body>

</html>



//DOM02.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc(status) {


var ulNode = document.getElementById("subjectLists");

var liNodes = ulNode.childNodes;

for (var a=0; a<liNodes.length; a++) {

var inputNode = liNodes[a].firstChild;

if(inputNode.nodeType == 1) {

inputNode.checked = status;

}

}

}


</script>

</head>

<body>

<div>

<h2>DOM 테스트 2</h2>

<div>

<a href="javascript:myFunc(true)">전체선택</a> / <a href="javascript:myFunc(false)">전체해제</a>

</div>

<form>

<h3>강의 가능 과목</h3>


<!-- <ul> 태그에서 <li> 태그 입력시 줄바꿈 처리하지 말것-->

<ul id="subjectLists" style="list-style:none"><li><input type="checkbox">Java SE</li><li><input type="checkbox">Oracle</li><li><input type="checkbox">JSP &amp; Servlet</li></ul>

</form>

</div>

</body>

</html>





//DOM03.html







문제) 자바스크립트의 DOM 기능을 이용해서 방명록을 작성할 것.

-> wedding.html 파일 및 img 폴더를 이클립스에 복사해서 사용할 것.

-> 번호 및 날짜는 자바스크립트에서 자동 입력되도록 할 것.


<!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>

<style type="text/css">

.style1 {color:red;}

a {

text-decoration: none;

color:gray;

}

a:hover {

text-decoration: underline;

color:red;

}

</style>

<script type="text/javascript">

function textCountCheck(obj, target) {

var len = obj.value.length;

var targetObj = document.getElementById(target);

targetObj.innerText = len;

}

//테이블 동적 생성

function guestFormSubmit() {

var count = 2;

var name = document.getElementById("uname");

var content = document.getElementById("content");


var trNode = document.createElement("tr");

var tdNode = createTdNode(count++);

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


tdNode = createTdNode(name.value);

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


trNode.appendChild(createTdNode(content.value));


tdNode = createTdNode(getSysTime());

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


tdNode = document.createElement("td");

tdNode.appendChild(createDelBtnNode());

tdNode.setAttribute("align", "center");

var tableNode = document.getElementById("result");

var tbodyNode = tableNode.firstChild;

tbodyNode.appendChild(trNode);


name.value = "";

content.value = "";

name.focus();

}

function createTdNode(val) {

//<td>val</td>

var txtNode = document.createTextNode(val);

var tdNode = document.createElement("td");

tdNode.appendChild(txtNode);

return tdNode;

}

//시스템 시간찍기

function getSysTime() {

        var d = new Date();

        var s =

          leadingZeros(d.getHours(), 2) + ':' +

          leadingZeros(d.getMinutes(), 2) + ':' +

          leadingZeros(d.getSeconds(), 2);

        return s;

    }

    //숫자의 자리수 를 0으로 채우기

    function leadingZeros(n, digits) {

    var zero = '';

        n = n.toString();

        if (n.length < digits) {

        for (i = 0; i < digits - n.length; i++)

        zero += '0';

        }

        return zero + n;

    }

    

    //테이블 삭제 전용 버튼 처리 함수

function createDelBtnNode() {

var btn = document.createElement("input");

btn.setAttribute("type", "button");

btn.setAttribute("value", "삭제");

btn.onclick = function() {

deleteNode(this);

};

return btn;

}

function deleteNode(obj) {

if (confirm("삭제할까요?")) {

var tdNode = obj.parentNode;

var trNode = tdNode.parentNode;

var tbodyNode = trNode.parentNode;

tbodyNode.removeChild(trNode);

}

}

</script>

</head>

<body>

<div>

<div><a href="">[Admin Login]</a></div>

<img src="img/WeddingPhoto.jpg" width="400" height="300">

<div>

<h3>홍길동, 박길순의 결혼식 청첩장 사이트</h3>

일시 : 2013.01.23 <span class="style1">(D-48</span>)</span><br> 

장소 : KH정보교육원<br> 

찾아오시는 방법 : 지하철 2호선 당산역 3번 출구 동화빌딩 3층<br>

<br>

</div>

<div>방명록에 글을 남겨주세요~</div>

<form>

<table>

<tbody>

<tr>

<td>글쓴이</td>

<td>

<input type="text" id="uname" name="uname"

onkeyup="textCountCheck(this, 'nameLen')">

(<span id="nameLen" class="style1">0</span>/50)

</td>

</tr>

<tr>

<td>글내용</td>

<td>

<input type="text" size="80" id="content" name="content"

onkeyup="textCountCheck(this, 'contentLen')">

(<span id="contentLen" class="style1">0</span>/200)

<a href="javascript:guestFormSubmit()">[글쓰기]</a>

</td>

</tr>

</tbody>

</table>

</form>

<table cellpadding="3" border="1" id="result"><tbody><tr><th width="60">번호</th><th width="100">글쓴이</th><th width="400">글내용</th><th width="180">작성일</th></tr><tr><td align="center">1</td><td align="center">주인장</td><td>많은 참석 바랍니다.</td><td align="center"></td></tr></tbody></table>

</div>

</body>

</html>






사용자 정의 객체




1. 객체는 사용자 정의 객체와 내장 객체로 구분.


2. 객체의 멤버인 속성과 메소드는 .(dot) 연산자를 이용해서 접근.


3. 사용자 정의 객체 형식


//객체명은 첫 글자를 대문자로 표기

function 객체명(인자리스트) {

//속성 정의

this.멤버명 = 값;


//메소드 정의

this.메소드명 = function(인자리스트) {

//실행문;

};

}



//객체 생성

new 변수 = new 객체명();


//접근 방법

변수.멤버명

변수.메소드명();


변수.멤버명 = 값;   -- setter의 역할과 비슷.

var 변수 = 변수.멤버명;  -- getter의 역할과 비슷.


변수.메소드명(); -- 리턴값없을때 실행하고 끝

var 변수 = 변수.메소드명(); -- 리턴값있을때 실행과 동시에 리턴값 변수에 저장




//OOP01.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//사용자 객체 정의

function Blog(body, date) {

//속성 정의

this.body = body; //매개변수 body를 속성에 셋팅

this.date = date; //매개변수 date를 속성에 셋팅

}

//객체 생성 -> 배열에 저장

var blog = [new Blog("사용자 정의 객체 테스트", "2012-11-13") // 배열 선언과 동시에 값지정.

          ,new Blog("생성자 작성시 첫글자는 대문자", "2012-11-14")

  ,new Blog("new연산자를 이용해서 객체생성", "2012-11-15")];

var str = "";

//객체의 하위 멤버(속성) 접근

for (var a=0; a<blog.length; a++) {

str += blog[a].body + " / ";

str += blog[a].date + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>사용자 정의 객체</h2>

<form>

<input type="button" value="사용자 정의 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



//OOP02.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//객체 생성 - 현재 시스템 날짜 리턴

var date = new Date();

//Date 객체의 하위 멤버(메소드) 접근

var str = "";

str += date.getFullYear() + "<br>";

str += (date.getMonth()+1) + "<br>";

str += date.getDate() + "<br>";

str += date.getDay() + "<br>";

str += date.getTime() + "<br>";

str += date.toDateString() + "<br>";

str += date.toLocaleDateString() + "<br>";

str += date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

//YYYY-MM-DD 형식 문자열 -> 사용자 정의 형식 필요

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>내장 객체</h2>

<form>

<input type="button" value="내장 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



//OOP03.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//사용자 객체 정의

function Blog(body, date) {

//속성 정의

this.body = body; //매개변수 body를 속성에 셋팅

this.date = date; //매개변수 date를 속성에 셋팅

/* //메소드 정의 -> 인스턴스 형식

//YYYY-MM-DD 형식의 날짜 문자열

this.toUserDateString = function(date) {

var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

return result;

}; */

//메소드 정의 -> 스태틱 형식 (prototype)

//YYYY-MM-DD 형식의 날짜 문자열

Blog.prototype.toUserDateString = function(date) {

var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

return result;

};

}

//객체 생성 -> 배열에 저장

var blog = [new Blog("사용자 정의 객체 테스트", new Date("2012-11-13")) // 배열 선언과 동시에 값지정.

          ,new Blog("생성자 작성시 첫글자는 대문자", new Date("2012-11-14"))

  ,new Blog("new연산자를 이용해서 객체생성", new Date("2012-11-15"))];

var str = "";

//객체의 하위 멤버인 날짜를 기준으로 정렬 추가

blog.sort(

function(obj1, obj2) {

//return obj1.date - obj2.date; //ACS

return obj2.date - obj1.date; //DESC

}

);

//객체의 하위 멤버(속성, 메소드) 접근

for (var a=0; a<blog.length; a++) {

str += blog[a].body + " / ";

str += blog[a].toUserDateString(blog[a].date) + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>사용자 정의 객체</h2>

<form>

<input type="button" value="사용자 정의 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



WRITTEN BY
빨강꼬마

,

만년달력(요일구하기)


1. 1년 1월 1일부터 전년도 12월 31일까지의 총 날짜수 구함.

var total = (year-1)*365 + ((year-1)/4 - (year-1)/100 + (year-1)/400);



2. 해당년도 1월 1일부터 해당년도 해당월 1일까지의 총 날짜수 구함.

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}


//해당월 1일 때문에 +1

total++;

//올해가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


3. 해당년도 해당월의 첫 날(1일)의 요일(일, 월, 화, 수, 목, 금, 토) 구함.

var d = ["일", "월", "화", "수", "목", "금", "토"];

var days = total % 7;


var result = document.getElementById("result");

result.innerHTML = d[days] + "요일";



문제) 특정 년, 월, 일 입력시 요일 구하기. 자바스크립트 이용.

실행 예)

년도 [2012 ]  월 [10 ]  일 [8  ]  [결과]


결과 : 월요일


//Script29.html

<!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>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

</style>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var dObj = document.getElementById("day");

//문자열->숫자

var year = parseInt(yObj.value);

var month = parseInt(mObj.value);

var day = parseInt(dObj.value);

//전년도까지의 총 날짜수 계산

//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.

var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);

//해당년도 전월까지의 총 날짜수 계산

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}

//해당년도가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


//해당월의 특정일까지의 총 날짜수 계산

total += day;


//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번

var days = total % 7;

//alert(days);

var d = ["일", "월", "화", "수", "목", "금", "토"];

var result = document.getElementById("result");

result.innerHTML = d[days] + "요일";

}

</script>

</head>

<body>

<div>

<h2>만년달력 요일 구하기</h2>

<h3>입력 ---------------</h3>

<form>

년 <input type="text" id="year" class="style01">

월 <input type="text" id="month" class="style01">

일 <input type="text" id="day" class="style01">

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>




//Script29.html & daysCalc.js 에서 daysCalc.js

function daysCalc(year, month, day) {

//year, month, day는 정수형 데이터만 가능

//전년도까지의 총 날짜수 계산

//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.

var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);

//해당년도 전월까지의 총 날짜수 계산

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}

//해당년도가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


//해당월의 특정일까지의 총 날짜수 계산

total += day;


//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번

var days = total % 7;

return days;

}





//Script29.html & daysCalc.js 에서 Script29.html

<!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>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

</style>

<script type="text/javascript" src="daysCalc.js"></script>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var dObj = document.getElementById("day");

//문자열->숫자

var year = parseInt(yObj.value);

var month = parseInt(mObj.value);

var day = parseInt(dObj.value);

//년, 월, 일 데이터로 요일 계산 함수 호출

var days = daysCalc(year, month, day);

//alert(days);

var d = ["일", "월", "화", "수", "목", "금", "토"];

var result = document.getElementById("result");

result.innerHTML = d[days] + "요일";

}

</script>

</head>

<body>

<div>

<h2>만년달력 요일 구하기</h2>

<h3>입력 ---------------</h3>

<form>

년 <input type="text" id="year" class="style01">

월 <input type="text" id="month" class="style01">

일 <input type="text" id="day" class="style01">

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 만년달력 출력. 자바스크립트 이용.


//Script30.html & daysCalc.js 에서 daysCalc.js (lastDay() 함수 추가됨)

function daysCalc(year, month, day) {

//year, month, day는 정수형 데이터만 가능

//전년도까지의 총 날짜수 계산

//윤년 계산시 나누기 연산이 실수형이라서 최종 결과가 정수형이 되도록 parseInt() 함수 사용.

var total = (year-1)*365 + parseInt((year-1)/4) - parseInt((year-1)/100) + parseInt((year-1)/400);

//해당년도 전월까지의 총 날짜수 계산

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

for (var a=0; a<month-1; a++) {

total += m[a];

}

//해당년도가 윤년이면서 2월 이상인 경우 +1

if (month>=3 && (year%4==0 && year%100!=0 || year%400==0)) {

total++;

}


//해당월의 특정일까지의 총 날짜수 계산

total += day;


//총 날짜수(정수형)를 7로 나눈 나머지 계산->요일에 대한 순번

var days = total % 7;

return days;

}


function lastDay(year, month) {

//year, month는 정수형만 가능

var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var day = m[month-1];

if (month==2 && (year%4==0 && year%100!=0 || year%400==0)) {

day = 29;

}


return day;

}



//Script30.html & daysCalc.js 에서 Script30.html

<!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>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

td {

padding:2px;

}

</style>

<script type="text/javascript" src="daysCalc.js"></script>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var year = parseInt(yObj.value);

var month = parseInt(mObj.value);

//요일 계산 전용 함수 호출

var week = daysCalc(year, month, 1);

//alert(week);

//마지막 날짜 구하는 함수 호출

var lastday = lastDay(year, month);

var str = "";

str += "<table><tbody>";

str += "<tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr>";

str += "<tr>";

//해당월 1일의 특정 요일에 해당하는 빈 칸 출력

for (var a=1; a<=week; a++) {

str += "<td></td>";

}

//해당월 1일부터 마지막 날까지 출력

for(var a=1; a<=lastday; a++) {

str += "<td style=\"text-align:center\">"+a+"</td>";

//일주일 단위로 행 변경

if (((a+week)%7)==0) {

str += "</tr><tr>";

}

}

str += "</tr></tbody></table>";

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>만년달력 출력</h2>

<h3>입력 ---------------</h3>

<form>

년 <input type="text" id="year" class="style01">

월 <input type="text" id="month" class="style01">

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 만년달력 출력2. 자바스크립트 이용.


//Script31.html

<!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>Insert title here</title>

<style type="text/css">

.style01 {

width:80px;

}

td {

padding:2px;

}

</style>

<script type="text/javascript" src="daysCalc.js"></script>

<script type="text/javascript">

function myFunc() {

//입력한 년, 월, 일 값 읽어오기->문자열

var yObj = document.getElementById("year");

var mObj = document.getElementById("month");

var year = parseInt(yObj.options[yObj.selectedIndex].value);

var month = parseInt(mObj.options[mObj.selectedIndex].value);

//요일 계산 전용 함수 호출

var week = daysCalc(year, month, 1);

//alert(week);

//마지막 날짜 구하는 함수 호출

var lastday = lastDay(year, month);

var str = "";

str += "<table><tbody>";

str += "<tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr>";

str += "<tr>";

//해당월 1일의 특정 요일에 해당하는 빈 칸 출력

for (var a=1; a<=week; a++) {

str += "<td></td>";

}

//해당월 1일부터 마지막 날까지 출력

for(var a=1; a<=lastday; a++) {

str += "<td style=\"text-align:center\">"+a+"</td>";

//일주일 단위로 행 변경

if (((a+week)%7)==0) {

str += "</tr><tr>";

}

}

str += "</tr></tbody></table>";

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>만년달력 출력</h2>

<h3>입력 ---------------</h3>

<form>

년 <select id="year" onchange="myFunc()"><option value="2011">2011년</option><option value="2012">2012년</option><option value="2013">2013년</option></select>

월 <select id="month" onchange="myFunc()"><option value="1">1월</option><option value="2">2월</option><option value="3">3월</option><option value="4">4월</option><option value="5">5월</option><option value="6">6월</option><option value="7">7월</option><option value="8">8월</option><option value="9">9월</option><option value="10">10월</option><option value="11">11월</option><option value="12">12월</option></select>

</form>

<h3>출력 ---------------</h3>

<div id="result"></div>

</div>

</body>

</html>







난수 발생


1. 0 부터 1 사이의 무작위 숫자를 난수라고 함.


2. Math.random() 메소드 이용.



//Script32.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var str ="";

for (var a=1; a<=10; a++) {

//1~100 사이의 난수

str += (parseInt(Math.random()*100)+1) + " ";  

}

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>난수 발생 테스트</h2>

<form>

<input type="button" value="결과"

onclick="myFunc()">

</form>

<h3>출력 ------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 여러개의 난수를 발생시키고, 난수들 중에서 가장 큰 값과 가장 작은 값을 별도 출력. 

중복되지 않은 난수만 허용. 난수 허용 범위는 1~100. 배열 이용. 자바스크립트 이용.


실행 예)

난수 갯수(2~20) [5   ] [결과]


난수 결과 : 55 9 12 6 90 

가장 큰 값 : 90

가장 작은 값 : 6


//Script33.html

<!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>Insert title here</title>

<style type="text/css">


.style01

{

width: 40px;

}


</style>

<script type="text/javascript">

function myFunc() {

var msg = "난수 결과 : ";

var str = "";

var temp = document.getElementById("data");

var number = parseInt(temp.value);

for (var a=0; a<number ; a++) {

str += (parseInt(Math.random()*100)+1) + " ";

}

var arr = new Array();

arr = str.split(" ");

var max = arr[0];

var min = arr[0];

for (var a=1; a<arr.length; a++) {

if (max < parseInt(arr[a])) {

max = arr[a];

}

if (min > parseInt(arr[a])) {

min = arr[a];

}

}

msg += str + "<br>가장 큰 값 : " + max + "<br>가장 작은 값 : " + min;

var result = document.getElementById("result");

result.innerHTML = msg;

}

</script>

</head>

<body>

<div>

<h2>난수 발생 테스트2</h2>

<form>

난수 갯수(2~20) <input type="text" id="data" class="style01"> <input type="button" value="입력" onclick="myFunc()" >

</form>

<h3>출력-----------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 가위,바위,보 게임. 

1~3 사이의 난수가 발생하면 가위, 바위, 보라고 생각하고 사용자가 내는 가위, 바위, 보와 비교해서 승패 결정.


사용자 선택 [가위] [바위] [ 보 ]


사용자:가위, 컴퓨터:바위

결과 : 컴퓨터 승!


//Script34.html

<!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>Insert title here</title>

<script type="text/javascript">

//전역변수

var userCount = 0;

var compCount = 0;

function myFunc(user) {

var comp = parseInt(Math.random()*3) + 1;

var msg = "";


if (user == comp) {

msg = "비겼습니다.";

} else if (user%3 == (comp+1)%3) {

msg = "사용자 승!";

userCount++;

} else {

msg = "컴퓨터 승!";

compCount++;

}

var arr = ["가위", "바위", "보"];

var str = "";

str += "사용자:" + arr[user-1] + ", 컴퓨터:" + arr[comp-1] + "<br>";

str += "결과 : "+ msg +"<br>";

str += "사용자승: " + userCount + "회, 컴퓨터승: " + compCount + "회";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>가위, 바위, 보 게임</h2>

<form>

사용자 선택

<input type="button" value="가위" onclick="myFunc(1)">

<input type="button" value="바위" onclick="myFunc(2)">

<input type="button" value=" 보 " onclick="myFunc(3)">

</form>

<h3>출력 -------------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 로또 번호를 원하는 장수 만큼 출력. 자바스크립트 이용.

로또 번호는 1~45 범위의 숫자를 중복되지 않은 상태에서 6개가 되면 1장에 해당.


실행 예)

로또 장수(1~20) [3  ]  [결과]


번호1 :  1 12 13 34 35 36

번호2 : 12 20 25 30 39 45

번호3 :  1  4  9 20 30 42



//Script35.html










라디오(<input type="radio" name="식별자"> 태그) 객체 다루기



실행 예)

 - 사이즈 선택 -

 o 싱글레귤러(1)

 o 파인트(3)

 o 쿼터(5)


   [확인]



//Script36.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

//NodeList(DOM) 자료형 반환됨 -> 컬렉션.

var radios = document.getElementsByName("size");

var result = 0;

for (var a=0; a<radios.length; a++) {

if (radios[a].checked) {

result = parseInt(radios[a].value);

}

}

var str = "";

switch (result) {

case 0 : str = "선택한 항목이 없습니다."; break;

case 1 : str = "선택한 사이즈는 싱글레귤러이며, 1개의 품목을 선택할 수 있습니다."; break;

case 3 : str = "선택한 사이즈는 파인트이며, 3개의 품목을 선택할 수 있습니다."; break;

case 5 : str = "선택한 사이즈는 쿼터이며, 5개의 품목을 선택할 수 있습니다."; break;

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>라디오 객체 다루기</h2>

<form>

-사이즈 선택- <br>

<input type="radio" name="size" value="1"> 싱글레귤러(1)<br>

<input type="radio" name="size" value="3"> 파인트(3)<br>

<input type="radio" name="size" value="5"> 쿼터(5)<br>

<input type="button" value="확인" onclick="myFunc()">

</form>

<h3>출력 -----------------</h3>

<div id ="result"></div>

</div>

</body>

</html>





라디오(<input type="radio" name="식별자"> 태그) 객체 다루기2



실행 예)

 - 사이즈 선택 -

 o 싱글레귤러(1)

 o 파인트(3)

 o 쿼터(5)



//Script37.html (확인 버튼 없이 라디오 객체에서 직접 클릭 이벤트 처리)

<!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>Insert title here</title>


<script type="text/javascript">

function myFunc(obj) {

var result = 0;

result = parseInt(obj.value);

var str = "";

switch(result) {

case 1: str="선택한 사이즈는 싱글레귤러(1)입니다."; break;

case 3: str="선택한 사이즈는 파인트(3)입니다."; break;

case 5: str="선택한 사이즈는 쿼터(5)입니다."; break;

}

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>라디오 객체 다루기2</h2>

<form>

- 사이즈 선택-<br><br>

<input type="radio" name="size" value="1"

onclick="myFunc(this)"> 싱글레귤러(1)<br>

<input type="radio" name="size" value="3"

onclick="myFunc(this)"> 파인트(3)<br>

<input type="radio" name="size" value="5"

onclick="myFunc(this)"> 쿼터(5)<br><br>

<!-- <input type="button" value="확인"

onclick="myFunc()"> -->

</form>

<h3>출력-----------</h3>

<div id="result"></div>

</div>

</body>

</html>






체크박스(<input type="checkbox"> 태그) 객체 다루기



실행 예)

           - 종류 선택 -

 [v]고스트월드      [v]엄마는 외계인

 [ ]바나나몬스터    [ ]초코라떼크런치

 [ ]뉴욕치즈케익    [ ]슈팅스타

              [확인]




//Script38.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var names = ["고스트월드", "엄마는 외계인", "바나나몬스터", "초코라떼크런치", "뉴욕치즈케익", "슈팅스타"];

var checkboxes = document.getElementsByName("icecream");

var icecream = new Array();

for (var a=0, b=0; a<checkboxes.length; a++) {

if (checkboxes[a].checked) {

icecream[b] = parseInt(checkboxes[a].value);

b++;

}

}

var str = "";

if (icecream.length == 0) {

str = "선택된 항목이 없습니다.";

} else {

str += "선택한 종류는 <br>";

for (var a=0; a<icecream.length; a++) {

str += (a+1) + ". " + names[icecream[a]-1] + "<br>";

}

str += "입니다.<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>체크박스 객체 다루기</h2>

<form>

- 종류 선택 -<br>

<input type="checkbox" name="icecream" value="1">고스트월드<br>

<input type="checkbox" name="icecream" value="2">엄마는 외계인<br>

<input type="checkbox" name="icecream" value="3">바나나몬스터<br>

<input type="checkbox" name="icecream" value="4">초코라떼크런치<br>

<input type="checkbox" name="icecream" value="5">뉴욕치즈케익<br>

<input type="checkbox" name="icecream" value="6">슈팅스타<br>

<input type="button" value="확인" onclick="myFunc()">

</form>

<h3> 출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>










문제) 선택 갯수 제한하기. 자바스크립트 이용.

제약조건

1. 사이즈 선택한 갯수를 초과해서 선택할 수 있다.

2. 제한된 갯수를 넘는 경우 '갯수 초과' 메세지 출력

3. 최종적으로 주문 버튼 클릭시는 주문 내역(사이즈, 종류)출력



실행 예)

          - 사이즈 선택 -

            o 싱글레귤러(1)

            o 파인트(3)

            o 쿼터(5)



           - 종류 선택 -

 [v]고스트월드      [v]엄마는 외계인

 [ ]바나나몬스터    [ ]초코라떼크런치

 [ ]뉴욕치즈케익    [ ]슈팅스타

              [확인]





//Script39.html


WRITTEN BY
빨강꼬마

,

반복문


1. for문. 정해진 횟수만큼 반복해야 하는 경우 사용하는 구문.


-기본형식

for (대입문 ; 조건식 ; 증감식) {

//실행문

}



2. do~while문


-기본형식

do {

//실행문

} while(조건식)



//Sample09.html

//1부터 10까지 출력하는 반복문 테스트.

<!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>Insert title here</title>


<script type="text/javascript">

function myFunc() {

var str = "";

for(var a=0; a<=10; a++) {

str += a + " ";

}

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>반복문 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>





1~100사이의 짝수만 출력


//Script10.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var str = "";

for(var a=2; a<=100; a+=2) {

str += a + "<br>";

}

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 짝수만 출력</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>






반복문이용해서 1~100짝수 출력하고 마지막에 짝수들의 합 출력. 자바스크립트 이용.


2

4

6

...

100

----------------

합계: xxxx



//Script11.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var str = "";

var sum = 0;

for(var a=2; a<=100; a+=2) {

str += a + "<br>";

sum += a;

}

str += "------------<br>합계: " + sum 

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 짝수만 출력</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>





문제) 1부터 100까지의 수중에서 4의 배수만 출력. 한줄에 4개씩 출력. while, 자바스크립트 이용.

실행 예)


 4  8 12 16

20 24 28 32

...



//Script12.html

<!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>Insert title here</title>

<script type = "text/javascript">

function myFunc() {

var str = "";

var a = 0;

do {

a++;

if ((a%4) == 0) {

str += a + " "; 

}

if ((a%16) == 0) {

str += "<br>";

}

}while(a<=100);

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 4의 배수만 출력. 한줄에 4개씩 출력.</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 1부터 100까지의 수중에서 4의 배수만 출력

한줄에 4개씩 출력. 줄 끝에 해당 줄 숫자들의 합을 출력

while문 이용. 자바Script 이용.

실행 예)


 4  8 12 16 -> 40

20 24 28 31 -> 104

...


//Script13.html

<!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>Insert title here</title>

<script type = "text/javascript">

function myFunc() {

var str = "";

var a = 0;

var sum = 0;

do {

a++;

if ((a%4) == 0) {

str += a + " ";

sum += a;

}

if ((a%16) == 0) {

str += " -> "+ sum +"<br>";

sum = 0;

}

}while(a<=100);

var result = document.getElementById("result")

result.innerHTML = str;

}

</script>

</head>

<body>

<div>

<h2>1~100사이의 수에서 4의 배수만 출력. 한줄에 4개씩 출력.</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">  /* 이벤트 핸들러 */

</form>

<h3>출력 ----------------</h3>

<div id="result"></div>

</div>

</body>

</html>





자바스크립트 대화상자


1. alert(), confirm(), prompt() 함수를 이용.


2. alert()은 확인 버튼만 지원. 메시지 출력 전용.


3. confirm()은 확인, 취소 버튼 지원. 선택적 진행 가능.


4. prompt()는 외부 입력이 가능한 대화상자. 확인, 취소 버튼 지원.




//Script14.html

<!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>Insert title here</title>


<script type="text/javascript">

function myFunc() {

//alert("아이디 또는 패스워드가 틀렸습니다.");

/* var result = confirm("현재 선택된 자료를 삭제할래?");

if(result) {

//삭제 정상 진행

} */

var str = prompt("숫자 입력(양의 정수)?");

if (str != null) {

//result 변수 안에는 유효한 문자열이 들어있다.

var result = document.getElementById("result");

result.innerHTML = str;

}

}

</script>

</head>

<body>

<div>

<h2>자바스크립트 대화상자</h2>

<form>

<input type="button" value="alert() 호출" onclick="myFunc()">

<input type="button" value="confirm() 호출" onclick="myFunc()">

<input type="button" value="prompt() 호출" onclick="myFunc()">

</form>

<div id = "result"></div>

</div>

</body>

</html>






입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.

실행 예)

숫자 입력(양의 정수)?1   -> prompt 이용.

숫자 입력(양의 정수)?2

숫자 입력(양의 정수)?3

숫자 입력(양의 정수)?-1

1

1 2

1 2 3

...


//Script15.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var msg = "";

var temp = "";

do {

var str = prompt("숫자 입력(양의 정수)?");

if(str == null || str == -1) {

break;

}

temp += str + " ";

msg += temp + "<br>"; 

}while (true);

var result = document.getElementById("result");

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>반복 입력. prompt 사용.</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 -----------</h3>>

<div id="result"></div>

</div>

</body>

</html>





입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.

실행 예)

숫자 입력(양의 정수)?1   -> prompt 이용.

숫자 입력(양의 정수)?2

숫자 입력(양의 정수)?3

숫자 입력(양의 정수)?-1

1 -> 1

1 2 -> 3

1 2 3 -> 6

...


//Script16.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var msg = "";

var temp = "";

var sum = 0;

do {

var str = prompt("숫자 입력(양의 정수)?");

if(str == null || str == -1) {

break;

}

temp += str + " ";

sum += parseInt(str);

msg += temp + " -> " + sum + "<br>"; 

}while (true);

var result = document.getElementById("result");

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>반복 입력. prompt 사용.</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 -----------</h3>>

<div id="result"></div>

</div>

</body>

</html>






입력받은 숫자(양의 정수)를 화면에 출력하되, -1이 입력될때까지 계속 반복.

실행 예)

숫자 입력(양의 정수)?1   -> prompt 이용.

숫자 입력(양의 정수)?2

숫자 입력(양의 정수)?3

숫자 입력(양의 정수)?-1

1

1 2

1 2 3

...

------------------------------------------

현재까지 입력된 숫자들중에서 최대값: xxxx


//Script17.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var msg = "";

var temp = "";

var max = 0;

do {

var str = prompt("숫자 입력(양의 정수)?");

if(str == null || str == -1) {

break;

}

if (max < parseInt(str)){

max = parseInt(str);

}

temp += str + " ";

msg += temp + "<br>";

}while (true);

msg += "----------------------------------<br>현재까지 입력된 숫자들중에서 최대값: " + max;

var result = document.getElementById("result");

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>반복 입력. prompt 사용.</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 -----------</h3>

<div id="result"></div>

</div>

</body>

</html>





이중 반복문


1. for문이나 while문 등을 겹쳐서 코딩.



for (대입문 1; 조건식 2, 12, 19; 증감식 11, 18) {


//(이 부분은 바깥쪽 for문의 영향 범위)

for (대입문 3, 13; 조건식 4, 7, 10, 14, 17; 증감식 6, 9, 16) {

//이 부분은 안쪽 for문의 영향 범위 5, 8, 15

}

//(이 부분은 바깥쪽 for문의 영향 범위)


}



//1~5 까지 5회 반복.

//Script18.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var str = "";

for (var a=1 ; a<=5 ; a++) {

for (var b=1; b<=5 ; b++) {

str += b + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>이중 반복문 테스트</h2>

<form><input type="button" value="결과" onclick="myFunc()"></form>

<h3>출력--------------</h3>

<div id="result"></div>

</div>

</body>

</html>






아래 출력 결과를 얻을 수 있는 이중 반복문 작성.

실행 예)

1 2 3 4 5 6 7 8 9 10 

2 3 4 5 6 7 8 9 10

3 4 5 6 7 8 9 10

4 5 6 7 8 9 10

5 6 7 8 9 10

6 7 8 9 10

7 8 9 10

8 9 10

9 10

10


//Script19.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var str = "";

for (var a=1 ; a<=10 ; a++) {

for (var b=a; b<=10 ; b++) {

str += b + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>이중 반복문 테스트2</h2>

<form><input type="button" value="결과" onclick="myFunc()"></form>

<h3>출력--------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 아래와 같은 결과가 나오도록 이중 for문 구성.


실행 예)

1 2 3 4 5 6 7 8 9 10 

1 2 3 4 5 6 7 8 9

1 2 3 4 5 6 7 8

1 2 3 4 5 6 7

1 2 3 4 5 6

1 2 3 4 5

1 2 3 4

1 2 3

1 2

1



//Script20.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var str = "";

for (var a=10 ; a>=1 ; a--) {

for (var b=1; b<=a ; b++) {

str += b + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>이중 반복문 테스트3</h2>

<form><input type="button" value="결과" onclick="myFunc()"></form>

<h3>출력--------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 구구단 출력. 반복문 이용. 입력된 데이터 검사 과정 추가. 자바 스크립트 이용.

실행 예)

원하는 단수(1~9)? [5  ] [결과]

5 * 1 = 5

5 * 2 = 5

...


5 * 9 = 45



//Script21.html

<!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>Insert title here</title>

<style type="text/css">

.style01 {

width:40px;

}

</style>


<script type="text/javascript">


function myFunc() {

var temp = document.getElementById("num");

var number = parseInt(temp.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

if (temp.value.match(/[^1-9]/) || number > 9 ) {

msg.style.display = "inline";

temp.value = "";

temp.focus();

} else {

var str = "";

for (var a=1; a<=9 ; a++) {

str += number + " * " + a + " = " + (number*a) + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

}


</script>

</head>

<body>

<div>

<h2>구구단 출력</h2>

<h3>입력--------------</h3>

<form>

원하는 단수(1~9)? <input type="text" id="num" class="style01">

<input type="button" value="결과" onclick="myFunc()">

<span id="msg" style="color:red; display:none;"> 1~9 사이의 숫자만 입력 가능합니다.</span>

</form>

<div id="result"></div>

</div>

</body>

</html>






배열(Array)


1. 배열은 크기와 성격이 같은 일련의 원소들이 모여 공동의 집합 구조를 갖는 자료의 집합체.



2. 특징

- 하나의 이름(식별자)을 가지고 여러개의 저장 공간을 가진다.

- 자료형이 같은 자료만 저장할 수 있다.

- 사전에 공간의 크기를 지정해야 한다. -> 예외

- 참조형이다.

- 특정 저장 공간을 지칭하기 위해서 인덱스(0부터 시작되는 번호)를 이용한다.

- 배열의 배열을 이용해서 다차원 배열을 만들 수 있다.

- 자동 초기화 지원



3. 배열 사용 방법


var 변수 = new Array(); //배열 선언. 크기 지정 생략 가능.

변수[인덱스] = 값; //인덱스 사용

var 변수 = [값1, 값2, ...]; //배열선언과 동시에 초기값 지정



//배열에 초기값 지정. 값 중에 가장 큰 값 출력.

//Script22.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var array = [5, 3, 7, 6, 8, 1, 9, 0, 2, 4];

var max = array[0];

var str = "배열 초기값 : ";

for (var a=0; a<array.length; a++) {

str += array[a] + " ";

if (max < array[a]) {

max = array[a];

}

}

str += "<br>";

str += "최대값 : " + max;

var result = document.getElementById("result")

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 외부에서 여러개의 숫자를 입력 받고, 그 값중에서 가장 큰 값 출력. 배열이용. 자바스크립트 이용.

split() 메소드 이용.


실행 예)

배열의 초기값 [5 3 7 6 8 1 9 0 2 4    ] [결과]


배열 초기값 : 5 3 7 6 8 1 9 0 2 4 

최대값 : 9




//Script23.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var array = new Array();

var numbers = document.getElementById("numbers");

array = numbers.value.split(" ");

var max = parseInt(array[0]);

var str = "배열 초기값 : " + numbers.value;

for (var a=0; a<array.length; a++) {

if (max < parseInt(array[a])){

max = parseInt(array[a]);

}

}

str += "<br>최대값 : " + max;

var result = document.getElementById("result")

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열 테스트2</h2>

<form>

배열의 초기값 (공백으로 구분해서 숫자 여러개 입력)<br>

<input type="text" id="numbers">

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 이름, 국어, 영어, 수학을 입력받아서 총점, 평균 출력. 배열이용. 자바스크립트 이용. split() 메소드 이용.


실행 예)

성적 입력(이름 국어 영어 수학) [홍길동 100 100 100     ] [결과]


입력받은 데이터 : 홍길동 100 100 100

총점: 300

평균: 100.0



//Script24.html







문제) 여러개의 숫자를 입력 받아서 정렬 출력. 자바스크립트 이용.


실행예)

배열의 초기값(공백으로 구분해서 숫자 여러개 입력)

[5 3 7 6 8 1 9 0 2 4    ] [결과]


배열 초기값 : 5 3 7 6 8 1 9 0 2 4 

정열 결과 : 0 1 2 3 4 5 6 7 8 9







문제) 여러명의 성적(이름, 국어, 영어, 수학)을 입력받아서 총점, 평균, 등수 출력. 배열 이용. split() 메소드 이용. 자바스크립트 이용.


실행 예)

성적 입력(이름 국어 영어 수학)?홍길동 100 100 100 -> promt 이용

성적 입력(이름 국어 영어 수학)?김길동 90 80 90

성적 입력(이름 국어 영어 수학)?-1


이름   국어 영어 수학 총점 평균   등수

홍길동 100  100  100  XXX  XXX.X  1

김길동  90   80   90  XXX  XXX.X  2



//Script25.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var msg = "<table><tr><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>총점</td><td>평균</td><td>등수</td></tr><br>";

var name = new Array();

var kor = new Array();

var eng =  new Array();

var mat =  new Array();

var tot =  new Array();

var avg =  new Array();

var ranks = new Array();


var a = 0;

do {

var array = new Array();

var str = prompt("성적 입력(이름 국어 영어 수학)?");

if (str == null || str == -1) {

break;

}

array = str.split(" ");

name[a] = array[0];

kor[a] = parseInt(array[1]);

eng[a] = parseInt(array[2]);

mat[a] = parseInt(array[3]);

tot[a] = parseInt(array[1]) + parseInt(array[2]) + parseInt(array[3]);

avg[a] = Math.round((tot[a] / 3)*10)/10;

a++;

} while(true);

for (var a=0; a<name.length ; a++) {

ranks[a] = 1;

}

for (var n=0; n<ranks.length; n++) {

for (var m=0; m<ranks.length; m++) {

if (n == m) {

continue;

}

if (tot[n] < tot[m]) {

ranks[n]++;

}

}

}

for (var a=0 ; a<name.length ; a++) {

msg += "<tr><td>" + name[a] + "</td><td>" + kor[a] + "</td><td>"  + eng[a] + "</td><td>"  + mat[a] + "</td><td>" + tot[a] + "</td><td>" + avg[a] + "</td><td>" + ranks[a] + "</td></tr>";

}

msg += "</table>";

var result = document.getElementById("result")

result.innerHTML = msg;

}


</script>

</head>

<body>

<div>

<h2>배열 테스트3</h2>

<form>

<input type="button" value="입력" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>







배열의 배열(다차원 배열)


1. 1차원 배열 여러개를 조합시켜서 사용하는 배열.


2. 선언


var 변수 = new Array();

변수[0] = new Array();

변수[1] = new Array();

....



변수[인덱스1[인덱스2] = 값;


var 변수 = [[값1, 값2, ...], [값1, 값2,....], ....];


//Script27.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var arr = new Array();

arr[0] = new Array();

arr[1] = new Array();

var str = "";

arr[0][0] = 1;

arr[0][1] = 2;

arr[0][2] = 3;

arr[1][0] = 4;

arr[1][1] = 5;

arr[1][2] = 6;

for (var a=0; a<2; a++) {

for (var b=0; b<3; b++) {

str += arr[a][b] + " ";

}

str += "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열의 배열 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>







//1~25까지의 수를 저장하는 배열의 배열 선언

실행 예)

 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




//Script28.html

<!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>Insert title here</title>

<script type="text/javascript">


function myFunc() {

var arr = new Array();

arr[0] = new Array();

arr[1] = new Array();

arr[2] = new Array();

arr[3] = new Array();

arr[4] = new Array();

var str = "";

for (var a=0, c=1; a<5; a++) {

for (var b=0; b<5; b++) {

arr[a][b] = c++;

}

}

for (var a=0; a<arr.length; a++) {

for (var b=0; b<arr[a].length; b++) {

str += arr[a][b] + " ";

}

str += "<br>";

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>배열의 배열 테스트</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력 --------------</h3>

<div id="result"></div>

</div>

</body>

</html>





문제) 아래와 같은 형태의 숫자 출력이 되도록 배열의 배열 지정. 자바스크립트 이용.


실행 예)


 1  2  3  4  5 

 2  3  4  5  6 

 3  4  5  6  7 

 4  5  6  7  8 

 5  6  7  8  9 


//Script29.html

<!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>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var arr = new Array();

arr[0] = new Array();

arr[1] = new Array();

arr[2] = new Array();

arr[3] = new Array();

arr[4] = new Array();

var str = "";

for (var a=0; a<5; a++) {

for (var b=0, c=(a+1); b<5; b++, c++) {

arr[a][b] = c;

}

}

for (var a=0; a<5; a++) {

for (var b=0; b<5; b++) {

str += arr[a][b] + " ";

}

str += "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

</script>

</head>

<body>

<div>

<h2>배열의 배열 테스트2</h2>

<form>

<input type="button" value="결과" onclick="myFunc()">

</form>

<h3>출력------------------</h3>

<div id ="result"></div>

</div>

</body>

</html>


WRITTEN BY
빨강꼬마

,

테이블 태그


1. <table>,<tbody>,<tr>,<td> 태그의 조합에 의해 표 형식을 만들 수 있다.


2. 형식

<table>

<tbody>

<tr>  --> 행 역할

<td>콘텐츠</td><td>콘텐츠</td>...  --> 열 역활

</tr>

<tr>

<td>콘텐츠</td><td>콘텐츠</td>...

</tr>

...

</tbody>

</table>


3. 제목 표시하는 경우는 <td> 대신에 <th>을 사용.


예를 들어서, 회원 명단을 테이블 태그로 표현하면


번호 이름    전화번호      이메일         

1    홍길동  010-111-1111  hong@naver.com 

2    김길동  010-222-2222  kim@naver.com  


//Sample08.html

<!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>Insert title here</title>

<style type="text/css">

table td, table th  /* 식별자, 식별자는 두 개의 식별자에 동시에 CSS 적용 */ 

{

padding: 5px;

border-right-style: solid; /* 경계선의 모양 지정 속성 */

border-bottom-style: solid; /* 경계선의 모양 지정 속성 */

border-width: 1px; /* 경계선의 굵기 지정 속성 */

border-color: #6980b8; /* 경계선의 색 지정 속성 */

}

</style>

</head>

<body>

<div>

<table cellspacing="4">

<tbody>

<tr>

<th>번호</th>

<th>이름</th>

<th>전화번호</th>

<th>이메일</th>

</tr>

<tr>

<td>1</td>

<td>홍길동</td>

<td>010-111-1111</td>

<td>hong@naver.com</td>

</tr>

<tr>

<td>2</td>

<td>김길동</td>

<td>010-222-2222</td>

<td>kim@naver.com</td>

</tr>

</tbody>

<!--

<tfoot><tr><td style="border:none;">표1. 회원 명단</td></tr> </tfoot>

-->

</table>

</div>

</body>

</html>





입력 폼(Form) 태그


1. <form>, <input>, <select>, <textarea> 태그의 조합으로 입력 인터페이스 구성.


2. <input> 에서 type 속성(text, password, radio, checkbox, file, hidden, submit, reset, button)으로 

여러가지 입력 폼 구성 가능.


3. <select> 태그는 하위 태그로서 <option> 태그를 갖는다.


4. <form> 태그는 <input>,<select>,<textarea>의 부모 태그 역할.


예를 들어, 이름, 전화번호 입력 양식 화면 구성시


<form>

이름 <input type="text">  --> 실행시 텍스트 입력 양식이 된다.

전화번호 <input type="text">

</form>



//Sample09.html

<!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>Insert title here</title>


<style type="text/css">


input.style01  /* 특정 태그의 스타일(style) 속성이 style01인 경우에만 속성 적용 */ 

{

}

input:FOCUS { /* 특정 태그에 포커스가 맞춰진 경우만 속성 적용 */

background-color: yellow;

}

}

</style>


</head>

<body>

<div>

<h1>회원가입</h1>

<p>회원가입 안내 문구</p>

<form>

<table>

<tbody>

<tr>

<td>이름</td>

<td><input type="text" class="style01"></td>

</tr>

<tr>

<td>전화번호</td>

<td><input type="text" class="style01"></td>

</tr>

<tr>

<td>성별</td>

<td><input type="radio" name="gender">남자<input type="radio" name="gender">여자</td>

</tr>

<tr>

<td>취미</td>

<td>

<input type="checkbox"> 공부 

<input type="checkbox"> 영화

<input type="checkbox"> 운동

<input type="checkbox"> 독서

</td>

</tr>

<tr>

<td>출신지역</td>

<td>

<select>

<option>서울</option>

<option>부산</option>

<option>인천</option>

<option>대구</option>

</select>

</td>

</tr>

<tr>

<td>자기소개</td>

<td>

<textarea style="width:300px; height:100px;"></textarea>

</td>

</tr>

<tr>

<td></td>

<td><input type="button" value="가입"></td>

</tr>

</tbody>

</table>

</form>

</div>

</body>

</html>








Javascript


1. 자바스크립트는 프로그램 언어의 한 종류. HTML의 태그를 객체로 삼아서 데이터 처리를 하는 프로그램 언어.


2. 변수, 연산자, 제어문, 함수, 배열, 객체 등의 표현이 모두 지원됨.


3. HTML, CSS, Javascript 가 혼용된 형태로 코딩을 해야 함.


4. 형식


<script type="text/javascript">

//자바스크립트 코드 작성

/* 범위 주석 */

</script>


5. 기본 규칙

- 대소문자 구분

- 함수 단위로 코딩

- 함수 영역 내에 있는 코드는 함수 호출시에만 실행됨

- 함수 영역 밖에 있는 코드는 HTML 문서가 브라우저에 로드될 때 실행됨

- 함수 호출은 HTML 에서 이벤트 핸들러(onclick, ...)를 이용함

- HTML 태그를 객체로 접근하기 위해서 document.getElementById("아이디명") 메소드 사용

- document는 내장객체로서 HTML 문서의 body 태그 영역을 지정함

- HTML 태그에서는 id 속성을 지정해서 객체 접근이 가능하도록 함

- 객체로 접근한 후에는 해당 객체가 가지고 있는 여러가지 속성을 자바스크립트에서 사용 가능

- 사용 가능한 속성은 해당 객체의 종류에 따라 다름

- 자바스크립트 내에서만 사용 가능한 여러가지 내장 객체가 지원됨






이벤트 핸들러 테스트


//Script01.html

<!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>Insert title here</title>


<script type="text/javascript">

//변수 선언->전역 변수(멤버 변수)

var a = 10;

//함수(메소드) 정의

function myFunc() {

//변수 선언->지역 변수

var b = 20;

var c = 0;

//연산

c = a + b;


//출력->자체 출력문을 사용하지 않고 HTML 객체를 통해서 결과 출력함.

var obj = document.getElementById("result");

obj.innerHTML = "<span style=\"font-size:24pt;\">결과: " + c +"</span>";

}


</script>


</head>

<body>

<div>

<h3>자바스크립트를 이용한 메시지 출력</h3>

<form>

<input type="button" value="함수호출"

onclick="myFunc()">

</form>

<div id="result">결과: </div>

</div>

</body>

</html>






이름, 국어, 영어, 수학을 입력 받아서 총점, 평균 출력


//Script02.html

<!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>Insert title here</title>


<style type="text/css">

.score { width:80px; }

</style>


<script type="text/javascript">


function myFunc() {

var nameObj = document.getElementById("name"); 

var korObj = document.getElementById("kor");

var engObj = document.getElementById("eng");

var matObj = document.getElementById("mat");

var tot = parseInt(korObj.value) + parseInt(engObj.value) + parseInt(matObj.value);

var ave = Math.round((tot / 3)*10)/10;

var result = document.getElementById("result");

result.innerHTML = "<span style=\"font-size:14pt;\">이름:"+nameObj.value+", 국어:"+korObj.value+", 영어:"+engObj.value+", 수학:"+matObj.value+", 총점:"+tot+", 평균:"+ave+"</span>";

}

</script>


</head>

<body>

<div>

<h2>총점, 평균 계산</h2>

<h3>입력------</h3>

<form>

이름 <input type="text" id="name" value="">

국어 <input type="text" id="kor" class="score">

영어 <input type="text" id="eng" class="score">

수학 <input type="text" id="mat" class="score">

<input type="button" value="결과"

onclick="myFunc()">

</form>


<h3>출력------</h3>

<div id="result">

<!-- 

<span style="font-size:14pt;">이름:홍길동, 국어:100, 영어:100, 수학:100, 총점:300, 평균:100.0</span>

-->

</div>

</div>

</body>

</html>






문제) 거스름돈을 환폐단위로 구분해서 출력. 자바스크립트 이용.

실행 예)

금액(10~1000) [ 990  ]  [결과]

총액 : 990원

오백원 1개, 백원 4개, 오십원 1개, 십원 4개


//Script03.html

<!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>Insert title here</title>


<script type="text/javascript">

function myFunc() {

var moneyObj = document.getElementById("money");


var money = parseInt(moneyObj.value);

var m500, m100, m50, m10;

m500 = parseInt(money / 500); //몫 연산

money = money % 500; //나머지 연산

m100 = parseInt(money / 100);

money = money % 100;

m50 = parseInt(money / 50);

money = money % 50;

m10 = parseInt(money / 10);

var result = document.getElementById("result");

result.innerHTML = "총액 : "+moneyObj.value+"원<br>오백원 "+m500+"개, 백원 "+m100+"개, 오십원 "+m50+"개, 십원 "+m10+"개";

}

</script>


</head>

<body>

<div>

<h2>거스름돈 계산</h2>

<h3>입력 ---------- </h3>

<form>

금액(10~1000)

<input type="text" id="money"> 

<input type="button" value="결과" 

onclick="myFunc()">

</form>

<h3>출력 ---------- </h3>

<div id="result">

<!-- 총액 : 990원<br>

오백원 1개, 백원 4개, 오십원 1개, 십원 4개 -->

</div>

</div>

</body>

</html>






if문


1. 제어문 일종. 조건식 검사를 통해서 조건에 결과에 따라서 실행문 실행을 선택.


2. 형식

if (조건) {

}


if (조건) {

} else {

}


if (조건) {

} else if (조건) {

} else {

}


3. 조건식에 사용되는 관계연산자, 논리연산자는 자바와 동일.


4. 자바스크립트에서는 문자열 비교시 == 연산자 사용함(자바에서는 equals() 메소드 사용).






문제) 세 개의 숫자 중에서 가장 큰 숫자 구하기. 자바스크립트 이용.

실행 예)

숫자1 [XX] 숫자2 [YY] 숫자3 [ZZ]  [결과]


입력 받은 숫자 : XX, YY, ZZ

가장 큰 숫자 :  ZZ


//Script04.html






문제) 비밀번호 입력시 확인 결과 출력. 자바스크립트 이용.

<input type="password"> 태그 이용.

실행 예)


비밀번호(숫자만 입력 가능) [**** ]  [결과]


결과: 암호가 틀렸습니다.


//Script05.html

<!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>Insert title here</title>


<script type="text/javascript">


function myFunc() {

var pw = document.getElementById("pw");

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if (pw.value.match(/[^0-9]/)) {

msg.style.display = "inline";

pw.value = "";

pw.focus();

}

var str = "";

if (pw.value == "1234") {

str = "암호가 맞습니다.";

} else {

str = "암호가 틀렸습니다.";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>비밀번호 확인</h2>

<h3>입력 ------------------</h3>

<form>

비밀번호(숫자만 입력 가능)

<input type="password" id="pw">

<input type="button" value="결과"

onclick="myFunc()">

<span id="msg" 

style="color:red; display:none;">

숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>






문제) 임의의 수를 입력 받아서 3의 배수, 4의 배수로 구분해서 출력. 자바스크립트 이용.

실행 예)

임의의 정수(3 또는 4의 배수)  [3  ] [결과]


입력받은 숫자 : 3

구분 : 3의 배수


//Sample06.html

<!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>Insert title here</title>


<script type="text/javascript">


function myFunc() {

var num = document.getElementById("num");

var data = parseInt(num.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if (num.value.match(/[^0-9]/)) {

msg.style.display = "inline";

num.value = "";

num.focus();

}

var str = "";

str += "입력받은 숫자 : " + num.value + "<br>";

if ((data % (3*4)) == 0) {

str += "구분 : 3 또는 4의 배수";

} else if ((data % 3) == 0) {

str += "구분 : 3의 배수";

} else if ((data % 4) == 0) {

str += "구분 : 4의 배수";

}


var result = document.getElementById("result");

result.innerHTML = str;

}

</script>


</head>

<body>

<div>

<h2>배수 확인</h2>

<h3>입력 ------------------</h3>

<form>

임의의 정수(3 또는 4의 배수)

<input type="text" id="num">

<input type="button" value="결과"

onclick="myFunc()">

<span id="msg" 

style="color:red; display:none;">

숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>





문제) 임의의 점수를 입력받아서 판정을 출력. 자바스크립트 이용.

입력된 데이터가 숫자인지 검사하는 과정, 0~100 사이의 숫자인지 검사하는 과정 추가.

판정 기준은 

90~100 -> A

80~89 -> B

70~79 -> C

60~69 -> D

0~59 -> F


실행 예)

점수 입력(0~100)  [90  ]  [결과]

입력된 점수 : 90

판정 결과 : A


//Sample07.html

<!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>Insert title here</title>


<script type="text/javascript">


function myFunc() {

var num = document.getElementById("num");

var data = parseInt(num.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if (num.value.match(/[^0-9]/) || data>100) {

msg.style.display = "inline";

num.value = "";

num.focus();

} else {

var str = "";

str += "입력된 점수 : " + num.value + "<br>";

str += "판정 결과 : ";

if (data < 60) {

str += "F";

} else if (data < 70) {

str += "D";

} else if (data < 80) {

str += "C";

} else if (data < 90) {

str += "B";

} else {

str += "A";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

}

</script>


</head>

<body>

<div>

<h2>판정 확인</h2>

<h3>입력 ------------------</h3>

<form>

점수 입력(0~100)

<input type="text" id="num">

<input type="button" value="결과"

onclick="myFunc()">

<span id="msg" 

style="color:red; display:none;">

0~100 사이의 숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>







문제) 국어, 영어, 수학 점수를 입력 받아서 판정 결과 출력. 자바스크립트 이용.

입력된 데이터가 숫자인지 검사하는 과정, 0~100 사이의 숫자인지 검사하는 과정 추가.


판정 기준은

합격 -> 과목별로 40점 이상이면서, 평균이 60점 이상

과락 -> 과목중에 40점 미만이 있고, 평균은 60점 이상

불합격 -> 평균이 60점 미만


평균이 60점 이상 -> 합격

평균이 60점 미만 -> 불합격


합격 또는 과락 구분은 -> 국어, 영어, 수학 점수가 모두 40점 이상인 확인.


실행 예)

국어(0~100) [XX ]  영어(0~100) [YY ]  수학(0~100) [ZZ  ]  [결과]


입력받은 점수 : 국어 XX, 영어 YY, 수학 ZZ

판정 결과 : 합격



//Sample08.html

<!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>Insert title here</title>


<style type="text/css">

.style01 {

width:80px;

}

</style>


<script type="text/javascript">


function myFunc() {

var kor = document.getElementById("kor");

var korVal = parseInt(kor.value);

var eng = document.getElementById("eng");

var engVal = parseInt(eng.value);

var mat = document.getElementById("mat");

var matVal = parseInt(mat.value);

var msg = document.getElementById("msg");

msg.style.display = "none";

//정규식(Regular Expression)

//숫자로만 구성되었는지 검사하는 과정

if ((kor.value.match(/[^0-9]/) || korVal>100)

|| ((eng.value.match(/[^0-9]/) || engVal>100))

|| ((mat.value.match(/[^0-9]/) || matVal>100))) {

msg.style.display = "inline";

kor.value = "";

eng.value = "";

mat.value = "";

kor.focus();

} else {

var str = "";

str += "입력된 점수 : 국어 "+kor.value+", 영어 "+eng.value+", 수학 "+mat.value+"<br>";

str += "판정 결과 : ";

var ave = (korVal + engVal + matVal) / 3;

if (ave>=60 && (korVal>=40 && engVal>=40 && matVal>=40)) {

str += "합격";

} else if (ave>=60) {

str += "과락";

} else {

str += "불합격";

}

var result = document.getElementById("result");

result.innerHTML = str;

}

}

</script>




</head>

<body>

<div>

<h2>성적 확인</h2>

<h3>입력 ------------------</h3>

<form>

국어(0~100)<input type="text" id="kor" class="style01">

영어(0~100)<input type="text" id="eng" class="style01">

수학(0~100)<input type="text" id="mat" class="style01">

<input type="button" value="결과"

onclick="myFunc()"><br>

<span id="msg" 

style="color:red; display:none;">

0~100 사이의 숫자만 입력 가능합니다.</span>

</form>

<h3>출력 ------------------</h3>

<div id="result"></div>

</div>

</body>

</html>


WRITTEN BY
빨강꼬마

,

웹 어플리케이션


1. 웹 어플리케이션은 웹 브라우저(웹 클라이언트)의 요청에 대하여 서버에서 처리해서 결과를 보여주는 프로그램


웹 클라이언트              -       웹 서버




브라우저                           톰캣

웹주소 요청                        웹서버 응답

http://www.naver.com        네이버 컴퓨터 응답

사용자                               개발자



HTML, CSS, Javascript

브라우저에서 실행가능              원본은 웹서버에 저장된 상태


                                             JSP&Servlet

결과 페이지만 확인                   웹서버에서 실행 가능




웹 어플리케이션 실행 순서


1단계. 웹 클라이언트(웹 브라우저)에서 주소 요청 - 사용자

2단계. 웹서버(톰캣) 응답 준비 - 서버

3단계. 응답은 요청에 따라서 다르다. -서버

HTML, CSS, Javascript 요청한 경우 원본을 그대로 클라이언트에게 전달.

JSP&Servlet 요청한 경우 JVM을 이용해서 실행 및 결과(HTML Document)를 내고, HTML Document를 클라이언트에게 전달.

4단계. 전달받은 HTML Document 를 브라우저에서 실행 및 결과(웹 페이지) 출력. - 사용자





웹 어플리케이션 개발 언어


1. 웹 클라이언트 언어 - HTML, CSS, Javascript, XML, Ajax, jQuery

2. 웹 서버 언어 - JSP&Servlet(Java), ASP, PHP, ASP.NET(C#)





웹 서버 구축


1. http://www.apache.org에서 아파치톰캣 프로그램 다운로드.

- apache-tomcat-6.0.36.zip

2. 압축 해제

3. 이클립스에서 프로젝트 생성시 Dynamic Web Project 선택.

4. 최초 웹 프로젝트 생성시에서는 런타임 지정 필요. -> 아파치 톰캣 지정

5. Servers 탭에서 아파치 톰캣 등록

6. 웹프로젝트를 톰캣 서버에 등록.

7. 테스트 페이지 작성 및 실행.

-> 이클립스에서 실행시 외부 브라우저 선택 필요.

-> 방화벽 차단 해제 필요

-> 이클립에서 톰캣 실행시 서버 포트(8080 -> 8090) 변경 필요. (오라클서비스와 충돌 방지)

-> 브라우저가 익스플로어인 경우 인트라넷 설정 필요.


실행시 브라우저에 주소를 아래와 같이 입력할 것.

http://localhost:8090/HTML20121106/Sample01.html

-> localhost:8090 -> ip주소:포트번호/이하주소 입력시 다른 컴퓨터에 접속가능.





HTML(HyperText Markup Language)


<태그>

<태그 />

<시작태그>콘텐츠</끝태그>


<html>...</html>

<head>...</head>

<body>...</body>


기본 HTML 페이지 형식

<!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>


</body>

</html>


3. XHTML 1.0, HTML 4.01 버전이 존재. HTML5(웹표준)는 가장 최근 버전.


4. 태그의 종류

- 인라인 요소: 콘텐츠가 라인단위로 표현됨. <span>, <a>, <img>, ....

- 블럭 요소: 콘텐츠가 블럭단위로 표현됨. <div>, <p>, <table>, ....


5. 규칙

- <body> 태그에서 제일 먼저 만나는 태그는 블럭 요소여야 함.


- 태그는 중첩해서 사용할 수 있으나, 중첩 표시가 정확해야 한다.

올바른 중첩형태

<부모태그>

<자식태그> 컨텐츠 </자식태그>

</부모태그>


틀린 중첩형태

<부모태그>

<자식태그> 컨텐츠 </부모태그>

</자식태그>


- 블럭요소 안에는 블럭요소가 올수 있지만, 인라인 요소 안에는 블럭요소가 올수 없다.

올바른 형태

<div>  <div>컨텐츠</div>  </div>


틀린 형태

<span>  <div>컨텐츠</div>  </span>


-일부 태그는 자식 태그를 한정적으로 허용함. 예를 들어 <ol>태그는 자식태그로 <li>만 허용.

<ol>

<li>컨텐츠1</li>

<li>컨텐츠2</li>

</ol>





웹표준 검사 (ACID)


1. 브라우저가 웹 콘텐츠를 얼마나 정확하게 표현할 수 있는지 검사해주는 페이지. 

-> 검사 항목은 HTML, CSS, Javascript에 대한 종합 검사

-> 페이지가 정상적으로 보이고, 점수가 높을수록 좋은 상태.

-> 검사 대상 브라우저에서 아래 사이트 연결

http://acid2.acidtests.org

http://acid3.acidtests.org


2. 크롬 브라우저 권장.





텍스트 표현 태그


1. 내용 지정

<h> : 제목 지정. h1 ~ h6. 블럭요소

<p> : 문단 지정. 블럭요소


2. 모양 지정 - CSS (Cascade Style Sheet)을 이용

 - 태그별로 style 속성을 추가한 후 CSS 속성 지정하는 방법과 <style> 태그를 이용해서 통합 지정하는 방법이 있다.

 - body가 아닌 head 영역에 작성


<style>

식별자 {속성이름:값;.....}

</style>


3. 엔티티 - 특수문자 표기


< : &lt;

> : &gt;

공백 : &nbsp;





이미지 표현 태그


1. <img> 태그 이용. 인라인 요소.

<img src = "그림주소" alt="대체문자">


그림주소가 로컬인 경우 그림이름만 쓰면 되지만, 원격인 경우는 웹주소형태로 표기






텍스트 이미지 표현 샘플.


//Sample05.html

<!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>Insert title here</title>


<style type="text/css">

h1 /* HTML Document에서 모든 h1 태그에 대해서 CSS 속성 적용 */

{

font-size:18pt; /* 글자 크기 지정 속성 */

}

h2 

{

font-size:10pt;

color: grey;  /* 글자색 지정 속성 */

font-weight: normal; /* 글자 굵기 지정 속성 */

}

h3 

{

font-size:12pt;

font-weight: normal; /* 글자 굵기 지정 속성 */

}

p  /* HTML Document에서 모든 p 태그에 대해서 CSS 속성 적용 */ 

{

line-height: 180%; /* 줄간격 지정 속성 */

}

</style>


</head>

<body>

<div>


<h1>애플, 특허전쟁서 구글에 한 방 먹었다</h1>

<h2><img src="http://imgnews.naver.net/image/news/2009/press/top_031.gif" alt="">| 기사입력 2012-11-06 10:03 | 최종수정 2012-11-06 10:24</h2>


<h3>&lt;아이뉴스24&gt;</h3>


<p>[김익현기자] 3G 표준특허권을 둘러싼 구글과의 대리전에서 애플이 패배했다.</p> 


<p>미국 위스콘신주 매디슨 지역법원은 5일(현지 시간) 표준 특허권을 둘러싼 애플과 모토로라 모빌리티간의 소송에서 애플의 요구를 기각했다고 주요 외신들이 보도했다.</p> 


<p>이번 소송은 5일 오후 1시(미국 중부 시간 기준) 열릴 예정이었다. 하지만 담당 판사가 소송 시작 직전에 기각하면서 사실상 애플이 패소한 셈이 됐다.</p> 


<p>애플로선 "아이폰 한 대당 1달러 이상 줄 수 없다"는 과한 요구를 한 것이 결정적인 패인으로 꼽히고 있다.</p> 


<p><img src="http://imgnews.naver.net/image/031/2012/11/06/1346370139376_1_181848_59_20121106102402.jpg" alt=""></p>


<h4>◆애플 "아이폰 한 대당 1달러 이하" 요구가 결정타</h4> 


<p>이번 소송은 모토로라가 구글에 인수되기 전인 지난 해 5월 제기한 것. 모토로라는 소송 제기 3개월 뒤인 지난 해 8월 구글에 인수됐다.</p> 


<p>지리한 법정 공방을 해 오던 모토로라와 애플은 지난 주부터 막판 힘겨루기를 벌였다. 모토로라가 아이폰 가격의 2.25% 가량의 로열티를 요구한 반면 애플은 1달러 이상은 줄 수 없다고 맞선 것.</p>


<p>처음엔 애플 쪽에 다소 유리한 방향으로 진행됐다. 매디슨 지역법원이 프랜드 로열티 기준을 정한 뒤 양측이 협상하도록 하는 방안을 고려한 것.</p>


<p>이에 대해 모토로라가 지난 달 30일 법정에서 프랜드 로열티 기준을 정하는 것은 합당하지 않다고 맞섰다.</p>


<p>이런 상황에서 애플이 "아이폰 한 대당 1달러 이상은 줄 수 없다"고 나오면서 분위기가 확 달라지기 시작했다. 이번 사건을 담당하고 있는 브바라 크랩 판사가 애플의 주장에 대해 상당히 부정적으로 받아들인 때문이다.</p>


<p>특허 전문가인 플로리언 뮐러에 따르면 크랩 판사는 그 때부터 프랜드 관련 재판을 하는 게 무의미하다는 쪽으로 입장 선회하기 시작했다.</p> 


<p>구글 측은 "모토로라는 그 동안 표준 특허에 대해 합당한 조건으로 라이선싱해 왔다"면서 "(애플의) 이번 소송을 편견으로 가득차 있다면서 기각한 데 대해 매우 기쁘게 생각한다"고 밝혔다.</p> 


<h4>◆FTC 반독점 조사 등 변수 많아</h4> 


<p>물론 이번 결정으로 모토로라와 애플 간의 표준 특허 공방이 완전히 마무리된 것은 아니다. 애플은 매디슨 지역법원 결정에 대해 항소할 수도 있다. 그럴 경우 항소법원에서 또 다시 공방을 벌일 가능성이 많다.</p>


<p>미국 연방무역위원회(FTC)도 이번 공방의 또 다른 변수다. FTC 측이 구글의 표준 특허 관행에 대해 조사를 진행하고 있기 때문이다. 지난 주 FTC 한 위원은 표준 특허 남용을 이유로 구글을 제재하는 방안을 검토하고 있다고 밝히기도 했다.</p>


<p>그럼에도 불구하고 애플 입장에선 매디슨 법원에서 기각당한 것이 적잖은 타격이 될 전망이다. 표준 특허권의 가치를 지나치게 무시함으로써 담당 판사로부터 "편견으로 가득 차 있다"는 평가를 받았기 때문이다.</p>


<p>특허 전문가인 플로리언 뮐러 역시 "애플이 이번 재판을 통해 필수표준 특허 라이선싱을 했어야 한다"면서 "애플이 기회를 놓쳤다"고 평가했다.</p> 


<h4>/김익현기자 sini@inews24.com</h4>


</div>  

</body>

</html>





목록 표현 샘플


http://www.google.co.kr/intl/ko/policies/privacy/principles/

->구글의 개인 정보 보호 원칙 페이지 작성



1.

<ol> - 순서 있는 목록 표현시 사용.

<ul> - 순서 없는 목록 표현시 사용.

<li> - <ol>, <ul>의 자식 태그로써 항목 표현시 사용.



//Sample06.html

<!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>Insert title here</title>

<style type = "text/css">

body

{

color: #444444;   /* RGB 컬러 #000000 ~ #FFFFFF */

font-size:10pt;

line-height: 150%

}

.title01 /* title01 클래스명이 적용된 모든 태그에 css속성 적용 */

{

font-weight: bold;

}

li

{

margin-top: 40px;     /* 블럭 요소에서 바깥쪽 여백 지정 속성 */

padding: 2px;  /* 블럭 요소에서 안쪽 여백 지정 속성 */

}

</style>

</head>

<body>

<div>


<h1>개인정보 보호원칙</h1>


<p>Google은 종종 기존 기술의 한계를 뛰어넘는 아이디어와 제품을 추구합니다. Google은 책임감 있게 행동하는

기업으로서 혁신과 Google 사용자에 대한 적절한 수준의 개인정보 보호 및 보안이 균형을 이룰 수 있도록 노력합니다.

Google의 개인정보 보호원칙은 회사의 각 단계에서 결정을 내릴 때 올바른 기준을 제시하므로, 전 세계의 정보를 체계화하는

임무를 이행하는 동시에 Google 사용자를 보호하고 경쟁력 강화에 도움을 줄 수 있습니다.</p>


<ol>

<li>

<p class = "title01">정보를 활용하여 사용자에게 유용한 제품과 서비스를 제공합니다.</p>

<p>‘최상의 사용자 경험 제공’은 <a href="http://www.google.co.kr/intl/ko/about/company/tenthings.html">Google 경영철학</a>의 첫 번째 신조입니다. 사용자가 Google과 정보를

공유하면 Google은 이 정보를 활용하여 사용자에게 유용한 서비스와 제품을 구축할 수 있습니다. Google은

사용자에게 초점을 맞추면 혁신을 이끌고 온라인 사용자의 충성도를 확보하는 제품 및 개인정보 보호 강화 기능이 모두 발전할

것으로 믿고 있습니다.</p>

<p>Google은 사용자가 검색을 수행할 때 범하는 오타나 맞춤법 오류를 통해 정보를 습득하여 사용자에게 보다

빠르고 정확한 검색결과를 제공하는데 활용합니다. 따라서 사용자가 [우채국]이라고 입력하는 경우 [우체국]을 입력하려고 한

것으로 추측할 수 있습니다.</p>

</li>

<li>

<p class = "title01">강력한 개인정보 보호 기준과 관행을 반영하는 제품을 개발합니다.</p>

<p>기술의 최첨단을 추구하는 Google은 사용자 경험의 질을 떨어뜨리지 않으면서 사용자가 간편하게 개인정보를

관리하도록 해주는 도구를 개발하기 위해 노력하고 있습니다. Google은 개인정보 보호법을 준수하며 또한 내부적으로

그리고 규제당국 및 업계 파트너와 협력하여 강력한 개인정보 보호 기준을 개발하고 구현합니다.</p>

<p>Google에서는 서로 다른 사용자와 서로 다른 정보를 쉽게 공유할 수 있도록 서클을 염두에 두고

Google+를 설계했습니다. 따라서 사용자는 현실 세계에서와 마찬가지로 친구들을 위한 서클, 가족을 위한 서클, 그리고

직장 상사만 따로 분리시켜 놓은 서클을 만들 수 있습니다.</p>

</li>

<li>

<p class = "title01">개인정보 수집을 투명하게 관리합니다.</p>

<p>Google은 Google 서비스를 맞춤설정하는 데 사용되는 정보를 사용자에게 보여드리기 위해 노력합니다.

필요한 경우 Google이 보유하고 있는 개별 사용자 정보, 서비스 제공을 위해 정보를 활용하는 방식을 투명하게 공개하는

것을 목표로 삼고 있습니다.</p>

<p>Google 대시보드를 사용하면 ‘Google이 나에 대해 무엇을 알고 있나요?’라는 질문에 대한 대답을 찾을

수 있습니다. Google 대시보드에서는 최근 Blogger 게시물 또는 업로드한 사진 등 Google 계정에 저장된 내

정보를 볼 수 있으며 여러 제품에 대한 개인정보 보호 설정을 한 곳에서 변경할 수 있습니다.</p>

</li>

<li>

<p class = "title01">개인정보 보호와 관련하여 사용자의 의사를 표시할 수 있도록 선택권을 드립니다.</p>

<p>사용자는 각각 개인정보 보호와 관련된 관심사와 요구가 다릅니다. 모든 Google 사용자에게 최상의 서비스를

제공하기 위해 Google은 개인정보 사용에 대해 사용자의 의사를 표시할 수 있도록 의미 있고 세분화된 선택권을

제공하고자 합니다. Google은 개인정보를 독점해서는 안 된다고 생각합니다. 사용자가 다른 서비스로 개인정보를 이전할

수 있는 제품을 만듭니다. Google은 사용자의 개인정보를 판매하지 않습니다.</p>

<p>사용자는 Google의 개인정보 보호 도구를 사용하여 자신의 컴퓨터와 Google 사이의 검색 트래픽을

암호화하고, 비공개로 인터넷을 탐색하고, 검색 기록을 삭제하고, Google의 데이터 백업 도구를 사용해 자신의 데이터를

Google 제품 밖으로 쉽게 옮길 수 있으며 이 외에도 다양한 작업을 수행할 수 있습니다.</p>

</li>

<li>

<p class = "title01">보유한 정보를 책임감 있게 관리합니다.</p>

<p>Google은 사용자가 Google에 위임한 데이터 보호에 대한 책임을 잘 알고 있습니다. Google은 보안

문제를 철저하게 관리하며 더욱 안전한 인터넷을 만들 수 있도록 광범위한 사용자와 개발자 및 외부 보안 전문가 커뮤니티와

협력합니다.</p>

<p>Google은 처음부터 보안 및 복원력을 염두에 두고 Google 제품을 설계합니다. Google의 자동화된

스캐너가 매일 수백만 명의 사용자를 악성코드, 피싱, 사기 및 스팸으로부터 보호하기 위해 데이터를 사용합니다.</p>

</li>

</ol>

</div>

</body>

</html>







하이퍼링크 태그


1. 텍스트나 이미를 마우스 클릭시 다른 웹페이지로 이동시켜주는 기능. 인라인 요소

2. <a href = "다른 웹페이지 주소">컨텐츠</a>



//Sample07.html

<!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>Insert title here</title>

<style type="text/css">

a

{

text-decoration: none; /* 글자 장식 속성 */

}

a:hover /* 특정 객체 위에 마우스커서가 올려진 상태인 경우 */

{

text-decoration: underline; /* 글자 장식 속성 */

}

#title01    /* 아이디 속성이 지정된 객체*/

{

font-size:24pt;

color:grey;

margin: 10px;

margin-left: 20px;

}

#title02

{

padding: 14px;

margin-top: 10px;

margin-bottom: 10px;

background-color: #416bb5;

color:white;

font-weight: bold;

}

#title02 a /* 부모 식별자 안에 있는 하위 식별자만 영향받는 경우 */

{

color:white;

font-weight:normal;

}

</style>

</head>

<body>

<div>

<div>

<img src="http://www.google.com/images/logos/google_logo_41.png" alt="">

<span id="title01">정책 및 원칙</span>

</div>

<div id="title02">

<a href="http://www.google.co.kr/intl/ko/policies/">개요</a>

개인정보보호

<a href="http://www.google.co.kr/intl/ko/policies/terms/">서비스 약관</a>

</div>

<div>

<a href="http://www.google.co.kr/intl/ko/policies/privacy/">개인정보취급방침</a>

<a href="http://www.google.co.kr/intl/ko/policies/privacy/ads/">광고</a>

원칙

<a href="http://www.google.co.kr/intl/ko/policies/privacy/tools/">도구</a>

<a href="http://www.google.co.kr/intl/ko/policies/privacy/faq/">FAQ</a>

</div>


</div>

</body>

</html>


WRITTEN BY
빨강꼬마

,

직원관리 콘솔 버전

- 입력과정 이후 작업 진행중..


--------------------------------------

직원 관리_콘솔 버전

-> 새 프로젝트 생성(Employee_Console)

-> 메뉴 구성 추가

-> DBConn, EmployeeDTO, EmployeeDAO, Process, Oracle11 클래스 이용.

-> emp.sql 쿼리를 먼저 실행해서 환경 구성할 것.



실행 예)

======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->1


직원 정보 입력 --------------

(입력하는 과정에서 -1 입력시 입력 중단)

이름?박길동

주민등록번호(YYMMDD-NNNNNNN)?800110-1234567

입사일(YYYY-MM-DD)?2010-10-10

지역번호 종류(1-강원 2-경기 3-경남 4-경북 5-부산 6-서울 7-인천 8-전남 9-전북 10-제주 11-충남 )

지역번호?6

전화번호?010-345-6789

부서번호 종류(1-개발부 2-기획부 3-영업부 4-인사부 5-자재부 6-총무부 7-홍보부 )

부서번호?7

직위번호 종류(1-사장 2-전무 3-상무 4-이사 5-부장 6-차장 7-과장 8-대리 9-사원)

직위번호?9

기본급(최소 840000원 이상)?1000000

수당?100000

직원 정보 입력 완료!



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->2


직원 전체 출력(서브 메뉴)-------------

1.사번 정렬

2.이름 정렬

3.부서 정렬

4.직위 정렬

5.급여 내림차순 정렬

선택(1~5, -1 종료)->1


전체 인원: 62명

------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000

1002 이순신 801007-1544236 2000-11-29 경기 010-4758-6532 총무부 사원 1320000 200000 1520000

...



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->3


직원 검색 출력(서브 메뉴)-------------

1.사번 검색

2.이름 검색

3.부서 검색

4.직위 검색

선택(1~4, -1 종료)->1


검색할 사번?1001


------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->4


수정하고자하는 자료의 사번?1001


------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000


직원 정보 수정 --------------

(입력하는 과정에서 -1 입력시 기존 데이터 재입력)

이름?-1

주민등록번호(YYMMDD-NNNNNNN)?-1

입사일(YYYY-MM-DD)?-1

지역번호 종류(1-강원 2-경기 3-경남 4-경북 5-부산 6-서울 7-인천 8-전남 9-전북 10-제주 11-충남 )

지역번호?-1

전화번호?-1

부서번호 종류(1-개발부 2-기획부 3-영업부 4-인사부 5-자재부 6-총무부 7-홍보부 )

부서번호?1

직위번호 종류(1-사장 2-전무 3-상무 4-이사 5-부장 6-차장 7-과장 8-대리 9-사원 )

직위번호?8

기본급(최소 840000원 이상)?1200000

수당?200000

직원 정보 수정 완료!



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->5


삭제하고자하는 자료의 사번?1001


------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000


이 자료를 삭제하시겠습니까(Y/N)?y

1개의 행이 삭제됨.



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->-1


프로그램이 종료되었습니다.


--------------------------------------

--지역 검색 쿼리

SELECT city_id, city FROM city ORDER BY city_id


--부서 검색 쿼리

SELECT buseo_id, buseo FROM buseo ORDER BY buseo_id


--직위 검색 쿼리

SELECT jikwi_id, jikwi FROM jikwi ORDER BY jikwi_id


--직위별 최소 기본급 검색 쿼리

SELECT min_basicpay FROM jikwi WHERE jikwi_id=9


--입력 쿼리

INSERT INTO emp (emp_id, name, ssn, ibsadate, city_id, tel, buseo_id, jikwi_id, basicpay, sudang) 

VALUES (empSeq.nextval

, '홍길동'

, '771212-1022432'

, '1998-10-11'

, 6

, '011-2356-4528'

, 7

, 9

, 2610000

, 200000)


--직원 명단 출력 쿼리(emp 테이블이 아니라 empView 이용)

SELECT emp_id, name, ssn, TO_CHAR(ibsadate, 'YYYY-MM-DD') AS ibsadate

, city_id, city, tel, buseo_id, buseo, jikwi_id, jikwi, basicpay, sudang, pay 

FROM empView 

ORDER BY emp_id ASC


--전체 직원수 출력 쿼리 (emp 테이블이나 empView나 결과 동일함)

SELECT COUNT(*) AS count 

FROM emp


--검색 쿼리(emp테이블이 아니라 empView이용)


SELECT emp_id, name, ssn, TO_CHAR(ibsadate, 'YYYY-MM-DD') AS ibsadate

, city_id, city, tel, buseo_id, buseo, jikwi_id, jikwi, basicpay, sudang, pay 

FROM empView 

WHERE emp_id = 1001

ORDER BY emp_id ASC


--수정 쿼리

UPDATE emp

SET name = '새로운이름'

,ssn='새로운 주민번호'

,ibsadate='새로운 입사일'

,city_id=1

,tel='새로운 전화번호'

,buseo_id=1

,jikwi_id=1

,basicpay=1

,sudang=1

WHERE emp_id = 1001


--삭제 쿼리

DELETE emp

WHERE emp_id = 1001


------------------------------------

//DBConn.java

package com.test;


import java.sql.*;


public class DBConn {

//Singleton pattern

private static Connection dbConn;

public static Connection getConnection()

throws SQLException, ClassNotFoundException {

if (dbConn == null) {


String url = "jdbc:oracle:thin:@localhost:1521:xe";

String user = "scott";

String pw = "tiger";

Class.forName("oracle.jdbc.driver.OracleDriver");

dbConn = DriverManager.getConnection(url, user, pw);


}

return dbConn;

}

public static void close()

throws SQLException {

if (dbConn != null) {

if (!dbConn.isClosed()) {

dbConn.close();

}

}

dbConn = null;

}

}




//EmployeeDTO.java

package com.test;


public class EmployeeDTO {

//멤버변수

private int emp_id, city_id, buseo_id, jikwi_id;

private int min_basicpay, basicpay, sudang, pay;

private String ibsadate; //날짜지만 문자열로 취급

private String name, ssn, city, buseo, jikwi, tel;

//getter, setter

public int getEmp_id() {

return emp_id;

}

public void setEmp_id(int emp_id) {

this.emp_id = emp_id;

}

public int getCity_id() {

return city_id;

}

public void setCity_id(int city_id) {

this.city_id = city_id;

}

public int getBuseo_id() {

return buseo_id;

}

public void setBuseo_id(int buseo_id) {

this.buseo_id = buseo_id;

}

public int getJikwi_id() {

return jikwi_id;

}

public void setJikwi_id(int jikwi_id) {

this.jikwi_id = jikwi_id;

}

public int getMin_basicpay() {

return min_basicpay;

}

public void setMin_basicpay(int min_basicpay) {

this.min_basicpay = min_basicpay;

}

public int getBasicpay() {

return basicpay;

}

public void setBasicpay(int basicpay) {

this.basicpay = basicpay;

}

public int getSudang() {

return sudang;

}

public void setSudang(int sudang) {

this.sudang = sudang;

}

public int getPay() {

return pay;

}

public void setPay(int pay) {

this.pay = pay;

}

public String getIbsadate() {

return ibsadate;

}

public void setIbsadate(String ibsadate) {

this.ibsadate = ibsadate;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getSsn() {

return ssn;

}

public void setSsn(String ssn) {

this.ssn = ssn;

}

public String getCity() {

return city;

}

public void setCity(String city) {

this.city = city;

}

public String getBuseo() {

return buseo;

}

public void setBuseo(String buseo) {

this.buseo = buseo;

}

public String getJikwi() {

return jikwi;

}

public void setJikwi(String jikwi) {

this.jikwi = jikwi;

}

public String getTel() {

return tel;

}

public void setTel(String tel) {

this.tel = tel;

}


}




//Oracle11.java

package com.test;


import java.util.Scanner;


public class Oracle11 {


public static void main(String[] args) {

Process obj = new Process();

Scanner sc = new Scanner(System.in);

do {

System.out.println("======== 직원 관리 (데이터베이스 이용) ==========");

System.out.println("1. 직원 입력");

System.out.println("2. 직원 전체 출력");

System.out.println("- 사번 정렬");

System.out.println("- 이름 정렬");

System.out.println("- 부서 정렬");

System.out.println("- 직위 정렬");

System.out.println("- 급여 내림차순 정렬");

System.out.println("3. 직원 검색 출력");

System.out.println("- 사번 검색");

System.out.println("- 이름 검색");

System.out.println("- 부서 검색");

System.out.println("- 직위 검색");

System.out.println("4. 직원 수정");

System.out.println("5. 직원 삭제");

System.out.print("선택(1~5, -1 종료)->");

int menu = sc.nextInt();

if (menu == -1) {

System.out.println("프로그램 종료됨.");

break;

}

switch(menu) {

case 1: obj.menuInsert(); break;

case 2: obj.menuSelect(); break;

case 3: obj.menuSearch(); break;

case 4: obj.menuUpdate(); break;

case 5: obj.menuDelete(); break;

}

}while(true);

}


}





//EmployeeDAO.java

package com.test;


import java.sql.*;

import java.util.*;



public class EmployeeDAO {


private Connection conn;

public void connect() throws SQLException, ClassNotFoundException{

conn = DBConn.getConnection();

}

public void close() throws SQLException {

DBConn.close();

conn = null;

}

//입력되어 있는 도시명 전체 리스트를 컬렉션으로 반환

public ArrayList<EmployeeDTO> cityList() throws SQLException {

ArrayList<EmployeeDTO> list = new ArrayList<EmployeeDTO>();

String sql = String.format("SELECT city_id, city FROM city ORDER BY city_id");

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql);

while(rs.next()) {

EmployeeDTO dto = new EmployeeDTO();

dto.setCity_id(rs.getInt("city_id"));

dto.setCity(rs.getString("city"));

list.add(dto);

}

rs.close();

return list;

}


//입력되어 있는 부서명 전체 리스트를 컬렉션으로 반환

public ArrayList<EmployeeDTO> buseoList() throws SQLException {

ArrayList<EmployeeDTO> list = new ArrayList<EmployeeDTO>();

String sql = String.format("SELECT buseo_id, buseo FROM buseo ORDER BY buseo_id");

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql);

while(rs.next()) {

EmployeeDTO dto = new EmployeeDTO();

dto.setBuseo_id(rs.getInt("buseo_id"));

dto.setBuseo(rs.getString("buseo"));

list.add(dto);

}

rs.close();

return list;

}

//입력되어 있는 직위명 전체 리스트를 컬렉션으로 반환

public ArrayList<EmployeeDTO> jikwiList() throws SQLException {

ArrayList<EmployeeDTO> list = new ArrayList<EmployeeDTO>();

String sql = String.format("SELECT jikwi_id, jikwi FROM jikwi ORDER BY jikwi_id");

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql);

while(rs.next()) {

EmployeeDTO dto = new EmployeeDTO();

dto.setJikwi_id(rs.getInt("jikwi_id"));

dto.setJikwi(rs.getString("jikwi"));

list.add(dto);

}

rs.close();

return list;

}

//직위아이디를 입력받은 후 해당 직위의 최저급여액을 int형으로 반환

public int minBasicpay(int jikwi_id) throws SQLException {

int result = 0;

String sql = String.format("SELECT min_basicpay FROM jikwi WHERE jikwi_id=%d", jikwi_id);

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql);

while(rs.next()) {

result = rs.getInt("min_basicpay");

}

rs.close();

return result;

}

public int add(EmployeeDTO dto)

throws SQLException {

int result =0;


String sql = String.format("INSERT INTO emp (emp_id, name, ssn, ibsadate, city_id, tel, buseo_id, jikwi_id, basicpay, sudang) VALUES (empSeq.nextval, '%s', '%s', '%s', %d, '%s', %d, %d, %d, %d)"

, dto.getName()

, dto.getSsn()

, dto.getIbsadate()

, dto.getCity_id()

, dto.getTel()

, dto.getBuseo_id()

, dto.getJikwi_id()

, dto.getBasicpay()

, dto.getSudang());


Statement stmt = conn.createStatement();

result = stmt.executeUpdate(sql);


return result;

}

public ArrayList<EmployeeDTO> lists(String orders) throws SQLException{

ArrayList<EmployeeDTO> arrayList = new ArrayList<EmployeeDTO>();

String sql = String.format("SELECT emp_id, name, ssn, TO_CHAR(ibsadate, 'YYYY-MM-DD') AS ibsadate, city, tel, buseo, jikwi, basicpay, sudang, pay FROM empView %s", orders);

Statement stmt = conn.createStatement();

ResultSet rs =stmt.executeQuery(sql);

while(rs.next()) {

EmployeeDTO dto = new EmployeeDTO();

dto.setEmp_id(rs.getInt("emp_id"));

dto.setName(rs.getString("name"));

dto.setSsn(rs.getString("ssn"));

dto.setIbsadate(rs.getString("ibsadate"));

dto.setCity(rs.getString("city"));

dto.setTel(rs.getString("tel"));

dto.setBuseo(rs.getString("buseo"));

dto.setJikwi(rs.getString("jikwi"));

dto.setBasicpay(rs.getInt("basicpay"));

dto.setSudang(rs.getInt("sudang"));

dto.setPay(rs.getInt("pay"));

arrayList.add(dto);

}

rs.close();

return arrayList;

}

public int count() throws SQLException{

int result = 0;

String sql = String.format("SELECT COUNT(*) AS count FROM emp");

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql);

while(rs.next()) {

result = rs.getInt("count");

}

return result;

}

public ArrayList<EmployeeDTO> searchLists(String wheres) throws SQLException {

ArrayList<EmployeeDTO> arrayList = new ArrayList<EmployeeDTO>();

String sql = String.format("SELECT emp_id, name, ssn, TO_CHAR(ibsadate, 'YYYY-MM-DD') AS ibsadate, city_id, city, tel, buseo_id, buseo, jikwi_id, jikwi, basicpay, sudang, pay FROM empView %s ORDER BY emp_id ASC", wheres);

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql);

while(rs.next()) {

EmployeeDTO dto = new EmployeeDTO();

dto.setEmp_id(rs.getInt("emp_id"));

dto.setName(rs.getString("name"));

dto.setSsn(rs.getString("ssn"));

dto.setIbsadate(rs.getString("ibsadate"));

dto.setCity_id(rs.getInt("city_id"));

dto.setCity(rs.getString("city"));

dto.setTel(rs.getString("tel"));

dto.setBuseo_id(rs.getInt("buseo_id"));

dto.setBuseo(rs.getString("buseo"));

dto.setJikwi_id(rs.getInt("jikwi_id"));

dto.setJikwi(rs.getString("jikwi"));

dto.setBasicpay(rs.getInt("basicpay"));

dto.setSudang(rs.getInt("sudang"));

dto.setPay(rs.getInt("pay"));

arrayList.add(dto);

}

return arrayList;

}

public int modify (EmployeeDTO dto) throws SQLException {

int result = 0;

String sql = String.format("UPDATE emp SET name = '%s', ssn='%s', ibsadate='%s', city_id=%d, tel='%s', buseo_id=%d, jikwi_id=%d, basicpay=%d, sudang=%d WHERE emp_id = %d", dto.getName()

, dto.getSsn(), dto.getIbsadate(), dto.getCity_id(), dto.getTel(), dto.getBuseo_id(), dto.getJikwi_id(), dto.getBasicpay(), dto.getSudang(), dto.getEmp_id());

Statement stmt = conn.createStatement();

result = stmt.executeUpdate(sql);

return result;

}


public int remove (String wheres) throws SQLException {

int result = 0;

String sql = String.format("DELETE emp %s", wheres);

Statement stmt = conn.createStatement();

result = stmt.executeUpdate(sql);

return result;

}

}







//Process.java

package com.test;


import java.util.*;


public class Process {


private EmployeeDAO dao;

public Process() {

dao = new EmployeeDAO();

}

public void menuInsert(){

Scanner sc = new Scanner(System.in);

try {

dao.connect();


//--------------------------------

//외부입력과정

//지역, 부서, 직위의 경우 종류 출력

//직위별 최소 급여 검색 및 출력

//입력과정에서 -1입력시 입력 중단 -> 강제 예외(Exception)발생

//무한실행문이 아니므로 break 안됨. return 구문으로 사용하면 void이므로 반환없이 메소드 종료.

//return 사용시 close() 메소드 실행안되므로 finally 처리.

System.out.println("직원 정보 입력 --------------");

System.out.println("(입력하는 과정에서 -1 입력시 입력 중단)");

System.out.print("이름?");

String name = sc.next();

if (name.equals("-1")) { // 강제예외발생시켜서 메소드 종료와 함께 catch와 finally를 실행시킬수 있도록 함.

throw new Exception("입력 중단됨.");

}

System.out.print("주민등록번호(YYMMDD-NNNNNNN)?");

String ssn = sc.next();

if (ssn.equals("-1")) {

throw new Exception("입력 중단됨.");

}

System.out.print("입사일(YYYY-MM-DD)?");

String ibsadate = sc.next();

if (ibsadate.equals("-1")) {

throw new Exception("입력 중단됨.");

}

//지역번호와 지역명을 -> 메세지로 -> 출력하는 과정 추가

System.out.println(this.cityList()); // this 는 빼도됨

System.out.print("지역번호?");

int city_id = sc.nextInt();

if (city_id == -1) {

throw new Exception("입력 중단됨.");

}

System.out.print("전화번호?");

String tel = sc.next();

if (tel.equals("-1")) {

throw new Exception("입력 중단됨.");

}

System.out.println(this.buseoList());

System.out.print("부서번호?");

int buseo_id = sc.nextInt();

if (buseo_id == -1) {

throw new Exception("입력 중단됨.");

}

System.out.println(this.jikwiList());

System.out.print("직위번호?");

int jikwi_id = sc.nextInt();

if (jikwi_id == -1) {

throw new Exception("입력 중단됨.");

}

System.out.print(String.format("기본급(최소 %d원 이상)?", dao.minBasicpay(jikwi_id)));

int basicpay = sc.nextInt();

if (basicpay == -1) {

throw new Exception("입력 중단됨.");

}

System.out.print("수당?");

int sudang = sc.nextInt();

if (sudang == -1) {

throw new Exception("입력 중단됨.");

}

//--------------------------------

//--------------------------------

//입력된 데이터를 데이터베이스에 입력하는 과정

EmployeeDTO dto = new EmployeeDTO();

dto.setName(name);

dto.setSsn(ssn);

dto.setIbsadate(ibsadate);

dto.setCity_id(city_id);

dto.setTel(tel);

dto.setBuseo_id(buseo_id);

dto.setJikwi_id(jikwi_id);

dto.setBasicpay(basicpay);

dto.setSudang(sudang);


dao.add(dto);

System.out.printf("%n직원 정보 입력 완료!%n");

//--------------------------------

} catch(Exception e) {

System.out.println(e.toString());

} finally { // 예외 발생 유무와 관계없이 finally 구문에 있는 실행문은 반드시 실행된다.

try {

dao.close();

} catch(Exception e) {

}

}

}

public void menuSelect(){

try {

dao.connect();

//서브메뉴 출력 부분 추가

System.out.println();

System.out.println("직원 전체 출력(서브 메뉴)-------------");

System.out.println("1.사번 정렬");

System.out.println("2.이름 정렬");

System.out.println("3.부서 정렬");

System.out.println("4.직위 정렬");

System.out.println("5.급여 내림차순 정렬");

System.out.print("선택(1~5, -1 종료)->");

Scanner sc = new Scanner(System.in);

int submenu = sc.nextInt();

if (submenu == -1){

return; //무한루프 안이 아니고 메소드 안에서 종료이므로 리턴.

}

//서브메뉴 선택 단계 추가

String orders = "";

switch (submenu) {

case 1 : orders = "ORDER BY emp_id ASC"; break;

case 2 : orders = "ORDER BY name ASC"; break;

case 3 : orders = "ORDER BY buseo ASC"; break;

case 4 : orders = "ORDER BY jikwi ASC"; break;

case 5 : orders = "ORDER BY pay ASC"; break;

}

//정렬 기준에 따라서 출력 메소드(lists()) 호출

//리턴 받은 컬렉션 데이터를 화면에 출력.

System.out.println();

System.out.printf("전체 인원: %d명%n", dao.count());

System.out.println("--------------------------------------------------------------------------------------------");

System.out.println("사번 이름   주민번호       입사일     지역 전화번호      부서   직위  기본급    수당    급여");

for (EmployeeDTO dto : dao.lists(orders)) {

System.out.printf("%4d %3s %14s %s %s %13s %s %s %7d %7d %7d%n", dto.getEmp_id(), dto.getName(), dto.getSsn(), dto.getIbsadate()

           , dto.getCity(), dto.getTel(), dto.getBuseo(), dto.getJikwi(), dto.getBasicpay()

           , dto.getSudang(), dto.getPay());

}

dao.close();

} catch(Exception e) {

System.out.println(e.toString());

}

}

public void menuSearch(){

try {

dao.connect();

System.out.println();

//서브 메뉴 출력

System.out.println("직원 검색 출력(서브 메뉴)-------------");

System.out.println("1.사번 검색");

System.out.println("2.이름 검색");

System.out.println("3.부서 검색");

System.out.println("4.직위 검색");

System.out.print("선택(1~4, -1 종료)->");


Scanner sc = new Scanner(System.in);

int submenu = sc.nextInt();

if (submenu == -1) {

return;

}

//서브 메뉴 선택

String wheres = "";

System.out.println();

switch (submenu) {

case 1: 

System.out.print("검색할 사번?");

String emp_id = sc.next();

wheres = String.format("WHERE emp_id=%s", emp_id);

break;

case 2:

System.out.print("검색할 이름?");

String name = sc.next();

wheres = String.format("WHERE name='%s'", name);

break;

case 3:

System.out.print("검색할 부서?");

String buseo = sc.next();

wheres = String.format("WHERE buseo='%s'", buseo);

break;

case 4:

System.out.print("검색할 직위?");

String jikwi = sc.next();

wheres = String.format("WHERE jikwi='%s'", jikwi);

break;

}

System.out.println();

//검색 기준에 따라서 검색 메소드(searchLists()) 호출

//리턴 받은 컬렉션 데이터를 화면에 출력

//경우에 따른 검색 결과 없음 메시지 출력

ArrayList<EmployeeDTO> arrayList = dao.searchLists(wheres);

if (arrayList.size() > 0) {

System.out.println("--------------------------------------------------------------------------------------------");

System.out.println("사번 이름   주민번호       입사일     지역 전화번호      부서   직위  기본급    수당    급여");

for (EmployeeDTO dto : arrayList) {

System.out.printf("%4d %3s %14s %s %s %13s %s %s %7d %7d %7d%n", dto.getEmp_id(), dto.getName(), dto.getSsn(), dto.getIbsadate()

           , dto.getCity(), dto.getTel(), dto.getBuseo(), dto.getJikwi(), dto.getBasicpay()

           , dto.getSudang(), dto.getPay());

}

} else {

System.out.println("검색 결과가 없습니다.");

}

dao.close();

} catch(Exception e) {

System.out.println(e.toString());

}

}

public void menuUpdate(){

try {

dao.connect();

//수정 대상 검색 과정(사번 기준) 추가

//검색 결과 출력

//검색 결과 있는 경우만 수정 화면 진행

//EmployeeDTO 객체에 수정 데이터 작성

//수정 메소드(modify()) 호출

System.out.println();

System.out.print("수정하고자하는 자료의 사번?");

Scanner sc = new Scanner(System.in);

int emp_id = sc.nextInt();

String wheres = String.format("WHERE emp_id = %d", emp_id);

ArrayList<EmployeeDTO> arrayList = dao.searchLists(wheres);

if (arrayList.size() > 0) {

//검색결과 출력

EmployeeDTO dto = arrayList.get(0); // get(0)는 arrayList가 가진 맨 처음 가진 값을 가져오게함.

System.out.println("--------------------------------------------------------------------------------------------");

System.out.println("사번 이름   주민번호       입사일     지역 전화번호      부서   직위  기본급    수당    급여");

System.out.printf("%4d %3s %14s %s %s %13s %s %s %7d %7d %7d%n", dto.getEmp_id(), dto.getName(), dto.getSsn(), dto.getIbsadate()

           , dto.getCity(), dto.getTel(), dto.getBuseo(), dto.getJikwi(), dto.getBasicpay()

           , dto.getSudang(), dto.getPay());

//수정 진행

System.out.println("직원 정보 수정 --------------");

System.out.println("(입력하는 과정에서 -1 입력시 기존 데이터 재입력)");

System.out.print("이름?");

String name = sc.next();

if(name.equals("-1")) {

name = dto.getName();

}

System.out.print("주민등록번호(YYMMDD-NNNNNNN)?");

String ssn = sc.next();

if (ssn.equals("-1")) {

ssn = dto.getSsn();

}

System.out.print("입사일(YYYY-MM-DD)?");

String ibsadate = sc.next();

if (ibsadate.equals("-1")) {

ibsadate = dto.getIbsadate();

}

//지역번호와 지역명을 -> 메세지로 -> 출력하는 과정 추가

System.out.println(this.cityList()); // this 는 빼도됨

System.out.print("지역번호?");

int city_id = sc.nextInt();

if (city_id == -1) {

city_id = dto.getCity_id();

}

System.out.print("전화번호?");

String tel = sc.next();

if (tel.equals("-1")) {

tel = dto.getTel();

}

System.out.println(this.buseoList());

System.out.print("부서번호?");

int buseo_id = sc.nextInt();

if (buseo_id == -1) {

buseo_id = dto.getBuseo_id();

}

System.out.println(this.jikwiList());

System.out.print("직위번호?");

int jikwi_id = sc.nextInt();

if (jikwi_id == -1) {

jikwi_id = dto.getJikwi_id();

}

System.out.print(String.format("기본급(최소 %d원 이상)?", dao.minBasicpay(jikwi_id)));

int basicpay = sc.nextInt();

if (basicpay == -1) {

basicpay = dto.getBasicpay();

}

System.out.print("수당?");

int sudang = sc.nextInt();

if (sudang == -1) {

sudang = dto.getSudang();

}

if (name.equals("-1") && ssn.equals("-1") && ibsadate.equals("-1") && city_id == -1 && tel.equals("-1") && buseo_id == -1 && jikwi_id == -1 && basicpay == -1 && sudang == -1) {

System.out.println("모든 항목을 수정하지 않고, 메인메뉴로 돌아갑니다.");

} else {

EmployeeDTO newDto = new EmployeeDTO();

newDto.setEmp_id(emp_id);

newDto.setName(name);

newDto.setSsn(ssn);

newDto.setIbsadate(ibsadate);

newDto.setCity_id(city_id);

newDto.setTel(tel);

newDto.setBuseo_id(buseo_id);

newDto.setJikwi_id(jikwi_id);

newDto.setBasicpay(basicpay);

newDto.setSudang(sudang);

int result = dao.modify(newDto);

if (result == 1) {

System.out.println("직원 정보 수정 완료!");

}

}

} else {

System.out.println("검색 결과가 없습니다.");

}

dao.close();

} catch(Exception e) {

System.out.println(e.toString());

}

}

public void menuDelete(){

try {

dao.connect();

System.out.println();

System.out.print("수정하고자하는 자료의 사번?");

Scanner sc = new Scanner(System.in);

int emp_id = sc.nextInt();

String wheres = String.format("WHERE emp_id = %d", emp_id);

ArrayList<EmployeeDTO> arrayList = dao.searchLists(wheres);

if (arrayList.size() > 0) {

//검색결과 출력

EmployeeDTO dto = arrayList.get(0); // get(0)는 arrayList가 가진 맨 처음 가진 값을 가져오게함.

System.out.println("--------------------------------------------------------------------------------------------");

System.out.println("사번 이름   주민번호       입사일     지역 전화번호      부서   직위  기본급    수당    급여");

System.out.printf("%4d %3s %14s %s %s %13s %s %s %7d %7d %7d%n", dto.getEmp_id(), dto.getName(), dto.getSsn(), dto.getIbsadate()

           , dto.getCity(), dto.getTel(), dto.getBuseo(), dto.getJikwi(), dto.getBasicpay()

           , dto.getSudang(), dto.getPay());

//삭제 여부 물어보는 과정 추가

//삭제 메소드(remove) 호출

System.out.print("이 자료를 삭제하시겠습니까(Y/N)?");

String answer = sc.next();

if (answer.equals("y") || answer.equals("Y")) {

int result = dao.remove(wheres);

if (result == 1) {

System.out.println("1개의 행이 삭제됨.");

}

}

} else {

System.out.println("검색 결과가 없습니다.");

}

dao.close();

} catch(Exception e) {

System.out.println(e.toString());

}

}

public String cityList() {

StringBuilder result = new StringBuilder();

//지역번호 종류(1-강원 2-경기 3-경남 4-경북 5-부산 6-서울 7-인천 8-전남 9-전북 10-제주 11-충남)

try{

result.append(String.format("지역번호 종류("));

for (EmployeeDTO dto : dao.cityList()) {

result.append(String.format("%d-%s ", dto.getCity_id(), dto.getCity()));

}

result.append(String.format(")"));

} catch(Exception e) {

System.out.println(e.toString());

}

return result.toString();

}

public String buseoList() {

StringBuilder result = new StringBuilder();

//부서번호 종류(1-개발부 2-기획부 3-영업부 4-인사부 5-자재부 6-총무부 7-홍보부 )

try{

result.append(String.format("부서번호 종류("));

for (EmployeeDTO dto : dao.buseoList()) {

result.append(String.format("%d-%s ", dto.getBuseo_id(), dto.getBuseo()));

}

result.append(String.format(")"));

} catch(Exception e) {

System.out.println(e.toString());

}

return result.toString();

}

public String jikwiList() {

StringBuilder result = new StringBuilder();

//직위번호 종류(1-사장 2-전무 3-상무 4-이사 5-부장 6-차장 7-과장 8-대리 9-사원 )

try{

result.append(String.format("부서번호 종류("));

for (EmployeeDTO dto : dao.jikwiList()) {

result.append(String.format("%d-%s ", dto.getJikwi_id(), dto.getJikwi()));

}

result.append(String.format(")"));

} catch(Exception e) {

System.out.println(e.toString());

}

return result.toString();

}

}




-----------------------------------------------



WRITTEN BY
빨강꼬마

,

//성적 처리 _ 메뉴 버전 (콘솔 기반 최종)


전날에 이어서~ 문제) 성적 처리. 메뉴 구성 추가. 새 프로젝트에서 구성할 것.

DBConn.java, ScoreDTO, ScoreDAO, Process, Oralce10 클래스 이용.


여러명의 이름, 국어, 영어, 수학 입력 받아서 총점, 평균, 판정, 등수 계산해서 출력. 출력시 이름 오름차순 정렬해서 출력.


실행 예)

======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->1


성적 입력(이름 국어 영어 수학)?park 80 75 60

성적 입력(이름 국어 영어 수학)?hong 100 90 80

성적 입력(이름 국어 영어 수학)?kim 80 85 80

성적 입력(이름 국어 영어 수학)?-1


======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->2


번호 이름   국어  영어  수학  총점  평균   판정  등수

   2 hong    100   90    80    XXX  XXX.X  합격   1

   3 kim      80   85    80    XXX  XXX.X  합격   2

   1 park     80   75    60    XXX  XXX.X  합격   3



======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->3

검색하려는 이름?kim

번호 이름   국어  영어  수학  총점  평균   판정  등수

   3 kim      80   85    80    XXX  XXX.X  합격   2



======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->3

검색하려는 이름?choi

검색 결과가 없습니다.



======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->4

수정하고자하는 자료의 번호?3

번호 이름   국어  영어  수학  총점  평균   판정  등수

   3 kim      80   85    80    XXX  XXX.X  합격   2


수정할 데이터(이름 국어 영어 수학)?kim 80 90 80

1개의 행이 수정됨.



======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->5

삭제하고자하는 자료의 번호?3

번호 이름   국어  영어  수학  총점  평균   판정  등수

   3 kim      80   85    80    XXX  XXX.X  합격   2


이 자료를 삭제하시겠습니까(Y/N)?y

1개의 행이 삭제됨.



======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->-1


프로그램이 종료되었습니다.





------------------------------------------------------------------------

INSERT INTO score (sid, name, kor, eng, mat) VALUES (scoreSeq.nextval, '%s', %d, %d, %d)


SELECT sid, name, kor, eng, mat, (kor+eng+mat) as tot, (kor+eng+mat)/3 as ave, case when ((kor+eng+mat)/3 >= 60) and (kor<40 or eng<40 or mat<40) then '과락' when ((kor+eng+mat)/3 >= 60) then '합격' else '불합격' end as grade, rank() over(order by (kor+eng+mat) desc) as rank FROM score ORDER BY name asc



-- VIEW 생성 및 select 쿼리 등록

create or replace view scoreView

as

SELECT sid, name, kor, eng, mat, (kor+eng+mat) as tot, (kor+eng+mat)/3 as ave

          , case 

                    when ((kor+eng+mat)/3 >= 60) and (kor<40 or eng<40 or mat<40) then '과락' 

                    when ((kor+eng+mat)/3 >= 60) then '합격' else '불합격'

            end as grade

          , rank() over(order by (kor+eng+mat) desc) as rank

FROM score

ORDER BY name asc;


select sid, name, kor, eng, mat, tot, ave, grade, rank 

from scoreView


--인원수 출력 쿼리 샘플

select count(*) as count from score;



--검색 결과 select 쿼리 샘플

select sid, name, kor, eng, mat, tot, ave, grade, rank 

from scoreView

where name = 'kim'



--수정 update 쿼리

select sid, name, kor, eng, mat, tot, ave, grade, rank 

from scoreView

where sid=1


update score

set name='kim', kor=90 , eng=90 , mat=90

where sid =1 


--삭제 delete 쿼리

delete score

where sid =1

------------------------------------------------------------------------


//새 프로젝트 생성(Score_Console)


//DBConn.java    -> 오라클 데이터베이스 접속 클래스.

//ScoreDTO.java  -> 멤버변수, getter, setter. 등수 관련 멤버 추가.

//ScoreDAO.java  -> 연결, 입력, 출력, 검색, 수정, 삭제 메소드.

//Process.java   -> 입력, 출력, 검색, 수정, 삭제 관련 인터페이스

//Oralce10.java  -> main() 메소드. 주메뉴 무한실행



------------------------------------------------------------------------

Employee_Console 프로젝트

--------------------------------------

직원 관리_콘솔 버전

-> 메뉴 구성 추가

-> DBConn, EmployeeDTO, EmployeeDAO, Process, Oracle11 클래스 이용.

-> emp.sql 쿼리를 먼저 실행해서 환경 구성할 것.



실행 예)

======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->1


직원 정보 입력 --------------

(입력하는 과정에서 -1 입력시 입력 중단)

이름?박길동

주민등록번호(YYMMDD-NNNNNNN)?800110-1234567

입사일(YYYY-MM-DD)?2010-10-10

지역번호 종류(1-강원 2-경기 3-경남 4-경북 5-부산 6-서울 7-인천 8-전남 9-전북 10-제주 11-충남 )

지역번호?6

전화번호?010-345-6789

부서번호 종류(1-개발부 2-기획부 3-영업부 4-인사부 5-자재부 6-총무부 7-홍보부 )

부서번호?7

직위번호 종류(1-사장 2-전무 3-상무 4-이사 5-부장 6-차장 7-과장 8-대리 9-사원 )

직위번호?9

기본급(최소 840000원 이상)?1000000

수당?100000


직원 정보 입력 완료!



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->2


직원 전체 출력(서브 메뉴)-------------

1.사번 정렬

2.이름 정렬

3.부서 정렬

4.직위 정렬

5.급여 내림차순 정렬

선택(1~5, -1 종료)->1


전체 인원: 62명

------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000

1002 이순신 801007-1544236 2000-11-29 경기 010-4758-6532 총무부 사원 1320000 200000 1520000

...



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->3


직원 검색 출력(서브 메뉴)-------------

1.사번 검색

2.이름 검색

3.부서 검색

4.직위 검색

선택(1~4, -1 종료)->1


검색할 사번?1001


------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->4


수정하고자하는 자료의 사번?1001


------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000


직원 정보 수정 --------------

(입력하는 과정에서 -1 입력시 기존 데이터 재입력)

이름?-1

주민등록번호(YYMMDD-NNNNNNN)?-1

입사일(YYYY-MM-DD)?-1

지역번호 종류(1-강원 2-경기 3-경남 4-경북 5-부산 6-서울 7-인천 8-전남 9-전북 10-제주 11-충남 )

지역번호?-1

전화번호?-1

부서번호 종류(1-개발부 2-기획부 3-영업부 4-인사부 5-자재부 6-총무부 7-홍보부 )

부서번호?1

직위번호 종류(1-사장 2-전무 3-상무 4-이사 5-부장 6-차장 7-과장 8-대리 9-사원 )

직위번호?8

기본급(최소 840000원 이상)?1200000

수당?200000

직원 정보 수정 완료!



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->5


삭제하고자하는 자료의 사번?1001


------------------------------------------------------------------

사번 이름   주민번호       입사일     지역 전화번호      부서   직위 기본급  수당   급여

1001 홍길동 771212-1022432 1998-10-11 서울 011-2356-4528 기획부 부장 2610000 200000 2810000


이 자료를 삭제하시겠습니까(Y/N)?y

1개의 행이 삭제됨.



======== 직원 관리 (데이터베이스 이용) ==============

1. 직원 입력

2. 직원 전체 출력

- 사번 정렬

- 이름 정렬

- 부서 정렬

- 직위 정렬

- 급여 내림차순 정렬

3. 직원 검색 출력

- 사번 검색

- 이름 검색

- 부서 검색

- 직위 검색

4. 직원 수정

5. 직원 삭제

선택(1~5, -1 종료)->-1


프로그램이 종료되었습니다.


--------------------------------------

--지역 검색 쿼리

SELECT city_id, scity FROM city ORDER BY city_id


--부서 검색 쿼리

SELECT buseo_id, buseo FROM buseo ORDER BY buseo_id


--직위 검색 쿼리

SELECT jikwi_id, jikwi FROM jikwi ORDER BY jikwi_id


--직위별 최소 기본급 검색 쿼리

SELECT min_basicpay FROM jikwi WHERE jikwi_id=9


--입력 쿼리

INSERT INTO emp (emp_id, name, ssn, ibsadate, city_id, tel, buseo_id, jikwi_id, basicpay, sudang) 

VALUES (empSeq.nextval

, '홍길동'

, '771212-1022432'

, '1998-10-11'

, 6

, '011-2356-4528'

, 7

, 9

, 2610000

, 200000)


--직원 명단 출력 쿼리(emp 테이블이 아니라 empView 이용)

SELECT emp_id, name, ssn, TO_CHAR(ibsadate, 'YYYY-MM-DD') AS ibsadate

, city, tel, buseo, jikwi, basicpay, sudang, pay 

FROM empView 

ORDER BY emp_id ASC


--전체 직원수 출력 쿼리 (emp 테이블이나 empView나 결과 동일함)

SELECT COUNT(*) AS count 

FROM emp



------------------------------------

//DBConn.java

//연결 전용 클래스 작성

//DBConn.java

package com.test;


import java.sql.*;


public class DBConn {

//Singleton pattern

private static Connection dbConn;

public static Connection getConnection() throws SQLException, ClassNotFoundException {

if (dbConn == null) {  // 이미 getConnection 을 호출하여 성공한적이 있으면 dbConn 을 그냥 리턴.

  // Singleton pattern은 이것을 의미함.


String url = "jdbc:oracle:thin:@localhost:1521:xe";

String user = "scott";

String pw = "tiger";

Class.forName("oracle.jdbc.driver.OracleDriver");

dbConn = DriverManager.getConnection(url, user, pw);


}

return dbConn;

}

public static void close() throws SQLException {

if (dbConn != null) {

if (!dbConn.isClosed()) {

dbConn.close();

}

}

dbConn = null;

}

}



//EmployeeDTO.java

package com.test;


public class EmployeeDTO {


private int city_id, buseo_id, jikwi_id, min_basicpay, emp_id, basicpay, sudang, pay;

private String city, buseo, jikwi, name, ssn, tel;  

private String ibsadate; //날짜지만 문자열로 취급.

public int getCity_id() {

return city_id;

}

public void setCity_id(int city_id) {

this.city_id = city_id;

}

public int getBuseo_id() {

return buseo_id;

}

public void setBuseo_id(int buseo_id) {

this.buseo_id = buseo_id;

}

public int getJikwi_id() {

return jikwi_id;

}

public void setJikwi_id(int jikwi_id) {

this.jikwi_id = jikwi_id;

}

public int getMin_basicpay() {

return min_basicpay;

}

public void setMin_basicpay(int min_basicpay) {

this.min_basicpay = min_basicpay;

}

public int getEmp_id() {

return emp_id;

}

public void setEmp_id(int emp_id) {

this.emp_id = emp_id;

}

public int getBasicpay() {

return basicpay;

}

public void setBasicpay(int basicpay) {

this.basicpay = basicpay;

}

public int getSudang() {

return sudang;

}

public void setSudang(int sudang) {

this.sudang = sudang;

}

public int getPay() {

return pay;

}

public void setPay(int pay) {

this.pay = pay;

}

public String getCity() {

return city;

}

public void setCity(String city) {

this.city = city;

}

public String getBuseo() {

return buseo;

}

public void setBuseo(String buseo) {

this.buseo = buseo;

}

public String getJikwi() {

return jikwi;

}

public void setJikwi(String jikwi) {

this.jikwi = jikwi;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getSsn() {

return ssn;

}

public void setSsn(String ssn) {

this.ssn = ssn;

}

public String getTel() {

return tel;

}

public void setTel(String tel) {

this.tel = tel;

}

public String getIbsadate() {

return ibsadate;

}

public void setIbsadate(String ibsadate) {

this.ibsadate = ibsadate;

}

}




//Oracle11.java

package com.test;


import java.util.Scanner;


public class Oracle11 {


public static void main(String[] args) {

Process obj = new Process();

Scanner sc = new Scanner(System.in);

do {

System.out.println();

System.out.println();

System.out.println("======== 직원 관리 (데이터베이스 이용) =========");

System.out.println("1. 직원 입력");

System.out.println("2. 직원 전체 출력");

System.out.println("   - 사번 정렬");

System.out.println("   - 이름 정렬");

System.out.println("   - 부서 정렬");

System.out.println("   - 직위 정렬");

System.out.println("   - 급여 내림차순 정렬");

System.out.println("3. 직원 검색 출력");

System.out.println("   - 사번 검색");

System.out.println("   - 이름 검색");

System.out.println("   - 부서 검색");

System.out.println("   - 직위 검색");

System.out.println("4. 직원 수정");

System.out.println("5. 직원 삭제");

System.out.print("선택(1~5, -1 종료)->");

int menu = sc.nextInt();

if (menu == -1) {

System.out.println("프로그램을 종료합니다.");

break;

}

switch (menu) {

case 1 : obj.menuInsert(); break;

case 2 : obj.menuSelect(); break;

case 3 : obj.menuSearch(); break;

case 4 : obj.menuUpdate(); break;

case 5 : obj.menuDelete(); break;

}

} while (true);



}


}



WRITTEN BY
빨강꼬마

,

** 별도로 공부할 내용



예외처리(exception)

쿼리문(인서트, 셀렉트) 실행하는 자바 구문.

executeUpdate

executeQuery -- > 결과집합인 ResultSet 을 리턴받는다.


테이블 불러와서 출력할때는

while (ResultSet의 변수명.next()) 를 사용하고 row단위로 먼저 접근하고

실행문에서는 컬럼 단위로 접근한다.



http://devyongsik.tistory.com/294

Class.forName() 내용 확인 url






문제) 여러명의 국,영,수 점수를 입력 받아서 총점, 평균, 판정 결과 출력.

JDBC 프로그램 작성. 오라클 이용. 총점 기준 정렬 출력(내림차순 desc)


판정 기준은 

합격 -> 과목별로 40점 이상이면서, 평균이 60점 이상.

과락 -> 과목중 40점 미만이 있고, 평균이 60이상.

불합격 -> 평균이 60점 미만


평균이 60점 이상 -> 합격 또는 과락 -> 국영수 점수가 모두 40점 이상인지 확인.

평균이 60점 이하 -> 불합격


정렬 기준은 총점 기준으로 내림차순 정렬.


실행 예)

성적 입력(이름 국어 영어 수학)?hong 100 100 100

성적 입력(이름 국어 영어 수학)?kim 80 90 80

성적 입력(이름 국어 영어 수학)?-1 -> 입력끝 지정 필요


------------------------------------------

    이름  국어  영어  수학  총점   평균   판정

------------------------------------------

1등 hong   100   100   100   300  100.0   합격

2등 kim     80    90    80    ..    ..    합격

------------------------------------------



** 오라클 별도작업

--오라클에 성적저장용 테이블 생성

CREATE TABLE score(

sid NUMBER --PK, 자동번호 기능 부여.

,name VARCHAR2(10)

,kor NUMBER(3) --CK (0~100)

,end NUMBER(3) --CK (0~100)

,mat NUMBER(3) --CK (0~100)

);



-- 제약조건 추가

ALTER TABLE score

ADD CONSTRAINT score_sid_pk PRIMARY KEY (sid)

ALTER TABLE score

ADD CONSTRAINT score_kor_ck CHECK (kor BETWEEN 0 AND 100);

ALTER TABLE score

ADD CONSTRAINT score_eng_ck CHECK (eng BETWEEN 0 AND 100);

ALTER TABLE score

ADD CONSTRAINT score_mat_ck CHECK (mat BETWEEN 0 AND 100);


--자동번호부여


CREATE SEQUENCE scoreSeq;



--INSERT 쿼리 샘플 (자바 소스에 복사할 목적으로 미리 만든 샘플이므로 구문 끝에 ; 표시를 제외함.)

INSERT INTO score (sid, name, kor, eng, mat) VALUES (scoreSeq.nextVal, 'hong', 100, 100, 100)


--SELECT 쿼리 샘플

  SELECT sid, name, kor, eng, mat

  , (kor+eng+mat) as tot

  , (kor+eng+mat)/3 as ave

  , case

           when ((kor+eng+mat)/3 >= 60) and (kor<40 or eng<40 or mat<40) then '과락'

   when ((kor+eng+mat)/3 >= 60) then '합격'

   else '불합격'

    end as "grade"

FROM score

ORDER BY (kor+eng+mat) DESC



------------------------------------------------------------

//DBconn.java



//Oracle07.java






문제) 이름과 전화번호를 저장하는 JDBC 프로그램 작성. 오라클 이용.

MemberDTO, MemberDAO, Oracle08 클래스 작성


실행 예)

이름 전화번호(1)?홍길동 010-123-1234

이름 전화번호(2)?김길동 010-222-3333

이름 전화번호(3)?-1


----------------------------

전체 회원수 : 2명

----------------------------

회원번호 이름   전화번호

----------------------------

1        홍길동 010-123-1234

2        김길동 010-222-3333

----------------------------


-- 회원수 출력쿼리

SELECT COUNT(*) AS count FROM member 


-- 회원정보 출력

SELECT mid, name, tel FROM member ORDER BY mid


-- 회원정보 입력

INSERT INTO member (mid, name, tel) VALUES (memberSeq.nextval, '%s', '%s')



//회원 테이블 생성. 회원번호, 이름, 전화번호. 시퀀스 객체 생성.

CREATE TABLE member (

mid NUMBER --PK

,name VARCHAR2(10)

,tel VARCHAR2(20)

);


ALTER TABLE member

ADD CONSTRAINT member_mid_pk PRIMARY KEY(mid);


CREATE SEQUENCE memberSeq;



----

//DBconn.java -> 오라클 연결용 클래스

//연결 전용 클래스 작성

//DBConn.java

package com.test;


import java.sql.*;


public class DBConn {

//Singleton pattern

private static Connection dbConn;

public static Connection getConnection() throws SQLException, ClassNotFoundException {

if (dbConn == null) {  // 이미 getConnection 을 호출하여 성공한적이 있으면 dbConn 을 그냥 리턴.

   // Singleton pattern은 이것을 의미함.


String url = "jdbc:oracle:thin:@localhost:1521:xe";

String user = "scott";

String pw = "tiger";

Class.forName("oracle.jdbc.driver.OracleDriver");

dbConn = DriverManager.getConnection(url, user, pw);


}

return dbConn;

}

public static void close() throws SQLException {

if (dbConn != null) {

if (!dbConn.isClosed()) {

dbConn.close();

}

}

dbConn = null;

}

}




//MemberDTO.java -> 자료처리 전용 클래스. 멤버변수, getter, setter

package com.test;


public class MemberDTO {

private int mid;

private String name, tel;

public int getMid() {

return mid;

}

public void setMid(int mid) {

this.mid = mid;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getTel() {

return tel;

}

public void setTel(String tel) {

this.tel = tel;

}

}




//MemberDAO.java -> 데이터베이스 엑세스 담당 클래스. 입력, 출력, 연결용 메소드.

package com.test;


import java.util.*;

import java.sql.*;


public class MemberDAO {

private Connection conn;

//연결 전용 메소드

public void connect() throws SQLException, ClassNotFoundException{

conn  = DBConn.getConnection();

}

//연결 해제 전용 메소드

public void close() throws SQLException{

DBConn.close();

conn = null;

}

//입력 메소드 즉, INSERT 쿼리 실행

public int add(MemberDTO dto) throws SQLException{

int result = 0;

String sql = String.format("INSERT INTO member (mid, name, tel) VALUES (memberSeq.nextval, '%s', '%s')", dto.getName(), dto.getTel());


//쿼리 실행

//Java에서 쿼리를 실행하면 

//내부적으로 COMMIT은 자동 실행됨.

//executeUpdate() 메소드는 DML문인 경우만 실행.

Statement stmt = conn.createStatement();

result = stmt.executeUpdate(sql);

return result;

}

//회원수 출력 전용 메소드

public int count() throws SQLException {

int result = 0;

String sql = String.format("SELECT COUNT(*) AS count FROM member");

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql); //결과집합

while(rs.next()) { //row 단위 접근

int count = rs.getInt("count"); //column 단위 접근

result = count;

}


rs.count();

return result;

}

//출력 메소드 즉, SELECT 쿼리 실행

public ArrayList<MemberDTO> lists() throws SQLException{

ArrayList<MemberDTO> arrayList = new ArrayList<MemberDTO>();

//SELECT 쿼리 준비

String sql = String.format("SELECT mid, name, tel FROM member ORDER BY mid");

//쿼리 실행

//executeQuery() 메소드는 DQL문인 경우만 실행.

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql); //결과집합

//결과 집합(ResultSet)을 리턴해야 된다.

//결과 집합은 특성상 이 메소드를 벗어날 수 없다. 왜냐하면 ResultSet은 메소드 빠져나가기 전에 반드시 클로즈하기 때문.

//결과 집합을 -> 결렉션 저장

//컬렉션을 리턴.

while(rs.next()) { //row 단위 접근

int mid = rs.getInt("mid"); //column 단위 접근

String name = rs.getString("name");

String tel = rs.getString("tel");

MemberDTO dto = new MemberDTO();

dto.setMid(mid);

dto.setName(name);

dto.setTel(tel);

arrayList.add(dto);

}

rs.close();

return arrayList;

}


}




//Oracle08.java -> main() 메소드. 인터페이스 담당.

package com.test;


import java.util.*;


public class Oracle08 {


public static void main(String[] args) {


MemberDAO dao = new MemberDAO();

Scanner sc = new Scanner(System.in);

try {

//연결

dao.connect();

//입력 - 무한실행

do {

System.out.printf("이름 전화번호(%d)?", (dao.count()+1));

String name = sc.next(); //이름

if (name.equals("-1")) {

break;

}

String tel = sc.next();  //전화번호

MemberDTO dto = new MemberDTO();

dto.setName(name);

dto.setTel(tel);

int rowCount = dao.add(dto);

System.out.printf("%d개의 행이 입력됨. %n", rowCount);

} while (true);

//출력

System.out.println("----------------------");

System.out.printf("전체 회원수 : %d명 %n", dao.count());

System.out.println("----------------------");

System.out.println("회원번호 이름  전화번호");

for(MemberDTO dto : dao.lists()) {

System.out.printf("%8d %4s %9s %n", dto.getMid(), dto.getName(), dto.getTel());

}

System.out.println("----------------------");

} catch (Exception e) {

System.out.println(e.toString());

}


}


}








문제) 여러명의 국,영,수 점수를 입력 받아서 총점, 평균, 판정 결과 출력.

JDBC 프로그램 작성. 오라클 이용. 총점 기준 정렬 출력(내림차순 desc)

DBConn, ScoreDTO, ScoreDAO, Oracle09


판정 기준은 

합격 -> 과목별로 40점 이상이면서, 평균이 60점 이상.

과락 -> 과목중 40점 미만이 있고, 평균이 60이상.

불합격 -> 평균이 60점 미만


평균이 60점 이상 -> 합격 또는 과락 -> 국영수 점수가 모두 40점 이상인지 확인.

평균이 60점 이하 -> 불합격


정렬 기준은 총점 기준으로 내림차순 정렬.


실행 예)

성적 입력(이름 국어 영어 수학)?hong 100 100 100

성적 입력(이름 국어 영어 수학)?kim 80 90 80

성적 입력(이름 국어 영어 수학)?-1 -> 입력끝 지정 필요


------------------------------------------

    이름  국어  영어  수학  총점   평균   판정

------------------------------------------

1등 hong   100   100   100   300  100.0   합격

2등 kim     80    90    80    ..    ..    합격

------------------------------------------



//DBConn.java 오라클 접속을 위한 클래스


//ScoreDTO.java 자료처리전용 클래스 - 멤버변수, getter, setter




//ScoreDAO.java 데이터베이스 엑세스 전용 클래스.




//Oracle09.java main() 메소드 구현. 인터페이스 출력 클래스.







문제) 성적 처리. 메뉴 구성 추가. 새 프로젝트에서 구성할 것.

DBConn.java, ScoreDTO, ScoreDAO, Process, Oralce10 클래스 이용.


여러명의 이름, 국어, 영어, 수학 입력 받아서 총점, 평균, 판정, 등수 계산해서 출력. 출력시 이름 오름차순 정렬해서 출력.


실행 예)

======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->1


성적 입력(이름 국어 영어 수학)?park 80 75 60

성적 입력(이름 국어 영어 수학)?hong 100 90 80

성적 입력(이름 국어 영어 수학)?kim 80 85 80

성적 입력(이름 국어 영어 수학)?-1


======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->2


 이름   국어  영어  수학  총점  평균   판정  등수

 hong    100   90    80    XXX  XXX.X  합격   1

 kim      80   85    80    XXX  XXX.X  합격   2

 park     80   75    60    XXX  XXX.X  합격   3



======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->3

검색하려는 이름?kim

 이름   국어  영어  수학  총점  평균   판정  등수

 kim      80   85    80    XXX  XXX.X  합격   2



======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->3

검색하려는 이름?choi

검색 결과가 없습니다.


======== 성적 처리 ==============

1. 성적 입력

2. 성적 전체 출력

3. 이름 검색 출력

4. 성적 수정

5. 성적 삭제

선택(1~5, -1 종료)->-1


프로그램이 종료되었습니다.


-------------------------------------------------------------

//새 프로젝트 생성(Score_Console)


//DBConn.java    -> 오라클 데이터베이스 접속 클래스.

//ScoreDTO.java  -> 멤버변수, getter, setter. 등수 관련 멤버 추가.

//ScoreDAO.java  -> 연결, 입력, 출력, 검색, 수정, 삭제 메소드.

//Process.java   -> 입력, 출력, 검색, 수정, 삭제 관련 인터페이스

//Oralce10.java  -> main() 메소드. 주메뉴 무한실행


WRITTEN BY
빨강꼬마

,

예외처리(Exception)


1. 프로그램 실행시 발생하는 오류를 붙잡아주는 기능.


오류 - 문법적인 오류(컴파일 단계에서 체크). 실행 오류(실행 단계에서 체크). 예외(실행 단계에서 체크).


예외 - 탐색기에서 CD드라이브를 더블클릭하는 경우 CD의 내용을 나타나기도 하고(예상 결과), CD를 넣으라는 메시지가 나타나기도(예외 상황) 한다.

예외 처리를 하지 않았다면 CD를 넣지 않은 경우 오류 발생하면서 프로그램이 종료되버린다.


2. Exception 클래스 


- ArithmeticException

- ArrayStoreException

- IndexOutOfBoundsException

- ClassCastException

- NullPointerException


3. 예외 처리 형식


try {


//오류 발생 가능성이 있는 실행문;


} catch(예외종류) {

//처리 방법

}



//Exception 처리 없는 경우

//Sample01.java



//Exception 처리 있는 경우

//Sample02.java






try~catch 구문


1. 예외처리를 담당하는 구문. 예외가 발생할 수 있는 부분을 try 블럭으로 감싸주면 예외처리를 할 수 있다.


2. 형식


형식1 -------

try {

//실행문;

} catch(예외종류) {

//예외처리 

}


형식2 -------

try {

//실행문;

} [catch(하위예외) { //예를들어, FileNotFoundException

//예외처리 

} catch(하위예외) { //예를들어, IOException

//예외처리 

}] catch(상위예외) { //예를들어, Exception

//예외처리 

}



형식3 -------

try {

//실행문;

} catch(예외종류) {

//예외처리 

} [finally {

//예외 발생과 관련없이 항상 실행되는 부분;

}]





//예외가 발생해도 프로그램이 중지되지 않도록 하는 방법-예외 처리

//Sample03.java







예외 발생 가능성 확인

-> 메소드 원형에서 예외 가능성과 종류를 확인할 수 있다.


//Integer.parseInt() 메소드에서 예외 종류 확인

//Sample04.java







throws 구문


1. 예외처리를 담당하는 구문. try~catch는 예외 발생시 try~catch 구문이 처리하지만, throws는 예외 발생시 외부에 예외를 넘기게 된다.


2. 형식


접근지정자 반환자료형 메소드이름(매개변수 리스트)  throws 예외종류 {

//실행문;

//예외 발생 가능성이 있는 문장;

return 값;

}



//예외 처리를 throws 구문으로 처리하는 경우







JDBC (Java DataBase Connectivity)


1. 자바 프로그램이 DBMS에 일관된 방식으로 접근할 수 있도록 제공하는 API.


2. JDBC는 데이터베이스에 접속하기 위해서 한 개의 클래스(java.sql.DriverManager)와 두 개의 인터페이스(java.sql.Driver, java.sql.Connection)을 사용한다.


3. 오라클용 JDBC 드라이버(ojdbc14.jar)를 Java/jdk1.7.XX/jre/lib/ext 폴더와 Java/jre7/lib/ext 폴더에 복사할 것. ojdbc14.jar 파일은 오라클 설치 폴더에서 복사할 수 있음.



//오라클 연결 테스트

//Oracle01.java








//연결 전용 클래스 작성

//DBConn.java



//Oracle02.java








SQL 쿼리 전송 테스트1 (scott 계정)


//회원 테이블 생성. 회원번호, 이름, 전화번호. 시퀀스 객체 생성.

CREATE TABLE member (

mid NUMBER --PK

,name VARCHAR2(10)

,tel VARCHAR2(20)

);


ALTER TABLE member

ADD CONSTRAINT member_mid_pk PRIMARY KEY(mid);


CREATE SEQUENCE memberSeq;



//회원 테이블에 자료 입력. INSERT 쿼리.

//쿼리문의 끝에 ; 표시하지 말것.

//INSERT INTO member (mid, name, tel) VALUES (memberSeq.nextval, 'hong', '111-1111')

//Oracle03.java

package com.test;


import java.sql.*;


public class Oracle03 {


public static void main(String[] args) {

try {

//연결

Connection conn = DBConn.getConnection();

//쿼리 준비

//쿼리 작성시 끝에 ; 표시하지 말것.

String sql = String.format("INSERT INTO member (mid, name, tel) VALUES (memberSeq.nextval, 'hong', '111-1111')");

//쿼리 실행

//Java에서 쿼리를 실행하면 

//내부적으로 COMMIT은 자동 실행됨.

//executeUpdate() 메소드는 DML문인 경우만 실행.

Statement stmt = conn.createStatement();

int count = stmt.executeUpdate(sql);

//결과 출력

System.out.printf("%d개의 행이 입력되었습니다. %n"

, count);

}catch(Exception e) {

System.out.println(e.toString());

}


}


}




//회원 테이블 자료 출력. SELECT 쿼리.

//쿼리문의 끝에 ; 표시하지 말것.

//SELECT mid, name, tel FROM member

//Oracle04.java

package com.test;


import java.sql.*;


public class Oracle04 {


public static void main(String[] args) {

try {

//연결

Connection conn = DBConn.getConnection();

//쿼리 준비

//쿼리 작성시 끝에 ; 표시하지 말것.

String sql = String.format("SELECT mid, name, tel FROM member");

//쿼리 실행

//executeQuery() 메소드는 DQL문인 경우만 실행.

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql); //결과집합

//결과 출력

while(rs.next()) { //row 단위 접근

int mid = rs.getInt("mid"); //column 단위 접근

String name = rs.getString("name");

String tel = rs.getString("tel");

System.out.printf("%d %s %s %n"

, mid, name, tel);

}


//ResultSet 객체 소멸->필수

rs.close();

}catch(Exception e) {

System.out.println(e.toString());

}


}


}






문제) member 테이블의 회원수를 출력하는 프로그램 작성.

//SELECT COUNT(*) AS count FROM member

//Oracle05.java







문제) 이름과 전화번호를 저장하는 JDBC 프로그램 작성. 오라클 이용.

데이터 입력과 INSERT 쿼리 실행을 반복 실행. 입력이 끝나면 SELECT 쿼리와 출력문 실행.


실행 예)

이름 전화번호(1)?홍길동 010-123-1234

이름 전화번호(2)?김길동 010-222-3333

이름 전화번호(3)?-1


----------------------------

전체 회원수 : 2명

----------------------------

회원번호 이름   전화번호

----------------------------

1        홍길동 010-123-1234

2        김길동 010-222-3333

----------------------------


//DBConn.java

package com.test;


import java.sql.*;


public class DBConn {

//Singleton pattern

private static Connection dbConn;

public static Connection getConnection()

throws SQLException, ClassNotFoundException {

if (dbConn == null) {


String url = "jdbc:oracle:thin:@localhost:1521:xe";

String user = "scott";

String pw = "tiger";

Class.forName("oracle.jdbc.driver.OracleDriver");

dbConn = DriverManager.getConnection(url, user, pw);


}

return dbConn;

}

public static void close()

throws SQLException {

if (dbConn != null) {

if (!dbConn.isClosed()) {

dbConn.close();

}

}

dbConn = null;

}

}




//Oracle06.java


WRITTEN BY
빨강꼬마

,