yes
no
10/Promotion/slider
no

Object Oriented Programming pada Javascript

1 komentar
Pada artikel sebelumnya penulis sudah membahas materi tentang Object Oriented Programming (OOP) pada VB.Net.  Selain dengan VB.Net, OOP dapat juga dilakukan pada PHP, Java, Javascript dan bahasa pemrograman lainnya.  Bahasa-bahasa pemrograman tersebut dapat dipelajari di lembaga pendidikan Kursus Komputer (IT Training Center). Computer First adalah lembaga pendidikan kursus komputer yang membuka program kursus bahasa-bahasa pemrograman tersebut. Pada artikel ini, penulis akan membahas materi OOP pada Javascript.Ciri-ciri OOP adalah adanya Encapsulation (Class/Kelas), Inheritance (Pewarisan Sifat dari Induk ke Anak), Polymorphism (Teknik Overriding dan Overloading) dan Instansi Objek (Menciptakan Objek).

Untuk membuat Class pada Javascript caranya sama dengan cara membuat fungsi (function) pada Javascript, yaitu diawali dengan menuliskan keyword function, kemudian diikuti dengan menuliskan nama Class/kelas. Nama Class/kelas pada Javascript dibuat dengan huruf awal besar/kapital. Sama seperti bahasa pemrograman lainnya, class dilengkapi dengan  inheritance, polymorphism dan objek. Semua property di class induk maupun class anak diinisialalisasi dengan nilai parameternya. Jika tidak mempunyai parameter, maka property tersebut diisi dengan 0 (numeric) atau diisi dengan “ ” (string) atau false (boolean). Setelah itu dibuat metodenya dan menciptakan objek. Objek dibuat untuk mengisi nilai property dari Class dan untuk memanipulasi nilai property Class.  Dibawah ini adalah cara membuat Class pada Javascript tanpa parameter :

<script type=”text/javascript”>
/*Parent Class*/
function NamaClass(){
  this.property 1=””;
  this.property 2=””;
  .        
  .
  .
  this.properti n=””;

/*Parent Methode*/
  this.methode=function(){
  return this.property 1+”<br>”+this.property 2+”<br>”+…+ this.property n;
  }
}
/*Child Class*/
function NamaClass(){
  this.property 1=””;
  this.property 2=””;
  .        
  .
  .
  this.properti n=””;

/*Class Methode(Overriding) */
  this.methode=function(){
  return this.property 1+”<br>”+this.property 2+”<br>”+…+ this.property n;
  }
}
/*Menginstansi/menciptakan Objeck*/
function namafungsi(){
 var object1 = new NamaClassInduk();
 object 1.property 1 =nilai 1;
 object 1.property 2 =nilai 2;
 .
 .
 .
 object1.property n =nilai n;

var object2 = new NamaClassAnak();
 object2.property 1 =nilai 1;
 object2.property  2 =nilai 2;
 .
 .
 .
 object2.property n= nilai n;

document.write(objekinduk.namamethode()+”<b><br>”+objekanak.namamethode());
}
<script>

Untuk lebih memudahkan pemahaman tentang OOP pada Javascript, penulis sudah membuat Class pada Javascript sebagai berikut :

Nama File : class.html
<html>
  <head>
     <title>Class, Inheritance & Teknik Overriding</title>
     <script type="text/javascript">
     /*Class Induk*/
     function Pegawai(){
       this.nip="";
       this.nama="";
       this.jabatan="";
       this.gaji=0;
       this.tunj=0;

     /*Metode Induk*/
       this.tampil=function(){
       return "NIP:"+" "+this.nip+"<br>"+"NAMA:"+" "+this.nama+"<br>"+"JABATAN:"+" "+this.jabatan+" 
                 <br>"+"Gaji:"+" "+this.gaji+"<br>"+"TUNJANGAN JABATAN:"+" "+this.tunj;
       }
     }
     /*Class Anak*/
     function PegawaiTetap(){
       this.nip="";
       this.nama="";
       this.jabatan="";
       this.gaji=0;

      /*Metode Anak*/
       this.tampil=function(){
       return "NIP:"+" "+this.nip+"<br>"+"NAMA:"+" "+this.nama+"<br>"+"JABATAN:"+" "+this.jabatan+"
                 <br>"+"Gaji:"+" "+this.gaji;
       }
     }
     /*Menginstansi Objek*/
     function daftar(){
       var pegawai=new Pegawai();
               pegawai.nip="12340";
               pegawai.nama="Sisca";
               pegawai.jabatan="Manager";
               pegawai.gaji=5000000;
               pegawai.tunj=0.1*pegawai.gaji;
                          
       var karyawan=new PegawaiTetap();
               karyawan.nip="12341";
               karyawan.nama="Ridho";
               karyawan.jabatan="Supervisor";
               karyawan.gaji=3500000;
                    
       document.write(pegawai.tampil()+"<br><br>"+karyawan.tampil());/*Overriding*/
     }
    </script>
    </head>
    <body onLoad="daftar()">
    </body>
</html>

Jika program dijalankan di browser, maka akan tampil hasilnya sebagai berikut :

















Demikian artikel ini penulis buat, semoga bermanfaat bagi para pembaca blog Computer First. Jangan lupa untuk dicoba dan beri komentarnya....

author profile image
Abdelghafour

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

1 komentar

  1. Asli nyerah deh kalo dikasih OOP -_- pusing ane gan

    http://longscripts.blogspot.com/

    BalasHapus

no
Computer First - First Choice in IT Training Center - menyediakan jasa pelatihan Kursus Komputer di Jakarta sejak dari usia dini yaitu sejak anak-anak sampai dengan dewasa. Computer First berdiri pada tahun 2001, Visi Computer First ingin menjadi First Choice in IT Training Center melalui pendidikan dan pelatihan komputer yang berkualitas terbaik [Computer First Indonesia] (http://computerfirst.co.id/images/logo/logo1.png)