Assalamualaikum temen-temen...
Yoow, Balik lagi dengan mimin,yang pasti kali ini kita masih akan membahas tentang JS ya gengs, yaudah lah daripada banyak basa basi kita ke pembahasannya yaitu tentang array,jeng-jeng..
> Pengertian Array
> Jenis jenis Array
> Contoh contoh Array
Oke yang pertama yaitu
1. Pengertian Array
Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index.
Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dst.
Array di dalam JavaScript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat.
Index array di dalam JavaScript juga tidak harus berurutan, JavaScript membolehkan elemen dari array ‘tidak terurut’. Kita bisa mengisi hanya index 0, 5, dan 10 saja di dalam array.
2. Jenis jenis Array
Array Multidimensi
Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut.
Perhatian :
Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.
Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi. Berikut ilustrasinya.
Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.
Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi. Berikut ilustrasinya.
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. Berikut adalah ilustrasinya
3. Contoh Penulisan Array
Sebuah object array dideklarasikan di JavaScript dengan beberapa cara berikut :
- Dengan penggunaan keyword new Array(), dengan contoh sebagai berikut :
var objArr = new Array(); - Dengan penggunaan keyword new Array(jumlahindex), dengan contoh sebagai berikut :
var objArr = new Array(3); - Dengan penggunaan keyword new Array(item1, item2, ...), dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = new Array("Sumatera", "Jawa", 100); - Dengan penggunaan literal [item1, item2, item3, ...], dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = [10, "Sarah", "Meliani", true];
> Contoh ke satu
<!DOCTYPE html>
<html>
<head>
<title>Membuat Array</title>
<link rel="stylesheet" href="array.css">
</head>
<body>
<h3>Ini adalah elemen array ke 4</h3>
<p id="coba">
<script>
var siswaXRPL1=["Adi","Adnan","Arvi","Devina","Lukman","Pahmi"];
document.getElementById("coba").innerHTML = siswaXTKJ1[4];
</script>
</p>
</body>
</html>
<html>
<head>
<title>Membuat Array</title>
<link rel="stylesheet" href="array.css">
</head>
<body>
<h3>Ini adalah elemen array ke 4</h3>
<p id="coba">
<script>
var siswaXRPL1=["Adi","Adnan","Arvi","Devina","Lukman","Pahmi"];
document.getElementById("coba").innerHTML = siswaXTKJ1[4];
</script>
</p>
</body>
</html>
Hasilnya akan jadi:
> Contoh ke dua
<!DOCTYPE html>
<html>
<head>
<title>Array ke 2</title>
<link rel="stylesheet" href="array.css">
</head>
<body>
<h3>Ini adalah elemen array ke 2</h3>
<p id="coba2">
<script>
var siswa = new Array ("Wicky","Subi","Rajab","Renaldi");
document.getElementById("coba2").innerHTML = siswa[2];
</script>
</p>
</body>
</html>
<html>
<head>
<title>Array ke 2</title>
<link rel="stylesheet" href="array.css">
</head>
<body>
<h3>Ini adalah elemen array ke 2</h3>
<p id="coba2">
<script>
var siswa = new Array ("Wicky","Subi","Rajab","Renaldi");
document.getElementById("coba2").innerHTML = siswa[2];
</script>
</p>
</body>
</html>
Hasilnya akan jadi:
> Contoh ke tiga
<!DOCTYPE html>
<html>
<head>
<title>Array adalah objek</title>
<link rel="stylesheet" href="array.css">
</head>
<body>
<h3>Ini adalah contoh penggunaan array objek nama depan</h3>
<p id="objek">
<script>
var person ={firstName:"Mochammad", lastName:"Faisal", age:15};
document.getElementById("objek").innerHTML = person["firstName"]
</script>
</p>
</body>
</html>
<html>
<head>
<title>Array adalah objek</title>
<link rel="stylesheet" href="array.css">
</head>
<body>
<h3>Ini adalah contoh penggunaan array objek nama depan</h3>
<p id="objek">
<script>
var person ={firstName:"Mochammad", lastName:"Faisal", age:15};
document.getElementById("objek").innerHTML = person["firstName"]
</script>
</p>
</body>
</html>
Hasilnya akan jadi:
> Contoh ke empat
<html>
<head>
<title>Buat Array</title>
<link href="array.css" rel="stylesheet"></link>
</head>
<body>
<h3>Ini adalah contoh penggunaan array data</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>
<head>
<title>Buat Array</title>
<link href="array.css" rel="stylesheet"></link>
</head>
<body>
<h3>Ini adalah contoh penggunaan array data</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>
Hasilnya akan jadi:
Untuk css nya saya satukan di satu file yaitu:
body{
background-color:#2C2424;
font-family: tw cen mt;
font-size: 40px;
text-align: center;
}
h3{
color: white;
}
#coba,#coba2,#objek{
color: black;
border:solid;
border-color: white;
border-radius: 20px;
background-color: #2CB3DF;
}
background-color:#2C2424;
font-family: tw cen mt;
font-size: 40px;
text-align: center;
}
h3{
color: white;
}
#coba,#coba2,#objek{
color: black;
border:solid;
border-color: white;
border-radius: 20px;
background-color: #2CB3DF;
}
Oke mungkin itu saja yang mimin bisa bahas ya gengs, dan mohon maaf bila ada typo typo,karena mimin hanya manusia biasa bukan robot. Sampai jumpa di lain waktu...
Semangat ya gengs dalam meraih cita-cita nya,agar kalian semua suksees..
0 Komentar