Categoría: JavaScript

console.log("Inicio script");
		function benchmark() {
			return new Promise(function (resolve, reject) {
				let t=0;
				for (let i=0; i<10000; i++) {
					for (let j=0; j<100000; j++) {
						t++;
					}
				}
				console.log(t);
				resolve(t);
			});
		}
		console.log("Creo promesa");
		let test=benchmark();
		console.log("Suscripción");
		test.then((result) => {
			console.log("resuelto");
			console.log(result);
		})
		console.log("Fin script");

En el ejercicio de clicar números hemos generado un array aleatorio y para ello hemos visto diferentes formas:

1.- Generar un número aleatorio e introducirlo en el array si no está, si ya está buscar otro número aleatorio.
2.- Crear un array correlativo y ordenarlo (sort) con random
3.- Utilizar el algoritmo Fisher-Yates (https://dev.to/codebubb/how-to-shuffle-an-array-in-javascript-2ikj)
4.- Otros, como el Durstenfeld, que mejora el Fisher Yates (este y más aquí: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)

Nos gustaría saber cual es más rápido y vamos a realizar un benchmark de estas 4 (o más) funciones. Definiremos una función a la que le pasamos el tamaño del array y nos devolverá un array desordenado de ese tamaño.

Una vez tengamos las funciones mediremos el tiempo, para ello ejecutaremos 1000 veces cada función para tamaños de 100, 1000, 10000 y 100000 elementos. Miraremos cual es la función más rápida para cada uno de estos tamaños.

Con el conocimiento adquirido crear una clase benchmark que en el constructor le pasemos como parámetros la función a evaluar y un array con el número de elementos (por defecto los mismos que antes). También tendrá una propiedad ‘times’ que por defecto vale 1000 pero que tendrá getter y setter. Esta clase tendrá un método getDurations que nos devolverá el resultado de ejecutar ‘times’ veces la función para cada uno de los tamaños que le pasamos por el array.

1) Cree una clase de TV con propiedades como marca, canal y volumen.
Especifique la marca como un parámetro del constructor. El canal debe ser 1 por defecto. El volumen debe ser 50 por defecto.
2) Agregar métodos para aumentar y disminuir el volumen. El volumen nunca puede estar por debajo de 0 o por encima de 100.
3) Agregue un método para configurar el canal. Digamos que el televisor tiene solo 50 canales, por lo que si intenta configurar el canal 60, el televisor permanecerá en el canal actual.
4) Agregue un método para reiniciar TV para que vuelva al canal 1 y al volumen 50. (Sugerencia: considere usarlo desde el constructor).
5) Es útil escribir un estado que devuelva información sobre el estado del televisor como: “Panasonic en el canal 8, volumen 75”.

Con el siguiente formulario:

<form name="miForm" action="recibir.html">
		<select id="select" multiple>
			<option value="blues" selected>Blues</option>
			<option value="rock" selected>Rock</option>
			<option value="classic">Classic</option>
		</select>
		<input type="text" name="email" id="email"/>
		<textarea id="comentarios" name="comentarios"></textarea>
		<input type="checkbox" name="importante" value="si" />
		<input type="checkbox" name="olvidable" value="si" />
	</form>

Comprobar que al menos estén seleccionadas dos opciones del select, el mail tenga un formato correcto y al menos uno de los checkboxes esté chequeado (o los dos).
Podéis hacerlo capturando el evento submit o poniendo un botón sin submit pero invocando el evento del formulario.

Y mostrar por consola el valor de cada elemento.

Para todos aquellos que ya habéis implementado la lógica del juego de clicar números, unas posibles mejoras:

– Implementar un botón ‘trampa’ que nos permita localizar el número actual por si estamos rayados. Sólo se permite una trampa por juego.
-Implementar un botón pausa que pause el juego poniendo una capa encima que esconda los números (para que no se pueda hacer trampa) y que cerrando esa capa o con otro botón volvamos al juego. El juego original tiene un botón de pausa por si queréis ver el funcionamiento esperado.
– Que pulsando la tecla ‘P’ se consiga el mismo efecto.
– No podemos deshabilitar la búsqueda del navegador, pero sí que cuando pulse CTRL+F no le funcione y le salga un mensaje de tramposo.
– Posibilidad de dos modos de juego: contrarreloj como ahora o sin límite de tiempo a ver cuanto se tarda.

Vamos a hacer el juego de clicar 100 números en orden correlativo. Lo enlazan aquí: Del 1 al 100 y la fuente es aquí: 1-100 click me.

Vamos a empezar creando la web, que se compone de un panel superior con la cantidad de números que nos quedan por clicar, los que hemos clicado, la puntuación y un contador.

Debajo tenemos un div donde están los números del 1 al 100 en orden aleatorio.

Hacemos la web con el diseño que queramos (pero que quede bonito).

Hacemos el javascript que nos genere 100 elementos con los números del 1 al 100 y que nos los coloque de manera aleatorio. Pueden ser botones, pueden ser divs, os recomiendo flexbox, pero que cada vez que actualicemos la página se nos genere otra configuración.

Realizar las tareas del manual de JS relativas a Fechas, JSON, navegar por el DOM y seleccionar elementos.

Teníamos una función conjetura que nos comprobaba la conjetura de Collatz. Si la probamos vemos que hay números que tienen muchos pasos y otros que tienen pocos. Me interesa saber, en los números del 1 al 100, cual es el que tiene más pasos, el segundo y el tercero. Crear una función que nos los devuelva junto con el número de pasos. Le pasamos como parámetro el número máximo que queremos evaluar y nos devolverá los 3 números con más pasos. Dejo a vuestra elección el formato en el que se devuelven los valores.

Teníamos una función que nos creaba un array con diferentes productos. Sobre ese array vamos a crear las siguientes funciones:

getByReference(reference)->Array con los productos cuya referencia comience por la cadena que le pasemos. Longitud máxima 3, si es mayor devolvemos un array vacío.

getInventory()->Nos devuelve el total de stock de los productos

getValuedInventory()->Nos devuelve el total del stock multiplicado por el precio de los productos

getPriceRange(min,max)->Nos devuelve los productos cuyo precio esté en ese rango, valores incluidos

getSortValuedInventory()->Nos devuelve un array con los productos ordenados por el precio multiplicado por el stock.