Array JavaScript (Pertemuan 13)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Pembahasan kita kali ini masih seputar javascript, lebih lengkapnya mengenai penggunaan array dalam javascript. Langsung saja kita mulai pembahasan kita kali ini.

1. Array
Array digunakan untuk memudahkan proses penyimpanan dan pemanggilan data / variable yang telah diurutkan / didefinisikan pada suatu array sebelumnya. Cara membuat array :
var namaArray = ["Isi"]
Format pemanggilan array dimulai dari 0, untuk memanggil isi / elemen sebuah array kita dapat menggunakan cara ini :
var namaArray["Isi/Elemen/Urutan"];
Berikut adalah contoh codingan pertama :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Array</title>
   <link href="BuatArray.css" rel="stylesheet" type="text/css"></link>
 </head>
  <body>
   <p>
Daftar Nama Siswa X TKJ 1
    <h1 id = "coba">
</h1>
<button type = "button" name = "NextValue" id = "NextValue"
     onclick = "document.getElementById('coba').style.color = 'Chocolate' "> Generate Random Name </button>
    <center>
     <table border = 2>
<tr>
       <th> No </th>
       <th> Nama Siswa </th>
      </tr>
<tr>
       <td> 1 </td>
       <td> Adi </td>
      </tr>
<tr>
       <td> 2 </td>
       <td> Arvi </td>
      </tr>
<tr>
       <td> 3 </td>
       <td> Devina </td>
      </tr>
<tr>
       <td> 4 </td>
       <td> Lukman </td>
      </tr>
<tr>
       <td> 5 </td>
       <td> Pahmi </td>
      </tr>
</table>
</center>
<script type ="text/javascript">
      var Value = 0;
      var siswaXTKJ1 = ["Adi", "Adnan", "Arvi", "Devina", "Lukman", "Pahmi"];
     document.getElementById('NextValue').addEventListener("click" ,OnClicked);
     document.getElementById('coba').innerHTML = siswaXTKJ1[Value];
      function OnClicked(){
       if (Value < siswaXTKJ1.length -1) {
      Value++;
       }else{
      Value = 0;
       }
       document.getElementById('coba').innerHTML = siswaXTKJ1[Value];
      }
    </script>
   </p>
</body>
</html>

2. Array 2
Untuk contoh yang satu ini, terdapat kata new yang berarti kita akan membuat sebuah array baru yang isinya merupakan data yang ber tipe String. Contohnya seperti ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Array</title>
   <link href="BuatArray.css" rel="stylesheet" type="text/css"></link>
 </head>
  <body>
   <p>
Daftar Siswa Berprestasi 2018
    <h1 id = "coba">
</h1>
<button type = "button" name = "NextValue" id = "NextValue"
     onclick = "document.getElementById('coba').style.color = 'Chocolate' "> Generate Random Name </button>
    <center>
     <table border = 2>
<tr>
       <th> No </th>
       <th> Nama Siswa </th>
      </tr>
<tr>
       <td> 1 </td>
       <td> Wicky </td>
      </tr>
<tr>
       <td> 2 </td>
       <td> Subi </td>
      </tr>
<tr>
       <td> 3 </td>
       <td> Rajab </td>
      </tr>
<tr>
       <td> 4 </td>
       <td> Renaldi </td>
      </tr>
</table>
</center>
<script type ="text/javascript">
      var Value = 0;
      var siswa = new Array ("Wicky", "Subi", "Rajab","Renaldi");
     document.getElementById('NextValue').addEventListener("click" ,OnClicked);
     document.getElementById('coba').innerHTML = siswa[Value];
      function OnClicked(){
       if (Value < siswa.length -1) {
      Value++;
       }else{
      Value = 0;
       }
       document.getElementById('coba').innerHTML = siswa[Value];
      }
    </script>
   </p>
</body>
</html>

3. Array as Object
Pada contoh ini, isi / elemen dari array dapat dijadikan sebuah object / diberi nama, sehingga apabila kita akan memanggil sebuah array, indeks yang asalnya default nya angka karena telah diberi nama elemen nya maka kita harus memanggil isi / elemen array nya menggunakan nama yang telah kita gunakan. Seperti ini contohnya :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Array</title>
   <link href="BuatArray.css" rel="stylesheet" type="text/css"></link>
 </head>
  <body>
   <p>
Siswa Baru
    <h1 id = "coba">
</h1>
<button type = "button" name = "NextValue" id = "NextValue"
     onclick = "document.getElementById('coba').style.color = 'Chocolate' "> Generate Random Name </button>
    <center>
     <table border = 2>
<tr>
       <th> No </th>
       <th> Nama Depan </th>
       <th> Nama Belakang </th>
       <th> Umur </th>
      </tr>
<tr>
       <td> 1 </td>
       <td> Mochamand </td>
       <td> Faisal </td>
       <td> 15 </td>
      </tr>
</table>
</center>
<script type ="text/javascript">
      var Value = 0;
      var person = {firstName:"Mochamad", lastName:"Faisal", age:15};
     document.getElementById('NextValue').addEventListener("click" ,OnClicked);
     document.getElementById('coba').innerHTML = person[Value];
      function OnClicked(){
       if (Value < person.length -1) {
      Value++;
       }else{
      Value = 0;
       }
       document.getElementById('coba').innerHTML = person[Value];
      }
    </script>
   </p>
</body>
</html>

4. Akses Data Array

Contoh selanjutnya adalah bagaimana cara memanggil / mengakses data - data yang terdapat dalam suatu array. Cara pemanggilannya kita harus menggunakan document.write untuk melakukan output data. Contohnya seperti ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Array</title>
   <link href="BuatArray.css" rel="stylesheet" type="text/css"></link>
 </head>
  <body>
   <p id = "coba2">
<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>

Semua styling yang saya gunakan dalam postingan kali ini, terdapat dalam 1 file css yang sama.

body{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 25pt;
 color   : Blue;
 text-align : center;
}
table {
 font-size : 15pt;
 border : 2px dashed;
 width : 30%;
 text-align : center;
}
#coba{
 font-size : 20pt;
 color : chocolate;
}
#coba2{
 text-shadow: 3px 3px 10px red, 
     5px 5px 10px yellow;
}

Cukup sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalah dalam pengetikan maupun penjelasan. See you next Guys!.

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Array JavaScript (Pertemuan 13)

Komentar

Posting Komentar