#2일차 ( jQuery 와 JSP 맛보기)
(1일자 보다 먼저 포스팅을 하네요 =_=)
1일차에는 셋팅위주였고 2일차부터는 조금씩 맛을 보고 있습니다.
전체 15일과정이라서 시간이 그리 길지않은데.. 전반적으로 맛만 보는게 아닌지 살짝 걱정입니다.
JQuery 와 JSP는 모두 웹페이지에서 작동하는 프로젝트입니다.
그러므로 당연히 웹사이트가 구축이 되어있어야하구요 1일차에서 설치한 톰캣을 이용해야겠네요
프로젝트생성 : Dynamic WebProject
프로젝트네임 : jQueryDemo
컨텍스트네임 : jd
먼저 Java코드를 실행할 수 있는 JSP 파일을 생성해서 Java를 사용해봅니다.
WebContent 폴더에 "memo.jsp" 파일을 생성하도록 합니다.
(Webcontent 폴더에 마우스 우클릭 "New" -> "JSP File"을 클릭합니다.)
예제) 1부터 10까지 덧셈
<%
//1 부터 10까지 덧셈
int sum=0;
for(int i=1;i<=10;i++) {
sum += i;
}
%>
<%=sum%>
참 단순하네요.. <% 와 자료형(int) 을 제외하면 php코드로 만든것과 별반차이가 없습니다.
(둘다 C를 기반으로하니.. 문법이 동일합니다.)
위코드드는 "memo.jsp" 파일의 <body></body> 태그내에 존재하면됩니다.
기본생성된 "memo.jsp" 파일에는 html 기본골격이 들어가 있습니다. 물론 body 내부는 비어있습니다.
그 body 안에 위의 코드를 넣고 테스트하시면됩니다.
"테스트를 하는 방법은 Ctrl+F11 (이클립스 실행단축키) 을 눌러스 실행을 하시거나 (이미 톰캣이 실행된 경우라면
웹 브라우저에 http://localhost:8080/컨텍스트이름 을 접속해보시기 바랍니다.
당연히 "55" 가 출력되겠죠?
오류가 난다면 해당 오류줄의 구문을 검사해보시기 바랍니다. 대부분 오타(?)일 것입니다.
활용) 자바코드를 별도의 java 클래스로 분리하기
위의 "memo.jsp" 파일의 <% %> 부분의 코드를 별도의 파일로 분리를 합니다.
코드는 코드별로 디자인은(html) 디자인별로? 관리하기 위함입니다. ^^
두코드가 섞여있으면 아무래도 관리가 더 힘드니까요 (PHP의 코드이그나이터 Controller 와 View 로 분리하듯이!)
먼저 처음 생성하는 클래스이므로 먼저 패키지를 생성해야합니다.
(Java Resource -> Src -> 마우스우클릭(New) -> Package)
패키지명은 bit.study 로 합니다 .(선생님꼐서 시키셨슴다!)
1부터10까지더하는 클래스는 TenHap 으로 작성을 합니다.
(Java Resource -> Src -> bit.study -> 마우스우클릭(New) -> Class)
생성을 하고나면 폴더구조는 다음과 같아집니다.
MemoDAO,DTO 파일은 이후 진행되는 과정에서 쓰이는 파일입니다.
(사진을 강습을 완료한 후에 작성하다보니 파일이 이미 있는겁니다. ^^)
"tenhap.java"
package bit.study;
public class TenHap {
///1부터 10까지 더한값을 반환합니다.
public int hap()
{
int sum=0;
for(int i=1;i<=10;i++) {
sum += i;
}
return sum;
}
}
"memo.jsp" 에 있던 1부터 10까지 더하는 함수부분만 위 파일로 붙여넣습니다.
함수명은 hap() 으로 처리했습니다. public int 이므로 외부공개된 함수이며 정수타입의 값을 반환합니다.
함수로 묶여있고 return 이 추가되었다는것을 뺴면 완전히 동일한 코드입니다.
"memo.jsp"
<%@page import="bit.study.*"%>
<%@ 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>
<%
//class 생성
TenHap h = new TenHap();
int sum=h.hap();
%>
<%=sum%>
</body>
</html>
메모파일에서는 해당 계산루틴이 제거되고 해당 클래스를 생성,사용하는 코드로 대체됩니다.
패키지네임을 생성하기 위해서 최상단에 import 를 하고있습니다. import 를 하지않으면
TenHap h = new TenHap(); 은 bit.stody.TenHap h = new bit.study.TenHap();
으로 변경되어야합니다. (너무 길어서 싫죠? 그래서 미리 import 를 하고 사용을 하는 것입니다)
[jQuery 체험]
jQuery를 사용해봅니다 .(사실 php때 많이 사용해봤으니 별 감흥은 없지만 ^^:;)
WebContext 에 "qt.html" 파일을 추가합니다.(지금부터는 별도 추가 그림 설명은 없습니다.!)
jQuery 를 이용해서 처리를 하는 것은 페이지의전환(refresh,redirect) 없이 동적으로 현재 보이는 페이지의 결과를 바꿀수 있다는 장점이 있기때문입니다. 어떤 언어를 해서 웹페이지를 작성하던지 jQuery의 사용은 많이 되는군요.
예제) 화면상 클릭버튼을 표시하고 클릭시에 메세지표시영역에 '안녕' 이라는 글자를 표시합니다.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//btn 아이템을 클릭시에 display 라는 id를 가진 개체의 내부문자열을 안녕으로 변경합니다.
$("#btn").click(function() {
$("#display").html("안녕");
});
});
</script>
<input type="button" id="btn" value="클릭" />
<div id="display">메세지표시영역</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
jQuery를 사용하기 위해서는 먼저 jQuery Script 을 로딩해야합니다.
jQuery개발사에서 파일링크를 지원하므로 해당 파일을 바로 링크하도록 하죠!
(하드디스크에 저장하고 직접 링크하셔도됩니다)
jQuery는 자바스크립트이므로 사용을 위해서는 <script></script> 영역에 구사합니다.
위 예제에서 $(document) $("#btn") 등의 코드를 보실수 있는데 이것이 jQuery 를 사용하는 문법입니다.
jQUery의 지정자는 기본 $로 되어있습니다 .(변경도가능합니다)
$(document).ready(function() {
위 코드는 정말 많이 사용하는 코드중 하나입니다.
페이지가 화면에 출력된후에 작업을 하고자할때 사용하는것이며 이벤트 개념으로 생각하시면되겠습니다
.Net 의 Form shown(?) 이벤트가 비슷한 이벤트가 되겠습니다 .(단 이 경우에는 페이지가 완료된후에 1번만 실행됩니다.)
문법이다보니 사용하는 방식을 그냥 "외우세요(많이쓰면 외워져요!)"
아무튼 문서(=document) 가 준비완료(=ready) 되면 실행되는 코드라고 생각하시기 바랍니다.
왜 이코드를 쓰는가 하면! 예를 들어 코드내에서 "AA"라는 개체를 쓴다고하면 Ready 이벤트가 아닌 상태인경우에는
해당 스크립트코드는 반드시 "AA"라는 개체가 만들어진후에 사용을 해야 오류가 나지않습니다.
보통 Script 을 상단에 쓰기떄문에 이런걸 감안하지 않으면 스크립트가 실행되는 시점에 개체가 없어서 오류가 나는 경우가 있습니다. (물론 똒똑한 브라우저가 모두 그렇지는 않은듯합니다. ㅋㅋ)
하지만..문서가 표시되는 시점에 해당 코드를 실행한다면(?) 네! 이미 모두다 로딩이 된 후이기 때문에
사용하는 개체가 페이지의 끝에 있고 스크립트가 페이지의 처음에 있더라도 오류가 없는것입니다.
$("#btn").click(function() { //ID가 btn 인 개체가 클릭되었을때 작동하라!
$("#display").html("안녕"); //ID가 display 인 개체의 내부 문자열을 '안녕'으로 변경해라
});
위 코드도 해석을 해볼까요?
먼저 #btn <- 이건 ID가 BTN인 개체를 의미합니다. 좀 생소하지만 이건 CSS의 셀렉터와 동일하다고 생각하세요!
CSS의 셀렉터를 그대로 이용할 수 있는데 jQuery 의 셀렉터입니다.
(사실 jQuery 의 셀렉터가 CSS 셀렉터보다 기능이 더 많습니다.
ID가 btn 은 개체는 페이지 하단쯤에 서술이 되어있습니다. = <input type="button" id="btn" value="클릭" />
(이름이 "클릭"으로 표시되어있는 버튼입력이군요?)
그리고 .click 이건 Event Binding 입니다!
여기서 이벤트란 뭔가의 행위인데 이경우에는 "클릭" 을 하는 행위자체를 의미합니다.
풀어쓰면 btn 을 클릭하면 무언가를 해라! <- 가 되겠네요.
[aJax] - jQuery 를 쓰면 아작스도 편해요!
$.ajax({
type:"post", //데이터전송방식
url:"memoInsert.jsp", //처리할대상 파일
data: data: { name: "John", location: "Boston" } //전송데이터
success: function(returnmsg) { //요청이 성공한경우
alert("Ajax OK" + returnmsg);
},
error: function(xmlRequest){ //에러발생시
alert(xmlRequest.status+"\n\r"+xmlRequest.statusText+"\n\t"+xmlRequest.responseText);
},
})
ajax는 위처럼 사용을 합니다. 왜 저렇게 쓰냐(?) 라고 물어신다면.. 제작자가 정한 룰 이기때문에 "그냥 쓰세요!"
(자세히 알고싶으시다면? : http://api.jquery.com/jQuery.ajax/)
원래 HTML은 페이지를 이동시킴으로 뭔가의 작업을 진행합니다. (페이지 불러와질떄 작업을 수행하기떄문에..)
하지만 ajax를 이용하면 페이지의 전환없이 해당 페이지를 내부적으로 실행해서 결과를 가져올 수 있습니다 사용자 입장에서는 현재 페이지내에서 작업이 이루어지는걸로 보이게되죠(일반 응용프로그램처럼)
ajax 가 출력하면 success(성공) error(실패) 이벤트는 url 에 지정한 페이지를 모두 처리했는지의 성공여부입니다. url이 잘못되어서 오류가 났거나 혹은 다른 이유로 해당 페이지를 불러오지 못한경우만 error 가나오며 그외의 경우는 success 가 일어납니다. 단 success 시에 해당 페이지에서 출력된 글자를 받아볼수도 있습니다.
현재 소스상의 returnmsg 인데. 개발자는 이 값을 가지고 추가 작업을 하면되겠습니다.
"내용이 길어져서 2일차는 2개의 포스팅을 합니다. ajax와 java를 이용해서 데이터베이스에 데이터를 넣는 작업을 합니다."
아직 Native Android Programming 하고는 ...거리가 멀다;;
'Information > Android' 카테고리의 다른 글
| [Android] Click Event,Toast,DialogMessage (0) | 2013.01.10 |
|---|---|
| [비트정보기술학원] Android 교육 2-2일차(DB기록) (2) | 2013.01.08 |
| [비트정보기술학원] Android 교육 1일차(개발환경구축) (0) | 2013.01.07 |
| [비트정보기술학원] Tomcat Context 등록(추가/삭제) (0) | 2013.01.07 |
| 명령어 및 사용법 모음 (0) | 2011.06.16 |
