예제 확인 및 소스(소스보기)
'개발개발 > 자바스크립트' 카테고리의 다른 글
| 문서객체 (0) | 2012.09.11 |
|---|---|
| 0906 자바스크립트 계산기 (0) | 2012.09.06 |
| 0905 자바스크립트 계산기 (0) | 2012.09.05 |
| 자바스크립트 계산기 진행사항(09.03) (0) | 2012.09.03 |
| 자바스크립트 계산기 ( 추가사항, 예외처리 고려 해야 할 사항) (0) | 2012.09.03 |
http://bboong100.cafe24.com/0905/calc.html
현재 까지 가능한 기능
텍스트창 오른쪽 정렬
엔터키로 연산
소수점 값 입력
위에 텍스트에 먼저 입력한 숫자와 연산자를 표시하고 연산 결과는 아래창에 출력되는 기능
연산자, 0, 소수점(.) 중복 입력시 처리 문제
'C' 버튼을 눌렀을 때 위 텍스트창도 초기화
연산 결과 나오고 다시 연산자 버튼을 눌렀을 때 위 텍스트 창에 기존 수식이 계속 출력되던 문제 해결
추가할 기능
처음 숫자 입력 하고 연산자 누르고 다른 연산자 눌렀을 때 나중에 누른 연산자로 대체되어야 하는 문제
백스페이스 눌렀을 때 생기는 오류들 ...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
.txtalign {
text-align: right;
}
</style>
<script type="text/javascript">
var str = "";
var str2 = "";
var flag = false;
function cal(num)
{
//입력된 값이 숫자면 true 문자면 false
if (!isNaN(num))
{
if (!flag)
{
str = "";
document.getElementById('txt').innerHTML = '';
//innerhtml 태그 - 지정된 태그의 값을 바꿔준다!
}
str += num;
str2 += num;
// 위 아래텍스트 창에 동시에넣어주고
// 아래창만 출력한다
document.getElementById('txt').innerHTML += num;
flag = true;
}
//이전에 입력값이 숫자였으면
else if (flag)
{
str2 += num;
//기존에 입력된 숫자와 연산자를 위 텍스트창에 출력한다
document.getElementById('txtcalc').innerHTML = str2;
if (!isNaN(num))
{
str2.substring(0, str.length - 1);
str2 += num;
document.getElementById('txtcalc').innerHTML = str2;
}
flag = false;
}
}
function answer()
{
//수식이 연산자로 끝나면
if (!flag)
{
alert('수식을 다시 입력해주세요!');
return;
}
else
{
document.getElementById('txtcalc').innerHTML = str2;
document.getElementById('txt').innerHTML = eval(str2);
// 위 텍스트창에 연산한 결과값을 eval()함수로 계산 하고아래 텍스창 결과 출력
document.getElementById('txtcalc').innerHTML = "";
// 위 창에 내용을초기
str2 = document.getElementById('txt').innerHTML;
alert(str2);
}
}
function enter(number)
{
if (event.keyCode == 13)
{
answer();
}
else if ((event.keyCode >= 96 && event.keyCode <= 105))
{
cal(event.keyCode - 96);
}
else if (flag && ( event.keyCode == 107 || event.keyCode == 109 ||
event.keyCode == 106 || event.keyCode == 111 ||
event.keyCode == 110))
{
switch (event.keyCode) {
case 107:cal('+');break;
case 109:cal('-');break;
case 106:cal('*');break;
case 111:cal('/');break;
}
}
// else
// {
// alert('숫자 또는 연산자를 입력하세요!');
// }
}
function clearcal()
{
str2 = "";
flag = false;
document.getElementById('txt').innerHTML = "수식을 입력하세요..";
document.getElementById('txtcalc').innerHTML = "";
// 텍스트창 초기화
}
function bs()
{
document.getElementById('txt').innerHTML = str.substring(0, str.length - 1);
str2 = str2.substring(0, str2.length - 1);
document.getElementById('txtcalc').innerHTML = str2;
if (str.length == 0)
str = '0';
// substring 으로 0부터 value 길이에서 -1 한 만큼의 길이를 출력한다
}
</script>
<title>계산기</title>
</head>
<body onkeydown="enter(cal);">
<form name="calc">
<table border=1 width=200px height=200px cellpadding=0 cellspacing=0 align=center>
<tr border=2> <!-- 연산자 표시창 -->
<td colspan=5 align=center height=20>
<div id='txtcalc' name='txtcalc' class="txtalign" value=''></div>
<div id='txt' name='txt' class="txtalign" value=''>수식을 입력하세요..</div>
</td>
</tr>
<tr height=40px> <!-- 백스페이스, C -->
<td colspan=5>
<table border=1 width=100%>
<tr align=center>
<td width=33%><input type=button value='BackSpace' style="width:100%;" onclick=bs()></td>
<td width=33%><input type=button value='C' style="width:100%;" onclick=clearcal()></td>
</tr>
</table>
</td>
</tr>
<tr align=center>
<td width=25%><input type=button value=' 1 ' onclick="cal('1')"></td>
<td width=25%><input type=button value=' 2 ' onclick="cal('2')"></td>
<td width=25%><input type=button value=' 3 ' onclick="cal('3')"></td>
<td width=25%><input type=button value=' / ' onclick="cal('/')"></td>
</tr>
<tr align=center>
<td><input type=button value=' 4 ' onclick="cal('4')"></td>
<td><input type=button value=' 5 ' onclick="cal('5')"></td>
<td><input type=button value=' 6 ' onclick="cal('6')"></td>
<td><input type=button value=' * ' onclick="cal('*')"></td>
</tr>
<tr align=center>
<td><input type=button value=' 7 ' onclick="cal('7')"></td>
<td><input type=button value=' 8 ' onclick="cal('8')"></td>
<td><input type=button value=' 9 ' onclick="cal('9')"></td>
<td><input type=button value=' + ' onclick="cal('+')"></td>
</tr>
<tr align=center>
<td><input type=button value=' = ' onclick="answer()"></td>
<td><input type=button value=' 0 ' onclick="cal('0')"></td>
<td><input type=button value=' . ' onclick="cal('.')"></td>
<td><input type=button value=' - ' onclick="cal('-')"></td>
</tr>
</table>
</form>
</body>
</html>
'개발개발 > 자바스크립트' 카테고리의 다른 글
| 0906 자바스크립트 계산기 (0) | 2012.09.06 |
|---|---|
| 계산기 문제점 (0) | 2012.09.06 |
| 자바스크립트 계산기 진행사항(09.03) (0) | 2012.09.03 |
| 자바스크립트 계산기 ( 추가사항, 예외처리 고려 해야 할 사항) (0) | 2012.09.03 |
| 자바스크립트 셀렉트(javascript select) option 추가하기 (0) | 2012.08.31 |
createStatement
createstatement 는 static parsing 으로 sql문을 parsing 할 때 입력된 해당 값을 sql문에 binding하여 같이 parsing 하여 실행한다
static parsing은 sql문과 입력된 값을 함께 파싱 하므로 한번 parsing 된 sql문을 다른 데이터를 입력하여 사용 할 수 없어 해당 서비스에 사용자 수가 많은 경우 메모리 full이 발생할 수 있다
createStatement사용시 Statement를 사용하여 sql문에 필요한 데이터를 입력 받고 실행시 발생한 데이터를 ResultSet 에 저장한다
장점 : 가볍다
단점 : parsing된 sql문 사용시 입력된 값이 다를 경우 재사용할 수 없으며 자원의 낭비가 발생할 수 있다
사용법
Statement stmt = con.createStatement();
String sql = "insert into member(id, pwd, title, content)”
+”values('33','1111','제목','내용')";
int result = stmt.executeUpdate(sql);
preparedStatement
prepareStatement는 dynamic parsing으로 sql문을 parsing한 후 입력된 해당 값을 parsing된 sql문에 binding하여 실행한다.
dynamic parsing은 sql문을 먼저 parsing하여 입력되는 값이 여러개 일 경우 sql문을 여러번 parsing하지 않고 parsing된 sql문에 원하는 값을 binding하여 사용하므로 자원의 낭비가 적다.
prepareStatement사용 시 PreparedStatement를 사용하여 sql문에 필요한 데이터를 입력 받고 실행 시 발생한 데이터를 ResultSet에 저장한다.
장점 : 값의 binding없이 sql문 만을 parsing하므로 parsing된 sql문의 재사용이 용의하여 자원이 낭비으며 인젝션으로 인한 피해를 줄일 수 있다.
단점 : 무겁다.
pstmt = con.prepareStatement("select b_name, b_title, b_content from board where b_id=?");
pstmt.setString(1, id);
rs = pstmt.executeQuery();
callableStatement
callableStatement는 SQL의 스토어드 프로시저를 실행시키기 위해 사용되는 인터페이스
스토어드프로시저란 query문을 하나의 파일형태로 만들거나 데이터베이스에 저장해 놓고 함수처럼 호출해서 사용 하는 것이다 이것을 이용하면 연속되는 query문에 대해서 매우 빠른 성능을 보인다
장점 : 자바코드에 쿼리문이 들어가지 않아 보다 간결해진다
단점 : 저장프로시져에서 선언한 순서대로 파라미터를 넘겨야 한다
'개발개발 > JSP&스트럿츠' 카테고리의 다른 글
| jsp:useBean (0) | 2013.12.17 |
|---|---|
| Struts logic 커스텀 태그 (0) | 2012.09.04 |
| GET/POST 방식 차이점 (0) | 2012.09.03 |
