En el desarrollo web, el orden de carga y ejecución de scripts es crucial para la interacción del usuario con la página. Tras solucionar un error común relacionado con este tema, es momento de explorar una forma más eficaz de trabajar con JavaScript y HTML, optimizando la carga del script y la selección de elementos del DOM. Acompáñame en esta exploración detallada para aplicar las mejores prácticas y profundizar en nuestro conocimiento de eventos y manipulación del DOM.
¿Cómo solucionar el error de carga de scripts en JavaScript?
Resolver el error que impide la ejecución correcta de un script debido a su posición en el archivo HTML es una tarea habitual en desarrollo web. Una manera de lograrlo es cambiando la ubicación del script de la sección de encabezado (head) al final del cuerpo (body) del documento. Pero ¿y si hubiera una manera de mantener la estructura original y aún así ejecutar el código exitosamente?
¿Hay un evento para saber cuando el HTML está cargado?
La respuesta es sí. JavaScript proporciona un evento que notifica cuando la página está completamente cargada, lo que permite ejecutar código solo después de que el HTML esté disponible en su totalidad. Este es el evento load, que se puede escuchar a través del objeto window utilizando el método addEventListener.
window.addEventListener('load',function(){// Tu código aquí se ejecutará después de que todo el HTML haya cargado});
Este método evita problemas de elementos DOM no encontrados y permite tener un control más detallado del flujo de ejecución.
¿Qué significa iniciar un juego en JavaScript?
Iniciar un juego en JavaScript implica preparar el entorno para que el usuario empiece a interactuar con los elementos de la página. Este proceso puede incluir la asignación de eventos a botones, la inicialización de variables y la carga de recursos necesarios para jugar. En nuestra solución, la función iniciarJuego juega este papel vital:
functioniniciarJuego(){// Aquí se coloca el código para iniciar el juego}
Dentro de esta función se pueden establecer los event listeners para los botones y inputs, lo que garantiza que todos los elementos interactivos del juego estén listos para usarse desde el momento en que el usuario comienza su experiencia.
¿Cómo seleccionar y validar una mascota en JavaScript?
Cuando un jugador elige una mascota en un juego, es esencial poder determinar cu��l ha sido seleccionada. Las radios de selección son un método común para esta tarea. La propiedad checked de un input de tipo radio nos indica si ese input está seleccionado:
var inputHipodoge =document.getElementById('Hipodoge');if(inputHipodoge.checked){// Hipodoge ha sido seleccionado}
A través de una serie de condicionales if y else if, podemos verificar cuál de los inputs, correspondientes a las diferentes mascotas, ha sido marcado por el jugador y reaccionar en consecuencia.
El proceso de aprendizaje y desarrollo en JavaScript es una aventura continua. Con este enfoque práctico de manejar la carga y ejecución de scripts en una página web, has dado un gran paso para convertirte en un creador eficaz de experiencias web dinámicas. Recuerda, cada error es una oportunidad para crecer y cada desafío superado es un escalón más en tu camino hacia la maestría en programación. ¡Mantén la curiosidad y la pasión por aprender!
una pregunta lo recomiendas antes de este cuerso o despues de haber pasado por este... para guiarnos... ahorita yo estoy guardando temas importantes para irlos estudiando de a poco y tener mayor conocimiento
Como dato, al hacer addEventListener no es necesario definir la función por separado. Podemos hacer esto:
document.addEventListener('click',()=>{alert("SELECCIONASTE TU MASCOTA")})
A veces será más cómodo de una forma, otras veces será más claro de la otra. Úsenlo con sabiduría
funciona de ambas formas !
Cada cosa a su tiempo, aquí ya estamos metiendo mas conceptos que pueden liar a los estudiantes novatos
Así hice la función
functionseleccionarMascotaJugador(){if(document.getElementById("hipodoge").checked==true){alert("Usted ha seleccionado hipodoge")}elseif(document.getElementById("capipepo").checked==true){alert("Usted ha seleccionado capipepo")}elseif(document.getElementById("ratigueya").checked==true){alert("Usted ha seleccionado ratigueya")}}
Excelente como dato general, no hace falta revisar que sean == true, una característica del if es que solo ingresará cuando la condición sea verdadera, por lo que se realiza una comprobación innecesaria
Yo no veo mal que pusiera la comparación porque hace que el código sea mas claro y fácil de entender so, por mi 10/10
Al inicio del html podemos utilizar defer, esto realiza que despues de cargado se ejecute el JS:
<script src="./js/main.js" defer></script>
En efecto, funciona. El "defer" indica que se va a procesar el HTML, mientras se sigue procesando el JavaScript. Continua procesando el HTML, construye el DOM y el <script> se carga en "segundo plano" y se ejecuta hasta que el DOM (o sea el HTML) ya se cargó completo
Así te puedes evitar la línea,
window.addEventListener('load', iniciarJuego)
También te permite escribir código en JavaScript suelto, que no esté dentro de una función sin ningún problema.
No se frustren, esto es un tema algo avanzado para este momento del curso, que se ve en el "Curso de asincronismo con JavaScript" que imparte el profe Oscar Barajas. Solo es "otra manera de solucionar el problema"
WOOOOW NO SABIA ESOOOOO. ESTO ES GENIAAAAL. GRACIAS!
Comparto mi avance:
functionconfirmarSeleccionJugador1(){if(document.getElementById('ajolote').checked){alert('Has seleccionado al ajolote')}elseif(document.getElementById('topo').checked){alert('Has seleccionado al topo')}elseif(document.getElementById('hormigadefuego').checked){alert('Has seleccionado a la Hormiga de fuego')}elseif(document.getElementById('komodo').checked){alert('Has seleccionado al Dragón de Komodo')}elseif(document.getElementById('tortuga').checked){alert('Has seleccionado a la tortuga')}elseif(document.getElementById('caballodemar').checked){alert('Has seleccionado al Caballo de mar')}}
Se ve bien lindo!
La tortuga no se ve demasiado fiera 🐢😂
Capaz sean mis 35 años, capaz mi síndrome del impostor, mis inseguridades o que vengo de cero realmente, pero, honestamente, por momentos siento que es chino básico lo que esta explicando el profe jaja Pongo pausa, vuelvo para atrás mil veces, hay cosas que voy entendiendo pero desde que agregamos el js se me empezó a trabar el cerebro. Si bien, copio al pie de la letra lo que hace y me funciona bien el código, la idea es que entienda lo que estoy haciendo, siento que hay algo que debí aprender antes de hacer el curso, no entiendo muchos de los usos de cada parte del archivo, hay algún curso especifico que me este perdiendo donde enseñen el significado de casa cosa en particular y porque la usamos? De todas maneras seguiré, no me va a ganar esto jaja Perdón por preguntar tonteras jaja
El curso empieza 100% desde cero. No necesitas ningún conocimiento previo para tomar este curso. Y tu edad tampoco es un impedimento.
Lo estás haciendo bien. Repetir las clases varias veces. No conformarte con que el código funcione, sino tratar de entenderlo. Así sea hace. Muy bien por eso.
Cuéntame qué partes del código no estás entendiendo bien y te ayudo.
yo tengo 17, y me siento exactamente igual:(
Lo realize usando la logica que nos dejo Freddy.
if(document.getElementById("hipodoge").checked){alert("Haz seleccionado a Hipodoge 🦭");}elseif(document.getElementById("capipepo").checked){alert("Haz seleccionado a Capipepo 🦫");}elseif(document.getElementById("ratigueya").checked){alert("Haz seleccionado a Ratigueya 🐀");}else{alert("Ninguna mascota seleccionada")}
investigando encontre otra forma de evaluar el grupo de botonos, pero no supe si es posible realizarlo desde este ambito, dejo el codigo encontrado.
No soy experto pero si use una vez el querySelector. Lo que pasa es que así como lo pusiste efectivamente estas trayendo el input con su checked === true, lo que no puedes asegurar es que sea hipodoge. Así que tendrías dos opciones o te quedas con el input checked y con otro par de líneas de código revisas cual fue el que seleccionaron o sigues con la misma lógica(del if) pero en lugar de traerte name="mascota"(todos los inputs) te traes #hipodoge(asi traes tu input con id ="hipodoge"). Espero haberte ayudado, lo que aprendi lo aprendi probando el querySelector así que igual no sobra experimentar :3.
Vuelvo luego de probar y resulta que con esa sola linea de codigo ya sabes y puedes decirle al usuario a quien escogió:
let seleccionada =document.querySelector('input[name="inv"]:checked').id;console.log(seleccionada);//Hipodoge (te devolvera el id del input seleccionado)alert("seleccionaste a: "+ seleccionada);
Yo lo hice así
Quedó bastante bien :) Aunque, no es necesario que compares si la variable es "true"
(mascotaCapipepo ==true)
Porque entrará al if solo si es "true", puedes quitar la comparación y te funcionaría perfecto.
:)
Me costo bastante pero encontré como meterlo todo en una función en vez de usar varios alert💚💚
Asombroso, lo has hecho como en el ejercicio anteior
Te felicito por tu solución!
Con el atributo checked pueden seleccionar un personaje por defecto al iniciar la carga de la página, así:
GRAN APORTE GRACIAS, lo voy a utilizar para dejar por defecto una mascota seleccionada y que no cometan el error de no seleccionar ninguna y darle al boton
Jesus Velasco, creo que lo mejor será agregar al final de la comprobación un else en caso de que no se haya seleccionado nada e informarlo al usuario, ya que seleccionar por default una mascota siento que puede ser algo intrusivo.
En este caso es solo un juego pero en sistemas ya comerciales tengo entendido que hay ciertos detalles que la ley marca que no puedes seleccionarlo por default y debes dejar que sea el usuario el que lo haga, por lo que creo que eso entraría como una buena practica "Obligatoria" jajajajaja
Como ejemplo recuerdo que se encuentra dentro de eso los checkbox para que cuando un usuario se da de alta en una página acepte o no recibir información y/o publicidad respecto a dicha página, esos checkbox no puedes estar seleccionados por default, es el usuario quien debe hacerlo sino te meten una buena multa
decidí guardar las macotas en un array para acceder a ellos con un for, trate de optimizar el codigo para que no sea repetitivo
Nice! tmb use las 6 mascotas y se me hizo mucho "else if"
Pero aún no hemos visto nada de arrays :(
Debo de aceptar que los últimos dos vídeos no me habían querido dar los códigos, y estaba frustrada, pero es bueno siempre tener la opción de preguntas en el panel, porque ya hay muchas respuestas solucionadas allí, lo cuál hace que uno busque y busque, y busque hasta encontrar el posible error…No ha sido del todo fácil pero debo de aceptar que la satisfacción cuando van saliendo las cosas como debe ser es inigualable. Así que esto para expresar que me siento muy feliz de estar aprendiendo aquí con todos ustedes, gracias. 💛
Le importa a JavaScript si son comillas simples o dobles?
SI!
Podemos usar cualquiera de las dos. Pero si usamos una, deberíamos seguir usándola "siempre" dentro del mismo proyecto. A mí en particular me gusta mucho usar comillas dobles en HTML y comillas simples en JavaScript, pero nomás es por cuestión de gustos. :D
Así resolví el código. Hasta ahora desconozco si es válido declarar una variable con un valor de cero, como lo hice en el código, para luego ser sustituido por la selección de la mascota.
Puedes ponerla a cero, así la declaras e inicializas.
Gracias, Edu!✌🏼
me encanta programar
Aunque dé dolores de cabeza jajaja
No tenia idea del "checked"!! Muy buena.
Y todos los tips que quedan por aprender.
Yo solo nombre a las mascotas por Numero y le agregue un While para reducir el codigo:
ESTA FUE MI SOLUCIÓN
sorprendente lo solucione antes de ver la lógica algo anda bien por acá
Muchachos, igual lo más importante aquí es encomendarnos a los dioses del internet porque ajá...🤣
