Skip to content

Commit 6ad8191

Browse files
authored
Merge pull request #1 from ElviraQDP/master
consistency
2 parents a8e5798 + d211e9c commit 6ad8191

File tree

12 files changed

+125
-1
lines changed

12 files changed

+125
-1
lines changed
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Welcome to Javascript Events!
2+
3+
During this tutorial we are going to go over Javascript Events.
4+
5+
1. onClick
6+
2. Get values from event targets.
7+
3. Chance CSS properties with Javascript when events trigger.
8+
4. Waiting for the website to LOAD before doing anything (onLoad event)
9+
5. Implementing a simple counter when the user clicks.
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# ¡Bienvenido a Eventos en Javascript!
2+
3+
En este tutorial estaremos viendo los eventos en Javascript
4+
5+
1. Evento onClick
6+
2. Obtener los valores de los targets(obetivos) de los eventos
7+
3. Cambiar las propiedades del CSS con Javascript cuando suceda el evento
8+
4. Esperar a que el sitio web CARGUE(LOAD)antes de hacer nada(onLoad event)
9+
5. Implentar un contador simple(simple counter) cuando el usuario haga clic
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# `01` Alerta On Click
2+
3+
Puedes establecer funciones Event Listener para manejar cualquier tipo de eventos ¡La lista de eventos posibles es inmensa! Click, Double Click, Mouseover, Load, Print, etc...
4+
5+
En este código HTML hay 2 botones: uno tiene la función myClickFunction como listener de evento asignada al evento clic usando el evento onclick.
6+
7+
# 📝 Instrucciones
8+
Añade la misma función como listener de evento al evento clic en el #button2.
9+
10+
11+
# 💡 PISTA:
12+
Usa la propiedad de la etiqueta llamada "onclick" igual que en el otro botón.
13+
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# `02` On Click Hello World
2+
3+
Crea una función Listener de evento que sea llamada automáticamente cuando el usuario presione el botón que está en el lado HTML del ejercicio.
4+
5+
## 💡 Pista:
6+
7+
Usa la propiedad onclick de la etiqueta input.
8+
9+
Declara la función javascript en el index.js y establécela como listener en la propiedad input.
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# `03` Suma Valores
2+
3+
Completa la función calculateSumListener con el código necesario para imprimir la suma de los valores de los primeros dos input con el tercero.
4+
5+
## 💡 Pista:
6+
7+
Cuando obtienes el valor de un input, se recomienda convertir el valor a un número entero con la función parseInt. De esa forma te aseguras de que el resultado de 2 + 2 sea 4, en vez de 22. Si estas obteniendo 22 como resultado, significa que el valor del input esta siendo tratado como un string en vez de un número entero.
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# `04` Oculta on click
2+
3+
Completa la función myEventListener con el código necesario para ocultar el primer div del documento.
4+
5+
6+
## 💡 Pista:
7+
8+
Para ocultae un elemento con javascript debes usar element.style.display
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# `05` El evento Load
2+
3+
Es una muy buena práctica esperar a que el navegador termine de cargar la página antes de iniciar el flujo de tu sitio web/aplicación, para hacerlo, usamos el evento LOAD.
4+
5+
## 📝 Instrucciones
6+
Crea una función llamada loadListener que escuche al evento load y luego muestre una alerta con el string "loading finished..." cuando se la llame.
7+
8+
## 💡 Pista:
9+
- El listener debe asignarse al body.
10+
- Así se añade un listener de evento a un evento load: http://www.w3schools.com/jsref/event_onload.asp
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# `06` Añade Listener con JS
2+
3+
A veces debemos añadir listener de eventos DURANTE EL TIEMPO DE EJECUCIÓN.
4+
5+
La mejor forma de hacer eso es usando una función addEventListener a cualquier elemento del DOM que queramos empezar a escuchar.
6+
7+
## 📝 Instrucciones:
8+
Ahora el código está escuchando la ejecución y muestra una alerta cuando el sitio web termina de cargar. Escribe el código necesatio para que se muestre una alerta que diga "wuju" cada vez que le des clic al botón verde.
9+
10+
## 💡 PISTA
11+
Aquí está la documentación para añadir un listener de evento(addEventListener): https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
12+
13+
Usa la función `alert()`.
14+
15+
Así debería verse la ejecución de tu sitio web:
16+
17+
[06-add-listener-with-js](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/blob/master/.breathecode/assets/a1mgdPD.gif?raw=true)
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# `07` Contar on Click
2+
3+
Si tienes variables globales, puedes cambiar su valor durante el tiempo de ejecución usando los handlers de eventos. Por ejemplo, este código incrementa el valor de la variable counter cada vez que el usuario hace clic en el botón #increase.
4+
5+
## 📝 Instrucciones
6+
7+
Crea un botón que disminuya con una función handler de evento. La función debería disminuir la variable counter y actualizar la pantalla.
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# `07.1` Cambio de Turno on Click
2+
3+
Digamos que quieres crear una herramienta para cambiar de turno entre dos jugadores: Mario y Juan.
4+
5+
Para eso hemos creado la variable global currentPlayer(jugador actual) y guardado el nombre del jugador actual en esa variable. Cada vez que haces clic en el botón, la variable cambia su valor a la del otro jugador.
6+
7+
8+
## 📝 Instructiones
9+
10+
Cambia el código de la función turnChanger para añadir un tercer jugador llamado "Josh".
11+
12+
## 💡 Pista
13+
Añade una condición else if ya sea para Juan o Josh y cambia el valor de currentUser consecuentemente.

0 commit comments

Comments
 (0)