Fundamentos de Programación

1

Programación Básica: Fundamentos y Creación de Proyectos en Línea

2

Programación Básica en Google Chrome: Variables y Funciones

3

Creación de una Página Web Básica con HTML

4

Estructura Básica de un Documento HTML

5

Estructura y funcionamiento básico de HTML y JavaScript

6

Instalación y uso básico de Visual Studio Code para programar

7

Declaración y Uso Básico de Variables en JavaScript

8

Programación de Piedra, Papel o Tijera en JavaScript

9

Programación de Piedra, Papel o Tijera en JavaScript

10

Generación de Números Aleatorios con JavaScript

11

Creación y uso de funciones en programación

12

Ciclos y Condiciones en Programación: Piedra, Papel o Tijera

13

Programación de un Juego de Piedra, Papel o Tijera en JavaScript

14

Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web

15

Manipulación del DOM y Eventos en JavaScript para Juegos Web

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación de Páginas Web para Videojuegos en HTML

17

Selección de Mascotas en HTML para Juegos Interactivos

18

Programar eventos de clic en botones HTML con JavaScript

19

Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota

20

Selección de Mascota en JavaScript: Implementación y Validación

21

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

22

Selección Aleatoria de Mascota Enemiga en JavaScript

23

Eventos de clic y lógica de ataque en JavaScript

24

Ataques Aleatorios para Mascotas Enemigas en JavaScript

25

Creación de Mensajes Dinámicos en Combate HTML y JavaScript

26

Lógica de Combate en JavaScript para Juego Mokepon

27

Operadores Lógicos en Programación: AND, OR y NOT

28

Actualización de Vidas en Juego de Combate con JavaScript

29

Validación de Vidas y Mensajes Finales en Juegos

30

Funcionalidad de Reinicio y Desactivación de Botones en Juego

31

Mostrar y ocultar secciones en HTML con JavaScript

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Estilos CSS: Selectores, Propiedades y Valores

33

Tipos de Visualización en CSS: Display Block, Inline e Inline Block

34

Alineación de Elementos con Flexbox en CSS

35

Modelo de Caja en CSS: Espaciado y Bordes

36

Diseño y Estilo de Páginas Web con HTML y CSS

37

Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

38

Estilos CSS para Mejorar la Interfaz de un Juego

39

Estilizado de Pantallas de Juego con CSS y Flexbox

40

Separación de mensajes y estilos en JavaScript y HTML

41

CSS Grid: Organiza Elementos en Rejillas Bidimensionales

42

Diseño Responsivo con CSS: Media Queries y Flexbox

43

Pseudoclases en CSS: Mejora la Interacción del Usuario

Quiz: Estilos con CSS

Optimización de código

44

Optimización de Código JavaScript con Clases y Objetos

45

Optimización de Código JavaScript: Variables y Funciones

46

Clases y Objetos: Fundamentos para Optimizar Juegos

47

Construcción de Clases y Objetos en JavaScript

48

Uso de Arreglos para Almacenar Objetos en JavaScript

49

Agregar ataques a objetos en JavaScript

50

Renderizado Dinámico de Objetos en HTML con JavaScript

51

Solución de errores en variables y elementos HTML en JavaScript

52

Uso de Objetos para Centralizar Información en JavaScript

53

Selección de Mascota Aleatoria en JavaScript

54

Iteración de Arreglos y Manipulación DOM en JavaScript

55

Crear Función "mostrarAtaques" en JavaScript para Juegos

56

Eventos de Clic en Botones con JavaScript

57

Secuencia de Ataques y Validación de Resultados en JavaScript

58

Implementación de lógica de combate en juegos JavaScript

59

Programación de Juegos: Lógica de Ataques y Victorias

60

Optimización y Corrección de Errores en Juegos Web con JavaScript

Quiz: Optimización de código

Mapa con canvas

61

Dibujo y manejo de gráficos en Canvas con JavaScript

62

Movimiento de Capipepo en Canvas con HTML y JavaScript

63

Movimiento Continuo de Personajes en Canvas con JavaScript

64

Eventos de Teclado para Controlar Personajes en Juegos

65

Pintar Fondos y Personajes en Canvas HTML

66

Métodos de Clases en JavaScript para Juegos Interactivos

67

Detección de Colisiones en Videojuegos con JavaScript

68

Programación de eventos y colisiones en un juego interactivo

69

Ajuste Responsivo de Mapas en Pantallas con JavaScript

70

Estilos Responsivos en HTML y CSS para Mapas Interactivos

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

Desarrollo de Juegos Multijugador con Cliente-Servidor y API

72

Instalación de Node.js en Windows para desarrollo backend

73

Uso básico de la terminal de comandos y Node.js

74

Creación de un Servidor Básico con Express.js en Node.js

75

Conceptos Clave de URIs y Verbos HTTP en Node.js

76

Desarrollo de API con Node.js y Comunicación Frontend-Backend

77

Selección de Mokepon y Comunicación JSON en Express.js

78

Implementación de un Endpoint para Coordenadas de Jugadores en Node.js

79

Integración de Coordenadas de Jugadores en Mokepon Multijugador

80

Optimización de Coordenadas en Videojuegos con JavaScript

81

Batalla Final en Mokepon: Implementación de Colisiones y Back-End

82

Implementación de Ataques en Tiempo Real para Videojuego Mokepon

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Corrección de errores en juego multijugador con Node.js

84

Desarrollo Colaborativo con Git y GitHub para Programadores

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Juan David Castro Gallego

Juan David Castro Gallego

Programar eventos de clic en botones HTML con JavaScript

18/84
Recursos

Aportes 346

Preguntas 227

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

El profe Juan David Castro, explica MUY BIEN. Tanto, que me divierto mucho aprendiendo con él. 😃

Eventos que podemos escuchar con:
addEventListener("")

  • blur = Cuando el elemento pierde el foco.
  • click = El usuario hace clic sobre el elemento.
  • dblclick = El usuario hace doble clic sobre el elemento.
  • focus = El elemento gana el foco.
  • keydown = El usuario presiona una tecla.
  • keypress = El usuario presiona una tecla y la mantiene pulsada.
  • keyup = El usuario libera la tecla.
  • load = El documento termina su carga.
  • mousedown = El usuario presiona el botón del ratón en un elemento.
  • mousemove = El usuario mueve el puntero del ratón sobre un elemento.
  • mouseout = El usuario mueve el puntero fuera de un elemento.
  • mouseover = El usuario mantiene el puntero sobre un elemento.
  • mouseup = El usuario libera el botón pulsado del ratón sobre un elemento.

Defer, un atributo muy util al ejecutar el JavaScript

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.

![](

Tambien tengo entendido que otra forma de llamar a los elementos es con un atributo clases:
class = “boton-mascotas”

tu método de enseñanza pareciera un poco mas rápido, pero en realidad desarrollas una idea (cada clase) 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:

Async-defer en JS

Um de los mejores profesores, excelente gracias profe Juan

Felicidades profe, tus explicaciones son de otro mundo, e entiendo a la perfección.

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 <!-- -->

Tres horas viendo pensando por qué no me andaba el Java y resulta que estaba poniendo script SCR en vez de script SRC 🤣

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

Para que tu JavaScript funcione correctamente, asegúrate de que: 1. **Ubicación de la etiqueta `<script>`**: Colócala antes del cierre de la etiqueta `</body>` para que el HTML cargue primero. 2. **Ruta del archivo**: Verifica que la ruta en el atributo `src` sea correcta. Si tu archivo `mokepon.js` está dentro de una carpeta llamada `js`, asegúrate de que la ruta esté especificada como `./js/mokepon.js`. 3. **Errores en la consola**: Usa la consola del navegador para identificar errores que puedan estar impidiendo la ejecución. Revisa estos puntos y prueba nuevamente.
Chicos, si el `alert` del minuto 4:30 de la clase les funciona con la ruta completa pero no con la ruta relativa, revisen esto: 1. **Estructura de Carpetas**: Verifiquen que su estructura de carpetas sea correcta: `-` Proyecto raíz ` -` js ` -` mokepon.js ` -` mokepon ` -` mokepon.html 2. **Ruta Relativa**: Usen `../js/mokepon.js` en el archivo HTML para subir un nivel y luego acceder a la carpeta `js` `<script src="../js/mokepon.js"></script>` Esto debería solucionar el problema. ¡Suerte!
Si estas teniendo problemas con alert te recomiendo revisar bien en tus doc como tienes acomodados tus archivos,en mi caso tenia 2 archivos con el mismo nombre y estaba modificando uno que no tenia abierto en mi navegador, recuerda que ahi justo en el enlace te aparece la ruta de tu documento ej file:///C:/Users/cris\_/Desktop/programar/mokepon/mokepon.html en mi caso mi codigo estaba bien pero no se reflejaba el alert porque el navegador tenia abierto otro archivo. En conclusion checa tu estructura de carpetas
habla demasiado y lo confunde a uno :(
Me encanta la pasión con que habla el profesor. 👍 Me hace imaginar lo maravilloso del mundo si todos fuéramos así de apasionados por lo que hacemos. 😁✌️
a ya me funciona me equivoque en algo
extraño a freddy :( alert("tristeza")

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!

Conectando Js con Html

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>

getElementById y addEventListener

getElementById

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

addEventListener

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

  1. 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

  2. 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

  3. Estilo Mayúsculas (ALL_CAPS)
    Todas las letras del identificador se encuentran en mayúsculas. Por ejemplo:
    IO

  4. Estilo minúsculas (small_caps)
    Todas las letras del identificador se encuentran en minúsculas. Por ejemplo:
    system

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

Para crear un archivo que no existe podemos situarnos haciendo hover sobre la direccion de enlace y dar Ctrl + click para que se cree automaticamente (sirve para carpetas y archivos):

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 ?