Skip to content

Commit 31af27e

Browse files
EmmanuelArenasEmmanuelArenas
committed
Spanish translation day 23 of 30
1 parent 424fc69 commit 31af27e

File tree

2 files changed

+336
-2
lines changed

2 files changed

+336
-2
lines changed

‎Spanish/dia_22_Manipulacion_del_Objeto_DOM/dia_22_manipulacion_del_objeto_dom.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
</div>
1616

17-
[<< Día 21](../dia_21_DOM/dia_21_dom.md) | [Día 23 >>](..)
17+
[<< Día 21](../dia_21_DOM/dia_21_dom.md) | [Día 23 >>](../dia_23_Event_Listeners/dia_23_event_listeners.md)
1818

1919
![Thirty Days Of JavaScript](../images/banners/day_1_22.png)
2020

@@ -221,4 +221,4 @@ Compruebe los requisitos de este proyecto a partir de ambas imágenes (jpg y gif
221221

222222
🎉 ¡FELICITACIONES! 🎉
223223

224-
[<< Día 21](../dia_21_DOM/dia_21_dom.md) | [Día 23 >>](..)
224+
[<< Día 21](../dia_21_DOM/dia_21_dom.md) | [Día 23 >>](../dia_23_Event_Listeners/dia_23_event_listeners.md)

‎Spanish/dia_23_Event_Listeners/dia_23_event_listeners.md

Lines changed: 334 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
<div align="center">
2+
<h1> 30 Días de JavaScript: Event Listeners</h1>
3+
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
4+
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
5+
</a>
6+
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
7+
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
8+
</a>
9+
10+
<sub>Autor:
11+
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
12+
<small> Enero, 2020</small>
13+
</sub>
14+
15+
</div>
16+
17+
[<< Día 22](../dia_22_Manipulacion_del_Objeto_DOM/dia_22_manipulacion_del_objeto_dom.md) | [Día 24 >>](..)
18+
19+
![Thirty Days Of JavaScript](../images/banners/day_1_23.png)
20+
21+
- [Día 22](#día-22)
22+
- [DOM(Document Object Model)-Día 3](#domdocument-object-model-día-3)
23+
- [Event Listeners](#event-listeners)
24+
- [Click](#click)
25+
- [Doble Click](#doble-click)
26+
- [Mouse enter](#mouse-enter)
27+
- [Obtener el valor de un elemento input](#obtener-el-valor-de-un-elemento-input)
28+
- [valor de entrada](#valor-de-entrada)
29+
- [evento de entrada y cambio](#evento-de-entrada-y-cambio)
30+
- [evento de desenfoque](#evento-de-desenfoque)
31+
- [keypress, keydow y keyup](#keypress-keydow-y-keyup)
32+
- [Ejercicios](#ejercicios)
33+
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
34+
35+
# Día 22
36+
37+
## DOM(Document Object Model)-Día 3
38+
39+
### Event Listeners
40+
41+
Eventos HTML comunes: onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload.
42+
Podemos añadir el método **event_listener** (escuchador de eventos) a cualquier objeto DOM. Utilizamos el método **_addEventListener()_** para escuchar diferentes tipos de eventos en los elementos HTML. El método _addEventListener()_ toma dos argumentos, un event listener y una función callback.
43+
44+
```js
45+
selectedElement.addEventListener("eventlistner", function (e) {
46+
// la actividad que quieres que ocurra después del evento estará aquí
47+
});
48+
// or
49+
50+
selectedElement.addEventListener("eventlistner", (e) => {
51+
// la actividad que quieres que ocurra después del evento estará aquí
52+
});
53+
```
54+
55+
#### Click
56+
57+
Para adjuntar un event listener a un elemento, primero seleccionamos el elemento y luego adjuntamos el método addEventListener. El event listener toma como argumento el tipo de evento y las funciones de callback.
58+
59+
El siguiente es un ejemplo de evento de tipo click.
60+
61+
**Ejemplo: click**
62+
63+
```html
64+
<!DOCTYPE html>
65+
<html>
66+
<head>
67+
<title>Document Object Model</title>
68+
</head>
69+
70+
<body>
71+
<button>Click Me</button>
72+
73+
<script>
74+
const button = document.querySelector("button");
75+
button.addEventListener("click", (e) => {
76+
console.log("e gives the event listener object:", e);
77+
console.log("e.target gives the selected element: ", e.target);
78+
console.log(
79+
"e.target.textContent gives content of selected element: ",
80+
e.target.textContent
81+
);
82+
});
83+
</script>
84+
</body>
85+
</html>
86+
```
87+
88+
También se puede adjuntar un evento directamente al elemento HTML como script en línea.
89+
90+
**Ejemplo: onclick**
91+
92+
```html
93+
<!DOCTYPE html>
94+
<html>
95+
<head>
96+
<title>Document Object Model</title>
97+
</head>
98+
99+
<body>
100+
<button onclick="clickMe()">Click Me</button>
101+
<script>
102+
const clickMe = () => {
103+
alert("We can attach event on HTML element");
104+
};
105+
</script>
106+
</body>
107+
</html>
108+
```
109+
110+
#### Doble Click
111+
112+
Para adjuntar un event listener a un elemento, primero seleccionamos el elemento y luego adjuntamos el método addEventListener. El event listener toma como argumento el tipo de evento y las funciones de callback.
113+
114+
El siguiente es un ejemplo de evento de tipo click.
115+
116+
**Ejemplo: dblclick**
117+
118+
```html
119+
<!DOCTYPE html>
120+
<html>
121+
<head>
122+
<title>Document Object Model</title>
123+
</head>
124+
125+
<body>
126+
<button>Click Me</button>
127+
<script>
128+
const button = document.querySelector("button");
129+
button.addEventListener("dblclick", (e) => {
130+
console.log("e gives the event listener object:", e);
131+
console.log("e.target gives the selected element: ", e.target);
132+
console.log(
133+
"e.target.textContent gives content of selected element: ",
134+
e.target.textContent
135+
);
136+
});
137+
</script>
138+
</body>
139+
</html>
140+
```
141+
142+
#### Mouse enter
143+
144+
Para adjuntar un event listener a un elemento, primero seleccionamos el elemento y luego adjuntamos el método addEventListener. El event listener toma como argumento el tipo de evento y las funciones de callback.
145+
146+
El siguiente es un ejemplo de evento de tipo click.
147+
148+
**Ejemplo: mouseenter**
149+
150+
```html
151+
<!DOCTYPE html>
152+
<html>
153+
<head>
154+
<title>Document Object Model</title>
155+
</head>
156+
157+
<body>
158+
<button>Click Me</button>
159+
<script>
160+
const button = document.querySelector("button");
161+
button.addEventListener("mouseenter", (e) => {
162+
console.log("e gives the event listener object:", e);
163+
console.log("e.target gives the selected element: ", e.target);
164+
console.log(
165+
"e.target.textContent gives content of selected element: ",
166+
e.target.textContent
167+
);
168+
});
169+
</script>
170+
</body>
171+
</html>
172+
```
173+
174+
A estas alturas ya estás familiarizado con el método addEventListen y cómo añadir un event listener. Hay muchos tipos de event listeners. Pero en este reto nos centraremos en los eventos importantes más comunes.
175+
176+
Lista de eventos:
177+
178+
- click - cuando se hace click en el elemento
179+
- dblclick - cuando se hace doble click en el elemento
180+
- mouseenter - cuando el punto del mouse ingresa al elemento
181+
- mouseleave - cuando el puntero del mouse abandona el elemento
182+
- mousemove - cuando el puntero del mouse se mueve sobre el elemento
183+
- mouseover - cuando el puntero del mouse se mueve sobre el elemento
184+
- mouseout - cuando el puntero del mouse sale del elemento
185+
- input - cuando el valor entra en el input de entrada
186+
- change - cuando el valor cambia en el input de entrada
187+
- blur - cuando el elemento no está enfocado
188+
- keydown - cuando una tecla está pulsada
189+
- keyup - cuando una tecla está levantada
190+
- keypress - cuando pulsamos cualquier tecla
191+
- onload - cuando el navegador ha terminado de cargar una página
192+
193+
Pruebe los tipos de eventos anteriores sustituyendo el tipo de evento en el fragmento de código anterior.
194+
195+
### Obtener el valor de un elemento input
196+
197+
Normalmente rellenamos formularios y los formularios aceptan datos. Los campos de los formularios se crean utilizando el elemento HTML input. Vamos a construir una pequeña aplicación que nos permita calcular el índice de masa corporal de una persona utilizando dos campos de entrada, un botón y una etiqueta p.
198+
199+
### valor de entrada
200+
201+
```html
202+
<!DOCTYPE html>
203+
<html>
204+
<head>
205+
<title>Document Object Model:30 Days Of JavaScript</title>
206+
</head>
207+
208+
<body>
209+
<h1>Body Mass Index Calculator</h1>
210+
211+
<input type="text" id="mass" placeholder="Mass in Kilogram" />
212+
<input type="text" id="height" placeholder="Height in meters" />
213+
<button>Calculate BMI</button>
214+
215+
<script>
216+
const mass = document.querySelector("#mass");
217+
const height = document.querySelector("#height");
218+
const button = document.querySelector("button");
219+
220+
let bmi;
221+
button.addEventListener("click", () => {
222+
bmi = mass.value / height.value ** 2;
223+
alert(`your bmi is ${bmi.toFixed(2)}`);
224+
console.log(bmi);
225+
});
226+
</script>
227+
</body>
228+
</html>
229+
```
230+
231+
#### evento de entrada y cambio
232+
233+
En el ejemplo anterior, hemos conseguido obtener los valores de entrada de dos campos de entrada haciendo click en el botón. Qué tal si queremos obtener el valor sin hacer click en el botón. Podemos utilizar el tipo de evento _change_ o _input_ para obtener los datos inmediatamente del campo de entrada cuando el campo está en el foco. Veamos cómo lo haremos.
234+
235+
```html
236+
<!DOCTYPE html>
237+
<html>
238+
<head>
239+
<title>Document Object Model:30 Days Of JavaScript</title>
240+
</head>
241+
242+
<body>
243+
<h1>Data Binding using input or change event</h1>
244+
245+
<input type="text" placeholder="say something" />
246+
<p></p>
247+
248+
<script>
249+
const input = document.querySelector("input");
250+
const p = document.querySelector("p");
251+
252+
input.addEventListener("input", (e) => {
253+
p.textContent = e.target.value;
254+
});
255+
</script>
256+
</body>
257+
</html>
258+
```
259+
260+
#### evento de desenfoque
261+
262+
A diferencia de _input_ o _change_, el evento _blur_ se produce cuando el campo de entrada no está enfocado.
263+
264+
```js
265+
<!DOCTYPE html>
266+
<html>
267+
268+
<head>
269+
<title>Document Object Model:30 Days Of JavaScript</title>
270+
</head>
271+
272+
<body>
273+
<h1>Giving feedback using blur event</h1>
274+
275+
<input type="text" id="mass" placeholder="say something" />
276+
<p></p>
277+
278+
<script>
279+
const input = document.querySelector('input')
280+
const p = document.querySelector('p')
281+
282+
input.addEventListener('blur', (e) => {
283+
p.textContent = 'Field is required'
284+
p.style.color = 'red'
285+
286+
})
287+
</script>
288+
</body>
289+
290+
</html>
291+
```
292+
293+
#### keypress, keydow y keyup
294+
295+
Podemos acceder a todos los números de teclas del teclado utilizando diferentes tipos de event listener. Usemos keypress y obtengamos el keyCode de cada tecla del teclado.
296+
297+
```html
298+
<!DOCTYPE html>
299+
<html>
300+
<head>
301+
<title>Document Object Model:30 Days Of JavaScript</title>
302+
</head>
303+
304+
<body>
305+
<h1>Key events: Press any key</h1>
306+
307+
<script>
308+
document.body.addEventListener("keypress", (e) => {
309+
alert(e.keyCode);
310+
});
311+
</script>
312+
</body>
313+
</html>
314+
```
315+
316+
---
317+
318+
🌕 Eres muy especial, estás progresando cada día. Ahora, sabes cómo manejar cualquier tipo de eventos DOM. . Te quedan sólo siete días para tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
319+
320+
## Ejercicios
321+
322+
### Ejercicios: Nivel 1
323+
324+
1. Generar números y marcar pares, impares y primos con tres colores diferentes. Vea la imagen de abajo.
325+
326+
![Number Generator](./../images/projects/dom_min_project_number_generator_day_3.1.gif)
327+
328+
1. Generando el código del teclado usando even listener. La imagen de abajo.
329+
330+
![Keyboard key](./../images/projects/dom_min_project_keycode_day_3.2.gif)
331+
332+
🎉 ¡FELICITACIONES! 🎉
333+
334+
[<< Día 22](../dia_22_Manipulacion_del_Objeto_DOM/dia_22_manipulacion_del_objeto_dom.md) | [Día 24 >>](..)

0 commit comments

Comments
 (0)