Merge branch 'Asabeneh:master' into patch-1

pull/411/head
Ethan 3 years ago committed by GitHub
commit aa388fc61e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -13,10 +13,17 @@
</sub>
<div>
🇬🇧 [English](../readMe.md)
🇪🇸 [Spanish](../Spanish/readme.md)
🇷🇺 [Russian](./README.md)
🇬🇧 [English](../readMe.md)
🇪🇸 [Spanish](../Spanish/readme.md)
🇮🇹 [Italian](../Italian/readMe.md)
🇷🇺 [Russian](./RU/README.md)
🇹🇷 [Turkish](../Turkish/readMe.md)
🇦🇿 [Azerbaijan](../Azerbaijani/readMe.md)
🇰🇷 [Korean](../Korea/README.md)
🇻🇳 [Vietnamese](../Vietnamese/README.md)
🇵🇱 [Polish](../Polish/readMe.md)
🇧🇷 [Portuguese](../Portuguese/readMe.md)
</div>

@ -0,0 +1,409 @@
<div align="center">
<h1> 30 Günde Javascript: Objects - Nesneler</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Ocak 2023</small>
</sub>
</div>
[<< 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)
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_21.png)
- [Day 21](#day-21)
- [Belge Nesne Modeli (DOM) - Gün 21](#belge-nesne-modeli-dom---gün-21)
- [Elementi al](#elementi-al)
- [Etiket adına göre elementleri almak](#etiket-adına-göre-elementleri-almak)
- [Sınıf adına göre elementleri almak](#sınıf-adına-göre-elementleri-almak)
- [Id'ye göre bir elementi almak](#idye-göre-bir-elementi-almak)
- [querySelector yöntemi kullanarak elementleri almak](#queryselector-yöntemi-kullanarak-elementleri-almak)
- [Öznitelik eklemek](#öznitelik-eklemek)
- [setAttribute() metodu kullanarak öznitelik ekleme](#setattribute-metodu-kullanarak-öznitelik-ekleme)
- [SetAttribute olmadan öznitelik ekleme](#setattribute-olmadan-öznitelik-ekleme)
- [classList kullanarak sınıf ekleme](#classlist-kullanarak-sınıf-ekleme)
- [remove kullanarak sınıfı kaldırma](#remove-kullanarak-sınıfı-kaldırma)
- [HTML elemanına metin ekleme](#html-elemanına-metin-ekleme)
- [textContent kullanarak metin içeriği ekleme](#textcontent-kullanarak-metin-içeriği-ekleme)
- [innerHTML kullanarak Metin İçeriği Ekleme](#innerhtml-kullanarak-metin-i̇çeriği-ekleme)
- [Metin İçeriği](#metin-i̇çeriği)
- [Inner HTML](#inner-html)
- [Style elşeöe](#style-elşeöe)
- [Style Rengi Ekleme](#style-rengi-ekleme)
- [Arka plan rengi ekleme](#arka-plan-rengi-ekleme)
- [Yazı tipi boyutu ekleme](#yazı-tipi-boyutu-ekleme)
- [Egzersizler](#egzersizler)
- [Egzersiz: Level 1](#egzersiz-level-1)
- [Egzersiz: Level 2](#egzersiz-level-2)
- [Egzersiz: Level 3](#egzersiz-level-3)
- [DOM: Mini Proje 1](#dom-mini-proje-1)
# Day 21
## Belge Nesne Modeli (DOM) - Gün 21
HTML belgesi JavaScript nesnesi olarak yapılandırılmıştır. Her HTML elementi farklı özelliklere sahiptir ve bunları manipüle etmek için kullanılabilir. JavaScript kullanarak HTML elementlerini almak, oluşturmak, eklemek veya kaldırmak mümkündür. Örnekler aşağıda incelenebilir. JavaScript ile HTML elementi seçmek, CSS ile seçmek ile benzerdir. HTML elementini seçmek için etiket adı, id, sınıf adı veya diğer öznitelikler kullanılır.
### Elementi al
JavaScript kullanarak zaten oluşturulmuş elementlere veya elementlere erişebiliriz. Elementlere erişmek veya almak için farklı metodlar kullanırız. Aşağıdaki kodda dört _h1_ elementi var. _h1_ elementlerine erişmek için farklı metodları inceleyelim.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Object Model</title>
</head>
<body>
<h1 class='title' id='first-title'>First Title</h1>
<h1 class='title' id='second-title'>Second Title</h1>
<h1 class='title' id='third-title'>Third Title</h1>
<h1></h1>
</body>
</html>
```
#### Etiket adına göre elementleri almak
**_getElementsByTagName():_** bir etiket adını dize olarak alan bir parametre alır ve bu yöntem bir HTMLCollection nesnesi döndürür. HTMLCollection bir HTML elementlerinin array benzeri bir nesnesidir. Uzunluk özelliği koleksiyonun boyutunu sağlar. Bu yöntemi kullandığımızda, index kullanarak veya her bir öğeyi tek tek geçerek bireysel elementlere erişiriz. HTMLCollection tüm dizi yöntemlerini desteklemez, bu yüzden forEach yerine düzenli for döngüsü kullanmalıyız.
```js
// syntax
document.getElementsByTagName('tagname')
```
```js
const allTitles = document.getElementsByTagName('h1')
console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) {
console.log(allTitles[i]) // prints each elements in the HTMLCollection
}
```
#### Sınıf adına göre elementleri almak
**_getElementsByClassName()_** metodu bir HTMLCollection nesnesi döndürür. HTMLCollection, HTML elementlerinin dizi benzeri bir listesidir. Uzunluk özelliği koleksiyonun boyutunu sağlar. Tüm HTMLCollection elementlerini dolaşmak mümkündür. Örnek aşağıda gösterilmektedir.
```js
//syntax
document.getElementsByClassName('classname')
```
```js
const allTitles = document.getElementsByClassName('title')
console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) {
console.log(allTitles[i]) // prints each elements in the HTMLCollection
}
```
#### Id'ye göre bir elementi almak
**_getElementsById()_** tek bir HTML elementine yönelir. Id'yi # olmadan bir argüman olarak geçiririz.
```js
//syntax
document.getElementById('id')
```
```js
let firstTitle = document.getElementById('first-title')
console.log(firstTitle) // <h1>First Title</h1>
```
#### querySelector yöntemi kullanarak elementleri almak
_document.querySelector_ yöntemi etiket adı, kimlik veya sınıf adına göre HTML veya HTML elementlerini seçebilir.
**_querySelector:_** etiket adı, kimlik veya sınıf tarafından seçilen HTML elementini seçmek için kullanılabilir. Etiket adı kullanılırsa, yalnızca ilk element seçilir.
```js
let firstTitle = document.querySelector('h1') // select the first available h1 element
let firstTitle = document.querySelector('#first-title') // select id with first-title
let firstTitle = document.querySelector('.title') // select the first available element with class title
```
**_querySelectorAll:_** etiket adı veya sınıf tarafından seçilen html elementlerini seçmek için kullanılabilir. Döndürülen nodeList bir dizi benzeri nesne olup, dizi yöntemlerini destekler. Her nodeList öğesini dolaşmak için **_for döngüsü_** veya **_forEach_** kullanabiliriz.
```js
const allTitles = document.querySelectorAll('h1') # selects all the available h1 elements in the page
console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) {
console.log(allTitles[i])
}
allTitles.forEach(title => console.log(title))
const allTitles = document.querySelectorAll('.title') // the same goes for selecting using class
```
### Öznitelik eklemek
HTML açılır etiketinde bir öznitelik eklenir ve element hakkında ek bilgi verir. Yaygın HTML öznitelikleri: id, class, src, style, href,disabled, title, alt. Dördüncü başlık için id ve class ekleyelim.
```js
const titles = document.querySelectorAll('h1')
titles[3].className = 'title'
titles[3].id = 'fourth-title'
```
#### setAttribute() metodu kullanarak öznitelik ekleme
**_setattribute()_** metodu, herhangi bir html öznitelik ekler. İki parametre alır: öznitelik türü ve öznitelik adı.
Dördüncü başlık için class ve id özniteliği ekleyelim.
```js
const titles = document.querySelectorAll('h1')
titles[3].setAttribute('class', 'title')
titles[3].setAttribute('id', 'fourth-title')
```
#### SetAttribute olmadan öznitelik ekleme
Normalde bir nitelik atamak için normal nesne atama yöntemini kullanabiliriz ancak bu tüm elemanlar için geçerli olmayabilir. Bazı nitelikler DOM nesnesi özellikleridir ve direk olarak atanabilirler. Örneğin, id ve class gibi.
```js
//another way to setting an attribute
titles[3].className = 'title'
titles[3].id = 'fourth-title'
```
#### classList kullanarak sınıf ekleme
classList yöntemi ek sınıf eklemek için iyi bir yöntemdir. Eğer bir sınıf var ise, orijinal sınıfı geçersiz kılmaz, aksine eleman için ek sınıf ekler.
```js
//another way to setting an attribute: append the class, doesn't over ride
titles[3].classList.add('title', 'header-title')
```
#### remove kullanarak sınıfı kaldırma
Eklemeye benzer şekilde, bir elemandan sınıfı da kaldırabiliriz. Bir elemandan belirli bir sınıfı kaldırabiliriz.
```js
//another way to setting an attribute: append the class, doesn't over ride
titles[3].classList.remove('title', 'header-title')
```
#### HTML elemanına metin ekleme
HTML bir açılış etiketi, bir kapatma etiketi ve bir metin içeriğinden oluşur. Metin içeriğini _textContent_ özelliği veya \*innerHTML kullanarak ekleyebiliriz.
#### textContent kullanarak metin içeriği ekleme
_textContent_ özelliği HTML elemanına metin eklemek için kullanılır.
```js
const titles = document.querySelectorAll('h1')
titles[3].textContent = 'Fourth Title'
```
#### innerHTML kullanarak Metin İçeriği Ekleme
Birçok insan _textContent_ ve _innerHTML_ arasında karışır. _textContent_ bir HTML elemanına metin eklemek için tasarlanmıştır ancak innerHTML bir metin veya HTML elemanı veya elemanları bir çocuk olarak ekleyebilir.
#### Metin İçeriği
Biz bir metin atamak için *textContent* HTML nesne özelliğini kullanırız.
```js
const titles = document.querySelectorAll('h1')
titles[3].textContent = 'Fourth Title'
```
##### Inner HTML
Bir ebeveyn elemana tamamen yeni bir child içeriği eklemek veya değiştirmek istediğimizde innerHTML özelliğini kullanırız. Atadığımız değer HTML elemanlarından oluşan bir dizi olacaktır.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript for Everyone:DOM</title>
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in 2020</h1>
<h2>30DaysOfJavaScript Challenge</h2>
<ul></ul>
</div>
<script>
const lists = `
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>`
const ul = document.querySelector('ul')
ul.innerHTML = lists
</script>
</body>
</html>
```
innerHTML özelliği, bir üst elemanın tüm çocuklarını kaldırmamıza da olanak tanır. removeChild() kullanmak yerine aşağıdaki yöntemi tavsiye ederim.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript for Everyone:DOM</title>
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in 2020</h1>
<h2>30DaysOfJavaScript Challenge</h2>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<script>
const ul = document.querySelector('ul')
ul.innerHTML = ''
</script>
</body>
</html>
```
### Style elşeöe
#### Style Rengi Ekleme
Başlıklarımıza biraz stil ekleyelim. Eğer elemanın indisi çift ise ona yeşil renk veririz, aksi halde kırmızı.
```js
const titles = document.querySelectorAll('h1')
titles.forEach((title, i) => {
title.style.fontSize = '24px' // all titles will have 24px font size
if (i % 2 === 0) {
title.style.color = 'green'
} else {
title.style.color = 'red'
}
})
```
#### Arka plan rengi ekleme
Başlıklarımıza biraz stil ekleyelim. Eğer elemanın indisi çift ise ona yeşil renk veririz, aksi halde kırmızı.
```js
const titles = document.querySelectorAll('h1')
titles.forEach((title, i) => {
title.style.fontSize = '24px' // all titles will have 24px font size
if (i % 2 === 0) {
title.style.backgroundColor = 'green'
} else {
title.style.backgroundColor = 'red'
}
})
```
#### Yazı tipi boyutu ekleme
Başlıklarımıza biraz stil ekleyelim. Eğer elemanın indisi çift ise ona 20px veririz, aksi halde 30px
```js
const titles = document.querySelectorAll('h1')
titles.forEach((title, i) => {
title.style.fontSize = '24px' // all titles will have 24px font size
if (i % 2 === 0) {
title.style.fontSize = '20px'
} else {
title.style.fontSize = '30px'
}
})
```
Fark etmişsinizdir, JavaScript içinde kullandığımızda css özellikleri camelCase olarak kullanılır. Aşağıdaki CSS özellikleri background-color'dan backgroundColor, font-size'dan fontSize, font-family'den fontFamily, margin-bottom'dan marginBottom şekilde değişir.
---
🌕 Şimdi, süper güçlerle tamamen şarj oldunuz, zorlu ve önemli en önemli kısmını tamamladınız ve genel olarak JavaScript ile. DOM öğrendiniz ve şimdi uygulamalar inşa etme ve geliştirme yeteneğiniz var. Şimdi beyniniz ve kaslarınız için bazı egzersizler yapın.
## Egzersizler
### Egzersiz: Level 1
1. index.html dosyası oluşturun ve yukarıdaki gibi dört p elemanı koyun: Etiket adını kullanarak **_document.querySelector(tagname)_** ile ilk paragrafı alın
2. id'lerine göre **_document.querySelector('#id')_** kullanarak her bir paragrafı alın
3. Etiket adlarına göre **_document.querySelectorAll(tagname)_** kullanarak tüm p elemanlarını nodeList olarak alın
4. nodeList içinde dolaşın ve her paragrafın metin içeriğini alın
5. Dördüncü paragrafta metin içeriği olarak **_Fourth Paragraph_** yerleştirin.
6. Farklı özellik ayarlama yöntemlerini kullanarak tüm paragraflar için id ve sınıf özelliklerini ayarlayın
### Egzersiz: Level 2
1. JavaScript kullanarak her paragrafın stilini değiştirin (örn. renk, arka plan, sınır, yazı tipi boyutu, yazı tipi ailesi)
2. Tüm paragrafları seçin ve her elemanın içinde dolaşın ve ilk ve üçüncü paragrafı yeşil, ikinci ve dördüncü paragrafı kırmızı renkte verin
3. Her paragrafın içeriğini, id'sini ve sınıfını ayarlayın
### Egzersiz: Level 3
#### DOM: Mini Proje 1
1. Aşağıdaki uygulamayı geliştirin, başlamak için aşağıdaki HTML elemanlarını kullanın. Başlangıç klasöründe aynı kodu alacaksınız. Tüm stiller ve işlevsellikleri sadece JavaScript kullanarak uygulayın.
- Yılın rengi her 1 saniyede değişiyor
- Tarih ve saat arka plan rengi saniyede bir değişiyor
- Tamamlanan meydan okuma arka planı yeşil
- Devam eden meydan okuma arka planı sarı
- Yaklaşan meydan okumaların arka planı kırmızı
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript for Everyone:DOM</title>
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in 2020</h1>
<h2>30DaysOfJavaScript Challenge</h2>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
</body>
</html>
```
![Project 1](../images/../21_Day_DOM/21_day_starter/dom_getting_elements_project_1.gif)
![Project 2](../images/../../images/projects/dom_min_project_challenge_info_day_1.1.png)
🎉 TEBRİKLER ! 🎉
[<< 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)

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 KiB

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:21 Day </title>
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in 2020</h1>
<h2>30DaysOfJavaScript Challenge</h2>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<script src="./scripts/main.js"></script>
</body>
</html>

@ -0,0 +1,237 @@
<div align="center">
<h1> 30 Days Of JavaScript: Manipulating DOM Object</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Ocak 2023</small>
</sub>
</div>
[<< Gün 21](../21_Day_DOM/21_day_dom.md) | [Gün 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md)
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_21.png)
- [Gün 22](#gün-22)
- [DOM(Document Object Model)-Gün 2](#domdocument-object-model-gün-2)
- [Element Oluşturma](#element-oluşturma)
- [Element oluşturma](#element-oluşturma-1)
- [Bir üst elemente child ekleme](#bir-üst-elemente-child-ekleme)
- [Bir üst ebeveyn(kapsar element) bir child elementi kaldırma](#bir-üst-ebeveynkapsar-element-bir-child-elementi-kaldırma)
- [Yukarıdaki kod parçacığı tüm child elementleri temizledi.](#yukarıdaki-kod-parçacığı-tüm-child-elementleri-temizledi)
- [Egzersizler](#egzersizler)
- [Egzersiz: Level 1](#egzersiz-level-1)
- [Egzersiz: Level 2](#egzersiz-level-2)
- [Egzersiz: Level 3](#egzersiz-level-3)
# Gün 22
## DOM(Document Object Model)-Gün 2
### Element Oluşturma
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.
```js
// syntax
document.createElement('tagname')
```
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
let title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = 'Creating HTML element DOM Day 2'
console.log(title)
</script>
</body>
</html>
```
### Element oluşturma
Birden fazla element oluşturmak için döngü kullanmalıyız. Döngü kullanarak istediğimiz kadar HTML elementi oluşturabiliriz.
Element oluşturduktan sonra, HTML nesnenin farklı özelliklerine değer atayabiliriz.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
let title
for (let i = 0; i < 3; i++) {
title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = i
console.log(title)
}
</script>
</body>
</html>
```
### Bir üst elemente child ekleme
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.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
// creating multiple elements and appending to parent element
let title
for (let i = 0; i < 3; i++) {
title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = i
document.body.appendChild(title)
}
</script>
</body>
</html>
```
### Bir üst ebeveyn(kapsar element) bir child elementi kaldırma
HTML oluşturduktan sonra, element veya elementleri kaldırmak isteyebiliriz ve *removeChild()* metodunu kullanabiliriz.
**Örnek:**
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Removing child Node</h1>
<h2>Asabeneh Yetayeh challenges in 2020</h1>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Done</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
<script>
const ul = document.querySelector('ul')
const lists = document.querySelectorAll('li')
for (const list of lists) {
ul.removeChild(list)
}
</script>
</body>
</html>
```
Ö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.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Removing child Node</h1>
<h2>Asabeneh Yetayeh challenges in 2020</h1>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Done</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.innerHTML = ''
</script>
</body>
</html>
```
Yukarıdaki kod parçacığı tüm child elementleri temizledi.
---
🌕 Ç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.
## Egzersizler
### Egzersiz: Level 1
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.
- Çift sayıların arka planı yeşil
- Tek sayılar arka planı sarı
- Prime numaraları arka planı kırmızı
![Number Generator](../../images/projects/dom_min_project_day_number_generators_2.1.png)
### Egzersiz: Level 2
1. Ülkeler dizisini kullanarak tüm ülkeleri görüntüleyin. Tasarımı görün.
![World Countries List](../../images/projects/dom_min_project_countries_aray_day_2.2.png)
### Egzersiz: Level 3
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.
![Challenge Information](../../images/projects/dom_mini_project_challenge_info_day_2.3.gif)
![Challenge Information](../../images/projects/dom_mini_project_challenge_info_day_2.3.png)
🎉 Tebrikler ! 🎉
[<< Gün 21](../Turkish/../21_Day_DOM/21_day_dom.md) | [Gün 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md)

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: Number Generator </title>
</head>
<body>
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
</div>
<script src="./scripts/main.js"></script>
</body>
</html>

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

@ -0,0 +1,195 @@
const countries = [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bhutan',
'Bolivia',
'Bosnia and Herzegovina',
'Botswana',
'Brazil',
'Brunei',
'Bulgaria',
'Burkina Faso',
'Burundi',
'Cambodia',
'Cameroon',
'Canada',
'Cape Verde',
'Central African Republic',
'Chad',
'Chile',
'China',
'Colombi',
'Comoros',
'Congo (Brazzaville)',
'Congo',
'Costa Rica',
"Cote d'Ivoire",
'Croatia',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Djibouti',
'Dominica',
'Dominican Republic',
'East Timor (Timor Timur)',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Ethiopia',
'Fiji',
'Finland',
'France',
'Gabon',
'Gambia, The',
'Georgia',
'Germany',
'Ghana',
'Greece',
'Grenada',
'Guatemala',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Honduras',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran',
'Iraq',
'Ireland',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jordan',
'Kazakhstan',
'Kenya',
'Kiribati',
'Korea, North',
'Korea, South',
'Kuwait',
'Kyrgyzstan',
'Laos',
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands',
'Mauritania',
'Mauritius',
'Mexico',
'Micronesia',
'Moldova',
'Monaco',
'Mongolia',
'Morocco',
'Mozambique',
'Myanmar',
'Namibia',
'Nauru',
'Nepal',
'Netherlands',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Norway',
'Oman',
'Pakistan',
'Palau',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines',
'Poland',
'Portugal',
'Qatar',
'Romania',
'Russia',
'Rwanda',
'Saint Kitts and Nevis',
'Saint Lucia',
'Saint Vincent',
'Samoa',
'San Marino',
'Sao Tome and Principe',
'Saudi Arabia',
'Senegal',
'Serbia and Montenegro',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'Spain',
'Sri Lanka',
'Sudan',
'Suriname',
'Swaziland',
'Sweden',
'Switzerland',
'Syria',
'Taiwan',
'Tajikistan',
'Tanzania',
'Thailand',
'Togo',
'Tonga',
'Trinidad and Tobago',
'Tunisia',
'Turkey',
'Turkmenistan',
'Tuvalu',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'United States',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Vatican City',
'Venezuela',
'Vietnam',
'Yemen',
'Zambia',
'Zimbabwe'
]

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: World Countries List</title>
</head>
<body>
<header>
<h2>World Countries List</h2>
<h4 id="total-countries"></h4>
<h3>30DaysOfJavaScript:DOM-Day-2</h3>
<h3>Author: Asabeneh Yetayeh</h3>
</header>
<div class="countries-container">
<div class="countries-wrapper">
</div>
</div>
<script src="./data/countries.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
</html>

@ -0,0 +1,198 @@
const asabenehChallenges2020 = {
description: 'Asabeneh Yetayeh challenges',
challengeTitle: 'Asabeneh Yetayeh challenges',
challengeSubtitle: '30DaysOfJavaScript Challenge',
challengeYear: 2020,
keywords: [
'HTML',
'HTML5',
'CSS',
'CSS3',
'JS',
'JavaScript',
'ES6',
'Promise',
'async await',
'Database',
'React',
'React Hooks',
'Context API',
'React Router',
'Web Storage',
'localStorage',
'sessionStorage',
'Redux',
'Node',
'MongoDB',
'SQL',
'API',
'DOM',
'data science',
'MERN',
'Python',
'Flask',
'Statistics',
'Linear Algebra',
'Numpy',
'Pandas',
'Scipy',
'Scikit-learn',
'Visualization',
'D3.js'
],
author: {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
titles: [
['🌱', 'Educator'],
['💻', 'Programmer'],
['🌐', 'Developer'],
['🔥', 'Motivator'],
['📔', 'Content Creator']
],
qualifications: [
'MSc. Computer Science Ongoing',
'BSc. Information and Communication Eng.',
'MSc. Food Technology',
'BSc.Food Technology'
],
socialLinks: [
{
social: 'LinkedIn',
url: 'https://www.linkedin.com/in/asabeneh/',
fontawesomeIcon: '<i class="fab fa-linkedin">'
},
{
social: 'Twitter',
url: 'https://twitter.com/Asabeneh',
fontawesomeIcon: '<i class="fab fa-twitter-square"></i>'
},
{
social: 'Github',
fontawesomeIcon: '<i class="fab fa-github-square"></i>',
url: 'https://github.com/Asabeneh'
},
{
social: 'DEV.to',
fontawesomeIcon: '',
url: 'https://dev.to/asabeneh'
}
],
skills: [
'Web Development',
'Data Analysis',
'Data Visualization',
'Programming',
'Databases',
'Developing API'
],
bio:
'I am an educator, developer, motivator and content creator. I am a life-long learner. If you like to know more about me checkout my LinkedIn or Github profile. Thank you so much for joining in my quest of changing everyone to developer.'
},
challenges: [
{
name: '30 Days Of Python',
topics: [
'Python',
'Flask',
'Numpy',
'Pandas',
'Statistics',
'API',
'MongoDB'
],
days: 30,
status: 'Done',
questions: 'Above 500',
projects: 'Two',
interviewQns: '',
githubUrl: 'https://github.com/Asabeneh/30-Days-Of-Python'
},
{
name: '30 Days Of JavaScript',
topics: ['JavaScript', 'ES6', 'Promise', 'async and await', 'DOM'],
days: 30,
status: 'Ongoing',
questions: 'Above 500',
projects: 'About 30',
interviewQns: '',
githubUrl: 'https://github.com/Asabeneh/30DaysOfJavaScript'
},
{
name: '30 Days Of HTML & CSS',
topics: ['CSS', 'Flex', 'Grid', 'CSS Animation'],
days: 30,
status: 'Coming',
questions: 'Above 500',
projects: 'Two',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of React',
topics: [
'React',
'React Router',
'Redux',
'Context API',
'React Hooks',
'MERN'
],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of ReactNative',
topics: ['ReactNative', 'Redux'],
days: 30,
status: 'Coming',
questions: '',
projects: 'Two',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of Fullstack',
topics: ['React', 'Redux', 'MongoDB', 'Node', 'MERN'],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of Data Analysis',
topics: ['Python', 'Numpy', 'Pandas', 'Statistics', 'Visualization'],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of Machine Learning',
topics: [
'Python',
'Numpy',
'Pandas',
'Scikit-learn',
'Scipy',
'Linear Algebra',
'Statistics',
'Visualization'
],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
}
]
}

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: Challenge Info</title>
</head>
<body>
<div class="wrapper">
</div>
<script src="./data/challenges_info.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
</html>
Loading…
Cancel
Save