Ejercicio 4: Frontend - Formulario de Contacto (HTML, CSS & JavaScript)
Enunciado: Crea un formulario de contacto que incluya campos para el nombre, correo electrónico, y un mensaje. Utiliza JavaScript para validar que ningún campo esté vacío antes de enviar el formulario.
Solución:
HTML (contact.html):
<!DOCTYPE html>
<html>
<head>
<title>Formulario de Contacto</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<form id="contactForm">
<input type="text" id="name" placeholder="Nombre">
<input type="email" id="email" placeholder="Correo electrónico">
<textarea id="message" placeholder="Tu mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</body>
</html>
CSS (styles.css):
form {
display: flex;
flex-direction: column;
width: 300px;
margin: auto;
}
input, textarea {
margin-bottom: 10px;
}
JavaScript (script.js):
document.getElementById('contactForm').addEventListener('submit', function(event) {
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
let message = document.getElementById('message').value;
if (name === '' || email === '' || message === '') {
alert('Por favor, rellena todos los campos.');
event.preventDefault();
}
});
Ejercicio 5: Backend - API REST para Gestión de Tareas con Node.js y Express
Enunciado: Desarrolla una API REST simple con Node.js y Express que permita crear y listar tareas. Cada tarea debe tener un título y una descripción.
Solución:
app.js
const express = require('express');
const app = express();
app.use(express.json());
let tareas = [];
app.get('/tareas', (req, res) => {
res.json(tareas);
});
app.post('/tareas', (req, res) => {
const tarea = req.body;
tareas.push(tarea);
res.send('Tarea añadida con éxito.');
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Servidor ejecutándose en el puerto ${PORT}`);
});
Ejercicio 6: Backend - Consulta a una Base de Datos con PHP y MySQL
Enunciado: Escribe un script en PHP que se conecte a una base de datos MySQL y realice una consulta para obtener todos los registros de una tabla llamada 'usuarios'.
Solución:
PHP (consulta.php):
<?php
$servername = "localhost";
$username = "tu_usuario";
$password = "tu_contraseña";
$dbname = "tu_base_de_datos";
// Crear conexión
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificar conexión
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
$sql = "SELECT id, nombre, email FROM usuarios";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Salida de cada fila
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Nombre: " . $row["nombre"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 resultados";
}
$conn->close();
?>
Joseqwerty Otra tecnología que podrías hacer ejercicios: Java, Vue, JavaScript, etc.
Ejercicio 7: Java - Programa Básico de Calculadora
Enunciado: Escribe un programa en Java que actúe como una calculadora básica. Debe permitir al usuario ingresar dos números y seleccionar una operación (suma, resta, multiplicación, división). Después de realizar la operación, el programa debe mostrar el resultado.
Solución:
Calculadora.java
import java.util.Scanner;
public class Calculadora {
public static void main(String[] args) {
Scanner scanner = new Scanner(System.in);
System.out.print("Ingrese el primer número: ");
double num1 = scanner.nextDouble();
System.out.print("Ingrese el segundo número: ");
double num2 = scanner.nextDouble();
System.out.print("Ingrese la operación (+, -, *, /): ");
char operacion = scanner.next().charAt(0);
double resultado;
switch (operacion) {
case '+':
resultado = num1 + num2;
break;
case '-':
resultado = num1 - num2;
break;
case '*':
resultado = num1 * num2;
break;
case '/':
if (num2 != 0) {
resultado = num1 / num2;
} else {
System.out.println("División por cero no permitida.");
return;
}
break;
default:
System.out.println("Operación no reconocida.");
return;
}
System.out.printf("Resultado: %.2f\n", resultado);
}
}
Ejercicio 8: Vue.js - Lista de Tareas Interactiva
Enunciado: Crea una aplicación sencilla con Vue.js donde los usuarios puedan agregar tareas a una lista, marcarlas como completadas y eliminarlas.
Solución:
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Lista de Tareas con Vue.js</title>
</head>
<body>
<div id="app">
<input v-model="newTask" @keyup.enter="addTask">
<button @click="addTask">Agregar Tarea</button>
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Eliminar</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
JavaScript (app.js):
new Vue({
el: '#app',
data: {
newTask: '',
tasks: []
},
methods: {
addTask() {
if (this.newTask.trim() !== '') {
this.tasks.push(this.newTask);
this.newTask = '';
}
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
});
Ejercicio 9: JavaScript - Temporizador Simple
Enunciado: Crea una página web con un temporizador simple usando JavaScript. Debe permitir al usuario iniciar un temporizador de 5 minutos y mostrar una alerta cuando el tiempo haya terminado.
Solución:
HTML (timer.html):
<!DOCTYPE html>
<html>
<head>
<title>Temporizador Simple</title>
</head>
<body>
<button id="startTimer">Iniciar Temporizador de 5 Minutos</button>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
document.getElementById('startTimer').addEventListener('click', function() {
let tiempo = 5 * 60 * 1000; // 5 minutos en milisegundos
setTimeout(function() {
alert('¡Tiempo terminado!');
}, tiempo);
});
AnoWon Aunque quizas estaria mejor que hubiera una entrada para cada tecnologia no todos somos duchos en todas
Tienes toda la razón, y agradezco tu comentario. Es importante estructurar el material de aprendizaje de manera que sea accesible y efectivo para todos los estudiantes, independientemente de su nivel de experiencia en cada tecnología.
En el futuro, organizaré los ejercicios en secciones separadas por tecnología. Tengo dos propuestas y me gustaría saber cuáles consideráis más correcta para este caso:
- Tema por Tecnología: Podríamos crear temas diferentes en el foro, cada una dedicada a una tecnología específica. Por ejemplo, habría uno para Java, otra para Vue.js, y otra para JavaScript. De esta manera, podrías dirigirte directamente a la sección que te interese, encontrando allí todos los ejercicios y recursos relacionados.
- Mensajes Agrupados por Tecnología: Otra opción es seguir publicando todos los ejercicios en un único apartado, pero agruparlos por tecnología en cada mensaje. Esto significa que un solo mensaje contendría todos los ejercicios relacionados con Java, otro con Vue.js, y así sucesivamente. Esto mantendría centralizada la información, pero con una organización clara dentro del mismo espacio.
Cada opción tiene sus ventajas. La primera facilita la especialización y el enfoque en una tecnología a la vez, mientras que la segunda mantiene toda la información en un lugar, posiblemente facilitando la revisión y comparación.
