miércoles, 31 de julio de 2019

JavaScript manejando el DOM con las clases

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 esta ocasión veremos como trabajar con las clases (class).


HTML

En el documento HTML tenemos una sección con id="seccionLunas" y unos cuantos li para crear una lista identificados por su clase (class).

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>modifica el DOM</title>  
  </head>  
  <body>  
   <section id="seccionLunas">  
    <h1>Satélites naturales</h1>  
   <ul>  
    <li class="marte">Phobos es la luna interior y la que más rápido gira.</li>  
    <li class="marte">Deimos es la luna exterior y la de giro más lento.</li>  
    <li class="marte">Phobos tiene una masa casi 5 veces mayor que Deimos.</li>  
    <li class="tierra">La Luna es el único satélite de la Tierra.</li>  
    <li class="jupiter">Ganímedes es la mayor luna de Júpiter.</li>  
    <li class="jupiter">Io es una luna de Júpiter.</li>  
    <li class="jupiter">Europa es unaluna de Júpiter.</li>  
    <li class="jupiter">Calisto es la mayor luna de Júpiter.</li>  
    <li class="saturno">Titán es la mayor luna de Saturno.</li>  
   </ul>  
   </section>  
   <!--scripts-->  
   <script src="dom4.js"></script>  
  </body>  
 </html>  

JavaScript

 'use strict'  
 //TRABAJAR EN EL DOM CON ELEMENTOS POR SU CLASE  
 console.log(("▼ 1 ").repeat(20));  
 var liMarte=document.getElementsByClassName('marte');  
 console.log(liMarte);  
 for(var i in liMarte){  
   if(liMarte[i].className=="marte"){  
     liMarte[i].style.backgroundColor="beige";  
   }  
 }  
 console.log("");  
   
 console.log(("▼ 2 ").repeat(20));  
 var liTierra=document.getElementsByClassName('tierra');  
 console.log(liTierra);  
 //si hacemos el siguiente for no es necesario un if  
 for(var i=0;i<liTierra.length;i++){  
   liTierra[i].style.fontStyle="italic";  
   liTierra[i].style.fontWeight="bold";  
   liTierra[i].style.backgroundColor="#00FF00";//verde  
 }  
 console.log("");  
   
 console.log(("▼ 3 ").repeat(20));  
   
 //con QUERYSELECTOR  
 var id=document.querySelector("#seccionLunas"); //con # actuamos sobre los id  
 console.log(id);  
 console.log("");  
   
 console.log(("▼ 4 ").repeat(20));  
 var claseMarte=document.querySelector(".marte");//con . actuamos sobre las clases  
 console.log(claseMarte); //muestra solo el primer elemento  
 console.log("");  
   
 console.log(("▼ 5 ").repeat(20));  
 var a=document.querySelectorAll(".marte"); //con querySelectorAll pillamos todos  
 console.log(a);  
 console.log("");  
   
 function toArray(domElements){  
  return Array.from(domElements);  
 }  
   
 console.log(("▼ 6 ").repeat(20));  
 console.log("usando HTMLCOLLECTION - FOREACH");  
 //seleccionamos con getElementById, getElementsByClassName, ...  
 var htmlcollection = document.getElementsByTagName('li');   
   
 /*  
 //esto no funciona, da erro, dice  
 //TypeError: htmlcollection.forEach is not a function  
 console.log(htmlcollection);//vemos que es una htmlcollection  
 htmlcollection.forEach((value, key) => {  
  console.log(key + " => " + value);  
 });  
 */  
 console.log("");  
   
 console.log(("▼ 7 ").repeat(20));  
 var htmlcollection_array = toArray(htmlcollection); // Convertimos en array convencional  
 htmlcollection_array.forEach((value, key) => { // Ya funciona  
  console.log(key + " => " + value.textContent);  
 });  
 console.log("");  
   
 console.log(("▼ 8 ").repeat(20));  
   
 console.log("Usando NODELIST - FOREACH");  
 //usamos una función de selección de tipo querySelector, querySelectorAll.  
 var nodelist = document.querySelectorAll("li");  
 console.log("");  
   
 console.log(("▼ 9 ").repeat(20));  
 console.log(nodelist); //comprobamos que es una nodelist  
 console.log("");  
   
 console.log(("▼ 10 ").repeat(16));  
 nodelist.forEach((value, key) => {  
  console.log(key + " => " + value.textContent);  
 });  
 console.log("");  
   
 console.log(("▼ 11 ").repeat(16));  
 console.log("usando AMBOS - FOR(..IN...)");  
   
 //para evitar usar if dentro del bucle tanto para htmlcollection como para nodelist  
 //deben ser pasados a arrays  
 //para htmlcollection ya tenemos htmlcollection_array  
   
 var nodelist_array = toArray(nodelist);  
 for(let key in nodelist_array){ //funciona bien sin if  
  console.log(key, nodelist_array[key].textContent);  
 }  
 console.log("");  
   
 console.log(("▼ 12 ").repeat(16));  
   
 for(let key in htmlcollection_array){ //funciona bien sin if  
  console.log(key, htmlcollection_array[key].textContent);  
 }  
 console.log("");  
   
 console.log(("▼ 13 ").repeat(16));  
   
 console.log("usando FOR(..OF...) ponemos fondo azul");  
 //Otra forma que no necesita if es FOR(...OF...)  
 var jovianos = document.getElementsByClassName("jupiter"); //satélites jovianos  
 for(let joviano of jovianos){  
  joviano.style.background = "cyan";  
 }  
 console.log("");  
   
 console.log(("▼ 14 ").repeat(16));  
   
 //usando FOR(...IN...) pero es necesario un IF  
 //si necesitamos poner el if con un FOR(...IN...)  
 var rediv=document.getElementsByClassName("marte");  
 for(var value in rediv){  
  if(typeof rediv[value]=="HTMLLIElement"){  
   rediv[value].style.color="blue";//tinta azul  
  }  
  console.log("este es de marte: "+rediv[value]);  
 }  
 //si no hubieramos puesto el if si funcionaría la tinta azul pero  
 //la consola daría un error porque intenta poner azul elementos  
 //que no son texto y que van en la colección.  

Las colecciones del tipo HTMLcollection no aceptan bucles forEach para ser recorridas y así poder sacar sus elementos. Lanzan un error diciendo:

TypeError: htmlcollection.forEach is not a function

Un posible solución es emplear un bucle for del tipo for(...in...) pero en este caso al pedir con style que los elementos del HTMLcollection tomen determinado atributo, como por ejemplo, un color, se hace necesario añadir un condicional if para evitar que el código intente añadir un color a los elementos finales de la colección que ya no son puro texto.

En el código se presentan otras formas de establecer bucles para que no sea necesario usar ese condicional if y que sin embargo podamos añadir ciertos estilos (style) como por ejemplo el color, únicamente a los elementos que son de puro texto.
  • Un sistema consiste en convertir la colección en un array con toArray() y así luego ya podamos aplicar un forEach
  • Un sistema que funciona estupendamente es hacer un for(...of...)

Para iterar elementos del DOM es más interesante usar for(...of...). A diferencia del "for in" la variable "div" no toma los índices, toma los valores de cada índice que es lo que habitualmente queremos. Con "for in" obtienes indices y con "for of" obtienes valores.

Si usamos funciones del tipo querySelectorAll, que son similares a JQuery, si podremos usar un forEach sin problemas ya que lo que devuelven es un objeto del tipo NodeList.



JavaScript manejando el DOM por sus etiquetas

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 un artículo anterior ya hemos hablado de cómo manejar el DOM desde JavaScript utilizando el id de las etiquetas <div> entre otras, ahora continuamos profundizando en el manejo del DOM utilizando sus etiquetas: <h1>, <p>, <div>, <span><section>, ...

En muchos casos el HTML de las página web utiliza etiquetas que no llevan ningún id y simplemente tenemos que manejarlas haciendo referencia al tipo de etiqueta de que se trata y cuando son varias del mismo tipo, por ejemplo varios <div> podemos recogerlos todos y luego tratarlos por el número que ocupan dentro del HTMLCollection que hemos capturado. Este contenedor actua como un array donde los elementos son todos los <div> capturados.

Página en Firefox y consola con F12.

HTML

Tenemos un div inicial con etiqueta id="micaja". Con este hemos trabajado en el post citado. Ahora creamos tres div sin etiqueta. Cuando trabajemos con ellos nos referiremos a cada uno de ellos de forma individual por el índice que ocupan en una array que se puede formar con ellos.
También hemos añadido una sección con etiqueta id="miseccion".

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>modifica el DOM</title>  
  </head>  
  <body>  
   <h1>Manejamos de DOM</h1>  
   <p>Estamos manejando el DOM desde código JS.</p>  
   <div id="micaja">Texto inicial del cuerpo</div>  
   <div>Este es el div 1.</div>  
   <div>Este es el div 2.</div>  
   <div>Este es el div 3.</div>  
   <section id="miseccion">  
    <hr>  
    <h1>Listado de los textos de los DIVs</h1>  
   </section>  
   <!--scripts-->  
   <script src="dom3.js"></script>  
  </body>  
 </html>  

JavaScript

Tenemos dos zonas de código.

  • (línea 3)   Trabajar con elementos con un id concreto  (esto ya se vió en el post citado al inicio)
  • (línea 18) Trabajar con elementos por su etiqueta  (ésta es la parte nueva)
https://repl.it/@valoro/JS-DOM3

 'use strict'
//Seleccionar y modificar elementos del DOM

// TRABAJAR CON ELEMENTOS CON UN ID CONCRETO

//Veo el contenido del ID completo (como objeto)
var caja = document.getElementById("micaja");
//console.log(caja);

//Veo el texto del ID
caja = document.getElementById("micaja").innerHTML;
//console.log(caja);

//Puedo modificar el texto desde JS
caja = document.getElementById("micaja");

caja.innerHTML = "Nuevo texto escrito desde JS";
//console.log(caja.innerHTML);

//Cambio el style de la caja
caja.style.color = "red";
caja.style.backgroundColor = "yellow";
caja.style.border = "thick solid #0000FF";


//TRABAJAR CON ELEMENTOS POR SU ETIQUETA
//declaramos una variable que es un HTMLcollection (similar a un array)
// que captura todas las etiquetas
var todosLosDiv = document.getElementsByTagName("div");

console.log(todosLosDiv); //se muestra el HTMLcollection con todos los div

var contenidoEnTexto2 = todosLosDiv[2]; //podemos elegir un elemento concreto del HTMLcollection

console.log(contenidoEnTexto2.textContent);  //textContent captura el texto contenido

//textContent es similar a innerHTML aunque este último permite asignar contenido
contenidoEnTexto2.innerHTML = "Otro texto para el DIV 2";
console.log(contenidoEnTexto2);//muestra todo el div no solo el textContent
contenidoEnTexto2.style.backgroundColor = "cyan"; //puedo manejar los estilos

for (let valor in todosLosDiv) {
    //con el if evitamos tres undefined que se mustran al final y no son div
    if (typeof todosLosDiv[valor].textContent == "string") {
        var parrafo = document.createElement("p"); //creamos un elemento de parrafo
        //pillamos en la variable texto todos los textos de los div
        var texto = document.createTextNode(todosLosDiv[valor].textContent);
        parrafo.append(texto); //anexamos el texto al elemento parrafo creado
        //parrafo.appendChild(texto); //también funcionaría con appendChild
        //anexamos el párrafo a la sección "miseccion"
        document.querySelector("#miseccion").append(parrafo);
        //si en lugar de append ponemos prepend inserta el parrafo invirtiendo el orden de los div
    }
}
var hr = document.createElement("hr");//creamos un hr
miseccion.append(hr);//el hr lo añadimos al final
hr.style.borderColor = "red";//el hr será rojo. Esta línea no funciona en algunos navegadores

lunes, 29 de julio de 2019

Cambiar color usando el DOM en JavaScript

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 esta ocasión vamos a diseñar un caso práctico donde podemos cambiar el color del texto y del fondo de forma aleatoria pulsando un botón.


HTML

El documento se llama index.html.

Creamos un div con el id="zona". Creamos un botón que al ser pulsado lanza una función de JavaScript.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>manejo del DOM</title>  
   <link href="dom2.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <div id="zona">¡Hola!</div>  
   <div>  
    <br>  
    <button type="button" onclick="mifuncion()">Cambia el color aleatoriamente</button>  
   </div>  
   <script src="dom2.js"></script>  
  </body>  
 </html>  

CSS

El documento se llama dom2.css. Proporcionamos unos valores iniciales para los colores de texto y fondo. Definimos el tamaño de nuestro rectángulo.

 #zona {  
    width: 200px;  
    height: 60px;  
    background-color: beige;  
    color: grey;  
    text-align: center;  
    font-size: 250%;  
    }  
    button{  
        height:50px;  
        width:150px;  
       }  

JavaScript

El documanto se llama dom2.js

Si tuviéramos un valor concreto de color rgb hubieramos escrito, por ejemplo:

rectangulo.style.color='rgb(50,200,100)';

Al usar variables aleatorias hemos tenido que concatenarlas para formar nuestro código.


 var rectangulo=document.getElementById("zona");  
 function mifuncion() {  
  var a=Math.floor(Math.random()*255);  
  var b=Math.floor(Math.random()*255);  
  var c=Math.floor(Math.random()*255);  
  var x=Math.floor(Math.random()*255);  
  var y=Math.floor(Math.random()*255);  
  var z=Math.floor(Math.random()*255);  
  rectangulo.style.backgroundColor='rgb('+a+','+b+','+c+')';  
  rectangulo.style.color='rgb('+x+','+y+','+z+')';  
 }  

domingo, 28 de julio de 2019

JavaScript manejo del 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
El DOM contiene, en forma de arbol, todos los elementos que podemos manejar de una página web entendida como documento. Podemos manejar todas aquellas etiquetas que utilizamos: <p> párrafos, <div> cajas, <h1> etiquetas de texto, <span> contenedor en línea, ...



Veamos un ejemplo inicial donde vamos a trabajar leyendo, modificando y alterando propiedades de un elemento <div> identificado por su id.

En el documento HTML es importante poner la llamada al script al final del body par que de tiempo a que se escriba la página web tal y como se ha definido en el documento html y que luego el código JS pueda leer y alterar lo escrito. Si ponemos los script arriba en el body o incluso en el head podremos comprobar que nuestro código no es capaz de leer o modificar lo escrito, ya que aún no se ha escrito por parte del código HTML.


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

HTML

Observe que llamamos al código JavaScript con una línea antes de que finalice el body. Lo aconsejable es llamar al script dentro del head. De este tema se habla en la siguiente entrada del blog:

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>modifica el DOM</title>  
  </head>  
  <body>  
   <div id="micaja">Texto inicial del cuerpo</div>  
   <!--Scripts -->  
   <script src="dom1.js"></script>  
  </body>  
 </html>  

JavaScript

 'use strict'  
 //DOM = Document Object Model  
   
 //Veo el contenido del ID completo (como objeto)  
 var caja=document.getElementById("micaja");  
 console.log(caja);  
   
 //Veo el texto del ID  
 caja=document.getElementById("micaja").innerHTML;  
 console.log(caja);  
   
 //Puedo modificar el texto desde JS  
 caja=document.getElementById("micaja");  
 caja.innerHTML="Nuevo texto escrito desde JS";  
 console.log(caja.innerHTML);  
   
 //Cambio el style de la caja  
 caja.style.color="red";  
 caja.style.backgroundColor="yellow";  
 caja.style.padding="20px";  
   
 //Usando la función cambiaColor  
 cambiaColor("beige");  
   
 function cambiaColor(color){  
   caja.style.background=color;  
  }  

En la línea 5 del código anterior podemos leer:

var caja=document.getElementById("micaja");

Esta expresión puede ser sustituida por la siguiente obteniendo el mismo resultado.

var caja=document.querySelector("#micaja");

Con este segundo método estamos usando un querySelector y estamos haciendo referencia a "#micaja" de forma similar a como lo haríamos en CSS con el uso de # y el id.

Seguidamente se muestran los textos que se ven en pantalla a medida que el código va actuando.







Un ejercicio con arrays en JavaScript

Ya hemos visto una serie de entradas que hablan sobre arrays o listas en JavaScript.
  1. Arrays en JavaScript
  2. Arrays multidimensionales en JavaScript
  3. Manejar arrays en JavaScript
  4. Buscar en arrays en JavaScript
En esta ocasión vamos a realizar un ejercicio para practicar el uso de arrays en JavaScript.

El ejercicio quiere que resolvamos los siguientes puntos.
  • Pide seis números por pantalla y los meta en un array
  • Mustra el array entero (todos sus elementos) en el cuerpo de la página y en la consola
  • Ordena y muestra el array
  • Muestra cuantos elementos tiene el array
  • Búsca un valor introducido por el usuario, dica si lo encuentra y su índice

https://repl.it/@valoro/JS-ejercicio-con-arrays
  • Creamos la variable global numeros como una lista. Ha de ser global para que se puede leer por todas las funciones. También creamos la variable global n que contendrá el número de elementos solicitados que es de seis.
  • Invocamos la función solicita(n) que pedirá al usuario n números enteros y los añadirá a la lista numeros usando push. La función retorna numeros que al ser una variable global ya puede ser usada por todos.
  • Creamos una copia de numeros llamada numerosbis. Esta copia usa slice() ya que en caso contrario la copia que pretendemos crear no sería una copia autonoma sino un alias. Estos supone que si métodos como sort o reverse afectan la lista numeros de forma irreversible tambíen afectarían a su alias. Deseamos que numerosbis sea una copia independiente y no un alias por lo que para conseguirlo hemos tenido que usar slice().
  • Mostramos el número de elementos con length.
  • Mostramos el array original numeros.
  • Invocamos la función cuerpo() que muestra en el cuerpo de la página los valores del array uno a uno usando for(var i in numeros) para recorrer todos ellos.
  • Mostramos los valores ordenados usando numeros.sort(). Esto consigue que la ordenación se haga según el código unicode, esto es, considerando los valores como cadenas alfanuméricas donde, por ejemplo, 101 precede a 2, porque en orden alfabético va antes.
  • Para mostrar un orden numérico se ha de usar sort con una función de ordenación dentro de sus paréntesis. En este caso hemos incluido una función de flecha siguiendo este link de Mocilla.
  • El inconveniente de usar sort es que se modifica la lista original, este es el motivo por el que se realizó una copia, manteniedo en numerosbis la lista inicial.
  • Si ahora hacemos numeros.reverse() estaremos obteniendo el reverso de lo que contiene ahora la lista numeros. Esto supone que obtendremos los números ordenados en orden de mayor a menor, pero no estaremos obteniendo el reverso de la lista original.
  • Para conseguir el reverso de la lista de numeros original aplicmos reverse() sobre numerosbis que es la copia que sacamos en su momento. Pero si no queremos que esta copia también quede modificada de forma permanente lo que tenemos que hacer es escribir numerosbis.slice().reverse(). Esto mismo se podría haber utilizado con sort usando numeros.slice().sort().
  • Comprobamos que numerosbis no ha sido modificada y conserva los números de la lista origienal.
  • Finalmente pedimos a usuario un número para ver si existe en el array que se ha formado. Esto lo hacemos invocando la función buscar() que nos pide el número buscado numbuscado y que con findIndex(función de flecha) asignan a la variable indice un booleano true o false que nos indica si se ha encontrado o no el número buscado.
 'use strict'  
 var numeros=[]; //variable global  
 var n=6; //variable global  
   
 function solicita(n){  
  for(var i=0;i<n;i++){  
   var nuevo=parseInt(prompt("Indique un número entero: "));  
   numeros.push(nuevo);  
  }  
  return numeros;  
 }  
   
 function cuerpo(){  
  var texto="<h3>Elementos del array</h3>"  
  for(var i in numeros){texto+=numeros[i]+"<br>"}  
  document.write(texto);  
 }  
   
 function buscar(){  
 var numbuscado=parseInt(prompt("¿Qué número desea buscar?: "));  
 var indice=numerosbis.findIndex(item => item==numbuscado);  
 if(indice==-1){  
  var mensaje="Número "+numbuscado+" no encontrado";  
 }else{  
  var mensaje="Número "+numbuscado+" encontrado en la posición: "+indice;  
 }  
 console.log(mensaje);  
 }  
   
 solicita(n); //construimos el array  
 const numerosbis=numeros.slice(); //copia la lista para tener un duplicado  
 console.log("Número de elementos: ",numeros.length); //número de elementos  
 console.log("Valores iniciales: ",numeros); //se mustra en consola el array original  
 cuerpo(); //mostramos el array en página web, uno a uno  
 console.log("Ordenados unicode: ",numeros.sort()); //array ordenado  
 console.log("Ordenando numeros: ",numeros.sort((a,b)=>a-b)); //numeros ordenados  
 console.log("En orden inverso: ",numeros.reverse()); //lo muestra en orden inverso  
 console.log("Reverse original: ",numerosbis.slice().reverse());  
 console.log("Valores iniciales: ",numerosbis); //aún tenemos los números iniciales  
 buscar();  

Podemos establecer un código alternativo para la función cuerpo() que usaría numeros.forEach(función de flecha).

 function cuerpo(){  
  var texto="<h3>Elementos del array</h3>"  
  numeros.forEach(item => {texto+=numeros[item]+"<br>"});  
  document.write(texto);  
 }  

sábado, 27 de julio de 2019

Buscar en arrays en JavaScript

Vamos a utilizar find y some para hacer búsquedas en un array.

El método find() devuelve el valor del primer elemento en un array que cumple una condición establecida en forma de función.
El método find() se ejecuta para cada elemento contenido en la lista. Si un elemento cumple la condición establecida en la función devuelve ese elemento y no analiza los restantes, por lo que en caso de cumplir la condición varios de ellos únicamente devuelve el primero. Si ningún item cumple la condición devuelve undefined.

El método some() verifica si alguno de los elementos del array cumple la condición establecida en una función. Si alguno cumple la condición devuelve true y en caso contrario devuelve false.


https://repl.it/@valoro/JS-buscar-en-arrays

 'use strict'  
 var numeros = [7, 15, 3, 55, 100];  
   
 //Buscar si existe algún elemento que cumpla una condición  
 var encontrado1 = numeros.find(function(element) {  
  return element > 10;  
 });  
 console.log(encontrado1); //da 15 pq es el 1º >10  
   
 //con una función de flecha  
 var encontrado2 = numeros.find(item => item > 20);  
 console.log(encontrado2); //da 55 pq es el 1º >20  
   
 //otro ejemplo con la función flecha  
 var elementos=["Carbono","Oxígeno","Hierro"];  
 var encontrado3=elementos.find(elemento => elemento=="Carbono");  
 console.log(encontrado3); //da Carbono  
   
 //Buscando el índice donde se encuentra el elemento  
 var encontrado4=elementos.findIndex(elemento => elemento=="Carbono");  
 console.log(encontrado4); //da 0 porque el Carbono está el primero  
   
 //otro ejemplo con some  
 var encontrado5 = numeros.some(item => item<5);  
 console.log(encontrado5); //da true  

En el primer ejemplo se establece la función dentro de find como función anónima pero también se podría haber escrito como una función con nombre normal. En ese caso el primer ejemplo podría escribirse como se muestra seguidamente.

 var encontrado0 = numeros.find(buscar);  
 console.log(encontrado0); //da 15 pq 15 es el 1º >10  
 function buscar(element){  
  return element > 10;  
 }  

Manejar arrays en JavaScript

Vamos a menejar las listas o arrays en JavaScript. Veremos algunos métodos como:
  • push   → añade un elemento al final de la lista
  • pop → elimina el último elemento de una lista
  • indexOf → localiza el índice que ocupa un elemento en una lista
  • splice → elimina el número de elementos indicado comenzando por el que se indique
  • join → convierte un array en un string
  • split → convierte un string en un array
  • sort → ordena un array modificándolo
  • reverse → cambia el orden de los elementos de un array, en orden inverso

https://repl.it/@valoro/JS-manejar-arrays

 'use strict'  
 var elementos=["Carbono","Oxígeno","Hierro"];  
   
 //Añadir un elemento al final  
 elementos.push("Potasio");  
 elementos.push("Fósforo");  
 console.log(elementos);  
   
 //Eliminar el último elemento  
 elementos.pop();  
 console.log(elementos);  
   
 //Eliminar un elemento por su indice  
 var indice=elementos.indexOf("Oxígeno");  
 if(indice>-1){  
  elementos.splice(indice,1); //1 indica cuantos se quieren eliminar  
 };  
 console.log(elementos);  
 console.log("=".repeat(57));  
   
 //convertir un array en un string  
 var elementos_str=elementos.join(" ~ ");  
 //si se pone join() el separador es la coma  
 //si se pone join("") no hay separador  
 console.log(elementos_str);  
 console.log("=".repeat(57));  
   
 //convertir un string en un array  
 var reinos="mineral, vegetal, animal";  
 var reinos_arr=reinos.split(", ");  
 console.log("string = ",reinos);  
 console.log("reinos_arr= ",reinos_arr);  
 console.log("ordenado = ",reinos_arr.sort()); //ordena modificando el array  
 console.log("reinos_arr= ",reinos_arr); //ahora no es igual que el original  
 console.log("reverse = ",reinos_arr.reverse()); //da el reverso  

Hemos indicado que sort ordena de forma permanente el array, ahora le corresponde investigar a usted y contestar a esta pregunta ¿reverse también modifica de forma permanente el array?

Arrays multidimensionales en JavaScript

Un array es una lista, un vector. Pero si tenemos un conjunto de vectores podemos formar una matriz que ya tendrá una dimensión n×m, con un cierto número de filas y columnas. Equivale a una tabla rectangular con n filas y m columnas.

En JavaScript un array se forma con una lista y un array multidimensional se forma con un array de arrays, esto es, se crea un array donde los elementos son otros arrays.


https://repl.it/@valoro/JS-arrays-multi

En el código siguiente se muestran varias formas de declarar y asignar valores a arrays multidimensionales.

 'use strict'  
 var elementos=["Carbono","Oxígeno","Hierro"];  
 var simbolo=["C","O","Fe"];  
 var num_atomico=[6,8,26];  
 var tabla_per=[elementos,simbolo,num_atomico];  
 console.log("El símbolo del ",elementos[2]," es: ",tabla_per[1][2]);  
 console.log(tabla_per);  
 console.log("=".repeat(40));  
   
 //recorrer un array  
 for(let elemento in elementos){  
  console.log(elementos[elemento],simbolo[elemento],num_atomico[elemento]);  
 }  
 //elemento es un index, podría llamarse item o lo que sea  
   
 //otro ejemplo de array multidimensional  
 var clase=[alumnos,asignaturas];  
 var alumnos=["Ana","Jose","Lus","Paula","Carmen","Isa","Alex"];  
 var asignaturas=["Geo","Bio","Mat","Tecno","Eco"];  
 console.log("=".repeat(40));  
   
 var items = [  
  [17, 24],  
  [36, 42],  
  [59, 63]  
 ];  
 console.log(items);  
 console.log("Elemento[0][0]=",items[0][0]); // 1  
 console.log("=".repeat(40));  
   
 var matriz=[[]];  
 console.log(matriz);  
 var vector1=["uno","dos","tres"];  
 var vector2=["one","two","three"];  
 var vector3=["Un","Deux","Trois"];  
 matriz=[vector1, vector2, vector3];  
 console.log(matriz);  
 console.log("=".repeat(40));  
   
 var x = new Array(10);  
 for(var i=0;i<x.length;i++){  
  x[i]=new Array(3);  
 }  
 for(var i=0;i<x.length;i++){  
  for(var j=0;j<x[i].length;j++){  
   x[i][j]=Math.floor(Math.random()*90)+10;  
  }  
 }  
 console.log("Matriz "+x.length+"×"+x[0].length+" con valores aleatorios");  
 console.log(x);  

Arrays en JavaScript

Podemos trabajar con listas, arrays o vectores en JavaScript. Se trata de listas ordenadas de datos separados por comas y encerrados entre corchetes [ ].


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

Disponemos de una serie de ejemplos que trabajan con arrays. Una lista o array se declara creando una variable con datos encerrados entre corchetes o con la expresión:

new Array(elemento_1, elemento_2,...,elemento_n)

Los elementos pueden ser cadenas de texto entre comillas, booleanos (true, false), números, otras listas o bien diccionarios, así como una combinación de todos ellos enlazados unos con otros en diferentes niveles de complejidad.

Podemos determinar el número de elementos con length.

Podemos leer o escribir sobre un elemento indicando el nombre de la lista y entre corchetes el número del índice del elemento. Los índices comienzan a numerar lo elementos por cero.

 'use strict'  
 var lista1=['Madrid','París','Londres','Roma'];  
 var lista2=[2,5,7,9,11];  
 var lista3=new Array(true,false,false,true,true);  
 var lista4=[{'España':'Madrid','Italia':'Roma'},{'Tieraa':'Luna','Marte':['Phobos','Deimos']}]  
 console.log(lista1.length); //da 4  
 do{  
  var elemento=parseInt(prompt("¿Qué ciudad quieres?",0));  
  if(elemento<lista1.length){  
   alert('La ciudad elegida es: '+lista1[elemento]);  
  }else{  
   alert('Indique un número menor que '+lista1.length);  
  }  
 } while (elemento<0 || elemento>3);  
 document.write("<h1>Ciudades elegidas</h1>");  
 document.write("<ul>");  
 for(var i=0;i<lista1.length;i++){  
  document.write("<li>"+lista1[i]+"</li>");  
 }  
 document.write("</ul>");  
 document.write("<h1>Ciudades numeradas</h1>");  
 document.write("<ul>");  
 lista1.forEach((item,indice,arr)=>{  
  document.write("<li>"+indice+". "+item+"</li>");  
  console.log(arr);  
 });  
 document.write("</ul>");  

La estructura forEach utiliza tres argumentos que aquí hemos denominado item, indice y arr. Los dos últimos son optativos. El argumento arr contiene un array con todos los elementos de la lista.

viernes, 26 de julio de 2019

Plantillas de texto en JavaScript

Esta entrada forma parte de una serie.

En JavaScript disponemos de un herramienta muy útil para trabajar con textos y variables. Se trata de las plantillas de texto que se introdujeron en las versiones ES6/ES2015 de JavaScript/ECMAScript, que se publicó en junio de 2015. Las novedades en los estándares web es conveniente esperar antes de introducirlos en producción para evitar que los navegadores no actualizados dejen de mostrar esas características que hemos programado con tanta dedicación.

Veamos un ejemplo.


https://repl.it/@valoro/JS-plantillas-de-texto

 var edad=prompt("Indica tu edad en años",22);  
 var ciudad=prompt("Indica tu ciudad","Buenos Aires");  
 //creamos la variable texto con comillas invertidas  
 var texto=`  
  <h1>Bienvenidos miembros</h1>  
  <p>Perteneces al grupo de la ciudad de ${ciudad}</p>  
  <p>y todos los miembros de tu grupo tienen ${edad} años.</p>  
  <p>Tu grupo se llamará ${ciudad.toLowerCase().replace(/ /g, "")}${edad}</p>  
 `;  
 document.write(texto);  

La instrucción replace(/ /g,"") lo que hace es reemplazar de forma global todos los espacios por una cadena vacía. Esto supone en la práctica que se eliminan todos los espacios.

Procesamiento de cadenas de texto en JavaScript

Veamos una serie de funciones y métodos para hacer búsquedas en cadenas de texto o para extrar caracteres de un string.


https://repl.it/@valoro/JS-busquedas-en-un-string

 'use strict'  
 var texto1="Es un pequeño paso para el hombre, pero un gran paso para la humanidad"  
 var texto2="En 1969 el hombre llegó a la Luna"  
 var busqueda1=texto1.indexOf("paso");  
 console.log(busqueda1);  
 var busqueda2=texto1.lastIndexOf("paso");  
 console.log(busqueda2);  
 var busqueda3=texto2.search("paso");  
 console.log(busqueda3);  
 var busqueda4=texto1.search("paso");  
 console.log(busqueda4);  
 var busqueda5=texto1.match("paso");  
 console.log(busqueda5);  
 var busqueda6=texto1.match(/paso/gi);  
 console.log(busqueda6);  
 var extrae1=texto2.substr(3,4);  
 console.log(extrae1);//da 1969  
 var extrae2=texto2.charAt(29);  
 console.log(extrae2);//da L  
 var busqueda7=texto2.startsWith("En 1969");  
 console.log(busqueda7);//da true  
 var busqueda7=texto2.endsWith("la Luna");  
 console.log(busqueda7);//da true  
 var busqueda8=texto1.includes("gran");  
 console.log(busqueda8);//da true  
 var a=texto1.split(",");//separamos por la coma  
 console.log(a);//da un array con dos string  
 //en el segundo string reemplazamos paso por salto  
 a[1]=a[1].replace("paso","salto");  
 var texto1a=a.join("");//juntamos los dos elementos  
 console.log(texto1a);//da la frase correcta de Neil Armstrong  
 var extrae3=texto2.slice(8);//corta el string y da el final  
 console.log(extrae3);//da el hombre llegó a la Luna  
 var extrae4=texto2.slice(8,23);//corta el string y da del caracter 8 al 23  
 console.log(extrae4);//da el hombre llegó  
 var b="  Hola mundo  ";//con espacios al inicio y al final  
 b=b.trim();//quita los espacios a inicio y al final  
 console.log(b);//da Hola mundo  

Trabajar con cadenas de texto en JavaScript

Existe una página con documentación sobre una gran cantidad de lenguajes de programación y lógicamente también sobre JavaScript donde podemos consultar una serie de métodos que se pueden aplicar a cadenas, o a cualquier otro aspecto del lenguaje. En esta entrada del blog vamos a tratar algunos de los métodos que trabajan con cadenas (string).

Trabajar con cadenas alfanuméricas

Veamos algunos métodos y funciones que nos permiten trabajar con cadenas de texto.
  • typeof
  • toString()
  • String
https://repl.it/@valoro/JS-string

 'use strict'  
 //Trabajar con cadenas alfanuméricas = string  
 var numero=512;  
 console.log(numero); //da 512 como número  
 console.log(typeof numero); // da number  
 //Convertir número a strign  
 var cadena=numero.toString();  
 console.log(cadena); //da 512 como string  
 console.log(typeof cadena); //da string  
 console.log(String(numero));//da 512 como string  
 console.log(String(numero)===cadena); //Comprobación de que son iguales: true  
 console.log("====================")  

Convertir un texto a mayúsculas o minúsculas

Usamos:
  • toUpperCase()
  • toLowerCase()

 //Convertir un texto a mayúsculas o minúsculas  
 var texto="De Madrid al cielo"  
 console.log(texto.toUpperCase());  
 console.log(texto.toLowerCase());  
 console.log("=".repeat(20)); //repite una cadena un cierto nº de veces  

Longitud de una cadena

Usamnos:
  • length

 //Longitud de una cadena  
 //console.log(nombre.length); //da erro porque la variabl no está definida  
 var nombre=null;  
 //console.log(nombre.length); //da erro porque la variable es null  
 nombre="";  
 console.log(nombre.length); // da 0  
 nombre="Ana";  
 console.log(nombre.length); //da 3  
 nombre=123;  
 console.log(nombre.length); // da undefined  
 console.log("=".repeat(20));  

Contar los elementos de un array

Para un array o lista, al igual que para un string también usamnos:
  • length

 //Contar los elementos de un array  
 nombre=['Ana','Jose'];  
 console.log(nombre.length); //da 2  
 console.log("=".repeat(20));  

Concatenar textos

Para concatenar textos o cadenas alfanuméricas o string usamos:
  • +
  • concat

 //Concatenar textos  
 var texto1="Hola";  
 var texto2="Antonio";  
 console.log(texto1+texto2); //da HolaAntonio  
 console.log(texto1+" "+texto2); //da Hola Antonio  
 console.log(texto1.concat(" "+texto2));//da Hola Antonio  
 console.log("=".repeat(20));  

Unir elementos de una lista para formar un string

Usamos:
  • joint()
  • joint("")
  • creamos una función que extrae los elementos de la lista uno a uno y los concatena con +=


 //Unir elementos de una lista para formar un string  
 var lista=['B','i','e','n','v','e','n','i','d','o','s'];  
 console.log(lista);  
 console.log(lista.join());  // da B,i,e,n,v,e,n,i,d,o,s  
 console.log(lista.join("")); // da Bienvenidos  
 console.log(lista.length); //da 11  
 function une(lista){  
  var palabra="";  
  for(var i in lista){  
   palabra+=lista[i];  
  }  
  return palabra;  
 }  
 console.log(une(lista)); // da Bienvenidos  

miércoles, 24 de julio de 2019

JavaScript let vs var

En  JavaScript no es obligatorio declarar las variables aunque si es muy recomendable. Cuando se declaran no se les asigna que tipo de variable es tal y como sucede en otros lenguajes donde se indica si la variable es de tipo cadena (string), numérica (integer, double, ...), de fecha (date), objeto.

Aqui vamos a tratar el tema de la declaración de variables con var o con let. La diferencia estriba en que let permite declarar variables cuyo ámbito de actuación se limita a la estructura en la que se define la variable. Si la estructura es un condicional if, o un bucle for, la variable declarada con let dentro de esa estructura únicamente existirá dentro de ella, y cuando salgamos de esa estructura la variable no se reconocerá.

Veamos unos ejemplos con el uso de let y var.

Usando let dentro de una estructura

Si asignamos la variable a dentro de la estructura condicional if su ámbito de actuación se limitará a esta estructura. Si usamos un console.log(a) dentro del if se imprimirá sin problemas el valor de a, pero si lo hacemos fuera de la estructura if, este mismo cosole.log(a) nos dará error indicando que la variable no está definida.
https://repl.it/@valoro/JS-let1

 if (2<3){  
  let a=100;  
  console.log('a=',a);  
 }  
 //console.log('a=',a); //da error  

Si de la última línea de código quitamos las dos barras // que indican que es un comentario obtendremos el siguiente error.

Usando var dentro de una estructura

Si en el ejemplo anterior cambiamos let por var ya no obtendremos ningún error.


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

 if (2<3){  
  var a=100;  
  console.log('a=',a);  
 }  
 console.log('a=',a); //no da error  

Analizando el error con try

Para realizar el tratamiento de errores en JavaScript podemos utilizar la estructura try...catch.


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

 if (2<3) {  
  let a=100;  
  console.log('a=',a);  
 }  
 try {  
  console.log('a=',a); //da error  
 }  
 catch(err) {  
  console.log(err.message);  
 }  

martes, 23 de julio de 2019

JavaScript ámbito de las variables

Existen variables globales y variables locales. Las variables globales tienen su ámbito de actuación en todo el procedimiento, por el contrario las variables locales únicamente están disponibles dentro de la función en la que están definidas.

Variable global actuando dentro de una función


  • Declaramos la variable global texto que contiene el string Hola.
  • Llamamos a la función genera y le pasamos el parámetro texto.
  • La función modifica la variable texto añadiendo la palabra mundo.
  • La función imprime por consola la variable texto que será: Hola mundo
  • Finalmente, fuerea de la la función, como última línea de código imprimimos la variable texto y vemos que es igual a Hola. Esto quiere decir que la modificación que se hizo de la variable texto dentro de la función no ha salido al ámbito global.


https://repl.it/@valoro/JS-variables-globales-y-locales1

 'use strict'  
 function genera(texto){  
  var texto=texto+" mundo";  
  console.log(texto);  
 }  
 var texto="Hola";  
 genera(texto);  
 console.log(texto);  


La variable local sale con return


  • Declaramos dos variables locales (a y b) dentro de la función. Usando return sacamos una de ellas, pero la otra no.
  • Ejecutamos la función y su resultado se asigna a la variable x, que es una variable global, porque está definida fuera de la función. La variable x recibe lo que la función devuelve por return con lo que hemos conseguido sacar fuera el valor de la variable locar a que es 100.
  • Se imprime x por pantalla y se obtienen 100.
  • Si intentamos imprimir fuera de la función la variable b, que es una variable local, obtendremos un error puesto que esta variable no está definida fuera del ámbito de actuación de la función.


https://repl.it/@valoro/JS-variables-globales-y-locales2

 'use strict'  
 function muestra(){  
  var a=100;  
  var b=200;  
  return a;  
 }  
 var x=muestra();  
 console.log(x);  
 //console.log(b); //esta expresión da erro porque b es una variable local  


Devolver más de un valor con return

Si necesitamos devolver más de un número o string con return podemos hacerlo devolviendo un array, esto es, una lista que contenga varios elementos.

En el siguiente ejemplo vamos a generar una lista de n posiciones que contenga números aleatorios. La función devuelve esa lista con un return y calcula sus cuadrados.


https://repl.it/@valoro/JS-variables-globales-y-locales3


 'use strict'  
 function define(n){  
  var lista=[];  
  for(var i=0;i<n;i++){  
   lista.push(Math.floor(Math.random()*(20-2))+2);  
  }  
  console.log(lista);  
  return lista  
 }  
 var milista=define(5);  
 console.log('Cuadrados');  
 console.log(milista.map(n => Math.pow(n,2)));  


JavaScript convertir numero a string y string a número

Un valor numérico se puede transformar en string con la expresión:

numero.toString()

Un string con apariencia de número entero se puede transformar en número entero mediante:

parseInt(n)

Un string con apariencia de número decimal se puede transformar en número decimal o número de coma flotante mediante:

parseFloat(n)

Veamos un ejemplo.


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

 <!DOCTYPE html>  
 <html>  
 <body>  
 <p>Presione el botón para mostrar los valores y su tipo.</p>  
 <button onclick="myFunction()">Muestra</button>  
 <p id="demo1"></p>  
 <p id="demo2"></p>  
 <p id="demo3"></p>  
 <p id="demo4"></p>  
 <p id="demo5"></p>  
 <p id="demo6"></p>  
 <script>  
 function myFunction() {  
  var num = 15;  
  var n = num.toString();  
  var m=parseInt(n);  
  var x=m/2;  
  var y=x.toString();  
  var z=parseFloat(y);  
  document.getElementById("demo1").innerHTML = num+ " "+typeof num;  
  document.getElementById("demo2").innerHTML = n+ " "+typeof n;  
  document.getElementById("demo3").innerHTML = m+ " "+typeof m;  
  document.getElementById("demo4").innerHTML = x+ " "+typeof x;  
  document.getElementById("demo5").innerHTML = y+ " "+typeof y;  
  document.getElementById("demo6").innerHTML = z+ " "+typeof z;  
 }  
 </script>  
 </body>  
 </html>  



lunes, 22 de julio de 2019

Funciones de flecha en JavaScript

Las funciones de flecha permiten una sintaxis en JavaSript que simplifica la forma de trabajar con funciones anónimas.

Como ejemplo vamos a calcular el doble de una serie de números que estan contenidos en una lista, en un array. Veamos varios métodos donde todos ellos nos permiten doblar los números de una lista y donde el último de todos estos métodos veremos que es el que tiene una sintaxis más limpia y abreviada. Se trata justamente de una función de flecha =>.

Usaremos la función map que en JavaScript actúa sobre una lista, obteniendo sus elementos uno a uno, los pasa por una función que trabaja con los elementos de forma individual y lo que devuelve es otra lista donde se han recompuesto los elementos de la lista original una vez pasados por la función. La función map no altera la lista original.

Doblamos los valores de un array por varios métodos
https://repl.it/@valoro/JS-funcion-flecha

Método 1: con map y una función externa

  • Primero declaramos un array denominado numeros que contiene tres valores numéricos en forma de lista.
  • Imprimimos los números iniciales
  • Declaramos una función denominada doblaNumero con un único argumento denominado num que recoge cada uno de los números individuales y con un return devuelve ese número multiplicado por dos. Observe que el argumento num no es un array sino un único número que recibe la función y luego devuele su doble.
  • Declaramos una variable denominada doblados que contiene un array con los valores numéricos doblados del array inicial. La forma de conseguir esto es mediante el uso de map que permite tomar el array numeros y pasárselo a la función doblaNumero tomando sus elementos de uno en uno, y volviendo a construir otro array con lo que devuelva esa función.
  • Finalmente imprimimos la lista doblados mediante un concole.log.
  • La función map toma una lista inicial y devuelve otra lista después de haber pasado sus elementos individualmente por una función a la que llama. La lista devuelta no anula la lista inicial y ésta continua existiendo.
 //declaramos un array de números  
 var numeros = [2,5,60];  
 console.log("Números iniciales: ",numeros);  
 //doblemos sus valores  
 //MÉTODO 1 con map y una función externa  
 function doblaNumero(num){  
  return num*2;  
 }  
 var doblados= numeros.map(doblaNumero);  
 console.log(doblados);  

El método 1 es mejorable y habitualmente la función a la que llama map no está fuera sino que se incluye como función anónima dentro de la función map. Veamos el método 2.

Método 2: con una función anónima

  • Ahora metemos la función que dobla dentro de map como una función anónima.
  • El return permite doblar usando la sintaxis *=. De esta forma num*=2 equivale a num=num*2.
  • Finalmente imprimimos dobles que es el nuevo array con los valores ya doblados.

 //MÉTODO 2 con una función anónima  
 var dobles = numeros.map(function(num) {  
  return num*=2;  
 });  
 console.log(dobles);  

Método 3: con una función anónima, todo en una lína de código

Esta es una ligera variante del método anteiror. El código es el mismo pero lo ponemos en una sola línea de texto.

 //MÉTODO 3 con una función anónima, todo en una lína  
 console.log(numeros.map(function(num) {return num*2}));  

Método 4: con una función de flecha

Al fin podemos ver en el método 4 cómo se resuelve este ejemplo utilizando una función de flecha.

 //MÉTODO 4 con una función de flecha  
 console.log(numeros.map(num => num*2));  

Observe que la palabra function ha desaparecido y ahora simplemente lo que indicamos es que la variable auxiliar num se convierte en num*2 que es lo que retorna la función.

Elegante e intuitivo. Nos podemos aficionar a esta forma de trabajar.

Veamos otro ejemplo de funciones de flecha en JavaScript.

Cálculo de la longitud de los textos de una lista

Dada un array con el nombre de unas cuantas ciudades, deseamos obtener otro array que contenga la longitud de las cadenas de texto asociada a la lista de ciudades.

Longitudes de las cadenas
https://repl.it/@valoro/JS-funcion-flecha2

 'use strict'  
 var ciudades=["Roma","Madrid","Johannesburgo"];  
 console.log(ciudades.map(city => city.length));  

La variable city es una variable intrumental, la podríamos haber llamado item o con otro nombre.

Casos de uso de funciones de flecha

Veamos varios casos de uso de las funciones de flecha en JavaScript.


https://repl.it/@valoro/JS-funcion-flecha3

Caso 1

Una función de flecha con un único argumento num y una única operación de resultado num*2. Cuando el argumento es único podemos evitar pornelo entre paréntesis, pero cuando son dos o más los argumento de la función entonces deben ir entre paréntesis.
Cuando las líneas de código de la función son varias debemos ponerlas entre llaves {}, pero cuando es una única línea, como en este caso, podemos prescindir de las llaves.
Las funciones de flecha siempre son funciones anónimas y si se igulan a una variable con en ese caso el nombre de la variable hace el papel de nombre de función cuando las invocamos, como por ejemplo aquí que decimos doble(3), para conseguir doblar un número.

 //Caso 1  
 var doble=(num => num*2);  
 console.log(doble(3));  

Caso 2

En este caso vamos a sumar dos números, como se trata de dos argumentos a y b debenir entre paréntesis. En este caso hemos puesto return y entre llaves, pero esto es optativo.

 //Caso 2  
 var sumar = (a, b) => { return a+b; }  
 console.log(sumar(2,3));  

Caso 3

Este caso es igual al caso anterior pero hemos eliminado el return y las llaves {}.

 //Caso 3  
 var sumar = (a, b) => a+b  
 console.log(sumar(1,3));  

Caso 4

Podemos poner todo en una línea. La función va envuelta entre paréntesis y con un par de argumentos entre paréntesis, de esta forma la invocamos y la declaramos al mismo tiempo. Todo en uno.

 //Caso 4   
 console.log(((a, b) => a+b)(1,2));  

Caso 5

Veamos el caso de una función anónima que no tiene argumentos y que lo único que hace es saludarnos diciendo Hola. Si envolvemos la función entre paréntesis y luego le ponemos otros dos paréntesis () para invocarla habremos conseguido que la función se ejecute ella sola.

 //Caso 5   
 (() => { console.log("Hola"); })();  

Caso 6

Aquí además prescindimos de las llaves {}.

 //Caso 6   
 (() => console.log("Adios"))()  

Caso 7

Una forma curiosa de sumar dos números, usando funciones callback y la sintaxis de flecha.

 //Caso 7  
 function suma(fun1, fun2) {  
  console.log(fun1()+fun2());  
 }   
 suma(() => 10, () => 20);