Native Number en Mootools

  • Por
Number es una librería de Mootools para trabajo con números, que aporta pocas pero útiles funcionalidades como redondeos, acotaciones y conversiones de formatos.
En este artículo vamos a ver otra de las librerías que el framework Javascript Mootools pone a disposición de los desarrolladores, en este caso para trabajar con números. Como ya sabemos, Mootools tiene una serie de librerías que nos simplifican ciertas tareas habituales a la hora de hacer aplicaciones web enriquecidas del lado del cliente y en este caso, para los números nos aporta algunos métodos interesantes que podemos utilizar en nuestros scripts.

Para el que no conozca Mootools o llegue aquí directamente, hay que decir que este artículo forma parte del Manual de Mootools, que estamos publicando en DesarrolloWeb.com.

Number forma parte de las librerías Native, que se llaman así porque son extensiones de los objetos nativos del lenguaje Javascript. En el caso de Number, están aportando nuevas funcionalidades a la clase Number de Javascript que ya habíamos comentado en el Manual de Javascript II

Los métodos de Number se pueden invocar sobre variables que almacenan valores numéricos o sobre literales escritos entre paréntesis. Veremos estas dos maneras en los ejemplos siguientes.

Métodos Mootools de Number

Ahora veamos rápidamente una lista de los métodos que añade Mootools a la clase Number. Podemos verlos todos, porque son bastante pocos:

Método limit(min, max)

Este método sirve para acotar un número. Devuelve ese mismo número que recibe el método, pero acotado entre el valor mínimo y máximo. Veamos algunos ejemplos:

//creo una variable con un valor numérico
var miNumero = 320;
//ahora sobre esa variable invoco el método limit
alert (miNumero.limit(0, 250))

También podría invocar el método sobre literales numéricos, poniéndolos entre paréntesis:

(21).limit(10, 20) //devuelve 20
(3.8).limit(1, 10) //devuelve 3.8

Puedes ver este ejemplo en marcha.

Método round(decimales)

Este método sirve para redondear números, pensado especialmente para redondeos de números en coma flotante con Javascript.

Recibe el número de decimales con el que se desea hacer el redondeo. Puede no recibir nada, entonces redondea el número quitándole todos los decimales, como si pasásemos el valor 0 (cero) al método round.

alert (21.122).round(2); //devuelve 21.12
(3.8).round(); //devuelve 4
(7.3).round(1); //devuelve 7.3

El método round() de Mootools también permite que se le pase como parámetro un número negativo. En ese caso redondea también la parte entera del número, por ejemplo:

(1329).round(-1); //devuelve 1330
(1329.343).round(-2); //devuelve 1300

En este enlace puedes ver una página con el ejemplo de round.

times(funcion [, bind])

Este método sirve para ejecutar una función un número de veces igual al número sobre el que invocamos el método, pasándole a dicha función el número actual de la iteración.

La iteración que se realiza con el método times() empieza desde el número 0 y va hasta el número que recibe el método -1. Esto quedará claro viendo este ejemplo:

(4).times(alert);

Este código hace que se invoque la función alert 4 veces, pasando como parámetro en cada una de las ejecuciones, los números del 0 al 3. Entonces primero hará un alert(0) luego alert(1), alert(2) y por último alert(3). Este ejemplo, que he cogido de la propia documentación de Mootools, me da un error en Internet Explorer, por lo que he hecho otro ejemplo que funciona bien en todos los navegadores, para que lo podamos probar.

(6).times(function escribe(numero){
   document.write('<div style="font-size:' + numero + 'em;">Escribo el número ' + numero + '</div>');
});

Como se puede ver, se ha escrito el código de la función en el propio parámetro del método times(). La función recibe un valor numérico como parámetro, que es el número de la actual ejecución.

Esto generaría un código como este:

<div style="font-size: 0em;">Escribo el número 0</div>
<div style="font-size: 1em;">Escribo el número 1</div>
<div style="font-size: 2em;">Escribo el número 2</div>
<div style="font-size: 3em;">Escribo el número 3</div>
<div style="font-size: 4em;">Escribo el número 4</div>
<div style="font-size: 5em;">Escribo el número 5</div>

Cabe decir también que el método times() puede recibir un segundo parámetro, que es el bind, osea, el valor que tendría la variable this dentro de la función invocada por times(). Las utilidades de bind y la necesidad de usarlo habitualmente ya las hemos visto varias veces en este manual, por ejemplo en los artículos Native Function Mootools y Utilización de bind() en los eventos Mootools

El ejemplo puede verse en marcha en este enlace.
(En el ejemplo no se ve bien el texto colocado con el estilo font-size: 0em, o bien en Firefox no se ve nada, porque al definir un tamaño de letra 0em simplemente no se aprecia nada ya que el tamaño es igual a cero. Pero hay que remarcar que el bucle que realiza el método times() empieza siempre en cero.)

Métodos toInt() y toFloat()

Estos métodos sirven para hacer conversiones de números y cadenas a tipo numérico, tanto enteros como en coma flotante. Estos métodos se pueden invocar tanto sobre números como sobre cadenas, devolviendo igualmente números.

Nota: cuando invocamos toInt() o toFloat() sobre cadenas, en realidad estamos invocando unos métodos distintos creados en la librería Native String de Mootools y no los métodos que incluye la librería Native Number, que es la que estamos viendo en este artículo, pero el uso es exactamente igual. Puedes ver un artículo donde se explican las librerías Native String de Mootools.

El método toFloat() devuelve números en coma flotante, pero si lo invocamos sobre un número entero, devuelve ese mismo número entero, pues no lo altera para ponerle decimales, tal como podemos ver en el primero ejemplo.

(6).toFloat() //devuelve 6
"11.2".toFloat() //devuelve 11.2

El método toInt() devuelve números enteros. Quiere decir que, si el número sobre el que se invoca es un float, lo convierte a entero quitándole los decimales que tuviera.

(2.98).toInt() //devuelve 2
"3.02".toInt() //devuelve 3

Puedes ver los ejemplos de conversiones en una página aparte.

Estos son todos los métodos que añade Mootools a la clase Number de Javascript, como decía, son escasos, pero bastante útiles a primera vista.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir