Pratikum
Array
1. Pebegrtian Array
Array adalah sebuah variabel yang menyimpan banyak data ke dalam satu variabel.
Masing-masing data yang tersimpan di dalam sebuah array dapat diakses dengan
menggunakan index. Contoh deklarasi dan penulisan array.
let buah = [“pisang”,”apel”,”jeruk”];
Contoh diatas akan membuat array yang berisi 3 data yaitu pisang, apel dan jeruk.
Untuk membuat variabel array yang masih kosong adalah sebagai berikut :
let buah = new array(3);
Perintah diatas akan membuat array kosong dengan panjang 3, artinya array dapat
menampung 3 data.
Untuk mengakses array digunakan index. Index array dimulai dari hitungan 0, jadi
untuk contoh diatas array yang memliki panjang 3 maka index adalah 0,1,2. Contoh :
let buah=["pisang","apel","jeruk"];
[Link]("contoh").innerHTML = buah[2];
Hasil dari script diatas akan menampilkan jeruk. Untuk mengisi varibael array adalah
sebagai berikut
let buah = new Array(3);
buah[0] = "pisang";
buah[1] = "apel";
buah[2] = "jeruk";
Script diatas adalah membuat array dengan panjang 3 dan diisi berdasarkan index.
2. Latihan Array
Latihan ini bertujuan untuk mempraktekkan fungsi-fungsi yang sering dipakai
dalam array
1. Buat file [Link]
2. Membuat fungsi untuk menampilkan array
<html>
<head>
<title>Latihan Array</title>
<style>
button{
margin: 5px;
}
div{
margin: 10px;
}
</style>
</head>
<body>
<h1>Merk Mobil</h1>
<p id="hasil"></p>
<script>
let merkMobil = ['Toyota','Honda','Suzuki'];
let text;
tampil();
function tampil(){
text = "<ol>"
for (let i=0;i < [Link];i++){
text = text + "<li>" + merkMobil[i] + "</li>";
}
text = text + "</ol>";
[Link]("hasil").innerHTML=text;
}
</script>
</body>
</html>
Script diatas memperlihatkan fungsi tampil akan dipanggil ketika halaman web
dijalankan. [Link] merupakan perintah untuk mengetahui panjang array
3. Menambah data array
Tambahkan tag <div> di bawah <p id=”hasil”> </p> pada script diatas untuk
membuat tampilan input penambahan array
<div style="margin : 2px;">
Tambah array
<input type="text" id="tambah"> <br>
<button onclick="tambah()">Tambah</button>
</div>
Berikutnya buat function baru yang bernama tambah() di bawar function tampil()
function tambah(){
let tambah = [Link]("tambah").value;
[Link](tambah);
tampil();
}
Script diatas akan menambah data ke array sesuai dengan input user,kemudian
memanggil fungsi tampil() untuk menampilkan data pada array. Data yang baru
ditambah akan tampil di bagian akhir array.
4. Menghapus data array terakhir
Tambahkan tag<div> kedua untuk tampilan tombol hapus
<div>
Hapus Array dibagian akhir<br>
<button onclick="hapus()">Hapus Array terakhir</button>
</div>
Buat fungsi hapus() di bawah fungsi tambah()
function hapus(){
[Link]();
tampil();
}
Script diatas akan menghapus data pada array bagian akhir. Setelah itu memangil
fungsi tampil() untuk menampilkan semua data.
5. Mencari index array
Tambahkan tag <div> ketiga untuk menampung input pencarian dan hasil
pencarian
<div>
Cari Array dengan nama :
<input type="text" id="cari"><br>
<button onclick="cari()">Cari Index Merk Mobil</button>
<p id="hasilPencarian"></p>
</div>
Buat fungsi cari di bawah funngsi hapus()
function cari(){
let cari = [Link]("cari").value;
let index = [Link](cari);
[Link]("hasilPencarian").innerHTML = "data index ke " +
index;
}
Script diatas untuk melakukan pencarian dari data di array. Input adalah data yang
akan dicari, sedangkan output adalah index dari posisi data tersebut. Output akan
bernilai -1 apabila data tidak ditemukan.
6. Menghapus data berdasarkan hasil pencarian
Tambahkan tag <div> untuk membuat input data yang akan dihapus.
<div>
Data yang akan dihapus :
<input type="text" id="hapus"><br>
<button onclick="hapusData()">Hapus Data</button>
</div>
Buat fungsi hapusData() untuk menghapus data yang diinputkan user
function hapusData(){
let cari = [Link]("hapus").value;
let index = [Link](cari);
if(index > -1){
[Link](index,1);
}else{
alert("Data Tidak Ditemukan");
}
tampil();
}
Script diatas digunakan untuk menhapus data sesuai input user. Pertama dlakukan
pencarian data di dalam array, apabila hasil pencarian lebih dari -1 yang artinya
data tersebut ada di array maka dilakukan perintah [Link](index,1)
dimana index adalah index yang akan dihapus, sedangkan angka 1 artinya jumlah
data yang di hapus adalah 1. Apabila index -1 artinya data tidak ditemuka maka
akan tampil pesan data tidak ditemukan.
7. Script lengkap dari latihan [Link] adalah
<html>
<head>
<title>Latihan Array</title>
<style>
button{
margin: 5px;
}
div{
margin: 10px;
}
</style>
</head>
<body>
<h1>Merk Mobil</h1>
<p id="hasil"></p>
<div>
Tambah array :
<input type="text" id="tambah"><br>
<button onclick="tambah()">Tambah Di Akhir</button>
</div>
<div>
Hapus Array dibagian akhir<br>
<button onclick="hapus()">Hapus Array terakhir</button>
</div>
<div>
Cari Array dengan nama :
<input type="text" id="cari"><br>
<button onclick="cari()">Cari Index Merk Mobil</button>
<p id="hasilPencarian"></p>
</div>
<div>
Data yang akan dihapus :
<input type="text" id="hapus"><br>
<button onclick="hapusData()">Hapus Data</button>
</div>
<script>
let merkMobil = ['Toyota','Honda','Suzuki'];
let text;
tampil();
function tampil(){
text = "<ol>"
for (let i=0;i < [Link];i++){
text = text + "<li>" + merkMobil[i] + "</li>";
}
text = text + "</ol>";
[Link]("hasil").innerHTML=text;
}
function tambah(){
let tambah = [Link]("tambah").value;
[Link](tambah);
tampil();
}
function hapus(){
[Link]();
tampil();
}
function cari(){
let cari = [Link]("cari").value;
let index = [Link](cari);
[Link]("hasilPencarian").innerHTML = "data index ke
" + index;
}
function hapusData(){
let cari = [Link]("hapus").value;
let index = [Link](cari);
if(index > -1){
[Link](index,1);
}else{
alert("Data Tidak Ditemukan");
}
tampil();
}
</script>
</body>
</html>
Output dari script ini adalah
3. Array 2 dimensi
Array 2 dimensi adalah array yang di dalamnya berisi array lain, sehingga membentuk
data seperti tabel yang memiliki baris dan kolom. Bentuk umum dari array 2 dimensi
adalah
namaArray[baris][kolom]
Sebagai contoh array menyimpan data harga Buah
let buah =[
["pisang",20000],
["jeruk",10000],
["apel",30000]
];
Contoh diatas merupakan array 2 dimensi dengan 3 baris 2 kolom.
Latihan array 2 dimensi sebagai berikut
1. Buat file [Link]
2. Buat html dan javascript cara menampilkan dan menambah baris dari array 2
dimensi
<html>
<head>
<title>Latihan Array 2 Dimensi</title>
</head>
<body>
<p id="hasil"></p>
<p id="hasilTambah"></p>
<script>
let buah =[
["pisang",20000],
["jeruk",10000],
["apel",30000]
];
[Link]("hasil").innerHTML= buah[1][0];
[Link](["melon",20000]);
[Link]("hasilTambah").innerHTML= buah[3][0] + " " +
buah[3][1];
</script>
</body>
</html>
[Link]([“melon”,2000]) adalah perintah untuk menambah 1 baris dari array
yang berisi nama buah dan harga. Buah[1][0] akan menghasilkan jeruk. Sedangkan
buah[3][0] akan menampilkan nilai melon, itu dikarenakan array buah telah
ditambah dengan baris melon
4. Tugas Mandiri
Untuk lebih memahami array , kerjakan tugas berikut
1. Buat file [Link]
2. Buat array 2 dimensi yang berisi nama makanan dan harga makanan minimal 5
makanan, contoh [“Nasi Goreng”,10000],[“Mie Ayam”,13000][…,…]
3. Tampilkan data tersebut ke dalam tabel
4. Tambahkan fungsi pencarian data dengan input nama makanan dengan output
harga makanan
5. Hasil dari latihan ini sebagai berikut: