Categoría: JavaScript

JS array indexOf

Enlaces:
https://www.w3schools.com/jsref/jsref_indexof_array.asp

https://www.jquery-az.com/javascript-indexof-method-explained-with-6-examples-to-search-in-arrays/

console.log(num.indexOf(5)); //Devuelve 4
    console.log(num.indexOf(5,7)); //Devuelve -1

    //Ejercicio: Crear una función que pasándole una cadena y una palabra nos devuelva un array con las posiciones de esa palabra en la cadena y vacío si no está
    //Ejemplo posPalabra("la tía de la pepa va a la casa","la")->[0,3,7] porque 'la' está en la primera posición (0) de las palabras, en la 3 y en la 7

JS array every y some

Enlaces:

https://www.w3schools.com/jsref/jsref_every.asp

https://www.w3schools.com/jsref/jsref_some.asp

https://www.geeksforgeeks.org/javascript-array-prototype-every-function/

https://mariusschulz.com/blog/the-some-and-every-array-methods-in-javascript

let todosPares=num.every((valor)=>valor%2==0);
    console.log(todosPares);
    let algunPares=num.some((valor)=>valor%2==0);
    console.log(algunPares);

    let positivos=num.every((valor)=>valor>0);
    console.log(positivos);
  
    //Ejercicio: crear una función que le pasemos una cadena y nos devuelva true si todas las palabras tienen una longitud mayor o igual a 3
    //Ejemplo: masDeTres("hola que tal")->true masDeTres("Enun lugar de la mancha")->false
    //Ejercicio: crear una función que le pasemos una cadena y nos devuelva true si hay alguna palabra con una longitud mayor de 10
    //Ejemplo: masDeDiez("hola que tal")->false  masDeDiez("Mi tía es otorrinolaringóloga")->true

JS array reduce

Enlaces:
https://www.w3schools.com/jsref/jsref_reduce.asp
https://medium.com/@xadrijo/un-vistazo-a-la-funci%C3%B3n-reduce-en-javascript-f4459bc4e3aa

   let suma = num.reduce((total, valor, indice, array) => {
        console.log(indice + "|" + total);
        return total + valor;
    });

    console.log(suma);

    let mayor = num.reduce((total, valor, indice, array) => {

        return total < valor ? valor : total;
    });
    console.log(mayor);

let alumnos=[
    {nombre:"ana",nota:8},
    {nombre:"eva",nota:3},
    {nombre:"pep",nota:8},
    {nombre:"ot",nota:5},
]

let suma=alumnos.reduce((total,valor)=>total+valor.nota,0);
let peor=alumnos.reduce((total,valor)=>total.nota>valor.nota?valor:total);

console.log(suma);
console.log(peor);
    //Ejercicio: crear una función que le pasemos una cadena y nos devuelva la palabra más corta y si hay varias más cortas la primera alfabeticamente
    //Ejemplo cadCorta("en un lugar de la mancha")->"de"

JS array filter

Enlaces:

https://www.w3schools.com/jsref/jsref_filter.asp

https://ed.team/blog/javascript-filtrar-elementos-de-un-array-con-filter

https://alligator.io/js/filter-array-method/

Código de ejemplo:

 let conA=a.filter((valor,indice,array)=>{
        return valor.indexOf("a")!=-1;
    })
    console.log(conA);

    let num=[1,2,3,4,5,6,7,8,9];
    let impares=num.filter((valor)=>valor%2);
    console.log(impares);
    
    //Ejercicio: crear una función que le pasemos una cadena y un tamaño y nos devuelva una cadena eliminando las palabras de longitud menor o igual al tamaño
    //Ejemplo: limitar("En un lugar de la mancha",2)->"lugar mancha"

JS array map

Enlaces:

https://www.w3schools.com/jsref/jsref_map.asp

https://code.tutsplus.com/es/tutorials/how-to-use-map-filter-reduce-in-javascript–cms-26209

Javascript – la función map

Código de ejemplo:

let a = ["Ana", "Eva", "Pep"];
  let may=a.map((valor,indice,array)=>{
        return valor.toUpperCase();
    })
    console.log(may);

    let minmay=a.map((valor,indice,array)=>{
        return indice%2==0?valor.toUpperCase():valor.toLowerCase();
    })
    console.log(minmay);

    //Ejercicio: crear una función a la que le pasemos una cadena y nos devuelva una cadena con las palabras en el mismo orden pero invertidas
    //Ejemplo: invertirPalabras("Hola que tal")->"aloH euq lat"

JS array forEach

Nos permite recorrer los elementos de un array. Enlaces:

https://www.w3schools.com/jsref/jsref_foreach.asp

https://dmitripavlutin.com/foreach-iterate-array-javascript/

https://medium.com/front-end-weekly/3-things-you-didnt-know-about-the-foreach-loop-in-js-ff02cec465b1

Ejemplos de código:

 let a = ["Ana", "Eva", "Pep"];

    //foreach nos permtite recorrer todos los elementos de un array
    a.forEach((valor, indice, array) => {
        console.log(valor);
        console.log(indice);
        console.log(array);
    })

    let b = [];
    a.forEach((valor, indice, array) => {
        b.unshift(valor);
    })
    console.log(b);

    function menu(array) {
        let lista = "<ul>";
        array.forEach((valor) => {
            lista += "<li>" + valor + "</li>";
        })
        lista += "</ul>";
        return lista;
    }
    console.log(menu(a));

    //Ejercicio: crear una función a la que le pasemos una cadena y nos devuelva un objeto con el número de vocales existentes.
    //Ejemplo: vocales("Hola que tal")->{a:2,e:1,o:1,u:1}

Ejemplos del operador spread (…)


<script>
let values = [22, 9, 60, 12, 4, 56];
let max = Math.max(...values);
let min = Math.min(...values);
console.log(max);
console.log(min);
let arr1 = [1, 1, 2, 3];
let arr2 = [13, 21, 34];
let copia = [...arr1]; // a copy of arr1 is created
console.log(copia);
let fibArray = [0, ...arr1, 5, 8, ...arr2]; // first 10 Fibonacci numbers
console.log(fibArray);
let [a, b, c] = [22, 9, 60];
console.log(a);
[b,c]=[c,b];
console.log(b);
// ignoring values
let [h, , i] = [13, 21, 34];       // h=13, i=34
// using with rest
let [j, k, ...l] = [2, 3, 5, 8];   // j=2, k=3, l=[5,8]
let obj = { p: 1, q: true, r: "FK" };
let { p, r } = obj;             // p=1, r="FK"
let { q: flag, r: name } = obj; // Renaming: flag=true, name="FK"
let { q, t = "India" } = obj;   // q=true; t="India"
function minAndMax1(...nums) {
    return [Math.min(...nums), Math.max(...nums)];
}
let [small1, big1] = minAndMax1(22, 9, 60, 12, 4, 56);
</script>

Ejemplos de uso de spread:
https://davidwalsh.name/spread-operator
https://codeburst.io/a-simple-guide-to-destructuring-and-es6-spread-operator-e02212af5831

Extensión ejercicio Minions

Lo primero que vamos a hacer es refactorizarlo para que el ‘estado’ del juego se guarde en localStorage y no lo perdamos cuando se cierre o refresque el navegador.

Vamos a extender el ejercicio de los minions considerando las siguientes posibilidades:

Skynet

Si llegamos a comprar 30 discos duros aparecerá (y digo aparecerá porque en ésta como en las otras opciones no se verá el botón hasta que no se cumpla la condición) una opción de ‘crear virus cloud’ con un coste de 10.000 y que nos proporciona alojamiento infinito. Si lo compramos aparecerá otro powerup que es ‘Investigar IA’ que promete duplicar las líneas cada 10 segundos pero que en realidad, cuando lo pulsamos creamos una Inteligencia artificial autoconsciente que extermina a los humanos del planeta.

El objetivo cambia. Ahora tenemos que apoderarnos de todos los recursos del planeta. Podemos crear robots clicando y cada robot recopila 1kg de material cada 10 segundos. Podemos crear factorías que cuestan 1000kg de material y nos crean un robot. Los robots consumen 1kw cada 10 segundos. Tenemos una central de energía que produce 2kw cada 10 segundos. Comprar una central cuesta 100kg de material y los robots no pueden funcionar si no tienen energía eléctrica. Es decir, si tengo 10 robots pero sólo una central sólo estarán trabajando 2.  La tierra pesa  6,000,000,000,000,000,000,000,000 kg. Cuando se gasten has acabado el juego y has ganado. A no ser que exploremos otros planetas…

Conquer of the world

Si llegamos a tener contratados 100.000 minions nos aparece la posibilidad de contratar ‘Fidelidad a la empresa’. Si lo compramos los minions tienen tanta lealtad hacia la empresa que son capaces de dar su vida por ella. Al CEO de la empresa le da un siroco y tendremos un powerup que es ‘Entrenamiento militar’. A partir de aquí tendremos un ejército y cambian los objetivos.

Tendremos un territorio conquistado de 1km cuadrado. Nuestros minions soldados conquistan 1km cada 10 segundos y saquean ese territorio proporcionándonos 1000€. Podemos comprar una oficina de reclutamiento que cuesta 20000€ y  nos proporciona 1 minion cada 10 segundos. Podemos comprar:

Fusiles semiautomáticos (10€ por minion): Duplica el territorio conquistado por cada 10 segundos.

Tanque (1000€): conquista 2km cada 10 segundos

Bombardeo (10000€): conquista 4km cada 10 segundos

Armas nucleares (1.000.000 €) conquista 100km cada 10 segundos.

La superficie de la tierra es 510.000.000 km, si llegamos a esta cifra hemos conquistado el mundo y ganado.

Ejercicio lista de tareas

Vamos a hacer un ejercicio para almacenar una lista de tareas en nuestra web

Tendremos un formulario con los siguientes campos:

Tarea

Prioridad (Urgente, normal, pasando del tema)

Fecha vencimiento

Con un botón de agregar añadimos tareas a la lista. Debajo del formulario tenemos la lista de tareas y al lado de cada una un botón de eliminar.

Juego de dados

Las reglas del juego de dados pueden leerse en la wikipedia: Craps

Cuando se juega en un casino contra la banca, o casa, uno o varios jugadores realizan diversas apuestas al resultado que se obtendrá en los dados que lance alguno de los jugadores, el cual es designado «tirador» o «shooter» por su nombre en inglés. Para comenzar el juego, durante lo que se conoce como «tiro de salida», el jugador necesita realizar una apuesta que se conoce como «línea de pase», en la que se busca obtener un siete (conocido como «siete natural» o «siete ganador») o un once en la combinación de dados para ganar la apuesta, que paga uno a uno. Si por el contrario obtiene un dos, tres o doce (números conocidos como «craps») pierde automáticamente su apuesta y necesitará colocar de nuevo una apuesta para seguir tirando. Si durante el primer lanzamiento no obtiene un siete u once (con que gana), o un dos, tres o doce (con que pierde), el juego entrará en una segunda etapa, en la que se marcará el «punto» en el número que se obtenga en dicho lanzamiento (cuatro, cinco, seis, ocho, nueve o diez). En esta etapa, el tirador buscará volver a obtener ese número en los dados, con lo que ganará el «roll» o «ronda», antes de obtener un siete, llamado «siete fuera» o «seven out». Si logra repetir el número del punto, el jugador ganará su apuesta y se le pagará uno a uno el monto. Si por el contrario si aparece un siete, perderá su apuesta. En ambos casos se considera que la ronda ha terminado y el juego vuelve a comenzar, aunque si la ronda culminó debido a un siete fuera se designará un nuevo tirador de entre los distintos jugadores.

Para nuestro programa tendremos, entonces, dos ramas diferentes.

Cuando el usuario le de a jugar tiramos los dados.

  • Si sale siete u once, ha ganado
  • Si sale 2, 3 o 12, ha perdido.

En cualquier otro caso tenemos que guardar la puntuación (y mostrarla en cualquier sitio). A partir de aquí tendremos otro botón de tirar en el que iremos tirando los datos hasta que:

  • Salga siete: ha perdido
  • Salga el mismo numero: ha ganado

Lo más fácil es tener dos botones, que se irán mostrando u ocultando dependiendo de como vaya el juego.

En el primer botón:

  • Realizar tirada (dos números aleatorios entre 1 y seis) Poner imagen. Estaría bien tener una función para esto.
  • Si sale siete u once, aumentamos uno al saldo y decimos que ha ganado
  • Si sale 2, 3 o 12 quitamos uno al saldo y decimos que ha perdido
  • Si sale otro número lo almacenamos en una variable, ocultamos el botón y mostramos el segundo

En el segundo botón:

  • Realizar tirada. Idem anterior

Si sale siete, ha perdido

Si sale el número, ha ganado

En cualquier otro caso, sigue jugando

dados