Pemrograman Berorientasi Objek & Interaksi User dalam JavaScript - Praktikum 16

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan tutorial dari postingan sebelumnya yaitu mengenai JavaScript. Nah, untuk sekarang kita bakal bahas Pemrograman Berorientasi Objek & Interaksi User dalam JavaScript. Pemrograman Berorientasi Objek (OOP) adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun konstanta terkait dalam satu kesatuan (kelas) seperti obyek dalam dunia nyata. 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 OOP 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 OOP tanpa kelas, berorientasi prototipe atau berbasis instan. Objek itu sendiri dibagi dua ada yang Utama(bawaan) ada juga Buatan. Contoh Objek Bawaan dalam JavaScript Math, Array, dll. Interaksi User dalam JavaScript menggunakan Event yang mempunyai banyak attribute salah satunya onclick, onmousedown. Untuk lebih jelasnya, Langsung saja berikut Codingan dan contohnya :

Interface TextBox to Alert

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Interface dengan JS</title>
 <link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   function sayHalo(){
       var nm = document.getElementById('nama').value;
       alert("Hallo, " + nm);
      }
  </script>
  <label>Tulis disini</label>
  <input type="text" id="nama" onchange="sayHalo();">
 </p>
</body>
</html>

Nah, ini merupakan contoh Codingan tentang Interaksi User dimana jika user mengisi textbox yang telah diisi lalu menekan enter maka inputan tersebut akan ditampilkan menggunakan Alert. Disini juga kita menggunakan attribut onchange dan membuat function sayHalo(). Untuk mengakses inputannya kita menggunakan id (document.getElementById).

Fungsi OOP 1

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi PBO</title>
 <link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
 
 <input type="text" id="nilai">
 <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">

 <script language="javascript" type="text/javascript">
  function ambilNilai(){
   var objNilai = document.getElementById('nilai');
   var n = objNilai.value;
   alert("Nilainya adalah " + n);
  }
 </script>
</body>
</html>

Nah, ini merupakan contoh Codingan yang mengandung OOP yaitu dengan membuat function yang berguna untuk mengambil inputan user yang berisikan angka/nilai yang kemudian akan di alert. Sama seperti codingan sebelumnya untuk pengaksesan data.

Fungsi PBO 2

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi PBO</title>
 <link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="javascript" type="text/javascript">
   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 penggunanannya
   var s = new SegiEmpat();
   s.panjang = 4;
   s.lebar = 3;
   alert("Luas adalah " + s.hitungluas() + " cm");
   alert("dan keliling adalah " + s.hitungKeliling() + " cm");
  </script>
 </p>
</body>
</html>

Nah, Codingan ini merupakan contoh ke-2 penerapan OOP, dalam Codingan ini yaitu tentang penghitungan Luas dan Keliling dari suatu persegi. Sama juga yaitu membuat functionnya terlebih dahulu.

Interface TextBox & Button to Alert

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Interface dengan JS</title>
 <link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
 <p id="coba">
<input type="text" id="nilai">
  <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
  <script language="javascript" type="text/javascript">
   function ambilNilai(){
    var objNilai = document.getElementById('nilai');
   var n = objNilai.value;
   alert("Nilainya adalah " + n);
   }
  </script>
 </p>
</body>
</html>

Nah, sebenarnya ini sama saja dengan codingan yang pertama hanya saja disini kita menggunakan attribute onclick yaitu ketika button diklik maka akan muncul alert yang sudah ditentukan.

Interface TextBox & Button to Alert 2

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Interface dengan JS</title>
 <link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
 <p id="coba">
<input type="text" name="nilai">
  <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
  <script language="javascript" type="text/javascript">
   function ambilNilai(){
    var objNilai = document.getElementsByName('nilai')[0];
   var n = objNilai.value;
   alert("Nilainya adalah " + n);
   }
  </script>
 </p>
</body>
</html>

Nah, sebenarnya ini sama saja dengan codingan yang sebelumnya hanya saja disini kita menggunakan nama untuk mengakses inputan user yaitu dengan document.getElementsByName.

Interface TextBox & Button to Alert (Array)

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Interface dengan JS</title>
 <link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
 <p id="coba">
<input type="text" name="nilai">
  <input type="text" name="nilai">
  <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
  <script language="javascript" type="text/javascript">
   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);
   alert("Nilai kedua adalah " + n2);
   }
  </script>
 </p>
</body>
</html>

Nah, dicodingan ini kita menggunakan array yang sama juga yaitu untuk menampilkan nilai - nilai yang diinput oleh user dengan menggunakan function dan pengaksesan data yang tentunya nilai yang diinput oleh user jumlahnya lebih dari 1 karena ini Array.

Interface getElementsByTagName

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Interface dengan JS</title>
 <link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
 <p id="coba">
<input type="text" name="nilai">
  <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
  <input type="text" name="hasil">
  <script language="javascript" type="text/javascript">
   function ambilNilai(){
    //mengambil obyek input text pertama
    var obj1 = document.getElementsByTagName('input')[0];
    //mengambil obyek input button
    var obj2 = document.getElementsByTagName('input')[1];
    //mengambil obyek input kedua
    var obj3 = document.getElementsByTagName('input')[2];
    //mengambil nilai input text pertama dan button
   var s1 = obj1.value;
   var s2 = obj2.value;
   //menampilkan nilai pada input text kedua
   obj3.value = s1;
   }
  </script>
 </p>
</body>
</html>

Nah, sebenarnya ini sama saja dengan codingan yang sebelumnya hanya saja disini kita menggunakan tag nama untuk mengakses inputan user yaitu dengan
document.getElementsByTagName. Dicodingan ini juga inputan nilai dari user dan ditampilkan di textbox yang lain bukan di alert.
Semua codingan diatas saya menggunakan 1 file css yaitu :

body{
 color: purple;
 font-size: 20px;
 text-align: center;
 background: url('Background.jpg');

}
p{
 margin-top: 120px;
}
#nilai, #btnAmbilNilai{
 margin-top: 120px;
}
h1{
 color: #24325D;
 font-family: Verdana, Monoscape;
 text-align: center;
 text-shadow: 2px 2px 2px dodgerblue;
}
input[type="button"]{
 color: cyan;
 background-color: purple;
}
input[type="button"]:hover{
 color: purple;
 background-color: cyan;
}

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.