Skip to content

Commit 8430e9f

Browse files
AsabenehAsabeneh
authored
Merge pull request Asabeneh#643 from alicangunduz/master
addition of day 22
2 parents 41cc836 + 55e8e61 commit 8430e9f

16 files changed

+3572
-2
lines changed

‎Turkish/21_Day_DOM/21_day_dom.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</sub>
1616
</div>
1717

18-
[<< Day 20](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Day 22 >>](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)
18+
[<< Gün 20](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Gün 22 >>](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)
1919

2020
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_21.png)
2121

@@ -406,4 +406,4 @@ Fark etmişsinizdir, JavaScript içinde kullandığımızda css özellikleri cam
406406

407407
🎉 TEBRİKLER ! 🎉
408408

409-
[<< Day 20](../Turkish/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Day 22 >>](../Turkish/22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)
409+
[<< Gün 20](../Turkish/../20_Day_Writing_clean_codes/20_Day_writing_clean_codes.md) | [Gün 22 >>](../Turkish/../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)

‎Turkish/22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md

+237
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<div align="center">
2+
<h1> 30 Days Of JavaScript: Manipulating DOM Object</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+
11+
<sub>Author:
12+
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
13+
<sub>Çevirmen:
14+
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
15+
<small> Ocak 2023</small>
16+
</sub>
17+
18+
</div>
19+
20+
[<< Gün 21](../21_Day_DOM/21_day_dom.md) | [Gün 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md)
21+
22+
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_21.png)
23+
- [Gün 22](#gün-22)
24+
- [DOM(Document Object Model)-Gün 2](#domdocument-object-model-gün-2)
25+
- [Element Oluşturma](#element-oluşturma)
26+
- [Element oluşturma](#element-oluşturma-1)
27+
- [Bir üst elemente child ekleme](#bir-üst-elemente-child-ekleme)
28+
- [Bir üst ebeveyn(kapsar element) bir child elementi kaldırma](#bir-üst-ebeveynkapsar-element-bir-child-elementi-kaldırma)
29+
- [Yukarıdaki kod parçacığı tüm child elementleri temizledi.](#yukarıdaki-kod-parçacığı-tüm-child-elementleri-temizledi)
30+
- [Egzersizler](#egzersizler)
31+
- [Egzersiz: Level 1](#egzersiz-level-1)
32+
- [Egzersiz: Level 2](#egzersiz-level-2)
33+
- [Egzersiz: Level 3](#egzersiz-level-3)
34+
35+
# Gün 22
36+
37+
## DOM(Document Object Model)-Gün 2
38+
39+
### Element Oluşturma
40+
41+
HTML element oluşturmak için etiket adını kullanırız. JavaScript kullanarak HTML element oluşturmak oldukça basittir . _document.createElement()_ metodunu kullanırız. Bu metod bir HTML element etiket adını string olarak alır.
42+
43+
```js
44+
// syntax
45+
document.createElement('tagname')
46+
```
47+
48+
```html
49+
<!DOCTYPE html>
50+
<html>
51+
52+
<head>
53+
<title>Document Object Model:30 Days Of JavaScript</title>
54+
</head>
55+
56+
<body>
57+
58+
<script>
59+
let title = document.createElement('h1')
60+
title.className = 'title'
61+
title.style.fontSize = '24px'
62+
title.textContent = 'Creating HTML element DOM Day 2'
63+
64+
console.log(title)
65+
</script>
66+
</body>
67+
68+
</html>
69+
```
70+
71+
### Element oluşturma
72+
73+
Birden fazla element oluşturmak için döngü kullanmalıyız. Döngü kullanarak istediğimiz kadar HTML elementi oluşturabiliriz.
74+
Element oluşturduktan sonra, HTML nesnenin farklı özelliklerine değer atayabiliriz.
75+
76+
```html
77+
<!DOCTYPE html>
78+
<html>
79+
80+
<head>
81+
<title>Document Object Model:30 Days Of JavaScript</title>
82+
</head>
83+
84+
<body>
85+
86+
<script>
87+
let title
88+
for (let i = 0; i < 3; i++) {
89+
title = document.createElement('h1')
90+
title.className = 'title'
91+
title.style.fontSize = '24px'
92+
title.textContent = i
93+
console.log(title)
94+
}
95+
</script>
96+
</body>
97+
98+
</html>
99+
```
100+
101+
### Bir üst elemente child ekleme
102+
103+
Oluşturduğumuz elementi HTML'de görmek için, üst element olarak child olarak eklememiz gerekir. HTML'de body'sine *document.body* ile erişebiliriz. *document.body* *appendChild()* metodunu destekler. Aşağıdaki örneğe bakın.
104+
105+
```html
106+
<!DOCTYPE html>
107+
<html>
108+
109+
<head>
110+
<title>Document Object Model:30 Days Of JavaScript</title>
111+
</head>
112+
113+
<body>
114+
115+
<script>
116+
// creating multiple elements and appending to parent element
117+
let title
118+
for (let i = 0; i < 3; i++) {
119+
title = document.createElement('h1')
120+
title.className = 'title'
121+
title.style.fontSize = '24px'
122+
title.textContent = i
123+
document.body.appendChild(title)
124+
}
125+
</script>
126+
</body>
127+
</html>
128+
```
129+
130+
### Bir üst ebeveyn(kapsar element) bir child elementi kaldırma
131+
132+
HTML oluşturduktan sonra, element veya elementleri kaldırmak isteyebiliriz ve *removeChild()* metodunu kullanabiliriz.
133+
134+
**Örnek:**
135+
136+
```html
137+
<!DOCTYPE html>
138+
<html>
139+
140+
<head>
141+
<title>Document Object Model:30 Days Of JavaScript</title>
142+
</head>
143+
144+
<body>
145+
<h1>Removing child Node</h1>
146+
<h2>Asabeneh Yetayeh challenges in 2020</h1>
147+
<ul>
148+
<li>30DaysOfPython Challenge Done</li>
149+
<li>30DaysOfJavaScript Challenge Done</li>
150+
<li>30DaysOfReact Challenge Coming</li>
151+
<li>30DaysOfFullStack Challenge Coming</li>
152+
<li>30DaysOfDataAnalysis Challenge Coming</li>
153+
<li>30DaysOfReactNative Challenge Coming</li>
154+
<li>30DaysOfMachineLearning Challenge Coming</li>
155+
</ul>
156+
157+
<script>
158+
const ul = document.querySelector('ul')
159+
const lists = document.querySelectorAll('li')
160+
for (const list of lists) {
161+
ul.removeChild(list)
162+
163+
}
164+
</script>
165+
</body>
166+
167+
</html>
168+
```
169+
170+
Önceki bölümde gördüğümüz gibi, bir üst elementin tüm iç HTML elementlerini veya child elementleri *innerHTML* metodu ve özelliklerini kullanarak ortadan kaldırmak için daha iyi bir yol mevcut.
171+
172+
```html
173+
<!DOCTYPE html>
174+
<html>
175+
176+
<head>
177+
<title>Document Object Model:30 Days Of JavaScript</title>
178+
</head>
179+
180+
<body>
181+
<h1>Removing child Node</h1>
182+
<h2>Asabeneh Yetayeh challenges in 2020</h1>
183+
<ul>
184+
<li>30DaysOfPython Challenge Done</li>
185+
<li>30DaysOfJavaScript Challenge Done</li>
186+
<li>30DaysOfReact Challenge Coming</li>
187+
<li>30DaysOfFullStack Challenge Coming</li>
188+
<li>30DaysOfDataAnalysis Challenge Coming</li>
189+
<li>30DaysOfReactNative Challenge Coming</li>
190+
<li>30DaysOfMachineLearning Challenge Coming</li>
191+
</ul>
192+
193+
<script>
194+
const ul = document.querySelector('ul')
195+
ul.innerHTML = ''
196+
</script>
197+
</body>
198+
199+
</html>
200+
```
201+
202+
Yukarıdaki kod parçacığı tüm child elementleri temizledi.
203+
---
204+
205+
🌕 Çok özel birisin, her gün ilerliyorsun. Şimdi, ihtiyaç duyduğunda oluşturulmuş bir DOM elementini nasıl yok edeceğini biliyorsun. DOM'u öğrendin ve şimdi uygulamaları inşa etme ve geliştirme becerisine sahipsin. Öğrenme yolunda sadece sekiz gün kaldı. Şimdi beynin ve kasların için bazı egzersizler yap.
206+
207+
## Egzersizler
208+
209+
### Egzersiz: Level 1
210+
211+
1. HTML belgesinde bir div kapsayıcısı oluşturun ve dinamik olarak 0 ila 100 sayılar oluşturun ve kapsayıcı div'e ekleyin.
212+
- Çift sayıların arka planı yeşil
213+
- Tek sayılar arka planı sarı
214+
- Prime numaraları arka planı kırmızı
215+
216+
![Number Generator](../../images/projects/dom_min_project_day_number_generators_2.1.png)
217+
218+
### Egzersiz: Level 2
219+
220+
1. Ülkeler dizisini kullanarak tüm ülkeleri görüntüleyin. Tasarımı görün.
221+
222+
![World Countries List](../../images/projects/dom_min_project_countries_aray_day_2.2.png)
223+
224+
### Egzersiz: Level 3
225+
226+
227+
228+
Bu projenin gereksinimlerini jpg ve gif görüntülerinden her ikisinden de kontrol edin. Tüm veri ve CSS, yalnızca JavaScript kullanılarak uygulanmıştır. Veri starter klasörü proje_3'de bulunmaktadır. [*Açılır menü*](https://www.w3schools.com/tags/tag_details.asp) düğmesi detaylar HTML öğesi kullanılarak oluşturulmuştur.
229+
230+
231+
![Challenge Information](../../images/projects/dom_mini_project_challenge_info_day_2.3.gif)
232+
233+
![Challenge Information](../../images/projects/dom_mini_project_challenge_info_day_2.3.png)
234+
235+
🎉 Tebrikler ! 🎉
236+
237+
[<< Gün 21](../Turkish/../21_Day_DOM/21_day_dom.md) | [Gün 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md)

‎Turkish/22_Day_Manipulating_DOM_object/22_day_starters/design/dom_min_project_challenge_info_day_1.1.gif

536 KB
Loading

‎Turkish/22_Day_Manipulating_DOM_object/22_day_starters/design/dom_min_project_countries_aray_day_2.2.png

866 KB
Loading

‎Turkish/22_Day_Manipulating_DOM_object/22_day_starters/design/dom_min_project_day_number_generators_2.1.png

315 KB
Loading

‎Turkish/22_Day_Manipulating_DOM_object/22_day_starters/design/dom_mini_project_challenge_info_day_2.3.gif

1.69 MB
Loading

‎Turkish/22_Day_Manipulating_DOM_object/22_day_starters/design/dom_mini_project_challenge_info_day_2.3.png

373 KB
Loading

‎Turkish/22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>30DaysOfJavaScript:22 Day: Number Generator </title>
6+
</head>
7+
8+
<body>
9+
<h1>Number Generator</h1>
10+
<h2>30DaysOfJavaScript:DOM Day 2</h2>
11+
<h3>Author: Asabeneh Yetayeh</h3>
12+
<div class="wrapper">
13+
14+
</div>
15+
16+
17+
18+
<script src="./scripts/main.js"></script>
19+
20+
</body>
21+
22+
</html>

‎Turkish/22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
console.log(countries)
2+
alert('Open the console and check if the countries has been loaded')

0 commit comments

Comments
 (0)