Pemrograman Berorientasi Objek dan Interaksi User pada JavaScript - Praktikum 8 Part 3

 


Assalamualaikum warahmatullahi wabarakatuh

Bagaimana kabarnya sobat-sobat sekalian? saya harap baik-baik saja yah, disini juga Alhamdulillah baik-baik saja. Sobat, jangan lupa bersyukur dan belajar yah. 

Okey, izinkan saya memperkenalkan diri terlebih dahulu, perkenalkan saya itu: 

Ilham Prabu Zaky Setiawan
XI RPL 2
Absen 15
SMK Negeri 4 Bandung


Okey, langsung saja ke inti pembahasan.
Jadi dipertemuan kali ini tuh kita akan membahas OOP dan Interaksi User dalam JavaScript, dimulai dari bagaimana cara kerjanya, fungsi tuh sebenarnya untuk apa?, bagaimana pengimplementasiannya?, hingga latihannya.

Sudah tidak sabar bukan? Mari kita pelajari bersama😏

Pemrograman Berorientasi Objek

Pemrograman berorientasi obyek/Object Oriented Programming (OOP) adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel
ataupun konstanta terkait dalam satu kesatuan (class) seperti
obyek dalam dunia nyata.

Obyek sendiri merupakan wujud dari kelas, secara umum dikenal dengan nama
instan.

Teknik-teknik dalam pemrograman ini merupakan pengembangan dari
teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi

Saat ini
ada banyak bahasa pemrograman yang telah mendukung pemrograman
berorientasi obyek ini, seperti C++, C#, Java, Javascript, PHP, Python, Ruby, dan
Objective C.

Javascript menggunakan PBO (Pemrograman Berorientasi Objek) dengan model pemrograman berbasis prototipe. Model ini tidak mengenal kelas, yang ada adalah obyek.

Obyek dalam model ini dapat dimodifikasi secara runtime seperti
penambahan variabel (properti) ataupun metode (fungsi/prosedur).
Model ini juga dikenal dengan istilah pemrograman PBO tanpa
kelas, berorientasi prototipe atau berbasis instan.


Objek Utama (Bawaan)

JavaScript memiliki banyak obyek bawaan seperti Math, Array, String dan
Object. Setiap obyek dalam JavaScript adalah instan dari obyek Object,
sehingga memiliki semua properti dan metode yang ada.


Objek Buatan

JavaScript merupakan bahasa PBO yang menggunakan kata kunci
function untuk mendefinisikan suatu kelas. 

Oleh karena itu, pembuatan kelas sama dengan pembuatan fungsi dalam Javascript.
Berikut ini merupakan format yang dapat digunakan untuk
mendefinisikan kelas pada JavaScript.


Interaksi User

Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk
menggunakan aplikasi yang dikembangkan.

Di banyak bahasa pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan event. Event dalam Javascript adalah sebuah kejadian interaksi antara user dengan halaman web.

Berikut ini merupakan daftar atribut penting yang sering digunakan untuk mengolah suatu interaksi user beserta penjelasannya: 

Atribut Event Penjelasan
onclick Event ini terjadi saat user melakukan klik sekali atau dua kali pada suatu elemen HTML.
Biasanya elemen HTML yang memakai atribut ini adalah: button, document, checkbox, link
radio, select, submit, dan reset
onmousedown Event ini terjadi saat user melakukan klik pada satu elemen HTML, biasanya terkait pada el-
emen: button, document, link serta layer
onmousemove Event ini terjadi saat user menggerakan mouse diatas elemen HTML
onmouseover Event ini terjadi saat user menggerakan mouse keatas elemen HTML
onmouseout Event ini terjadi saat user menggerakan mouse keluar elemen HTML
onmouseup Event ini terjadi saat user melepaskan klik pada elemen HTML
onkeypress Event ini terjadi saat user menekan tombol keyboard pada elemen HTML
onkeyup Event ini terjadi saat user melepas penekanan tombol keyboard pada elemen HTML
onload Event ini terjadi saat dokumen atau frame telah ditampilkan/ dimuat oleh peramban/ browser

Pengaksesan Objek Pada Halaman Web

Fungsi Penjelasan
getElementById("id-elemen") id-elemen disini digunakan untuk menunjuk nilai dari atribut id
elemen yang hendak diakses oleh objeknya
getElementsByTagName("name-tag") name-tag disini digunakan untuk mengambil objek berdasarkan
nama dari tag HTML-nya
getElementsByName("name") name disini adalah nilai dari atribut name dari elemen yang akan
diakses. Pada umumnya ini diterapkan pada komponen dari form
seperti input, select, checkbox, dan komponen lainnya.

Interfaces Text Box ke Alert

Disini terdapat suatu pengimplementasiain dari suatu text box dalam method alert(), seperti biasa saja namun dalam penulisannya kita lakukan dengan style atau gaya pemrograman orientasi objek. 
berikut merupakan penulisannya: 
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2</title>
</head>
<body>
    <p id="objek">
          <script>
              function sayHi() {
                   var nama = document.getElementById('nama').value;
                   alert("Halo, " + nama);
              }
          </script>
          <label>Tulis disini</label>
          <input type="text" id="nama" onchange="sayHi();"></input>
    </p>
</body>
</html>

Ketika dibuka di browser: 




Fungsi dalam OOP

Fungsi dalam OOP, penulisan function dilakukan seperti biasa halnya dalam materi fungsi sebelumnya namun disini ditambah sedikit kompleksitasnya, yakni dengan ditambahkannya suatu keyword this, yang berati merujuk pada suatu objek.
berikut merupakan penulisannya:

<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2</title>
</head>
<body>
     <p id="objek">
          <script>
               function segiEmpat () {}
               function segiEmpat () {
                    this.panjang = 0;
                    this.lebar = 0;
                    this.hitungLuas = function() {
                         var luas = this.panjang * this.lebar;
                         return luas;
                    }
                    this.hitungKeliling = function() {
                         var kel = 2 * (this.panjang + this.lebar);
                         return kel;
                    }
               }
               // contoh penggunaannya
               var s = new segiEmpat();
               s.panjang = 4;
               s.lebar = 3;
               alert("Luas adalah: " + s.hitungLuas() + " cm\ndan keliling adalah : " + s.hitungKeliling() + " cm");
          </script>
     </p>
</body>
</html>

Ketika dibuka di browser: 


Interfaces Text Box dan Button ke Alert

Penggunaan text box digabungkan dengan suatu tombol untuk memunculkan function alert(), jadi disini kita akan memasukan beberapa String/kata pada textbox kemudian kita tekan/click button yang nantinya akan memunculkan suatu pop-up box yakni alert.
berikut merupakan penulisannya:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2</title>
</head>
<body>
     <p id="objek">
          <input type="text" id="nilai"/>
          <input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();"/>
          <script>
               function ambilNilai() {
                    var objNilai = document.getElementById('nilai');
                    var n = objNilai.value;
                    alert("Nilainya adalah " + n);
               }
          </script>
     </p>
</body>
</html>

Ketika dibuka di browser: 





Interfaces Text Box dan Button ke Alert Dalam Array

Penggunaan text box serta button pada function alert dalam bentuk array. Secara garis besar yakni pengambilan elemen array dengan metode gabungan function serta elemen input dan atribut-atributnya.
berikut merupakan penulisannya:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2</title>
</head>
<body>
     <p id="objek">
          <input type="text" name="nilai"/>
          <input type="text" name="nilai"/>
          <input type="button" id="btnAmbilNilai" value="ambilNilai" onclick="ambilNilai();" />
          <script>
              function ambilNilai() {
                   var obj1 = document.getElementsByName('nilai')[0];
                   var obj2 = document.getElementsByName('nilai')[1];
                   var n1 = obj1.value;
                   var n2 = obj2.value;
                   alert("Nilai pertama adalah " + n1 + "\nNilai kedua adalah " + n2);
              }
          </script>
     </p>
</body>
</html>

Ketika dibuka di browser: 



Interfaces Get Element by Tag Name

Merupakan langkah untuk mengakses/mengambil objek dengan berdasarkan value dari name elemen HTMLnya. Ini merupakan salah satu langkah yang memiliki fungsi dan kegunaan yang sama dengan langkah getElementBy lainnya.
berikut merupakan penulisannya: 
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2</title>
</head>
<body>
     <p id="objek">
          <input type="text" name="nilai" />
          <input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();" />
          <input type="text" name="hasil" />
          <script>
               function ambilNilai() {
                    // mengambil objek input text pertama
                    var obj1 = document.getElementsByTagName('input')[0];
                    // mengambil objek input button
                    var obj2 = document.getElementsByTagName('input')[1];
                    // mengambil objek input text kedua
                    var obj3 = document.getElementsByTagName('input')[2];
                    var s1 = obj1.value;
                    var s2 = obj2.value;
                    // menampilkan nilai pada input text kedua
                    obj3.value = s1 + s2;
               }
          </script>
     </p>
</body>
</html>

Ketika dibuka di browser: 



Mungkin cukup sekian materi PBO dan Interaksi User pada JavaScriptnya. Cukup singkat materinya dimulai dari pengenalan hingga pengimplementasiannya. Semoga sobat-sobat codingers paham, mengerti dan menguasainya. 

Mohon maaf jika terdapat tutur kata yang tidak berkenan dihati anda. Mohon maaf atas semua kesalahan yang telah saya perbuat, tolong berikan koreksi mengenai bagian mana yang salah/kurang pas dalam postingan ini, untuk pengembangan lebih baik kedepannya.

Sekian, saya ucapkan terimakasih banyak atas waktu yang telah diluangkan, saya ucapkan kembali mohon maaf atas segalanya kesalahan. 

Wabilahiltaufik walhidayah,
Wassalamu'alaikum warahmatullahi wabarakatuh
Keep Coding Stay Awesome

0 Response to "Pemrograman Berorientasi Objek dan Interaksi User pada JavaScript - Praktikum 8 Part 3"

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel