Excelente la actitud del profe, explica muy bien, me gustan las onomatopeyas XD
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 276
Preguntas 86
Excelente la actitud del profe, explica muy bien, me gustan las onomatopeyas XD
Es impresionante el proyecto que se creará en el curso y totalmente gratis, muy orgulloso de Platzi
RESUMEN
Para alterar el texto que tenemos en nuestro HTML (o manipular el DOM como se dice técnicamente), se puede usar innerHTML.
Con la etiqueta <span id=""> en el html, indicamos que este texto va a ser manipulado dinámicamente, asi que obtenemos su id como hemos hecho en clases anteriores y guardamos el elemento en una variable, asi esta variable la podemos editar y reemplazar por el texto que queramos.
El profe Mike Wheeler es muy entretenido, muchas gracias Platzi!
Juan hace amar JavaScript, ese amor por enseñar se necesita en todos lados, así habría excelentes profesionales en todas las áreas.
Volviendo a Platzi después de mucho tiempo 💪🏼
Adoro estas clases online donde puedo repetir toda la clase y el profesor no se cansa xd
Asi como pueden usar .innerHTML tambien pueden usar .textContent e .innerText
📌Metodo para manipulación de DOM (JS)
.
Podemos cambiar el contenido html con javascript, hay varios metodos pero vamos a ver el Element.innerHTML
Primero, meter el contenido html dentro de la etiqueta span: <span> </span>
.
❗ Definición: (span - abarcar) Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.
❗ Sus etiquetas son: <span> y </span> (ambas obligatorias).
❗ Está definido como: Elemento especial, y por lo tanto en línea.
❗ Crea una caja: En línea.
❗ Puede contener: Texto, y/o Elementos en línea.
📍 Para saber sus atributos, leer esta fuente: https://developer.mozilla.org/es/docs/Web/HTML/Element/span
.
Una vez todo el contenido html (palabra o frase) que queremos dinámicamente cambiar con javascript está dentro de la etiqueta span y tiene su atributo ID, vamos al código de javascript:
Llamamos ese ID con un document.getElementById(" “) y lo ponemos dentro de una variable.
Y podemos modificar su contenido así:
.
let variableX = document.getElementById(” ")
variableX.innerHTML = " "
.
Espero y les sirva de algo 💚
Muy buena clase, la verdad estoy aprendiendo mucho y el animo del profe es una genialidad. Transmite esas ganas de aprender
Apenas estoy iniciando el mundo de la programación y me hace feliz encontrar este tipo de profesores, me hacen sentir que lo estoy logrando y puedo llegar mucho más allá, me contagia su emoción 😁
Así quedo, reutilice las variables que teniamos declaradas y con el metodo id se obtiene el nombre de cada mascota.
Hello Students, Hi Juanchooo Tomé la decisión de dejar las alertas y adicionar el <span> también dentro de mí " _if _ ".
La programación se debe hacer con humor y paciencia, considero que las alertas dan esa milla extra y hace más happy el juego de Mokepon. Espero os guste 😃
¡Que nivel de profesor! Motivado directo a la siguiente clase.
sinceramente es lo mas duro a lo que me he enfrentado en mi vida pero que buen profe gracias de a poquito ahi vamos con fe
Esta fue la manera en que lo hice.
function seleccionarMascotaJugador() {
let spanMascotaJugador = document.getElementById("mascota-jugador")
if(document.getElementById("hipodoge").checked){
alert("seleccionaste a Hipodoge")
spanMascotaJugador.innerHTML = "Hipodoge"
}else if (document.getElementById("capipego").checked){
alert("seleccionaste a capipego")
spanMascotaJugador.innerHTML = "capipego"
}else if (document.getElementById("ratigueya").checked){
alert("seleccionaste a ratigueya")
spanMascotaJugador.innerHTML = "ratigueya"
}else{
alert("SELECCIONA UNA MASCOTA")
}
El audio sigue bajo, no es problema de tus bocinas/audifonos
Hasta ahorita se me ocurrio ir subiendo todo mi proyecto a un repositorio de Github.
y POOOM me quedó claro! 🔥
A veces tardo hasta 4 horas en empezar a ver los videos de algo que en efecto es simple y bien explicado porqué cuando estaba en la universidad cursando Ciencias de la Computación, estos temas se consideraban triviales cuando no lo son, por lo que mi percepción se volvió en mi contra, haciendomé sentir un impostor cuando no sabía algo que nunca me enseñaron
DIFERENCIA DE INNERHTML E INNERTEXT
-Con innerHTML se puede agregar etiquetas dentro de la etiqueta seleccionada, incluso si no están específicamente escritas en el código HTML.
-Con innerText solo se puede agregar una cadena de texto, incluso si agregas etiquetas, se mostraran como texto en el navegador.
Excelente profesor, realmente una gran dinámica 👏👏👏
Esta clase vale ORO!
¡Excelente profesor!
Excelente, seguimos avanzando
function confirmarSeleccionJugador1() {
let seleccionAjolote = document.getElementById('ajolote')
let seleccionTopo = document.getElementById('topo')
let seleccionHormigaDeFuego = document.getElementById('hormigadefuego')
let seleccionKomodo = document.getElementById('komodo')
let seleccionTortuga = document.getElementById('tortuga')
let seleccionCaballoDeMar = document.getElementById('caballodemar')
let spanMokeponJugador1 = document.getElementById('mokepon-jugador1')
if(seleccionAjolote.checked) {
alert('Has seleccionado al ajolote')
spanMokeponJugador1.innerHTML = 'AJOLOTE'
} else if(seleccionTopo.checked) {
alert('Has seleccionado al topo')
spanMokeponJugador1.innerHTML = 'TOPO'
} else if(seleccionHormigaDeFuego.checked) {
alert('Has seleccionado a la Hormiga de fuego')
spanMokeponJugador1.innerHTML = 'HORMIGA DE FUEGO'
} else if(seleccionKomodo.checked) {
alert('Has seleccionado al Dragón de Komodo')
spanMokeponJugador1.innerHTML = 'DRAGON DE KOMODO'
} else if(seleccionTortuga.checked) {
alert('Has seleccionado a la tortuga')
spanMokeponJugador1.innerHTML = 'TORTUGA'
} else if(seleccionCaballoDeMar.checked) {
alert('Has seleccionado al Caballo de mar')
spanMokeponJugador1.innerHTML = 'CABALLO DE MAR'
} else {
alert('Por favor, elige un Mokepon')
}
BOOOOMM!! que emocionan jajajaja, Juan es muy divertido.
A mi me gusta nombrar a las variables de forma grupal para mantener un orden, en lugar de una por una y me queda así:
Me agrada este profesor explica las cosas con el alma y eso me inspira a llegar mas allá en la programación 😄
Alguien aprendiendo en 2023?
Lo más lindo que encuentro en este poco recorrido de la programación es la infinidad de formas para llegar a un mismo resultado, eso nos lleva a pensar y tratar de solucionar problemas cotidianos con lo que aprendemos. Excelente la actitud del profe.
Ésta clase costó, pero se siente genial ver que de a poco va progresando!
Excelente la forma en que el profe Juan da las clases, que bien Platzi. Tienen buen equipo
@Juan David Castro Gallego que gran profesor eres. Muchas gracias por tu motivación. Ha sido excelente este curso!
Profe tienes un gran talento para enseñar 👌
hola Juan me gusta tu stylo, Soy muy novato pero voy exageradamente motivado.😎
y pooom !!! jajajaa
Increible,me identifique totalmente con Juan en este clase. Nunca perdiendo la emocion hasta el ultimo momento😂
Juan es un excelente profesor, me hizo volver a amar el mundo de la programación ❤
😂Es impresionante el proyecto que se creará en el curso y totalmente gratis😂
A alguien más le sucede que piensa tener mal el código pero realmente está bien con la diferencia que se distrajeron y esperaban un resultado diferente?
innerText: muestra el texto literalmente como está en el código.
innerHTML: aplica lo desarrollado a los elementos
Mi codigo
<code>
iniciarJuego = () =>
{
let buttonMascotas = document.getElementById("seleccionarMascota");
buttonMascotas.addEventListener("click",seleccionMascotas);
}
seleccionMascotas = () =>
{
// querySelectorAll genera un nodelist con todos los elementos similares
let nodelist = document.querySelectorAll("#seleccionar-mascota input");
let inputMascotas = [].slice.call(nodelist);
let nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
let spanMascotaJugador = document.getElementById("mascota-jugador");
//forEach es el metodo de recorrer un arreglo.
inputMascotas.forEach((valor, indice) =>
{
console.log(valor);
console.log(indice);
if(valor.checked)
{
spanMascotaJugador.innerHTML= ` ${nombresMascotas[indice]}`;
}
})
}
window.addEventListener("load", iniciarJuego)
Asi me quedo hasta el momento:
<code>
function iniciarJuego(){
let botonMascotaJugador = document.getElementById("boton-mascota");
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);
}
function seleccionarMascotaJugador(){
let inputHipodoge = document.getElementById("hipodoge")
let inputCapipepo = document.getElementById("capipepo")
let inputRatigueya = document.getElementById("ratigueya")
let mascotaAliada = ""
if(inputHipodoge.checked){
mascotaAliada = "Hipodogue"
} else if(inputCapipepo.checked){
mascotaAliada = "Capipepo"
} else if(inputRatigueya.checked){
mascotaAliada = "Ratigueya"
} else {
mascotaAliada = "nadie"
}
document.getElementById("nombreJugador").innerHTML= mascotaAliada
alert("Seleccionaste a " + mascotaAliada)
}
window.addEventListener("load", iniciarJuego)
Excelente clase muy divertida😄
Este curso es genial! Nunca habia informado sobre este campo, es nuevo para mi, por momentos me trabo porque no entiendo algo, o porque algo no me sale y no logro ver el error, pero es gratificante cuando logras solucionarlo por tu propia cuenta poco a poco. Los profes son geniales y hacen que quiera seguir viendo las clases ¡Gracias por crear este curso!
un aporte, cuando se use input radio es mejor utilizarlo de la manera que se ha visto siempre , como aparece en este cuadro con el punto para seleccionar antes de la opcion. es menos enredado
cool
Explica tan bien que todos los conceptos que ha aplicado los he ido aplicando a la página de ingreso de mi idea de negocio jaja
Muy bueno la clase 💪🏼
¡¡La personalidad y enseñanzas del profe Juan es simplemente increíble!! ❤
¡¡MUy buena explicación!! A seguir prácticando.
que bueno que ya estemos incorporando nuevas tecnicas con JS😁
Me encantan las clases de profe Juan David, estoy aprendiendo a Tope!
Debo admitir que esta lección ha sido algo difícil para mí, la función innerHTML se me hizo muy abstracta y he regresado mil veces al video, a los apuntes y a la documentación. Creo que ya más o menos )😦
Extraño a Freddy pero el nuevo profe es un capo! Todavia no terminan las clases con el y ya lo extraño ajjajaj😢
que buen proyecto, siento que estoy aprendiendo en modo flash ❤️
definitivamente la manera de explicar del profe es sensacional, paciente, explicativo…que se yo, me gusta que se le entiende muy bien!
magnifica manera de enganche para un curso
Estuve una hora preguntándome por qué no funcionaba y escribí
'mascota-jugadpr'
en vez de
'mascota-jugador'
saben por que me aparece esto?
no pudodo hacer que salga el nombre con los vidas
😦
A MESSIRVE
El profe, me motiva a seguir estudiando programación, con su actitud tan positiva. 💚
Super el profe Juan David, se te comprende muy bien! Gracias
Qué honda banda soy nuevo aquí lo que entendí te lo resumo y será mi aporte
te explicaré como manipular él dom
antes de todo tienes que saber que todo lo que está aquí adentro del HTML <span></span> puede cambiar.
Entonces piensa si lo que está ahí dentro puede cambiar, nosotros podemos manipular eso en JavaScript.
¿Pero cómo?
primero sí tenemos varios <span></span> en el HTML tenemos que darle un, id a cada uno para saber a cuál de todos llamar en JavaScript
ejemplo:
<span id=“mascota-jugador”></span>
esto dentro de un párrafo
<p>Tu mascota <span id=“mascota-jugador”></span> tiene <span>3</span> vidas</p>
ahora que le pusimos un, id dentro de <span></span>
sabremos como llamarlo desde JavaScript,
Así que creamos una function en JavaScript en la cual llamaremos al con el
<span id=“mascota-jugador”></span>
con
document.getElementById(“mascota-jugador”)
pero todo esto tiene que ir dentro de una function
ejemplo:
function seleccionarMascotaJugador() {
let spanMascotaJugador = document.getElementById(“mascota-jugador”)
listo ya casi terminamos, solo nos falta una cosa para que todo funcione, hacer que el nombre cambie, según a la mascota que elija el jugador
sabemos que este codigo
if(inputAguita.checked){
alert(“tu mascota sera aguita 💧”)
nos manda una alerta según la mascota elegida pero no cambia el dom
Así que podemos cambiar ese
alert(“tu mascota sera aguita 💧”)
con un innerHTML esta es una función que sirve para cambiar el texto por cualquier otro que tú quieras pero dedemos elegir a que <span></span> le cambiara el texto por eso es muy importante ponerle un, id
como nosotros ya hicimos todo el proceso para llamar al span,
let spanMascotaJugador = document.getElementById(“mascota-jugador”)
ahora solo tenemos que cambiar el texto que lleva dentro con un innerHTML
ejemplo:
spanMascotaJugador.innerHTML = “aguita 💧”
Y listo aprendiste una de las formas de manipular el dom .
Dime si te sirvió… jajaj la verdad es que soy nuevo programando
Usé la función que retorna un entero aleatorio para asignar la mascota enemiga de forma aleatoria usando un número entre 0 y la longitud de ‘arreglo’ de nodos. Solo se asigna si la mascota está chequeado.
Es increible la forma en que se esta usando la manipulacion del DOM usando el codigo de “span” declarado en el html. Espero con ansias la siguiente clase. Estoy listo para seguir recordando y aprendiendo.
De momento así va mi código pero en inglés (así practico ambas).
function startGame(){
let selectPet = document.getElementById("select_pet")
selectPet.addEventListener("click", selectPetPlayer)
}
function selectPetPlayer() {
let inputHipodoge = document.getElementById("hipodoge")
let inputCapipepo = document.getElementById("capipepo")
let inputRatigueya = document.getElementById("ratigueya")
let inputLangostelvis = document.getElementById("langostelvis")
let inputLucapalma = document.getElementById("lucapalma")
let inputPydos = document.getElementById("pydos")
let spanPlayerPet = document.getElementById("name_player_pet")
if (inputHipodoge.checked) {
spanPlayerPet.innerHTML = "Hipodoge"
} else if (inputCapipepo.checked) {
spanPlayerPet.innerHTML = "Capipepo"
} else if (inputRatigueya.checked) {
spanPlayerPet.innerHTML = "Ratigueya"
} else if (inputLangostelvis.checked) {
spanPlayerPet.innerHTML = "Langostelvis"
} else if (inputLucapalma.checked) {
spanPlayerPet.innerHTML = "Lucaplma"
} else if (inputPydos.checked) {
spanPlayerPet.innerHTML = "Pydos"
} else{
alert("Choose your pet")
}
}
window.addEventListener("load", startGame)
Exelente la explicacion profe, felicidades a platzi…
Gracias profe Juan David Castro, muy buena explicacion
innerHTML !
Info aquí!
Documentación explicación
Hace mucho había hecho un curso de html y javascript y estoy haciendo este para refrescar conocimientos y es excelente la forma de los profes de enseñar y transmitir los conocimientos!, me encantó
muy buena la clase !!! mas mas mas
me encanta esto hahahahahaha ojala aprenda rápido
Super didáctico, excelente actitud y muy claro ; se aprende mucho
📌 Con JS se puede manipular el contenido del HTML generando aún más interactividad
Eres increíble, me gusta mucho cómo enseñas…
Te felicito Juan, tus clases son muy estimulantes, tus explicaciones clarisimas, saludos desde Argentina
me gusta el dinamismo del profe esta uno muy atento a la clase 😉
El profe Juan si esta en su salsa, se siente como transmite alegria al enseñar estos temas, lo felicito y es facil entender con esa actidud, gracias.
Grande profe!!
Con <span></span>
podemos poner el nombre que queramos dentro de un parrafao. Pero debe tener un <span id="mascota-jugador"></span>
Para hacerlo primero tenemos que asignar el Id de nuestro span a una variable:
let spanMascotaJugador = document.getElementById('mascota-jugador')
Ahora tenemos que asignale un valor nuevo y que este se escriba en el HTML
spanMascotaJugador.innerHTML = 'Hipodoge'
Jajaja ¡¡Poooom!!
Me gusto mucho la participación del profe en Dune. :3
Todo es cuestion de practicar y praticar para que se te quede grabada la infomacion. Tambien ayuda bastante colocando notas para saber porque hiciste tal cosa.
En VSCode para agilizar la escritura cuando vas a asignar un “id” dentro de por ejemplo el “span” lo podes automatizar escribiendo # entre medio, por ejemplo:
span#mascota-jugador te queda <span id=“mascota-jugador”></span>
Excelente clase y forma de explicar!
Con Bootstrap se me olvidaron muchos fundamentos y el por que me gusta maquetar ahora con este curso lo recordé ! aparte bootsrap no he tenido experiencias 100% efectivas para el maquetado.
innerHTML una propiedad para manipular el DOM
Buenos días desde España, me encanta las clases del profesor Juan David son muy amenas y agradables me motiva a no parar de aprender.
Excelente Profe
Excelente la manera en la que enseñas, en dos dias he aprendido mas de javascript aca que de lo que he estado aprendiendo en dos meses… Gracias
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?