Pemograman Berorientasi Objek dan Interaksi User pada Javascript

Assalamu'alaikum Wr.Wb
Halo teman - teman , materinya saya kebut ya huuuuu, soalnya saya ketinggalan jauh dan inshaallah saya nanti ga delay lagi. Sekarang kita bahas mengenai Pemograman Berorientasi Objek dan Interaksi User pada Javascript.

Pemrograman Berorientasi Objek

Pemrograman berorientasi obyek adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun konstanta terkait dalam satu kesatuan (kelas) seperti obyek dalam dunia nyata.

PBO: Pemrograman Berbasis Prototipe

Javascript menggunakan PBO 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.

Obyek 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.

Obyek 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

Berikut ini merupakan daftar atribut yang dapat digunakan untuk mengolah interaksi user

Pengaksesan Obyek Pada Halaman Web

Ini adalah contoh Pencodingan yang saya buat. Langsung aja ya cekidottt...

<!DOCTYPE html>
<html>
<head>
<title>Interface dengan JS</title>
<link rel="stylesheet" href="woy.css">
</head>
<body>
<center>
<p id="coba">
<script>
function sayHalo(){
var nama = document.getElementById('nama').value;
alert("Halo, " +nama);
}
</script>
<label> Tulis disini<br></label>
<input type="text" id="nama" onchange="sayHalo(); ">
<input type="button" id="pencet" value="Hallo" onclick="sayHalo();">
</p>
</center>
</body>
</html>

Hasilnya sebagai berikut.

<!DOCTYPE html>
<html>
<head>
<title>Buat Fungsi PBO</title>
<link rel="stylesheet" href="woy.css">
</head>
<body>
<center>
<p id="coba">
Masukan Nilai<br>
<input type="text" id="nilai">
<input type="button" id="pencet" value="Ambil nilai" onclick="ambilNilai();">

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

Hasilnya seperti ini.

<!DOCTYPE html>
<html>
<head>
<title>Interface dengan JS<</title>
<link rel="stylesheet" href="woy.css">
</head>
<body>
<center>
<p id="coba">
Masukan Nilai
<input type="text" id="nilai">
<input type="text" id="nilai">
<input type="button" id="pencet" value="Ambil Nilai" onclick="ambilNilai();">
<script>
function ambilNilai(){
var obj1 = document.getByElementsByName('nilai')[0];
var obj2 =document.getByElementsByName('nilai')[1];
var n1 = obj1.value;
var n2 = obj2.value;
alert("nilai pertama adalah "+n1);
alert("nilai kedua adalah "+ n2);
}
</script>
</p>
</center>
</body>
</html>

Hasilnya seperti ini.

Dan ini adalah CSS nya

body{
background-image: url(background.jpg);
background-color: #2CB3DF;
font-family: Garamond;
font-size: 35px;
}
*{
box-sizing: border-box;;
}
#coba{
width: 380px;
padding: 10px;
border: 2px solid black;
border-radius: 7px;
background: white;
text-align: center;
color: black;
background: #1A1A1A;
color: white;
}
#coba:hover{
transform:scale(1.3);
}
#nilai, #nama{
border-radius: 10px;
display: inline-block;
padding:5px 5px;
border: 1px solid salmon ;
margin: 6px 0;
}
#pencet{
background-color: salmon;
border: none;
margin: 5px 0;
color: white;
padding: 5px 5px;
border-radius: 8px;
}

Nah itu dia yang bisa saya beri contoh. Semoga bisa dikembangkan lagi menjadi lebih baik, mohon maaf bila ada kekurangan, jika tidak paham boleh coment atau kotak yang tertera pada blog. Saya pamit..

Wassalamu'alaikum Wr.Wb