'DHTML'에 해당되는 글 4건

  1. [2007/12/13] URL Parser
  2. [2007/12/13] Application Loader
  3. [2007/12/13] HTML Object 생성하기

URL Parser

[작렬허접코딩/자바스크립트]

자바스크립트로 URL을 parsing 하는 prototype

URLParser.js

URLParser.js



URLParser = function() {
 this.LF = "\n";
 this.debugData = "";
 
 this.href = document.location.href;
 this.protocol = document.location.protocol;
 this.host = document.location.host;
 this.hostname = document.location.hostname;
 this.port = document.location.port;
 this.pathname = document.location.pathname;
 this.search = document.location.search;
 this.hash = document.location.hash;
 
 // 파라미터 배열
 this.paramList = new Array();
 
 // URL의 파라미터를 파싱한다.
 this.parseParams();
}

URLParser.prototype = {
 /**
  * =====================================================
  * 파라미터를 파싱한다.
  * =====================================================
  */
 parseParams: function() {
  if(this.search=="" ||
   this.search=="?" ||
   this.search=="undefined" ||
   this.search==null ||
   this.search=="null")
    return;
 
  // 각각의 파라미터를 분해한다.
  var item = null;
  var param = null;
  var tmp = this.search.substr(1);
  var tmpArr = tmp.split("&");
  if(tmpArr.length==0)
   return;
 
  // 분해한 각각의 파라미터 문자열을 KEY, VALUE로 분해한다.
  for(var idx=0; idx<tmpArr.length; idx++) {
   item = tmpArr[idx].split("=");
   if(item.length!=2) {
    alert("Incorrect Parameter - " + item);
    continue;
   }
   
   param = new URLParameter(item[0], item[1]);
   this.paramList[this.paramList.length] = param;
  }
 },
 
 /**
  * =====================================================
  * 파싱된 파라미터를 쿼리 스트링으로 조합하여 리턴한다.
  * =====================================================
  */
 getParamString: function() {
  var buf = "";
  if(this.paramList.length==0)
   return buf;
 
  buf = "?";
  for(var idx=0; idx<this.paramList.length; idx++) {
   buf += this.paramList[idx].getString();
  }
  return buf;
 },
 
 /**
  * =====================================================
  * 전체 URL 문자열을 조합하여 리턴한다.
  * =====================================================
  */
 getFullString: function() {
  var buf = "";
  buf += this.getProtocol() + "//";
  buf += this.getHost();
  buf += this.getPort()=="" || this.getPort()==80 ? "" : ":" + this.getPort();
  buf += this.getPathName();
  buf += this.getParamString();
  buf += this.getHash()=="" || this.getHash().length==0 ? "" : this.getHash();
  return buf;
 },
 
 /**
  * =====================================================
  * 해당 Key값을 가지는 파라미터가 있는지 확인한다.
  * =====================================================
  */
 existParam: function(key) {
  var result = false;
  if(this.paramList.length==0)
   return result;
 
  for(var idx=0; idx<this.paramList.length; idx++) {
   var param = this.paramList[idx];
   if(param.getKey()==key) {
    result = true;
    break;
   }
  }
  return result;
 },
 
 /**
  * =====================================================
  * 해당 Key값에 설정된 파라미터값을 리턴한다.
  * =====================================================
  */
 getParamValue: function(key) {
  if(!this.existParam(key))
   return "";
   
  var result = "";
  for(var idx=0; idx<this.paramList.length; idx++) {
   var param = this.paramList[idx];
   if(param.getKey()==key) {
    result = param.getValue();
    break;
   }
  }
  return result;
 },
 
 /**
  * =====================================================
  * 각각의 필드값을 리턴
  * =====================================================
  */
 getHref: function() {
  return this.href;
 },
 getProtocol: function() {
  return this.protocol;
 },
 getHost: function() {
  return this.host;
 },
 getHostName: function() {
  return this.hostname;
 },
 getPort: function() {
  return this.port;
 },
 getPathName: function() {
  return this.pathname;
 },
 getSearch: function() {
  return this.search;
 },
 getHash: function() {
  return this.hash;
 },
 
 /**
  * =====================================================
  * 각각의 필드값을 셋팅
  * =====================================================
  */
 setHref: function(val) {
  this.href = val;
 },
 setProtocol: function(val) {
  this.protocol = val;
 },
 setHost: function(val) {
  this.host = val;
 },
 setHostName: function(val) {
  this.hostname = val;
 },
 setPort: function(val) {
  this.port = val;
 },
 setPathName: function(val) {
  this.pathname = val;
 },
 setSearch: function(val) {
  this.search = val;
 },
 setHash: function(val) {
  this.hash = val;
 },
 
 /**
  * =====================================================
  * URL 정보를 리턴한다.
  * =====================================================
  */
 debug: function() {
  this.debugData = "";
  this.debugData += "HREF : " + this.href + this.LF;
  this.debugData += "PROTOCOL : " + this.protocol + this.LF;
  this.debugData += "HOST : " + this.host + this.LF;
  this.debugData += "HOSTNAME : " + this.hostname + this.LF;
  this.debugData += "PORT : " + this.port + this.LF;
  this.debugData += "PATHNAME : " + this.pathname + this.LF;
  this.debugData += "SEARCH : " + this.search + this.LF;
  this.debugData += "HASH : " + this.hash + this.LF;
  return this.debugData;
 }
}

URLParameter = function(key, value) {
 this.key = key;
 this.value = value;
}

URLParameter.prototype = {
 /**
  * =====================================================
  * Key 값을 셋팅한다.
  * =====================================================
  */
 setKey: function(key) {
  this.key = key;
 },
 /**
  * =====================================================
  * Key 값을 리턴한다.
  * =====================================================
  */
 getKey: function() {
  return this.key;
 },
 /**
  * =====================================================
  * Value 값을 셋팅한다.
  * =====================================================
  */
 setValue: function(val) {
  this.value = val;
 },
 /**
  * =====================================================
  * Value 값을 리턴한다.
  * =====================================================
  */
 getValue: function() {
  return this.value;
 },
 /**
  * =====================================================
  * KEY=VALUE 문자열을 리턴한다.
  * =====================================================
  */
 getString: function() {
  return this.key + "=" + this.value;
 }
}

이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/12/13 13:52 2007/12/13 13:52

Application Loader

[작렬허접코딩/자바스크립트]

자바스크립트에서 필요한 하위 모듈을 Loading 하는 간단한 예제입니다.


/**
 * =====================================================
 * JAVASCRIPT를 로딩하는 function
 * =====================================================
 */
function LoadGionsScript(_url) {
    document.write( '<scr' + 'ipt type="text/javascript" src="' + _url + '" onerror="alert(\'Error loading \' + this.src);"><\/scr' + 'ipt>' ) ;
}

/**
 * =====================================================
 * CSS를 로딩하는 function
 * =====================================================
 */
function LoadGionsCss(_url) {
    document.write( '<link href="' + _url + '" type="text/css" rel="stylesheet" onerror="alert(\'Error loading \' + this.src);" />' ) ;
}

/**
 * =====================================================
 * 로딩할 javascript 리스트 정의
 * 로딩되는 순서를 바꾸지 말 것
 * =====================================================
 */
var _GIONS_SCRIPT_LIST = new Array();
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "GionsCommon";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "GionsDAO";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "GionsTour";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "GionsPlayer";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "GionsSchedule";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "GionsNsrresult";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "GionsNstresult";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "Paging";
_GIONS_SCRIPT_LIST[_GIONS_SCRIPT_LIST.length] = "Util";

/**
 * =====================================================
 * 기본 CSS를 로딩
 * =====================================================
 */
LoadGionsCss(_CSS_BASE + "default.css");
LoadGionsCss(_CSS_BASE + "lightbox/lightbox.css");

/**
 * =====================================================
 * 블로그에서 사용하는 JavaScript를 로딩
 * =====================================================
 */
if(_GIONS_SCRIPT_LIST.length>0) {
    for(var idx=0; idx<_GIONS_SCRIPT_LIST.length; idx++) {
        var sFile = _GIONS_SCRIPT_BASE + _GIONS_SCRIPT_LIST[idx] + ".js";
        LoadGionsScript(sFile);
 }
}

이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/12/13 13:46 2007/12/13 13:46

HTML Object 생성하기

[작렬허접코딩/자바스크립트]

Object, DIV, Select, A, Img, Input, Font 등 Object 생성하기

/**
 * =====================================================
 * Object 생성
 * @ Parameter
 * oType : Object Type
 * oName : Object 이름
 * oStyle : 기본 Object Style
 * =====================================================
 */
function createObject(oType, oName, oStyle) {
    var obj = document.createElement(oType);
    if(oName!=null && oName!=undefined && oName.length>0) {
        obj.setAttribute("name", oName);
        obj.setAttribute("id", oName);
    }
    if(oName!=null && oName!=undefined && oName.length>0) {
        obj.style.cssText = oStyle;
    }
    return obj;
}

/**
 * =====================================================
 * Div 생성
 * @ Parameter
 * oName : Div 이름
 * oStyle : 기본 Div Style
 * =====================================================
 */
function createDiv(oName, oStyle) {
    var obj = document.createElement("div");
    if(oName!=null && oName!=undefined && oName.length>0) {
        obj.setAttribute("name", oName);
        obj.setAttribute("id", oName);
    }
    if(oName!=null && oName!=undefined && oName.length>0) {
        obj.style.cssText = oStyle;
    }
    return obj;
}

/**
 * =====================================================
 * Input 생성
 * @ Parameter
 * oType : Input type(hidden, text ...)
 * oName : Input 이름
 * oValue : Input Object에 셋팅될 초기값
 * =====================================================
 */
function createInput(oType, oName, oValue) {
    var obj = document.createElement("input");
    obj.setAttribute("type", oType);
    obj.setAttribute("name", oName);
    obj.setAttribute("id", oName);
    obj.setAttribute("value", oValue);
 
    return obj;
}

/**
 * =====================================================
 * Input 생성
 * 생성시에 기본 옵션을 포함하여 생성
 * IE전용(Mozila 계열에서는 에러가 발생한다.)
 * @ Parameter
 * oOption : Input Object 생성시에 기본으로 셋팅될 옵션
 * oType : Input type(hidden, text ...)
 * oName : Input 이름
 * oValue : Input Object에 셋팅될 초기값
 * =====================================================
 */
function createInputWithOpt(oOption, oType, oName, oValue) {
    //var obj = document.createElement("<input " + oOption + "></input>");
    var obj = document.createElement("<input " + oOption + ">");
    obj.setAttribute("type", oType);
    obj.setAttribute("name", oName);
    obj.setAttribute("id", oName);
    obj.setAttribute("value", oValue);
 
    return obj;
}

/**
 * =====================================================
 * Select 생성
 * @ Parameter
 * oName : Select 이름
 * optList : Select에 들어갈 Option 항목들 (Array)
 * =====================================================
 */
function createSelect(oName, optList) {
    var obj = document.createElement("select");
    obj.setAttribute("id", oName);
    obj.setAttribute("name", oName);
    obj.className = "Input_free";
 
    // Select 항목을 생성한다.
    if(optList.length>0) {
        for(var idx=0; idx<optList.length; idx++) {
            var tmpArr = optList[idx].split(",");
            var optionItem = new Option(tmpArr[1], tmpArr[0]);
            obj.appendChild(optionItem);
            obj.options[obj.options.length-1].text = tmpArr[1];
        }
    }
    return obj;
}

/**
 * =====================================================
 * Select 생성
 * 생성시에 기본 값을 셋팅
 * @ Parameter
 * oName : Select 이름
 * optList : Select에 들어갈 Option 항목들 (Array)
 * val : 기본으로 선택될 값
 * =====================================================
 */
function createSelectWithVal(oName, optList, val) {
    var obj = document.createElement("select");
    obj.setAttribute("id", oName);
    obj.setAttribute("name", oName);
    obj.className = "Input_free";
 
    // Select 항목을 생성한다.
    if(optList.length>0) {
        for(var idx=0; idx<optList.length; idx++) {
            var tmpArr = optList[idx];
            if(tmpArr=="" || tmpArr==null)
                continue;
            else
                tmpArr = optList[idx].split(",");
   
            var optionItem = new Option(tmpArr[1], tmpArr[0], false, tmpArr[0]==val ? true : false);
            obj.appendChild(optionItem);
            obj.options[obj.options.length-1].text = tmpArr[1];
        }
    }
    return obj;
}

/**
 * =====================================================
 * A Tag 생성
 * @ Parameter
 * oSrc : A Tag의 src 속성
 * oTarget : A Tag가 클릭되었을 때 Target
 * =====================================================
 */
function createA(oSrc, oTarget) {
    var obj = document.createElement("A");
    obj.setAttribute("href", oSrc);
    if(isValidStr(oTarget))
        obj.setAttribute("target", oTarget);
   
    return obj;
}

/**
 * =====================================================
 * IMG Tag 생성
 * @ Parameter
 * oName : img Object 이름
 * oWidth : 이미지 width
 * oHeight : 이미지 height
 * =====================================================
 */
function createImage(oName, oWidth, oHeight) {
    var obj = document.createElement("img");
    obj.setAttribute("src", getImageURL(oName));
    obj.setAttribute("border", 0);
    obj.setAttribute("align", "absmiddle");
 
    if(isValidStr(oWidth))
        obj.setAttribute("width", oWidth);
    if(isValidStr(oHeight))
        obj.setAttribute("height", oHeight);
    return obj;
}

/**
 * =====================================================
 * IMG Tag 생성
 * 생성시에 기본 옵션을 포함하여 생성
 * IE전용(Mozila 계열에서는 에러가 발생한다)
 * @ Parameter
 * oOption : 초기에 셋팅될 옵션
 * oName : img Object 이름
 * oWidth : 이미지 width
 * oHeight : 이미지 height
 * =====================================================
 */
function createImageWithOpt(oOption, oName, oWidth, oHeight) {
    var obj = document.createElement("<img " + oOption + "></img>");
    obj.setAttribute("src", getImageURL(oName));
    obj.setAttribute("border", 0);
    obj.setAttribute("align", "absmiddle");
 
    if(isValidStr(oWidth))
        obj.setAttribute("width", oWidth);
    if(isValidStr(oHeight))
        obj.setAttribute("height", oHeight);
     return obj;
}

/**
 * =====================================================
 * Font Tag 생성
 * @ Parameter
 * color : font color
 * =====================================================
 */
function createFont(color) {
    var obj = document.createElement("font");
    if(isValidStr(color))
        obj.setAttribute("color", color);
 
    return obj;
}

이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/12/13 13:36 2007/12/13 13:36