Hola mundo con Node JS y Express

Vamos a crear una página web con un sencillo Hello World programado en Node.JS usando el framework Express. Lo podremos ver en local en nuestra página web de localhost.

Paso 1

Instalamos Node.JS e instalamos el gestor de paquetes npm.

sudo apt install nodejs
sudo apt install npm

Paso 2

Vamos a Documents y creamos un par de carpetas, una para los proyectos Node y otra para el proyecto actual de Hola Mundo.

mkdir node && cd $_
mkdir holamundo && cd "$_"

Con $_ repetimos la última parte del comandando anterior.

Si esa última parte lleva espacios se debe usar entre comillas "$_".

El operador $_ se puede sustituir por !#:1

Paso 3

Instalamos el framework Express que nos hará más sencilla la programación en Node.JS.

También vamos a instalar nodemon que nos ayudará a desarrollar puesto que la modificaciones de código que hagamos se irán mostrando automáticamente en la página que estamos creando.

npm init
npm install express
npm install nodemon

Paso 4

Desde la terminal, estando en el directorio holamundo tecleamos code . (el punto es importante) y nos llevará a nuestro editor por defecto, que en nuestro caso es Visual Studio Code.

Estando en Visual Studio Code creamos el archivo index.js

const express = require('express')
const app = express()
const port = 8080

app.get('/', (_req, res) => {
 res.send('Hello World!')
})

app.listen(port, () => {
 console.log(`Example app listening at http://localhost:${port}`)
})

Paso 5

En el archivo package.json se ha creado un archivo JSON con las variables de entorno y otras características de nuestro proyecto. En la parte de Scripts se añade un script llamado dev, pero el nombre lo elegimos nosotros.

Se pone una coma y se añade el script.

{
 "name": "helloworld",
 "version": "1.0.0",
 "description": "Esto es un hola mundo",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "nodemon index"
 },
 "author": "apa",
 "license": "ISC",
 "dependencies": {
  "express": "^4.17.1",
  "nodemon": "^2.0.7"
 }
}

Hemos añadido la línea:

"dev": "nodemon index" 

y hemos añadido también la coma previa a esta línea.

Paso 6

Corremos el proyecto con:

npm run dev

Ya tenemos corriendo el proyecto en local, en localhost.

Calculadora de opciones en JavaScript

Veamos cómo programar una calculadora en Java Script para obtener el precio teórico de la prima de una opción financiera europea.

Esta entrada forma parte de una serie de post publicados.

1. Calculadora sencilla en JavaScript
2. Calculadora de opciones en JavaScript

Continuaremos desde donde lo dejamos y realizaremos los siguientes pasos.

Paso 1

Vamos a nuestro Visual Studio Code (VSC) y duplicamos el archivo index.html. Para ello, situamos el cursor sobre el nombre de archivo, en el panel de la izquierda y pulsamos Control+C para copiar. Luego, pulsamos Control+V para pegar la copia. Esto genera un nuevo archivo denominado index copy.html.

Renombramos el archivo index copy.html con el nombre sumados.html. Para renombrar lo que hacemos es pulsar con el botón derecho del ratón sobre el nombre de archivo y en el menú contextual que se obtiene elegimos rename.

Volvemos a duplicar el archivo index.html y renombramos la copia como valorOpcion.html.

Paso 2

Editamos el archivo index.html de forma que ahora quedará así.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
  <title>Calculadoras</title>
</head>
<body>
  <h1>Calculadoras en JavaScript</h1>
  <ul>
    <li><a href="./sumados.html">Sumar dos números</a></li>
    <li><a href="./valorOpcion.html">Valoración de opciones por Black-Scholes</a></li>
  <ul>
</body>
</html>

Paso 3

Editamos el archivo style.css que ahora quedará así.

 body {  
   background-color: LightCyan;  
  }  
 #resultH2{  
   color: blue;  
 }  
 .main{  
  width: 600px;  
  display: flex;  
  justify-content: space-between;  
  margin: 10px 0px 10px 0px;  
 }  
 input {   
  text-align: right;   
 }  

Paso 4

Editamos el archivo valorOpcion.html que quedará así.

 <!DOCTYPE html>  
 <html lang="es">  
 <head>  
   <meta charset="UTF-8">  
   <link rel="stylesheet" href="./style.css">  
   <script src="./blackscholes.js"></script>  
   <title>Black-Scholes</title>  
 </head>  
 <body>  
   <h1>Black-Scholes</h1>  
   <p>Valor de una opción CALL europea por el método de Black-Scholes.</p>  
   <h2>Variables de entrada</h2>  
   <ul>  
     <li class="main">Precio Spot del activo subyacente: S <input type="number" value="100" id="S"></li>  
     <li class="main">Precio de ejercicio (Strike): E <input type="number" value="110" id="E"></li>  
     <li class="main">Volatilidad (en tanto por uno): &sigma; <input type="number" value="0.2" id="sigma"> </li>  
     <li class="main">Rentabilidad libre de riesgo:<br></li>  
     <li class="main"><p style="margin: 0px;">Tanto efectivo anual en tanto por uno: <i>i</i></p> <input type="number" value="0.07" id="tanto"></li>  
     <li class="main">Duración hasta vencimiento en años: T <input type="number" value="2" id="T"> </li>  
   </ul>  
   <p>Pulse el botón para obtener el precio teórico de un CALL europeo.</p>  
   <input type="button" value="CALL por Black-Scholes" onclick="CALLeuropea()">  
   <h2 id="resultH2">Resultado</h2>  
   <p id="total"></p>  
 </body>  
 </html>  

Paso 5

Creamos el archivo blackscholes.js. La función de la distribución  Normal acumulada programada en JavaScript se puede ver en una respuesta de Stackoverflow.

En JS no es tan sencillo obtener la distribución Normal acumulada como en otros lenguajes más orientados a los cálculos científicos o a manejar datos, por ejemplo:

• Python 
• from statistics import NormalDist
• NormalDist(mu=100, sigma=10).cdf(100)
• R
• print(pnorm(q = 110, mean = 100, sd = 10))
• Excel
• =NORM.DIST(110,100,10,TRUE)

En todos los ejemplos obtenemos el mismo valor de la normal acumulada: 0.8413447460685429.

 function Normal(z) {  
   var j, k, kMax, m, values, total, subtotal, item, z2, z4, a, b;  
   if (z < -6) { return 0; }  
   if (z > 6) { return 1; }  
   m   = 1;  
   b   = z;  
   z2   = z * z;  
   z4   = z2 * z2;  
   values = [];  
   for (k=0; k<100; k+=2) {  
     a = 2*k + 1;  
     item = b / (a*m);  
     item *= (1 - (a*z2)/((a+1)*(a+2)));  
     values.push(item);  
     m *= (4*(k+1)*(k+2));  
     b *= z4;  
   }  
   total = 0;  
   for (k=49; k>=0; k--) {  
     total += values[k];  
   }  
   return 0.5 + 0.3989422804014327 * total;  
 }  
 function CALLeuropea(){  
   let S=parseFloat(document.getElementById("S").value);  
   let E=parseFloat(document.getElementById("E").value);  
   let sigma=parseFloat(document.getElementById("sigma").value);  
   let tanto=parseFloat(document.getElementById("tanto").value);  
   let T=parseFloat(document.getElementById("T").value);  
   let myTotal=document.getElementById("total");  
   //Primero convertimos el tanto efectivo anual en un tanto instantáneo  
   let r= Math.log(1+tanto); //log es el neperiano  
   console.log("r=",r)  
   //Calculamos d1, d2, y la prima  
   let d1 = (Math.log(S/E)+(r+sigma**2/2)*T)/(sigma*Math.sqrt(T));  
   let d2 = (Math.log(S/E)+(r-sigma**2/2)*T)/(sigma*Math.sqrt(T));  
   let primaCALL=S*Normal(d1)-E*Math.E**(-r*T)*Normal(d2);  
   myTotal.innerText="La prima estimada del CALL es: "+ primaCALL;  
 }  

El código para obtener el valor de la opción CALL europera por el método de Black-Scholes está basado en el post siguiente.

Modelo de Black-Scholes

Paso 6

Podemos ver el resultado en nuestro Localhost.

Paso 7

Subimos los cambios a GitHub.

Paso 8

• Miramos los cambios en GitHub Pages https://financieras.github.io/JS_improve
• Miramos los cambios en Netlify https://calculadoraprima.netlify.app

Paso 9

Podemos ver el código en el repositorio de GitHub:

• https://github.com/financieras/JS_improve

tamaño de fuente: 24px;

Calculadora sencilla en JavaScript

Esta entrada forma parte de una serie de post publicados.

1. Calculadora sencilla en JavaScript
2. Calculadora de opciones en JavaScript

 Vamos a utilizar:

• Git para el control de versiones
• GitHub para almacenar los ficheros en la nube y usarlos para el despliegue contínuo
• Visual Studio Code como editor de nuestros archivos:
• HTML
• JS
• Algunos complementos para VSCode:
• marcamos el 'Auto Save' para la grabación contínua de archivos
• HTML Snippets para mejorar las sugerencias de etiquetas en HTML
• Live Server para hacer un despliegue contínuo en nuestro local host
• Netlify para desplegar la página web

Paso Cero

1. Sacamos una cuenta de GitHub si no la tenemos.
2. Instalamos el software de control de versiones Git en nuestro PC (Windows, Linux, Mac). Mirar a ver si ya lo tenemos instalado, y en caso afirmativo mirar a ver si lo tenemos actualizado.
3. Instalamos Visual Studio Code
4. Sacamos una cuenta de Netlify.

Paso Uno

1. Creamos un nuevo repositorio en nuestra cuenta de GiHub. En nuestro caso le hemos llamado JS_improve
2. Copiamos la URL del repositorio
    
   
   
   
3. Abrimos una terminal en la carpeta Documentos (Documents)
• En Windows se puede ir al Exploarador de archivos, ir a la carpeta Documentos y luego poner arriba cmd. Al pulsar Enter se nos abrirá la terminal en el directorio Documents.
• En Linux podemos ir a Files, ir a la carpeta elegida y pulsando con el botón derecho del ratón veremos la opción 'Open in Terminal'.
• En cualquier caso podemos abrir una terminal e ir a la carpeta deseada
4. Clonamos el repositorio con el comando

    git clone https://github.com/financieras/JS_improve.git  
   

   donde la url debe ser la de vuestro repositorio.
5. Si queremos, podemos ver que se han creado los mismos archivos que en el repositorio de GitHub más un archivo oculto .git
6. Abrir VSCode. También se puede abrir estando en la terminal, en la carpeta deseada y tecleando 

    code .  
   

   y al pulsar Enter se abrirá el editor de código.

Paso Dos

1. Estamos en VSCode y vamos a crear un nuevo archivo denominado index.html
2. Lo primero que escribimos en nuestro nuevo archivo es html:5 y al pulsar Enter veremos ya un código básico para nuestro fichero html. Es el siguiente.

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
      <meta charset="UTF-8">  
      <meta http-equiv="X-UA-Compatible" content="IE=edge">  
      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
      <title>Document</title>  
    </head>  
    <body>  
    </body>  
    </html>  
   

3. Ahora podemos crear ya nuestro código del archivo index.html en su primera versión funcional, que es el siguiente.

    <!DOCTYPE html>  
    <html lang="es">  
    <head>  
      <meta charset="UTF-8">  
      <script src="./calcula.js"></script>  
      <title>Calculadora en JavaScript</title>  
    </head>  
    <body>  
      <h1>Calculadora en JavaScript</h1>  
      <h2>Variables de entrada</h2>  
      <p>Primer número: </p>  
      <input type="number" value="2" id="n1">  
      <p>Segundo número: </p>  
      <input type="number" value="5" id="n2">  
      <p>Pulse el botón para sumar.</p>  
      <input type="button" value="Sumar" onclick="sumar()">  
      <h2>Resultado</h2>  
      <p id="total"></p>  
    </body>  
    </html>  
   

4. Ahora vamos a crear nuestro archivo calcula.js

    function sumar(){  
      let uno=document.getElementById("n1");  
      let dos=document.getElementById("n2");  
      let myTotal=document.getElementById("total");  
      let laSuma=parseInt(uno.value) + parseInt(dos.value);  
      myTotal.innerText="El resultado es: "+ laSuma;  
    }  

Paso Tres

1. Dividimos la pantalla en dos partes, a la izquierda ponemos el VSCode y a la derecha nuestro navegador por defecto.
2. Estando en VSCode veremos abajo un icono que pone 'Go Live'. Este existe debido a que previamente hemos instalado el complemento 'Live Server'. Pulsamos con el ratón sobre 'Go Live' y veremos que en el navegador se abre nuestra página de Local Host. En mi caso uso el puerto 5500 y cualquiera de estas dos páginas funcionará
1. http://127.0.0.1:5500/index.html
2. http://localhost:5500/index.html
   
   
   
   
3. Si todo ha ido bien veremos nuestra aplicación funcionando. También podemos ver en el navegador la ayuda para desarrolladores pulsando F12, en Chrome y otros navegadores.
   
   
   

Paso Cuatro

1. Ahora vamos a subir los cambios a GitHub. Podemos usar la terminal integrada en Visual Studio Code.
2. Abrimos la terminal desde el propio Visual Studio Code con Terminal / New Terminal
3. En mi caso operando desde Ubuntu tengo la terminal que se ve en la siguiente imagen.
   
   
   
   
   
4. El propio VSCode nos avisará si hay cambios sin subir a GitHub. En la siguiente imagen vemos que aparece a la izquierda un 2 indicando que existen dos cambios sin subir.
   
   

   

   
   
5. Veamos cómo subir los cambios desde la terminal con comandos de Git.
• git add --all
• git commit -m "Primera version funcional"
• git push


Nota: con git status podemos comprobar si nuestra copia local está actualizada y sin cambios respecto a la copia en la nube.





6. Ahora comprobamos en GitHub que se han subido bien los cambios. Recargamos la página de GitHub y vemos que los cambios son recientes.
   
   
   

Paso Cinco

1. Vamos a utilizar GitHub Pages para conseguir que nuestra página web se vea en internet y no solo en nuestro Local Host.
2. Vamos a nuestro repositorio y en el menú superior pulsamos sobre 'Settings', el icono es una rueda dentada.
3. En el menú vertical elegimos 'Pages'.
   
   
   
   
   
4. En la rama elegimos 'main' y en la carpeta elegimos 'root'.
   
   
   
   
   
5. Pulsamos sobre el botón 'Save'.
6. Ya tenemos página web desplegada en GitHub Pages. Nos informan con un mensaje que primero es azul y luego verde cuando ya es operativa. Puede tardar unos minutos en ponerse verde.
   
   
   
   
   
7. El resultado obtenido ya es funcional y tiene su propia página web.
   
   https://financieras.github.io/JS_improve
   
   

Paso nueve

1. Vamos a desplegar la página web creada en Netlify.
2. En mi caso ya tengo otro proyecto corriendo en Netlyfy pero podemos crear uno nuevo pulsando en el botón denominada 'New Site from Git'.
   
   
   
   
3. Creamos un nuevo sitio con despliegue contínuo utilizando los archivos que tenemos subidos a un repositorio de GitHub.
   
4. Tenemos que indicar a Netlify el nombre del repositorio de GitHub que deseamos desplegar. Para ello tenemos que configurar Netlify con GitHub: 'Configure Netlify on GitHub'.
   
5. Nos muestra una lista con la cuenta y las organizaciones asociadas a esa cuenta. Elegiremos aquella en la que está el repositorio que deseamos desplegar.
   
6. Damos acceso a todos los repositorios de esa cuenta o bien a uno concreto. En mi caso, he elegido 'All repositories'.
   
   
   
   
7. Elegimos el repositorio deseado.
   
   
   
8. Vemos abajo, en verde, que aparece la palabra 'Published', que nos indica que ya está publicada nuestra página web. El despliegue ya se ha producido. La dirección web (url) que nos han asignado aparece arriba y tiene un nombre que no es amigable, ni sencillo de recordar, pero puede ser cambiado.
   
   
   
   
9. Vemos que la página está desplegada en nuestra extraña url.
   
   
   
   
10. Vamos a cambiar el nombre de la url por uno más amigable, pulsando 'Change site name'.
    
    
    
    
11. Ahora vemos que nuestra web está desplegada en https://calculadoraprima.netlify.app
    
    
    
    

Paso once

1. Vamos a añadir un archivo css para los estilos. El archivo se denominará style.css.
   
   

    body {  
      background-color: LightCyan;  
      font-size: 24px;  
     }  
    #resultH2{  
      color: blue;  
    }  
   

2. El archivo index.html también requiere un par de cambios, la fila donde llamamos al archivo css y al final hemos añadido la etiqueta resultH2.
   
   

    <!DOCTYPE html>  
    <html lang="es">  
    <head>  
      <meta charset="UTF-8">  
      <link rel="stylesheet" href="./style.css">  
      <script src="./calcula.js"></script>  
      <title>Calculadora en JavaScript</title>  
    </head>  
    <body>  
      <h1>Calculadora en JavaScript</h1>  
      <h2>Variables de entrada</h2>  
      <p>Primer número: </p>  
      <input type="number" value="2" id="n1">  
      <p>Segundo número: </p>  
      <input type="number" value="5" id="n2">  
      <p>Pulse el botón para sumar.</p>  
      <input type="button" value="Sumar" onclick="sumar()">  
      <h2 id="resultH2">Resultado</h2>  
      <p id="total"></p>  
    </body>  
    </html>  
   

3. Podemos ver el resultado en nuestro Local Host.
   
   
   
   
   
4. Subimos los cambios a GitHub usando comandos de consola.
• git add --all
• git commit -m "incluimos estilos css"
• git push
5. Miramos los cambios en GitHub Pages https://financieras.github.io/JS_improve
   
   
   
   
6. Miramos los cambios en Netlify https://calculadoraprima.netlify.app
   
   
   
   

 

Gracias la despliegue contínuo hemos conseguido que los cambios realizados de forma local en nuestro ordenador se suban, haciendo el push en git, tanto a GitHub Pages como a Netlify.

¡Una maravilla, esto del despliegue contínuo!

Lista de la compra usando localStorage en JS

Usando el método localStorage de JavaScript podemos guardar datos en el propio navegador. Esto nos permite guardar los datos que queramos y que al cerrar el navegador o incluso al reiniciar el PC podamos seguir accediendo a los datos sin problema. 

El código en GitHub: https://github.com/magnitopic/edujs/tree/master/ListaCompraJS

Mira el codigo ejecutandose en relp.it: https://listacomprajs.valoro.repl.co/

index.html

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Main HTML</title>  
 </head>  
 <body>  
   <h1>Lista de la compra</h1>  
   <p>Añadir item a la lista</p>  
   <input type="text" id="entrada">  
   <button onclick="anadir()">Añadir</button>  
   <div id="resultado">  
     <ul id="lista-compra"></ul>  
   </div>  
   <script src="script.js"></script>  
 </body>  
 </html>  

script.js

 'use strict'  
 var contador= 0;  
 function anadir(){  
   var x = document.getElementById("entrada").value;  
   if(x.length <= 0){  
   }else{  
     localStorage.setItem(x,x);  
     location.reload();   
   }  
 }  
 var ul = document.getElementById('lista-compra');  
   for(var i in localStorage){  
     if(typeof localStorage[i] =='string'){  
       var li= document.createElement("li");  
       li.append(localStorage[i]);  
       ul.append(li);  
     }  
   }  

Párrafo con colores random

Con este código queremos tener un 50% de probabilidades de interaccionar con el párrafo. Si la suerte determina que no podemos interactuar con el párrafo al pasar el cursor por encima se nos cambiará a una señal de prohibido. En caso contrario al pasar el cursor encima cambiará para hacer click y al actuar cambiará el color del texto a un valor hexadecimal aleatorio.

El código en GitHub: https://github.com/magnitopic/edujs/tree/master/jQueryColorRandom

Mira el codigo ejecutandose en relp.it: https://repl.it/@valoro/ParrafoColorRandom#index.html

index.html

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Document</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
 </head>  
 <body>  
   <p>Lo importante es no dejar de hacer preguntas.</p>  
   <script src="script.js"></script>  
 </body>  
 </html>  

script.js

 $(function(){  
   'use strict'  
   function aleatorio(){  
     return Math.random();  
   }   
   if( aleatorio()<= 0.5){  
     $('p').hover(function(){  
       $("p").css("cursor", "not-allowed");  
     })  
   }else{  
     $('p').hover(function(){  
       $("p").css("cursor", "pointer");  
     })  
     $('p').click(function(){  
       $("p").css("color", '#'+(0x1000000+(aleatorio())*0xffffff).toString(16).substr(1,6));  
     })  
   }  
 });  

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

• HTML DOM getElementsByTagName() Method

y dentro de ella el ejemplo

• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_getelementsbytagname

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.

• https://repl.it/@valoro/JS-manejando-el-DOM2

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;  
  });  
 }  

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

Esta entrada forma parte de una serie.

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

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 {}.

• https://repl.it/@valoro/JS-template-strings

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>';  

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

JavaScript setInterval clearInterval

En una entrada anterior ya hemos visto estos timers, y en otra hemos visto cómo cambiar alternativamente de color.

• JavaScipt timers: setinterval, settimeout
• Usar un botón como interruptor en JavaScript

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:

• https://repl.it/@valoro/JS-setinterval-clearInterval

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>  

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.

• https://altocodigo.blogspot.com/2016/10/getelementbyid.html

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.

• https://repl.it/@valoro/JS-boton-como-interruptor

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>  

JavaScript localStorage (3/3)

Esta entrada pertenece a una serie.

• JavaScript localStorage (1/3)
• JavaScript localStorage (2/3)
• JavaScript localStorage (3/3)

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.

• https://repl.it/@valoro/JS-localStorage3

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();  
 });  

JavaScript localStorage (2/3)

Esta entrada pertenece a una serie.

• JavaScript localStorage (1/3)
• JavaScript localStorage (2/3)
• JavaScript localStorage (3/3)

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:

• https://repl.it/@valoro/JS-localStorage2

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  

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>"});  

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

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

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.

• https://altocodigo.blogspot.com/2019/09/iterar-con-un-foreach-en-javascript.html

JavaScript localStorage (1/3)

Esta entrada pertenece a una serie.

• JavaScript localStorage (1/3)
• JavaScript localStorage (2/3)
• JavaScript localStorage (3/3)

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.

• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_storage_setitem

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.

• https://repl.it/@valoro/JS-localStorage1
• http://cssdeck.com/labs/collab/liumwa4u

El record que hemos llegado a ver