Fire JS Bin - Takeover

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

// 자신의 이름을 걸고 코딩합니다. 하늘을 우러러 한점 부끄럼없이 작업하세요!
/**
 * RemoteView5
 * 
 * @author yhkim
 * @author firejune(to@firejune.com)
 * @copyright © 2009 RSUPPORT. All rights Reserved.
 * 
 * #reversion 63
 */

// 절대로 중복 코드를 찍어 내지 마세요! 그 코드들은 분명히 독이 되어 올아옵니다.
// 메이저 브라우저들의 특징을 숙지하세요.(IE, Firefox, Chrome, Safari) 
// 네임스페이스를 효율적으로 사용하세요.
// 사람이 알아볼수 있는 변수, 함수명을 사용하세요.(모듈, 액션까지 통일하면 삶이 편해짐) 
// UTF-8인코딩은 기본입니다.(아닌 경우 encodeURI 등에서 오류 발생)
// 아이프레임 및 주요한 컨텐츠가 담긴 플래시 사용금지(검색결과에 달랑 타이틀만 나오기를 바라지 않는다면)
// 레이아웃 디자인에 Table 요소를 사용하지 마세요.
// 변수 생성시 단수/복수, 과거/현재를 구분하는 버릇을 가지세요.
// 필요이상으로 자바스크립트 또는 브라우저 플러그인에 의존하지 마세요.
// 인덴트(들여쓰기)는 공백 2칸 또는 Tab 중 하나로 작업자간 통일하세요.
// 가독성을 위하여 CSS 코딩에는 80컬럼을 줄바꿈을 사용하세요.
// CSS 작성시 선택자를 활용하세요.
// 서드파티 자바스크립트 라이브러리를 적극 수용하되 남용하지는 마세요.
// 서드파티 자바스크립트 라이브러리의 코드를 조작하지 마세요.
// 정적인 파일의 경로는 절대경로를 사용하세요.
// 자바스크립트 비중이 많은 프로젝트는 파일을 분산 시키세요.
// 기초 HTML 파싱은 서버를 중심으로 하세요.
// 유사한 종류의 비동기식 통신을 여러번 호출하지 마세요.
// 재사용되지 않는 변수 선언을 피하세요.
// DOM 이벤트 할당 수와 버그 발생 빈도는 비례한다는 사실을 명심하세요.
// 소스리파지 토리에 커밋할 때에는 반드시 커밋한 내용을 명시하세요.
// 릴리즈 노트를 반드시 작성하세요.(이 짓만 잘해도 업무보고할 필요가 없음)
// 트랙위키를 적극 활용하세요.(이 짓을 잘하면 문서화에 별도로 시간을 투자하지 않아도 됨)

// jQuery의 장점?

// jQuery가 추천하는 네임스페이스 관리
  (function($) {
    // do something...
  });

/* Basic javascript codeing */
  var num = 0 * 'n'; // => ?
  typeof {};// object, string, number, boolean, function

/* refactoring */
  var v1 = 2;
  var v2 = 3;
  var v3 = 4;
  var v4 = 5;

var v1 = 1, v2 = 2, v3 = 3, v4 = 4;

var myType;
  switch(type) {
    case 'type1':
      myType = 'do something...';
      break;
    case 'type2':
      myType = 'do something...';
      break;
    case 'type3':
      myType = 'do something...';
      break;
  };

var myType = ({
    'type1': 'do something...',
    'type2': 'do something...',
    'type3': 'do something...'
  })[type];

var value;
  if (n) {
    value = n;
  } else {
    value = 1;
  }

var value;
  if (n) value = n;
  else value = 1;

var value = n ? n : 1; // => ?

var value = n || 1; // => ?

if (term) {
    myFunction();
  }

if (term) myFunction();
  term && myFunction();

callback && callback();

/* Debugging */
  console.log();
  console.info();
  console.warn();
  console.error();

// for console debugging
  if (window['console'] === undefined || console.log === undefined) console = {
    log: function() {}, info: function() {}, warn: function() {}, error: function() {}
  };

/* Function */
  function myFunc(){
    // do something...
  }
  var myFunc = function() {
    // do something...
  };

/* OOP */
  function Class() {
    // do something...
  }
  Class.prototype.set = function() {
    this.id = 'firejune';
  };
  Class.prototype.get = function() {
    return this.id;
  };

var myClass = new Class();
  myClass.id // => ?

// 네임스페이스 속이기
  Function.prototype.scope = function() {
    var fn = this,
    args = Array.prototype.slice.call(arguments),
    object = args.shift();
    return function() {
      return fn.apply(object, args.concat(Array.prototype.slice.call(arguments)));
    };
  };

Class.prototype.test = function() {
    return function() {
      return this.id;
    }.scope(this);
  };

/* jQuery DOM selector */
  // CSS3 셀렉터 사용

/* jQuery chain method */

/* events */
  function rund(event) {
    if ($.browser.msie) event = $.event.fix(event); // fixed for msie
    // do something....
    event.preventDefault();
    event.stopPropagation();
  }

/* JSON */
  JSON.stringify
  JSON.parse

/* PRO */
  document.cookie // No! 4KB
  window.name // 2MB
  localStorage || globalStorage[location.host] // 5MB ~ 10MB per domain

/**
   * extend PC use time!
   * 
   * @param {Object} DOM element
   * @return {Boolean} false
   * 
   */
  function extendTime(form) {
    return $k.ajaxState == 'running'
      || !confirm($k.i18n[$k.lang]["Are you sure to extend times the PC of your child?"])?
      false : $k.ajaxRequest(form, function(json) {
        $(form)
          .prevAll('div.black_14:first').html(json.timeLabel)
            .prevAll('div.timeline:first')
              .children('div').css('width', json.gauge + '%')
              .end()
            .end()
          .end().replaceWith('<div class="extend-time"><p>' + json.optionLabel + '</p></div>');
        alert($k.i18n[$k.lang]["Successed."]);
      }, null, null, 'json');
  }

/**
   * validator
   * 
   * @param {String} validation type
   * @param {Object} Input element
   * @param {Object|RegEx|String} term
   * @return {Boolean} isInvalid
   * 
   */
  function _validator(type, input, term, pos) {
    console.log('_validator', arguments);

input = $(input);
    var invalidMsg = null, value = input.val(), __takeMsg = function(lang, src, val) {
      invalidMsg = $k.i18n[$k.lang][lang].replace(src, val);
    };

if (type != 'required' && $.trim(value).length == 0)
      __takeMsg("Please enter this information.");
    else ({
      'length': function() {
        value.length > term.max
          && __takeMsg("This characters is too long. Please enter a shorter.", 'ｎ', term.max);
        value.length < term.min
          && __takeMsg("This characters is too short. Please enter a loonger.", 'ｎ', term.min);
      },
      'limit': function() {
        value * 1 > term.max
          && __takeMsg("This number is too big. Please enter a smaller.", 'ｎ', term.max);
        value * 1 < term.min
          && __takeMsg("This number is too small. Please enter a bigger.", 'ｎ', term.min);
      },
      'date': function() {
        !/^[0-9]{4}-\d{2}-\d{2}$/.test(value)
          && __takeMsg("Is not correct the date format.");
      },
      'url': function() {
        !/(www.)?.+?\..+(\s|$)/g.test(value)
          && __takeMsg("Is not correct the URL format.");
      },
      'email': function() {
        !/^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/.test(value)
          && __takeMsg("Is not correct the e-mail format.");
      },
      'duplicate': function() {
        term.filter(function() {return value == this.value && input[0] != this;}).length
          && __takeMsg("Duplicate ID exists.");
      },
      'match': function() {
        value != term
          && __takeMsg("These characters don't match the characters in the current information.");
      },
      'required': function() {
        $.trim(value).length == 0
          && __takeMsg("Required information is missing.");
      },
      'search': function() {
        !term.test(value)
          && __takeMsg("Is not correct the characters format.");
      },
      'by': function() {
        !$.trim(term)
          && __takeMsg("Required e-mail is missing.");
      }
    })[type]();

if (!invalidMsg) return null;
    if (pos) _displayError(input, invalidMsg, pos);
    else alert(invalidMsg);

return invalidMsg;
  }

/**
   * save settings
   * 
   * @param {Object} DOM element
   * @param {Undefined} Undefined
   * 
   */
  function saveSettings(form) {
    console.log('saveSettings', arguments);

if (form && !confirm($k.i18n[$k.lang]["Are you sure to save?"])) return false;

$('p.error').remove();
    $('.error').removeClass('error');
    if (!form) form = 'form';

var input;
    $(form).find('input[name][type!=radio][type!=hidden][readonly!=readonly]').each(function(i) {
      this.name.match(/^(new|confirm)-password/) && this.value
        && !$k._validator('required', $('input[name=' + this.name.replace(/new|confirm/, 'current') + ']'), null, 'right')
        && $k._validator('length', this, {min: 6, max: 12}, 'right');
      this.name.match(/^child-id-[0-9]/) && this.value
        && !$k._validator('length', this, {min: 4, max: 12}, 'bottom')
        && !$k._validator('duplicate', this, $('input[name]').filter(function() { return this.name.match(/^child-id-[0-9]/); }), 'bottom')
        && $k._validator('search', this, /^[a-zA-Z0-9]{4,12}$/, 'bottom');
      this.name.match(/^(new|confirm)-email/) && this.value
        && $k._validator('email', this, null, 'right');
      this.name.match(/-password/) && this.value
        && !$k._validator('length', this, {min: 4, max: 12}, 'right')
        && $k._validator('search', this, /^[a-zA-Z0-9]{4,12}$/, this.name.match(/child-/)? 'bottom' : 'right')
      this.name.match(/^confirm-(password|email)/) && (this.value &&
        (input = $('input[name=' + this.name.replace('confirm', 'new') + ']')))
          && !$k._validator('match', this, input.val(), 'right')
          && $k._validator('match', input, $(this).val(), 'right');
      /*
      this.name.match(/^child-(password|name|id)/)
        && !(this.name.match(/name/) && $k._validator('length', this, {min: 1, max: 12}, 'bottom'))
        && !(this.name.match(/password/)
          && $('input[name=' + this.name.replace('password', 'id') + ']').attr('readonly'))
        && $k._validator('required', this, null, 'bottom');
      */
      this.name.match(/^child-(name|id)/)
        && $(this).parents('tr').css('opacity') == 1
        && !(this.name.match(/name/)
          && $k._validator('length', this, {min: 1, max: 12}, 'bottom'))
        && !(this.name.match(/id/)
        && $('input[name=' + this.name.replace('id', 'id') + ']').attr('readonly'))
          && $k._validator('required', this, null, 'bottom');
      this.name.match(/^pc-[0-9]/)
        && $k._validator('length', this, {min: 1, max: 12}, 'right');
      this.name.match(/^(block|unlock)-notify/) && this.checked
        && $k._validator('by', this, $('input[name]').filter(function(){
          return this.name.match(/-email-/) && $(this).val();
        }).val(), 'right');
    });

var error = $('.error:first').focus();
    if (error.get(0)) return false;

return $k.ajaxRequest(form, function(html) {
        window.location.reload();
      }, function(req) {
        var json = eval('(' + req.responseText + ')');
        for (var name in json) $k._displayError($('input[name=' + name + ']'), json[name], 'right');
      });
  }

/**
    * dinamic file include
    * 
    * @param {Object} files array
    * 
    * TODO: 중복파일 여부를 DOM에서 검색하지 않고 캐시에서 찾게 하기
    * 
    */
  function include(files, callback) {
    files.length && $.each(files, function(i, file) {
      console.log('include', file);

if (file.tagName && file.tagName.match(/SCRIPT|LINK/) && !($(file.tagName + '[src=' + $(file).attr('src') + ']').length || $(file.tagName + '[href=' + $(file).attr('href') + ']').length)) {
        var fire = function() {
          i + 1 == files.length && callback && callback();
          //file.type == 'text/javascript' && $(file).remove();
        }, head = document.getElementsByTagName('head')[0];

if ($.browser.safari && navigator.userAgent.match(/Chrome/)) {
          $(head).append($(file));
          fire();
        } else {
          head.insertBefore(file = $.extend(document.createElement(file.tagName), {
            'SCRIPT': {type: file.type, src: file.src},
            'LINK': {type: file.type, href: file.href, rel: file.rel}
          } [file.tagName]), head.firstChild);

if ($.browser.msie) file.onreadystatechange = function() {
              /loaded|complete/.test(file.readyState) && fire();
            };
          else {
            if (file.href) {
              if ($.browser.opera) file.onload = fire;
              else (function() {
                //FF, Safari, Chrome
                try {
                  file.sheet.cssRule;
                } catch(e) {
                  return setTimeout(file, 20);
                };
                fire();
              })();
            } else file.onload = fire; //FF, Safari, Opera
          }
        }
      };
    });
  }

event.preventDefault();
      event.stopPropagation();
      return false;
    });
  }

$.extend($.RV5, {
    getUserList: getUserList,
    fnInfoSave: fnInfoSave,
    GetAuthList: GetAuthList,
    exportExcel:exportExcel
  });

/*** setTimeout syntax ***/
// 주의: IE계열 브라우저에서는 작동하지 않음
function slidePages(argument1, argument2, argument3) {
  // do something kamebook@kame.co.kr과 jminbin@empal.com
}
setTimeout(func, 10, argument1, argument2, argument3);
/*
// Suck!
setTimeout(function(){
  slidePages(argument1, argument2, argument3);
}, 10);
*/

/*** smart value align ***/
var str = str || null; // var str = (str) ? str : null; <-- Suck!
function boo(str) {
  return str || null; // return (str) ? str : null; <-- Suck!
}

/*** short ++ ***/
var hue = 123;
for (var i = 0; i > 10; i++) {
  hue += 0.1; // hue = hue + 0.1 <-- Suck!
}

/* 효율적인 배열의 반복문 처리 */
var rgbToHex = function(rgbArray) {
  var hexchars = "0123456789ABCDEF";
  return '#' + rgbArray[0].map(function(c) {
    c = c || 0;
    c = parseInt(c, 10);
    if (isNaN(c)) c = 0;
    c = Math.round(Math.min(Math.max(0, c), 255));
    return hexchars.charAt((c - c % 16) / 16) + hexchars.charAt(c % 16);
  }).join('').strip();
};

/* 배열에서 특정 값 제외하기 */
var arr = [1, 2, 3];
arr = arr.reject(function(w) { return w == 2});
//-> arr = [1, 3];

/* 2차 방정식(quadratic equation) 계산  */
var currentHeight = 100;
var newHeight = Math.round(currentHeight + currentHeight * 0.33);
var originalHeight = Math.round(newHeight - newHeight * (1 - 100 / 133));

/* 사각형 비율 구하기 */
var width = 640;
var hegiht = 480;
var changeValue = 800;
var newHegiht = Math.round(width * changeValue / hegiht); // 너비
var newWidth = Math.round(hegiht * changeValue / width); // 높이

/* 클래스 생성과 동시에 변수 할당 */
var MyClass = new (Class.create({
  initialize: function(){
    this.user = 'Firejune';
  },
  run: function(){
    alert(this.user);
  }
}))();
//MyClass.run() //-> Firejune

/* effect.js의 fps 조정하기 */
Effect.DefaultOptions.fps = 100; //100= assume 66fps max.

/* invoke 사용법 */
this.items.pluck('element').invoke('setStyle', {
  position: "relative",
  top: "-" + offset + "px"
}, this)

/* expression 사용법 */
var els = form.select('input[disabled]input[type!="button"], select[disabled]');

/* 단순 스위치 처리 */
var module;
switch(this.module) {
  case 'todo' : module = '할일'; break;
  case 'calendar' : module = '달력'; break;
  case 'archive' : module = '공책'; break;
}
var module = {todo: '할일', calendar: '달력', archive: '공책'}[this.module];

/* methods of the Math object */
Math.abs(a)     // 절대값 반환
Math.acos(a)    // cosin의 역함수를 라디안 단위로 반환
Math.asin(a)    // sin의 역함수를 라디안 단위로 반환
Math.atan(a)    // tan의 역함수를 라디안 단위로 반환
Math.atan2(a,b) // 인자값으로 넘겨진 y와 x축 값을 x축과 각(라디안)으로 나타내어 반환
Math.ceil(a)    // 크거나 같은 최소의 정수를 반환
Math.cos(a)     // cos값 반환
Math.exp(a)     // E를 넘겨진 독립변수로 거듭제곱한 값을 반환
Math.floor(a)   // 작거나 같은 최대의 정수를 반환
Math.log(a)     // 자연로그를 반환
Math.max(a,b)   // 인자로 넘겨진 수 중 큰 수 반환
Math.min(a,b)   // 인자로 넘겨진 수 중 작은 수 반환
Math.pow(a,b)   // 첫번째 인자를 두밴째 인자로 거듭제곱
Math.random()   // 0에서 1사이의 난수 반환
Math.round(a)   // 반올림값
Math.sin(a)     // sin값 반환
Math.sqrt(a)    // 제곱근 반환
Math.tan(a)     // tan값 반환

/* ‘with’ or without? */
Foo = {
  Bar: {
    Baz: {
      Qux: {
        Quux: function(){}
      }
    }
  }
};

// Plain call
console.time('test');
  for (var i=0; i<100000; ++i) {
    Foo.Bar.Baz.Qux.Quux();
  }
console.timeEnd('test'); // 562 ms

// "with" outside the loop
console.time('test');
  with(Foo.Bar.Baz.Qux) {
    for (var i=0; i<100000; ++i) {
      Quux();
    }
  }
console.timeEnd('test'); // 359 ms

// with inside the loop
console.time('test');
for (var i=0; i<100000; ++i) {
  with(Foo.Bar.Baz.Qux) {
      Quux();
  }
}
console.timeEnd('test'); // 1891 ms

// aliasing
console.time('test');
  for (var i=0, q=Foo.Bar.Baz.Qux.Quux; i<100000; ++i) {
    q();
  }
console.timeEnd('test'); // 422 ms

//FPS 구하기
var elapsedTime = 0, frames = 0, updatedTime = new Date().getTime();
function enterFrame(){
  var now = new Date().getTime();
  var delta = now - updatedTime;

// do something...
  setTimeout(enterFrame, 10);
  if ((elapsedTime += delta) >= 1000) {
    var fps = frames * 1000.0 / elapsedTime;
    elapsedTime = 0;
    frames = 0;
    // 초당 프레임 수 업데이트
    $('el').update(fps.toFixed(1) + ' FPS');
  }
  updatedTime = now;
  frames++;
}

// 일반적인 조건 실행문
if (Options.status == 'enabled') new Include('snowstorm.js');
// 더욱 짧은 조건 실행문
Options.status == 'enabled' && new Include('snowstorm.js');

// 프로퍼티에 할당된 함수를 메서드라 함
// 클래스를 생성하는 것을 인스턴스화 라고 함
// Unobtrusive(겸손한) 내부에 필요한 모든 것을 완비한 모듈에 붙는 수식어

Pop out