Cheatsheet de Javascript en español

Una lista de métodos y funciones que se requieren saber en Javascript

Extraer un index de un Array si tenemos el valor como el ID de algo:

//El arrray
var productos = [
 {id: 501, nombre: 'producto ABC'},
 {id: 808, nombre: 'producto DEF'},
 {id: 947, nombre: 'producto GEB'},
];

//EL JS para extraer el index en base al ID
let buscar = 808;
let index = productos.map( producto => producto.id ).indexOf( buscar );

//Resultado index = 1

Extraer el atributo de un DIV

<!--html-->
<div id="divCodigo" data-codigo="1588" ></div>

/*JS por partes*/
<script >
var div = document.querySelectorAll('#divCodigo');
var valor = div.getAttribute('data-codigo');
/*Resultado valor = 1588 */

/*JS Directo*/
var div = document.querySelectorAll('#divCodigo').getAttribute('data-codigo');

/*Resultado div = 1588 */
</script>

Hacer un Fetch con JS

<script >
/*Luego de ponerlo en un botón con evento click por ejemplo:*/

//Preparar los parámetros
var datos = new FormData(formulario);
//agregamos dato1 y extraemos el valor de texto1
datos.append('dato1', document.getElementById('texto1').value );

//Hacemos el fetch vía POST y le mandamos los datos:
fetch( 'http://localhost/api/insertarCalendario.php', {
	method: 'POST',
	body: datos
})
//Luego capturamos la data que trae el servidor
.then(res => res.text() ) //.text() en caso que sea texto la respuesta del servidor, o .json() en caso que la respuesta sea un JSON
.then(data =>{ console.log(data); }) //Acá mostramos realmente el texto o el contenido del json 
.catch(error=> console.log(error ) ) //Si hubiera error del lado del cliente, del lado del servidor te devolverá como texto.


</script >

Para recorrer cada ítem dentro de un div:

<!--html-->
<div class="mb-3 row row-cols-4" id="colores">
	<div data-color="#ddd" ></div>
	<div data-color="#F3796F" ></div>
	<div data-color="#162E30" ></div>
</div>



<script >
/*JS*/
var colores = document.querySelectorAll('#colores div');
	colores.forEach(color=>{
	color.style.background = color.getAttribute('data-color')
})


</script >