Cara menggunakan belajar oop javascript

Object oriented programming atau lebih dikenal sebagai oop adalah sebuah bentuk paradigma atau model dalam kaidah pengembangan sistem yang berbentuk sebuah object.Sederhananya oop bertujuan untuk memudahkan programmer dalam membuat sebuah software ketimbang mereka mendesain ulang dengan terlalu banyak logika yang dimuat untuk memanipulasi sebuah data.Dalam perkembanganya OOP mempunyai core structure model sebagai berikut :

Class

jika teman teman membayangkan kelas adalah sebuah bangunan yang ada di sekolah dengan banyak murid didalamnya,teman teman tidaklah sepenuhnya salah, jika kita bermain dengan logika sederhana kelas bisa dikatakan sebuah kumpulan dari beberapa individu berdasarkan sifat atau perilaku.misalnya kelas memasak, maka kita bisa simpulkan dalam sebuah kumpulan tersebut mempunyai sifat yang seragam misalnya memakai topi koki, lalu menggunakan spatula dan sebagainya dan dengan prilaku seperti memotong, menggoreng dan sebagainya,sampai disini kebayangkan?.

nah hal yang sama juga berlaku pada class didalam OOP.class dalam dunia pengembangan software atau software development bisa dikatakan sebuah sebuah kelompok object yang memuat sebuah tipe data, attribute dan juga method untuk membentuk sebuah blueprint dari sebuah class, kurang lebih seperti contoh kelas memasak tadi, kita bisa katakan bahwa kelas memasak itu sebuah blueprint.

Attribute

Attribut secara sederhana bisa saya bilang sebagai sifat yang melekat pada sebuah kelas atau merepresentasikan keadaan kelas tersebut, oke kita kembali kedalam contoh kelas memasak dalam sebuah kelas memasak kita pasti butuh yang namanya kompor untuk memasak atau kita butuh seorang menusia untuk mengoprasikanya, kompor gas dan manusia disini bisa dikatakan sebagai sebuah attribute karena melekat terhadap kegiatan memasak.

Object

Obyek bisa dikatakan sebuah kelompok yang sudah terbentuk dari sebuah blueprint kelas yang dapat dikenali, kita ambil contoh class memasak, kita tau bahwa kelas memasak kadang memiliki jenis yang spesifik, seperti kelas memasak mi goreng,maka kita akan lebih mudah mengenali dan mengelompokan kelas tersebut sesuai dengan isinya.

Method

Method dalam OOP erat kaitanya dengan sebuah class, method bisa dikatakan perilaku yang bisa dilakukan kelas tersebut, oke kita kembali ke contoh kelas memask, dalam sebuah kelas memasak kita bisa melakukan yang namanya menggoreng, merebus dan lain lain.

Keuntungan OOP

menggunakan paradigma OOP memiliki berbagai keuntungan sebagai berikut :

• Modularity kerapihan kode yang kita lebih bisa dimaintanance oleh developer lain dan sesuai dengan standart yang ada, jadi antara logic satu dengan yang lain tidak bertabrakan.
• Reusability kode yang kita buat tidak perlu ditulis berulang ulang.
• Easy Maintanance kode yang kita buat lebih mudah untuk kita maintanance dan mudah untuk diupgrade.

Jenis Object Oriented Programming

dalam konsepnya OOP mempunyai 4 pilar sebagai berikut :

• Abstraction
• Encapsulation
• Inheritance
• Polymorphism

untuk penjelasan detail dari jenis OOP akan saya jelaskan dimateri selanjutnya dan sekaligus materi pembuka saya akan menjelaskan tentang Abstraction dimateri pertama,sekian materi kali ini terima kasih teman - teman.

Technical Architect di Blibli.com. Dengan pengalaman saya lebih dari 15 tahun berkarya dan 11 tahun berkarir di bidang programming akan membantu kamu belajar coding lebih cepat dan terarah untuk menjadi Programmer Zaman Now

JavaScript adalah bahasa pemrograman yang paling penting dalam pengembangan website. JavaScript juga mendukung pemrograman berorientasi objek (object oriented programming), karena mengenal konsep object,

var anjing = {};

var anjing = {};

var anjing = {};

Ketika belajar tentang OOP, pasti tidak bisa lepas dari object.

var anjing = {};

var anjing = {};

var anjing = {};

var anjing = {};

var anjing = {};

var kata = "belajar"; //string
var angka = 153; // number
var jawaban = true; // boolean

Sedikit lebih rumit untuk mendeklarasikan object. Jika

var anjing = {};

var anjing = {};

var anjing = {};

Sama seperti mendeklarasikan variabel dengan tipe data primitif, untuk menciptakan object digunakan kata kunci

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var anjing = {};

Pada contoh di atas diciptakan sebuah objek kosong yang diberi nama “anjing”. Dalam dunia nyata tentu saja tidak ada objek kosong, maka dari itu pada tipe data object juga dikenal

var anjing = {};

var anjing = {};

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

var anjing = {};

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

Maka jadilah sebuah object anjing yang memiliki 2

var anjing = {};

var anjing = {};

var anjing = {};

var anjing = {};

nama_object.nama_property atau
nama_object.nama_method()

Jadi kita dapat mengakses property dengan cara menulis

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};

var anjing = {};

var anjing = {};

nama_object[“nama_property”]

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

Cara mendeklarasikan object seperti di atas adalah dengan menggunakan Literal Notation. Cara lain untuk menciptakan object adalah dengan menggunakan kata kunci

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

7 nama_object =

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

4

Contoh di atas jika diubah ke cara kedua menjadi sebagai berikut.

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};

Seperti halnya pada

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

var anjing = {};

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

var anjing = {};

var anjing = {};

var anjing = {};

anjing.ubahWarna("kuning");

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

Jadi

var anjing = {};

var anjing = {};

anjing.ubahWarna("kuning");

Catatan panjang lebar di atas belum sepenuhnya merangkum konsep object dalam OOP. Sebagai contoh,

anjing.ubahWarna("kuning");

var anjing = {};

Untuk membuat object anjing menjadi lebih universal, dibutuhkan kata kunci baru yaitu

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
  };
};

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
  };
};

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
  };
};

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

7 nama_object =

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

4(nama_parameter) {

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
  };
};

0.nama_property = nama_parameter;
};

Selengkapnya dapat dilihat pada contoh berikut.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
  };
};

Sekarang object “Anjing” (huruf ‘A’ kapital menandakan bahwa itu adalah

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

var heli = new Anjing(5, "putih");
var bicara = heli.suara();
console.log(bicara);

Sehingga object “Anjing” dengan nama “heli” berkata: “Umur saya 5 tahun dan berwarna putih” :D.

Pada catatan ini dikenalkan istilah-istilah umum pada OOP, yaitu object,

var anjing = {};

var anjing = {};

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
  };
};

Catatan yang direkomendasikan:

• JavaScript dan Object Oriented Programming (OOP) Bagian 2
• JavaScript dan Object Oriented Programming (OOP) Bagian 3
• Perbedaan Operator perbandingan == dan === dalam javaScript
• Membuat Tombol “Back”
• Memanipulasi URL pada Status Bar Browser

About Sibudi

Ubuntu user | Loves books | Blogger | Web Developer | Learn PHP, JavaScript, Ruby & Python the hard way

02. March 2012 by Sibudi
Categories: JavaScript | Tags: Catatan, JavaScript |

Comments (4)

1. Pingback: JavaScript dan Object Oriented Programming (OOP) Bagian 2 | Sibudi </>

2. Ade Malsasa Akbar says

   Terima kasih, Mas.

   Bahkan mas membikinkan permisalan sampai ke level membuat kode sedekat mungkin dengan dunia nyata. var Anjing= {}… sungguh unik. Anda pasti sudah berusaha banyak.

   Saya sangat senang dengan usaha Anda menulis. Bahkan Anda menghindari singkatan. Saya melihat ini lagi:

   1) Lisensi CC
   2) Adfree Blog Banner

   Memang langka. Mungkin saya tak seide. Tapi saya senang secara global dengan usaha Anda ini. Saya sangat senang tulisan original.

   Terima kasih, Mas. Saya mau pelajari tulisan ini.

• Sibudi says

  Terima kasih juga sudah mau membaca tulisan saya 🙂

3. oz4n says

   ane baru nyobak-nyobak untuk oop pada Js nah ane bingung masksut dari penulisan code seperti di bawah ini : apa yah brooo

   Apa itu OOP dalam JavaScript?

   OOP atau Object Oriented Programming merupakan salah satu pattern pada programming yang sangat umum digunakan oleh developer di dunia. Kalau berbicara mengenai OOP pasti kaitannya sangat erat dengan bahasa pemograman Java. Ya secara bahasa Java itu adalah bahasa yang pure mengusung pattern OOP.

   Apakah JavaScript ada OOP?

   JavaScript juga mendukung pemrograman berorientasi objek (object oriented programming), karena mengenal konsep object , property , dan method . Mungkin juga banyak yang melewatkan salah satu sifat dasar OOP yang terdapat pada JavaScript, yaitu inheritance atau pewarisan. Pewarisan dalam JavaScript disebut prototype .

   OOP menggunakan bahasa apa?

   Contoh bahasa pemrograman berorientasi objek antara lain Java, PHP, Python, dan Ruby.

   Bagaimana OOP bekerja?

   Object oriented programming atau OOP adalah konsep pemrograman yang berorientasi pada objek atau data untuk mengatur sebuah desain program. Secara garis besar, cara kerja OOP yaitu membangun program dari gabungan objek-objek yang saling berhubungan dan disusun menjadi satu kesatuan.