javascript - 해당되는 글 3건
1. 단지 $ 축약형 하나만을 위해 Java Script Framework인 prototype.js(이하 프로토타입) 를
 쓸것인가....
  럭셔리한 Java Script Action을 위해 프로토타입 사용을 고민한 사람들이 있을것이다...
 이 소스는 약 200키로바이트로 얼마 안되어 보이지만 웹 브라우저와 클라이언트의 측면에서는
 대단히 무거운 소스이다.
   아래는 이 프레임웍에서 자주 사용되는 소스를 활용한 효과적인 팁중 하나이다.
 
  var $ = function(element) {
      return document.getElementById(elemelt);
  }
  위 소스는 프로토타입에서 단순히 $변수명 입력시에 객체를 리턴하기 위한 일부 기능을 소스로
  표현한 것이다 이 기능을 사용하기 위해서 위 소스를 직접 구현하여 사용하여도 된다.
    또는 아래와 같은 소스도 유용하다
  var $ = document.getElmentById;

2. innerHTML을 위해 길게 늘어쓴 String 연산
   Ajax또는 비동기 페이지를 위해 아래와 같은 소스를 사용한 경험들이 있을 것이다.

   var strHTML = "<div id='abcd'>";
   strHTML += "태그들";
   strHTML += "태그들";
   strHTML += "태그들";
   .....
   strHTML += "</div>";

   하지만 위 코드는 치명적인 단점이 있다(특히 IE에서) 왜냐하면 IE를 대표적으로 브라우저에서
  스트링 연산이 빠르지 않아 클라이언트의 부하가 늘수 있다는 것이다.
   아래는 이를 대처하기 위한 방법이다.
  var strHTML = new Array();
   strHTML.push(" 태그들 ");
   strHTML.push(" 태그들 ");
   strHTML.push(" 태그들 ");
   .....
   retrun strHTML.join("");

   위는 배열을 사용하여 배열에 추가하고 총합하여 리턴해주는 방식이다. 이 방식이 상위의
  스트링 연산의 방식보다 속도측면에서 개선할 수 있다고 한다.

3. Document 모델 보다는 DOM 형식의 ID로 찾기
   처음 또는 초보 개발자들은 document.(Form 이름).(컨트롤 이름).(속성) = "값"; 이런 방식으로
  구현해본 경험이 있을것이다.. 이는 W3C 표준에서는 document.getElementByID("ID 명").속성
  = "값"
과 같은 형태로 사용하기를 권장하고 있다.

4. Pseudo code 사용의 자제
   아래와 같은 코드를 대부분 사용해 본적이 있을 것이다.
   <a href ="javascript:goTo();">여기로 이동</a>
  
   위 사항 보다는 아래와 같은 방식을 추천한다.
 
   <a href="#" onclick="goTo();">여기로 이동</a>  또는
    <a href = "anyURL" onclick = "goTo();return false;">여기로 이동</a>
  
   이유는 코드 가독성 및 표준개발 가이드에 입각한 내용이라고 한다.

- 위 내용은 Daum Communication 구경택님의 자료를 바탕으로 했으며 저작권은 http://no7do.tistory.com/ 의 블로거 김도영과 구경택님에게 있음-


|
function roundTable(objID) {
      var obj = document.getElementById(objID);
      var Parent, objTmp, Table, TBody, TR, TD;
      var bdcolor, bgcolor, Space;
      var trIDX, tdIDX, MAX;
      var styleWidth, styleHeight;

      // get parent node
      Parent = obj.parentNode;
      objTmp = document.createElement('SPAN');
      Parent.insertBefore(objTmp, obj);
      Parent.removeChild(obj);

      // get attribute
      bdcolor = obj.getAttribute('rborder');
      bgcolor = obj.getAttribute('rbgcolor');
      radius = parseInt(obj.getAttribute('radius'));
      if (radius == null || radius < 1) radius = 1;
      else if (radius > 6) radius = 6;

      MAX = radius * 2 + 1;
     
      /*
              create table {{
      */
      Table = document.createElement('TABLE');
      TBody = document.createElement('TBODY');

      Table.cellSpacing = 0;
      Table.cellPadding = 0;

      for (trIDX=0; trIDX < MAX; trIDX++) {
              TR = document.createElement('TR');
              Space = Math.abs(trIDX - parseInt(radius));
              for (tdIDX=0; tdIDX < MAX; tdIDX++) {
                    TD = document.createElement('TD');
                   
                    styleWidth = '1px'; styleHeight = '1px';
                    if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
                    else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
                    else if (radius > 2) {
                            if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
                            if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
                    }

                    if (styleWidth != null) TD.style.width = styleWidth;
                    if (styleHeight != null) TD.style.height = styleHeight;

                    if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor;
                    else if (tdIDX > Space && Space < MAX - tdIDX - 1)  TD.style.backgroundColor = bgcolor;
                   
                    if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
                    TR.appendChild(TD);
              }
              TBody.appendChild(TR);
      }

      /*
              }}
      */

      Table.appendChild(TBody);
     
      // insert table and remove original table
      Parent.insertBefore(Table, objTmp);
}
</script>
사용법)
테이블에 아이디태그가 있어야 합니다.
전 한번 변환하는게 몇개 안되어서 아이디를 입력받아 함수를 실행하도록 했지만, 만약 많은 양을 한꺼번에 변환해야할 경우에는 함수를 변경해서 사용하시기 바랍니다. ^^

위 스크립트를 HTML문서에 포함하고(당연히...),
roundTable(테이블의 아이디문자열);
처럼 함수를 실행시키시면 됩니다.
단, 이 때 원래의 테이블에서 raidus(둥근 정도) 값과 테두리와 배경색의 색상값을 지정하도록 되어있습니다.

int radius : 둥근 정도입니다. 가능한 값은 1 <= radius<= 6 입니다. radius 를 계산하는 부분의 규칙을 잘 몰라서 우선은 한정시켜놨습니다. 나중에 모서리 픽셀을 제대로 구할 수 있게 되면 범위를 수정하겠습니다.

string rborder : 테두리의 색상값. #FFFFFF 와 같은 16진수 색상값과 white 와 같은 색상지시문자열 모두 사용가능.
string rbgcolor : 라운드테이블의 배경색. 배경색은 라운드 테이블 테두리 선 안쪽의 색상을 말하는 것입니다. rborder와 마찬가지로 16진수 색상값과 색상지시문자열 모두 사용가능합니다.

예)
<table id="ta" width="300" height="150" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
      <td>1</td>
      <td>1</td>
</tr>
<tr>
      <td colspan="2">테스트</td>
</tr>
</table>
<script>roundTable("ta");</script>

자세한 것은 링크를 참조하시면 됩니다.

브라우저 정보)
Internet Explorer 5.0 and later
Mozilla 1.5
Firebird 0.6 한글판
Netscapce Navigator 7

위의 두 브라우저에서는 제가 테스트해봤습니다. 다른 브라우저에서도 작동이 잘되면 말씀해주시기 바랍니다. (이 부분은 계속 업데이트 됩니다)
|

function get_QueryString()
{
    var Query_arr = new Object();
    var query = location.search.substring(1);    
    var pairs = query.split("&");
   
    for(var i = 0; i < pairs.length; i++)
    {
         var pos = pairs[i].indexOf('=');
         if (pos == -1)
            continue;
         var argname = pairs[i].substring(0,pos);    
         var value = pairs[i].substring(pos+1);
         args[argname] = unescape(value);
    }
   
    return Query_arr;
}


Split해주는 함수구요 호출하는 방식은


var args = getArgs();
if (args.title)

{
title = args.title;
 alert(title);
  }


위같이 객체를 받아와서 처리하시면 됩니다


|

No7Do's Blog is powered by Daum & tistory