기본 이벤트 제거
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>기본 이벤트 제거</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <style> * { margin:5px; padding:5px; border:3px solid black; } </style> <script type="text/javascript"> $(function(){ $('a').click(function(event){ $(this).css('background-color', 'blue'); //기본 이벤트 제거 //return false; 써도 됨 event.preventDefault(); }); }); </script> </head> <body> <h1> <a href="http://www.naver.com">네이버</a> </h1> </body> </html> | cs |
이벤트 전파 제거
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트 전파 제거</title> <style> * { margin:5px; padding:5px; border:3px solid black; } </style> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ $('h1').click(function(){ $('h1').click(function(){ $(this).css('background-color', 'yellow'); }); $('p').click(function(){ $(this).css('background-color', 'pink'); //이벤트 전파제거 event.stopPropagation(); }); }); }); </script> </head> <body> <h1 id="header">header <p id="paragraph">Paragraph</p> </h1> </body> </html> | cs |
이벤트 제거 처리를 안하면 Paragraph 를 클릭해도 Header부분의 색깔이 변경
이벤트 제거 처리후 Pragraph 영역의 색깔만 변한다
동적으로 만드는 태그를 통해 연결이 필요시 on method를 사용한다
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>미래에 만들어질 태그에 이벤트 연결</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //현재의 태그와 미래의 태그 모두 이벤트 연결 $(document).on('click', 'h1', function(){ var length = $('h1').length; //h1태그의 갯수 var targetHTML = $(this).html(); //기존 데이터 뒤에 새로 만들어진 데이터를 삽입 $('#wrap').append('<h1>'+length+ ' - ' + targetHTML+ '</h1>'); }); }); </script> </head> <body> <div id="wrap"> <h1>Header</h1> </div> </body> </html> | cs |
AJAX
굉장히 빠르다는 느낌으로 페이지를 부분적으로 처리 가능
구글이 전폭적으로 AJAX 를 활용한 후 전세계에 활성화
비동기 통신과 전체적인 페이지를 다시 로딩해야 하는 경우를 구분하여 페이지 작성
데이터를 받는 페이지
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> //AJAX(Asynchronous Javascript And XML) : 자바스크립트와 XML을 이용한 비동기 통신 $(function(){ //text 정보 일기 // URL 옵션 $.ajax('myFirstStringAction.jsp', { //통신이 성공해서 서버에서 데이터 전송된 경우 success:function(data){ //data : 서버에서 전송된 데이터 //body에 전송된 데이터를 추가 $('body').append(data); } }); }); </script> </head> <body> </body> </html> | cs |
데이터 받아올 서버 myFirstStringAction.jsp
1 2 3 | <%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> Hello JSP!! | cs |
데이터를 보내고 받기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //데이터를 서버로 전송한 후 서버에서 데이터 전달 받기 $.ajax({ //호출 URL url:'myFirstParamAction.jsp', // 요청 URL data: {name: 'dragon', age:21}, //서버쪽에 전달할 데이터 success: function(data){ // 서버의 응답이 성공 했을때 호출 $('body').append(data); } }); }); </script> </head> <body> </body> </html> | cs |
myFirstParamAction.jsp
1 2 3 4 5 6 7 8 9 | <%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> <% String name = request.getParameter("name"); String age = request.getParameter("age"); %> 이름 : <%= name%>, 나이 : <%= age %> | cs |
XML 통신
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //XML 데이터를 읽어 옴 $.ajax('myFirstXMLAction.jsp',{ success:function(data){ $(data).find('person').each(function(){ //find 메소드를 이용해서 태그에 접근 var name = '<li>' + $(this).find('name').text() + '</li>'; var job = '<li>' + $(this).find('job').text() + '</li>'; var age = '<li>' + $(this).find('age').text() + '</li>'; $('body').append('<ul>' + name + job + age + '</ul>'); }); // 각각의 배열을 접근하여 person 을 찾음 } }); }); </script> </head> <body> </body> </html> | cs |
서버 - myFirstXMLAction.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> <?xml version="1.0" encoding="UTF-8"?> <people> <person> <name>강호동</name> <job>MC</job> <age>45</age> </person> <person> <name>유재석</name> <job>MC</job> <age>44</age> </person> </people> | cs |
JSON 을 활용해 데이터 받기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> //JSON: Java Script Object Notation //XML에 비해 용량이 반으로 줄어들어 더 빠르게 데이터 전송 가능 //JSON은 JSON 전용 데이터 메소드가 있어 바로 처리 가능 $(function(){ $.getJSON('myFirstJSONAction.jsp', function(data){ $(data).each(function(index, item){ var output = ''; output += '<div>'; output += '<h1>'+ item.name+'</h1>'; output += '<p>'+ item.job+'</p>'; output += '<p>'+ item.age+'</p>'; output += '</div>'; $('#output').append(output); }); }); }); </script> </head> <body> <div id="output"></div> </body> </html> | cs |
데이터 서버 페이지 - myFirstJSONAction.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> [ { "name": "강호동", "job": "MC", "age": 30 }, { "name": "유재석", "job": "MC", "age": 50 } ] | cs |
데이터베이스에서 데이터 가져오기
JDBC 드라이버 파일을 다운받아 WEB-INF -> lib 폴더에 넣는다
ojdbc14.jar'App Development > Hybrid Programming' 카테고리의 다른 글
| 특강 4일차 (오전) - JQuery Mobile (0) | 2015.01.08 |
|---|---|
| 특강 3일차 (오후) - AJAX, JQueryMobile (0) | 2015.01.07 |
| 특강 2일차 (오전, 오후) - 제이쿼리 (0) | 2015.01.06 |
| 특강 2일차 (오전) - 자바스크립트 (0) | 2015.01.06 |
| 특강 1일차 (오후) (0) | 2015.01.05 |