Array Pada Javascript



             Assalamualaikum, pada kesemapatan kali ini saya akan menjelaskan materi tentang Array Pada Javascript. Dalam Javascript variable hanya bisa menyimpan satu data pada suatu saat. Maka dari itu adanya Array di Javascript sangat membantu kita untuk menyimpan himpunan data dalam satu variable khusus.

A. Array
       
        - Pengertian 
           Array adalah satu variable yang dapat berisi banyak data yang independent. Data yang disimpan diberikan indeks tertentu atau meggunakan nomor urut  mulai dari 0. Indeks ini  nantinya dapat digunakan untuk mengakses data yang disimpan dalam array tersebut. 

        - Jenis -Jenis
           1. Array Monodimensi
               Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi.

           2. Array Multidimensi
               Jika elemen suatu array berisikan array lainnya, maka  array tersebut array multidimensi.

           3. Array Asosiatif
               Indek dalam array selain ditentukan secara  otomatis  oleh sistem dan selalu dimulai dari 0,juga dapat dimodifikasi dengan menggunakan kata (string) atau nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array asosiatif.

 B. Implementasi
        
 1. Membuat Array dengan cara menuliskan langsung nama variablenya diikuti [""]

 BuatArray.html

<!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>
<link rel="stylesheet" href="BuatArrayJS.css">
</head>
<body>
<center><h1><mark>Panutan Saya Dalam Meraih Cita Cita</mark></h1></center>
<table border="1" width="70%" align="center">
<tr align="center">
<td><img src="../Assets/elon.png" alt="" width="100%"></td>
<td><img src="../Assets/jeff.png" alt="" width="100%"></td>
<td><img src="../Assets/steve.png" alt="" width="100%"></td>
<td><img src="../Assets/mark.png" alt="" width="100%"></td>
<td><img src="../Assets/bill.png" alt="" width="100%"></td>
</tr>
<tr align="center">
<td><p id="tokoh1"></p></td>
<td><p id="tokoh2"></p></td>
<td><p id="tokoh3"></p></td>
<td><p id="tokoh4"></p></td>
<td><p id="tokoh5"></p></td>
</tr>
<tr align="center">
<td><img src="../Assets/logo/space.png" alt="" width="100%"></td>
<td><img src="../Assets/logo/amazon.png" alt="" width="100%"></td>
<td><img src="../Assets/logo/apple.png" alt="" width="100%"></td>
<td><img src="../Assets/logo/facebook.png" alt="" width="100%"></td>
<td><img src="../Assets/logo/micro.png" alt="" width="100%"></td>
</tr>
</table>
<script>
var PanutanSaya = ["Bill Gates", "Mark Zuckerberg", "Steve Jobs", "Jeff Bezos", "Elon Musk"];
document.getElementById("tokoh1").innerHTML = PanutanSaya[4] ;
document.getElementById("tokoh2").innerHTML = PanutanSaya[3] ;
document.getElementById("tokoh3").innerHTML = PanutanSaya[2] ;
document.getElementById("tokoh4").innerHTML = PanutanSaya[1] ;
document.getElementById("tokoh5").innerHTML = PanutanSaya[0] ;
</script>
</body>
</html>

BuatArray.css

body {
background-image: url(../Assets/galaxy.jpg);
background-size: cover;
}

table {
background: gray;
}

Hasilnya



2. Membuat Array dengan cara mengidentifikasi Array dengan cara menulis nama variable diikuti new Array ("")

BuatArray2.html

<!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 XI RPL 2</title>
<link rel="stylesheet" href="BuatArray2JS.css">
</head>
<body>
<h1>Players Team OG Dota 2</h1>
<table width="70%" align="center" class="tb1">
<tr align="center">
<td><img src="../Assets/ana.jfif" alt="" width="100%"></td>
<td><img src="../Assets/jerax.jfif" alt="" width="100%"></td>
<td><img src="../Assets/notail.jfif" alt="" width="100%"></td>
<td><img src="../Assets/ceb.jfif" alt="" width="100%"></td>
<td><img src="../Assets/topson.jfif" alt="" width="100%"></td>
</tr>
<tr align="center">
<td><p id="player1"></p></td>
<td><p id="player2"></p></td>
<td><p id="player3"></p></td>
<td><p id="player4"></p></td>
<td><p id="player5"></p></td>
</tr>
</table>
<h1>Most Pick Hero Team OG Dota 2</h1>
<table width="70%" align="center" class="tb2">
<tr>
<td><img src="../Assets/io.jpg" alt="" width="100%"></td>
<td><img src="../Assets/tiny.jpg" alt="" width="100%"></td>
<td><img src="../Assets/nature.JPG" alt="" width="100%"></td>
<td><img src="../Assets/axe.JPG" alt="" width="100%"></td>
<td><img src="../Assets/invoker.JPG" alt="" width="100%"></td>
</tr>
<tr align="center">
<td><p id="hero1"></p></td>
<td><p id="hero2"></p></td>
<td><p id="hero3"></p></td>
<td><p id="hero4"></p></td>
<td><p id="hero5"></p></td>
</tr>
</table>
<script>
var OG = new Array("N0tail", "Ceeeeeeeeb", "Ana","JerAx","Topson");
document.getElementById("player1").innerHTML = OG[2];
document.getElementById("player2").innerHTML = OG[3];
document.getElementById("player3").innerHTML = OG[0];
document.getElementById("player4").innerHTML = OG[1];
document.getElementById("player5").innerHTML = OG[4];

var hero = new Array("IO", "Tiny", "Nature's Prophet", "Axe", "Invoker");
document.getElementById("hero1").innerHTML = hero[0];
document.getElementById("hero2").innerHTML = hero[1];
document.getElementById("hero3").innerHTML = hero[2];
document.getElementById("hero4").innerHTML = hero[3];
document.getElementById("hero5").innerHTML = hero[4];

</script>
</body>
</html>

BuatArray.css

body {
background-image: url(../Assets/ti9.jpg);
background-size: cover;
}

h1 {
text-align: center;
background: blueviolet;
}

table.tb1 {
background-color: #5A5250;
border: 1px solid black;
}

table.tb2 {
background-color: #080D11;
border: 1px solid black;
color: white;
}

Hasilnya


Catatan : Kedua Penulisan di atas tidak berpengaruh terhadap hasil maka dari itu pilih sesuai yang kamu suka.

3. Membuat Array Sebagai Objek

ArrayAsObject.html

<!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 XI RPL 2</title>
</head>
<body>
<h1>Nama Saya</h1>
<p id="objek">
<script>
var person = {firstName:"Muhammad", lastName:"Fahru", age:15};
document.getElementById("objek").innerHTML = person["firstName"] + " " + person["lastName"];
</script>
</p>
</body>
</html>

Hasilnya



4. Pengaksesan Data Dalam Array

AksesDataOnArray.html

<!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>
body {
background-color: grey;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1>Ini Adalah Hasil dari <mark> Array Javascript </mark></h1>
<script>
var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah", "Zebra", "Monyet", "Kelinci", "Lutung","Kuda"];
document.write( "Di Kebun Binatang ada " + arrayHewan[0]+" dan "+arrayHewan[8]+ " dan " + arrayHewan[6]+ " dan teman-temannya");
</script>
</center>
</body>
</html>

Hasilnya



Sekian Ilmu Yang Dapat Saya Beri Semoga Bermanfaat , Wassalamualaikum