Programlamaya ilk girişim programlama dili Java ile oldu ve Java ile programlama kavramlarından biri Nesne Yönelimli Programlama (OOP) idi. Kısacası, bu kavram , geliştiricileri yazılımlarını gerçek hayattaki nesneleri modellemeye çalışacak şekilde kodlamaya teşvik eder.
- Yazılımınızın farklı bileşenleri iyi bir şekilde temsil edilebilir ve
- Benzer endişelerin özellikleri bir arada gruplanabilir.
Bu konsept hakkında daha fazla bilgi edinmek için buraya göz atın
JavaScript, çok paradigmalı bir dildir, yani Java gibi dillerden farklı olarak herhangi bir programlama kavramını zorlamaz. Bu zorunlu olarak kötü bir şey değil, sadece JavaScript kodumuzu yazmak için Nesneye Dayalı Programlama iyiliğini birleştirebileceğimiz anlamına geliyor.
Bu yazıda, bir Öğrenci Kayıt Formu oluştururken bunun alıştırmasını yapacağız.
- Örneğimizi göstermek için ES6 sınıflarını kullanacağız. JavaScript ES5, prototipleri kullanarak farklı bir yaklaşıma sahiptir, ancak ES6 sınıflarını daha basit ve okunması daha kolay buluyorum.
Uygulamaya geçmeden önce, nesne yönelimli programlamadaki bazı anahtar kelimelerin anlamlarına bakmalıyız.
Sınıfları örnekleme
OOP dünyasında, bir sınıfın Örneklenmesi, benzersiz / paylaşılan özelliklere sahip bir nesnenin yaratıldığı anlamına gelir. Örnek;
class Student {}
//If I wanted to create a student object then I would write the expression below
//to instantiate it.
const student1 = new Student();
//The code on the right represents the instantiation of the class of Student.Constructors
Bunlar, her nesneyi oluşturmak istediğiniz özellikleri içerir ve JavaScript'te bunu biz yaparız;
class Student {
constructor(name, email, address, course){
this.name = name;
this.email = email;
this.address = address;
this.course = course;
}
}
// When instantiating a new object with constructor properties we do it this way
const student1 = new Student('Tayo', '[email protected]', '56 Mongromery House m7 780', 'Social Science');
const student2 = new Student('Peter', '[email protected]', '12 Grunt Road m6 100', 'Nursing');
console.log(student1)
console.log(student2)
//You can see that we have constructed two different objects.Sınıf Metodları
Sınıflar, aynı zamanda, başlatmadan sonra her nesnede çağrılabilecek yöntemler de içerebilir. Örneğin;
class Student {
constructor(name, email, address, course){
this.name = name;
this.email = email;
this.address = address;
this.course = course;
}
getName(){
return `Student name is ${this.name}`
}
}
const student2 = new Student('Peter', '[email protected]', '12 Grunt Road m6 100', 'Nursing');
console.log(student2.getName()) //This should print out the student name PeterInheritance/ Extending Sınıfları
Sınıf mirası, alt sınıflarına benzer özelliklere veya yöntemlere sahip bir süper sınıfa sahip olduğumuz ve daha sonra alt sınıfların kendi üst sınıflarından kopyaladığı yaygın bir kod uygulamasıdır. Çocuk sınıfı, gerekirse sınıf işlevselliğini daha da genişletebilir.
Bu, birden çok sınıf arasında benzer özellikleri tekrarlamadığımızdan emin olmanın güzel bir yolu. Sınıf Öğrencimizin ebeveyn sınıfını genişlettiğini varsayarsak. Bu nedenle, bir kişinin adı, yaşı ve adresi olabileceğini biliyoruz, ancak öğrenci olmayabileceği için kursları olmayabilir. Bunu böyle temsil ediyoruz;
class Person {
constructor(name, email, address){
this.name = name;
this.email = email;
this.address = address;
}
getName(){
return `Student name is ${this.name}`
}
}
class Student extends Person {
constructor(name, email, address, course){
super(name, email, address);
this.course = course;
}
}
const student2 = new Student('Hannah', '[email protected]', '1 Medley m3 493', 'Economics');
console.log(student2.getName()) // This will log the new name of student, HannahKalıtım, alt nesnelerin tüm üst öğe özelliklerini ve yöntemlerini miras almasına izin verir. Bu durumda Öğrenci sınıfı, uygun form adını, yaşını ve adresini ve ayrıca getName () yöntemini miras almıştır. Ayrıca Öğrenci sınıfına daha fazla yöntem veya özellik ekleyebilirsiniz.
Pratik Örnek - JavaScript kullanarak OOP Uygulaması
OOP ile nesneleri nesneler olarak temsil etmeye çalıştığımızı ve bu nesnelerin normalde nesnenin işlevselliğini temsil eden işlevlere, özelliklere vb. Sahip olduğunu söylediğimi hatırlıyor musunuz? Bu durumda, Öğrenci Kayıt uygulamasını oluşturmak için iki nesnemiz olur .
- Öğrenci Nesnesi - Ad, e-posta, adres vb. Öğrenci bilgileriyle ilgili verileri depolayan
- UI Nesnesi - Bu nesne, kullanıcı arayüzündeki herhangi bir değişikliği işlemekten sorumlu olacaktır.
Öğrenci kayıt formumuz bu şekilde görünür ve öğrencileri ve kullanıcı arayüzünü temsil eden sınıf nesneleri
Burada , formumuzun altındaki tabloda işlenmek üzere formumuzdaki değerleri alacak bir Öğrenci sınıfı oluşturduk. JavaScript'te sınıfları kullanarak bunu nasıl yapacağımıza bir göz atalım;
//Create event listeners
document.getElementById('student-form').addEventListener('submit', function(e){
const name = document.getElementById('name').value;
email = document.getElementById('email').value;
address = document.getElementById('address').value;
course = document.getElementById('course').value;
//Initialise student
const student = new Student(name, email, address, course);
//Initialise UI
const ui = new UI();
//Validate
if(name === '' || email === '' || address === '' || course === ''){
ui.showAlert('Please fill in all fields', 'error')
}else{
ui.addStudentToList(student);
ui.clearFields();
ui.showAlert("Student added", "success")
}
e.preventDefault();
})Yukarıdaki yaptığımız örnekte neler olduğuna bir bakalım;
- Öğrenci kaydı için forma bir olay dinleyicisi eklendi
- Form gönderildikten sonra ad, e-posta, adres ve kurs için giriş değerlerini gösterildiği gibi değişkenler halinde saklamak istiyoruz.
- Değerler alındıktan sonra öğrenci sınıfımızı değerlerle somutlaştırabiliriz .
- Ayrıca UI sınıfımızı da başlattık
- Oluşturduğumuz UI sınıfının örneği, showAlert, addStudentToList ve clearFields gibi bazı işlevlerini çağırmamıza olanak tanır .
- Giriş alanları boşsa uygun bir kullanıcı arabirimi işlevi çağrılır, aksi takdirde her şey geçerliyse öğrenciyi listeye ekleyebilir, giriş alanlarını temizleyebilir ve bir başarı uyarısı gösterebiliriz.
Bu yöntemlerin uygulanmasına bakalım;
//UI construtor
class UI {
//add student to list function
addStudentToList(student){
const list = document.getElementById('student-list');
//create a tr element
const row = document.createElement('tr');
//insert cols in tr
row.innerHTML = `
<td>${student.name}</td>
<td>${student.email}</td>
<td>${student.address}</td>
<td>${student.course}</td>
<td><a href="#" class="delete">X</a></td>
`;
list.appendChild(row);
}
}Sınıfta İlk yöntemdir addStudentToList burada
- öğrenci nesnesini bir argüman olarak kabul edin
- GetElementById kullanarak tablo gövdesi öğesini seçin
- Ardından bir tr öğesi oluşturun
- Ardından, HTML'mizi oluşturduğumuz tr öğesine ekleriz ve ardından görüntülemek istediğimiz Öğrenci sınıfı özelliklerinin her birine erişiriz.
- Bundan sonra satır tablo gövdesine eklenir.
Harika, clearField yöntemi olan UI sınıfımıza ikinci endişe yöntemini ekleyebiliriz
clearFields(){
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('address').value = '';
document.getElementById('course').value = '';
}
} // UI Class closing bracesBu, form gönderildikten sonra formdaki giriş alanını sıfıra ayarlayan basit bir işlevdir.
Ve son olarak, iki parametreyi alan son showAlert , birincisi uyarı mesajı ve ikinci bağımsız değişken, sınıfın adıdır.
showAlert(message, className){
const div = document.createElement('div');
div.className = `alert ${className}`;
div.appendChild(document.createTextNode(message));
//get parent
const container = document.querySelector('.container');
const form = document.getElementById('student-form');
container.insertBefore(div, form);
setTimeout(() => {
document.querySelector('.alert').remove();
}, 3000);
}
} // UI Class closing bracesBu işlevde
- Bir div oluşturulur ve sınıf adları uyarılır ve aktarılan sınıf adı buna eklenir
- İletilen mesajla bir metin düğümü oluşturulur
- Uyarı mesajının nereye eklenmesi gerektiğini yönlendirmek için hem kap hem de form seçilir
- Ve bu durumda, oluşturduğumuz div'i form ile container div arasına eklemek istiyoruz.
- 3 saniye sonra uyarı çubuğu kaldırılır.
Bu, kodunuzu yazmanın harika bir yoludur çünkü her şeyi daha yeniden kullanılabilir hale getirir. UI sınıfımıza bir silme yöntemi ekleyebilir misiniz? Bi dene. Burada silinecek hedefleme öğeleri hakkında bilgiye ihtiyacınız olacak
Şimdiye kadar kodumuzu test etmek için çıktı öyle görünüyor.
Bunu yararlı bulduysanız, lütfen gönderiye tepki verin, paylaşın veya aşağıya bir yorum bırakın!
