Tutorial Array pada JavaScript - Praktikum 13

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 kemarin yaitu mengenai JavaScript. Nah, untuk sekarang kita bakal bahas Pembuatan Array dalam JavaScript. Array itu sendiri merupakan struktur data yang memungkinkan dalam 1 variabel dapat berisi beberapa data. Untuk lebih jelasnya, Langsung saja berikut Codingan dan contohnya :
Array 1

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Array</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil salah satu Indexnya</h3>
<p id="coba">
<script>
			var siswaXTKJ1 =["Adi", "Adnan", "Arvi", "Devina", "Lukman", "Pahmi"];
			document.getElementById("coba").innerHTML = siswaXTKJ1[4];
		</script>
	</p>
</body>
</html>

Nah, Penulisan Array yaitu dengan tanda kurung --> var namavariable ["isi1","isi2"]. Dalam Array tentunya kita harus mengetahui index, index ini yaitu untuk memanggil isi dari array yang kita buat. Uniknya index dimulai dari angak 0(ex : kita punya sebuah array yang isinya ada 5 maka untuk menampilkan isi yang ke-1 dan ke-5 maka memakai index 0 dan 4). Dalam memanggil isi Array kita menggukan id juga. Codingan diatas menggunakan Array Monodimensiyaitu Array yang setiap indexnya mempunyai satu isian/nilai.

Array 2

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Array 2</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil salah satu Indexnya</h3>
<p id="coba2">
<script>
			var siswa= new Array("Wicky", "Subi", "Rajab","Renaldi"); document.getElementById("coba2").innerHTML = siswa[2];
		</script>
	</p>
</body>
</html>

Nah, Codingan diatas sama seperti codingan sebelumnya, yaitu membuat Array yang isiannya berupa nama - nama (String). Codingan diatas menggunakan Array Monodimensi. Kata new dalam Codingan berarti akan membuat Array Baru.

Array Objek

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Array Adalah OBJEK</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil salah satu Indexnya</h3>
<p id="objek">
<script>
			var person = {firstName:"Mochamad", lastName:"Faisal", age:15}; document.getElementById("objek").innerHTML = person["firstName"];
		</script>
	</p>
</body>
</html>

Nah, Codingan diatas merupakan contoh penggunaan Array Asosiatif yaitu kita dapat mengganti index yang defaultnya berupa angka menjadi kata yang kita inginkan. Namun dicodingan ini tetap menampilkan hanya satu isi Array.

Akses data Array

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - BuatArray</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil Beberapa Indexnya</h3>
<p id="coba">
<script>
			var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah", "Zebra", "Monyet", "Kelinci", "Lutung","Kuda"]; 
			document.write( "Di bonbin ada " + arrayHewan[0]+" dan "+arrayHewan[8] +", " + arrayHewan[6]+ " dan teman-temannya"); 
		</script>
	</p>
</body>
</html>

Nah, Codingan diatas merupakan contoh implementasi Pengaksesan data dalam sebuah Array(Disini Array monodimensi). document.write dalam codingan ini sama fungsinya dengan cout dalam bahasa pemrograman C++ atau println dalam bahasa pemrograman Java.
Semua Codingan diatas saya menggunakan 1 file css untuk styling.

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

}
h3{
	color: #24325D;
	font-family: Verdana, Monoscape;
	text-align: center;
	text-shadow: 2px 2px 2px dodgerblue;
}

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.