T-10 Homepage

JavaScript adalah bahasa pemrograman client-side yang saat ini sangat populer dikembangkan untuk menghiasi kualitas interface setiap web, JavaScript juga yang mengubah trend pemrograman web menuju arah Web 2.0 . Saat ini lebih dari 5 framework powerfull dipakai web-web besar untuk membuat aplikasi JavaScript yang hebat.

Supaya kita gak ketinggalan saya inisiatif untuk share ilmu saya di pemrograman JavaScript yaitu OOP ( Object Oriented Programming ). Pada awal saya belajar JavaScript sy gak pernah berfikir untuk menggunakan OOP, cukup dengan membuat fungsi-fungsinya dan tinggal panggil, namun ternyata OOP menjanjikan kualitas script yang lebih baik dan lebih rapih dari penulisan script konvensional.

Berikut adalah cara membuat class pada JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

 function Mobil(merk,warna,kondisi){
        this.merk = merk;
        this.warna = warna;
        this.kondisi = kondisi;
        this.getInformasiMobil = _infoMobil;
        this.catWarna = _catWarna;
        this.getWarnaSekarang = _getWarna;
 }
 
 function _infoMobil(){
        var str = 'Merk: '+this.merk;
        str += 'Warna: '+this.warna;
        str += 'Kondisi: '+this.kondisi;
        return str;
 }
 
 function _catWarna(gantiWarna){
        this.warna = gantiWarna;
 }
 
 function _getWarna(){
        return this.warna;
 }

Pada script diatas nama class-nya adalah Mobil, mungkin sedikit aneh karena tidak ada kata-kata “class” pada script diatas. Namun itulah cara JavaScript mengenali class-nya. Perhatikan pada function Mobil terdapat baris-baris seperti ini.

5
6
7

  this.getInformasiMobil = _infoMobil;
  this.catWarna = _catWarna;
  this.getWarnaSekarang = _getWarna;

3 Baris diatas adalah cara menentukan method pada class tersebut, jadi sediakan beberapa fungsi (_infoMobil, _catWarna, _getWarna) untuk ditarik menjadi method di class Mobil. Pada kondisi normal fungsi-fungsi ini akan menghasilkan error ketika dipanggil secara biasa (tanpa instance mobil) karena di dalam fungsi-fungsi tersebut ada kata ‘this’ yang mengisyaratkan bahwa fungsi ini dipakai oleh suatu class untuk menjadi method class tersebut .

Sekarang cara penggunaan class Mobil adalah:

 <script type="text/javascript">
  var mobil = new Mobil('Sedan','putih','Sangat Baik');
  document.write(mobil.getInformasiMobil()+'<br>');
  document.write('Warna Awal: '+mobil.getWarnaSekarang()+'<br>');
  mobil.catWarna('hitam');
  document.write('Warna Sekarang: '+mobil.getWarnaSekarang());
 </script>

Jalankan file html anda lalu kita akan menemukan hasil spt ini:

Merk: Sedan
Warna: putih
Kondisi: Sangat Baik
Warna Awal: putih
Warna Sekarang: hitam

Warna yang sebelumnya putih dapat diubah dengan menggunakan method catWarna menjadi warna hitam. Cara ini adalah dasar dari semua pemrograman OOP hanya saja saya menyajikannya dengan JavaScript.

Semoga dapat menambah wawasan…^_^