2012/01/26 17:53
Web(HTML, CSS, JSP, JavaScript)

JSON 데이터 정렬하기

JavaScript sort 참고 : http://www.w3schools.com/jsref/jsref_sort.asp 
  
var testArray = [
    {"id" : 1, "total" : 3}, {"id" : 2, "total" : 20}, {"id" : 3, "total" : 12}, {"id" : 4, "total" : 9}, {"id" : 3, "total" : 24}
];
function custonSort(a, b) {
  if(a.total == b.total){ return 0} return  a.total > b.total ? 1 : -1;
}
testArray.sort(custonSort);
console.log(testArray);
<< 정렬 결과 >>
[
Object
  1. id: 1
  2. total: 3
  3. __proto__: Object
,
Object
  1. id: 4
  2. total: 9
  3. __proto__: Object
,
Object
  1. id: 3
  2. total: 12
  3. __proto__: Object
,
Object
  1. id: 2
  2. total: 20
  3. __proto__: Object
,
Object
  1. id: 3
  2. total: 24
  3. __proto__: Object
]

간단하게 예제를 만들어봤다.

참고사이트 : http://stackoverflow.com/questions/881510/json-sorting-question

난 전혀 다른 곳을 파고 있었던 것이다. 


저작자 표시

'Web(HTML, CSS, JSP, JavaScript)' 카테고리의 다른 글

JSON 데이터 정렬하기  (0) 2012/01/26
클라이언트 측 객체 계층구조  (0) 2011/09/16
전화번호 검증 스크립트(숫자만 입력 가능)  (0) 2011/08/16
<article> 과 <section>의 차이점  (0) 2011/04/18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009/06/25
API 이용하는 방법 링크  (0) 2009/06/02
Posted by 허니몬
TAG javascript, JSON, sort
트랙백0 댓글0
2011/09/16 01:04
Web(HTML, CSS, JSP, JavaScript)

클라이언트 측 객체 계층구조


.serialize() - jQuery API : http://api.jquery.com/serialize/

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

오늘 jQuery를 가지고 스크립트를 작성하다가 jQuery를 이용해서 form 객체를 호출해서 jquery.submit() 메서드를 실행했는데 안먹히는 거다. 왜 그런거지!? 하면서 끙끙거리면서 고민하다가 옆에 계신 실장님께 도움을 요청하여 왜그런지 분석하다가 jQuery Document에 있는 걸 그대로 따라한 소스를 보시고서는

이건 센스가 없는거에요. 이 코드가 작동되는 것이 맞지만, 굳이 이렇게 할 필요가 있을까요?
이렇게 하면 될텐데?

라고 하시며 조언을 해주시는데...

document.forms['form'].submit();

이건 된다.

$('#form').submit();

이건 안된다.

$('#form').get(0).submit();

이건 된다. 단, 이렇게 get(0)으로 꺼내게 될 경우에는 jQuery에서 다루는 객체가 아니라 실제 form 객체이기 때문에 submit() 메서드는 jquery에서 다루기가 어려워진다. 즉, 복잡시러워지는거다. 문득 생각난건데.

$($('#form').get(0)).submit(function() {

});

요렇게하면 쓸 수 있지 않을까란 잡생각도 잠시 해봤다.

가만히 보고 있으니, 굳이 form.submit()을 실행하는 이벤트를 가로채서 ajax처리할 필요가 없었다.

var serializeObject = $form.serialize();

로 form에 있는 정보를 문자열로 직렬화해서 ajax로 넘기면 되는 거였다. 흠.


사실 그 앞에서 jQuery를 이용해서 동적으로  document.body에다가 form을 생성하고 거기에 appen로 붙이면서 form객체를 만들고 있었다. 이렇게 만들어진 form 객체를 jQuery를 이용해서 다루려고 했던 것인데, 이 부분에서 내가 생각했던 의도와는 다르게(원래 그렇게 되는 게 맞는 것이었겠지) 동작하고 있었던 것이다. 오류메시지도 나타나질 않으니 당황스러웠기도 하고 황망했다.


난 (개발) 센스가 부족하다. ㅠㅅ-)

센스만점이 되는 그날까지 부지런히 노력하자.



오늘의 교훈 : 난 브라우저(클라이언트)에서 다루는 객체의 계층구조나 동작원리를 제대로 이해하지 못하고 있다는 것이다. 그저 jQuery를 이용해서 다루는 정도가 아니라, 충분히 머리 속에서 동작원리를 이해하고 상상해볼 수 있는 수준까지 도달하기 위한 노력을 잊지 말자.

저작자 표시

'Web(HTML, CSS, JSP, JavaScript)' 카테고리의 다른 글

JSON 데이터 정렬하기  (0) 2012/01/26
클라이언트 측 객체 계층구조  (0) 2011/09/16
전화번호 검증 스크립트(숫자만 입력 가능)  (0) 2011/08/16
<article> 과 <section>의 차이점  (0) 2011/04/18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009/06/25
API 이용하는 방법 링크  (0) 2009/06/02
Posted by 허니몬
TAG .serialize(), .submit(), form, jqeury, select, window, 자바스크립트, 프론트엔드
트랙백0 댓글0
2011/08/16 14:49
Web(HTML, CSS, JSP, JavaScript)

전화번호 검증 스크립트(숫자만 입력 가능)

var telValidate = function(event) {
    var key = window.event ? event.keyCode : event.which;
    //alert(key);
    var keychar = String.fromCharCode(key);
    //alert(keychar);
    var reg = /[0-9]/;
    //alert(reg.test(keychar));
    return reg.test(keychar);
};



HTML5 에서 input 의 type attribute value 로 'tel'가 있다(참고 : http://www.w3schools.com/html5/tag_input.asp). 모바일 브라우저 상에서 input에 포커싱이 되면 숫자패드가 떠오르고,'(, ), -' 만 입력이 가능해진다. 일반 부라우저에서야 뭐... ㅡ_-);;


자바스크립트(아니 프로그래밍 언어)에서 중요한 것 중 하나는

 '정규 표현식(Regular expression)'을 제대로 이해하고 활용하는 것.


아직 정규식은 어렵구나. 빠른 시일 내에 정규식에 대해서 정리를 한번 싸악 해봐야겠다.

저작자 표시

'Web(HTML, CSS, JSP, JavaScript)' 카테고리의 다른 글

JSON 데이터 정렬하기  (0) 2012/01/26
클라이언트 측 객체 계층구조  (0) 2011/09/16
전화번호 검증 스크립트(숫자만 입력 가능)  (0) 2011/08/16
<article> 과 <section>의 차이점  (0) 2011/04/18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009/06/25
API 이용하는 방법 링크  (0) 2009/06/02
Posted by 허니몬
TAG input, javascript, number, reg, Regular Expression, tel, 숫자만 입력 처리, 정규 표현식
트랙백0 댓글0
2011/04/18 13:46
Web(HTML, CSS, JSP, JavaScript)

<article> 과 <section>의 차이점

HTML5첫걸음개발자기획자디자이너가함께읽고바로쓰는
카테고리 컴퓨터/IT > 프로그래밍/언어 > 웹프로그래밍 > HTML/SGML
지은이 브루스 로슨 (에이콘출판, 2010년)
상세보기


<article> 그 자체로 완전한(독립적인) 개별 콘텐츠를 의미

<section> 페이지 안의 주제가 다른 영역을 구분 짓거나 하나의 글을 부분으로 나누기 위한 것
  - '문서, 페이지, 애플리케이션, 사이트 안에 있는 그 자체로 완전한 개별 컨텐츠로 배포하거나 재사용하기 위한 것'이 아님
저작자 표시

'Web(HTML, CSS, JSP, JavaScript)' 카테고리의 다른 글

클라이언트 측 객체 계층구조  (0) 2011/09/16
전화번호 검증 스크립트(숫자만 입력 가능)  (0) 2011/08/16
<article> 과 <section>의 차이점  (0) 2011/04/18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009/06/25
API 이용하는 방법 링크  (0) 2009/06/02
미투데이 API CheatSheet  (0) 2009/05/20
Posted by 허니몬
TAG article, html5, Section
트랙백0 댓글0
2009/06/25 17:16
Web(HTML, CSS, JSP, JavaScript)

090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기

미투데이 따라집기!!!

me2daytest(1).JPG

 

테이블 생성 SQL

  1. create table me2daytest(
        pid number primary key,
        pname varchar2(20),
        particle varchar2(150),
        pwdate date );

 

index2.jsp

  1. <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
    <html>
    <head>
    <script language="javascript" src="jslb_ajax.js" >
    </script> 
    <script language="javascript">
    <!--
        //콜백함수(수신시에 실행된다)
        function on_loaded(oj){
            //응답을 취득
            var res = oj.responseText

            //응답된 문자열을 DIV로 출력
            document.getElementById("list").innerHTML = res
        }

        function result(oj){
            //응답을 취득
            var res = oj.responseText
       
            //응답된 문자열을 DIV로 출력
            document.getElementById("result").innerHTML = res
    }

        //입력한 내용을 바로 업데이트 시킴.
        function input(oj){
            if (oj.form.article.value.length === 0) return
            sendRequest(result, '&name='+oj.form.name.value+'&article='+oj.form.article.value, 'POST', 'input.jsp', true, true)
            sendRequest(on_loaded, '', 'POST', 'list.jsp', true, true)
            oj.form.article.value='';
        }

        function on_formLoad(oj){
            sendRequest(on_loaded, '', 'POST', 'list.jsp', true, true)
        }


    //-->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <title>허니몬의 me2day 떼쳇 따라잡기</title>
    </head>
        <body>
        <h3>사용법 : 이름 입력하고 내용 입력하고 Enter 혹은 글올리기 클릭하면 됨!!</h3>
        <h3>여러분은 낙장불입의 세계에 한발 들어섰습니다.</h3>
        <hr>
        <form>
        <table>
        <tr>
        <th>이름</th><th>내용</th><th><!-- 스크립트 값이 들어가야하려나? document.write(var); -->
        <div id='result'></div>
        </th>
        </tr>
        <tr>
       
        <td><input type='text' name='name' /></td><td><input type='text' name='article' size='50' maxlength='50' onkeyup='on_formLoad(this)'/></td><td><input type='button' value='글 올리기' onclick='input(this)' /></td>
       
        </tr>
        </table>
        </form>
        화면출력!!
        <div id='list'></div>
        </body>
    </html>

 

input.jsp

  1. <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
    <jsp:useBean id="data" class="data.DataProc" scope="page"/>
    <%
        String name = request.getParameter("name");
        String article = request.getParameter("article");
       
        data.insertData(name,article);
        out.println("처리완료");
    %>

 

list.jsp

  1. <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
    <%@ page import='java.util.*, data.*' %>
    <jsp:useBean id='data' class='data.DataProc' scope='page' />
    <%
        Vector result = data.list();

        if( result.isEmpty() == true) {
            out.println("입력된 데이터가 없습니다.");
        } else {
    %>
        <table border='1'>
    <%
            //vector는 0부터 시작하는 거였구나... 그걸 몰랐다!!
            for( int i = 0; i < result.size(); i++){
                DataBean b = (DataBean)result.elementAt(i);
                String name = b.getPname();
                String article = b.getParticle();
                String wdate = b.getPwdate();
    %>
            <tr>
            <td><%= name %></td><td><%= article %></td><td><%= wdate %></td>
            </tr>
    <%
            }
    %>
        </table>
    <%
           
        }
    %>

 

DataBean.jsp

  1. package data;

    public class DataBean {
        private String pname="";
        private String particle="";
        private String pwdate="";
       
        public DataBean(){}
       
        public DataBean(String pname, String particle, String pwdate){
            this.pname = pname;
            this.particle = particle;
            this.pwdate = pwdate;
        }

        public String getPname() {
            return pname;
        }

        public void setPname(String pname) {
            this.pname = pname;
        }

        public String getParticle() {
            return particle;
        }

        public void setParticle(String particle) {
            this.particle = particle;
        }

        public String getPwdate() {
            return pwdate;
        }

        public void setPwdate(String pwdate) {
            this.pwdate = pwdate;
        }
       
    }

 

DataProc.java

  1. package data;

    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.sql.Statement;
    import java.util.Vector;

    import javax.naming.InitialContext;
    import javax.sql.DataSource;

    public class DataProc {
        DataSource ds;
       
        public DataProc(){
            try {
                InitialContext context = new InitialContext();
                ds = (DataSource)context.lookup("java:comp/env/jdbc/oracle");
            } catch(Exception e){
                e.printStackTrace();
            }
        }
       
        public void insertData(String name, String article){
            Statement stat;
            Connection con;
            int pid = checkpid();
           
            String sql = "INSERT INTO me2daytest values(" + pid + ",'" + name + "', '"+ article +"', sysdate)";
            try{
                con = ds.getConnection();
                stat = con.createStatement();
                stat.executeUpdate(sql);
                stat.close();
                con.close();
            } catch(Exception e) {
                e.printStackTrace();
            }
        }
       
        public Vector list(){
            Connection con;
            Statement stat;
            Vector result = new Vector();
           
            String sql = "SELECT pname, particle, pwdate FROM me2daytest ORDER BY pwdate desc";
            try {
                con = ds.getConnection();
                stat = con.createStatement();
                ResultSet rs = stat.executeQuery(sql);
                while( rs.next() ){
                    String name = rs.getString(1);
                    String article = rs.getString(2);
                    String wdate = rs.getString(3);
                    DataBean bean = new DataBean(name, article, wdate);
                    result.add(bean);
                }
                rs.close();
                stat.close();
                con.close();
            } catch(Exception e){
                e.printStackTrace();
            }
            return result;   
        }
       
        public int checkpid(){
            Connection con;
            Statement stat;
            int pid=0;
           
            String sql = "SELECT max(pid) FROM me2daytest";
            try {
                con = ds.getConnection();
                stat = con.createStatement();
                ResultSet rs = stat.executeQuery(sql);
                while( rs.next() ){
                    pid = rs.getInt(1);
                }
                rs.close();
                stat.close();
                con.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            return pid+1;
        }
    }

 

문제점 :

  • 다른 사람이 입력한 뒤에 Reload가 되지 않는다. 이건 어떻게 해야하지? ㅡㅅ-)? 원격인터페이스를 써줘야할까? EJB 무상태 세션빈?
  • 본문 입력시 입력하지 않고 입력했을 때 javascript로 거절하도록 한다.
  • 페이지 나누기 기능이 필요할 듯 하다.
  • 미관상 이쁘지 않다.

이 글은 스프링노트에서 작성되었습니다.

'Web(HTML, CSS, JSP, JavaScript)' 카테고리의 다른 글

전화번호 검증 스크립트(숫자만 입력 가능)  (0) 2011/08/16
<article> 과 <section>의 차이점  (0) 2011/04/18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009/06/25
API 이용하는 방법 링크  (0) 2009/06/02
미투데이 API CheatSheet  (0) 2009/05/20
Douglas Crockford : "Advanced JavaScript"(1 of 3, 2 of 3, 3 of 3)  (0) 2009/05/12
Posted by 허니몬
TAG ajax, javascipt, jsp, 떼쳇따라하기, 문제
트랙백0 댓글0
이전버튼 1 2 이전버튼