Belajar Javascript (11. Object)

Akhi Syabab

Object Javascript

Pada bahasan kali ini kita akan belajar tentang object dalam javascript. Nantinya kita akan menentukan object yang kita pilih misalkan object nya mobil, motor, sepeda, dan lain-lain. Misalkan pada kasus object motor, pasti memiliki merk, warna, tinggi, dll. Semua itu di sebut dengan “properties” dari object. Kemudian ada yang di sebut “Method” yaitu bagaimana object di jalankan misalkan digas, direm, dikendarai, berhenti, dll. Semua object misalkan motor tadi sama-sama mempunyai properties, namun nilai properties object motor satu dengan yang lainya berbeda. Begitu juga method, semua object mempunyai method, namun waktu pelakasanaan method dari object satu dengan object lainya berbeda.

Ok kita masuk ke kode. misalkan kita menentukan object motor dengan hanya memiliki satu properties misal merk honda, kita hanya menuliskan sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>object</title>
</head>
<body>
 	<script type="text/javascript">
 		var motor = "honda";
 		document.write(motor);
 	</script>
</body>
</html>

hasil
Kita lihat kode diatas, object kita jadikan sebagai variable dengan hanya satu properties nilai. Misalkan beberapa nilai:

<!DOCTYPE html>
<html>
<head>
	<title>object</title>
</head>
<body>
	<script type="text/javascript">
		var motor = {
			merk: "honda",
			model: "vario",
			warna: "putih",
			tahun: "2016"
		};
		document.write(motor.merk);
	</script>
</body>
</html>

hasil

Untuk mengakses properties object, ada dua cara yaitu
namaObject.namaProperty atau namaObject[“namaProperty”]. contoh:

<!DOCTYPE html>
<html>
<head>
	<title>object</title>
</head>
<body>
	<p id="cetak"></p>
	<script type="text/javascript">
		var mahasiswa = {
			firstname: "paul",
			lastname: "pogba",
			NIM: 123
		};
		document.getElementById("cetak").innerHTML= mahasiswa.firstname+" "+mahasiswa.lastname+" mempunyai NIM "+mahasiswa.NIM;
	</script>
</body>
</html>

hasil

Selanjutnya kita bahas tentang method. Diatas sudah kami sebutkan method yaitu action yang dilakukan object. Method ini ditulis seperti properties biasa namun berbentuk function atau fungsi. Jika bingung perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
	<title>object</title>
</head>
<body>
	<p id="cetak"></p>
	<script type="text/javascript">
		var siCantik = {
			firstname: "Raisa",
			lastname: "Andriana",
			profesi: "Singer",
			genre: "pop",
			fullname: function(){
				return this.firstname + " " + this.lastname;
			},
			work: function(){
				return this.profesi + " " + this.genre;
			}
		};
		document.getElementById("cetak").innerHTML = siCantik.fullname() + " " + siCantik.work();
	</script>

</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

written by @akhi_syabab