Mootools Introducción/Tutorial - Native

El grupo de scripts Native son extensiones básicas de los objetos por defecto en javascript (actualmente Mootools tiene código nativo para Array, Element, Function y String) Esos archivos modifican la manera en que esos elementos y toda instancia de ellos trabajan. Como es posible crear arrays o strings antes de que este código se ejecute, tienen típicamente un significado por el cual aplican estas funciones a los strings existentes. Por ejemplo, $A(myArray) solo te devuelve myArray con todas las extensiones aplicadas.
Acá hay un resumen de las funciones disponibles para esos objetos; la mayoría de ellos pueden ser ejecutados haciendo click "ejecuta este código".

String.js - Extensiones String, Numer.toInt()

Acá esta la página de documentación de String.js.

String.test()
JavaScript:
"I like cookies".test("cookie"); // devuelve ["cookie"]

//ignora la distinción de mayúsculas y minúsculas
"I like cookies".test("COOKIE", "i")

JavaScript:
//ignora la distinción de mayúsculas y minúsculas
"I like cookies because cookies are good".test("COOKIE", "ig");

JavaScript:
//no devuelve nada
"I like cookies".test("cake");

JavaScript:
//este es un ejemplo de como probablemente lo usarias en realidad
if("I like cookies".test("cake")) alert ('you like cake');
else alert("you don't like cake (what's wrong with you?)");

String.toInt()
JavaScript:
"10".toInt(); // el valor es 10

JavaScript:
"10px".toInt(); // el velor es 10

JavaScript:
"-10".toInt(); // el valor es -10

JavaScript:
"px10".toInt(); // no devuelve nada

String.camelCase()
JavaScript:
"I-like-cookies".camelCase(); //"ILikeCookies"

String.capitalize()
JavaScript:
"i like cookies".capitalize(); //"I Like Cookies"

String.trim()
JavaScript:
" i like cookies ".trim() //"i like cookies"

String.clean()
hace lo mismo que trim y ademas elimina todos los doble espacios del string
JavaScript:
" i like cookies \n\n".clean() //"i like cookies"

String.rgbToHex()
JavaScript:
"rgb(17,34,51)".rgbToHex(); //"#112233"

JavaScript:
"rgba(17,34,51,0)".rgbToHex(); //"transparent"

JavaScript:
"rgb(17,34,51)".rgbToHex(true); //[11,22,33]

String.hexToRgb()
JavaScript:
"#112233".hexToRgb(); //"rgb(17,34,51)"

Number.toInt()
Number.toInt() solo devuelve el número; útil porque toInt debe trabajar en ambas Strings y Números.

Array.js

Acá está la documentación de Array.js
Array.each()
Array.each() itera en el Array ejecutando la funcion especificada para cada ítem del array. La funcion anonymous pude pasar dos argumentos (opcionales) - el ítem y el índice:

["one", "two", "three"].each(function(number){
alert(number);
});

["one", "two", "three"].each(function(number, index){
if(index == 0) alert(number); //solo vamos a mostrar el primero
});

Array.copy()
Copia el array y lo devuelve.

var letters = ["a","b","c"];
var copy = ["a","b","c"].copy();
alert(copy);

Array.remove()

JavaScript:
["1","2","3"].remove("2") // ["1","3"];

Array.test()

JavaScript:
["a","b","c"].test("a"); // true

JavaScript:
["a","b","c"].test("d"); // false

Array.extend()

JavaScript:
var Animals = ['Cat', 'Dog', 'Coala'];
Animals.extend(['Lizard']); //Animals is now: ['Cat', 'Dog', 'Coala', 'Lizard'];

Array.associate()

JavaScript:
var Animals = ['Cat', 'Dog', 'Bird', 'Lizard'];
var Speech = ['Meow', 'Bark', 'Chirp', 'Mute'];
var Speeches = Animals.associate(speech);
//Speeches['Meow'] is now Cat.
//Speeches['Bark'] is now Dog.
//...

$A()
$A() aplica esas funciones a cualquier objeto iterable. Ejemplo:

JavaScript:
function myFunction(){
$A(arguments).each(argument, function(){
alert(argument);
});
};
//the above will alert all the arguments passed to the function myFunction.

Function.js

Acá está la documentación de Function.js.
Function.pass(arguments, bind(optional))

JavaScript:
//syntax: Function.pass(arguments, bind)
//bind es opcional; mas sobre bind mas tarde
//ejemplo: myFunction.pass([arg1, arg2], myElement);
function say(msg){
alert(msg);
};
say.pass('hello world')();

Te preguntarás porqué hacer esto, pero vas a ver el porqué en ejemplos mas adelante. Basicamente, no siempre queres ejecutar una funcion inmediatamente, y sin algo como el método .pass() no tenes manera de pasar variables a esa funcion sin ejecutarla. myFunction(value) ejecuta muyFunction. myFunction.pass(value) configura myFunction para poder ejecutarla mas tarde.
Vamos a decir que tenés un efecto que va a hacer que algo se desvanezca. Cuando está hecho, queres ejecutar un callback de algun orden. Tu efecto tiene una opción para que le entregues una función para que la ejecute cuando termine, pero necesitas pasarle a esa función algunas variables. Si haces algo como:"onComplete: myFunction(value)" vas a ejecutar tu función inmediatamente y onComplete sera equivalente a lo que sea devuelto, lo cual no es lo que querés. Si en cambio haces "onComplete: myFunction.pass(value)" obtendras lo que querìas. myFunction.pass(value) devuelve una instancia de esa función con el parámetro establecido, entonces cuando ejecutes onComplete() va a estar ejecutando realmente myFunction(value)


Function.bind(object)
La palabra reservada "this" dentro de un objeto (como una función) refiere a la instancia de ese objeto. Es realmente muy útil para un montón de cosas, no solo las que están referidas a otras funciones en el mismo objeto o estado de cierta variable. El problema es que puede ser que seas autor de la funcionalidad que necesita poder referir a variables en el objeto que lo está llamando. Abajo hay un ejemplo simple de esto, pero cuando escribes clases y funciones más complejas vas a encontrar que esta habilidad para definir que "this" es, en un contexto dado, una necesidad.
Este ejemplo debe cambiar este párrafo a que tengo un borde alrededor de él.

JavaScript:
function myFunction(){
this.setStyle('border', '1px solid black');
//notar que 'this' acá refiere myFunction, no a un elemento
//vamos a necesitar unir esta funcion con el elemento que queremos alterar
};
//Unir el elemento que quiero aplicar el efecto con la función
//Notar que una función es devuelta, no ejecutada
var myBoundFunction = myFunction.bind($('bindExample'));
//ejecutar esa nueva función con el objeto bound
myBoundFunction();

Function.bindAsEventListener();
Una función con el parámetro bind como su "this" y como un evento de argumento pre-pasado o window.event, dependiendo del navegador.

JavaScript:
function myFunction(event){
alert(event.clientx) //devuelve las coordenadas del mouse
};
myElement.onclick = myFunction.bindAsEventListener(myElement);

Function.delay(milliseconds, bind(optional))
Si, puedes establecer demoras con setTimeout, pero a veces es enrrollado y complicado. Adicionalmente, la demora te permite unir un elemento con la función que va a se demorada
El ejemplo que sigue debe dibujar un borde alrededor de este párrafo después de un segundo de espera.

JavaScript:
function myFunction(){
this.setStyle('border', '1px solid black');
};
myFunction.delay(500, $('delayExample'));

Acá hay un gran ejemplo de vinculación. Si el elemento fuera un argumento para la función, no podría llamar la función con un argumento sin ejecutarla. Este tipo de sintaxis no funcionaría:

myFunction($('delayExample')).delay(500);

...no podría funcionar, porque ejecutarías la función inmediatamente y .delay() intentaría ejecutarse como un método de lo que haya sido devuelto.
Podrías hacer esto sin embargo:
myFunction.pass($('delayExample')).delay(500);
Está también .periodical(), que periódicamente ejecuta tu función

There's also .periodical(), which repeatedly executes your function.
La clase cadena (chain)
Encadenar es una manera bastante inteligente de establecer una lista de funciones que quieras ejecutar en un orden dado sin ejecutarlas todavía. Luego, cada vez que llames el método .callChain() la próxima función de ejecutará.

JavaScript:
var x = new Chain();
var one = function(){alert('1')};
var two = function(){alert('2')};
x.chain(one);
x.chain(two);
x.callChain();
x.callChain.delay(2000);

$clear() - liberando esperas

JavaScript:
var myTimer = (function() {alert('1 second!');}).delay(1000);
//espera 5 segundos y ejecuta mi función
myTimer = $clear(myTimer); //no importa

$type() - Obtener el tipo de un elemento
$type devuelve el tipo de un objeto ("function" o "string", etc.) o nada si el objeto es nulo (o una cadena vacía). (Nota: esto está cambiando en la próxima versión de mootools; si le das a $type un boolean= false en mootools versión 84 vas a obtener un falso, no un "boolean"; esto está cambiando para devolver el tipo real del objeto, y solo devolver falso si el objeto es nulo o indefinido, por esto usar con precaución).

JavaScript:
$type('hi'); //"string"

JavaScript:
$type(function(){});//"function"

JavaScript:
$type({});//"object"

JavaScript:
$type([]);//"array"

JavaScript:
var x = null;
$type(x);//nothing returned

Element.js

Acá está la documentación para Elements.js.
El objeto Element consigue mucho amor en Mootools. La mayoría de las funciones en el objeto Element son bastante auto-explicativas. Element.getTag() hace lo que piensas que podría hacer. Element.remove() no tiene sorpresas. Acá hay algunos ejemplos de las funciones más útiles y menos obvias, pero realmente deberías leer la página de documentación de Element.js para el detalle completo.
Element.initialize()
Este solo crea un nuevo objeto elemento - lo mismo que document.createElement, pero también aplica las extensiones de Mootools a ese elemento.

JavaScript:
var img = new Element("img");

$()
Cansado de escribir "document.getElementById('blah')"? no hay problema. Esto también aplica todas esas extensiones de Element al objeto.

JavaScript:
$('getElementByIdExample');

Element.injectInside, Element.injectBefore, Element.injectAfter
Mucho más de lo que parece. Inyecta el elemento relativo a el que sea pasado como argumento.

HTML:
<div id="myElement"></div>
<div id="mySecondElement"></div>
<script>$('mySecondElement').injectBefore('myElement');</script>
resulting html:
<div id="mySecondElement"></div>
<div id="myElement"></div>

injectInside usa appendChild en el elemento provisto:

html:
<div id="myElement"></div>
<div id="mySecondElement"></div>
<script>$('mySecondElement').injectInside('myElement');</script>
resulting html:
<div id="myElement"><div id="mySecondElement"></div></div>

Element.adopt
Este es tal como injectInside, pero al revés (añande el elemento provisto al que se aplica):

HTML:
<div id="myElement"></div>
<div id="mySecondElement"></div>
<script>$('mySecondElement').adopt('myElement');</script>
resulting html:
<div id="mySecondElement"><div id="myElement"></div></div>

Element.replaceWith

JavaScript:
$('myOldElement').replaceWith($('myNewElement'));

$('myOldElement') no está mas, y $('myNewElement') está en su lugar.
Element.appendText

HTML:
<div id="myElement">hey</div>
<script>
$('myElement').appendText(' howdy');
//myElement innerHTML es ahora "hey howdy"
</script>

Element.add/removeClass/hasClass/toggleClass
Estos hacen bastante más de que aparentan hacer.

Este parrafo tiene id=cssClassesExample para el ejemplo siguiente.

JavaScript:
//tiene el párrafo de arriba el className blue?
$('cssClassesExample').hasClassName('blue');

JavaScript:
//se lo agregamos
$('cssClassesExample').addClassName('blue');

JavaScript:
//ahora lo borramos
$('cssClassesExample').removeClassName('blue');

JavaScript:
//ahora vamos a prenderlo y a apagarlo
$('cssClassesExample').toggleClass('blue');

Element.getStyle, Element.setStyle, Element.setStyles
Bastante directo:
Este párrafo tiene id = getStyleExample para el ejemplo siguiente.

JavaScript:
$('getStyleExample').getStyle('width'); //returns something like "528px"

JavaScript:
$('getStyleExample').getStyle('width').toInt(); //returns 528 (an integer)

setStyle te permite establecer una única propiedad css:

JavaScript:
$('setStyleExample').setStyle('border', '1px solid black');

setStyles tiene una sintaxis levemente diferente y te permite establecer todas las que quieras:

JavaScript:
$('setStylesExample').setStyles({
'border':'1px solid yellow',
'background':'#666',
'color':'#fff'
});

Element.setProperty, setProperties
Trabaja bastante similar a setStyle(s) excepto que puedes establecer las propiedades de un elemento:

JavaScript:
var img = new Element('img');
img.setProperty('src', http://clientside.cnet.com/wp-content/themes/clientside/art/logo.gif');
img.setProperty('id', 'logoExample');
img.injectInside($('setPropertiesExample'));

Vamos a asignar algunas propiedades más:

JavaScript:
$('logoExample').setProperties({
'alt':'clientside',
'title':'clientside'
});

Element.getProperty()

JavaScript:
$('logoExample').getProperty('src');//gets the img url

Element.getTop(), getLeft()
Este devuelve el offset de la parte de arriba del elemento y la parte de arriba de la ventana (o la izquierda del elemento y la izquierda de la ventana)
Este párrafo se usa en el ejemplo siguiente.

JavaScript:
$('topAndLeftExample').getTop() //returns an integer

JavaScript:
$('topAndLeftExample').getLeft() //returns an integer

Element.getValue()
Devuelve el valor de un campo de entrada de un formulario. Ejemplo:

JavaScript:
$('getValueInputExample').getValue() //devuelve algun valor

JavaScript:
$('getValueSelectExample').getValue() //devuelve 'value 1'

Element.setHTML()
Vamos a cambiar este contenido...

JavaScript:
$('setHTMLExample').setHTML('ves? cambió!');

Te preguntaras porqué usar esto o algo como getProperty cuando javascript tiene métodos para hace es el mismo; estamos solo cambiando una sintaxis por otra. Podes tan fácilmente hacer:

JavaScript:
$('setHTMLExample').innerHTML = 'ves? cambió!';

entonces, por que hacerlo? Bueno, haciendo esta función disponible podes hacer cosas como .delay() y .pass() en aplicaciones mas complejas. Tambien permite encadenar cosas juntas como:

JavaScript:
$('myExample').setHTML('example').addClass('something').removeClass('somethingElse').addEvent(....) etc.

Element.getTag()

JavaScript:
$('logoExample').getTag() // returns 'img'

Element.setOpacity
Opacity toma un valor entre cero (transparente y 1 (opaco)

JavaScript:
$('setOpacityExample').setOpacity(0); //ahora no lo ves

JavaScript:
$('setOpacityExample').setOpacity(.5); //se ve a medias

JavaScript:
$('setOpacityExample').setOpacity(1); //se ve 100%

Element.addEvent
Aquellos que estén familiarizados con el objeto Event de Prototype.js van a reconocer este concepto; solo hay una diferencia de sintaxis. notar que el nombre del evento que le des ("click" o "mouseover") no tiene el prefijo "on".
Este párrafo se usa en el ejemplo siguiente

JavaScript:
$('addEventExample').addEvent('click', function() {
alert('click!');
});

Porque usar esto en ves de hacer $('addEventExample').onclick = alert('click');? Bueno, usar capturadores de eventos como este te permite tener mas de uno. si haces .onclick=myFunction podes tener solo un evento esperando ese click. Click puede no ser un gran ejemplo, pero ciertamente algo como window.onload vas a querer tener numerosos eventos monitoreando.
También podes usar Element.removeEvent() para remover un capturador de evento
Element.getNext, getPrevious, getLast
Todos ellos obtiene elementos vecinos relativos al que apliques este método.
Este es el HTML del ejemplo siguiente:

HTML:
<ul id="getSiblingExamples">
<li id="firstLI">first</li>
<li id="secondLI">second</li>
<li id="thirdLI">third</li>
</ul>

* first
* second
* third

JavaScript:
$('secondLI').getPrevious() //obtiene el primer elemento de la lista

JavaScript:
$('secondLI').getNext() //obtiene el tercer elemento

$('getSiblingExamples').getLast() //obtiene el tercer elemento

$Element(DOMelement, function, arguments) - funciones ayuda.
Aplica un método con el pasda en argumentos para el pasado en elemento. Útil si no querés extender el elemento.

JavaScript:
$Element(el, 'hasClass', className) //Verdadero o falso