Buenas tardes Compañeros.
A continuacion presento la forma en la que desarrolle los ejercicios propuestos:
Primero voy a colocar los nombres de las funciones que utilice en el Documento HTML:
<button onclick="btnConsole();" class="button">Console</button>
<button onclick="iLoveJs();" class="button">Alert</button>
<button onclick="ciudadBrasil();" class="button">Prompt</button>
<button onclick="suma();" class="button">Suma</button>
Ahora el desarrollo de los ejercicios en Javascript
2. Cambia el contenido de la etiqueta h1 con document.querySelector y asigna el siguiente texto: "Hora del Desafío".
document.querySelector('h1').innerText = 'Hora del Desafío';
3. Crea una función que muestre en la consola el mensaje "El botón fue clicado" siempre que se presione el botón "Console".
Estuve investigando y hay principalmente tres formas de definir funciones en Javascript, cada una con sus evntajas y casos de uso. Ademas de las funciones propuestas en la clase, hay Function Expressions y Arrow Functions, a continuacion presento la forma en que cada una de ellas puede ser escrita para el ejercicio.
function btnConsole(){
console.log('El botón fue clicado');
}
/*-------- Forma Function Expression---------------
const btnConsole = function(){
console.log('El botón fue clicado');
}
------------------Forma Arrow Function---------------
const btnConsole = () => console.log('El botón fue clicado') ;*/
4. 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".
function ciudadBrasil(){
let ciudad = prompt('Indica el nombre de una ciudad de Brasil Por favor');
alert(`Estuve en ${ciudad} y me acordé de ti`);
}
/* ---------------- Forma Function Expression ----------------
const ciudadBrasil = function(){
let ciudad = prompt('Indica el nombre de una ciudad de Brasil Por favor');
alert(`Estuve en ${ciudad} y me acordé de ti`);
}
------------------Forma Arrow Function---------------
const ciudadBrasil = () => {
let ciudad = prompt('Indica el nombre de una ciudad de Brasil Por favor');
alert(`Estuve en ${ciudad} 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".
function iLoveJs(){
alert('Yo amo JS');
}
/*---------------- Forma Function Expression ----------------
const iLoveJs = function(){
alert('Yo amo JS');
}
------------------Forma Arrow Function---------------
const iLoveJs = () => alert('Yo amo Jupiter JS');*/
6. Al hacer clic en el botón "suma", pide 2 números y muestra el resultado de la suma en una alerta.
En esta Funcion añadi una validacion de datos que me permita comprobar si el usuario a digitado numeros para realizar la operacion de suma.
function suma(){
let numero1 = prompt('Por favor ingresa el primer numero');
let numero2 = prompt('Por favor ingresa el segundo numero');
if (isNaN(Number(numero1)) || numero1 === '' || isNaN(Number(numero2)) || numero2 === ''){
alert('Los datos ingresado no son validos, Por favor intentelo de Nuevo');
return null;
}
numero1 = Number(numero1);
numero2 = Number(numero2);
alert(`La suma entre ${numero1} y ${numero2} es: ${numero1 + numero2}`);
}