30 días de Mootools 1.2 – DÍA 8: Filtrando entradas. Parte 1 (numbers).

Hola amigos, hoy vamos a ver cómo Mootools puede filtrar entradas de usuario. Hoy comenzaremos con varios filtrados básicos de numbers, y en la próxima sesió nos adentraremos en el mundo de filtrado de strings. Si aún no has chequeado el resto de las clases anteriores de esta serie, altamente te recomiendo que lo hagas, ya que aquí la cosa se comienza a complicar en la medida en que seguimos adentrándonos.

NOTA: El filtrado de entradas en Javascript es para asegurar que tu código corra perfecto y suave como el aire, NO SE DEBE usar como un sustituto para el filtrado de entradas del lado del servidor el cual es requerido para proteger tus aplicaciones contra ataques de inyección.

Numbers

En el 4to día terminamos con un ejemplo que tomó valores RGB desde cajas de texto y los usó para cambiar el fondo de la p´gina, hoy vamos a tomar parte del código de ese ejemplo y lo expandiremos.

rgbToHex()

T&ecute;cnicamente hablando, la funció rgbToHex() pertenece a la colleción de Array. Ya que es una funció array construida para tratar con números, hoy vamos a ir tras ella. Funcionalmente, rgbToHex() es muy sencilla de usar:

toInt()

Ahora bien, necesitamos una manera de asegurarnos que la función rgbToHex() solamente está recibiendo números enviados a ésta – es ahí dónde entra en acción la función toInt(). Puedes llamarla dentro de una variable y hará lo mejor de sí para obtener un entero desde el contenido de dicha variable.

Como puedes ver, toInt() no puede manipular cada situación concebible,
en cambio gracias a otra pieza de la grandesa de Mootools llamada $type(), podemos lidiar con dicho problema.

$type()

$type() es otra vía que pose Mootools para enfrentar diferentes problemáticas. Examina cualquier variable que le pases y retorna una string diciéndote qué tipo de variable es:

Existen muchas más cosas que $type() detecta – puedes obtener una lista exhaustiva en la documentación oficial de Core.$type(). No obstante, de momento lo que nos interesa es la detección de enteros. Si tomamos $type() y la lanzamos dentro de la función toIntDemo(), podremos lidiar fácilmente con entradas que toInt() no puede manipular:

Cuando lo estiramos todo dentro de changeColor(), obtenemos una solución que trabaja casi perfecto:

La última función es pasando los números rgbToHex() fuera del rango RGB 0 – 255, el cual convierte debidamente el valor en su equivalente hexadecimal. Desafortunadamente esto significa que si recibimos un número fuera de dicho rango como una entrada, no podremos obtener un valor hexadecimal de color. Afortunadamente existe una pieza más dentro del kit de Mootools de la que podemos hacer uso para encargarnos de este problema.

limit()

La función limit() de Mootools es muy versátil. Puedes hacer un llamado dentro en un número con los límites inferior y superior con los que quieras limitar dicho número como argumentos, y si ese número está afuera del rango que definiste, éste redondeará apropiadamente el valor. Es importante recordar que limit REQUIERE un entero para que funcione, así que es una buena idea hacer uso de toInt() en algo que estés asumiendo sea un número antes de usar limit.

Profundiza aún más

Para aprender más…

Descarga el zip de la clase de hoy

Vía | ConsiderOpen

5 Comentarios

  1. alain

    Para todos los que han sabido esperar, el agradecimiento eterno. Aquí se retoma Webizzima, la serie “30 Días de Mootools 1.2” y mucho más.

    Saludos a todos.

  2. alain

    Thank you very much 🙂

  3. Alberto

    Saludos!

    Este es un recurso inpresindible, y explicado de manera excelente! gracias por ello.

    ¿Dónde puedo ver el resto de los días?
    solo he visto del 1 al 8

Dejanos un comentario