Cursos online y materiales digitales para estudiantes y desarrolladores web
Os traigo un sencillo snippet que nos permite modificar el texto de un botón al hacer click sobre él, en respuesta a la duda que nos planteó Cristian en el canal de Youtube:
La solución es muy sencilla: simplemente hay que asociar una función al evento «click» del botón en la que cambiamos el valor de su atributo «value» al que necesitemos.
¡Os dejo el snippet donde podéis verlo!
¡Un error más en esta serie de artículos sobre errores comunes en Javascript! Esta vez vemos cómo se puede y cómo no se puede dividir una cadena con un salto de línea tanto en el editor de código como en la propia visualización.
En la lección Javascript – #1.04. Sentencias en Javascript vimos recomendaciones para escribir sentencias en Javscript. Y es que, en ocasiones, escribimos cadenas muy largas que nos obligan a hacer scroll horizontal en nuestro editor de código o bien necesitamos introducir un salto de línea en la visualización de la cadena. ¿Cuál es el modo correcto de dividirlas?
En primer lugar, podemos poner un salto de línea justo después del igual de asignación de la cadena. Por ejemplo:
let cadena =
"Hola, caracola";Sin embargo, no podemos dividir la cadena por la mitad, sin más, con un salto de línea.
let cadena = "Esta es una cadena muy larga
que me gustaría dividir en dos";
// Obtendríamos un error de sintaxis: "String literal contains an unescaped line break"
// es decir, "El literal cadena contiene un salto de línea no escapado".Para hacerlo, necesitamos utilizar el operador de escape barra invertida de la siguiente manera:
let cadena = "Esta es una cadena muy larga \
que me gustaría dividir en dos";
console.log (cadena);
//El resultado sería "Esta es una cadena muy larga que me gustaría dividir en dos";¡Ojo! No quiere decir que al mostrar la cadena vayamos a ver un salto de línea, si no que podemos escribirla dividida en nuestro editor de código sin hacer scroll horizontal.
Otra opción más laboriosa es utilizar el operador asignación de adición (+=) tal y como se ve en el ejemplo:
let cadena = "Esta es una cadena muy larga ";
cadena += "que me gustaría dividir en dos";
//El resultado sería igualmente "Esta es una cadena muy larga que me gustaría dividir en dos";En cualquier caso, si lo que necesitas es que en la visualización de la cadena se muestre con un salto de línea dependerá del lugar en el que vayas a mostrarla:
console.log ("Hola,\n caracola");
alert ("Hola,\n caracola");
let respuesta1 = confirm ("¿Deseas salir\n de esta página");
let respuesta2 = prompt ("Introduce una opción:\n a) Amarillo \n b) Azul \n c) Rojo
// En todos los casos anteriores se mostraría un salto de línea en el lugar que hay un \n
document.innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";
document.getElementById("miParrafo").innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";
¡Recuerda este error común en Javascript! Para dividir una cadena en el editor de código necesitaremos la barra invertida (\) y para dividirla en la visualización necesitaremos \n o <br/> dependiendo de dónde se muestre.
Tweet
Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?
¡Seguimos con los errores comunes en Javascript! Y lo hacemos con un clásico: confundir adición y concatenación.
Como vimos en las lecciones Javascript – #1.07. Operadores aritméticos y Javascript – #1.09. Operadores de cadena, el signo + se puede utilizar indistintamente para hacer una operación suma y para concatenar dos cadenas.
Podríamos pensar que no hay lugar a dudas porque el primero lo utilizaríamos con dos variables de tipo numérico y el segundo con dos variables de tipo cadena. ¿Pero qué ocurre si las mezclamos? Veamos:
En este caso, sumamos dos valores numéricos:
let x = 3 + 4; // x almacenará un número con el valor 7En este, concatenamos dos cadenas:
let x = "5" + "6"; // x almacenará una cadena con el valor "56"En caso de sumar un número como cadena, el resultado sería como sumar dos cadenas:
let x = 7 + "8"; // x almacenará una cadena con el valor "78"El mayor problema puede surgir si sumamos dos variables y no sabemos qué tipo de datos van a almacenar (un número o una cadena).
En el siguiente ejemplo obtendremos por consola el resultado de concatenar cuando es probable que necesitáramos la suma de ambos valores. Esto suele pasar cuando solicitamos datos al usuario con un prompt o desde un formulario y no los parseamos.
let x = prompt("Introduce un número"); // Introducimos un 3
let y = prompt("Introduce otro número"); // Introducimos un 7
console.log (x+y); // ¡El resultado es 37 en lugar de 10 porque x e y almacenan cadenas!Para solucionar el problema del ejemplo anterior es muy importante parsear los valores al tipo de dato que necesitemos. ¿Cómo? ¡Muy sencillo!
let x = parseInt(prompt("Introduce un número")); // Introducimos un 3
let y = parseInt(prompt("Introduce otro número")); // Introducimos un 7
console.log (x+y); // Ahora sí, el resultado será 10 porque x e y almacenan enteros¡Truco! Si queremos que una suma de valores numéricos se convierta en una concatenación podríamos hacerlo sumando la cadena vacía («») al comienzo de la operación. ¡Ojo! Si sumamos la cadena vacía al final no funcionaría porque primero realizaría la suma y luego la concatenación.
let x = "" + 10 + 3;
let y = 10 + 3 + "";
console.log (x); // El resultado será la cadena "103" porque primero detecta que estamos sumando cadenas
console.log (y); // El resultado será la cadena "13" porque primero hace la suma y luego lo pasa a cadena.¡Recuerda este error común en Javascript! ¡El operador más (+) suma y concatena! Debemos asegurarnos del tipo de datos que utilizamos en la operación.
Tweet
Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?
¡Veamos otro error en esta serie de artículos sobre errores comunes en Javascript! ¡El típico, el inigualable, el clásico error de colocar mal el punto y coma!
Ya vimos en la lección Javascript – #1.04. Sentencias en Javascript que es recomendable, aunque no obligatorio, finalizar las sentencias con un punto y coma. Sin embargo, colocar erróneamente un punto y coma puede tener consecuencias inesperadas.
¿A qué me refiero? Muy sencillo: a poner un punto y coma entre los paréntesis de una estructura de control (if, while, for, etc.) y las llaves o la siguiente sentencia. «¡Pero eso da error!» pensaréis… ¡nada más lejos de la realidad!
Y es que, en Javascript, es posible crear bloques de código independientes entre llaves sin que les preceda una estructura de control. Veamos un ejemplo:
let numero = 3;
if (numero !=3); // Esta sentencia no hace nada
{
alert("Hola, caracola");
}
// Al haber puesto un ";" después del if, finaliza la estructura de control if
// A continuación se ejecuta el alert porque el bloque de las llaves es independienteAsí que, recuerda, ¡después de los paréntesis de las estructuras de control (if, for, while, do, etc.) no coloques un punto y coma!
¡Recuerda! Si ponemos un punto y coma entre una estructura de control (if, while, for…) y las llaves, lo que haya dentro de las llaves SIEMPRE se ejecutará.
Tweet
Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?
¡Damos comienzo a esta serie de artículos sobre errores comunes en Javascript! Y lo hacemos con uno de los más comunes: utilizar una comparación regular en lugar de una comparación estricta.
Como vimos en la lección Javascript – #1.10. Operadores de comparación, a la hora de comparar dos valores podemos utilizar un doble o un triple igual. Sin embargo la diferencia es muy grande.
En una comparación regular (doble igual), el tipo de dato no importa. Veamos un ejemplo:
let x=5; // x toma el valor numérico 5
let y="5"; // y toma el valor de una cadena que contiene un 5
if (x==y) // Esta sentencia devolverá un valor true (verdadero) porque considera igual un 5 numérico que un 5 contenido en una cadenaSin embargo, en una comparación estricta (triple igual), el tipo de dato sí que importa.
let x=5; // x toma el valor numérico 5
let y="5"; // y toma el valor de una cadena que contiene un 5
if (x===y) // Esta sentencia devolverá un valor false (falso) porque los tipos de las variables son diferentes.Y al hilo de esto, un error muy común es olvidar que una sentencia switch utiliza una comparación estricta. Por tanto, no es lo mismo este código, que sí ejecutará el alert:
var x = 10;
switch (x) {
case 10: alert("Hola, caracola"); // Este alert sí se ejecuta
}Que este código, que no lo hará.
var x = 10;
switch (x) {
case "10": alert("Hola, caracola"); // Este alert no se ejecuta
}Por tanto es muy importante asegurarnos el tipo de dato que le pasamos a la sentencia switch y el tipo de dato que comparamos en cada case coinciden.
¡Recuerda este error común en Javascript! ¡No es lo mismo utilizar una comparación regular que una comparación estricta!
Tweet
Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?
