El profe Juan David Castro, explica MUY BIEN. Tanto, que me divierto mucho aprendiendo con él. 😃
Fundamentos de Programación
Programación Básica: Fundamentos y Creación de Proyectos en Línea
Programación Básica en Google Chrome: Variables y Funciones
Creación de una Página Web Básica con HTML
Estructura Básica de un Documento HTML
Estructura y funcionamiento básico de HTML y JavaScript
Instalación y uso básico de Visual Studio Code para programar
Declaración y Uso Básico de Variables en JavaScript
Programación de Piedra, Papel o Tijera en JavaScript
Programación de Piedra, Papel o Tijera en JavaScript
Generación de Números Aleatorios con JavaScript
Creación y uso de funciones en programación
Ciclos y Condiciones en Programación: Piedra, Papel o Tijera
Programación de un Juego de Piedra, Papel o Tijera en JavaScript
Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web
Manipulación del DOM y Eventos en JavaScript para Juegos Web
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación de Páginas Web para Videojuegos en HTML
Selección de Mascotas en HTML para Juegos Interactivos
Programar eventos de clic en botones HTML con JavaScript
Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota
Selección de Mascota en JavaScript: Implementación y Validación
Manipulación del DOM con JavaScript para mostrar mascota seleccionada
Selección Aleatoria de Mascota Enemiga en JavaScript
Eventos de clic y lógica de ataque en JavaScript
Ataques Aleatorios para Mascotas Enemigas en JavaScript
Creación de Mensajes Dinámicos en Combate HTML y JavaScript
Lógica de Combate en JavaScript para Juego Mokepon
Operadores Lógicos en Programación: AND, OR y NOT
Actualización de Vidas en Juego de Combate con JavaScript
Validación de Vidas y Mensajes Finales en Juegos
Funcionalidad de Reinicio y Desactivación de Botones en Juego
Mostrar y ocultar secciones en HTML con JavaScript
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Estilos CSS: Selectores, Propiedades y Valores
Tipos de Visualización en CSS: Display Block, Inline e Inline Block
Alineación de Elementos con Flexbox en CSS
Modelo de Caja en CSS: Espaciado y Bordes
Diseño y Estilo de Páginas Web con HTML y CSS
Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas
Estilos CSS para Mejorar la Interfaz de un Juego
Estilizado de Pantallas de Juego con CSS y Flexbox
Separación de mensajes y estilos en JavaScript y HTML
CSS Grid: Organiza Elementos en Rejillas Bidimensionales
Diseño Responsivo con CSS: Media Queries y Flexbox
Pseudoclases en CSS: Mejora la Interacción del Usuario
Quiz: Estilos con CSS
Optimización de código
Optimización de Código JavaScript con Clases y Objetos
Optimización de Código JavaScript: Variables y Funciones
Clases y Objetos: Fundamentos para Optimizar Juegos
Construcción de Clases y Objetos en JavaScript
Uso de Arreglos para Almacenar Objetos en JavaScript
Agregar ataques a objetos en JavaScript
Renderizado Dinámico de Objetos en HTML con JavaScript
Solución de errores en variables y elementos HTML en JavaScript
Uso de Objetos para Centralizar Información en JavaScript
Selección de Mascota Aleatoria en JavaScript
Iteración de Arreglos y Manipulación DOM en JavaScript
Crear Función "mostrarAtaques" en JavaScript para Juegos
Eventos de Clic en Botones con JavaScript
Secuencia de Ataques y Validación de Resultados en JavaScript
Implementación de lógica de combate en juegos JavaScript
Programación de Juegos: Lógica de Ataques y Victorias
Optimización y Corrección de Errores en Juegos Web con JavaScript
Quiz: Optimización de código
Mapa con canvas
Dibujo y manejo de gráficos en Canvas con JavaScript
Movimiento de Capipepo en Canvas con HTML y JavaScript
Movimiento Continuo de Personajes en Canvas con JavaScript
Eventos de Teclado para Controlar Personajes en Juegos
Pintar Fondos y Personajes en Canvas HTML
Métodos de Clases en JavaScript para Juegos Interactivos
Detección de Colisiones en Videojuegos con JavaScript
Programación de eventos y colisiones en un juego interactivo
Ajuste Responsivo de Mapas en Pantallas con JavaScript
Estilos Responsivos en HTML y CSS para Mapas Interactivos
Quiz: Mapa con canvas
Backend: videojuego multijugador
Desarrollo de Juegos Multijugador con Cliente-Servidor y API
Instalación de Node.js en Windows para desarrollo backend
Uso básico de la terminal de comandos y Node.js
Creación de un Servidor Básico con Express.js en Node.js
Conceptos Clave de URIs y Verbos HTTP en Node.js
Desarrollo de API con Node.js y Comunicación Frontend-Backend
Selección de Mokepon y Comunicación JSON en Express.js
Implementación de un Endpoint para Coordenadas de Jugadores en Node.js
Integración de Coordenadas de Jugadores en Mokepon Multijugador
Optimización de Coordenadas en Videojuegos con JavaScript
Batalla Final en Mokepon: Implementación de Colisiones y Back-End
Implementación de Ataques en Tiempo Real para Videojuego Mokepon
Quiz: Backend: videojuego multijugador
Próximos pasos
Corrección de errores en juego multijugador con Node.js
Desarrollo Colaborativo con Git y GitHub para Programadores
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 346
Preguntas 227
El profe Juan David Castro, explica MUY BIEN. Tanto, que me divierto mucho aprendiendo con él. 😃
Eventos que podemos escuchar con:
addEventListener("")
Otra forma de evitar que cargue JavaScript antes de que un elemento exista y nos de el error que se explica en el minuto 13:50 más o menos es el atributo “defer”
Ej:
<script defer src='./codigo.js'></script>
Es basicamente decirle al html algo como: "Oye, html"
HTML: “Dime, oh gran programador”.
Tú: "Aquí hay código en JavaScript que necesitamos ejecutar, pero necesito que primero cargues todos los elementos de html para que no haya problemas y cuando termines carga el JavaScript"
HTML: "Ok, dale 👍 "
Y así nos evitamos que JavaScript diga: “Necesito trabajar con un elemento que aún no existe”
Esto es tan útil que herramientas como Webpack al compiar TODO el proyecto lo hacen por default sin que nos enteremos 😁
El profe Juan cuando el alert no se ejecutaba al oprimir el botón:
Asi se llaman los tipos de nombramientos de variables:
🐪 camelCase
🧮 PascalCase
🐍 snake_case
🍢 kebab-case
document.getElementById=
Busca en HTML un elemento que se reconoce mediante su ID
.addEventListener =
- Es un método.
- Llamamos a su función mediante los paréntesis.
- Decidir que evento queremos darle, en esta clase es el evento 'click'
- Para decirle a JS que hacer cuando se le hace click debemos
1. Poner una coma para separar un argumento de otro.
2. Poner un nombre, en este caso es
"seleccionarMascotaJugador" (nombre de la función que queremos ejecutar)
¿Qué otros aportes podemos dar?
El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento)
Una manera mas rápida de crear los ficheros:
Se escribe la ruta antes de que exista el archivo, luego se hace Ctrl+Click sobre dicha ruta, luego les saldrá una alerta para que el mismo Visual Studio crea la carpeta y el archivo correspondiente
<script src="./js/mokepon.js"></script>
En Visual Studio Code pueden generar una nueva carpeta, usando el siguiente botón.
Lograron hacer que el aprender programación sea divertido. Me está gustando mucho este curso básico.
Juan David explica tan bien, que hasta mis 2 hijos están aprendiendo conmigo 😀
al profe Freddy me da ganas de saludarlo con un apreton de manos, pero a ti te quiero dar un abrazo jajajaj Buenisimo el como explicas Juan.
Como Web-Devs La MDN será una de las fuentes de información más confiables y que más usaremos y como es de esperar hay unas sección dedicada a Eventos
funciona siuuuuuuuuu
como odio las fallas en las letras jajajjajaja
Profe confieso que estaba desmotivada al saber de Freddy ya no seguía el curso, pero usted me ha parecido un excelente profesional, supero mis expectativas, explica al detalle, he aprendido mucho con usted. Muchas gracias
yo le cambie el nombre a los personajes
otra forma que también es simple es agregar una especie de atributo a la etiqueta “script” justo después del source que es “defer” esto cumple la misma función que poner lo al final de las etiquetas y que usar el eventListener onload que creo que es lo que va a hacer
ejemplo :
<script src="./scripts/mokepon.js" defer></script>
Me di cuenta de que a todos los que no les sale el alert, es porque lo estamos escribiendo mal. Me asuste cuando no me salio igual que a Juan DC, mi error fue que escribi:
<script>src="./js/probendingarena.js"</script>
En lugar de escribir:
<script src="./js/probendingarena.js"></script>
Que si era lo correcto. Se debe poner el src y la ruta dentro de los primeros signos de mayor y menor que o no me funcionaba.
No soy de escribir mucho ya que estoy aprendiendo recién.
Pero estoy muy feliz con este curso, estoy aprendiendo muchísimo de una buena vez ya que hace mucho quería aprender programación.
Amo la computación desde que soy un niño y esto era una tarea pendiente así que heme aquí. Aprendiendo. Gracias Chicos de Platzi y gracias Juan!
Hace unos días terminé el curso de programación basica anterior y Freddy colocaba el script en el body, al comenzar este curso pensé: Freddy ahora coloca el script en el head, y ahora Juan David explica por qué debe ir en el body,
FREDDY…
Buen profesor! Muy enérgico , contagia mucho!
Se nota mucho que le gusta enseñar 👍👌
El atributo** defer **indica al navegador que no espere por el script. En lugar de ello, debe seguir procesando el HTML, construir el DOM. El script carga “en segundo plano” y se ejecuta cuando el DOM está completo.
 halando conceptos desde un sistema completo y nos vas soltando cada tema desde esa gran biblioteca que es el código en sus diferentes estructuras, siento cada día mas interesante la programación y sus utilidades, siento que me es útil hasta para vivir diario, excelente profe!
Les dejo un aporte muy bueno sobre los atributos _defer _y async en la etiqueta <script> de HTML:
Um de los mejores profesores, excelente gracias profe Juan
Por momentos no entiendo la clase sinceramente. siento que capto pero que a la vez no. Seguiré intentando hasta lograr comprender, no quiero darme por vencida.
Espero que todos los que estén iniciando sigan avanzando hasta lograr sus objetivos.
A pesar de que se me a complicado entender un poco sigo aquí emocionada por aprender.
Me encanto esta clase!!!
Para los que tengan problemas con el script de que no les sale el Hola mundo del alert, fijense si en el script esta asi:
<script src=“mokepon.js”></script>
por que yo lo tenia asi y me daba error:
<script> src=“mokepon.js”</script>
JAJAJAJAJA Juan David Siempre Parece Jugando Cón Él Cdigo , Uno es todo emocionado
explicas muy bien, me motiva escucharte … gracias profe
Vamos bien
function confirmarSeleccionJugador1() {
alert('Has seleccionado tu Mokepon')
}
let botonSeleccionJugador1 = document.getElementById('boton-seleccion-jugador1')
botonSeleccionJugador1.addEventListener('click', confirmarSeleccionJugador1)
esto me esta gustando
COMENTARIOS EN HTML
Usar <!-- -->
Hasta ahora con lo poco de css resulta así:
cualquier compañero o docente que me corrija los errores.
aquí el código.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MOKEPON</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="pagina">
<h1>MOKEPON 🔥💦🌵</h1>
<section id="seleccionarMascota" >
<h2>Elige tu mascota:</h2>
<label for="Hipodoge">Hipodoge</label>
<input type="radio" name="Mascota" id="Hipodoge">
<label for="Capipepo">Capipepo</label>
<input type="radio" name="Mascota" id="Capipepo">
<label for="Ratiguella">Ratiguella</label>
<input type="radio" name="Mascota" id="Ratiguella">
<br>
<button class="mascotaSelection">seleccionar</button>
</section>
<section id="seleccionarAtaque">
<p>Tu mascota tiene <span>3</span> vidas</p>
<p>la mascota del enemigo tiene 3 vidas</p>
<P>
<button class="ButFuego">Fuego 🔥</button>
<button class="ButAgua">Agua 💦</button>
<button class="ButTierra">Tierra 🌵</button>
</P>
</section>
<section id="mensajes">
<p>Tu mascota atacó cn FUEGO, la mascota del enemigo ataco con Tierra - Ganaste 😎</p>
</section>
<section class="Reiniciar" id="Reiniciar">
<button>Reiniciar</button>
</section>
</body>
</html>
css
html{
font-size: 62.5%;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.pagina{
background-color: rgb(146, 79, 209);
width: 100%;
height: 100%;
padding: 40rem;
border: solid rgb(254, 245, 75) 7px;
}
h1{
color: chocolate;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 40px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 20px;
text-align: center;
}
#seleccionarMascota, .mascotaSelection{
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 20px;
text-align: center;
}
.mascotaSelection{
background: rgb(164, 164, 233);
width: 20.33%;
height: 50.33px;
border-radius: 12px;
}
.mascotaSelection:hover {
color: rgb(255, 255, 255);
}
.mascotaSelection:active{
color: rgb(12, 126, 226);
}
#seleccionarAtaque{
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 20px;
}
.ButFuego, .ButAgua, .ButTierra{
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
width: 10.33%;
height: 50.33px;
border-radius: 12px;
}
.ButFuego{
background-color: rgb(254, 245, 75);
}
.ButAgua {
background-color: rgb(24, 124, 152);
}
.ButTierra {
background-color: rgb(64, 52, 20);
}
#mensajes{
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 20px;
}
.Reiniciar{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 20px;
text-align: center;
}
Gracias por la pasion Juan !
Ojalá mis profes de la U explicaran como el Profe Juan David Castro ❤️
Excelente clase profe, gracias por hacerlo tan platzi
Hola a todos! si están teniendo problemas con la src que no se vincula, les recomiendo hacer la carpeta directamente desde la aplicación sobre el lado izquierdo. Luego borran todo el script y vuelvan a comenzar. A mi me lo tomó una vez el script src lo usé de manera sugerida por el editor, en vez de escribirlo manual (seguramente tendría algún error que no me daba cuenta) ponen el ./ y ya les aparece la ruta automaticamente. Solo deben precionarla y listo.
espero ayude a alguien. saludos!
Hola todos, soy nuevo en el mundo de la programacion espero poder ser un muy buen programador: le di un poco de formato a la pagina, desconozco si mas adelante se podra dar formato a la pagina, comparto el codigo.
(tambien le agregue algunos mokepones mas).
<section id = "seleccionar-Monstruo">
<h2>Elige tu mostruo:</h2>
<label for="crocodile">Crocodile</label>
<input type="radio" name="Monstruo" id="crocodile"/>
<br><label for="raticuqui ">Raticuqui</label>
<input type= "radio" name="Monstruo" id="raticuqui"/></br>
<label for="hipofilio">Hipofilio</label>
<input type= "radio" name="Monstruo" id="hipofilio"/>
<br><label for="langostelos">Langostelos</label>
<input type= "radio" name="Monstruo" id="langostelos"/></br>
<label for="eoloticus">eoloticus</label>
<input type= "radio" name="Monstruo" id="eoloticus"/>
<br><label for="tucapalma">Tucapalma</label>
<input type= "radio" name="Monstruo" id="tucapalma"/></br>
<label for="pydos">Pydos</label>
<input type= "radio" name="Monstruo" id="pydos"/>
<p> <strong>Crocodile -> Agua</strong>
<br><strong>Raticuqui -> Fuego</strong></br>
<strong>Hipofilio -> Tierra</strong>
<br><strong>Langostelos -> Agua y Fuego</strong></br>
<strong>Eoloticus -> Aire</strong>
<br><strong>Tucapalma -> Agua y Tierra</strong></br>
<strong>Pydos -> Fuergo y Tierra</strong>
<br></br>
<br><button>Elegir ☯</button></br>
</section>
agradezco la vibra y entusiasmo que nos transmites para querer seguir aprendiendo
Excelente clase profe, explica tan bien que divierte y siento que aprendo, excelente manera de enseñar!!
Estaba complicada para hacer los comentarios
Para html es <!–Comentario —>
Para Java Script es // Comentario
y dentro de la etiqueta <script > </script> todo se interpreta como Java Script
Esta muy bacán el curso !
Asignando el mismo valor en el atributo id de los inputs y el atributo for de sus labels correspondientes.
que buena clase y cuantas cosas que tengo que aprender
que buen profesor, no lo conocia y me ha gustado mucho como enseña, he aprendido muy rapido estas clases, gracias, tomare mas cursos de el,
me funciono siiiiiiiuuuuuu!!!
no me muestra el error pero el boton no hace nada
Que onda Juanda que te dieron hahahaha.
Llegue a ver tus primeras clases y digamos que a diferencias de estas… haz mejorado un monton.
Te felicito y muchas gracias por transmitir tus conocimientos.
Para los que no les sale el <alert>
a mi también me paso lo mismo tarde como una hora y nada fue frustrante, fue que había escrito <scrip> en ves de <script>
otra persona tuvo que ver y vio el error ortográfico a veces es importante llevar curso de ingles
`así debí de escribir ``
<script src="./js/mokepon.js"></script>
ahí recién se ejecuto el botón
alert(“Hola, mundo JS”)
En JS vi que aveces se usa las comillas simples(’ ') y otras las doble comillas(" "), cual es la diferencias?
buttonPetPlayer.addEventListener('click')
En JavaScript usamos camelCase para colocar los nombres a las variables, funciones, etc.
Y esta es otra forma de colocar la funcion dentro del addEventListener():
let botonMascota = document.getElementById("btn-mascota");
botonMascota.addEventListener("click", function() {
alert("seleccionaste mascota")
})
<script src ="./js/mokepon.js">
src = “.” El punto(.) quiere decir que el archivo que vamos a utilizar esta en la misma carpeta que nuestro archivo HTML
Muy buena clase, hoy aprendí que:
.
Una de las formas de solucionar un error en nuestro código es apoyarnos de la consola del navegador.
.
document.getElementById, nos sirve para buscar elementos en html haciendo referencia al id
.
En js no se separan los nombre por guion medio o bajo, lo que se hace es que a partir de la segunda palabra se comienza con mayúscula, ejemplo let botonMascota.
.
También podemos hacer en js que escuche un evento.
.
Muchas gracias profe
Una opción que es compatible tanto para los Id y las Clases, es querySelector
ejemplo en ambos casos:
//ID
let botonMacotaJugador = document.querySelector('#boton-mascota');
//CLASE
let botonMacotaJugador = document.querySelector('.boton-mascota');
Así es como se aprende muchachos, haciendo. Después, se va puliendo con la conceptualización
Llamado del .js en el head o body
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOKEPON</title>
<script src="./javascript/mokepon.js" defer></script>
</head>
Para llamar el js de tu html para que establezca funciones, para que tome debes ponerle defer para que carge en todo el archivo y se puedan reconocer los elementos del html, ya que si no se pone el defer el .js no reconocera el los elementos dentro del body del html
Otra forma sin el defer es poner el script del .js al finalizar el body, así el .js leerá los elementos que están en el html.
Un consejo que me ha servido mucho es que cuando tú tengas un error tanto revises desde el visual estudio code como revises desde el navegador, así verás por que no llega a ejecutar tales funciones
Voy a aprender a manejar mi frustración aprendiendo a programar
Super bueno lo de encontrar errores. Excelente forma de enseñar.
ese error me sale profe
¡Gracias por la clase!
Esa energía y emoción que transmite al momento de explicar cada tema, hace que uno empiece amar programar con todas las fuerzas!
La etiqueta script debe ir ubicada en el final del body del html, y accede al archivo de javascript mediante el atributo src, ya sea mediante ruta absoluta o relativa, generalmente es relativa porque es buena práctica trabajar con los archivos de un mismo proyecto en el mismo directorio o carpeta.
<script src="js/mokemon.js"></script>
Para recibir datos del usuario y manipularlos en js se utiliza el atributo id y se llama en js ya sea guardándolo en una variable, para por ejemplo reconocer cuando un usuario le da click a un botón primero le ponemos el atributo id dentro de esa etiqueta button <button id=”elBoton”>, luego en js llamamos a elBoton mediante la función document.getElementById(’elBoton’) podemos guardarlo en una variable:
let elBoton = **document.getElementById('elBoton')**
document es una parte que específica que vamos a tratar con elementos del documento HTML, es un objeto, un objeto tiene métodos y el método que usamos es getElementById, que va después del . y este método tiene un parámetro que es el id entre comillas, como vemos, los parámetros es algo de las funciones y getElementById que es un método tiene parámetros, entonces podemos concluir que getElementById es una función, esto se ve más adelante
Ya que tenemos un elemento html que es el botón, guardado en una variable de js mediante su id, podemos realizar una acción al momento de que el usuario interactúe con ese elemento html, en este caso un botón al darle click, esta acción se logra mediante addEventListener y funciona así
let elBoton = **document.getElementById('elBoton')**
elBoton.addEventListener('click', funcionBoton)
Cómo vemos tiene parámetros, lo que indica que es una función o también un método porque va después del . y dentro de los parámetros va la acción en este caso click dentro de comillas, y la función que va a ejecutar, en este caso es funcionBoton, que hay que declararla y crear las sentencias pertinentes para nuestro programa.
function funcionBoton(){
alert("Me dieron click)
}
Para rutas relativas puede especificarse si el archivo al cual se desea linkear está en el mismo lugar agregando ./ al inicio de la ruta.
ESTILOS DE ESCRITURA EN PROGRAMACIÓN
Estilo Pascal (PascalCase)
La primera letra del identificador y la primera letra de las siguientes palabras concatenadas están en mayúsculas. El estilo de mayúsculas y minúsculas Pascal se puede utilizar en identificadores de tres o más caracteres, por ejemplo:
ImageSprite
Estilo camelCase
La primera letra del identificador está en minúscula y la primera letra de las siguientes palabras concatenadas en mayúscula, por ejemplo:
imageSprite
Estilo Mayúsculas (ALL_CAPS)
Todas las letras del identificador se encuentran en mayúsculas. Por ejemplo:
IO
Estilo minúsculas (small_caps)
Todas las letras del identificador se encuentran en minúsculas. Por ejemplo:
system
https://app.wumbox.com/explore/library/resource/PonNfVaoe9Dj6Fqd4a6e este es un programa que jugaba de chiquita
Llevaba 1 hora sufriendo porque no me funcionaba lo que había creado en js y resulta que no estaba invocandolo en html 😒
La lógica de programación te abre la mente y la manera de entender como funciona las TIC de una manera indescriptible. Todo el que trabaje en en la industria debería aprender lo básico.
Un pequeño aporte de como se debe selecionar el archivo para los que tienen linux.
<script src=“js/mokepon.js”></script>
alert("Hola Mundo")
// creacion de la funcion seleccionar mascota
function inicialJuego(){
let botonMascotaJugador = document.getElementById("boton-mascota")
botonMascotaJugador.addEventListener("click" , seleccionarMascotaJugador)
}
function seleccionarMascotaJugador(){
let hipodoge = document.getElementById("hipodoge")
let = capipepo = document.getElementById("capipepo")
let = ratatigueta = document.getElementById("ratatigueta")
if (hipodoge.checked){
alert("Selecionaste hipodoge")
}
else if(capipepo.checked){
alert("Seleccionaste a capipepo")
}
else if(ratatigueta.checked){
alert("Seleccionaste a ratatigueta")
}
}
window.addEventListener("load", inicialJuego)
te quiero mucho profe juan,excelentes clases ❤️
Excelente el id para hacer match entre elementos
En js las variables de escriben con un estilo camelCase
let
es diferente a var
, son muy parecidas pero let
limita su scoope al bloque y var
no.
Relaciónar variable con elemento:
let nombreVarElemento = document.getElementById('nombre-elemento')
let botonMascotaJugador = document.getElementById('boton-mascota')
Ahora podemos escuchar
los eventos que produzcan nuestos botones. El pimer parametro es el evento
que queremos escuchar y el segundo lo que queremos que haga.
botonMascotaJugador.addEventListener('click',seleccionarMascotaJugador)
El segundo parametro es una función
function seleccionarMascotaJugador(){
alert('SELECCIONASTE TU MASCOTA')
}
Lo mejor es poner el vinculo al script de js al final del documento porque deben cargar el html y los estilos antes.
Tengo que decir que me divierte mucho como explica este profe, tanto sus gestos como sus formas de expresarse, hace sentir que es alguien que realmente le encanta lo que hace y por ello hasta una sonrisa llega a sacar a uno
Es increible la forma en que explica el profe Juan Davis, asi la verdad motiva mucho para programar sin ninguna dificultad. Espero que esto me ayude mucho a comprender los lenguajes de programacion de FrontEnd. Les tenia miedo al principio por mucho codigo. Ahora con Freddy y este profe, la verdad ya me esta gustando la forma en que podria aplicarlo.
A MI en el javascipt me occurio un error pero del en ves de poner
./js/.mokepon.js puse .js/.mokepon.js
tambien se puede con mokepon.js y ya
pero tiene que poner así`
<script src="./mokepon.js"></script>
</body>
</html>
que sujeto maravilloso juan david. ily ❤️
El profe Juan David es crack!!
Hasta ahora las clases se ponen mejores
Siempre me parecio tan dificil y muy complicado que decia demonios es imposible, sin embargo lo haces tan facil de entender que gracias!!! nuevas herramientas adquiridas
3:12 Peligro
No coloques los scripts que dependen del HTML en el head. Colocalos hasta abajo dentro del body, para que se cargue primero el HTML y luego se ejecute el código que necesitan de el
Excelente explicación, nos lleva por todo el proceso de creación y búsqueda de errores para aprender haciendo.
Estoy aprendiendo desde el visual studio en mi teléfono. Pero no me deja crear archivo js. Se me cierra la app cuando intento crearla. Alguien a igual ?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?