not affiliated with Kid Rock
Javascript, jquery y otros frameworks para js
¿Cómo eliminamos en Javascript el primer carácter de una cadena? Es muy simple, usando el método substring() del objeto genérico String, pasándole 1 como parámetro para que empiece tras el primer carácter:
micadena=",uno,dos,tres,cuatro,"; minuevacadena = micadena.substring(1);
El lenguaje Javascript tiene una serie de objetos básicos, que a su vez tienen propiedades y métodos. En próximas entradas iremos viendo distintos objetos, hoy vamos a empezar por los de Number, que tiene básicamente cinco métodos:
El otro día, desarrollando una aplicación en el trabajo, me encontré con la necesidad de eliminar las comillas simples (o apóstrofos) y dobles de un campo de texto. ¿es posible hacerlo con Javascript? Sí, veamos varios ejemplos de expresiones regulares para hacerlo:
La primera opción sería eliminar ambas:
miCadena = miCadena.replace(/["']/g, "");
¿Y si cambiamos el apóstrofo por un acento?
miCadena = miCadena.replace(/[']/g, "`");
¿Y si cambiamos las comillas por dos acentos?
miCadena = miCadena.replace(/["]/g, "``");
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;
}
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));
}
}
Si en una entrada anterior vimos cómo leer los atributos data de HTML5 con jQuery hoy vamos a ver el otro caso: modificar dichos atributos.
El ejemplo va a ser el mismo que en el anterior artículo:
<div id='fruta' data-fruta='fresa'></div>
Ok, tenemos un div con el id fruta, el atributo data-fruta y en principio el valor fresa. ¿Cómo lo modifico haciendo uso de jQuery? Pues de nuevo con el método data(), pero en este caso pasándole dos parámetros en lugar de uno:
$("#fruta").data("fruta","pera");
window.alert($("#fruta").data("fruta"));
Si el método data() recibe solo el nombre del atributo al que queremos acceder nos lo devuelve, pero si recibe como segundo atributo una cadena entonces modifica el valor del atributo asignándole el de ese segundo parámetro que le pasamos.
Y voy a repetir exactamente el mismo párrafo que en el artículo anterior sobre la nomenclatura (para que no tengas que abrirlo): 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.
<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
$("#fruta").data("frutaOferta","fresa");
window.alert($("#fruta").data("frutaOferta"));
</script>
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 Id “fruta” 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>
