Ejercicio mini web

Vamos a crear una miniweb con lo siguiente:

Al entrar nos aparecerá una página de login con usuario y contraseña:

Usuario:[ ]
Password:[ ]
[Enviar]

Si el usuario no es ‘admin’ ‘admin’ nos vuelve a la página de login.
Si es ‘admin’ ‘admin’ nos sale una página con estos enlaces:

Tabla de multiplicar
Numero mayor

Si pinchan en tabla de multiplicar nos sale una página con lo siguiente:
Número[ ]
[Enviar]

Si nos introducen un número en esta misma página se mostrará la tabla de multiplicar de ese número

Si pinchan en mayor nos sale una página con lo siguiente:
Número 1 [ ] Número 2 [ ]
[Enviar]
Al darle a enviar nos dice cual es el número mayor de los dos

Mejoras: que tanto en la tabla de multiplicar como en los números ya estén por defecto los valores que hemos enviado en vez de quedarse en blanco.

Ejemplos JSP

https://www3.ntu.edu.sg/home/ehchua/programming/java/JSPByExample.html

https://beginnersbook.com/jsp-tutorial-for-beginners/

https://www.javatpoint.com/jsp-tutorial

Capturar parámetros:

https://www.javatpoint.com/request-implicit-objectç

Variables de sesión:
https://www.javatpoint.com/session-implicit-object

Para declarar variables o funciones hay que usar el !:

https://www.javatpoint.com/session-implicit-object

Código de algunas páginas:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Hola Mundo!!</h1>
	<%
	out.print("<p>Vengo del código</p>");
	String nombre = "Juan";
	%>

	<p><%=nombre%></p>

	<%
	double num = Math.random();
	if (num > 0.5) {
		out.print("<h2>Ha salido cara</h2><p>crocretamente ha salido:" + num + "</p>");
	} else{
		out.print("<h2>Ha salido cruz</h2><p>crocretamente ha salido:" + num + "</p>");
	}
	if (num > 0.5) {
	%>
	<h2>Ha salido cara</h2>
	<p>
		crocretamente ha salido:
		<%=num%>
	</p>
	<%
	} else {
	%>
	<h2>Ha salido cruz</h2>
	<p>
		concretamente ha salido:
		<%=num%>#
	</p>
	<%
	}
	%>
	<button class="btn btn-primary">soy codigo</button>

</body>
</html>

	<!-- Imprimo con la función out de JSP -->
	<p>
		<%
		out.print("Esto es código JSP");
		%>
	</p>

	<!-- %= es un atajo si solo quiero imprimir -->
	<p><%="Esto es también"%></p>

	<!-- Uso clases de java -->
	<h3><%=java.time.LocalDateTime.now().format(java.time.format.DateTimeFormatter.ofPattern("dd-MM-yyy HH:mm"))%></h3>


	<!-- Declaraciones -->
	<%!String nombre = "Ana Pi";

	String saludo(String nombre) {
		return "Hola " + nombre;
	}%>

	<!-- Uso lo declarado -->

	<p><%=saludo(nombre)%></p>
	<p><%=saludo("Juan Buj")%></p>

Ejercicio clases Dungeons & Dragons

Vamos a hacer una especie de juego antiguo de dragones y mazmorras. Tendremos un tablero y en medio estará nuestro héroe. Puede moverse en todas las direcciones y en principio no sabe lo que se va a encontrar. Hay tesoros (que sirven para incrementar nuestra potencia) y monstruos (con los que peleamos). Si derrotamos a todos los monstruos hemos ganado.

Antes de empezar nos pedirá el tamaño del tablero (ancho y alto) aunque tendremos valores por defecto. También el número de monstruos y de tesoros. Se crea el tablero se coloca al héroe y se piden movimientos hasta que el usuario escriba ‘FIN’, se derroten a todos los monstruos o nos muramos.

Cada vez que proporcionamos un movimiento (U,D,L,R) movemos al héroe a esa posición. Las posiciones que no se han visitado se muestran con asterisco, las visitadas se dejan en blanco.

Cuando el héroe encuentra un tesoro se le da el mensaje, las monedas que ha ganado y cuanto se ha incrementado la potencia. Se le pide que pulse una tecla para continuar.

Cuando el héroe encuentra un monstruo se le avisa, se calcula quien ha ganado (un porcentaje respecto a la potencia) y pueden pasar dos cosas:
1.- Gana el héroe: se incrementa su potencia
2.- Pierde el héroe: Se acaba el juego y se le pregunta si quiere volver a empezar.

Esto sería lo básico. Posibles mejoras:

1.- Poción de vida. Si el usuario las encuentra y lo mata un monstruo puede seguir la partida.
2.- Poción de visión: Si el usuario la usa cuando le toca su movimiento puede ver lo que tiene a su alrededor.
3.- Modificar el enfrentamiento para que sea por turnos y que reste ‘vida’ dependiendo de la potencia. Esto nos permitiría tener monstruos con más personalidad (mucha vida pero poca potencia, poca vida pero mucha potencia)
4.- Que las monedas no te den automáticamente potencia, sino que te permitan comprar más vida o más potencia (u otras cosas que se nos puedan ocurrir)
5.- Modo automático: el héroe se mueve a través del tablero aleatoriamente y nos va mostrando los mensajes sin que tengamos que intervenir.
6.- Mundo infinito: Poner puertas en los lados del tablero que nos permitan ir a otras habitaciones que se irán generando.

Ejercicios Java

Escribir una función que invierta el orden de los caracteres de una cadena dada.

Escribir una función que cuente el número de veces que se repite un carácter específico en una cadena dada.

Escribir una función que elimine los espacios en blanco al principio y al final de una cadena dada.

Escribir una función que compruebe si una cadena es un palíndromo (una palabra o frase que se lee igual de izquierda a derecha y de derecha a izquierda).

Escribir una función que elimine todas las ocurrencias de una subcadena específica de una cadena dada.

Escribir una función que reemplace todas las ocurrencias de un carácter específico en una cadena dada con otro carácter.

https://github.com/juanpfuentes/Java/blob/main/src/java/strings.md

Mini ejercicio react

Descargar el código de la cesta de la compra:

https://github.com/PacktPublishing/React—The-Complete-Guide-includes-Hooks-React-Router-and-Redux-Second-Edition/tree/main/Section%2011/code/12-finished

Y añadimos las siguientes mejoras:

1.- Botón en la cesta para eliminar completamente un producto
2.- Si la compra es superior a 1000 que se muestre un aviso de que se puede pagar en tres plazos
3.- Poder filtrar las carnes por el nombre.

Truco para eliminar listeners de funciones flechas

Básicamente cambiar el prototype para que internamente guarde un Symbol (id única) y nos permita eliminarlas:

(function()
{
    let target = EventTarget.prototype;
    let functionName = 'addEventListener';
    let func = target[functionName];

    let symbolHidden = Symbol('hidden');

    function hidden(instance)
    {
        if(instance[symbolHidden] === undefined)
        {
            let area = {};
            instance[symbolHidden] = area;
            return area;
        }

        return instance[symbolHidden];
    }

    function listenersFrom(instance)
    {
        let area = hidden(instance);
        if(!area.listeners) { area.listeners = []; }
        return area.listeners;
    }

    target[functionName] = function(type, listener)
    {
        let listeners = listenersFrom(this);

        listeners.push({ type, listener });

        func.apply(this, [type, listener]);
    };

    target['removeEventListeners'] = function(targetType)
    {
        let self = this;

        let listeners = listenersFrom(this);
        let removed = [];

        listeners.forEach(item =>
        {
            let type = item.type;
            let listener = item.listener;

            if(type == targetType)
            {
                self.removeEventListener(type, listener);
            }
        });
    };
})();

document.addEventListener("DOMContentLoaded", event => { console.log('event 1'); });
document.addEventListener("DOMContentLoaded", event => { console.log('event 2'); });
document.addEventListener("click", event => { console.log('click event'); });

document.dispatchEvent(new Event('DOMContentLoaded'));
document.removeEventListeners('DOMContentLoaded');
document.dispatchEvent(new Event('DOMContentLoaded'));