Pemrograman Web - PBO dalam JavaScript

Assalamualaikum
Pada Artikel kali ini kita akan belajar tentang PBO sederhana dalam JavaScript

Dalam PBO kita akan banyak menggunakan Fungsi jadi saya sarankan untuk membaca Artikel sebelumnya tentang Fungsi pada JavaScript

Definisi PBO

Apa itu PBO?

PBO (Pemrograman berbasis Objek) atau bahasa keren nya OOP (Object Oriented Programming) adalah cara ngoding yang berfokus pada Objek.

Terus kalau Objek apa?

Objek itu sendiri adalah sekumpulan Variabel , Fungsi , dan Prosedur, yang disatukan dalam 1 Class lalu diperlakukan layaknya Objek di dunia Nyata.

Misalnya kita mau buat Objek Nyamuk. Kita tentuin Sifat dari Nyamuk itu apa aja terus jadiin jadi Variabel. Lalu setelahnya, kita tentuin Tindakan yang bisa dilakukan nyamuk itu apa aja terus jadiin Fungsi atau Prosedur.

Misalnya gini nih:

Objek : Nyamuk

 Variabel:
- Usia
- Kecepatan Terbang
- Darah yang dihisap


Fungsi / Prosedur:
- Terbang
-  Menghisap Darah

PBO dalam JavaScript

Barusan itu sedikit gambaran tentang PBO. Tapi, sebenarnya ada sedikit perbedaan Konsep PBO dalam JavaScript dengan Konsep PBO dalam pemrograman lain (Java)

Biasanya Objek itu isinya Variabel, Fungsi, dan Prosedur yang dibungkus menjadi 1 Class. Namun, dalam JavaScript kita tidak mengenal Konsep Class, jadi PBO dalam JavaScript tidak dibungkus dalam sebuah Class melainkan diedit langsung. Konsep PBO seperti ini dikenal sebagai Pemrograman Berbasis Prototipe

Interaksi

Selain Fungsi kita juga akan banyak menggunakan Interaksi JavaScript dalam PBO.

Apa itu Interaksi?

Interaksi itu ya....   Interaksi.
Jadi, Interaksi itu ketika kita melakukan sesuatu ke Konten (Tombol, Kotak Input, Teks) HTML kita.
Misalnya Nge Klik Tombol, Nge Ganti Isi Kotak Input, dan lain - lain.

Untuk Penulisanya cukup ditambahkan ke dalam Kodingan HTML nya (HTML lho)

Misal:

<input type="button" name="tombolNilai" value="Ambil Nilai" onclick="ambilNilai()">

onclick diatas sesuatu akan dijalankan ketika kita Mengklik

Contoh Penggunaan

Kurang lebih begini Contoh penggunaan Interaksi dan PBO dalam JavaScript

See the Pen Ambil Nilai by Yasfa Zamzami (@Yasfa) on CodePen.

See the Pen Segi Empat by Yasfa Zamzami (@Yasfa) on CodePen.

See the Pen Halo by Yasfa Zamzami (@Yasfa) on CodePen.

See the Pen Fungsi3 by Yasfa Zamzami (@Yasfa) on CodePen.

See the Pen 2 Nilai by Yasfa Zamzami (@Yasfa) on CodePen.

See the Pen AmbilNilai2 by Yasfa Zamzami (@Yasfa) on CodePen.

See the Pen Interface by Yasfa Zamzami (@Yasfa) on CodePen.