PWPB | Pertemuan 16
Pemogramman Berorientasi Objek & Interaksi User pada Javascript
Assalamualaikum, pada kali ini saya akan menjelaskan materi tentang Pemogramman Berorientasi Objek dan Interaksi User pada Javascript.
Pemogramman Berorientasi Objek
Pemogramman Berorientasia Objek adalah sebuah paradigma dalam pemogramman yang mengelompakkan fungsi, prosedur, variable ataupun konstanta terkait dalam satu kesatuan (Kelas) seperti objek dalam dunia nyata.
Objek sendiri merupakan wujud dari kelas, secara umum dikenal dengan nama instan. Teknik - teknik dalam pemogramman ini merupakan pengembangan dari teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi. Saat ini ada banyak bahasa pemogramman yang telah mendukung pemogramman berorientasi objek ini, seperti C++, C#, Java, Javascript, PHP, Python, Ruby, dan Objective C.
PBO dalam Javascript : Pemogramman Berbasis Prototipe
Javascript menggunakan PBO dengan model pemogramman berbasis protipe. Model ini tidak mengenal kelas, yang ada adalah objek. Objek dalam model ini dapat dimodifikasi secara rutntime seperti penambahan variable (properti) ataupun metode (fungsi/prosedur). Model ini juga dikenal dengan istilah pemogramman 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.
Daftar Atribut Yang Digunakan Untuk Mengolah Interaksi User
Pengaksesan Objek Pada Halaman Web
Implementasi
Daftar Atribut Yang Digunakan Untuk Mengolah Interaksi User
Pengaksesan Objek Pada Halaman Web
Sweet Alert
dalam pemogramman Javascript pasti kita tahu dengan alert. Alert adalah fungsi yang digunakan untuk pesan pada suatu website. Jika kita lihat tampilan alert itu begitu saja tanpa ada style apapun membuat interface kurang bagus. Nah bagamaimana kita mempercantik alert suatu website ? jawabannya dengan menggunakan Sweet Alert. Untuk cara penggunaannya bisa langsung saja lihat di web resminya Sweet Alert . Saya akan menggunakan sweet alert saat tahap implementasi walau tidak semua.
Implementasi
1. Interface Text Box to Alert
Kodingannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<script src = " https://unpkg.com/sweetalert/dist/sweetalert.min.js "> </script>
<style>
input.input {
border: 5px solid cyan;
width: 300px;
height: 50px;
background: blueviolet;
border-radius: 50px;
padding: 20px;
font-size: 20px;
color: white;
}
label {
font-size: 20px;
margin-right: 10px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p id="coba">
<script>
function sayHalo() {
var nm = document.getElementById("nama").value;
swal ({
icon : "success",
text : "Hasilnya = " + nm
});
}
</script>
<label>Tulis Disini</label>
<input type="text" class="input" id="nama" onchange="sayHalo()">
</p>
</body>
</html>
Hasilnya
Setelah di enter maka akan muncul sweetalert seperti di bawah ini
2. Fungsi PBO
Kodingannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<script src = " https://unpkg.com/sweetalert/dist/sweetalert.min.js "> </script>
<style>
input.nilai {
border: 5px solid cyan;
width: 300px;
height: 50px;
background: blueviolet;
border-radius: 50px;
padding: 20px;
font-size: 20px;
color: white;
}
input.button{
border: 3px solid cyan;
width: 100px;
height: 50px;
background: blueviolet;
border-radius: 50px;
color: white;
}
</style>
</head>
<body>
<input type="text" id="nilai" class="nilai"/>
<input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();" class="button" />
<script>
function ambilNilai() {
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
swal({
icon : "success",
text : "Hasilnya = " + n
});
}
</script>
</body>
</html>
Hasilnya
Setelah button di klik maka akan muncul sweetalert seperti di bawah ini
3. Fungsi PBO 2
Kodingannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p id="coba">
<script>
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;
}
}
var s = new SegiEmpat();
s.panjang = 4;
s.lebar = 3;
alert ("Luas Adalah " + s.hitungLuas() + " cm");
alert ("keliling adalah " + s.hitungKeliling() + " cm");
</script>
</p>
</body>
</html>
Hasilnya
4. Interface Text Box and Button to Alert
Kodingannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<script src = " https://unpkg.com/sweetalert/dist/sweetalert.min.js "> </script>
<style>
input.nilai {
border: 5px solid cyan;
width: 300px;
height: 50px;
background: blueviolet;
border-radius: 50px;
padding: 20px;
font-size: 20px;
color: white;
}
input#btnAmbilNilai{
border: 3px solid cyan;
width: 100px;
height: 50px;
background: blueviolet;
border-radius: 50px;
color: white;
}
</style>
</head>
<body>
<p id="coba">
<input type="text" class="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
<script>
function ambilNilai() {
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
swal ({
icon : "success",
text : " Hasilnya = " + n
});
}
</script>
</p>
</body>
</html>
Hasilnya
Setelah Button di klik maka button akan menjalankan javascript yaitu function ambilNilai(), maka hasilnya seperti di bawah
5. Interface Text Box and Button to Alert 2
Kodingannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<script src = " https://unpkg.com/sweetalert/dist/sweetalert.min.js "> </script>
<style>
input.input {
border: 5px solid cyan;
width: 300px;
height: 50px;
background: blueviolet;
border-radius: 50px;
padding: 20px;
font-size: 20px;
color: white;
}
input.button{
border: 3px solid cyan;
width: 100px;
height: 50px;
background: blueviolet;
border-radius: 50px;
color: white;
}
</style>
</head>
<body>
<p id="coba">
<input type="text" name="nilai" class="input">
<input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();" class="button">
<script>
function ambilNilai() {
var objNilai = document.getElementsByName('nilai')[0];
var n = objNilai.value;
swal( {
icon : "success",
text: "Hasilnya = " + n
});
}
</script>
</p>
</body>
</html>
Hasilnya
Setelah Button di klik maka button akan menjalankan javascript yaitu function ambilNilai(), maka hasilnya seperti di bawah
Ko hasilnya sama dengan yang sebelumnya ? ya memang hasilnya sama tapi dalam kodingan berbeda jika yang pertama menggunakan getElementsById() berbeda dengan yang ini, ini menggunakan getElementsByName() dan juga pada function Objek Nilainya diberi indeks bernilai [0].
6. Interface Text Box and Button to Alert to Array
Kodingannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<script src = " https://unpkg.com/sweetalert/dist/sweetalert.min.js "> </script>
<style>
input.input {
border: 5px solid cyan;
width: 300px;
height: 50px;
background: blueviolet;
border-radius: 50px;
padding: 20px;
font-size: 20px;
color: white;
}
input.button{
border: 3px solid cyan;
width: 100px;
height: 50px;
background: blueviolet;
border-radius: 50px;
color: white;
}
</style>
</head>
<body>
<p id="coba">
<input type="text" name="nilai" class="input"><br><br>
<input type="text" name="nilai" class="input"><br><br>
<input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();" class="button">
<script>
function ambilNilai() {
var obj1 = document.getElementsByName('nilai')[0];
var obj2 = document.getElementsByName('nilai')[1];
var n1 = obj1.value;
var n2 = obj2.value;
swal ({
info : "success",
text : "Nilai Pertama Berisi = " + n1 + "\n\nNilai Pertama Berisi = " + n2,
});
}
</script>
</p>
</body>
</html>
Hasilnya
Setelah button di klik maka button akan menjalankan function AmbilNilai() dalam javascript maka akan tampil sweetalert seperti di bawah
7. Interface getElementsByTagName
Kodingannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2 </title>
<style>
input {
border: 5px solid cyan;
width: 300px;
height: 50px;
background: blueviolet;
border-radius: 50px;
padding: 20px;
font-size: 20px;
color: white;
}
input.button {
border: 3px solid cyan;
width: 100px;
height: 50px;
background: blueviolet;
border-radius: 50px;
color: white;
font-size: 10px;
}
</style>
</head>
<body>
<p id="coba">
<input type="text" name="nilai" class="input">
<input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();" class="button"><br><br>
<input type="text" name="hasil" class="input">
<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];
// mengambil nilai input text pertama dan button
var s1 = obj1.value;
var s2 = obj2.value;
// menampilakan nilai pada input text kedua
obj3.value = s1 + s2;
}
</script>
</p>
</body>
</html>
Hasilnya
Setelah button di klik maka akan input yang kosong di atas akan terisi oleh nilai yang diinputkan di awal dan mengambil value dari button maka hasilnya seperti di bawah
Sekian Materi Yang Dapat Saya Berikan Semoga Bermanfaat, Wassalamualaikum
0 Comments