button  꾸미기! (hover효과 주기)

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.submit{ 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; 
background: white;}
.submit:hover {
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; 
background: black;
color: white;
}
</style>
</head>
<body>
<input type="submit" class="submit" value="글쓰기">
</body>
</html>

 

설명 

border-위치-radius

위치에 둥그런 효과

background

배경색 지정

color

글자색 지정

접근객체: hover

tag명, id명, class명 다 가능하다!

button모양의 input type이면 다 사용할 수 있다.

hover란 해당 블럭에 마우스를 올려놨을 때이다.

 

실행화면

 

 

 

우선 Open scrapbook to edit SQL statements에서 테이블을 추가한다.

코드 입력 후 Alt + C 

SQL Results에 succeeded 문구가 떠야 테이블이 생성된 것이다.

테이블 생성 후 src 폴더에 저장해준다.
JDBC 사용을 위해 ojdbc6.jar파일도 lib에 추가해 준다.

 

 

DB와 연동할 Class 예시

package main;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.sql.Statement;

public class JdbcConnect {
	
	public JdbcConnect() {
		
		try { 
			Class.forName("oracle.jdbc.driver.OracleDriver");
			System.out.println("Driver Loading Success");
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
	}
	
	public Connection getConnection() { // 커넥션 해주는 역할, DB객체
		
		Connection conn = null;
		
		try {
			conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "hr", "hr");
			System.out.println("Oracle Connection Success!!");
		} catch (SQLException e) {
			 System.out.println("DB를 연결하지 못했습니다");
		}
		return conn;
	}
	// 첫번째 방법
	public int insertData(String id, String name, int age) {
		// Query문을 준비
		
		String sql =  " INSERT INTO USERTEST(ID, NAME, AGE, JOINDATE) "
	               +  " VALUES('" + id + "','" + name + "'," + age + ", SYSDATE) ";
   
		
		System.out.println(sql);
		
		// DB Connection
		Connection conn = getConnection();
		Statement state = null;
		int count = 0;
		
		// DB Processing (처리)
		try {
			state = conn.createStatement();
			count = state.executeUpdate(sql);
			
			System.out.println("성공적으로 추가되었습니다.");
			
		} catch (SQLException e) {
			e.printStackTrace();
			
		} finally {
			// DB close 필수!
			 // 접속이 된 것
			try {
				if(state != null) {
					state.close();
				}
				if(conn != null) {
					conn.close();
				}
			} catch (SQLException e) {
				e.printStackTrace();
			
			}
		} 
		return count;
	}
	// 두번째 방법
	public boolean userInsert(String id, String name, int age) {
		String sql = " INSERT INTO USERTEST(ID, NAME, AGE, JOINDATE) " 
				   + " VALUES(?, ?, ?, SYSDATE) ";
		
		Connection conn = getConnection();
		PreparedStatement psmt = null;
		
		int count = 0;
		
		try {
			psmt = conn.prepareStatement(sql);
			// 첫번째, 두번째, 세번째 데이터를 넣기
			psmt.setString(1, id); 
			psmt.setString(2, name); 
			psmt.setInt(3, age);
			count = psmt.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			// DB close 필수!
			 // 접속이 된 것
			try {
				if(conn != null) {
					conn.close();
				}
				if(psmt != null) {
					psmt.close();
				}
			} catch (SQLException e) {
				e.printStackTrace();
			
			}
		}
		return count > 0 ? true : false; 
	}
}

 

설명

중간중간 나타나는 프린트문은 잘 실행이 되고 있는지 확인하기 위한 깃발이다.(없어도 되는 코드긴 하지만, 어디서 에러가 났는지 확인을 위한 중요한 코드이다.)

 

Class.forName("oracle.jdbc.driver.OracleDriver");

오라클 드라이버가 있는지 확인을 해준다. (lib에 ojdbc6.jar 있는지 확인)

 

Connection

특정 데이터베이스와의 연결(세션)을 해주는 인터페이스이다 . SQL 문이 실행되고 연결 컨텍스트 내에서 결과가 반환된다. - DB 연결

DriverManager.getConnection("jdbc:oracle:thin:@localhost:xe", "hr", "hr")

getConnection(String url)

SQLException 발생 주어진 데이터베이스 URL에 대한 연결 설정을 시도한다.

 

  • 데이터베이스 URL가져오기

Open Perspective 클릭 후 Database Development 클릭 후 Open 클릭한다.

(이미지 생략 선행글에 작성되어있다.)

New Oracle 클릭 후 Properties 클릭

 

Driver Properties 클릭! Connection URL이다. (필자의 ip주소는 가림 처리하였다..)

 

 

첫번째 방법은 현재 많이 사용하지 않는다고 한다. 그래도 혹시 모르니 눈에 담아 두기로 하자!

 

String sql =  " INSERT INTO USERTEST(ID, NAME, AGE, JOINDATE) "
	               +  " VALUES('" + id + "','" + name + "'," + age + ", SYSDATE) ";

Query문을 준비한다.

Query문의 ""안에 맨 앞과 맨 뒤는 떨어뜨려야 오류가 발생하지 않는다.

 

createStatement()

SQL 문을 데이터베이스로 보내기 위한 Statement 객체를 생성하며, 파라미터가 없는 SQL 문은 일반적으로 Statement 객체를 사용하여 실행된다. (DB의 초기화라고 한다..)

SQLException이 발생한다.

executeUpdate()

INSERT, UPDATE 또는 DELETE 문이나 아무것도 반환하지 않는 SQL 문 (예 : SQL DDL 문) 일 수 있는 지정된 SQL 문을 실행한다.

실제 DB에 데이터를 적용하는 부분이다.
반환타입이 int형이다. 0이 넘어오면 정상추가 안된 것이다.

SQLException이 발생한다.

 

필수 실행사항 !

close() : Databasa 꼭! 닫아주기

DB Server는 클라이언트가 30명 이상 접속 시 무거워지기 시작한다.

DB Server는 접속이 이루어지면 데이터를 가지러 가서 데이터를 가지고 나온 후 바로 접속을 끊어버린다.

접속을 끊는 역할을 close()가 해준다.

 

return값으로 count를 넣어준다.

제대로 추가가 되었다면 count값이 증가한다.

 


두번째 방법이 현재 실무에서 많이 사용되는 예시라고 한다.

String sql = " INSERT INTO USERTEST(ID, NAME, AGE, JOINDATE) " 
				   + " VALUES(?, ?, ?, SYSDATE) "; 

Query문을 준비한다. 첫번째 방법과 좀 다르다.

?로 하면 자동으로 ""를 붙여준다.

PreparedStatement

SQL문은 미리 컴파일되어 PreparedStatement 개체에 저장된다. 그런 다음이 개체를 사용하여 이 구문을 여러 번 효율적으로 실행할 수 있다. (Statement의 업그레이드버전) - Query문을 실행

setString

지정된 매개 변수를 주어진 Java String 값으로 설정한다. 드라이버는 데이터베이스로 전송할 때 SQL VARCHAR2 값으로 변환한다.

매개변수는 Query문 첫번째 ? : 1, 두번째 ? : 2, 세번째 ? : 3 ... n번째 ? : n 이 된다.

SQLException이 발생한다.

setInt

지정된 매개 변수를 지정된 Java int 값으로 설정한다. 드라이버는 데이터베이스로 보낼 때 SQL INTEGER 값으로 변환한다.

매개변수는 Query문 첫번째 ? : 1, 두번째 ? : 2, 세번째 ? : 3 ... n번째 ? : n 이 된다.

SQLException이 발생한다.


MainClass 예시

package main;

public class MainClass {
	public static void main(String[] args) {

		 JdbcConnect jc = new JdbcConnect();
		
	//	jc.getConnection(); // DB에서 문서를 꺼내올 수 있다.
		
		 int count = jc.insertData("aaa", "홍길동", 24);
		 
		 if(count > 0 ) {
			 System.out.println("추가되었습니다.");
		 }
		 
		 boolean b = jc.userInsert("bbb", "성춘향", 16);
		 
		 if( b == true) {
			 System.out.println("성공적으로 추가되었습니다.");
		 }
	}
}

 

실행 시 이클립스 console출력 문구

Driver Loading Success
 INSERT INTO USERTEST(ID, NAME, AGE, JOINDATE)  VALUES('aaa','홍길동',24, SYSDATE) 
Oracle Connection Success!!
성공적으로 추가되었습니다.
추가되었습니다.
Oracle Connection Success!!
성공적으로 추가되었습니다.

Ajax에서 servlet 접근해서 데이터 가져오기

 

배워 놓고도 너무 어려워서 참고용으로 코드만 업로드 하겠다...

 

Ajax 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<button type="button">클릭</button>
<!-- html의 Ajax에서 서블릿 접근해서 데이터 가져오기 -->
<script type="text/javascript">
$(function() {
	$("button").click(function() {
		$.ajax({
			url : "./hello",  // ./ 현재경로표시
			type : "get",
		//	data : "id=abc&pwd=123",
			data : { id:"ABC", pwd:"456"}, // 이 값을 가지고 servlet으로 간다.
			
		// 매우중요!!	
			success : function(data) { // Ajax 목적 : data를 얻기 위함
		//		alert('success');
		//		alert(data);
		//		alert(JSON.stringify(data));// 날린 데이터 확인
		
		//  1개 데이터
		//		alert(data.str); 
		
		// 	여러개 데이터
		//		alert(data.map.title); 		// 날린 데이터 확인
		//		alert(data.map.content);
		
		//	Dto데이터 날리기
		//		alert(data); // object날라옴
		//		alert(JSON.stringify(data)); // json데이터 날라옴
		//		alert(data.list);
				alert(data.list[0].number); // 날린 데이터 확인
				alert(data.list[0].name);
		// for문과 foreach문 사용해서 데이터 전체를 뽑을 수 있다.		
		
			},
			errer : function() {
				alert('errer');
			}
		});
	});
});
</script>

</body>
</html>

 


java MemberDto 예제

package dto;

public class MemberDto {
	private int number;
	private String name;
	
	public MemberDto() {}

	public MemberDto(int number, String name) {
		super();
		this.number = number;
		this.name = name;
	}

	public int getNumber() {
		return number;
	}

	public void setNumber(int number) {
		this.number = number;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

Java Servlet 예제

package hello;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dto.MemberDto;
import net.sf.json.JSONObject;

public class HelloServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("HelloServlet doGet()");
	
		String id = req.getParameter("id"); // ajax는 파라미터가 보이지 않는다.
		String pwd = req.getParameter("pwd"); 
		
		System.out.println("id  : " + id);
		System.out.println("pwd : " + pwd);
		
		// java로 넘긴건 JS로 넘기는게 어렵다... get.Attribute사용불가
		
		String str = "World";
		
		JSONObject jobj = new JSONObject();
		// 문자열 전송
	//	jobj.put("str", str);
		
		// 복수(여러개의)의 데이터 전송
		HashMap<String, Object> map = new HashMap<String, Object>();
	//	map.put("title", "이것은 제목입니다");
	//	map.put("content", "이 글의 내용입니다");
		
	//	jobj.put("map", map);
		
		
		// dto를 list로 전송
		List<MemberDto> list = new ArrayList<MemberDto>();	
		list.add(new MemberDto(1001, "정수동"));
		list.add(new MemberDto(1002, "홍두께"));
		
		jobj.put("list", list);
		
		resp.setContentType("application/x-json; charset=utf-8");
		resp.getWriter().print(jobj); // 전송이 되는 부분
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("HelloServlet doPost()");
	
	}
	
	public void doProcess() {} // get, post 상관하기 싫을 때 사용	
}

AJAX로 DB 취합을 해보자!

 

DB 예시(data.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// 가정 : DB, 데이터를 취합
String name = "성춘향";
int age = 16;
String birth = "09/03/12";

String json = "{ \"name\":\"" + name + "\", \"age\":" + age + ", \"birth\":\"" + birth + "\" }"; 

// System.out.println(json);  // 이클립스 콘솔에 찍어보기

out.println(json);
%> 

 

AJAX DB취합 예시

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

name : <p id="name"></p>
age : <h3 id="age"></h3>
birth : <input type="text" id="birth">
<br><br>
<button type="button">클릭</button>

<script type="text/javascript">
$(document).ready(function (){
	$("button").click(function(){
		$.ajax({
			url : "data.jsp",
			type : "get",
			success : function(data){
			//	alert('success');
			//	alert(data); // json이 아니다
				
				let json = JSON.parse(data); // String -> json
			//	alert(json); 
			
			// 데이터 가져오기	
				$("#name").text(json.name);
				$("#age").html(json.age);
				$("#birth").val(json.birth);
			},
			error : function() {
				alert('error');
			}
		});
	});
});
</script>
</body>
</html>

설명

url을 data.jsp로 연결하여 String 이였던 데이터를 json형태로 변환하여 데이터를 가져온다.

 

버튼 클릭 전 실행화면

버튼 클릭 후 실행화면

 

AJAX 사용하여 JSON 데이터 출력하기

 

JSON 데이터 예시

[
	{
		"name":"홍길동",
		"age":24,
		"address":"서울시",
		"phone":"123"
	},
	{
		"name":"성춘향",
		"age":16,
		"address":"남원시",
		"phone":"234"
	},
	{
		"name":"홍두께",
		"age":22,
		"address":"강릉시",
		"phone":"345"
	}
]

 

AJAX 사용예시

<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<p id="demo"></p><br>
<button type="button">클릭</button>
<!-- json 불러서 p태그에 넣기 -->
<script type="text/javascript">
$(document).ready(function() {
	$("button").click(function() {
		$.ajax({
			url : "data.json", // 어디로 갈거니? // 갈 때 데이터
			type : "get", // 타입은 뭘 쓸거니?
			datatype : "json",
			success : function(data) { // 갔다온 다음 결과값
			//	alert('seccuss');	// 나오면 파일을 찾았다는 것
			//	alert(data);  // [object Object],[object Object],[object Object]
				
			// 데이터를 확인하고 싶을 때.
			//	let str = JSON.stringify(data); // <> parse()
			//	alert(str); 

				$.each(data, function(index, item) { // 데이터 =item
					$("#demo").append(index + " "); // index가 끝날때까지 
					$("#demo").append(item.name + " ");
					$("#demo").append(item.age + " ");
					$("#demo").append(item.address + " ");
					$("#demo").append(item.phone + "<br>");
				});
			},
			error : function() {
				alert('error');			
			}
		});
	});
});
</script>
</body>
</html>

$.each(data, function(index, item)

jQuery의 반복문이다.

첫번째 인자로 index를 주고 두번째 인자로 item(콜백함수)을 준다.

index를 기준으로 반복을 한다.

선택요소에 append함수를 사용하여 값을 추가한다.

 

버튼 클릭시 실행화면

Ajax(Asynchronous JavaScript And Xml) 이란 ?

Ajax는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 위키백과

 

쉽게 말해서..

현재 데이터를 전송해주고 전송받고 하는 도중 웹페이지는 변경이 되지 않는다.

JQuery 소속이다.

없어도 되지만 없으면 불편하다(없으면 속도가 느려진다.)

비동기 통신방식이다.

매우 효율적이다.

 

Axios : 다른 언어에서 사용하는 AJAX (Vue, React)

 

비동기란 ?

현재 문서는 변경되지 않는 상태에서 데이터만 가져오는 것 페이지가 가볍다.

페이지의 전체가 바뀌지 않는다.

 

Ajax의 기본문법 예시

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<p id="demo"></p><br>
<button type="button">클릭</button>

<script type="text/javascript">
$(document).ready(function() {
	$("button").click(function() {
		$.ajax({ // ajax 기본형태
			//////////////////// send(가는것)
			url : "data.jsp",
			type : "get",
		//	data : "t1=XYZ&t2=자차카", // 넘겨주는 데이터
			data : {t1:"xyz", t2:"가나다"}, //위와동일

			//////////////////// recv
			success : function(data, status, xhr){ // status, xhr 생략가능 

			//	alert("success"); // 성공하면  success
			//	alert(data);
			
				$("#demo").html(data);
			//	alert(status);  // 상태를 반환한다 (success)
			//	alert(xhr.responseText); // html문서 형태 전체를 출력한다.
			},
			error : function(xhr, status, error) { // (파라미터 생략가능)
				alert("error");
			},
			complete : function(xhr, status) { // (파라미터 생략가능)
				alert("통신종료");
			}
			////////////////////
		});	
	});
});

</script>

 

JQuery 소속이기 때문에 ajax 작성시 jquery.min.js script문은 필수이다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jquery에서 재공하는 $.ajax()메서드를 사용한다.

url : 이동할 url (필수 요소이다.)

type

전송방식 get과 post가 있다.

get은 전송시 입력파라미터가 url에 같이 넘어가고

post는 head부에 감추어서 입력파라미터가 url로 넘어가지 않는다.

data : 요청시 파라미터로 넘어갈 문자열 또는 객체를 작성한다.

success : 요청이 성공했을 때 실행된다.

error : 요청이 실패했을때 실행된다.

complete : 요청의 성공과 실패의 상관없이 실행된다. ( == java의 finally와 비슷하다.)

 

 

url 예시 (data.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
t1=<%=request.getParameter("t1") %><br>
t2=<%=request.getParameter("t2") %>
</body>
</html>

 

실행화면

클릭 후 오른쪽화면으로 변경됩니다.

내장객체 이동성 메서드 종류 

response.sendRedirect()

pageContext.forward()

 

 

 

우선 java class를 선언하겠다.

package test;

public class TestClass {
	private String text;
	
	public TestClass() {}

	public TestClass(String text) {
		super();
		this.text = text;
	}
	public String getText() {
		return text;
	}
		this.text = text;
	}
}

위 class는 String text의 setter와 getter 그리고 파라미터로 text를 받는 생성자만 넣은 간단한 class이다.

 

위 코드의 생성자 파라미터를 받아 이동하여 페이지에 출력해주는 예제를 들어보겠다.

 

sendRedirect 예시

<%@page import="test.TestClass"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
TestClass cls = new TestClass("send");
session.setAttribute("test", cls);
// 위와 동일
// request.getSession().setAttribute("test", cls);

response.sendRedirect("send_ex2.jsp");
%>
</body>
</html>

 

send_ex2.jsp 예시

<%@ page import="test.TestClass" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
TestClass cls = (TestClass)session.getAttribute("test");
%>

<h3>TestClass 넘어온 Text : <%=cls.getText() %></h3>
</body>
</html>

설명

session.setAttribute에 값을 저장

response.sendRedirect로 이동한다.

 

sendRedirect는 request.setAttribute로 값을 저장하여 가지고 갈 수 없다.

session.setAttribute(String name, Object value) 

첫 번째 파라미터 찾을 이름, 두 번째 인수에 객체명을 지정한다.

session.getAttribute(String name)

파라미터에 setAttribute에 지정해놓은 찾을 이름을 지정한다.Object로 넘어오기 때문에 형변환은 필수이다.

 

 

 

실행화면

 


forward 예시

<%@page import="test.TestClass"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
TestClass cls = new TestClass("forward");
request.setAttribute("test", cls);

pageContext.forward("forward_ex2.jsp");
// 위와 동일
// request.getRequestDispatcher("forward_ex2.jsp").forward(request, response); 
%>
</body>
</html>

 

forward_ex2.jsp 예시

<%@page import="test.TestClass"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
TestClass cls = (TestClass)request.getAttribute("test");
%>

<h3>TestClass 넘어온 Text : <%=cls.getText() %></h3>
</body>
</html>

설명

request.setAttribute에 값을 저장 

pageContext.forward로 이동한다.

request.setAttribute(String name, Object value) 

첫 번째 파라미터 찾을이름, 두 번째 인수에 객체명을 지정한다.

request.getAttribute(String name)

파라미터에 setAttribute에 지정해놓은 찾을 이름을 지정한다.

Object로 넘어오기 때문에 형변환은 필수이다.

 

실행화면

 

session.setAttribute와 request.setAttribute의 차이점

session은 저장을 해서 가져가는 것이기 때문에 request에 비해 무겁다.

request는 단타성, 일회성이다.

 

form tag 사용하여 입력값 넘기기

 

데이터를 넘기는 jsp 예시1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="insertAf.jsp">

아이디&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="id" name="id" size="20" placeholder="id입력"><br>
패스워드&nbsp;&nbsp;
<input type="password" id="pwd" name="pwd" size="20" placeholder="pw입력"><br><br>

취미<br> <!-- id접근법 확인  -->
<input type="checkbox" id="hobby1" name="hobby" value="잠자기">잠자기
<input type="checkbox" id="hobby2" name="hobby" value="노래하기">노래하기
<input type="checkbox" id="hobby3" name="hobby" value="게임하기">게임하기<br><br>

연령대
<input type="radio" id="age" name="age" value="10대" checked="checked">10대
<input type="radio" id="age" name="age" value="20대">20대
<input type="radio" id="age" name="age" value="30대">30대
<input type="radio" id="age" name="age" value="40대">40대
<input type="radio" id="age" name="age" value="50대">50대
<input type="radio" id="age" name="age" value="60대 이상">60대 이상<br><br>

기타 하고싶은 말<br>
<textarea rows="10" cols="30" id="massage" name="massage"></textarea><br>

<input type="submit" value="전송">
<input type="reset" value="취소">

</form> 
</body>
</html>

설명

submit 버튼을 누르게 되면 insertAf.jsp로 이동하게 된다.

 

실행화면


데이터를 넘기는 jsp 예시 2

.. 위 예시와 동일 ..
<body>

<form id="frm">
.. 위 예시와 동일 ..
<textarea rows="10" cols="30" id="massage" name="massage"></textarea><br>

<button type="button" id="send">전송</button>
</form>
<script type="text/javascript">
$(document).ready(function(){
	$("#send").click(function(){
		
		if($("#id").val() == ''){
			alert("id를 입력해주세요");
			return;
		}
		$("#frm").attr("action", "insertAf.jsp"); // attribute setting
		$("#frm").submit();
	});
});
</script>

설명

send를 클릭할 경우 form의 action 속성을 추가하고, 값으로 연결할 jsp파일명.jsp를 넣는다.

submit()를 호출하여 전송한다.

submit()

form tag의 전송 이벤트 함수이다.

 

실행화면

 

데이터를 받는 jsp예시(insertAf.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String hobby[] = request.getParameterValues("hobby");

String age = request.getParameter("age");
String massage = request.getParameter("massage");

out.println("id : "+ id +"<br>");
out.println("pwd : "+ pwd +"<br>");
if(hobby != null && hobby.length > 0){
	for(int i = 0; i < hobby.length; i++){
		out.println("hobby : "+ hobby[i] +"<br>");
	}
}
out.println("age : "+ age +"<br>");
out.println("massage : "+ massage +"<br>");
%>    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

설명

내장함수 설명 글로 설명은 대체하겠다.

실행화면

 

테이블을 사용하여 구구단 작성하기

(새로고침 시 테이블의 행과 열이 증가해가는 페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%!	int size = 0; %>
<%	size++; %>

<table border="1">
	<% for(int i=1; i<size; i++){ %>
	<tr>
		<% for(int j=1; j<size; j++){ %>
			<td><%=i %>x<%=j %>=<%=i*j %>
		<% } %>
	</tr>
	<% } %>
</table>
</body>
</html>

 

설명

새로고침 할 때마다 증가를 시켜주기 위해선 전역변수를 잡아 주고 scriptlet에서 값을 증가 시켜준다.

table을 잡아주고 이중for문을 사용하는데 이때 i는 size보다 작아야 한다.(size는 새로고침 시마다 1씩 증가한다.)

td tag에 구구단을 넣기 위해 표현식을 사용한다.

변수 선언 후 페이지 새로고침 될 때마다 1씩 값 증가시키기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%! int num; %>
<%  num++;   %>
<h3>num : <%=num %></h3>

</body>
</html>

 

아주 간단한 문제이다.

 

선언부에 전역변수를 선언 후

scriptlet에서 변수를 증가시켜준다.

 

+ Recent posts