Tornado 의 블로그

http://prototype-window.xilinus.com/

펌 : 미니위니

by : 제민 (siopo)

소스

<style type="text/css">
 .rtop, .rbottom{display:block; background: #FFFFFF;}
 .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; }

 .r { text-align: center; width: 120px; font: bold 9px tahoma; }
 .r1 { margin: 0 5px; background: #DEDEDE; height: 1px; }
 .r2 { margin: 0 3px; border: solid #DEDEDE; border-width: 0 2px; }
 .r3 { margin: 0 2px; border: solid #DEDEDE; border-width: 0 1px; }
 .r4 { margin: 0 1px; border: solid #DEDEDE; border-width: 0 1px;  height: 2px}
 
 .r5 {margin: 0 2px; background: #DEDEDE; height: 1px}
 .r6 {margin: 0 1px; background: #FFFFFF; border: solid #DEDEDE; border-width: 0 1px;  height: 1px}
 
 .rc { border: solid #DEDEDE; border-width: 0 1px; }
</style>

<div class="r">
 <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
 <div class="rc">
  Round Table 1
 </div>
 <b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b>
</div>

<br />

<div class="r">
 <b class="rtop"><b class="r5"></b><b class="r6"></b></b>
 <div class="rc">
  Round Table 2
 </div>
 <b class="rbottom"><b class="r6"></b><b class="r5"></b></b>
</div>

결과

Javascript로 구현한 UTF-8 URLEncoding

<SCRIPT LANGUAGE="JavaScript">

/*  Function Equivalent to java.net.URLEncoder.encode(String, "UTF-8")

    Copyright (C) 2002, Cresc Corp.

    Version: 1.0

*/

function encodeURL(str){

    var s0, i, s, u;

    s0 = "";                // encoded str

    for (i = 0; i < str.length; i++){   // scan the source

        s = str.charAt(i);

        u = str.charCodeAt(i);          // get unicode of the char

        if (s == " "){s0 += "+";}       // SP should be converted to "+"

        else {

            if ( u == 0x2a || u == 0x2d || u == 0x2e || u == 0x5f || ((u >= 0x30) && (u <= 0x39)) || ((u >= 0x41) && (u <= 0x5a)) || ((u >= 0x61) && (u <= 0x7a))){       // check for escape

                s0 = s0 + s;            // don't escape

            }

            else {                  // escape

                if ((u >= 0x0) && (u <= 0x7f)){     // single byte format

                    s = "0"+u.toString(16);

                    s0 += "%"+ s.substr(s.length-2);

                }

                else if (u > 0x1fffff){     // quaternary byte format (extended)

                    s0 += "%" + (oxf0 + ((u & 0x1c0000) >> 18)).toString(16);

                    s0 += "%" + (0x80 + ((u & 0x3f000) >> 12)).toString(16);

                    s0 += "%" + (0x80 + ((u & 0xfc0) >> 6)).toString(16);

                    s0 += "%" + (0x80 + (u & 0x3f)).toString(16);

                }

                else if (u > 0x7ff){        // triple byte format

                    s0 += "%" + (0xe0 + ((u & 0xf000) >> 12)).toString(16);

                    s0 += "%" + (0x80 + ((u & 0xfc0) >> 6)).toString(16);

                    s0 += "%" + (0x80 + (u & 0x3f)).toString(16);

                }

                else {                      // double byte format

                    s0 += "%" + (0xc0 + ((u & 0x7c0) >> 6)).toString(16);

                    s0 += "%" + (0x80 + (u & 0x3f)).toString(16);

                }

            }

        }

    }

    return s0;

}

/*  Function Equivalent to java.net.URLDecoder.decode(String, "UTF-8")

    Copyright (C) 2002, Cresc Corp.

    Version: 1.0

*/

function decodeURL(str){

    var s0, i, j, s, ss, u, n, f;

    s0 = "";                // decoded str

    for (i = 0; i < str.length; i++){   // scan the source str

        s = str.charAt(i);

        if (s == "+"){s0 += " ";}       // "+" should be changed to SP

        else {

            if (s != "%"){s0 += s;}     // add an unescaped char

            else{               // escape sequence decoding

                u = 0;          // unicode of the character

                f = 1;          // escape flag, zero means end of this sequence

                while (true) {

                    ss = "";        // local str to parse as int

                        for (j = 0; j < 2; j++ ) {  // get two maximum hex characters for parse

                            sss = str.charAt(++i);

                            if (((sss >= "0") && (sss <= "9")) || ((sss >= "a") && (sss <= "f"))  || ((sss >= "A") && (sss <= "F"))) {

                                ss += sss;      // if hex, add the hex character

                            } else {--i; break;}    // not a hex char., exit the loop

                        }

                    n = parseInt(ss, 16);           // parse the hex str as byte

                    if (n <= 0x7f){u = n; f = 1;}   // single byte format

                    if ((n >= 0xc0) && (n <= 0xdf)){u = n & 0x1f; f = 2;}   // double byte format

                    if ((n >= 0xe0) && (n <= 0xef)){u = n & 0x0f; f = 3;}   // triple byte format

                    if ((n >= 0xf0) && (n <= 0xf7)){u = n & 0x07; f = 4;}   // quaternary byte format (extended)

                    if ((n >= 0x80) && (n <= 0xbf)){u = (u << 6) + (n & 0x3f); --f;}         // not a first, shift and add 6 lower bits

                    if (f <= 1){break;}         // end of the utf byte sequence

                    if (str.charAt(i + 1) == "%"){ i++ ;}                   // test for the next shift byte

                    else {break;}                   // abnormal, format error

                }

            s0 += String.fromCharCode(u);           // add the escaped character

            }

        }

    }

    return s0;

}

</SCRIPT>

http://www.anticlue.net/archives/000684.htm

CSS Tab Designer

A nice tip from Sandy Clark, the CSS Tab Designer. The nice functionality is the visual creation, WYSIWYG.

css 메뉴 처리

http://alvit.de/css-showcase/css-navigation-techniques-showcase.php

이번 프로젝에서 javascript가 많아서 하나 만들어 봤음..

자바스크립 맨처음위치에

<script type='text/javascript' src='./Logger.js'></script>

만 삽입하고, 코드에서

Logger.debug( String );

Logger.error( String, Exception );

Logger.info( String );

이렇게 사용하면 됨

http://www.manning.com/books/crane

샘플입니다.

원하는 셀을 선택하고 하세요...

선택 안하고 하면 삑사리 날꺼 입니다..

그냥 몇가지 테스트 하니라..

만들어 놓아서.. 삑사리가 잘남니다..

소스 한번 보시고.. 각자 알아서 필요한 부분부분을 뜯어 와야 합니다. ^^

http://koxo.com/

이런데가 있었다니.....

상황..

부모창에는 select 가 있고..  새창을 띠워서 옵션에 들어가는 값을 선택한 후에

부모창의 select 에 add 시킨다.

자식창에는 이런 코드가 있다.

var opt = new Option();

opt.text = xxx;

opt.text = yyy;

opener.document.formName.select_1.options.add(opt);

opener.document.formName.select_1.selectedIndex = opener.document.formName.select_1.options.length - 1;

흠.. 여기서 문제 되는 부분이..

부모창에 있는 옵션에 add 하는 부분이다.

어찌나 에러가 팍팍 뜨던지...

알고보니.. Explorer 에서 안된단다. 버그래요 버그 ..

부모창에 자바스크립트 함수 만들어서 처리했음..

JS 로 xml 파일 읽어오는 걸 만들다 보니.. 이것저것 손대게 되네 ^^

아래는 우편번호를 찾는 것인데..

그냥 찾는게 아니라.. 특정 주소를 입력하면 onkeyup 이벤트를 통해

ActiveXObject("Msxml2.XMLHTTP") 를 생성하고.. 그곳에서 XML 값을 리턴받아서

Table 에 add 시키는 것이다..

물론 Refresh 는 없다.

이상한거는 테이블이 길어지면 보기 안좋아서.. DIV 로 스크롤 바를 줬는데

테이블 바로 위에 공백이 생긴다 -.-;

우편번호는 postman.pe.kr 에서 받았고,

커넥션 풀은 proxool 로 했다.

화면에 디스플레이 되는 JSP 파일

FileName : Register.jsp

<%@ page language="java"
 pageEncoding="euc-kr"
 import="java.sql.*"
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>My JSF 'Register.jsp' starting page</title>

 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 
<script language="javascript">

 function openDIV(divName){
 
  var obj = document.getElementById(divName);
  var x = event.clientX + parseInt(obj.offsetWidth);
  var y = event.clientY + parseInt(obj.offsetHeight);

  var _x = document.body.clientWidth - x;
  var _y = document.body.clientHeight - y;

  if(_x < 0){
   x = event.clientX + document.body.scrollLeft + x;
  }else{
   x = event.clientX + document.body.scrollLeft;
  }

  if(_y  < 0){
   y = event.clientY + document.body.scrollTop + _y + 20;
  }else{
   y = event.clientY + document.body.scrollTop;
  }

  obj.style.top = y + 30 ;
  obj.style.left = x ;
  obj.style.display = "";
  
  document.forms[0].query.focus();
 }

 function closeDIV(divName){
  var obj = document.getElementById(divName);

  if(obj.style.display != "none"){
   obj.style.display = "none";
  }
 }
  
 var req;
 
 function zipcode_check(frm){
  var inputVal = frm.query.value;

  if(inputVal.length < 2){
   return;
  }
    
  req = new ActiveXObject("Msxml2.XMLHTTP");
  if(req){
   req.onreadystatechange = processStateChange;   
   req.open("GET", "SearchAddr.jsp?dong=" + inputVal, false);
   req.send();
  } 
 } 
 
 function processStateChange(){
  if(req.readyState == 4){
   if(req.status == 200){
    var nodes = req.ResponseXML.selectNodes("//addr");
    FillNodes(nodes);    
   }else{
    alert("Ooops : " + req.statusText);
   }
  }  
 } 
 
 // XML 을 읽어들여서 테이블에 채운다.
 function FillNodes(nodes){
  var tableObj = document.getElementById("addrTbl");
  var tableBody = tableObj.childNodes[0];
  var tableRow, tableCell;
  
  if(tableObj.rows.length > 0){
   for(var i = 0; i < tableObj.rows.length; i++){
    tableObj.deleteRow(i);
   }
  }

  for(var i = 0; i < nodes.length; i++){

   var st = nodes[i].selectSingleNode("zipcode").text + " "
      + nodes[i].selectSingleNode("sido").text + " "
      + nodes[i].selectSingleNode("gugun").text + " "
      + nodes[i].selectSingleNode("dong").text + " "
      + nodes[i].selectSingleNode("ri").text + " "
      + nodes[i].selectSingleNode("bunzi").text;
     
   tableRow = document.createElement("TR");
   tableBody.appendChild(tableRow);
   tableCell = document.createElement("TD");
   tableRow.appendChild(tableCell);
   tableRow.runtimeStyle.cursor = "hand";   
   tableCell.innerHTML = st;
  }

  document.getElementById("addrTbl").ondblclick = SelectTR;
  
 }
 
 function SelectTR(element){
  var row ;
  
  if(element == null){
   element = window.event.srcElement;
  }
  
  row = findRow(element);
  
  AddrSelect(element.innerHTML);
  
  
 }
 
 function findRow(element){
  if(element.tagName == "TR"){
   return element;
  }else{
   return null;
  }
 }
 
 function AddrSelect(addr){
  document.forms[0].addr.value = addr;
  closeDIV('FindZipCodePanel');
 }

</script>
</head>
 
 <form name="registerForm" >
<table border="1" align="center" width="500" >
 <tr>
  <td>우편번호 :
   <input type="text" id="zip1" name="zip1" readonly size="3" /> -
   <input type="text" id="zip2" name="zip2" readonly size="3" />
   <input type="button" id="FindZipCodeBtn" name="FineZipCodeBtn" value="우편번호 찾기" onclick="openDIV('FindZipCodePanel')" />
  </td>
 </tr>
 <tr>
  <td>주 소 : <input type="text" id="addr" name="addr" readonly size="40" /></td>
 </tr>
 <tr>
  <td>상세 주소 : <input type="text" id="addrDetail" name="addrDetail" size="40" /></td>
 </tr>
</table>

<DIV id="FindZipCodePanel" style="POSITION: absolute; Display:none; BACKGROUND-COLOR: white; WIDTH:500PX; BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid;BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; ">

<TABLE width="100%" align="center" border="1" cellpadding="0" cellspacing="0">
 <TR>
  <TD align="right" bgColor="#D7DED6" height="13"><a href="javascript:closeDIV('FindZipCodePanel');">X</a></TD>
 </TR>
 <TR>
  <TD>주소를 입력하세요</TD>
 </TR>
 <TR>
  <TD><input type="text" name="query"  onkeyup='zipcode_check(this.form)' ondblclick=""/></TD>
 </TR>
 <TR>
  <TD><div id="addrTableDIV" style="OVERFLOW-Y:scroll;WIDTH:100%;POSITION:relative;HEIGHT:200px;BORDER-TOP: gray 1px solid;">
   <table id="addrTbl" border="1" align="center" width="100%" ></table></div></TD>
 </TR>  
</TABLE>   

</DIV> 

<body>

</body>
</html>

Query String 을 통해 xml 형식으로 주소를 넘겨주는 JSP 파일

FileName : SearchAddr.jsp

<?xml version="1.0" encoding="ksc5601"?>
<Address>
<%@ page language="java"
 contentType="text/xml; charset=euc-kr"
 import="java.sql.*"
%><% 

 request.setCharacterEncoding("euc-kr");
 
 String dong = request.getParameter("dong");
 
 if(dong == null){
  return;
 }
  
 Connection conn = null; 
 Statement stmt = null; 
 ResultSet rs = null;
  
 try{
 
  conn =  DriverManager.getConnection("proxool.AjaxSample"); 
  stmt = conn.createStatement();
  
  String query = "select * from zipcode where dong like binary '%" + dong + "%'";
 
  rs = stmt.executeQuery(query);
  
  while(rs.next()){
%>
<addr>
<zipcode><%= rs.getString("zipcode") %></zipcode>
<sido><%= rs.getString("sido") %></sido>
<gugun><%= rs.getString("gugun") %></gugun>
<dong><%= rs.getString("dong") %></dong>
<ri><%= rs.getString("ri") %></ri>
<bunzi><%= rs.getString("bunzi") %></bunzi>
<seq><%= rs.getString("seq") %></seq>
</addr>
<%     
  }
  
 rs.close();
 }catch(Exception e){
  e.printStackTrace();
 }finally{
  if(stmt != null) stmt.close();
  if(conn != null) conn.close();
 }
%></Address>

다른 도메인에 접근하려니... 보안 수준을 낮춰야 하넹...

보안수준 --> 낮음 으로 하면 될꺼임 ㅡㅡ;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>XML 로 블로그 읽어오기 </TITLE>

<script language="javascript">
<!--

 var req;

 function GetBlogItem(arg1){

  if(arg1 < 0){
   return false;
  }

  if (document.all) {
   req = new ActiveXObject("Msxml2.XMLHTTP");
  } else {
   req = new XMLHttpRequest();
  }

  if(req){
   req.onreadystatechange = processBlogItem;

   req.open("GET", arg1, true);
   req.send();
  }
 }

 function processBlogItem(){

  // States are: 0 uninitialized
  //      1 loading
  //      2 loaded
  //      3 interactive
  //      4 complete

  if(req.readyState == 4){
   if(req.status == 200){
    var channelXML = req.responseXML.selectNodes("//rss/channel");
    var itemXML = req.responseXML.selectNodes("//rss/channel/item");    
    var contents = "<table border=1 width=100%>"
    
    // TITLE
    contents += "<tr><td height=100 colspan=3><a href='" + channelXML[0].selectSingleNode("link").text  + "'>"
     + channelXML[0].selectSingleNode("title").text  + "</a>"
     + "<BR><font color=gray>" + channelXML[0].selectSingleNode("description").text  + "</font>"
     + "</td></tr>";

    for(var i = 0; i < itemXML.length; i++){
     contents += "<tr>"
      + "<td><a href='" + itemXML[i].selectSingleNode("link").text  + "'>" + itemXML[i].selectSingleNode("title").text+ "</a></td>"
      + "<td>" + itemXML[i].selectSingleNode("category").text + "</td>"
      + "<td>" + itemXML[i].selectSingleNode("pubDate").text + "</td>"
      + "</tr>"
      + "<tr>"
      + "<td colspan=3><PRE>" +  itemXML[i].selectSingleNode("description").text.replace(/<.+?>/g, '') + "</PRE></td>"
      + "</tr>"
    }

    contents += "</table>";

    var divObj = document.getElementById("blogContent");

    divObj.innerHTML = contents;

   }
  }
 }

//-->
</script>
</HEAD>

<BODY>

<form name="TestForm">

<select name="blogList" onchange="GetBlogItem(this.options[this.selectedIndex].value)">
 <option value="-1">--선택--</option>
 <option value="http://blog.naver.com/post/postXMLList.jsp?blogId=yheesung">Tornado의 블로그</option>
 <option value="http://blog.naver.com/post/postXMLList.jsp?blogId=asdkf20">박종복</option>
 <option value="http://blog.naver.com/post/postXMLList.jsp?blogId=lottoangma">lottoangma ♥ skill</option>
</select>
</form>

<div id="blogContent"></div>

</BODY>
</HTML>

function autoHTML( strSrc,optAtt ) {  
 // This function will make http,https,ftp,www and email strings clickable.
  strSrc = strSrc.replace( /\s(https:\/\/|http:\/\/|ftp:\/\/|www.)([^\s]*)/gi, 
 ' <a href=http://$2 ' + optAtt + '>$1$2</a>' ); 
 strSrc = strSrc.replace( /\s([^\s]*@[^\s]*)/gi,' <a href=mailto:$1>$1</a>' ); 
 return strSrc;
} 

function smartRmHTML( strSrc ) {
 // Strip off HTML tags. Better than other removeHtml functions out there.
 return server.HTMLEncode( strSrc.replace( /<[^<|>]+?>/gi,'' ) );
}

function listAllLinks( strSrc,blnClickable,optAtt ) {
// Extract every link in string and list them in order.
 var arrAllLinks
 if ( !blnClickable ) {
 arrAllLinks = strSrc.match(/(https:\/\/|http:\/\/|ftp:\/\/|www.)([^\s]*)/gi );
 return arrAllLinks.join( ',' ); 
 }
 else {
 arrAllLinks = strSrc.match(/(https:\/\/|http:\/\/|ftp:\/\/|www.)([^\s]*)/gi );
 return arrAllLinks.join( ',' ).replace( /(https:\/\/|http:\/\/|ftp:\/\/|www.)([^,]*)/gi,
 '<a href=http://$2 ' + optAtt + '>$1$2</a>' );
 }
}

ASP PHP JSP VB C++ JAVA

<select name="language">
    <optgroup label="선택하세요" style="color:orange"></optgroup>
    <optgroup label="Web" style="color:green">
        <option>ASP</option>
        <option>PHP</option>
        <option>JSP</option>
    </optgroup>
    <optgroup label="Window" style="color:blue">
        <option>VB</option>
        <option>C++</option>
        <option>JAVA</option>
    </optgroup>
</select>

http://www.dynamicdrive.com/

http://www.sitepoint.com/

http://script.aculo.us/

대단...

http://skyzyx.com/downloads/

최근 웹애플리케이션의 최대화두인 Ajax에 관련된 글들을 스크랩 해 봤다.

이미 구글에서 가능성이 입증되었으니 그 활약이 기대된다.

RIA(Rich Internet Application) 환경에서 Flash의 대안이 될 수 있을까?

관련 기사

http://news.com.com/Will+AJAX+help+Google+clean+up/2100-1032_3-5621010.html

http://www.adaptivepath.com/publications/essays/archives/000385.php

http://www.themaninblue.com/writing/perspective/2005/03/02/

한글 소개 자료 (PDF)

http://www.likejazz.com/29692.html

Ajax in Flash

http://www.docuverse.com/blog/donpark/EntryViewPage.aspx?guid=495742b9-af21-4ab2-9ad7-ab0229a6ecf9

Sajax - Simple ajax toolkit for PHP

http://www.modernmethod.com/sajax/

Ajax DEMO (ASP.NET)

http://weblogs.asp.net/pleloup/archive/2005/04/06/397371.aspx

관련 북마크

http://del.icio.us/popular/ajax

SOAP와 XMLHTTP를 사용한 응용프로그램 사용하기

http://www.asptomorrow.net/asptoday/20000718/soap.asp?lectureid=62 

Dynamic HTML and XML_ The XMLHttpRequest Object

http://developer.apple.com/internet/webcontent/xmlhttpreq.html 

Very Dynamic Web Interfaces

http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

Ajax: A New Approach to Web Applications

http://www.adaptivepath.com/publications/essays/archives/000385.php 

AJAX WAS Here - Part 1 : Client Side Framework

http://www.codeproject.com/useritems/AJAXWasHere-Part1.asp

Guide to Using XMLHttpRequest

http://www.webpasties.com/xmlHttpRequest/index.html