Begin typing your search above and press return to search.
Son Eklenenler
26 Aralık 2024,
  1. Ana Sayfa
  2. JavaScript ile OOP Kullanılarak Öğrenci Kaydı Oluşturma

JavaScript ile OOP Kullanılarak Öğrenci Kaydı Oluşturma

JavaScript ile OOP Kullanılarak Öğrenci Kaydı Oluşturma

JavaScript ile OOP kullanarak öğrenci kaydı oluşturma işlemini öğrenin Bu derste, JavaScript nesne yönelimli programlama OOP kavramlarını öğrenerek, bir öğrenci kayıt sistemi oluşturacaksınız Üstelik, bu sistemi aynı zamanda basitçe güncelleyip, yeniden kullanabilirsiniz Adım adım detaylı anlatımlarla, OOP'nin avantajlarını keşfedin ve JavaScript uzmanı olmanız için ilk adımı atın

JavaScript ile OOP Kullanılarak Öğrenci Kaydı Oluşturma

JavaScript, web sitesi geliştirme sürecinde en çok kullanılan programlama dillerinden biridir. Nesne yönelimli programlama (OOP), JavaScript dilinde de kullanılabilmektedir.

Bu makalede, JavaScript ile OOP prensiplerini kullanarak öğrenci kaydı oluşturmayı öğreneceksiniz. Bu sayede, öğrenci bilgilerini saklamak ve yönetmek gibi işlemleri kolayca gerçekleştirebileceksiniz.

Bu süreci başarılı bir şekilde tamamlamak için, nesne yönelimli programlamayı anlamanız önemlidir. Nesne yönelimli programlama, programlama yaklaşımının bir çeşididir. Bu yaklaşımı kullanarak, gerçek dünyadaki nesnelere benzer bir yapıda programlar oluşturulur.

Bir öğrenci kaydı oluşturmak için öğrencinin bilgilerini, adı soyadı, numarası ve diğer özellikleri gibi, saklamak gerekir. Bu bilgileri, öğrenci nesnesi ile tanımlayarak oluşturabilirsiniz. Bu nesneye, özellikler ve metodlar ekleyerek öğrenci bilgilerini kolayca yönetebilirsiniz.

İkinci bölümde, bir HTML formu oluşturma adımlarını öğreneceksiniz. Bu form üzerinden, kayıt edeceğiniz öğrenci bilgilerini alabilirsiniz. Son olarak, öğrenci nesnesini kullanarak kayıt oluşturabileceksiniz. Bu adımların tamamını başarıyla tamamlamak için, nesne yönelimli programlama kavramlarını ve JavaScript dilini iyi bir şekilde anlamanız ve uygulamanız gerekmektedir.


OOP Nedir?

Nesne yönelimli programlama veya OOP, programlama dilinde bir tasarım yaklaşımıdır. Bu yaklaşımın temelinde, programda kullanılan veriler ve işlemler nesnelerle temsil edilir ve bu nesneler arasındaki ilişkiler belirtilir. Bu sayede daha organize ve anlaşılır kodlar yazılabilir.

Bir nesne, verileri ve bu verilere uygulanan işlemleri içeren bir yapıdır. OOP yaklaşımı, nesneler arasındaki yüksek düzeyde etkileşimi kolaylaştırır ve işlevleri modülerleştirerek kodun yeniden kullanılmasını sağlar. Bu şekilde, büyük programlar yazmak ve bakım yapmak daha kolay hale gelir.


Öğrenci Nesnesi Oluşturma

JavaScript ile öğrenci nesnesi oluşturmak oldukça kolaydır. Ancak öncelikle, nesne yönelimli programlama (OOP) yaklaşımını anlamak önemlidir. OOP, programlama için bir yaklaşım tarzıdır ve birbirleriyle bağlantılı verileri ve işlevleri bir araya getirerek "nesneler" oluşturmayı içerir.

Öğrenci nesnesi oluşturmak için ilk adım, özelliklerini (properties) belirlemektir. Öğrenci nesnesi için özellikler, öğrencinin adı, numarası, bölümü gibi bilgileri içerebilir.

Bunun için, JavaScript'te bir obje oluşturulur ve özellikleri objeye eklenir. Aşağıdaki örnek kodda, öğrenci adı ve numarası özellikleri "name" ve "number" anahtarları ile objeye eklenir.

var ogrenci = {  name: "",  number: ""};

Sonraki adım, öğrenci nesnesi için metodlar (methods) oluşturmaktır. Metodlar, öğrenci nesnesiyle ilgili işlemleri gerçekleştirmek için kullanılır. Örneğin, öğrenci bilgilerinin görüntülenmesi veya güncellenmesi için bir metod olabilir.

Öğrenci bilgilerinin görüntülenmesi için bir metod oluşturmak için aşağıdaki örnek kod kullanılabilir:

ogrenci.showInfo = function() {  console.log("Öğrenci Adı: " + this.name + ", Öğrenci Numarası: " + this.number);};

Bu kodda, "showInfo" metodunun "this" anahtar kelimesi ile öğrenci nesnesine bağlı olduğu unutulmamalıdır. Bu sayede, metod öğrenci nesnesinin özelliklerine erişebilir ve doğru bilgiyi görüntüleyebilir.

Öğrenci bilgilerinin güncellenmesi için bir metod oluşturmak da oldukça kolaydır. Aşağıdaki örnek kodda, "updateInfo" metodunun öğrenci nesnesine eklenmesi ve öğrenci bilgilerinin güncellenmesi sağlanır:

ogrenci.updateInfo = function(name, number) {  this.name = name;  this.number = number;  console.log("Öğrenci bilgileri güncellendi.");};

Bu kodda, "updateInfo" metodunun parametrelerinin kullanılması sayesinde öğrenci bilgileri güncellenebilir. Metodun sonunda bir mesaj görüntülenir ve güncelleme işlemi tamamlanır.

Öğrenci nesnesi oluşturmak ve metodlarını eklemek bu kadar kolaydır. İleri seviye özellikler eklemek, nesneleri birbirine bağlamak veya başka özellikler eklemek istenirse, JavaScript’in OOP yapısını daha detaylı olarak incelemek gereklidir.


Özellikler

Öğrenci nesnesi, öğrenci bilgilerini tutmak için kullanılacak bir veri modelidir. Bu nesne için özellikler oluşturma işlemi oldukça önemlidir. JavaScript'te bir nesnenin özellikleri, nesne oluşturulduktan sonra tanımlanabilir.

Bu nesne için en önemli özellikler öğrencinin adı ve öğrenci numarasıdır. Öğrenci nesnesi için bu özellikler name ve id olarak tanımlanabilir. Her özellik kendine özgü bir değer taşır ve bu değerle nesne oluşturulduktan sonra değiştirilebilir.

Öğrenci nesnesi oluşturulurken ayrıca, öğrencinin sınıfı, bölümü gibi diğer özellikler de tanımlanabilir. Bu özellikler de class ve department gibi farklı isimlerle tanımlanabilir. Ayrıca, öğrencinin not ortalaması gibi numerik veriler de bu özellikler arasında yer alabilir.

JavaScript'te bir nesne için Object.defineProperty() metodunu kullanarak özellikler tanımlanabilir. Bu metod ile özelliklerin oluşturulması sırasında belirli kurallar ve sınırlamalar da belirlenebilir. Örneğin, öğrenci numarası için sadece sayı kullanılabilir koşulu belirlenebilir ya da öğrencinin adının sadece harf ve boşluk karakterleri ile yazılabileceği sınırlandırılabilir.

Öğrenci nesnesi için oluşturulan özellikler, nesnenin kullanım alanına ve amaçlarına göre değişebilir. Bununla birlikte, özelliklerin doğru tanımlanması ve kullanılması, nesnenin doğru ve tutarlı bir şekilde kullanılmasını sağlar.


Öğrenci Adı

Öğrenci nesnesi oluştururken, öğrencilerin adı da özellik olarak belirlenmelidir. Bunun için, öncelikle öğrenci nesnesine ait bir özellik oluşturulmalıdır. Öğrenci adı özelliğinin oluşturulması için set metoduna ihtiyacımız var. Bu metod, öğrenci adı özelliğine değer atamak için kullanılacaktır.

İlk olarak, Öğrenci adlı bir sınıf yaratmalıyız. Bu sınıf, öğrenci nesnesi için özellikler ve metodlar içerecektir. Öğrenci sınıfı için ilk adım, öğrenci adı özelliği oluşturmak olacaktır. Bunun için aşağıdaki kod örneğini kullanabilirsiniz:

class Öğrenci {  constructor() {    this.ad = "";  }  set ad(ad) {    this.ad = ad;  }}

Bu kodda, constructor metodunda "ad" özelliği boş bir dize olarak tanımlanır. Bu özellik, adı atandığında değiştirilecektir. "set" metodunun yardımıyla, ad özelliği için bir değer ataması yapılabilir ve öğrenci adı kaydedilebilir. Aşağıdaki kod örneği, öğrenci adının "John Doe" olarak atandığını göstermektedir:

let öğrenci1 = new Öğrenci();öğrenci1.ad = "John Doe";console.log(öğrenci1.ad); // John Doe

Bu kodda, "öğrenci1" adlı yeni bir öğrenci nesnesi oluşturulur. Sonraki satırda, "öğrenci1.ad" özelliğine değer atanır ve öğrenci adı kaydedilir. En son satırda, "console.log" kullanılarak öğrenci adı konsola yazdırılır.


Öğrenci Numarası

Öğrenci numarası, bir öğrencinin benzersiz bir kimlik numarasıdır. Bu özelliği oluşturmak için, öğrenci nesnesine bir "numara" özelliği eklememiz gerekir. Numara özelliği, bir dizi adım kullanılarak oluşturulabilir.

  1. Öncelikle, öğrenci nesnesine bir "numara" özelliği eklemek için aşağıdaki kodu yazın:
    2. this.numara = "";
  2. Daha sonra, numara özelliği için bir get() metodu oluşturun. Bu metot, öğrenci nesnesinden numara özelliğinin değerini alacaktır:
    3. this.getNumara = function(){
    return this.numara;
    }
  3. Son olarak, numara özelliği için bir set() metodunu oluşturun. Bu metot, öğrenci nesnesindeki numara özelliğinin değerini değiştirir:
    4. this.setNumara = function(numara){
    this.numara = numara;
    }

    Bu adımların tamamlandığını varsayarsak, artık öğrenci nesnesinin "numara" özelliğini kullanarak bir öğrencinin kimliğini tanımlayabiliriz. Örneğin, aşağıdaki kod, öğrencinin numarasını "123456" olarak ayarlar:

    var ogrenci1 = new Ogrenci();
    ogrenci1.setNumara('123456');

    Bu özelliği kullanırken dikkat edilmesi gereken nokta, öğrenci nesnesindeki "numara" özelliğine yalnızca benzersiz değerler atanmasıdır. Aksi takdirde, farklı öğrencilerin aynı numaraya sahip olması tehlikesiyle karşı karşıya kalabiliriz.


    Metodlar

    Öğrenci nesnesi için metodlar oluşturmak oldukça kolaydır. Bir öğrencinin önemli bilgilerini gösterme ve güncelleme için metodlar oluşturmak, kayıtları düzenlemek için bir PHP veya başka bir programlama dili kullanarak yapabileceğiniz birçok işlemi gerçekleştirebilirsiniz. Yeni metodlar oluşturmak, öğrenci nesnesinin daha esnek ve uygun hale gelmesine yardımcı olur.

    Bir öğrencinin bilgileri özel metodlar kullanılarak gösterilebilir. Bu metodlar, öğrenci adı, öğrenci numarası gibi temel bilgileri gösterir. Öğrenci bilgilerini güncellemek içinse farklı bir metod kullanılır. Hem özellikler hem de metodlar, bir öğrenci nesnesinde bulunabilir ve bir kaydı tek bir yerden düzenleyebilirsiniz. Bu şekilde, kodun herhangi bir yerinde değişiklik yapmak zorunda kalmadan, bir öğrencinin tüm bilgilerini güncelleyebilirsiniz.

    • Öğrenci bilgilerini gösteren bir metod yazmak
    • Öğrenci bilgilerini güncellemek için bir metod yazmak

    Bir öğrenci nesnesi oluşturduğunuzda, bu metodları kullanabilirsiniz. Eğer bir öğrencinin bilgileri güncellenirse, öğrenci nesnesindeki metodları kullanarak kaydın üzerinde yapılması gereken değişiklikler gerçekleştirilir. Bu yöntem, özellikleri değiştirmeden kayıtların düzenlenmesine olanak tanır.


    Öğrenci Bilgilerini Gösterme

    Bir öğrenci nesnesi oluşturduktan sonra, öğrencinin bilgilerini almak ve göstermek gerekebilir. Bu amaçla, bir "Öğrenci Bilgileri Gösterme" metodunu oluşturabilirsiniz.

    Bu metod, öğrencinin bilgilerini parametre olarak almalı ve bir HTML tablosu olarak döndürmelidir. Tablo, her bir özellik için bir satır ve özellik değerleri için bir sütun içermelidir.

    Örneğin, "Öğrenci Bilgileri Gösterme" metodunun kodu aşağıdaki gibi olabilir:

    function ogrenciBilgileriGoster(ogrenci) {  // HTML tablosunu oluşturma  var tablo = document.createElement("table");  // Adı ekleme  var satir1 = tablo.insertRow();  var hucre1 = satir1.insertCell(0);  var hucre2 = satir1.insertCell(1);  hucre1.innerHTML = "Adı";  hucre2.innerHTML = ogrenci.adi;  // Numarası ekleme  var satir2 = tablo.insertRow();  var hucre3 = satir2.insertCell(0);  var hucre4 = satir2.insertCell(1);  hucre3.innerHTML = "Numarası";  hucre4.innerHTML = ogrenci.numarasi;  // Tabloyu döndürme  return tablo;}

    Bu metod, öğrencinin adı ve numarasını içeren bir HTML tablosu döndürür. Bu tablo daha sonra sayfaya eklenebilir veya başka bir amaç için kullanılabilir.


    Öğrenci Bilgilerini Güncelleme

    Öğrenci bilgilerini güncellemek için öğrenci nesnesine bir update metodu eklememiz gerekir. Bu metod, öğrencinin adı, numarası veya başka bir özelliğinin değiştirilmesine izin verir. Genellikle şu şekilde yazılır:

    Metod Adı Parametreler Açıklama
    update property, value Bir öğrenci özelliğini günceller

    Bizim durumumuzda, bu metodun parametreleri bir özellik ve yeni bir değer olacaktır. Örnek olarak, eğer öğrencinin numarasını değiştirmek istiyorsak, öğrenci nesnesine update('numara', '12345') şeklinde bir çağrı yapabiliriz. Bu, öğrencinin numarasının 12345 olarak güncelleneceği anlamına gelir.

    Update metodunu öğrenci sınıfına eklemek oldukça basittir. Sadece aşağıdaki kodu yazmanız gerekir:

      Student.prototype.update = function(property, value) {    this[property] = value;  }

    Bu kod, bir özellik adı ve değeri alır ve öğrenci nesnesindeki ilgili özelliği günceller. Bu sayede, öğrencilerin kaydını güncellemek için kolayca kullanabileceğiniz bir metod elde etmiş olursunuz.


    Kayıt Oluşturma

    Kayıt oluşturmanın son basamağı, öğrenci nesnesini kullanarak bu bilgileri kaydedebileceğimiz bir işlevi (function) yazmaktır. Bu işlev, öğrenci adı ve numarasını alacak ve kaydedecek. İlk olarak, kayıt oluşturma HTML formunu oluşturmanız gerekiyor. Form, öğrenci adı ve numarasını içeren iki giriş alanı içermelidir. Bir 'kaydet' düğmesi ile birlikte işlem tamamlandığında, öğrenci nesnesine yeni bilgilerin eklenmesi gerekiyor.

    Bu işlemleri gerçekleştirmek için aşağıdaki adımları izleyebilirsiniz:

    • Kayıt oluşturma için bir HTML formu oluşturun. Bu, öğrenci adı ve numarasını girmeleri için giriş alanı içermelidir.
    • Form verilerini almak için bir işlev yazın.
    • İşlev, giriş alanlarından öğrenci adı ve numarasını alacak.
    • Öğrenci nesnesi oluşturmak için yeni bir değişken (var) tanımlayın. Bu öğrenci nesnesi, öğrenci adı ve numarası özellikleri içermelidir.
    • Öğrenci bilgilerini depolamak için bir öğrenci dizisi (array) oluşturun. Bu dizide, her öğrenci nesnesi için bir öğe olmalıdır.
    • Yeni öğrenci nesnesini öğrenci dizisine ekleyin.

    Bu adımları takip ettiğinizde, öğrenci nesnesini kullanarak yeni öğrenci bilgileri kaydedebilir ve daha sonra istediğiniz zaman bu bilgilere erişebilirsiniz. Bu, verilerinizi düzenli ve kolayca yönetmenize yardımcı olacaktır.


    Form Oluşturma

    HTML'nin önemli bir parçası olan form elemanlarını öğrenmek, web sitelerinizde kullanıcılardan bilgi toplamak için gereklidir. HTML formu, arayüzde kullanıcının doldurabileceği metin kutuları ve düğmeler gibi sayısal veya metinsel verileri göndermek için bir araçtır. Bir form oluşturmak için öncelikle form etiketi kullanmanız gerekiyor. Form etiketi bir form için bir başlatma ve bitirme noktası belirler.

    Örnek olarak:

    ```html

    Here comes the form elements
    ```

    Form oluşturduğunuzda, hangi verileri kullanıcılardan alacağınızı belirtmeniz gerekiyor. `input` etiketi kullanarak bir metin kutusu veya onay kutusu ekleyebilirsiniz ve `textarea` etiketi daha uzun metinler için kullanılabilir. Kullanıcının işaretlediği seçenekleri göndermek için veya belirli bir eylemi gerçekleştirmek için bir düğme ekleyebilirsiniz. Aşağıda bir örnek var:

    ```html







    ```

    Yukarıdaki örnekte, kullanıcıdan isim, e-posta ve yorumların girilmesi isteniyor ve bu bilgiler `submit` düğmesine tıklanarak gönderiliyor. `for` etiketi, etiketleme özelliğine sahip bir etiketle ilişkili açıklamalı bir etiketi belirtmek için kullanılır. `type` özelliği, kullanıcının girdiği veri türüne bağlıdır. `name` özelliği, formdaki öğelerin web sunucusuna gönderildiğinde kullanılacak olan öğe adını belirtir. `rows` ve `cols` özellikleri, `textarea` etiketinde daha büyük metinlerin girilmesi için kullanılır. Son olarak, `submit` düğmesi, formu göndermek için kullanılır.


    Bilgilerin alınması

    Öğrenci kayıt formunda öğrenci bilgilerini almak için HTML'de form elemanını kullanabilirsiniz. Form etiketi içinde input etiketleri ile öğrenci adı ve numarası gibi bilgileri girdi alabilirsiniz.

    Örneğin:

    HTML Kodu Görünümü 
    <form>  <label>Öğrenci Adı:</label>  <input type="text" name="student_name">  <br>  <label>Öğrenci Numarası:</label>  <input type="number" name="student_number">  <br>  <input type="submit" value="Kaydet"></form>


    Yukarıdaki örnekte, form etiketi içinde input etiketleriyle öğrenci adı ve numarası girdisi alınmaktadır. Input etiketlerinde "name" özelliği kullanarak, JavaScript ile bu bilgilere erişebilir ve işleyebilirsiniz.

    Bu şekilde öğrenci bilgilerini formdan alıp JavaScript ile nesne oluşturma ve kayıt oluşturma işlemi yapabilirsiniz.


    Kayıt Oluşturma

    Öğrenci nesnesini kullanarak kayıt oluşturmak oldukça kolaydır. Kaydı oluşturmak için, öncelikle bir HTML formu oluşturmanız gerekir. Bu formda öğrenci adı ve öğrenci numarası gibi özelliklerin girilmesi için alanlar yer alacaktır. Bir <form> etiketi kullanarak form oluşturabilirsiniz. Form etiketi içinde <input> etiketleri kullanarak öğrenci bilgilerinin girileceği alanlar oluşturun.

    <form>
        <label>Öğrenci Adı:</label>
        <input type="text" id="name" name="name">
        <br><br>
        <label>Öğrenci Numarası:</label>
        <input type="text" id="number" name="number">
        <br><br>
        <input type="submit" value="Kayıt Oluştur">
    </form>

    Formda bulunan öğrenci bilgilerini almak için bir JavaScript fonksiyonu kullanılır. Bu fonksiyon, formdaki öğrenci bilgilerini öğrenci nesnesine atar ve kaydı oluşturur. Aşağıdaki örnek kod, formdaki öğrenci bilgilerini alarak öğrenci nesnesine atar ve konsolda öğrenci adını ve numarasını gösterir.

    function createRecord() {
        var name = document.getElementById("name").value;
        var number = document.getElementById("number").value;
        var student = new Student(name, number);
        console.log("Öğrenci Adı: " + student.name + ", Öğrenci Numarası: " + student.number);
    }

    Bu fonksiyonu formun submit olayına tanımlayın ve kaydın oluşturulduğunu göreceksiniz. Artık öğrenci kayıtlarınızı tek bir nesne içinde tutabilirsiniz.

Etiketler: