티스토리 뷰
1. <table>
- 테이블의 구성요소
<table> 테이블 생성
<tr> row (한 줄)
<td></td> cell(한 칸)
</tr>
</table>
- <table>에 관련된 속성들
<table border="1" width="100%" height="300"> 경계선과 크기 설정하는 속성
"" 안에는 value가 들어간다.
width, height에 %값을 넣으면 인터넷 창 기준으로 크기가 변하며, 그냥 숫자 값을 입력하면 고정적인 픽셀값이다.
<table align="left" bgcolor = "yellow" frame="box"> 정렬, 배경색, frame 설정
창의 왼쪽으로 테이블을 정렬한다.
배경색은 bgcolor="red" bgcolor="#ff0000" bgcolor="rgb(255,0,0)" 세가지 형식으로 설정할 수 있다.
frame 을 box로 하면 테이블의 겉테두리만 생긴다. 이 외에도 above, below, hsides 등이 있다.
- <tr>, <td> 의 속성
<tr align = "center"> 가운데 정렬
<td clospan="2"> 옆으로 셀 병합
<td rowspan="2"> 아래로 셀 병합
- <input>
<script type="text/javascript">
function add(str) {
alert(str); //경고창을 띄울 때 사용
document.getElementById();
// 문서전체(document)에서 ID를 이용해 elemnet 하나 가져온다.(getElementById)
}
</script>
body 위에 script 작성
자바 스크립트에서는 return 타입이 없다.
3. <form>
다른 jsp와 연결 (id 로 자바스크립트에서 사용할 수 있다.)
<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>
action 으로 AA_HelloJSP 프로젝트에 있는 calc3.jsp로 넘어가도록 설정
input type을 "hidden"으로 설정하면 사용자에게 보이지 않는다.
name은 calc3.jsp에서 받을 수 있도록 그 파일에서 사용하는 이름을 똑같이 설정한다.
계산기
index.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 |
<%@ 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; //문서전체(document)에서 ID를 이용해 element하나 가져온다.(getElementById)
var display = document.getElementById('display');
if( str == "+" || str == "-" || str =="*" || str == "/" ) { // 자바스크립트에서 문자열 비교도 == 를 쓴다. (equal 쓰지않음)
document.getElementById("f").value = display.value;
display.value = "0";
return;
}
else if ( str == "=" ) {
document.getElementById("s").value = display.value;
display.value = "0";
document.getElementById("calcForm").submit(); // documney가 calc3.jsp로 보낸다.
/*
var f = document.getElementById("f").value;
var s = document.getElementById("s").value;
var result = parseInt(f) + parseInt(s);
//alert(result);
display.value = result;
return; // 반환한다.
*/
}
if ( display.value == 0 ) {
display.value = "";
}
display.value += str;
} //자바스크립트에서는 return 타입이 없다.
</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" /> <!-- calc3.jsp가 받을 수 있도록 f 와 s로 생성 -->
<!-- <input type="hidden" id="f" name="f"> 사용자에게 안보이게 만드는 것 -->
<input type="text" id="s" name="s" />
</form>
<table border="1" width="300" height="300" >
<tr align = "center">
<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 align = "center">
<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 align = "center">
<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 align = "center">
<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 align = "center">
<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 |
calc3.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 |
<%@ 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>
<%
// URL에 포함된 파라미터를 가져온다.
// URL의 파라미터는?(물음표)를 기준으로 가져올 수 있다.
// key = value 형태로 전달된다.
// 여러개의 파라미터가 전달 될 경우는 &로 연결한다.
// http://localhost:8080/HelloJSP/calc3.jsp?f=50&s=70
// request 는 URL에 포함된 정보를 가져올 때 쓰인다. (jsp안에 있는 내장개체)
String f = request.getParameter("f");
String s = request.getParameter("s");
int firstNumber = Integer.parseInt(f);
int secondNumber = Integer.parseInt(s);
int additionResult = firstNumber + secondNumber;
%>
<%= firstNumber %> + <%= secondNumber %> 의 결과는 <%= additionResult %> 입니다.
</body>
</html> |
cs |
결과화면
'BackEnd > JSP' 카테고리의 다른 글
| [JSP] JSTL, taglib (0) | 2016.02.05 |
|---|---|
| [JSP] JSTL 설치 (0) | 2016.02.05 |
| [JSP] JSP, Servlet ( forward, redirect ) (0) | 2016.02.03 |
| [JSP] list를 이용해서 table 만들기 , import (0) | 2016.02.02 |
| [JSP] 기본적인 JSP 사용법 (3) | 2016.02.01 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- algorithm
- restfb
- AlertDialog.Builder
- controller
- DFS
- REDIRECT
- sort
- 안드로이드 비콘
- 이클립스
- order by
- onPostExecute
- RequestMapping
- 예외처리
- INSERT
- Baekjoon Online Judege
- onBackPressed
- Spring
- boj
- 자바
- servlet
- maven
- 안드로이드 스튜디오
- indexOf
- java
- list
- mybatis
- BFS
- DP
- table
- 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 |
글 보관함