Skip to content

Commit 96397eb

Browse files
AsabenehAsabeneh
authored
Merge pull request Asabeneh#730 from alicangunduz/master
Added 23-30 day
2 parents 7fc6e87 + b2e022e commit 96397eb

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

+337
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, keydown ve keyup](#keypress-keydown-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 burada en önemli ve sık kullanılan 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 form doldururuz ve formlar verileri işler. 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ının aksine, `blur` olayı girdi alanına 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, keydown 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 gelişiyorsun. Artık herhangi bir DOM olayını nasıl ele alacağını biliyorsun. Başarıya giden yolda yalnızca yedi günün kaldı. Şimdi tüm bunları pekiştirmen için alıştırma vakti!
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)