Desafío: hora de practicar En una carrera de desarrollo de software, la práctica constante de la lógica de programación desempeña un papel fundamental en la construcción de bases sólidas. La lógica de programación no solo te permite la creación de algoritmos eficientes y soluciones elegantes, sino que también desarrolla la capacidad de pensar de manera estructurada y analítica. Esta habilidad es esencial para enfrentar desafíos complejos y convertir problemas abstractos en implementaciones tangibles. Con esto en mente, hemos creado una lista de actividades (no obligatorias) centradas en la práctica para mejorar aún más tu experiencia de aprendizaje. ¡Vamos a practicar! Desafíos 1. Descarga otro proyecto haciendo clic en este enlace y ábrelo en Visual Studio Code. Descargado y descomprimido:
</header>
<main class="container">
<button onclick="" class="button">Console</button>
<button onclick="" class="button">Alert</button>
<button onclick="" class="button">Prompt</button>
<button onclick="" class="button">Suma</button>
</main>
<script src="app.js"></script>
2. Cambia el contenido de la etiqueta h1 con document.querySelector y asigna el siguiente texto: "Hora del Desafío".
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora del Desafío';
- Crea una función que muestre en la consola el mensaje "El botón fue clicado" siempre que se presione el botón "Console". En el index.html , agregamos en el onclick el siguiente código:
En el app.js
function mostarMensajeEnLaConsola() { console.log('El botón fue clicado!') }
- Crea una función que se ejecute cuando se haga clic en el botón "prompt", preguntando el nombre de una ciudad de Brasil. Luego, muestra una alerta con el mensaje concatenando la respuesta con el texto: "Estuve en {ciudad} y me acordé de ti".
Opción 1:
En el index.html , agregamos en el onclick el siguiente código:
En el app.js
function mostrarAlerta() {
let ciudad = prompt("Por favor, ingresa el nombre de una ciudad de Brasil:");
alert("Estuve en " + ciudad + " y me acordé de ti.");
}
Opción 2:
function promptCity() {
const city = prompt("Introduce el nombre de una ciudad de Brasil:");
if (city) {
alert(Estuve en ${city} y me acordé de ti
);
}
5. Crea una función que muestre una alerta con el mensaje: "Yo amo JS" siempre que se presione el botón "Alerta".
En el index.html , agregamos en el onclick el siguiente código:
En el app.js
Opción 1: function mostarAlerta(){ alert("AMO JS"); }
Opción 2: function showAlert() { alert("Yo amo JS");
}
- Al hacer clic en el botón "suma", pide 2 números y muestra el resultado de la suma en una alerta. En el index.html , agregamos en el onclick el siguiente código: En el app.js Opción 1: function sumaDosNumeros(){ let primerNumero = parseInt(prompt('Digite el primer número')); let segunNumero = parseInt(prompt('Digite el segundo número')); let resultado = primerNumero + segunNumero; alert('${primerNumero} + ${segunNumero} = ${resultado}') }
Opción 2:
function sumNumbers() {
const num1 = parseFloat(prompt("Escribe el primer número:"));
const num2 = parseFloat(prompt("Escribe el segundo número:"));
if (!isNaN(num1) && !isNaN(num2)) {
const sum = num1 + num2;
alert(El resultado de la suma es: ${sum}
);
} else {
alert("Por favor, introduce números válidos.");
}