Programar eventos de clic en botones HTML con JavaScript

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

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!

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

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

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 ?