Obtener edad desde una fecha en Javascript

Hace un tiempo habíamos visto cómo obtener una edad desde una fecha de nacimiento en PostgreSQL, en MySQL y en MS SQL-Server. ¿Y en javascript? Vamos a ver tres funciones:

En la primera función el parámetro que recibiremos será una cadena con una fecha en formato YYYYMMDD (por ejemplo 20180211 para hoy):

function terIdade(cadeaData) {
    var hoxe = new Date();
    var nacemento = new Date(cadeaData);
    var idade = hoxe.getFullYear() - nacemento.getFullYear();
    var m = hoxe.getMonth() - nacemento.getMonth();
    if (m < 0 || (m === 0 && hoxe.getDate() < nacemento.getDate())) {
        idade--;
    }
    return idade;
}

Otra opción, pasando el mismo parámetro, es conseguir el resultado el milisengundos y operar con él para obtener la edad. Para eso dividiremos la diferencia entre fechas entre 1000*60*60*24*365.25:

function terIdade(cadeaData) {
    var nacemento = new Date(cadeaData);
    var data = new Date();
    var dif = data-birthdate;
    var idade = Math.floor(dif/31536000000);
    return idade;
}

La tercera opción sería no mandar a la función una cadena con la fecha, sino separados el año, el mes y el día (pasándoselos como enteros, no como cadenas). Y para el resto haríamos más o menos la misma operación que en el ejemplo.

function terIdade(ano,mes,dia) {
    var hoxe = new Date();   
    var idade = hoxe.getFullYear() - ano;
    var m = hoxe.getMonth() - mes;
    if (m < 0 || (m === 0 && hoxe.getDate() < dia)) {
        idade--;
    }
    return idade;
}
Anuncios

Recursividad en Javascript

Ya hace años hablábamos por aquí sobre la recursividad con ejemplos para C y C++. Es un buen momento para hacer otra entrada, pero ejemplificada en Javascript.

Pero antes de los ejemplos refresquemos la memoria ¿Qué es la recursividad? Se trata de un potente (y a veces peligroso) recurso en la programación. Como aquella primera vez os dejo la definición de la wikipedia:

“…la forma en la cual se especifica un proceso basado en su propia definición.”

“Un problema que pueda ser definido en función de su tamaño, sea este N, pueda ser dividido en instancias más pequeñas (< N) del mismo problema y se conozca la solución explícita a las instancias más simples, lo que se conoce como casos base, se puede aplicar inducción sobre las llamadas más pequeñas y suponer que estas quedan resueltas."

Esto dicho así puede sonar confuso o denso, por lo que podríamos resumirlo como que es una técnica de programación donde una función se llama a si misma.

En la publicación original os ponía dos ejemplos en C, aquí nos vamos a quedar solo con uno para javascript ¿Cómo se calcula el factorial de un número? La operación es la siguiente:

function factorial(num)
{
    // No acepta menores que cero.
    if (num < 0) {
        return 0;
    }
    // Si recibe 0 entonces devuelve 1.
    else if (num == 0) {
        return 1;
    }
    // Si es mayor que cero se llama a si misma.
    else {
        return (num * factorial(num - 1));
    }
}

Acceder a los atributos data de HTML5 desde javascript

Si eres lector habitual de este blog recordarás que no hace mucho vimos cómo hacer esto con jQuery. Vamos ahora a ver cómo hacerlo con javascript a pelo, sin tirar de esas librerías. Repitamos los mismos ejemplos pero sólo con javascript:

<div id='fruta' data-fruta='fresa'></div>

En el div con Idfruta” vamos a guardar un dato: que es una fresa (mismo ejemplo que en artículo anterior). ¿Cómo accedo a este valor usando javascript?

//opción A. A lo bruto
//funciona, pero no es elegante
window.alert(document.getElementById("fruta").getAttribute('data-fruta'));
//opción B. La buena
window.alert(document.getElementById("fruta").dataset.fruta);

Ahí tienes dos ejemplos en los que hacemos un alert() de los datos guardados en el atributo data. El primero, usando getAttribute(), en teoría es la opción “bruta” ya que en principio debería accederse a estos datos como en el segundo ejemplo, que se supone que sería el método correcto. El problema es que el acceso a dataset no está bien implementado en todos los navegadores, así que la opción de usar getAttribute() hoy por hoy, aunque no sea la correcta en la teoría, es la funcional.

¿Y cómo queda el tema de los guiones que habíamos visto en el ejemplo en jQuery? Bueno. Si usamos getAttribute() ponemos el nombre del atributo tal cual, si usamos dataset hacemos como en jQuery y quitamos los guiones (y el prefijo data) usando también notación camelCase:

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
//con getAttribtue
window.alert(document.getElementById("fruta").getAttribute("data-fruta-oferta"));
//mediante dataset
window.alert(document.getElementById("fruta").dataset.frutaOferta);
</script>

Operadores de incremento y decremento en javascript

En javascript disponemos del operador aritmético de decremento y del operador de incremento ++. El primero resta uno al valor de la variable sobre la que lo apliquemos y el segundo añade uno. Esto en principio no requiere más explicación, el único intríngulis con estos operadores es la posición en la que los usamos,ya que no funcionan igual si van antes de la variable que si van después:

  • Si lo ponemos como prefijo, antes de la variable, entonces incrementa el valor de la variable y luego lo devuelve.
  • Si lo ponemos como sufijo, después de la variable, entonces devuelve el valor de esta y luego la incrementa.

Esto con un ejemplo se entiende mucho mejor. Veamos el incremento:

x=3;
y=++x;
//En este caso tanto x como y valdrían 4
x=3;
y=x++;
//En este caso x vale 3 e y vale 4

Con el decremento es lo mismo:

x=3;
y=--x;
//En este caso tanto x como y valdrían 2
x=3;
y=x--;
//En este caso x vale 3 e y vale 2

¿Por qué un número elevado a 0 es igual a 1?

Esto se sale totalmente de la línea editorial del blog, desde luego, pero me apetecía contarlo por aquí. El caso es que en una charla de oficina comenté que una vez cuando cursaba 2º de ESO la profesora me hizo explicar en clase por qué cualquier número elevado a 0 es igual 1, y un compañero me discutió que no. Así que con 32 años me volvía a ver delante de una pizarra haciendo esta demostración:

Podemos expresar que X0 es el resultado de Xn-n siendo X cualquier número real menos el 0 y siendo n cualquier número real. O, por ponerlo con número, podemos decir 20 es el resultado de (por ejemplo) 22-2.

Entonces por propiedades de las potencias Xn-n es igual a Xn/Xn. Siguiendo el ejemplo anterior 22-2=22/22.

Por lo tanto tenemos que X0 = Xn/Xn, y siendo el numerador y el denominador iguales en la división el resultado es necesariamente 1. Es decir 20 = 22/22, por tanto 20 = 4/4. Y 4/4=1, así de simple.

¿Y en el caso del 00? Bueno, eso a mi ya me supera. Pero os dejo un enlace a otro blog donde lo explican y debaten, para que matéis vuestra curiosidad.

Acceder a los atributos data de HTML5 desde jQuery

En el pasado alguna vez utilizamos los atributos rel o class para incluir valores extra que usar luego en javascript. No era una buena práctica, pero a veces era la solución más práctica. HTML5 acabó con esto introduciendo los atributos data, que nos permiten vincular información extra a un elemento del DOM. Veamos un ejemplo:

<div id='fruta' data-fruta='fresa'></div>

En el div con Id “fruta” vamos a guardar un dato: que es una fresa (ok, ya se que el ejemplo no parece tener mucho sentido práctico). ¿Cómo accedo a este valor desde jQuery? Pues con el método data() puedo tanto definirlo como obtenerlo, pasándole como parámetro el nombre del dato.

window.alert($("#fruta").data("fruta"));

El ejemplo de arriba haría un alert mostrándonos el valor. Fíjate que cuando le paso el nombre del atributo lo hago quitándole el prefijo data-. Y hay otra peculiaridad: si el nombre tiene varios guiones entonces estos desaparecen y escribimos el atributo siguiendo la convención camelCase. Un ejemplo:

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
window.alert($("#fruta").data("frutaOferta"));
</script>

En próximas entradas veremos cómo escribir los atributos y cómo acceder a ellos desde Javascript sin usar jQuery.

Cambiar el src de una imagen con javascript o jQuery

Vamos con una entrada rápida de Javascript ¿Cómo cambio el src de una imagen de forma dinámica? No es lo más recomendable para una web por temas de posicionamiento, pero puede ser una solución útil para una aplicación web de uso interno.

Vamos a suponer que tenemos una imagen llamada image1.jpg y que al clickar en un elemento esta cambia por otra que se llama image2.jpg:

<img src="image1.jpg" id="img1" alt="primeraImagen" />

<script>
//así con JS normal
//accediendo directamente a src
function cambiarImagenJS(){
  document.getElementById("img1").src="image2.jpg";
}

//así con jQuery
//haciendo uso de la función attr()
function cambiarImagenjQ(){
  $("#img1").attr("src","image2.jpg");
}
</script>

La idea sería vincular la función a un evento (un click, el cambio de estado de un checkbox o radio, llenar un campo de texto…) y cambiar el valor. En el ejemplo damos por fijo el id del elemento, en la práctica seguramente sería mejor pasárselo a la función. En ese caso ya miráis que se adapta mejor a vuestras necesidades.