JAVASCRIPT

Contoh Program OOP Javascript Sederhana


Dalam artikel ini saya akan membuat contoh program OOP (Object Oriented Programming) javascript sederhana. saya akan membicarakan sedikit konsep OOP, dalam penulisan OOP kita tahu ketika kita membuat sebuah program dengan OOP kita awali dengan sebuah class sebagai kerangka dasar dalam pembuatan OOP. TAPI! dalam javascript pembuatan OOP boleh tidak menggunakan class, OOP yang saya buat menggunakan OOP object literal di mana saya akan membuat variabel dulu.


saya akan kasih tahu beberapa dasar dasar konsep OOP bahwa OOP memiliki dasar dasar seperti : properti, method, enkapsulasi, inheritance, constructor, abstract class. OOP itu luas ketika kamu belajar OOP tentu ini membutuhkan waktu yang lama dan tentu ketika kamu menggunakan framework kamu harus paham dasar dasar OOP itu karena hal tersebut merupakan langkah awal untuk menggunakan sebuah framework. sekarang saya akan buat OOP pada javascript dengan object literal, tenang saja seperti biasa saya siapkan berupa algoritma nya agar mempermudah bagaimana kode javascript itu bekerja.


Kamu buat file HTML kita akan bekerja sedikit dengan DOM jadi ketika tombol di klik muncul kan data object javascript. buat dengan nama index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Contoh Program OOP Javascript Sederhana</title>
  </head>
    
  <body>
      <br>
      <br>
      <br>
<!--      Buat h1 untuk menampilkan data pada OOP javascript-->
      <center><h1></h1></center>
      <!--   Buat tombol-->
      <center><button type="button">Tekan!</button></center>  
      <script src="script.js"></script>
  </body>
</html>

Buat file javascript dengan nama script.js

//buat variabel
let btn = document.getElementsByTagName('button')[0];
let h1 = document.getElementsByTagName('h1')[0];

//ketika tombol di klik
btn.addEventListener('click', function(){
    
    //buat sebuah object literal
let dataKu = {
    
    //buat sebuah properti
    namaDepan: "galih",
    namaBelakang: "anggoro prasetya",
    citaCita: "pemrogram",
    
    //buat method agar bisa menjalankan ataupun melakukan sesuatu pada object
    panggilDataku: function(){
        
        //buat return agar bisa mengembalikan sebuah nilai pada object
        return "halo nama saya " + this.namaDepan + " " + this.namaBelakang + " saya bercita cita ingin menjadi " + this.citaCita;
    }
};
    //tampilkan data object dataKu pada tag HTML h1
 h1.innerHTML = dataKu.panggilDataku();   
});

Program di atas bisa di lihat di sini. semoga bermanfaat :D