30 días de Mootools 1.2 - DÍA 4: Funciones.

30 días de Mootools 1.2 – DÍA 4: Funciones.

En Abril 18, 2009, En Javascript, Mootools, Tutoriales, por alain

Funciones y Mootools 1.2

Bienvenido al 4to tutorial de “30 días de Mootools 1.2″. Si no te sientes listo todavía, chequea los tutoriales anteriores. Hoy vamos a tratar sobre lo básico sobre las funciones en Javascript.

Manteniendo el tema Mootools, debes tener cuidado sobre dónde poner funciones para usarlas en Mootools. Anteriormente estuvimos poniendo todo nuestro código dentro de la función domready. Cuando interactuamos con funciones querrás ponerlas fuera del bucle domready. Las funciones no son ejecutadas hasta que las llames desde dentro del domready.

Generalmente es una buena idea tratar y mantener el código de tus funciones fuera del body de tu página y llamarla a través de una inclusión Javascript. Bajo mi experiencia personal, mientras trabajo con código, simplemente encuentro mucho más fácil tenerlo todo en la misma página. Estamos usando la siguiente convención para estos tutoriales:

Todos los ejemplos siguen este formato, el cual tiene como resultado en la función que se ejecute cuando la página se carga.

Lo básico

Existen pocas vías para definir funciones en javascript—ya que nos estamos enfocando en Mootools, usaremos su metodología preferida. El ejemplo siguiente trata cuan básico puede ser una función. Declararemos una variable simple_function y la definiremos como una función:

var simple_function = function(){

Entonces agregamos una alerta para ser ejecutada cuando la función sea llamada:

alert('This is a simple function');

Finalmente, cerramos la definición de la función con una llave (debido a definiciones de hidiosincrasia te la mostramos a continuación):

Esta llave constituye una de las vías más sencillas para examinar, y puede ser en muchas veces un dolor increíble de seguir—es una muy buena idea ser obsesivo con el chequeo de cómo cerramos las definiciones de funciones.

Como se muestra a continuación, luego de declarar una función, estamos agregando una llamada a la función al evento domready que se ejecutará en la carga de la página:

//Define simple_function como una función
var simple_function = function(){
	alert('Esta es una simple funcion');
}

window.addEvent('domready', function() {
//Llama simple_function cuando la página dom está lista
        simple_function();
});

Parámetro sencillo

Si mientras tenemos un fragmento de código, puedes llamarlo fácilmente desde cualquier lado, es incluso más útil cuando pasas sus parámetros (información) para trabajar. Para usar parámetros con funciones necesitas agregar un nombre de variable en el paréntesis después de la función, se muestra en el ejemplo:

var name_of_function = function(name_of_the_parameter){
    /*el código de la función va aquí*/
}

Una vez que lo hayas hecho, la variable estará disponible dentro de la función para su uso. Mientras que puedes nombrar un parámetro tanto como quieras, es una muy buena idea crear tus nombres de parámetros tan descriptivos como sea posible. Por ejemplo, si estuvieras pasando un parámetro que debiera contener el nombre de una ciudad, llamar al parámetro town_name sería preferible antes algo más vago y menos sugestivo (ejemplo: user_input).

En el ejemplo siguiente, estaremos definiendo una función que toma un parámetro sencillo (llamado parámetro) y envía una alerta conteniendo el parámetro. Nota que mientras que la primera parte del mensaje está rodeada por pequeñas comillas, el parámetro no. Cuando quieras hacer uso de parámetros en combinación con cadenas de código, necesitarás unirlas con el operador + tal y como se muestra a continuación:

var single_parameter_function = function(parameter){
        alert('the parameter is : ' + parameter);
}

window.addEvent('domready', function(){
        single_parameter_function('esto es un parametro');
});

Parámetros múltiples

Javascript no limita la cantidad de parámetros que puedes definir para una función. Es generalmente una buena idea mantener el número de parámetros que le pases a una función a un mínimo de lectura. Los parámetros múltiples en una definición de función deben ir separados por comas, y de lo contrario comportarse exactamente como una parámetro de función sencillo. La función ejemplo siguiente toma dos números y pone su suma dentro de la variable third_number:

var third_number = first_number + second_number;

Nota que el operador + es usado en operador es usado en una forma ligeramente diferente para unir resultados junto con una cadena de texto:

alert(first_number + " plus " + second_number + " equals " + third_number);

Mientras que esto puede parecer confuso al principio, es de hecho es bien sencillo. Si usas + entre números, estarás agregándolos juntos. Si usas + entre cualquier combinación de números y cadenas, estarás uniendo toda la entrada en una cadena simple.

var two_parameter_function = function(first_number, second_number){
//Adquiere la suma de first_number y de second_number
var third_number = first_number + second_number;

//Muestra los resultados
alert(first_number + " plus " + second_number + " equals " + third_number);
}

window.addEvent('domready', function(){
two_parameter_function(10, 5);
});

Retornando un valor

Mostrar los resultados de una función en una alerta puede ser útil, pero sin embargo, algunas veces querrás tomar el resultado y usarlo en algún otro lado. Para lograr esto necesitas hacer uso de un retorno dentro de la función. El ejemplo siguiente funciona muy similar al anterior, excepto que en vez de enviar una alerta, el script retorna la suma de los números, tal y como se puede ver:

return third_number;

Como notarás, estamos trabajando sobre el domready al mismo tiempo. Para mostrar este valor, estamos asignando el valor de retorno de las funciones hacia un parámetro llamado return_value y por ende, mostrando una alerta.

var two_parameter_returning_function = function(first_number, second_number){
		var third_number = first_number + second_number;
		return third_number;
}
window.addEvent('domready', function(){
	var return_value = two_parameter_returning_function(10, 5);
	alert("return value is : " + return_value);
});

Funciones como parámetros

Si miras dentro del código domready de Mootools, verás que estamos envolviendo las cosas, llevándolas, por así decirlo, por un “atajo”. Notarás que estás pasando una función como un parámetro:

window.addEvent('domready', function(){
	/*code*/
});

Una función que ha pasado como un parámetro como la de arriba se le conoce como una función anónima:

function(){
	/*code*/
}

Un método alternativo para hacer uso del domready sin usar funciones anónimas, que sin lugar a dudas hay que destacar es el siguiente:

//Construye la función para ser llamada en el domready
var domready_function(){
	/*code*/
}

//Asigna la función en el evento domready
window.addEvent('domready', domready_function);

Aportado por Boomstix en la fuente original.

No estoy en contra de otros métodos, les aseguro que Mootools es parte del mundo de la programación: hay muchas vías de lograr un mismo objetivo. Por el momento vamos a apegarnos al método explicado por mi.

Ejemplos

Para calentar los motores para el próximo tutorial, te dejo con una función que te permite cambiar el color de fondo de una página en tiempo real:

var changeColor = function(){
	//Usa get para adquirir los valores de color
	//desde las cajas de texto
	//( http://docs.mootools.net/Element/Element#Element:get )
	var red   = $('red').get('value');
	var green = $('green').get('value');
	var blue  = $('blue').get('value');

	//Asegúrate que todo sea un integrador (integer)
	//( http://docs.mootools.net/Native/Number#Number:toInt )
	red   = red.toInt();
	green = green.toInt();
	blue  = blue.toInt();

	//Asegúrate que cada número esté entre 1 y 255
	//( http://docs.mootools.net/Native/Number#Number:limit )
	red   = red.limit(1, 255);
	green = green.limit(1, 255);
	blue  = blue.limit(1, 255);

	//Adquiere el código hexagecimal
	//( http://docs.mootools.net/Native/Array/#Array:rgbToHex )
	var color = [red, green, blue].rgbToHex(); 

	//Selecciona el color de fondo de la página
	//( http://docs.mootools.net/Element/Element.Style#Element:setStyle )
	$('body_wrap').setStyle('background', color);

}

var resetColor = function(){
	//Resetea el color de fondo a blanco
	//( http://docs.mootools.net/Element/Element.Style#Element:setStyle )
	$('body_wrap').setStyle('background', '#fff');
}

window.addEvent('domready', function(){
	//Agrega eventos de click a los botones (más de esto mañana)
	//( http://docs.mootools.net/Element/Element.Event#Element:addEvent )
	$('change').addEvent('click', changeColor);
	$('reset').addEvent('click', resetColor);
});

alain

Co-propietario y fundador de Webizzima. Diseñador web progresivo. Más de 7 años de experiencia en el ámbito y el deguste constante por el intercambio profesional empujan a Alain a la co-creación de Webizzima.

Visita el sitio web del autor | Todos los artículos de este autor