JavaScript'te OOP Kullanarak Bir Not Defteri Uygulaması Geliştirme

Adı : JavaScript'te OOP Kullanarak Bir Not Defteri Uygulaması Geliştirme

Günümüzde teknolojinin gelişmesiyle birlikte, kişisel bilgisayarlarımızda veya mobil cihazlarımızda verilerimizi kaydetmek için not defteri uygulamaları oldukça popüler hale geldi. Bu nedenle, bu yazıda JavaScript'te OOP kullanarak bir not defteri uygulaması geliştirme konusu ele alınacaktır.

JavaScript, nesne yönelimli programlama (OOP) prensiplerine dayalı bir programlama dilidir. Bu, birçok nesneyi tasarlayabileceğiniz ve onları birbirleriyle iletişim halinde tutabileceğiniz anlamına gelir. Bu prensipleri kullanarak, bir not defteri uygulaması oluşturabiliriz.

Not Defteri Uygulaması

Bu uygulama, notlarınızı kaydetmenize ve düzenlemenize olanak tanıyacaktır. Notlarınızı eklemek, silmek veya güncellemek için bir form sunulacaktır. Ayrıca, notlarınızı listeleyebilir veya arayabilirsiniz.

Uygulamamızda kullanacağımız nesnelerin listesi şöyledir:

- Not: Her notun içeriği, başlığı ve tarihi olacaktır.
- NotListesi: Tüm notlarımızı ve bunları listelemek, aramak veya yönetmek için gerekli işlevleri içerecektir.
- KullanıcıArayüzü: Formları göstermek ve kullanıcının eylemlerini işlemek için kullanılacaktır.

Bu nesnelerden biri olan Not nesnesi, şu şekilde tasarlanabilir:

```javascript
class Not {
constructor(baslik, icerik) {
this.baslik = baslik;
this.icerik = icerik;
this.tarih = new Date();
}
}
```

Yukarıdaki kod, bir Not nesnesinin nasıl oluşturulacağını göstermektedir. Not'ların başlığı, içeriği ve tarihi olacak şekilde tasarlanmıştır.

NotListesi nesnemiz ise, tüm notları yönetmek ve listelemek için gerekli işlevleri içerir. Not listesi nesnemizi aşağıdaki şekilde tasarlayabiliriz:

```javascript
class NotListesi {
constructor() {
this.notlar = [];
}

yeniNot(not) {
this.notlar.push(not);
}

notSil(baslik) {
this.notlar = this.notlar.filter((not) => not.baslik !== baslik);
}

notAra(aramaKelimesi) {
return this.notlar.filter(
(not) =>
not.baslik.toLowerCase().includes(aramaKelimesi.toLowerCase()) ||
not.icerik.toLowerCase().includes(aramaKelimesi.toLowerCase())
);
}
}
```

Yukarıdaki kodda, NotListesi nesnesindeki yeniNot() yöntemi, bir Not nesnesini listeye eklerken, notSil() yöntemi, belirtilen başlığa sahip Not nesnesini listeden kaldırır. notAra () yöntemi, verilen arama kelimesine sahip tüm Not nesnelerini döndürür.

Son olarak, kullanıcı arayüzü (UI) işlevleri, kullanıcının notlarını yönetmesine olanak tanır. Bu işlevler aşağıdaki şekilde tasarlanabilir:

```javascript
class KullaniciArayuzu {
constructor() {
this.baslikInput = document.querySelector(\"#baslik\");
this.icerikInput = document.querySelector(\"#icerik\");
this.ekleBtn = document.querySelector(\"#ekleBtn\");
this.silBtn = document.querySelector(\"#silBtn\");
this.liste = document.querySelector(\"#notlar\");
this.araInput = document.querySelector(\"#araInput\");
this.araBtn = document.querySelector(\"#araBtn\");
}

temizleAlanlar() {
this.baslikInput.value = \"\";
this.icerikInput.value = \"\";
}

yeniNotuEkle(not) {
const item = document.createElement(\"li\");
item.innerHTML = `
${not.baslik}

${not.icerik}

`;
this.liste.appendChild(item);
}

notuSil(baslik) {
Array.from(this.liste.children).forEach((item) => {
if (item.firstElementChild.textContent === baslik) {
item.remove();
}
});
}

arananlariGoster(notlar) {
this.liste.innerHTML = \"\";
notlar.forEach((not) => {
const item = document.createElement(\"li\");
item.innerHTML = `
${not.baslik}

${not.icerik}

`;
this.liste.appendChild(item);
});
}
}
```

Yukarıdaki KullaniciArayuzu sınıfı, kullanıcı arayüzü işlevlerini içerir. Bu işlevler arasında arananlariGoster(), notuSil() ve yeniNotuEkle() gibi işlevler yer alır. Buna ek olarak, temizleAlanlar() işlevi, form alanlarını temizlemekle görevlidir.

Sık Sorulan Sorular

1. NotListesi nesnesinin içindeki notlar dizin ne işe yarar?

notlar dizini, NotListesi sınıfı tarafından yönetilen tüm notların bir dizisidir. Tüm yeni notlar bu diziye eklenir ve belirtilen notlar buradan kaldırılır.

2. KullaniciArayuzu nesnesinin arananlariGoster() yöntemi nasıl çalışır?

bu yöntem, verilen Not dizisini alır ve bunları listelemek için HTML içindeki uygun düğümleri oluşturur. Her Not'un başlık ve içeriği, öğelerin HTML koddaki uygun alanlarına yerleştirilir.

3. Bu not defteri uygulaması için tasarladığımız JavaScript sınıflarını başka bir uygulamada kullanabilir miyiz?

Evet, bu sınıfları başka bir uygulamada da kullanabilirsiniz. Bu sınıfları kullanan bir web uygulaması geliştirebilir veya bu kodu modül olarak yazabilir ve başka JavaScript uygulamalarında kullanabilirsiniz.

4. Kodunuzu geliştirmek için ne gibi başka fikirlerin var?

Örneğin, bu not defteri uygulamasına farklı not türleri ekleyebilirsiniz, örneğin, yalnızca metin içeren notlar yerine, resim veya bağlantı ekleyebileceğiniz notlar oluşturabilirsiniz. Bu uygulamada, kullanıcılara notları birkaç farklı şekilde sıralamalarına özellikler eklenerek de geliştirilebilir."