sábado, 31 de agosto de 2019

JavaScript localStorage (1/3)

Esta entrada pertenece a una serie.

El objeto Storage de la API de almacenamiento web proporciona acceso al almacenamiento de sesión o al almacenamiento local para un dominio particular. Esto le permite leer, agregar, modificar y eliminar elementos de datos almacenados.

La propiedad window.localStorage permite guardar pares clave-valor en un navegador web. Almacena los datos sin fecha de vencimiento.

Puede ver un ejemplo funcionando en w3schools.
Basándonos en las ideas del caso anterior vamos a crear un juego con dos botones que mide el intervalo de tiempo que transcurre entre pulsar el primer botón y pulsar el segundo botón.


HTML + JavaScript

 <!DOCTYPE html>  
 <html>  
 <head><meta charset="utf-8"></head>  
 <body>  
 <h1>Mide tu velocidad</h1>  
 <p>Pulsa los dos botones con el menor lapso de tiempo que puedas.</p>  
 <p>Te mostraré los milisegundos que has tardado entre ambas pulsaciones.</p>  
 <button onclick="inicio()">Inicio</button>  
 <button onclick="final()">Final</button>  
 <h3 id="resultado"></h3>  
 <script>  
   var tomahora1=0;  
   function inicio() {  
     localStorage.setItem("mytime", Date.now());  
     tomahora1=localStorage.getItem("mytime");  
     return tomahora1;  
   }  
   function final() {  
     localStorage.setItem("mytime", Date.now());  
     tomahora2=localStorage.getItem("mytime");  
     let intervalo=tomahora2-tomahora1;  
     document.getElementById("resultado").innerHTML = intervalo;  
   }  
 </script>  
 </body>  
 </html>  

La línea siguiente
  • document.getElementById("resultado").innerHTML = intervalo;
se puede intercambiar perfectamente por esta otra:
  • document.querySelector("#resultado").innerHTML = intervalo;

Dejamos enlaces a dos emuladores de código.
El record que hemos llegado a ver

JavaScript: objetos JSON

Ya hemos visto en una entrada anterior lo que son los objetos JSON (JavaScript Object Notation) y algunos ejemplos. Está disponible en la siguiente entrada.
En el siguiente caso práctico vamos a manejar el objeto JSON usando únicamente JavaScript, esto es, si usar jQuery y sin usar AJAX.

Versión 1

Disponemos de un objeto JSON definido como variable dentro del código JavaScript. La variable se denomina peliculas y contiene un array con siete películas. Dentro del array cada elemento es un objeto del tipo clave-valor donde se tiene un id de cada película con su nombre, director, año y calificación.

El objetivo es listar el nombre y año de cada una de las siete películas.



HTML

La última línea del body llama al procedimiento JS. Esto se hace en ese punto, para que dé tiempo a que se cargue el DOM.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Listar un JSON</title>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <div></div>  
   <script type="text/javascript" src="script.js"></script>  
  </body>  
 </html>  


JavaScript


 var peliculas=[  
  {  
   "id": 1,  
   "nombre": "El sexto sentido",  
   "director": "M. Night Shyamalan",  
   "year": 1999,  
   "clasificacion": "Drama"  
  },  
  {  
   "id": 2,  
   "nombre": "Pulp Fiction",  
   "director": "Tarantino",  
   "year": 1994,  
   "clasificacion": "Acción"  
  },  
  {  
   "id": 3,  
   "nombre": "Todo Sobre Mi Madre",  
   "director": "Almódovar",  
   "year": 1999,  
   "clasificacion": "Drama"  
  },  
  {  
   "id": 4,  
   "nombre": "300",  
   "director": "Zack Snyder",  
   "year": 2007,  
   "clasificacion": "Acción"  
  },  
  {  
   "id": 5,  
   "nombre": "El silencio de los corderos",  
   "director": "Jonathan Demme",  
   "year": 1991,  
   "clasificacion": "Drama"  
  },  
  {  
   "id": 6,  
   "nombre": "Forrest Gump",  
   "director": "Robert Zemeckis",  
   "year": 1994,  
   "clasificacion": "Comedia"  
  },  
  {  
   "id": 7,  
   "nombre": "La vida es bella",  
   "director": "Roberto Benigni",  
   "year": 1997,  
   "clasificacion": "Comedia dramática"  
  }  
 ];  
 console.log(peliculas[0].nombre);  
 var mensaje="";  
 for(let i in peliculas){  
  mensaje+="<li>"+peliculas[i].nombre+" - "+peliculas[i].year+"</li>";  
 }  
 var midiv=document.querySelector('div');  
 midiv.innerHTML=mensaje;  


Versión 2





HTML


  • En la versión 2 se llama al script en el head.
  • El div lleva un id.


 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Listar un JSON</title>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <div id="film"></div>  
  </body>  
 </html>  


JavaScript

Hemos reducido un poco el objeto JSON eliminando el id y la clasificación.
Para conseguir que esté cargado el DOM cuando comienza el código hemos utilizado la siguiente estructura de JavaScript puro.

window.addEventListener('load',function(){
    // código que se ejecuta después de que se cargue el DOM
});

 'use strict'  
 var peliculas=[  
  {  
   "nombre": "El sexto sentido",  
   "director": "M. Night Shyamalan",  
   "year": 1999  
  },  
  {  
   "nombre": "Pulp Fiction",  
   "director": "Tarantino",  
   "year": 1994  
  },  
  {  
   "nombre": "Todo Sobre Mi Madre",  
   "director": "Almódovar",  
   "year": 1999  
  },  
  {  
   "nombre": "300",  
   "director": "Zack Snyder",  
   "year": 2007  
  },  
  {  
   "nombre": "El silencio de los corderos",  
   "director": "Jonathan Demme",  
   "year": 1991  
  },  
  {  
   "nombre": "Forrest Gump",  
   "director": "Robert Zemeckis",  
   "year": 1994  
  },  
  {  
   "nombre": "La vida es bella",  
   "director": "Roberto Benigni",  
   "year": 1997  
  }  
 ];  
 window.addEventListener('load',function(){  
  var midiv=document.querySelector('#film');  
  for(let i in peliculas){  
   var p=document.createElement('p');  
   p.append(peliculas[i].nombre+" - "+peliculas[i].year);  
   midiv.append(p);  
  }  
 });  


Pendiente de estudiar

Realizar un tercer caso donde el objeto JSON se encuentre en un archivo propio con extensión json en nuestra carpeta local.


JavaScript: el uso de this

Veamos un caso práctico donde usamos this para referirnos al botón sobre el que la función que se activa con el evento click se refiere al propio botón. Así evitamos volver a referirnos al propio botón ya que estamos en su contexto.


Cada vez que pulsamos sobre el botón cambia el color del texto según valores aleatorios de rgb entre 0 y 255 para cada color rojo, verde, azul.

HTML

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>This</title>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1 id='mih1'>The Rainbow</h1>  
   <button id='miboton'>Colors</button>  
  </body>  
 </html>  

JavaScript

En este caso usamos código JavaScript puro sin usar jQuery.


En este caso this está haciendo referencia a la variable miboton.

La función rgb retorna un string. Si incluimos la siguiente línea podemos ver que nos da un string.

    console.log(typeof(rgb()));

 'use strict'  
 window.addEventListener('load',function(){  
  var mih1=document.querySelector("#mih1");  
  var miboton=document.querySelector("#miboton");  
  miboton.addEventListener('click',function(){  
   console.log("Evento click capturado");  
   this.style.border='2px solid red';  
   mih1.style.color=rgb();  
   function rgb(){  
    let r=Math.floor(Math.random()*256);  
    let g=Math.floor(Math.random()*256);  
    let b=Math.floor(Math.random()*256);  
    console.log("r=",r);  
    console.log("g=",g);  
    console.log("b=",b);  
    return "rgb("+r+","+g+","+b+")";  
   }  
  });  
 });  

CSS

 h1 {   
  display: block;  
  font-size: 4em;  
  font-weight: bold;  
 }  

viernes, 30 de agosto de 2019

JavaScript: formulario en pantalla

Vamos a crear un formulario sencillo en HTML capturando el nombre, apellidos y edad. Al pulsar al botón enviar conseguiremos que aparezca en pantalla junto al formulario en una zona que con un recuadro con borde punteado.

Disponemos de tres versiones que difieren en la forma en la que mostramos en pantalla los datos recogidos por el formulario.

El objetivo es crear los siguientes elementos.
  1. Formulario con nombre, apellidos, edad
  2. Botón de enviar formulario: evento submit
  3. Mostrar datos por pantalla

Versión 1


HTML

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Capturar formulario</title>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1>Mostrar datos del formulario en pantalla</h1>  
   <div class="box">  
    <form action="#" method="POST" id="formulario" onsubmit="return false">  
     <p>  
      <label for="nombre">Nombre:</label>  
      <input type="text" name="nombre" id="nombre" value="Ana"/>  
     </p>  
     <p>  
      <label for="apellidos">Apellidos:</label>  
      <input type="text" name="apellidos" id="apellidos" value="Ruiz"/>  
     </p>  
     <p>  
      <label for="edad">Edad:</label>  
      <input type="number" name="edad" id="edad" value="23"/>  
     </p>  
     <p>  
      <input type="submit" value="Enviar" id="submit" />  
     </p>  
    </form>  
   </div>  
   <div class="box dashed">  
    <h3>Información del usuario</h3>  
    <hr>  
   </div>  
  </body>  
 </html>  

JavaScript

 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=document.querySelector('#edad').value;  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   //Método 1  
   var parrafo =document.createElement('p');  
   parrafo.append(nombre+" ");  
   parrafo.append(apellidos+" ");  
   parrafo.append(edad);  
   box_dashed.append(parrafo);  
  });  
 });  

CSS

La palabra dashed significa línea punteada.

 .box{  
  width: 200px;  
  height: 200px;  
  float: left;  
  margin: 20px;  
 }  
 .dashed{  
  border: 5px dashed black;  
  padding: 20px;  
 }  

Versión 2

Con la versión 2 logramos escribir los tres datos en tres párrafos creados dentro del recuadro.


HTML

Es el mismo código que el de la versión 1.

JavaScript


 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=document.querySelector('#edad').value;  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   //Método 2  
   var datos_usuario=[nombre,apellidos,edad];  
   for (let indice in datos_usuario){  
    var parrafo =document.createElement('p');  
    parrafo.append(datos_usuario[indice]);  
    box_dashed.append(parrafo)  
   }  
  });  
 });  

CSS

Es el mismo código que el de la versión 1.

Versión 3

HTML

El código es similar a los anteriores salvo en la zona final donde hemos añadido un comentario denominado: 'Tres párrafos añadidos para el Método 3'. En esa zona se incluyen tres párrafos con sus id correspondientes para nombre, apellidos y edad.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Capturar formulario</title>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1>Mostrar datos del formulario en pantalla</h1>  
   <div class="box">  
    <form action="#" method="POST" id="formulario" onsubmit="return false">  
     <p>  
      <label for="nombre">Nombre:</label>  
      <input type="text" name="nombre" id="nombre" value="Ana"/>  
     </p>  
     <p>  
      <label for="apellidos">Apellidos:</label>  
      <input type="text" name="apellidos" id="apellidos" value="Ruiz"/>  
     </p>  
     <p>  
      <label for="edad">Edad:</label>  
      <input type="number" name="edad" id="edad" value="23"/>  
     </p>  
     <p>  
      <input type="submit" value="Enviar" id="submit" />  
     </p>  
    </form>  
   </div>  
   <div class="box dashed">  
    <h3>Información del usuario</h3>  
    <hr>  
    <!-- Tres párrafos añadidos para el Método 3 -->  
    <p id="p_nombre">  
     Nombre: <span></span>  
    </p>  
    <p id="p_apellidos">  
     Apellidos: <span></span>  
    </p>  
    <p id="p_edad">  
     Edad: <span></span>  
    </p>  
   </div>  
  </body>  
 </html>  

JavaScript

 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=document.querySelector('#edad').value;  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   //Método 3  
   var p_nombre = document.querySelector('#p_nombre span');  
   var p_apellidos = document.querySelector('#p_apellidos span');  
   var p_edad = document.querySelector('#p_edad span');  
   p_nombre.innerHTML=nombre;  
   p_apellidos.innerHTML=apellidos;  
   p_edad.innerHTML=edad;  
  });  
 });  

CSS

Es el mismo código que el de la versión 1.

Versión 4

La versión 4 incluye control de errores. Si no se escribe un nombre, un apellido o una edad numérica mayor que cero saltará un error avisando con un alert e indicando en la página la palabra Error en color rojo.

HTML

Hemos incluido:
  • un <span> con id="error_nombre" para el nombre
  • un <span> con id="error_apellidos" para los apellidos
  • un <span> con id="error_edad" para la edad

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Capturar formulario con validación</title>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1>Mostrar datos del formulario en pantalla</h1>  
   <div class="box">  
    <form action="#" method="POST" id="formulario" onsubmit="return false">  
     <p>  
      <label for="nombre">Nombre: <span id="error_nombre"></span></label>  
      <input type="text" name="nombre" id="nombre" value="Ana"/>  
     </p>  
     <p>  
      <label for="apellidos">Apellidos: <span id="error_apellidos"></span></label>  
      <input type="text" name="apellidos" id="apellidos" value="Ruiz"/>  
     </p>  
     <p>  
      <label for="edad">Edad: <span id="error_edad"></span></label>  
      <input type="number" name="edad" id="edad" value="23"/>  
     </p>  
     <p>  
      <input type="submit" value="Enviar" id="submit" />  
     </p>  
    </form>  
   </div>  
   <div class="box dashed">  
    <h3>Información del usuario</h3>  
    <hr>  
    <p id="p_nombre">  
     Nombre: <span></span>  
    </p>  
    <p id="p_apellidos">  
     Apellidos: <span></span>  
    </p>  
    <p id="p_edad">  
     Edad: <span></span>  
    </p>  
   </div>  
  </body>  
 </html>  

JavaScript

Hemos creado tres condicionales if con su else correspondiente para el control de errores del nombre, de los apellidos y de la edad.

El método trim() elimina los espacios vacíos en ambos extremos de un string.

Hemos dejado comentada una línea de código en el else del control de errores del nombre que hace un .style.display='none' ya que en principio si parecía conseguir que la palabra error desapareciera en caso de no existir error pero dejaba ese estilo de forma permanente y si se chequeaba un segundo error la palabra 'Error' en rojo ya no aparecía porque estaba desactivado el display.

Para conseguir nuestro objetivo hemos optado por .innerHTML="<span id='error_nombre'></span>" donde dentro del span no escribimos nada. Pero es necesario que lleve su código HTML con su id incluido ya que si el .innerHTML fuera simplemente un vacío "" habríamos eliminada la etiqueta span y al realizar un segundo error el control de errores no funcionaría.


 'use strict'  
 window.addEventListener('load',function(){  
  console.log("DOM cargado");  
  var formulario=document.querySelector("#formulario");  
  var box_dashed=document.querySelector(".dashed");  
  box_dashed.style.display="none";  
  formulario.addEventListener('submit',function(){  
   console.log("Evento submit capturado");  
   var nombre=document.querySelector('#nombre').value;  
   var apellidos=document.querySelector('#apellidos').value;  
   var edad=parseInt(document.querySelector('#edad').value);  
   var error_nombre=document.querySelector('#error_nombre');  
   var error_apellidos=document.querySelector('#error_apellidos');  
   var error_edad=document.querySelector('#error_edad');  
   if(nombre.trim()==null || nombre.trim().length==0){  
    alert("El nombre no es válido");  
    error_nombre.innerHTML="<span id='error_nombre'> Error</span>";  
    error_nombre.style.color="red";  
    return false;  
   }else{  
    //document.querySelector('#error_nombre').style.display='none';  
    error_nombre.innerHTML="<span id='error_nombre'></span>";  
   }  
   if(apellidos.trim()==null || apellidos.trim().length==0){  
    alert("Los apellidos no son válidos");  
    error_apellidos.innerHTML="<span id='error_apellidos'> Error</span>";  
    error_apellidos.style.color="red";  
    return false;  
   }else{  
    error_apellidos.innerHTML="<span id='error_apellidos'></span>";  
   }  
   if(edad==null || edad<=0 || isNaN(edad)){  
    alert("La edad no es válida");  
    error_edad.innerHTML="<span id='error_edad'> Error</span>";  
    error_edad.style.color="red";  
    return false;  
   }else{  
    error_edad.innerHTML="<span id='error_edad'></span>";  
   }  
   box_dashed.style.display="block";  
   console.log(nombre,apellidos,edad);  
   var p_nombre = document.querySelector('#p_nombre span');  
   var p_apellidos = document.querySelector('#p_apellidos span');  
   var p_edad = document.querySelector('#p_edad span');  
   p_nombre.innerHTML=nombre;  
   p_apellidos.innerHTML=apellidos;  
   p_edad.innerHTML=edad;  
  });  
 });  

CSS

Es el mismo código que el de la versión 1.

jueves, 29 de agosto de 2019

JavaScipt timers: setinterval, settimeout

Veamos los controladores de tiempo en JavaScript. Los timers son:
  • settimeout → ejecuta una función después de esperar un cierto número de milisegundos
  • setinterval → permite ejecutar una función cada cierto intervalo de forma repetitiva

setTimeout + clearTimeout


https://repl.it/@valoro/JS-setTimeout

HTML

Disponemos de dos botones, uno para iniciar el proceso de setTimeout y otro para interrumpirlo con clearTimeout.
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>controladores de tiempo en JavaScript</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <button id='b1'>Iniciar</button>  
   <button id='b2'>Interrumpir</button>  
  </body>  
 </html>  

JavaScript +jQuery

Pulsando el botón Iniciar lanzamos setTimeout que lanzar una función flecha que lanza un alert que dice Hola con un retardo de 2000 milisegundos. Si deseamos interrumpir el alert antes de que se produzca debemos pulsar el botón Interrumpir que lanzará clearTimeout.
 'use strict'  
 $(function(){  
  var tiempo;  
  $("#b1").click(function(){  
   tiempo=setTimeout(() => alert("Hola"), 2000);  
  });  
  $("#b2").click(function(){  
    clearTimeout(tiempo);  
  });  
 });  

setInterval + clearInterval

Versión 1

https://repl.it/@valoro/JS-setInterval1

HTML

Disponemos de dos botones.
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>controladores de tiempo en JavaScript</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <button id='b1'>Iniciar</button>  
   <button id='b2'>Finalizar</button>  
  </body>  
 </html>  

JavaScript +jQuery

Al pulsar el botón Iniciar, cada segundo se imprime por consola la palabra Hola. El proceso se detiene al pulsar el botón Finalizar.
 'use strict'  
 $(function(){  
  var tiempo;  
  $("#b1").click(function(){  
   tiempo=setInterval(mifuncion,1000);  
   function mifuncion(){  
    console.log("Hola");  
   }  
  });  
  $("#b2").click(function(){  
    clearInterval(tiempo);  
  });  
 });  

Versión 2

Alterna el color del texto cada 500 milisegundos

https://repl.it/@valoro/JS-setInterval2


HTML

Dos botones y un h1.
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>controladores de tiempo en JavaScript</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1>Bienvenidos al mundo del cambio</h1>  
   <button id='b1'>Iniciar</button>  
   <button id='b2'>Finalizar</button>  
  </body>  
 </html>  

JavaScript + jQuery

Creamos una variable auxiliar booleana para controlar cómo se alterna entre los dos colores.
 'use strict'  
 $(function(){  
  var tiempo;  
  $("#b1").click(function(){  
   tiempo=setInterval(mifuncion,500);  
   var aux=true;  
   function mifuncion(){  
    if (aux){  
     $('h1').css("color","blue");  
     aux=false;  
    }else{  
     $('h1').css("color","red");  
     aux=true;  
    }  
   }  
  });  
  $("#b2").click(function(){  
    clearInterval(tiempo);  
  });  
 });  

Nota

En el siguiente caso puede ver cómo se alterna un texto entre colores al pulsar reiteradamente un único botón. Es lo que se denomina toggle (palanca).

martes, 27 de agosto de 2019

JavaScript: generar números sin repetición

Queremos crear un generador de números de la lotería Primitiva. Se trata de generar seis números entre 1 y 49 de forma aleatoria, sin repetición.

Versión 1

El código está disponible en el siguiente enlace.

HTML

En un div vacío es donde volcaremos la combinación ganadora de la lotería.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Loteria Primitiva con JavaScript</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <h1>Lotería primitiva</h1>  
   <h3>Seis números entre 1 y 49 sin repetición</h3>  
   <p class='big'>  
    Programación en JavaScript y jQuery<br>  
    Caso práctico  
   </p>  
   <button>Generar combinación</button>  
   <br>  
   <hr>  
   <br>  
   <div></div>  
  </body>  
 </html>  

CSS

Un poco de color y estilo con CSS. Lo más interesante es word-spacing: 20px; que nos permite espaciar las palabras de una frase. En este caso, no son palabras sino los números de la combinación ganadora que imprimimos en el div. Si esto no se pusiera todos los números se verían sin mucho espacio entre ellos.

 h1 {  
  color: green;  
  letter-spacing: 3px;  
 }  
 h3 {  
  color: purple;  
 }  
 p.big {  
  color: blue;  
  line-height: 1.8;  
 }  
 div {  
  color: red;  
  text-indent: 30px;  
  word-spacing: 20px;  
  text-shadow: 2px 1px pink;  
  font-size: 24px;  
  font-family: Arial, Helvetica, sans-serif;  
 }  

JavaScript + jQuery

Creamos la variable lista que es un array que contendrá los seis números aleatorios sin repetición. Inicializamos la variable con uno de los números aleatorios, ya que el primero de ellos estamos seguros de que no está repetido.

Entramos en un bucle while que se repetirá mientras la lista no llegue a seis elementos.

Creamos un número candidato que es otro número aleatorio entre 1 y 49. Ahora debemos averiguar si este candidato se encuentra ya entre los números que contiene el array hasta el momento. Para ello necesitaremos una variable booleana de control denominada norepe que inicializamos en true, ya que estamos presuponiendo que el candidato no está repetido.

Entramos en otro bucle while que se repetirá mientras norepe sea true, esto es, el bucle se repetirá mientras el candidato no supere el test que nos garantiza que es único.

El test que debe pasar cada candidato es un bucle forEach con una función anónima que contiene un condicional if donde evaluamos si el candidato es igual a cada uno de los elementos (item) que contiene hasta el momento la lista. En caso de encontrar alguna repetición la variable de control booleana norepe se convierte en false, lo que indica que se ha encontrado una repetición.

Finalizado el test nos preguntamos con un if si norepe es true, en caso afirmativo quiere decir que el candidato ha superado el test y que por lo tanto es único y será incorporado a la lista con push, que lo añade al final.

En caso de que el candidato no supere el test (en caso de que esté repetido) se genera un nuevo número aleatorio candidato y comienza el proceso, hasta que se consiga obtener uno que sea único y así podamos incorporarlo a la lista.

Finalmente se ordena la lista con sort para ser impresa en pantalla incorporándose al div. Con finalidad estética convertimos la lista en un string usando join(' ') con un separador de espacio. Si no pusiéramos el espacio se verían todos los números de la combinación ganadora juntos, apelotonados, sin separación, y no podría actuar el código CSS separándolos aún más.

 'use strict'  
 $(function(){  
  $("button").click(function(){  
   var lista=[Math.floor(Math.random()*(49-1))+1];  
   console.log("longitud:"+lista.length,"lista: ",lista);  
   while (lista.length<6){  
    var candidato=Math.floor(Math.random()*(49-1))+1;  
    console.log("candidato:",candidato);  
    var norepe=true;//inicialmente suponemos que no está repetido  
    while (norepe){  
     lista.forEach(function(item){  
      if(candidato==item){  
       norepe=false; //detectado nº repetido  
      };  
     });  
     if (norepe){  
      lista.push(candidato); //append al array  
      console.log("longitud:"+lista.length,"lista: ",lista);  
     };  
    };  
   };  
   lista.sort((a,b)=>a-b); //función de flecha para ordenar números bien  
   $('div').html(lista.join(' ')); //convertir array to string  
  });  
 });  

Cuando el candidato está repetido se busca otro.

Versión 1 bis

Vamos a organizar el código JS anterior incorporando una función denominada comprueba que se encargará de verificar que el número candidato no está ya en la lista, y en caso de que no se encuentre repetido lo incorporará al final del array.
 'use strict'  
 $(function(){  
  $("button").click(function(){  
   var lista=[Math.floor(Math.random()*(49-1))+1];  
   console.log("longitud:"+lista.length,"lista: ",lista);  
   while (lista.length<6){  
    var candidato=Math.floor(Math.random()*(49-1))+1;  
    console.log("candidato:",candidato);  
    //invocamos la función que comprueba  
    //si el candidato no está repetido lo añade a la lista  
    comprueba(candidato, lista);  
   };  
   lista.sort((a,b)=>a-b); //función de flecha para ordenar números bien  
   $('div').html(lista.join(' ')); //convertir array to string  
   function comprueba(candidato,lista){  
    let norepe=true;//inicialmente suponemos que no está repetido  
    while (norepe){  
     lista.forEach(function(item){  
      if(candidato==item){norepe=false};//detectado nº repetido  
     });  
     if (norepe){//si el candidato no está repetido  
      lista.push(candidato); //se añade a la lista  
      console.log("longitud:"+lista.length,"lista: ",lista);  
     };  
    };  
    return lista;  
   }  
  });  
 });  

Versión 2

El código está disponible en el siguiente enlace.

JavaScript + jQuery

Creamos la variable lista 49 que es un array que contiene los números correlativos 1 hasta 49.

var lista49=[1,2,3,4,5,6,7,8, ... ... ... , 49];

La forma de crear esta lista consiste en crear un array vacío de 49 posiciones y luego con una función de flecha asignar el valor correlativo de cada elemento al índice que ocupa k más 1. Hemos de sumar 1 ya que los arrays comienzan en cero y nosotros queremos que el primer valor sea 1.
La lista con los 49 números correlativos se desordena con sort y una función de flecha. El método sort permite ordenar y la función de flecha indica el modo en el que se ordenará que es mediante aleatorios. Por tanto, si ordenamos de forma aleatoria lo que estamos haciendo es desordenar.

Una vez desordenada el array lista49, creamos otro array denominado lista que toma del anterior únicamente los seis primeros elementos. Esto se hace con slice.

Finalmente se ordena la lista son sort, recurriendo al clásico método de ordenación de números a-b ya que si esto no se hace, se ordenará como si los números fueran un string y no quedaría correctamente ordenado.

 'use strict'  
 $(function(){  
  $("button").click(function(){  
   var lista49=Array.from({length: 49}, (v,k) => k+1);  
   lista49 = lista49.sort(() => Math.random()-0.5);  
   var lista=lista49.slice(0,6);  
   lista.sort((a,b)=>a-b);  
   $('div').html(lista.join(' '));  
  });  
 });  

Resumiendo lo que hacemos en esta versión es:
  • Creamos un array con los 49 números correlativos
  • Los desordenamos aleatoriamente
  • Elegimos los seis primeros
De esta forma nos garantizamos que los números elegidos son aleatorios sin repetición.

domingo, 25 de agosto de 2019

jQuery resaltar párrafos largos

Construir un HTML con varios <p> y un js que lea estas etiquetas. El js resaltará de amarillo aquellos párrafos cuyo contenido sea mayor de 100 caracteres.

La función $.each() no es lo mismo que $(selector).each(), que se usa para iterar, exclusivamente, sobre un objeto jQuery.


Versión 1

https://repl.it/@valoro/jQuery-parrafos-cien1

HTML

Disponemos de unos versos agrupados en párrafos donde unos tienen una longitud mayor a 100 caracteres y otros no. El objetivo es subrayar de color amarillo los párrafos largos al pulsar un botón.

 <!DOCTYPE html>  
  <html>  
   <head>  
    <meta charset="utf-8">  
    <title>jQuery resaltar textos</title>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
    <script type="text/javascript" src="script.js"></script>  
   </head>  
  <body>  
   <h1>Resaltar textos largos</h1>  
   <h3>Si el párrafo tiene más de cien caracteres</h3>  
   <h5>Poderoso caballero es Don Dinero (<i>Quevedo</i>)</h5>  
   <p>Nace en las Indias honrado, donde el mundo le acompaña; viene a morir en España, y es en Génova enterrado.</p>  
   <p>Y pues quien le trae al lado es hermoso, aunque sea fiero, poderoso caballero es don Dinero.</p>  
   <p>Es galán y es como un oro, tiene quebrado el color, persona de gran valor, tan cristiano como moro.</p>  
   <p>Pues que da y quita el decoro y quebranta cualquier fuero, poderoso caballero  es don Dinero.</p>  
   <p>Son sus padres principales, y es de noble descendiente, porque en las venas de Oriente todas las sangres son reales;</p>  
   <p>y pues es quien hace iguales al duque y al ganadero, poderoso caballero es don Dinero.</p>  
   <p>Mas ¿a quién no maravilla ver en su gloria sin tasa que es lo menos de su casa doña Blanca de Castilla?</p>  
   <p>Pero, pues da al bajo silla y al cobarde hace guerrero, poderoso caballero  es don Dinero.</p>  
   <p>Sus escudos de armas nobles son siempre tan principales, que sin sus escudos reales no hay escudos de armas dobles;</p>  
   <p>y pues a los mismos robles da codicia su minero, poderoso caballero es don Dinero.</p>  
   <p>Por importar en los tratos y dar tan buenos consejos, en las casas de los viejos gatos le guardan de gatos.</p>  
   <p>Y pues él rompe recatos y ablanda al juez más severo, poderoso caballero es don Dinero.</p>  
   <p>Y es tanta su majestad (aunque son sus duelos hartos), que con haberle hecho cuartos, no pierde su autoridad;</p>  
   <p>pero, pues da calidad al noble y al pordiosero, poderoso caballero  es don Dinero.</p>  
   <p>Nunca vi damas ingratas a su gusto y afición; que a las caras de un doblón hacen sus caras baratas;</p>  
   <p>y pues hace las bravatas desde una bolsa de cuero, poderoso caballero es don Dinero.</p>  
   <p>Más valen en cualquier tierra (¡mirad si es harto sagaz!) sus escudos en la paz que rodelas en la guerra.</p>  
   <p>Y pues al pobre le entierra y hace propio al forastero, poderoso caballero es don Dinero.</p>  
   <input type="button" id="boton" value="Párrafos largos">  
  </body>  
  </html>  

JavaScript + jQuery

La función each de jQuery es una función iteradora genérica, que se puede usar para iterar sin problemas sobre objetos y matrices.

Por consola vamos mostrando los HTMLParagraphElement, y luego hemos ido viendo cómo podemos acceder a sus elementos para obtener la longitud del texto.

 'use strict'  
 $(function(){  
  $("#boton").click( function() {  
   var ps=$('p');  
   console.log(ps);  
   console.log("Longitud del 1er párrafo: "+ps.eq(0).html().length);  
   $.each(ps, function(i,valor){  
    console.log(i+": "+valor.firstChild.length);  
    var largo=valor.firstChild.length;  
    if(largo>100){  
     valor.style.backgroundColor='yellow';  
    }  
   });  
  });  
 });  

La versión 1 logra el objetivo pero veamos que existen formas alternativas de conseguirlo.

En las demás versiones que veremos el código HTML es el mismo que el visto en la versión 1.

Versión 2

https://repl.it/@valoro/jQuery-parrafos-cien2

JavaScript + jQuery


 'use strict'  
 $(function(){  
  $("#boton").click(estiloParrafos);  
  function estiloParrafos(){  
   $("p").each(estiloP);  
  }  
  function estiloP(){  
   if((this.textContent.length) > 100) {  
    $(this).css("background-color", "yellow");  
   }  
  }  
 });  

Versión 3

https://repl.it/@valoro/jQuery-parrafos-cien3

JavaScript + jQuery


 'use strict'  
 $(function(){  
  $("#boton").click(function(){  
   $("p").each(estiloP);  
   function estiloP(){  
    if((this.textContent.length) > 100) {  
     $(this).css("background-color", "yellow");  
    };  
   }  
  });  
 });  

Versión 4

https://repl.it/@valoro/jQuery-parrafos-cien4

JavaScript + jQuery


 'use strict'  
 $(function(){  
  $("#boton").click(function(){  
   $("p").each(function(i,v){ //podemos sustituir v por this  
    if((v.textContent.length) > 100) {  
     $(v).css("background-color", "yellow");  
    };  
   });  
  });  
 });  

Versión 5

https://repl.it/@valoro/jQuery-parrafos-cien5

JavaScript + jQuery


 'use strict'  
 $(function(){  
  $("#boton").click(function(){  
   $.each($("p"),function(i,v){  
    if((v.textContent.length)>100){  
     $(v).css("background-color","yellow");  
    };  
   });  
  });  
 });  


Versión 6

https://repl.it/@valoro/jQuery-parrafos-cien6

JavaScript + jQuery


 'use strict'  
 $(function(){  
  $("#boton").click(function(){  
   $.each($("p"),function(){  
    if((this.textContent.length)>100){  
     $(this).css("background-color","yellow");  
    };  
   });  
  });  
 });  

Versión 7

En esta versión realizamos un bucle tradicional for.

En el condicional podemos utilizar la siguiente expresión alternativa.

if (p[i].innerText.length>100){

https://repl.it/@valoro/jQuery-parrafos-cien7

JavaScript + jQuery


 'use strict'  
 $(function(){  
  console.log($("p").text().length);  
  console.log($("p"));  
  $("#boton").click(function(){  
   var p = $("p");          
   for (var i=0;i<p.length;i++){  
    if (p[i].textContent.length>100){  
     $(p[i]).css("background-color","yellow");  
    };  
   };   
  });  
 });  


Versión 8


https://repl.it/@valoro/jQuery-parrafos-cien8

JavaScript + jQuery


 'use strict'  
 $(function(){  
  $("#boton").click(function(){  
   $("p").each(function(){  
    console.log($(this).text().length);  
    if ($(this).text().length>100) {  
     $(this).css("background-color", "yellow");  
    };  
   });  
  });  
 });  

sábado, 24 de agosto de 2019

jquery for each

Podemos crear bucles con un for tradicional o con each. Veamos un caso donde tenemos un array con una serie de tallas de camisas que deseamos listarlo por consola y por la página web.

El caso práctico se encuentra en el siguiente enlace.



HTML

En el body únicamente tenemos un div.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery for each</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <div></div>  
  </body>  
 </html>  

JavaScript + jQuery

Declaramos la variable tallas que es un array que contiene ocho tallas de camisa.
Con el for tradicional listamos las tallas en la página web con ayuda de append que añade las diferentes tallas al div, incluyendo cada una del loop al final.
Con each le pasamos el array y como segundo argumento lleva una función que lleva a su vez dos argumentos. El primero de ellos es el índice, index que hemos llamado i, y el segundo argumento es el valor del array que se va recorriendo secuencialmente.

 'use strict'  
 $(function(){  
  var tallas=["XXS","XS","S","M","L","XL","XXL","3XL"];  
  for(let i=0;i<tallas.length;i++){  
   $('div').append(tallas[i]+" ");  
  };  
  $.each(tallas, function(i,valor){  
    console.log(i+": "+valor);  
  });  
 });  

jQuery show hide slow fast

Podemos mostrar (show) o bien podemos ocultar (hide) los selectores del DOM (id, clases, etiquetas) y podemos hacerlo eligiendo la velocidad en milisegundos.

Hemos creado un caso práctico en el siguiente enlace.

Versión 1

HTML

Los ocho botones se han organizado en forma de tabla para que se vean alineados. Al final tenemos un checkbox que si esta marcado nos gustaría que los procesos de ocultar y mostrar los elementos se realizara con un cierto retardo.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery show hide</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1 id="titulo1" class="norte">Polo Norte</h1>  
   <p id="parrafo1" class="norte">Párrafo uno.</p>  
   <h1 id="titulo2" class="sur">Polo Sur</h1>  
   <p id="parrafo2" class="sur">Párrafo dos.</p>  
   <hr>  
   <br>  
   <table>  
    <tr>  
     <td><button id="boton1">Mostrar h1's</button></td>  
     <td><button id="boton2">Ocultar h1's</button></td>  
    </tr>  
    <tr>  
     <td><button id="boton3">Mostrar class='sur"</button></td>  
     <td><button id="boton4">Ocultar class='sur"</button></td>  
    </tr>  
    <tr>  
     <td><button id="boton5">Mostrar id="titulo2"</button></td>  
     <td><button id="boton6">Ocultar id="titulo2"</button></td>  
    </tr>  
    <tr>  
     <td><button id="boton7">Mostrar todo</button></td>  
     <td><button id="boton8">Ocultar todo</button></td>  
    </tr>  
   </table>  
   <p>  
    <label><input type="checkbox" id="cbox" value=""> Con retardo</label>  
   </p>  
  </body>  
 </html>  

JavaScript + jQuery

Creamos la variable milisegundos para indicar un posible retardo.
.show() es un método que muestra el elemento indicado
.hide() es un método que oculta el elemento indicado

También podemos indicar la velocidad a la que trabajan estos dos métodos.
  • .hide(2000) es un método que oculta los elementos indicados en 2000 milisegundos (2 s)
  • .hide('slow') equivale a 600 milisegundos
  • .hide('fast') equivalea a 200 milisegundos
  • .show(2000) es un método que muestra los elementos indicados en 2000 milisegundos (2 s)
  • .show('slow') equivale a 600 milisegundos
  • .show('fast') equivalea a 200 milisegundos
Hemos creado la función retardo que comprueba si el checkbox esta activado con el método .prop. Todos las funciones de los botones deben comprobar al ser pulsados si en ese momento el checkbox está activado o no. Este es el motivo por el que se llama en todas las funciones de los botones a la función retardo().

 'use strict'  
 $(function(){  
  var milisegundos;  
  function retardo(){  
   if($('#cbox').prop('checked')){  
    milisegundos=600; //equivale a 'slow'  
    //milisegundos=200 //equivale a 'fast'  
   }else{  
    milisegundos=0;  
   };  
   return milisegundos;  
  };  
  $("#boton1").click(function(){  
   retardo();  
   $('h1').show(milisegundos); //Mostrar h1's  
  });  
  $("#boton2").click(function(){  
   retardo();  
   $('h1').hide(milisegundos); //Ocultar h1's  
  });  
  $("#boton3").click(function(){  
   retardo();  
   $('.sur').show(milisegundos); //Mostrar clase dos  
  });  
  $("#boton4").click(function(){  
   retardo();  
   $('.sur').hide(milisegundos); //Ocultar clase dos  
  });  
  $("#boton5").click(function(){  
   retardo();  
   $('#titulo2').show(milisegundos); //Mostrar id titulo2  
  });  
  $("#boton6").click(function(){  
   retardo();  
   $('#titulo2').hide(milisegundos); //Ocultar id titulo2  
  });  
  $("#boton7").click(function(){ //para dos clases se separan con coma  
   retardo();  
   $('.norte, .sur').show(milisegundos); //Mostrar todas las clases  
  });  
  $("#boton8").click(function(){  
   retardo();  
   $('.norte, .sur').hide(milisegundos); //Ocultar todas las clases  
  });  
 });  

Versión 2

Vamos a utilizar toggle para conseguir que con un solo botón ocultemos o mostremos un elemento al pulsarlo de forma alternativa.

Conviene ver la siguiente página de w3schools.


En el siguiente enlace se puede ver su funcionamiento.

HTML

Hemos incluido una frase en un div que al pulsar sobre ella se ocultará.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery show hide</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1 id="titulo1" class="norte">Polo Norte</h1>  
   <p id="parrafo1" class="norte">Párrafo uno.</p>  
   <h1 id="titulo2" class="sur">Polo Sur</h1>  
   <p id="parrafo2" class="sur">Párrafo dos.</p>  
   <hr>  
   <div>Esta línea de texto desaparecerá si pulsa sobre ella.</div>  
   <br>  
   <button id="boton1">Mostrar y ocultar los h1</button><br>  
   <button id="boton2">Mostrar y ocultar class=sur</button><br>  
   <button id="boton3">Mostrar y ocultar id=titulo2</button><br>  
   <button id="boton4">Mostrar y ocultar todo</button>  
  </body>  
 </html>  

JavaScript + jQuery

  • La frase del div la ponemos de color rojo y de otro tamaño para el font.
  • Con la expresión $(this).hide(); ocultamos el div.
  • Con toggle en los botones podemos ir mostrando y ocultando el contenido de los elementos seleccionados a diferentes velocidades.
Veamos el nuevo método.

$(selector).toggle(speed,callback);
  • El parámetro opcional speed puede tomar los siguientes valores: "slow", "fast" o un número de milisegundos.
  • El parámetro opcional callback es una función que se ejecutará después de que toggle() se complete.
 'use strict'  
 $(function(){  
  $('div').css({'color':'red','font-size':'90%'});  
  $("div").click(function(){  
   $(this).hide();  
  });  
  $("#boton1").click(function(){  
   $('h1').toggle();  
  });  
  $("#boton2").click(function(){  
   $('.sur').toggle(2000);  
  });  
  $("#boton3").click(function(){  
   $('#titulo2').toggle('fast');  
  });  
  $("#boton4").click(function(){  
   $('.norte,.sur').toggle('slow');  
  });  
 });  

Versión 3

En la siguiente página tenemos un caso curioso donde una serie de rectrángulos van desapareciendo lentamente a medida que vamos pulsando sobre ellos.


Nuestra versión se encuentra en el siguiente enlace.

  • https://repl.it/@valoro/jQuery-remove

HTML

Sorprendentemente lo único que encontramos en el body es un div.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery remove</title>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <div></div>  
  </body>  
 </html>  

JavaScript + jQuery

Añadimos con appendTo siete div.
Con una función los ocultamos retardadamente y con otra función los eliminamos (remove).

 'use strict'  
 $(function(){  
  for ( var i = 0; i < 7; i++ ) {  
   $( "<div>" ).appendTo( document.body );  
  }  
  $( "div" ).click(function() {  
   $( this ).hide( 2000, function() {  
    $( this ).remove();  
   });  
  });  
 });  

CSS

Definimos rectángulos azules en un div.

 div {  
  background: rgb(25, 225, 250);  
  width: 27px;  
  height: 48px;  
  margin: 2px;  
  float: left;  
 }  

viernes, 23 de agosto de 2019

jQuery: hasClass, addClass, removeClass

Podemos trabajar con clases en jQuery con estos tres métodos.
  • hasClass   devuelve true o false según exista o no la clase sobre la que estamos preguntando
  • addClass   añade la clase que indiquemos
  • revomeClass elimina la clase que indiquemos
En el siguiente enlace se encuentra el caso práctico disponible.

HTML

Comenzamos con una página con dos h1, dos párrafos y un botón.
antes de pulsar el botón
Tenemos dos h1 con id diferentes como es lógico y con una clase común denominada 'mititulo'.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery seleccionando</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1 id="titulo1" class="mititulo">Congreso</h1>  
   <p id="parrafo1">Párrafo uno.</p>  
   <h1 id="titulo2" class="mititulo">Senado</h1>  
   <p id="parrafo2">Párrafo dos.</p>  
   <hr>  
   <br>  
   <button id="boton">Púlsame</button>  
  </body>  
 </html>  

JavaScript + jQuery

Al pulsar el botón cambia el CSS de la página y en consola vemos algunas frases.

después de pulsar el botón

Consola después de pulsar el botón
En la línea 7 tenemos un código que permite centrar y poner con fondo amarillo aquellos elementos cuya clase sea 'mititulo'. Estos elementos son los dos h1: Congreso y Senado.

Nos metemos en un condicional if en el que la condición se cumple si el elementos que tiene el id='titulo1' tiene además la clase 'mititulo'. Este elemento es el primer h1 si si cumple ambos requisitos.

Al ser la condición true lo que se produce es que removemos la clase 'mititulo' del elemento cuyo id es 'titulo1'. Esto es, eliminamos la clase del primer h1

 // hasClass   devuelve true o false según tenga o no cierta clase  
 // addClass   añade un clase  
 // removeClass elimina una clase  
 'use strict'  
 $(function(){   
  $("#boton").click( function() {  
   $('.mititulo').css({'background':'yellow','text-align':'center'})  
   if ($('#titulo1').hasClass('mititulo')){  
    console.log("Si tiene la clase mititulo");  
    $('#titulo1').removeClass('mititulo');  
    console.log("Comprobemos que hemos eliminado la clase del primer h1");  
    console.log("La clase del 1º h1 es: "+$('h1').eq(0).attr('class'));  
    console.log("La clase del 2º h1 es: "+$('h1').eq(1).attr('class'));  
    console.log("Comprobado: la clase del 1er h1 ha sido removida.");  
   }else{  
    console.log("No tiene la clase mititulo");  
    $('#titulo1').removeClass();  
    $('#titulo1').addClass('tituloprincipal');  
    console.log("La clase del 1er h1 es: "+$('h1').eq(0).attr('class'));  
   }  
  });  
 });  

Como el condicional if también tiene un else y queremos ver que sucede cuando la condición no se cumple, lo que haremos es añadir una x a la clase del primer h1, suponiendo que hos hemos equivocado al escribir su clase en el código html. En la siguiente imagen se ve cómo nos hemos equivocado añadiendo esa x adicional a la clase del primer h1.


En este caso lo que vemos por pantalla al pulsar el botón es la siguiente imagen.

Cometiendo un error en la clase del primer h1
y después de pulsar el botón
En este caso únicamente el Senado queda señalado en amarillo y centrado ya que la clase del primer h1 no es 'mititulo' sino 'mititulox' al haber cometido un error en el código html.

Lo que vemos ahora es que por consola se arrojan la siguientes líneas.


Añadir una clase sin haber removido la previa

¿Qué sucede si ya existe una clase previa en el h1 y sin removerla añadimos otra?

He realizado esta comprobación y lo que se obtiene es que la nueva clase esta formada por la siguiente expresión:

clase original + un espacio vacio + nueva clase

Veamos una imagen con el resultado.

pulsando F12 vemos el Inspector de Firefox
Lo que está sucediendo es que se pueden tener dos o más clases, como en CSS donde se pueden aplicar varias clases. Vea, por ejemplo, esta entrada: Añadir varias clases CSS en un solo elemento HTML.

Ejercicio propuesto


  • En el código html indique la clase del primer h1 es 'mititulox'. Esto supone, que nos hemos equivocado al escribir la clase y que hemos añadido la x final.
  • En el código JS después del else comente la línea que remueve la clase.
  • Muestre en consola tres líneas donde se pregunte si en el primer h1 existen las clases:

    • .mititulo
    • .mititulox
    • .tituloprincipal
La respuesta que verá en consola debería ser la siguiente.


¿Lo ha resuelto empleando .hasClass?