Tag Archives: 자바스크립트

Prototype Javascript Framework – Number

이번에는 Number 클래스 입니다. Prototype에서는 Native Number 클래스를 확장하고 있습니다.


  • Number.succ을 이용해 ObjectRange 클래스와 호환됩니다.
  • 루비 스타일의 Number.times를 제공합니다.
  • Number.toColorPart, Number.toPaddedString같은 간단한 유틸리티 메서드를 제공합니다.

무엇이 가능한가? —————————————————————————————————-
[code]$R(1, 10).each(function(index) {
  // index는 1부터 10까지 증가함
});


(5).times(function(n) {
  // n은 0부터 4까지 증가함
  // 5번 실행
});


(128).toColorPart();
// -> ’80’


(10).toColorPart();
// -> ‘0a’


‘#’ + [128, 10, 16].invoke(‘toColorPart’).join(”);
// -> ‘#800a10′[/code]

Number Methods —————————————————————————————————-

abs : 숫자의 절대값을 구합니다. 양수는 양수로 음수는 양수로 변경됩니다.
[code]abs() -> Number[/code]

예제)
[code]Math.abs(-5);
//-> 5


(-5).abs();
//-> 5


(5).abs();
//-> 5[/code]

ceil : 숫자를 올림(반올림 아님) 합니다.
[code]ceil() -> Number[/code]

예제)
[code]Math.ceil(4.1);
//-> 5


(4.1).ceil();
//-> 5


(-4.1).ceil();
//-> -4[/code]

floor : 숫자를 내림 처리 합니다.
[code]floor() -> Number[/code]

예제)
[code]Math.floor(4.6);
//-> 4


(4.6).floor();
//-> 4


(-4.1).floor();
//-> -5[/code]

round : 숫자를 반올림 합니다.
[code]round() -> Number[/code]

예제)
[code]Math.round(4.5);
//-> 5


(4.5).round();
//-> 5


(4.49).round();
//-> 4


(-4.5).round();
//-> -4[/code]

succ : 현재 번호의 다음 숫자를 반환합니다.
[code]succ() -> Number[/code]

예제)
[code](5).succ();
// -> 6


$A($R(1, 5)).join(”);
// -> ‘12345’[/code]

times : 루비스타일의 0부터 n까지 증가하며 콜백 함수를 실행합니다.
[code]times(iterator) -> Number[/code]

예제)
[code]var s = ”;
(5).times(function(n) {
  s += n;
});


s
// -> ‘01234’[/code]

toColorPart : 0~255사이의 숫자를 2자리의 16진수 숫자로 반환합니다.
[code]toColorPart() -> String[/code]

예제)
[code]128.toColorPart();
// -> ’70’


10.toColorPart();
// -> ‘0a’


‘#’ + [128, 10, 16].invoke(‘toColorPart’).join(”);
// -> ‘#800a10′[/code]

toJSON : JSON형 문자열을 반환합니다.
[code]toJSON() -> String[/code]

예제)
[code](45).toJSON();
//-> ’45′[/code]

toPaddedString : 빈자리가 0으로 채워진 숫자를 반환합니다. 두번째 인자로 진수를 지정할 수 있습니다.
[code]toPaddedString(length[, radix]) -> String[/code]

예제)
[code](13).toPaddedString(4);
// -> ‘0013’


(13).toPaddedString(2);
// -> ’13’


(13).toPaddedString(1);
// -> ’13’


(13).toPaddedString(4, 16)
// -> ‘000d’


(13).toPaddedString(4, 2);
// -> ‘1101’[/code]

Prototype Javascript Framework – Object

이번엔 Object에 대해 알아보겠습니다. 대부분 객체의 타입을 알아보는 류의 메서드가 대거 포진해 있습니다.

Object의 하위 메서드들은 Prototype의 name space를 사용하여야 합니다. 이것은 곧 메서드를 사용할때 Object.로 시작해야 함을 뜻합니다. 일반적인 개발자들은 inspect()와 clone() 메서드를 많이 이용할 것입니다.

Object Methods —————————————————————————————————

clone : 객체를 얕은(shallow) 복사합니다. 기존의 객체가 가지고 있던 모든 프로퍼티를 복사합니다.
[code]Object.clone(obj) -> Object[/code]

예제)
[code]var o = { name: ‘Prototype’, version: 1.5, authors: [‘sam’, ‘contributors’] };
var o2 = Object.clone(o); o2.version = ‘1.5 weird’;


o2.authors.pop();


o.version
// -> 1.5
o2.version
// -> ‘1.5 weird’
o.authors
// -> [‘sam’]
// 얕은 복사가 되었음[/code]

extend : 소스 객체의 모든 프로퍼티를 복사합니다.
[code]Object.extend(dest, src) -> alteredDest[/code]
Prototype의 Javascript에서의 OOP 개발을 가능하게 하기 위한 메서드입니다. Object.extendClass.create 메서드등이 있습니다.

inspect : 디버깅을 위한 객체의 내용을 보여줍니다.
[code]Object.inspect(obj) -> String[/code]
객체의 값을 문자열로 보여줍니다. undefined와 null값을 구별하여 반환합니다.

예제)
[code]Object.inspect();
// -> ‘undefined’


Object.inspect(null);
// -> ‘null’


Object.inspect(false);
// -> ‘false’


Object.inspect([1, 2, 3]);
// -> ‘[1, 2, 3]’


Object.inspect(‘hello’);
// -> “‘hello'”[/code]

isArray : 객체가 배열인지 확인합니다.
[code]isArray(obj) -> Boolean[/code]

예제)
[code]Object.isArray([]);
//-> true


Object.isArray($w());
//-> true


Object.isArray({ });
//-> false[/code]

isElement : nodeType이 1인 엘리먼트인지 확인합니다.
[code]isElement(obj) -> Boolean[/code]

예제)
[code]Object.isElement(new Element(‘div’));
//-> true


Object.isElement(document.createElement(‘div’));
//-> true


Object.isElement($(‘id_of_an_exiting_element’));
//-> true


Object.isElement(document.createTextNode(‘foo’));
//-> false[/code]

isFunction : 객체가 함수(메서드)인지 확인합니다.
[code]isFunction(obj) -> Boolean[/code]

예제)
[code]Object.isFunction($);
//-> true


Object.isFunction(123);
//-> false[/code]

isHash : 객체가 Hash 클래스의 인스턴스인지 확인합니다.
[code]isHash(obj) -> Boolean[/code]

예제)
[code]Object.isHash(new Hash({ }));
//-> true


Object.isHash($H({ }));
//-> true


Object.isHash({ });
//-> false[/code]

isNumber : 객체가 소수점을 포함한 숫자형인지 확인합니다.
[code]isNumber(obj) -> Boolean[/code]

예제)
[code]Object.isNumber(0);
//-> true


Object.isNumber(1.2);
//-> true


Object.isNumber(“foo”);
//-> false[/code]

isString : 객체가 문자형인지 확인합니다.
[code]isString(obj) -> Boolean[/code]

예제)
[code]Object.isString(“foo”);
//-> true


Object.isString(“”);
//-> true


Object.isString(123);
//-> false[/code]

isUndefined : 객체가 undefined 인지 확인합니다.
[code]isUndefined(obj) -> Boolean[/code]

예제)
[code]Object.isUndefined();
//-> true


Object.isUndefined(undefined);
//-> true


Object.isUndefined(null);
//-> false


Object.isUndefined(0);
//-> false


Object.isUndefined(“”);
//-> false[/code]

keys : Hash타입의 객체의 전체 프로퍼티 네임을 가져옵니다.
[code]Object.keys(obj) -> [String…][/code]

예제)
[code]Object.keys();
// -> []


Object.keys({ name: ‘Prototype’, version: 1.5 }).sort();
// -> [‘name’, ‘version’][/code]

toHTML : 객체에 toHTML 메서드가 있으면 해당 메서드를 수행하고 없을 경우 String.interpret를 수행합니다.
[code]toHTML(obj) -> String[/code]

예제)
[code]var Bookmark = Class.create({
  initialize: function(name, url) {
    this.name = name;
    this.url = url;
  },
  toHTML: function() {
    return ‘<a href=”#{url}”>#{name}</a>’.interpolate(this);
  }
});


var api = new Bookmark(‘Prototype API’, ‘http://prototypejs.org/api’);


Object.toHTML(api);
//-> ‘<a href=”

toQueryString : URL인코딩이 된 query 문자열을 반환합니다.
[code]toQueryString(obj) -> String[/code]

예제)
[code]Object.toQueryString({ action: ‘ship’, order_id: 123, fees: [‘f1’, ‘f2’], ‘label’: ‘a demo’ })
// -> ‘action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'[/code]

value : Hash타입의 객체의 값들을 반환합니다.
[code]Object.values(obj) -> Array[/code]

예제)
[code]Object.values();
// -> []


Object.values({ name: ‘Prototype’, version: 1.5 }).sort();
// -> [1.5, ‘Prototype’][/code]