1
2
3
4
5
6
7
8
<script>
        $('span.chkAll').bin('click',function(){
//             $('input[type=checkbox].chkAll').click();
            $('input[type=checkbox].chkAll').trigger('click');
        }); //위에꺼는 ..span.chkAll 엘리먼트의 click이벤트에서
            //$('input[type=checkbox].chkAll')의 click메소드를 그냥실행
            //아래꺼는 실제 클릭 이벤트를 발생시킴
    });
cs

이벤트 연결함수

1. 각 이벤트 함수에 직접 연결

2. bind함수 이용 (1보다 유연, 이벤트 타입을 동적으로 지정)

3. live함수 이용 (동적으로 생성되는 요소에 사용) -> 1.9deprecated

4. on함수 이용 (동적으로 생성되는 요소에 사용) ->1.7부터 추가됨, bind,live 모두 통합하여 on으로 사용 권장


jquery 숫자만 입력

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    $(function(){
        $('#rrn1').on('keypress',function(event){
            if(event.which && 
                    (event.which > 47 && event.which < 58 
                            || event.which == 8)){
                
            }else{
                event.preventDefault();
return false;
            }
        })
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
39
40
41
42
43
<script>
        $('#rrn1').on('keyup',function(){
//             alert('dd');
            if($(this).val().length == 6)
            {
                $('#rrn2').trigger('focus');
                
            }
        });
        
        $('#rrn2').on('keyup',function(){
            if($(this).val().length == 7)
            {    
                
                var ch = $(this).val().slice(0,1);
                var gender = $('#gender');
                if(ch == '1' || ch == '3')
                    gender.text('남자');
                else if(ch == '2' || ch == '4')
                    gender.text('여자');
                
                var isAdult = $('#isAdult');
                var year = $('#rrn1').val().slice(0,2);
                var age;
                if(ch == '1' || ch == '2')
                    age = 116 - year;
                else if(ch == '3' || ch =='4')
                    age = 16 - year;
//                 isAdult.text(age);
                if(age > 20)
                    isAdult.text('성인');
                else
                    isAdult.text('미성년');
            }
        });
    });
</script>
</head>
<body>
<input type="text" id="rrn1" size="6">-<input type="password" id="rrn2" size="7"><p/>
 
성별 : <span id="gender"></span><p/>
성인여부 : <span id="isAdult"></span><p/>
cs


W3Schools Online Web Tutorials

www.w3schools.com/



jQuery

https://jquery.com/


jQuery: The Write Less, Do More, JavaScript Library.
‎Download jQuery · ‎jQuery API Documentation · ‎Plugins · ‎jQuery Learning Center


Ajax : Asynchronous JavaScript and Xml

비동기 요청으로 페이지가 아닌 데이터만 응답받는 통신방식

응답받는 데이터의 유형은 Json 혹은 xml


$('select').load(url,[params],[callbackFunc])

JQuery Ajax기능 중 가장 간단한 함수로 첫번재 인수로 지정한 url에 요청을 보내고 결과를 select된 요소에 삽입함

두번째 인자인 params는 요청 파라미터이고 callbackFunc는 응답 수신 완료후 수행할 메소드 

두번째랑 세번째는 생략가능

jQuery ajax 지원 메소드

1.요소.load(url) : url에 요청을 보내고 결과를 현재 요소에 삽입

2. jQuery.get(url,callbackFunc)

3. jQuery.post(url,data,callbackFunc)

4. jQuery.getJSON(url,data,callbackFunc)


2->get방식으로 url에 요청을 보내고 응답을 받으면 callbackFunc실행

load, get, post, getJSON 인자 같음

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
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/Hello.do")
public class HelloServlet extends HttpServlet{
 
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
      // TODO Auto-generated method stub
//      super.doGet(req, resp);
      System.out.println("Get요청 들어옴");
      doProc(req, resp);
   }
 
   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
      // TODO Auto-generated method stub
//      super.doPost(req, resp);
      System.out.println("Post요청 들어옴");
      doProc(req, resp);
   }
   protected void doProc(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
       req.setCharacterEncoding("UTF-8");
       resp.setCharacterEncoding("UTF-8");
      PrintWriter writer = resp.getWriter();
      writer.write(req.getParameter("name")+"님 안녕하세요");
      writer.flush();
   }
   
}
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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#sendAjax').on('click',function(){
            
//             $('#result').load('Hello.do');
 
//             $.get('Hello.do',function(data)
            $.post('Hello.do',{
                name : $('#name').val()    
            }, function(data){
                alert(data);
            });
        });
    });
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="sendAjax" value="Ajax요청">
<p/>
<div id="result"></div>
</body>
</html>
cs


' IOT 기반 응용 SW과정 > Web Programing' 카테고리의 다른 글

Day83 ajax  (0) 2016.07.15
Day81  (0) 2016.07.13
Day80 jQuery  (0) 2016.07.12
Day79  (0) 2016.07.11
Day78  (0) 2016.07.08

1. Data Mapper For Jackson1,708 usages

org.codehaus.jackson » jackson-mapper-aslApache

Data Mapper package is a high-performance data binding package built on Jackson JSON processor


1. Jackson Databind3,438 usages

com.fasterxml.jackson.core » jackson-databindApache

General data-binding functionality for Jackson: works on core streaming API

ObjectMapper mapper = new ObjectMapper();

객체를 json방식으로 변환


1
2
3
4
5
6
7
8
9
10
11
12
13
@Controller
public class JsonMemberConrtorller {
    @Autowired
    private MemberService service;
    
    //memberList.rest라는 요청이 들어오면
    //모든 회월들의 정보를 json형식으로 응답하는 컨트롤러를 작성하세요!
    @RequestMapping("memberList.rest")
    public @ResponseBody List<HashMap<String , Object>> memberList(){
        return service.selectAll();
    }
 
}
cs


1
2
<context:component-scan base-package="restcontroller"></context:component-scan>
    <mvc:annotation-driven></mvc:annotation-driven>
cs

멤버의 아이디를 받아서 해당 아이디의 회원정보를 json으로 응답해봅시당

->파라미터로 받아온다. -> 파라미터보다는...경로를 많이 사용

1
2
3
4
    @RequestMapping("getMember/userid/{id}")
    public @ResponseBody HashMap<String , Object> getMember(@PathVariable("id") String id){
        return service.getMemberInfo(id);
    }
cs

1
2
3
4
5
6
7
8
    <servlet>
        <servlet-name>json</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>json</servlet-name>
        <url-pattern>/rest/*</url-pattern>
    </servlet-mapping>
cs

자바스크립트는 실행하기전에 문법검사를 하지 않음. 문법적으로 에러가 있다해도 그냥 실행을 하고 에러를 만날때까지는 명령실행흐름은 진행


문자열로 감싸있으면 문자열 //숫자면 숫자// true/false는 논리형 

그외에 것들은 규칙에 어긋나거나 키워드가 아니면 다 식별자(변수명/함수명)

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
<script type="text/javascript">
 alert('이것도 문자열');
 alert("이것도 문자열");
 alert("제 이름은 'name'입니다.");
 alert('제 이름은 "name"입니다.');
 alert("서식문자\"name\"");
 
// 숫자자료형
    alert(23);;
    alert(23.9);
 
// 논리자료형
    alert(2>3);
    alert(3>2);
    
// 자바스크립트에서의 변수 var
    var a = '드루와';
    var b = 23;
    var c = 2>3;
    var d = {};
    var e = [];
    var f = function(){
        
    }
    alert(typeof(a));//string
    alert(typeof(b));//number
    alert(typeof(c));//boolean
    alert(typeof(d));//object
    alert(typeof(e));//object(array)
    alert(typeof(f));//function
    alert(typeof(g));//undefined
    alert("?????");
        
</script>
cs

자바스크립트에서 자료형은 여섯개

' IOT 기반 응용 SW과정 > Web Programing' 카테고리의 다른 글

Day79  (0) 2016.07.11
Day78  (0) 2016.07.08
Day73  (0) 2016.07.01
Day72 스프링 게시판  (0) 2016.06.30
Day70 페이징 처리  (0) 2016.06.28

크롤링

웹 페이지를 그대로 가져와서 거기서 데이터를 추출해 내는 행위. 크롤링(Crawling) 혹은 스크래이핑(Scraping) 이라고도 한다.



REST

엄격한 의미로 REST는 네트워크 아키텍처 원리의 모음이다. 여기서 '네트워크 아키텍처 원리'란 자원을 정의하고 자원에 대한 주소를 지정하는 방법 전반을 일컫는다. 간단한 의미로는, 웹 상의 자료를 HTTP위에서 SOAP이나 쿠키를 통한 세션 트랙킹 같은 별도의 전송 계층 없이 전송하기 위한 아주 간단한 인터페이스를 말한다. 이 두 가지의 의미는 겹치는 부분과 충돌되는 부분이 있다. 필딩의 REST 아키텍처 형식을 따르면 HTTP나 WWW이 아닌 아주 커다란 소프트웨어 시스템을 설계하는 것도 가능하다. 또한, 리모트 프로시저 콜 대신에 간단한 XML과 HTTP 인터페이스를 이용해 설계하는 것도 가능하다.



XML이란?

트리구조의 데이터를 단순히 텍스트 형태로 나타낸 것

<?xml version="1.0"?>
<포켓몬>
  <이름>피카츄</이름>
  <속성>전기</속성>
  <나이>3</나이>
  <성별>수컷</성별>
  <등록 번호>Pikachu01</등록 번호>
  <소유자>사토시</소유자>
</포켓몬>
위 예시처럼 <태그> </태그> 구조로 자유롭게 만들 수 있다.
XML은 범용성 & 확장성을 가지기에 환경설정이나 데이터 전달포멧으로 쓰이는 것을 많이 볼 수 있다.
장점 : 유연하게 쓰임 (이기종간 데이터전달 등) , 네임스페이스+문서검증기능?
단점 : 가독성 쓰레기, 파싱 어려움, 처리속도 느림;; 
=> 웬만하면 json을 쓰는게 좋다.

XML파싱

DOM (Document Object Model) : 메모리에 모두 로드 후 파싱,, 빠르고 용이함. 
SAX (Simple API for XML) : 순차적으로 읽어가며 파싱하는 것,, 메모리 사용량이 적음. 기능 제한 많음


책 검색 api의 url에 적절한 파라미터를 세팅해 요청을 보내고 xml형식으로 돌아오는 응답을 잘 읽어서 원하는 정보를 추출자바코드로 어떻게 url에 요청을 보내고 응답을 읽을 수 있는지 xml문서에서 원하는 값을 어떻게 획득할 수 있는지

네이버 API

프로젝트 생성

1
2
3
4
5
<dependency>
            <groupId>net.sf.sociaal</groupId>
            <artifactId>xmlpull-xpp3</artifactId>
            <version>3.0.0.20130526</version>
</dependency>
cs

1
2
3
4
5
6
7
8
9
10
11
public class Book {
    private String title;
    private String link;
    private String image;
    private String author;
    private String price;
    private String discount;
    private String publisher;
    private String pubdate;
    private String isbn;
    private String description;

 모델클래스 만들기// +게터,세터,

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.StringReader;
import java.net.URL;
import java.net.URLConnection;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;
 
import org.xmlpull.v1.XmlPullParser;
import org.xmlpull.v1.XmlPullParserFactory;
 
import model.Book;
 
public class Test {
   public static void main(String[] args) throws Exception {
      // 자바코드로 특정 url에 요청보내고 응답받기
      // 기본 자바 API를 활용한 방법
      // vs
      // 외부 라이브러리를 활용한 방법
 
      String clientID = "클라이언트아이디";
      String clientSecret = "클라이언트시크릿";
      URL url = new URL("https://openapi.naver.com/v1/search/book.xml?query=" + URLEncoder.encode("책제목", "UTF-8"));
 
      URLConnection urlConn = url.openConnection();
 
      urlConn.setRequestProperty("X-Naver-Client-Id", clientID);
      urlConn.setRequestProperty("X-Naver-Client-Secret", clientSecret);
 
      BufferedReader br = new BufferedReader(new InputStreamReader(urlConn.getInputStream()));
 
      String data = "";
      String msg = null;
      while ((msg = br.readLine()) != null) {
         // System.out.println(msg);
         data += msg;
      }
      List<Book> list = null;
      // System.out.println(data);
      XmlPullParserFactory factory = XmlPullParserFactory.newInstance();
      XmlPullParser parser = factory.newPullParser();
      String sTag;
      parser.setInput(new StringReader(data));
      int eventType = parser.getEventType();
      Book b = null;
      while (eventType != XmlPullParser.END_DOCUMENT) {
         switch (eventType) {
         case XmlPullParser.END_DOCUMENT:// 문서의 끝
            break;
            
         case XmlPullParser.START_DOCUMENT:
            list = new ArrayList<Book>();
            break;
            
         case XmlPullParser.END_TAG:{
             String tag = parser.getName();
             if(tag.equals("item")){
                 list.add(b);
                 b = null;
             }
         }
            
         case XmlPullParser.START_TAG: {
            String tag = parser.getName();
            switch (tag) {
            case "item":
               b = new Book();
               break;
            case "title":
                if(b != null)
                    b.setTitle(parser.nextText());
                break;
            case "link":
                if(b != null)
                    b.setLink(parser.nextText());
                break;
            case "image":
                if(b != null)
                    b.setImage(parser.nextText());
                break;
            case "author":
                if(b != null)
                    b.setAuthor(parser.nextText());
                break;
            case "price":
                if(b != null)
                    b.setPrice(parser.nextText());
                break;
            case "discount":
                if(b != null)
                    b.setDiscount(parser.nextText());
                break;
            case "publisher":
                if(b != null)
                    b.setPublisher(parser.nextText());
                break;
            case "pubdate":
                if(b != null)
                    b.setPubdate(parser.nextText());
                break;
            case "isbn":
                if(b != null)
                    b.setIsbn(parser.nextText());
                break;
            case "description":
                if(b != null)
                    b.setDescription(parser.nextText());
                break;
            }
            break;
         }
         
         }
         eventType = parser.next();
      }
      for(Book book : list)
         System.out.println(book);
   }
}
cs




http://humble.tistory.com/23 

http://fromleaf.tistory.com/150

참조 사이트


' IOT 기반 응용 SW과정 > Web Programing' 카테고리의 다른 글

Day69 API -jason  (1) 2016.06.27
Day68 네이버 API - 책검색  (0) 2016.06.24
Day66 Spring-student // 스프링 인터셉터  (0) 2016.06.22
Day65 Spring-student  (0) 2016.06.21
Day64  (0) 2016.06.20

+ Recent posts

티스토리툴바