Skip to content

Commit 3856d15

Browse files
alicangunduzalicangunduz
committed
Added 23-30 day
Added 23-30 day range for the Turkish translation of the tutorial. With this change, I added the 23-30 day range to the Turkish translation of the tutorial.
1 parent 7fc6e87 commit 3856d15

File tree

55 files changed

+21749
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+21749
-0
lines changed

‎Turkish/23_Day_Event_listeners/23_day_event_listeners.md

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
<div align="center">
2+
<h1> 30 Days Of 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>Author:
11+
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
12+
<sub>Çevirmen:
13+
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
14+
<small> Mart 2023</small>
15+
</sub>
16+
17+
</div>
18+
19+
[<< Gün 22](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | [Gün 24 >>](../24_Day_Project_solar_system/24_day_project_solar_system.md)
20+
21+
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_23.png)
22+
23+
- [Gün 23](#gün-23)
24+
- [DOM(Document Object Model)-Gün 3](#domdocument-object-model-gün-3)
25+
- [Event Listeners](#event-listeners)
26+
- [Tıklama](#tıklama)
27+
- [Çift tıklama](#çift-tıklama)
28+
- [Fare tıklaması](#fare-tıklaması)
29+
- [Bir input öğesinden değer alma](#bir-input-öğesinden-değer-alma)
30+
- [input değeri](#input-değeri)
31+
- [input olayı ve change olayı](#input-olayı-ve-change-olayı)
32+
- [blur olayı](#blur-olayı)
33+
- [keypress, keydow ve keyup](#keypress-keydow-ve-keyup)
34+
- [Egzersizler](#egzersizler)
35+
- [Egzersizler: Seviye 1](#egzersizler-seviye-1)
36+
37+
# Gün 23
38+
39+
## DOM(Document Object Model)-Gün 3
40+
41+
### Event Listeners
42+
43+
Ortak HTML olayları: tıklama, değişiklik, fare üzerine gelme, fareyi elementin üzerinden çıkarma, tuşa basma, tuştan el çekme, yükleme.
44+
45+
Herhangi bir DOM nesnesine olay dinleyici yöntemi ekleyebiliriz. HTML öğelerinde farklı olay türlerini dinlemek için **addEventListener()** yöntemini kullanırız. _addEventListener()_ yöntemi, bir olay dinleyicisi ve geri çağırma işlevi olmak üzere iki argüman alır.
46+
47+
```js
48+
selectedElement.addEventListener('eventlistner', function(e) {
49+
// olaydan sonra olmasını istediğiniz aktivite burada olacak
50+
})
51+
// or
52+
53+
selectedElement.addEventListener('eventlistner', e => {
54+
// olaydan sonra olmasını istediğiniz aktivite burada olacak
55+
})
56+
```
57+
58+
#### Tıklama
59+
60+
Bir öğeye olay dinleyicisi eklemek için önce öğeyi seçer, ardından **addEventListener()** yöntemini ekleriz. Olay dinleyicisi, olay türünü ve geri çağırma işlevlerini argüman olarak alır.
61+
62+
Aşağıdaki örnek tıklama türü olayın bir örneğidir.
63+
64+
**Örnek: Tıklama**
65+
66+
```html
67+
<!DOCTYPE html>
68+
<html>
69+
<head>
70+
<title>Document Object Model</title>
71+
</head>
72+
73+
<body>
74+
<button>Click Me</button>
75+
76+
<script>
77+
const button = document.querySelector('button')
78+
button.addEventListener('click', e => {
79+
console.log('e gives the event listener object:', e)
80+
console.log('e.target gives the selected element: ', e.target)
81+
console.log(
82+
'e.target.textContent gives content of selected element: ',
83+
e.target.textContent
84+
)
85+
})
86+
</script>
87+
</body>
88+
</html>
89+
```
90+
91+
Bir olay, doğrudan HTML öğesine satır içi komut dosyası olarak da eklenebilir.
92+
93+
**Örnek: onclick**
94+
95+
```html
96+
<!DOCTYPE html>
97+
<html>
98+
<head>
99+
<title>Document Object Model</title>
100+
</head>
101+
102+
<body>
103+
<button onclick="clickMe()">Click Me</button>
104+
<script>
105+
const clickMe = () => {
106+
alert('We can attach event on HTML element')
107+
}
108+
</script>
109+
</body>
110+
</html>
111+
```
112+
113+
#### Çift tıklama
114+
115+
Bir öğeye olay dinleyicisi eklemek için önce öğeyi seçeriz, ardından **addEventListener()** yöntemini ekleriz. Olay dinleyicisi, olay türünü ve geri çağırma işlevlerini argüman olarak alır.
116+
117+
Aşağıdaki örnek, tıklama türü olayın bir örneğidir.
118+
119+
**Örnek: dblclick**
120+
121+
```html
122+
<!DOCTYPE html>
123+
<html>
124+
<head>
125+
<title>Document Object Model</title>
126+
</head>
127+
128+
<body>
129+
<button>Click Me</button>
130+
<script>
131+
const button = document.querySelector('button')
132+
button.addEventListener('dblclick', e => {
133+
console.log('e gives the event listener object:', e)
134+
console.log('e.target gives the selected element: ', e.target)
135+
console.log(
136+
'e.target.textContent gives content of selected element: ',
137+
e.target.textContent
138+
)
139+
})
140+
</script>
141+
</body>
142+
</html>
143+
```
144+
145+
#### Fare tıklaması
146+
147+
Bir öğeye olay dinleyicisi eklemek için önce öğeyi seçeriz, ardından **addEventListener()** yöntemini ekleriz. Olay dinleyicisi, olay türünü ve geri çağırma işlevlerini argüman olarak alır.
148+
149+
Aşağıdaki örnek, tıklama türündeki bir olayın örneğidir.
150+
151+
**Örnek: mouseenter**
152+
153+
```html
154+
<!DOCTYPE html>
155+
<html>
156+
<head>
157+
<title>Document Object Model</title>
158+
</head>
159+
160+
<body>
161+
<button>Click Me</button>
162+
<script>
163+
const button = document.querySelector('button')
164+
button.addEventListener('mouseenter', e => {
165+
console.log('e gives the event listener object:', e)
166+
console.log('e.target gives the selected element: ', e.target)
167+
console.log(
168+
'e.target.textContent gives content of selected element: ',
169+
e.target.textContent
170+
)
171+
})
172+
</script>
173+
</body>
174+
</html>
175+
```
176+
177+
Şimdiye kadar addEventListener yöntemini ve olay dinleyicisi nasıl ekleyeceğimizi öğrendiniz. Birçok olay dinleyicisi türü vardır, ancak bu meydan okumada en yaygın ve önemli olaylara odaklanacağız.
178+
179+
Olay listesi:
180+
181+
- click - eleman tıklandığında
182+
- dblclick - eleman çift tıklandığında
183+
- mouseenter - fare noktası öğeye girdiğinde
184+
- mouseleave - fare işaretçisi öğeden ayrıldığında
185+
- mousemove - fare işaretçisi öğe üzerinde hareket ettiğinde
186+
- mouseover - fare işaretçisi öğe üzerinde hareket ettiğinde
187+
- mouseout - fare işaretçisi öğeden dışarı çıktığında
188+
- input - değer giriş alanına girildiğinde
189+
- change - giriş alanında değer değiştiğinde
190+
- blur - öğe odaklanmadığında
191+
- keydown - bir tuş düştüğünde
192+
- keyup - bir anahtar bittiğinde
193+
- keypress - herhangi bir tuşa bastığımızda
194+
- onload - tarayıcı bir sayfayı yüklemeyi bitirdiğinde
195+
196+
Yukarıdaki kod örneğindeki olay türünü değiştirerek yukarıdaki olay türlerini test edebilirsiniz.
197+
198+
### Bir input öğesinden değer alma
199+
200+
Genellikle formları doldururuz ve formlar veri kabul eder. Form alanları, girdi HTML öğesi kullanılarak oluşturulur. İki girdi alanı, bir düğme ve bir p etiketi kullanarak bir kişinin vücut kitle indeksini hesaplamamıza izin veren küçük bir uygulama oluşturalım.
201+
202+
### input değeri
203+
204+
```html
205+
<!DOCTYPE html>
206+
<html>
207+
<head>
208+
<title>Document Object Model:30 Days Of JavaScript</title>
209+
</head>
210+
211+
<body>
212+
<h1>Body Mass Index Calculator</h1>
213+
214+
<input type="text" id="mass" placeholder="Mass in Kilogram" />
215+
<input type="text" id="height" placeholder="Height in meters" />
216+
<button>Calculate BMI</button>
217+
218+
<script>
219+
const mass = document.querySelector('#mass')
220+
const height = document.querySelector('#height')
221+
const button = document.querySelector('button')
222+
223+
let bmi
224+
button.addEventListener('click', () => {
225+
bmi = mass.value / height.value ** 2
226+
alert(`your bmi is ${bmi.toFixed(2)}`)
227+
console.log(bmi)
228+
})
229+
</script>
230+
</body>
231+
</html>
232+
```
233+
234+
#### input olayı ve change olayı
235+
236+
Yukarıdaki örnekte, iki girdi alanından verileri düğmeye tıklayarak almayı başardık. Ancak, düğmeye tıklamadan değer almak isterseniz, girdi alanına odaklandığında verileri hemen almak için _change_ veya _input_ olay türünü kullanabiliriz. Bunu nasıl ele alacağımızı görelim.
237+
238+
```html
239+
<!DOCTYPE html>
240+
<html>
241+
<head>
242+
<title>Document Object Model:30 Days Of JavaScript</title>
243+
</head>
244+
245+
<body>
246+
<h1>Data Binding using input or change event</h1>
247+
248+
<input type="text" placeholder="say something" />
249+
<p></p>
250+
251+
<script>
252+
const input = document.querySelector('input')
253+
const p = document.querySelector('p')
254+
255+
input.addEventListener('input', e => {
256+
p.textContent = e.target.value
257+
})
258+
</script>
259+
</body>
260+
</html>
261+
```
262+
263+
#### blur olayı
264+
265+
_Input_ veya _change_ olaylarına karşın, blur olayı girdi alanı odaklı değilken meydana gelir.
266+
267+
```js
268+
<!DOCTYPE html>
269+
<html>
270+
271+
<head>
272+
<title>Document Object Model:30 Days Of JavaScript</title>
273+
</head>
274+
275+
<body>
276+
<h1>Giving feedback using blur event</h1>
277+
278+
<input type="text" id="mass" placeholder="say something" />
279+
<p></p>
280+
281+
<script>
282+
const input = document.querySelector('input')
283+
const p = document.querySelector('p')
284+
285+
input.addEventListener('blur', (e) => {
286+
p.textContent = 'Field is required'
287+
p.style.color = 'red'
288+
289+
})
290+
</script>
291+
</body>
292+
293+
</html>
294+
```
295+
296+
#### keypress, keydow ve keyup
297+
298+
Farklı olay dinleyici türlerini kullanarak klavyenin tüm tuş numaralarına erişebiliriz. KeyPress'i kullanalım ve her klavye tuşunun keyCode'unu alalım.
299+
300+
```html
301+
<!DOCTYPE html>
302+
<html>
303+
<head>
304+
<title>Document Object Model:30 Days Of JavaScript</title>
305+
</head>
306+
307+
<body>
308+
<h1>Key events: Press any key</h1>
309+
310+
<script>
311+
document.body.addEventListener('keypress', e => {
312+
alert(e.keyCode)
313+
})
314+
</script>
315+
</body>
316+
</html>
317+
```
318+
319+
---
320+
321+
🌕 Sen çok özel birisin, her gün ilerliyorsun. Şimdi, her tür DOM olayını nasıl ele alacağını biliyorsun. Büyüklüğe giden yolda sadece yedi günün kaldı. Şimdi beynin ve kasların için bazı egzersizler yap.
322+
323+
## Egzersizler
324+
325+
### Egzersizler: Seviye 1
326+
327+
1. Üç farklı renkle çift, tek ve asal sayıları işaretleyen sayıları oluşturma. Aşağıdaki resme bakın.
328+
329+
![Number Generator](../images/.././../images/projects/dom_min_project_number_generator_day_3.1.gif)
330+
331+
1. Klavye kodunu dinleyici kullanarak oluşturma. Aşağıdaki resme bakın.
332+
333+
![Keyboard key](../images/.././../images/projects/dom_min_project_keycode_day_3.2.gif)
334+
335+
🎉 TEBRİKLER ! 🎉
336+
337+
[<< Gün 22](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | [Gün 24 >>](../24_Day_Project_solar_system/24_day_project_solar_system.md)

0 commit comments

Comments
 (0)