domingo, 29 de septiembre de 2019

JavaScript manejando el DOM

Este artículo forma parte de una serie que trata sobre el DOM (Document Object Model) y su manejo desde JavaScript.
  1. JavaScript manejo del DOM
  2. Manejar el DOM en JavaScript
  3. Cambiar color usando el DOM en JavaScript
  4. JavaScript manejando el DOM por sus etiquetas
  5. JavaScript manejando el DOM con las clases
  6. JavaScript manejando el DOM
En https://www.w3schools.com podemos ver la página
y dentro de ella el ejemplo

Basándonos en esta idea vamos a plantear un nuevo caso práctico. Disponemos de una lista con tres elementos que deseamos cambiar.

La lista original es la siguiente.



Después de pulsar el botón obtenemos una nueva lista.


El código funcionando podemos verlo en el siguiente enlace.

HTML

Creamos una lista con tres elementos li.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>repl.it</title>  
  </head>  
  <body>  
   <ul>  
    <li>uno</li>  
    <li>dos</li>  
    <li>tres</li>  
   </ul>  
   <p>Presiona el botón para cambiar el texto de los elementos de la lista.</p>  
   <button onclick="myFunction()">Pruébalo</button>  
   <script type="text/javascript" src="script.js"></script>  
  </body>  
 </html>

JavaScript

Método 1

Creamos la variable list que contiene un HTMLCollection que se forma con los elementos li del DOM.
Construimos un bucle for clásico donde gracias a item(i) podemos recorrer todos los elementos li y modificarlos. Podríamos haber escrito

list.item(i).innerHTML=i+1;

pero hemos preferido incluir algo de código HTML para que aparezcan en cursiva los números 1, 2 y 3.

 //Método 1  
 function myFunction() {  
  var list = document.getElementsByTagName("LI");  
  for (var i=0;i<list.length;i++){  
      list.item(i).innerHTML='<i>'+parseInt(i+1)+'</i>';  
  }  
 }

Método 2

En este caso hemos contruido el bucle con la estructura for of.

 //Método 2  
 function myFunction() {  
  var list = document.getElementsByTagName("LI");  
  var i=1;  
  for (var elemento of list){  
      elemento.innerHTML=i;  
   i++;  
  }  
 }

Método 3

Hemos de convertir el objeto HTMLCollection que contiene los tres HTMLLIElement en un array para poder luego recorrer los elementos del array con un bucle forEach.

 //Método 3  
 function myFunction() {  
  var list = document.getElementsByTagName("LI");  
  console.log(list);  
  //convertimos un object HTMLLIElement en un array  
  list_arr=Array.from(list);  
  list_arr.forEach((value, key) => {  
   value.innerHTML=key+1;  
  });  
 }

en No hay comentarios:
Etiquetas: ,

jueves, 26 de septiembre de 2019

Las plantillas de cadena de texto (template strings) en JavaScript

Esta entrada forma parte de una serie.

Desde la versión JavaScript 6 (ECMAScript 6 o también denominado ES6) disponemos de plantillas de cadenas de texto o template strings que nos permite incrustar cadenas de texto con código HTML puro o incluso con variables.


Podemos incluir código HTML entre comillas simples, pero lo interesante es que también podemos incluir varias líneas de código entre comillas invertidas y esto nos permite que el código HTML lleve variables. Las variables van precedidas por el simbolo dolar $ y van entre llaves {}.


HTML

 <!DOCTYPE html>  
 <html lang="es">  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>template strings en JS</title>  
  </head>  
  <body>  
   <h1>Template strings en JavaScript</h1>  
   <div id='persona'></div>  
   <div id="datos"></div>  
   <script type="text/javascript" src="script.js"></script>  
  </body>  
 </html>

JavaScript

 var nombre="Juan";  
 var ciudad="Madrid";  
 var altura=650  
 var persona=document.getElementById('persona');  
 persona.innerHTML='Autor: '+nombre;  
 //template strings: permite incluir el html entre comillas invertidas  
 var datos=document.getElementById('datos');  
 datos.innerHTML=`  
  <h2>Mi nombre es ${nombre}</h2>  
  <h3>Soy de ${ciudad}</h3>  
 `;  
 //comillas invertidas  
 datos.innerHTML += `<h4>Es una ciudad a ${altura} metros sobre el nivel del mar</h4>`;  
 //comillas simples normales  
 datos.innerHTML += '<h5>6.5 millones de habitantes en la Comunidad de Madrid</h5>';
en No hay comentarios:
Etiquetas:

miércoles, 25 de septiembre de 2019

Promesas en JavaScript

El código de JavaScript se ejecuta de forma secuencial y a toda velocidad, pero en ocasiones nos gustaría que algunas líneas de código se quedaran escuchando o esperando respuesta y que esto no impidiera que se siguieran ejecutando las siguientes.

Con esta idea surgieron las promesas que nos permiten lanzar peticiones a APIs externas, a servicios o a bases de datos mientras se continua ejecutando nuestro código y cuando llege la respuesta se completa el contenido que pretendemos mostrar al usuario.

setTimeout

Veamos un ejemplo de gran sencillez para mostrar la idea de que el códgio se continúa ejecutando aunque alguna línea se retrase en su ejecución.

  • Primera sentencia. Imprime por consola a.
  • Segunda sentencia. Se ejecuta con un retrardo de 1 segundo, por lo que no imprime nada aún.
  • Tercera sentencia. Imprime c justo después de a ya que no espera a que se imprima b.
  • Finalmente se imprime por consola b con un retardo, por lo que b se imprime en último lugar.

 console.log('a');  
 setTimeout(()=>{  
  console.log('b (1 segundo después)')  
 },1000);  
 console.log('c');

Promesas

Las promesas representan un valor que puede estar disponible ahora, en le futuro o nunca.
Se utilizan en tecnologías asíncronas porque evitan el callback hell.

Una promesa puede tener tres estados:

  • puede estar pendiente
  • puede estar resuelta
  • puede estar rechazada




en No hay comentarios:
Etiquetas:

domingo, 8 de septiembre de 2019

JavaScript setInterval clearInterval

En una entrada anterior ya hemos visto estos timers, y en otra hemos visto cómo cambiar alternativamente de color.
En esta ocasión vamos a ver un texto que alterna entre dos colores cada 1000 milisegundos y un botón que detiene esta alternancia.

Nuestro ejemplo en vivo:

HTML + JavaScript


 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="UTF-8" />  
  <title>Ejemplo de setInterval/clearInterval</title>  
  <script>   
   var procesoID;  
   function alternarColor() {   
    var oElem = document.getElementById("mi_mensaje");   
    oElem.style.color = oElem.style.color == "red" ? "blue" : "red";   
   }   
   function detenerCambioDeColor() {   
    clearInterval(procesoID);   
   }  
   procesoID = setInterval(alternarColor, 1000);  
  </script>  
 </head>  
 <body onload="alternarColor();">  
  <div id="mi_mensaje">  
   <p><i>A brief history of time.</i><br>Stephen Hawking</p>  
  </div>  
  <button onclick="detenerCambioDeColor();">Detener</button>  
 </body>  
 </html>

en No hay comentarios:
Etiquetas:

Usar un botón como interruptor en JavaScript

En una entrada anterior ya vimos como cambiar el color de un texto pulsando alternativamente dos botones.

Ahora vamos a conseguir lo mismo pero con un solo botón. Pulsando alternativamente un único botón conseguiremos ir alternando el color de un texto.

HTML + JavaScript


 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="UTF-8" />  
  <title>Botón como interruptor / palanca</title>  
  <script>  
   function toggleColor(){  
    var elem = document.getElementById("a");  
    elem.style.color = elem.style.color == "red" ? "blue" : "red";  
   }  
  </script>  
 </head>  
 <body>  
  <h1 id="a">Hola Mundo</h1>  
  <button onclick="toggleColor();">ok</button>  
 </body>  
 </html>
en No hay comentarios:
Etiquetas:

JavaScript localStorage (3/3)

Esta entrada pertenece a una serie.

Veamos un caso práctico con un formulario para añadir películas, otro para borrarlas y un tercer botón que borra completamente el localStorage.




HTML


 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width">  
   <title>Formulario con localstorage</title>  
  </head>  
  <body>  
   <h1>Añade tu película</h1>  
   <form acction="#" id="formpeliculas">  
    <input type="text" id="addpeliculas">  
    <button type="submit">Guardar</button>  
   </form>  
   <hr>  
   <h2>Películas</h2>  
   <div id="peliculas">  
    <ul id="peliculas-list">  
    </ul>  
   </div>  
   <hr>  
   <h1>Borrar una película</h1>  
   <form acction="#" id="formBorrarPeliculas">  
    <input type="text" id="borrarPelicula">  
    <button type="submit">Borrar</button>  
   </form>  
   <hr>  
   <form acction="#" id="formBorrarTodo">  
    <button type="submit">Borrar Todo</button>  
   </form>  
   <script src="script.js"></script>  
  </body>  
 </html>


JavaScript


 'use strict'  
 var formulario = document.querySelector("#formpeliculas");  
 formulario.addEventListener('submit',function(){  
  console.log("entra la función")  
  var titulo = document.querySelector('#addpeliculas').value;  
  if (titulo.length > 0){  
   localStorage.setItem(titulo, titulo); //clave, valor  
  }  
 });  
 var ul = document.querySelector('#peliculas-list');  
 for (var i in localStorage){  
  console.log(localStorage[i]);  
  if(typeof localStorage[i] == 'string'){  
   var li = document.createElement("li");  
   li.append(localStorage[i]);  
   ul.append(li);  
  }  
 }  
 var formulariob = document.querySelector("#formBorrarPeliculas");  
 formulariob.addEventListener('submit', function(){  
   var titulo = document.querySelector('#borrarPelicula').value;  
   if(titulo.length > 0){  
     localStorage.removeItem(titulo);  
   }  
 });  
 var formularioc = document.querySelector("#formBorrarTodo");  
 formularioc.addEventListener('submit', function(){  
  localStorage.clear();  
 });

en No hay comentarios:
Etiquetas:

JavaScript localStorage (2/3)

Esta entrada pertenece a una serie.

Veamos cómo trabajar con el localstorage efectuando algunas tareas:
  • Comprobar su disponibilidad en el navegador
  • Guardando datos
  • Guardando objetos JSON
  • Recuperando objetos JSON
  • Borrando un dato
  • Borrando todos los datos del localstorage
Enlace:

HTML


 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="utf-8">  
  <title>Localstorage</title>  
 </head>  
 <body>  
  <div id="peliculas"></div>  
  <div id="registrados"></div>  
  <script type="text/javascript" src="script.js"></script>  
 </body>  
 </html>

JavaScript


 'use strict'  
 // Localstorage  
 // Comprobar disponibilidad del localstorage  
 if(typeof(Storage) !== 'undefined'){  
  console.log("Localstorage disponible");  
 } else {  
  console.log("Incompatible con Localstorage")  
 }  
 // Guardar datos  
 localStorage.setItem("titulo","Agente 007");  
 // Recuperar elemento  
 console.log(localStorage.getItem('titulo'));  
 document.querySelector("#peliculas").innerHTML = localStorage.getItem('titulo');  
 // Guardar objeto JSON  
 var usuario = {  
  nombre: "Magnito",  
  email: "magnito@magnito.com",  
  web: "www.magnito.com"  
 };  
 localStorage.setItem("usuario", JSON.stringify(usuario));  
 // Recuperar objeto  
 var userjs = JSON.parse(localStorage.getItem("usuario"));  
 console.log(userjs);  
 document.querySelector("#registrados").append(" "+userjs.web+" "+userjs.nombre);  
 // Borrar el Localstorage  
 localStorage.removeItem("usuario"); //borra solo un item  
 localStorage.clear(); //borra todos los item del localstorage
en No hay comentarios:
Etiquetas:

domingo, 1 de septiembre de 2019

Iterar con un forEach en JavaScript

Disponemos de un array con varios elementos y deseamos listar estos elementos mostrándolos por pantalla.

Veremos varios casos.
  1. con función externa
  2. con función anónima
  3. con función de flecha
  4. con función de flecha de parámetro único

con función externa

HTML

Tenemos un párrafo con el id="mt".

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Iterar con un forEach en JS</title>  
  </head>  
  <body>  
   <h2>Listar los elementos de un array</h2>   
   <p id="mt"></p>  
   <script src="script.js"></script>  
  </body>  
 </html>

JavaScript

La función usa tres parámetros.
  1. El primero v es el valor (value), también denominado item.
  2. El segundo parámetro i es el índice (index) o key. 
  3. El tercer argumento arr recoge el array completo.
El tercer argumento habitualmente no se utiliza ya que con el valor y el index podemos iterar todos los elementos.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach(myFunction);  
 function myFunction(v,i,arr) {  
  document.getElementById("mt").innerHTML += i+": "+v+"<br>";  
 }

La función acepta tres parámetros: el valor del elemento, el índice y una referencia al array que se está iterando. Los dos últimos argumentos son opcionales.

con función anónima

HTML

Igual que el anterior.

JavaScript

En este caso la función ya no es externa y con nombre sino que ahora es una función anónima callback. En este ejemplo estamos usando los dos parámetros valor e index.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach(function(v,i){  
  document.getElementById("mt").innerHTML += i+1+": "+v+"<br>";  
 });

con función de flecha

JavaScript

Utilizamos una función flecha con dos parámetros.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach((v,i) => {document.getElementById("mt").innerHTML += i+1+": "+v+"<br>"});

con función de flecha de parámetro único

HTML

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Iterar con un forEach en JS</title>  
  </head>  
  <body>  
   <h2>Listar los elementos de un array</h2>  
   <ul id="ml"></ul>  
   <script src="script.js"></script>  
  </body>  
 </html>

JavaScript

En este caso únicamente utilizamos el parámetro v para el valor.

 var m = ["enero", "febrero", "marzo", "abril", "mayo"];  
 m.forEach(v=>{document.getElementById("ml").innerHTML+="<li>"+v+"</li>"});
en 1 comentario:
Etiquetas:

Iterar con un for en JavaScript

Dado un array con una serie de elementos nos disponemos a mostrar por pantalla una lista con todos los elementos que contiene ese vector.

En JavaScript podemos utilizar varios métodos.
  • for clásico
  • for in
  • for of
  • forEach

Veamos los diferentes métodos.

for clásico

 var meses = ["enero", "febrero", "marzo", "abril", "mayo"];  
 for (let i=0;i<meses.length;i++){  
  console.log(meses[i]);  
 }

for in

 var meses = ["enero", "febrero", "marzo", "abril", "mayo"];  
 for(let i in meses){  
  console.log(meses[i]);  
 }

for of

 var meses = ["enero", "febrero", "marzo", "abril", "mayo"];  
 for(let valor of meses){  
  console.log(valor);  
 }

forEach

Este método se desarrolla en el siguiente post.
en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)