SoftOnTheRocks

martes, 30 de julio de 2013

Input number HTML5. Un campo de numérico para los formularios

En este post y en los siguientes vamos a publicar los nuevos tipos de input que encontramos en HTML5. Con estos nuevos input vamos a ahorrarnos muchas líneas de código validando los valores introducidos ya que ellos controlan automáticamente las respuestas.

El input number de HTML5 valida automáticamente que el valor introducido sea un numérico.

SINTAXIS

<input type="number" name="edad" min="18" max="99" step="2" value="18">

ATRIBUTOS

Los atributos más importantes que definen a input number son los siguientes:

min: valor mínimo del input
max: valor máximo del input
step: valor del intérvalo del input. Con este atributo indicamos el valor en que aumenta o disminuye el input si pulsamos las flechas que aparecen.
valor: valor por defecto del input.

Ordenar array numérico con Javascript

En Javascript la ordenación de arrays se realiza con el método array.sort(). Sin embargo, esta ordenación es lexicográfica y alfanumérica, con lo que si deseamos ordenar un array numérico tendremos problemas. Veamos este ejemplo:

var myarray = [40,100,1,5,25,10];
myarray.sort(); //La función devuelve [1,10,100,25,40,5]

Lo mismo ocurre si intentamos ordenar de forma descendente, ya que primero deberíamos ordenar ascendentemente con el método array.sort() y después invertir el resultado con el método array.reverse(). Al venir ya incorrecta la ordenación ascendente, el método reverse() simplemente nos imprimiría [5,40,25,100,10,1].

Para solucionar estos problemas es muy sencillo. Simplemente pasamos una función como argumento del método sort() y ya tenemos el array numérico ordenado ascendentemente:

var myarray = [40,100,1,5,25,10];
myarray.sort(function(a,b){return a - b}); //La función devuelve [1,5,10,25,40,100]

Para ordenar descendentemente podríamos usar el método reverse() sobre el resultado anterior o invertir la resta de los parámetros de la función que usamos dentro del sort() de la siguiente forma:

var myarray = [40,100,1,5,25,10];
myarray.sort(function(a,b){return b - a}); //La función devuelve [100,40,25,10,5,1]

sábado, 27 de julio de 2013

Mostrar PDF embebido en HTML

Para mostrar un archivo pdf embebido dentro de una página HTML lo único que tenemos que hacer es escribir el siguiente código:

<html>
<body>
<embed src="manual.pdf" width="100%" height="100%">
</body>
</html>

jueves, 25 de julio de 2013

Convertir numéricos con toFixed() y toPrecision() en Javascript

Estas dos funciones son una forma muy sencilla de convertir o formatear valores numéricos en Javascript.

Con la función toFixed() convertimos un número a string con una longitud exacta de valores decimales. Así pues, si se especifican más decimales de los que tiene el valor numérico original, nos añadirá ceros por detrás.

La función toPrecision() en cambio lo que hace es formatear un número a una longitud total concreta. Al igual que con la anterior función, nos añade ceros por detrás si la longitud especificada es mayor que la que tiene la variable numérica.

Veamos algunos ejemplos:

var num = 5.56789;
document.write(num.toFixed()); //6 -> sin decimales
document.write(num.toFixed(2)); //5.57
document.write(num.toFixed(4)); //5.5679
document.write(num.toFixed(6)); //5.567890 -> añade ceros por detrás
document.write(num.toFixed(8)); //5.56789000 -> añade ceros por detrás

document.write(num.toPrecision()); //5.56789 -> devuelve el número original
document.write(num.toPrecision(2)); //5.6
document.write(num.toPrecision(4)); //5.568
document.write(num.toPrecision(6)); //5.56789
document.write(num.toPrecision(8)); //5.5678900 -> añade ceros por detrás

Convertir cadenas de texto en números en Javascript

Os dejo un par de funciones Javascript muy útiles para convertir cadenas de texto a números enteros y decimales. Estas funciones se llaman parseInt y parseFloat.

La función parseInt evalúa una cadena y devuelve un entero. La sintaxis es parseInt(string, radix) donde string es la cadena a convertir y radix se utiliza para especificar el sistema numérico a usar. Si el parámetro radix no se especifica, Javascript asume lo siguiente:

Si la cadena empieza por "0x", Javascript interpreta que se tiene que convertir a hexadecimal.
Si empieza por "0" se asume que se quiere convertir a octal.
Si empieza por cualquier otra cadena se asume que el número base 10 (sistema decimal).

Ejemplos de uso:

<script>
document.write(parseInt("10")); //10
document.write(parseInt("10.33")); //10
document.write(parseInt("34 45 66")); //34
document.write(parseInt(" 60 ")); //60
document.write(parseInt("40 years")); //40
document.write(parseInt("He was 40")); //NaN
document.write(parseInt("10",10)); //10
document.write(parseInt("010")); //10
document.write(parseInt("10",8)); //8
document.write(parseInt("0x10")); //16
document.write(parseInt("10",16)); //16
</script>

La función parseFloat evalúa la cadena y devuelve un número decimal. Al igual que con parseInt, esta función analiza caracter a caracter hasta que encuentra el final de la cadena o un caracter no válido. Si el primer caracter no es numérico devuelve NaN.

Veamos algunos ejemplos:

<script>
document.write(parseFloat("10")); //10
document.write(parseFloat("10.33")); //10.33
document.write(parseFloat("34 45 66")); //34
document.write(parseFloat(" 60 ")); //60
document.write(parseFloat("40 years")); //40
document.write(parseFloat("He was 40")); //NaN
</script>

Fuente:

http://www.w3schools.com/jsref/jsref_parseint.asp

http://www.w3schools.com/jsref/jsref_parsefloat.asp

martes, 23 de julio de 2013

Parser online de JSON

Si trabajamos con la notación JSON nos habrá ocurrido más de una vez que al tratar de convertir una cadena a un objeto el parser nos ha indicado un error.

En lenguajes como PHP, la única información que podemos obtener al parsear es el tipo de error, pero si la cadena es larga nos puede costar un buen rato encontrar el motivo.

Para solucionar este problema os dejo el enlace de un parser online http://json.parser.online.fr/ en el que simplemente pegaremos la cadena JSON en el textarea de la izquierda y automáticamente nos evaluará si es válido y en el caso en que encuentre algún error nos indicará en qué línea y qué tipo de error es. Se trata de una herramienta muy útil y que a cualquier desarrollador le puede venir bien en algún momento.