티스토리 뷰
테이블을 이용해서 심플 계산기 만들기
이렇게 생긴 계산기를 만들어보려고 한다.
# 테이블의 구조
<table> </table> 안에 <tr> </tr> 로 행을 생성하고 그 안에 <td> </td>로 열을 생성한다.
1. 테이블 너비, 높이 설정하기
- 가로 길이는 width, 세로길이는 height이다.
- 내가 위치해있는 부모 엘리먼트의 영역을 다 먹으려면 width 를 100% 로,
테이블의 부모 엘리먼트는 body , 따라서 테이블은 body의 영역을 100% 먹게된다.
- 고정비는 브라우저의 크기를 반영하지 못하기 때문에 픽셀값을 직접 입력하는 것보다 %를 많이 활용한다.
2. 테이블 테두리 만들기
- border를 1로 주면 테두리를 만들 수 있다.
3. 테이블 병합하기
- 행 병합 colspan, 열 병합 rowspan
전체 코드는 다음과 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="100%" height="300">
<tr>
<td colspan="2">/</td>
<td>*</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td rowspan="2">+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">=</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
</tr>
</table>
</body>
</html> |
cs |
# 버튼형식의 심플 계산기 만들기
- <input type = "button"> 을 활용하여 버튼을 각 칸마다 추가해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="display" value="0" style="width:300px; height:50px;" />
<table border="1" width="300" height="300">
<tr>
<td colspan="2"><input type="button" id="division" value="/" style="width:100%; height:70px;" /></td>
<td><input type="button" id="multiplication" value="*" style="width:100%; height:70px;" /></td>
<td><input type="button" id="subtraction" value="-" style="width:100%; height:70px;" /></td>
</tr>
<tr>
<td><input type="button" id="7" value="7" style="width:100%; height:70px" /></td>
<td><input type="button" id="8" value="8" style="width:100%; height:70px" /></td>
<td><input type="button" id="9" value="9" style="width:100%; height:70px" /></td>
<td rowspan="2"><input type="button" id="addition" value="+" style="width:100%; height:140px" /></td>
</tr>
<tr>
<td><input type="button" id="4" value="4" style="width:100%; height:70px" /></td>
<td><input type="button" id="5" value="5" style="width:100%; height:70px" /></td>
<td><input type="button" id="6" value="6" style="width:100%; height:70px" /></td>
</tr>
<tr>
<td><input type="button" id="1" value="1" style="width:100%; height:70px" /></td>
<td><input type="button" id="2" value="2" style="width:100%; height:70px;" /></td>
<td><input type="button" id="3" value="3" style="width:100%; height:70px;" /></td>
<td rowspan="2"><input type="button" id="result" value="=" style="width:100%; height:140px;" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="0" value="0" style="width:100%; height:70px;" /></td>
<td><input type="button" id="dot" value="." style="width:100%; height:70px;" /></td>
</tr>
</table>
</body>
</html> |
cs |
# 자바스크립트를 이용하여 버튼을 클릭했을 때 경고창 띄우기
- 자바에서 문자열을 쓸때 "" 였지만, 자바스크립트는 ''안에도 문자열을 넣을 수 있고, "" 안에도 문자열을 넣을 수 있다.
- 자바스크립트를 공부하고싶다면, 더글라스 크록포드의 책을 읽어보자. json이라고 하는 자바스크립트 객체를 만든 사람이다.
- 자바스크립트 에러 보는 방법 : 실행창에서 F12 눌러 console 창을 확인한다.
- 자바스크립트는 <head> </head> 안쪽에 넣어준다.
- 자바스크립트의 function 들은 리턴타입이 없다. 리턴하고싶다면, 리턴 하면된다. 자바스크립트는 type이 없다. 이게 숫자다, 문자다, 논리형이다. 는게 없다. 오로지 타입 하나만 가지고 만든다. 그래서 그 타입은 지금 나올때는 아니라서 일단 넘어가도록 한다. 지금 할거는 받은 것을 경고창으로 띄워주는 것!
- 결과
- 전체 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function add(str) {
alert(str);
}
</script>
</head>
<body>
<input type="text" id="display" value="0" style="width:300px; height:50px;" />
<table border="1" width="300" height="300">
<tr>
<td colspan="2"><input type="button" id="division" value="/" style="width:100%; height:70px;" onclick="add('/')" /></td>
<td><input type="button" id="multiplication" value="*" style="width:100%; height:70px;" onclick="add('*')"/></td>
<td><input type="button" id="subtraction" value="-" style="width:100%; height:70px;" onclick="add('-')"/></td>
</tr>
<tr>
<td><input type="button" id="7" value="7" style="width:100%; height:70px" onclick="add('7')"/></td>
<td><input type="button" id="8" value="8" style="width:100%; height:70px" onclick="add('8')"/></td>
<td><input type="button" id="9" value="9" style="width:100%; height:70px" onclick="add('9')"/></td>
<td rowspan="2"><input type="button" id="addition" value="+" style="width:100%; height:140px" onclick="add('+')"/></td>
</tr>
<tr>
<td><input type="button" id="4" value="4" style="width:100%; height:70px" onclick="add('4')"/></td>
<td><input type="button" id="5" value="5" style="width:100%; height:70px" onclick="add('5')"/></td>
<td><input type="button" id="6" value="6" style="width:100%; height:70px" onclick="add('6')"/></td>
</tr>
<tr>
<td><input type="button" id="1" value="1" style="width:100%; height:70px" onclick="add('1')"/></td>
<td><input type="button" id="2" value="2" style="width:100%; height:70px;" onclick="add('2')"/></td>
<td><input type="button" id="3" value="3" style="width:100%; height:70px;" onclick="add('3')"/></td>
<td rowspan="2"><input type="button" id="result" value="=" style="width:100%; height:140px;" onclick="add('=')"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="0" value="0" style="width:100%; height:70px;" onclick="add('0')"/></td>
<td><input type="button" id="dot" value="." style="width:100%; height:70px;" onclick="add('.')"/></td>
</tr>
</table>
</body>
</html> |
cs |
4. 버튼 클릭하면 입력창에 내용 띄우기
document.getElementById() : html 문서 전체에서 id를 이용해 element 하나를 가지고온다.
document.getElementById("display").value += str; display라는 id를 가진 엘리먼트의 value에 str을 더해준다.
- 결과
- 전체 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function add(str) {
//alert(str);
document.getElementById("display").value += str;
}
</script>
</head>
<body>
<input type="text" id="display" value="0" style="width:300px; height:50px;" />
<table border="1" width="300" height="300">
<tr>
<td colspan="2"><input type="button" id="division" value="/" style="width:100%; height:70px;" onclick="add('/')" /></td>
<td><input type="button" id="multiplication" value="*" style="width:100%; height:70px;" onclick="add('*')"/></td>
<td><input type="button" id="subtraction" value="-" style="width:100%; height:70px;" onclick="add('-')"/></td>
</tr>
<tr>
<td><input type="button" id="7" value="7" style="width:100%; height:70px" onclick="add('7')"/></td>
<td><input type="button" id="8" value="8" style="width:100%; height:70px" onclick="add('8')"/></td>
<td><input type="button" id="9" value="9" style="width:100%; height:70px" onclick="add('9')"/></td>
<td rowspan="2"><input type="button" id="addition" value="+" style="width:100%; height:140px" onclick="add('+')"/></td>
</tr>
<tr>
<td><input type="button" id="4" value="4" style="width:100%; height:70px" onclick="add('4')"/></td>
<td><input type="button" id="5" value="5" style="width:100%; height:70px" onclick="add('5')"/></td>
<td><input type="button" id="6" value="6" style="width:100%; height:70px" onclick="add('6')"/></td>
</tr>
<tr>
<td><input type="button" id="1" value="1" style="width:100%; height:70px" onclick="add('1')"/></td>
<td><input type="button" id="2" value="2" style="width:100%; height:70px;" onclick="add('2')"/></td>
<td><input type="button" id="3" value="3" style="width:100%; height:70px;" onclick="add('3')"/></td>
<td rowspan="2"><input type="button" id="result" value="=" style="width:100%; height:140px;" onclick="add('=')"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="0" value="0" style="width:100%; height:70px;" onclick="add('0')"/></td>
<td><input type="button" id="dot" value="." style="width:100%; height:70px;" onclick="add('.')"/></td>
</tr>
</table>
</body>
</html> |
cs |
# 0을 지우고 입력창에 입력하기
초기값 0을 표기하고 있을 때 0을 치면 중복되기 때문에 0을 없애주는 문장이 필요하다.
var(variable) : 자바스크립트에서 변수를 쓰고싶을 때 선언한다. 타입이 var밖에 없어서 문자에도 논리연산자를 쓸 수 있다.
var display = document.getElementById('display');
display 변수 안에는 display로 id를 선언한 문장이 모두 들어간다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function add(str) {
var display = document.getElementById('display');
if( display.value == 0 ) {
display.value = "";
}
display.value += str;
}
</script>
</head>
<body>
<input type="text" id="display" value="0" style="width:300px; height:50px;" />
<table border="1" width="300" height="300">
<tr>
<td colspan="2"><input type="button" id="division" value="/" style="width:100%; height:70px;" onclick="add('/')" /></td>
<td><input type="button" id="multiplication" value="*" style="width:100%; height:70px;" onclick="add('*')"/></td>
<td><input type="button" id="subtraction" value="-" style="width:100%; height:70px;" onclick="add('-')"/></td>
</tr>
<tr>
<td><input type="button" id="7" value="7" style="width:100%; height:70px" onclick="add('7')"/></td>
<td><input type="button" id="8" value="8" style="width:100%; height:70px" onclick="add('8')"/></td>
<td><input type="button" id="9" value="9" style="width:100%; height:70px" onclick="add('9')"/></td>
<td rowspan="2"><input type="button" id="addition" value="+" style="width:100%; height:140px" onclick="add('+')"/></td>
</tr>
<tr>
<td><input type="button" id="4" value="4" style="width:100%; height:70px" onclick="add('4')"/></td>
<td><input type="button" id="5" value="5" style="width:100%; height:70px" onclick="add('5')"/></td>
<td><input type="button" id="6" value="6" style="width:100%; height:70px" onclick="add('6')"/></td>
</tr>
<tr>
<td><input type="button" id="1" value="1" style="width:100%; height:70px" onclick="add('1')"/></td>
<td><input type="button" id="2" value="2" style="width:100%; height:70px;" onclick="add('2')"/></td>
<td><input type="button" id="3" value="3" style="width:100%; height:70px;" onclick="add('3')"/></td>
<td rowspan="2"><input type="button" id="result" value="=" style="width:100%; height:140px;" onclick="add('=')"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="0" value="0" style="width:100%; height:70px;" onclick="add('0')"/></td>
<td><input type="button" id="dot" value="." style="width:100%; height:70px;" onclick="add('.')"/></td>
</tr>
</table>
</body>
</html> |
cs |
# 계산 후 다른 페이지로 값 넘기기.
- 자바스크립트에서 return은 두가지 의미가 있다.
1. 값을 반환한다
2. 자바에서 while문에서 break와 같은 의미, 밑에 있는 것들은 더이상 수행하지 않고 끝내버린다.
자바는 다른 프로젝트에 있는 파일을 참조할 수 없지만, JSP는 가능하다.
아래 코드에서 jsp문법이라고는
|
1 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> |
cs |
밖에 사용되지 않았다. 이말인 즉슨, html을 이용한 이벤트 제어 방식을 배운것이지 사실상 jsp는 아니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function add(str) {
var display = document.getElementById('display');
if( str == "+" || str == "-" || str =="*" || str == "/" ) {
document.getElementById("f").value = display.value;
display.value = "0";
return;
}
else if ( str == "=" ) {
document.getElementById("s").value = display.value;
display.value = "0";
// calc3.jsp 로 데이터를 보낸다.
document.getElementById("calcForm").submit();
}
if( display.value == 0 ) {
display.value = "";
}
display.value += str;
}
</script>
</head>
<body>
<input type="text" id="display" value="0" style="width:300px; height:50px;" />
<form id="calcForm" method="post" action="/AA_HelloJSP/calc3.jsp">
<input type="text" id="f" name="f" />
<input type="text" id="s" name="s" />
</form>
<table border="1" width="300" height="300">
<tr>
<td colspan="2"><input type="button" id="division" value="/" style="width:100%; height:70px;" onclick="add('/')" /></td>
<td><input type="button" id="multiplication" value="*" style="width:100%; height:70px;" onclick="add('*')"/></td>
<td><input type="button" id="subtraction" value="-" style="width:100%; height:70px;" onclick="add('-')"/></td>
</tr>
<tr>
<td><input type="button" id="7" value="7" style="width:100%; height:70px" onclick="add('7')"/></td>
<td><input type="button" id="8" value="8" style="width:100%; height:70px" onclick="add('8')"/></td>
<td><input type="button" id="9" value="9" style="width:100%; height:70px" onclick="add('9')"/></td>
<td rowspan="2"><input type="button" id="addition" value="+" style="width:100%; height:140px" onclick="add('+')"/></td>
</tr>
<tr>
<td><input type="button" id="4" value="4" style="width:100%; height:70px" onclick="add('4')"/></td>
<td><input type="button" id="5" value="5" style="width:100%; height:70px" onclick="add('5')"/></td>
<td><input type="button" id="6" value="6" style="width:100%; height:70px" onclick="add('6')"/></td>
</tr>
<tr>
<td><input type="button" id="1" value="1" style="width:100%; height:70px" onclick="add('1')"/></td>
<td><input type="button" id="2" value="2" style="width:100%; height:70px;" onclick="add('2')"/></td>
<td><input type="button" id="3" value="3" style="width:100%; height:70px;" onclick="add('3')"/></td>
<td rowspan="2"><input type="button" id="result" value="=" style="width:100%; height:140px;" onclick="add('=')"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="0" value="0" style="width:100%; height:70px;" onclick="add('0')"/></td>
<td><input type="button" id="dot" value="." style="width:100%; height:70px;" onclick="add('.')"/></td>
</tr>
</table>
</body>
</html> |
cs |
form 안의 input type을 text가 hidden으로 하면 사용자에게 안보이게 데이터를 넘길 수 있다. 굉장히 많이 사용한다.
|
1
2
3
4 |
<form id="calcForm" method="post" action="/AA_HelloJSP/calc3.jsp">
<input type="hidden" id="f" name="f" />
<input type="hidden" id="s" name="s" />
</form> |
cs |
'프로그래밍 > JSP' 카테고리의 다른 글
| 코드 리뷰하는 방법, jsp 규칙, 색상찾는 사이트 (0) | 2016.02.03 |
|---|---|
| [4] jsp를 이용해서 심플 게시판 만들기 (0) | 2016.02.02 |
| [2] JSP기초_요약 (0) | 2016.02.02 |
| [2] JSP 기초_심플 계산기 만들기 (0) | 2016.02.01 |
| [2] JSP 기초_프로젝트 생성하기 (0) | 2016.02.01 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- aop
- mongo db
- MVC
- 포스팅하기
- Erwin
- er다이어그램
- intent
- ERD
- jQuery
- 뒤로가기 버튼
- spring
- 글쓰기 버튼
- 제이쿼리
- Linear Layout
- 뉴스피드 가져오기
- 클래스
- 메뉴바에 버튼 생성하기
- facebook 연동
- JSP
- Relative Layout
- 자바프로그래밍
- 메소드
- 예외처리
- activity
- 게시판 만들기
- 배열
- query
- 쿼리
- mybatis
- sql
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
글 보관함