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


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

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

'Javascript' 카테고리의 다른 글

클라이언트 측 객체 계층구조  (0) 2011.09.16
전화번호 검증 스크립트(숫자만 입력 가능)  (0) 2011.08.16
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009.06.25
API 이용하는 방법 링크  (0) 2009.06.02
미투데이 API CheatSheet  (0) 2009.05.20

미투데이 따라집기!!!

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로 거절하도록 한다.
  • 페이지 나누기 기능이 필요할 듯 하다.
  • 미관상 이쁘지 않다.

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

'Javascript' 카테고리의 다른 글

전화번호 검증 스크립트(숫자만 입력 가능)  (0) 2011.08.16
<article> 과 <section>의 차이점  (0) 2011.04.18
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
● 야후지도 API 사용하기
http://www.beautysite.kr/Article/home/beauty/bbs.php?id=TipTech&q=view&uid=3

● 네이버 DeveloperCenter API 이용 Tutorial
http://dev.naver.com/openapi/tutorial

● 구글맵 오픈API 사용하기 - 구글맵 시작
http://adeveloper.tistory.com/tag/google%20openapi

● Version 3.7야후! 지도 AJAX API
http://kr.open.gugi.yahoo.com/document/tutorials.php

●JavaScript로 오픈API 이용 하기
http://urin79.com/zb/utdae/780017

'Javascript' 카테고리의 다른 글

<article> 과 <section>의 차이점  (0) 2011.04.18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009.06.25
미투데이 API CheatSheet  (0) 2009.05.20
Douglas Crockford : "Advanced JavaScript"(1 of 3, 2 of 3, 3 of 3)  (0) 2009.05.12
JSON(JavaScript Object Notation) 소개  (1) 2009.05.07
자바스크립트를 기반으로 해서 미투데이 API를 활용해서 웹 애플리케이션을 한번 만들어 보자꾸나.
ㅡㅅ-)> 이런 때 해보지 언제 해보겠는가... 도전해보지 않고 포기하기에는 지루하지 않을까?? ^^;;

생각했던 것 보다, me2day api를 이용한 다양한 프로그램들이 존재한다. me2day용 API DOCs도 존재하고....

뭔가를 하기 위해서는 거기에 대한 준비가 필요하구나.


'Javascript' 카테고리의 다른 글

<article> 과 <section>의 차이점  (0) 2011.04.18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009.06.25
API 이용하는 방법 링크  (0) 2009.06.02
Douglas Crockford : "Advanced JavaScript"(1 of 3, 2 of 3, 3 of 3)  (0) 2009.05.12
JSON(JavaScript Object Notation) 소개  (1) 2009.05.07
   제가 만들고 싶은 것은 API를 이용한 매쉬업 형태로 개발을 해야할 것 같습니다. 그러기 위해서는 자바스크립트를 기반으로 하는 것이 좋을 듯 하구요. 과거에 단순히 복사하고 붙여넣기 방식으로 구현하면 된다고 생각했던 자바 스크립트였는데, 지금은 공부해야할 것이 자바 만큼이나 많은 분야가 되어버리는 군요. ㅡㅅ-); 그나저나... 스-);; 문제로군요. 우분투에서는 플래시로 작성되어 있는 영상들이 정상적으로 작동을 하지 않습니다. OTL... VirtualBox로 윈도우 XP를 사용하면서 시스템 자원이 모두 그쪽에서 점유하고 있어서 였을까요? 우분투 업데이트를 마치고 나니까 정상적으로 플래시에서 소리가 나는군요. 으흠!?

● 강연하시는 분(Douglas Crockford)의 블로그 : http://www.crockford.com/




이 글은, 제가 이해해서 올린다기 보다는 이해하기 위해, 올해 안에 공부해야할 것들 중 하나인 JavaScript 부분에 대한 내용을 기록해두는 것이라고 해도 될 것 같습니다. ㅠㅅ-) 공부해야할 것들은 점점 많아져 가고 머리에 주입할 수 있는 주입량은 한계가 있고... 이것 참 난감하네요. 매쉬업이 발달하면 하게 될수록 매쉬업 언어로서의 자바스크립트도 그 영역을 더욱 넓혀가게 될 것 같군요.

'Javascript' 카테고리의 다른 글

<article> 과 <section>의 차이점  (0) 2011.04.18
090625_학습내용 :  onkeyup 사용 + onkeypress 이벤트 사용하기  (0) 2009.06.25
API 이용하는 방법 링크  (0) 2009.06.02
미투데이 API CheatSheet  (0) 2009.05.20
JSON(JavaScript Object Notation) 소개  (1) 2009.05.07

+ Recent posts

티스토리툴바