Pengertian Array di dalam JavaScript

Cerita Dosen, Sepriano, M.Kom - Pada materi pertemuan ke-10 mata kuliah Pemrograman Web 1 kita akan membahas Pengertian Array di dalam JavaScript, diharapkan rekan-rekan mahasiswa sekalian membaca, memahami dan mengimplementasikannya dalam bentuk latihan kerja.

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 index 0, elemen kedua berada di index 1, dst. Index maksimum yang bisa ditampung array dalam JavaScript adalah 4.294.967.294 (2^23 – 2), dengan jumlah elemen maksimum adalah 4.294.967.295.

Array di dalam JavaScript tidak bertipe (untyped array). Elemen dari array bisa bertipe data string, number dan boolean dalam sebuah array yang sama, bahkan elemen dari array bisa berupa objek atau array yang lain.

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.

Cara Penulisan Array di dalam JavaScript

Terdapat 2 cara penulisan tipe data array di dalam JavaScript, yaitu dengan penulisan menggunakan kurung siku [ dan ], dan menggunakan keyword new Array(). Perintah new ini akan membuat ‘objek’ array. Berikut adalah contoh pembuatan array di dalam JavaScript:

var arr1 = [] // array kosong, 0 elemen

var arr2 = [1,2,3,4,5] // array dengan 5 elemen

var arr3 = [3,4.1,"belajar","JavaScript"] // array dengan 4 elemen

//buat object objek1

var arr4 = new Array(); // array kosong, 0 elemen

var arr5 = new Array(1,2,3,4,5) // array dengan 5 elemen

var arr6 = new Array(3,4.1,"belajar","JavaScript") // array 4 elemen

// tampilkan array

console.log(arr1.toString());

console.log(arr2.toString());

console.log(arr3.toString());

console.log(arr4.toString());

console.log(arr5.toString());

console.log(arr6.toString());

</script>

Dalam contoh diatas, saya mendefenisikan array dengan menggunakan kurung siku, dan menggunakan keyword new Array(). Setelah menginput beberapa data ke dalam Array, saya kemudian menampilkan isi array dengan perintah console.log. toString adalah method array yang digunakan untuk menkonversi Array menjadi String (tentang fungsi dan method yang berkaitan dengan array akan kita bahas dalam tutorial berikutnya).

Nilai elemen dari array juga tidak harus bersifat tetap. Kita bisa membuat nilai array bersasal dari variabel lain. Berikut contohnya:

var a=12

var arr1 = [a,a+1,a/2,a-3,3+5]

console.log(arr1.toString()); // hasil: 12,13,6,9,8

</script>

Jika sebuah elemen ‘dilompati’ pada saat penulisan array, maka nilai elemen tersebut adalah undefined, yang berarti ‘tidak ada’ data.

Berikut contohnya:

var arr1 = [1,2,,,,6]

console.log(arr1.toString());

console.log(arr1[0]); // elemen ke-1 array

console.log(arr1[1]); // elemen ke-2 array

console.log(arr1[2]); // elemen ke-3 array

</script>

Jika menggunakan cara pendefenisian array dengan perintah new Array(), apabila hanya diberikan 1 argumen angka, maka perintah tersebut berarti menyuruh JavaScript untuk mempersiapkan jumlah elemen array sebanyak nilai tesebut, namun array itu sendiri belum memiliki index dan elemen apa-apa, seperti contoh berikut ini:

var arr1 = new Array(10);

console.log(arr1.toString());

console.log(arr1.length);

console.log(arr1[0]); // elemen ke-1 array

console.log(arr1[1]); // elemen ke-2 array

</script>

Terlihat dari pemanggilan method toString dan length bahwa array tersebut berisi 10 elemen, namun pada saat dilakukan pemanggilan, hasilnya adalah undefined.

Cara Membaca Data dan Menambah Data ke dalam Array Untuk membaca data array, kita menggunakan format: nama_array[index]

sedangkan untuk menambah data kedalam array, formatnya adalah:

nama_array[index] = data_baru

Jika pada saat menambahkan data kedalam array yang sudah berisi data pada index tersebut, maka data yang lama akan ditimpa oleh data yang baru. Berikut adalah contoh pembacaan data dan penambahan data array JavaScript:

var arr1 = [1,2,3];

var a = arr1[2];

console.log(arr1.toString()); // hasil: 1,2,3

console.log(a); // hasil: 3

arr1[3]=4;

arr1[4]=5;

console.log(arr1.toString()); // hasil: 1,2,3,4,5

arr1[5]=arr1[4]+1; // arr[5] = 6

arr1[5+1]=(arr1[1+2]*2)-1; // arr[6] = 7

console.log(arr1.toString()); // hasil: 1,2,3,4,5,6,7

</script>

Perhatikan bahwa kita bisa mengakses index array dengan rumus matematis selama menghasilkan nilai angka.

Cara Mengetahui Jumlah elemen Array: Property Length

Walaupun kita akan membahas tentang fungsi atau method array pada tutorial selanjutnya, namun property array length akan saya bahas disini. Sesuai dengan namanya, property length dari Array digunakan untuk mengetahui ‘panjang’ elemen dari sebuah array.

*Hasil dari property array length adalah berapa banyak elemen di dalam array tersebut, bukan index tertinggi. Karena index dimulai dari 0, maka nilai length akan selalu lebih besar daripada nilai index tertinggi. Untuk array dengan index yang terurut dari 0, maka index tertinggi adalah nilai length-1.

Berikut adalah contoh penggunaan property length dalam JavaScript:

var arr1 = ["a","b","c","d","e"];

console.log(arr1.toString()); // hasil: a,b,c,d,e

console.log(arr1.length); // hasil: 5

arr1[5]="f";

arr1[6]="g";

console.log(arr1.toString()); // hasil: a,b,c,d,e,f,g

console.log(arr1.length); // hasil: 7

arr1[arr1.length]="h";

arr1[arr1.length]="i";

arr1[arr1.length]="j";

console.log(arr1.toString()); // hasil: a,b,c,d,e,f,g,h,i,j

console.log(arr1.length); // hasil: 10

</script>

OBJECT

Konsep object

Selain dapat membuat objek sendiri, JavaScript menyediakan banyak objek yang dapat digunakan. Pada dasarnya tedapat tiga macam objek :

Objek bawaan yaitu Objek yang tidak berhubungand dengan browser maupun halaman HTML.
Objek Browser yaitu Objek yang berhubungan dengan browser pengguna
Objek HTML yaitu Objek yang berhubungan dengan dokumen HTML yang dimuat di browser.

Untuk membuat objek, hal-hal yang harus diperhatikan adalah mendefinisikan fungsi yang akan menjadi metode bagi objek dan membuat konstruktor objek. Konstruktor adalah fungsi yang berisi definisi properti dan menghubungkan metode-metode objek dengan definisi fungsi.

Bentuk umum konstruktor adalah sebagai berikut :

Function namaObjek (arg1, ...., arg2) {

// properti objek

this.nama_properti = arg2;

//Metode Objek

this.namaMetode = namaFungsi;

}

Untuk membuat objek buatan, bentuk umumnya adalah :

namaVariabel=new konstruktorObjek(daftarParameter);

Latihan 1

<HTML>

<HEAD>

<TITLE>Membuat Objek</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">

function perolehWarna () {

return(this.warna);

}

function ubahWarna (warna) {

this.warna = warna;

}

function tampilkanInfoMobil() {

document.write("Tipe : " + this.tipe + "<BR>");

document.write("Merk : " + this.merk + "<BR>");

document.write("cc : " + this.cc + "<BR>");

document.write("Warna: " + this.warna + "<BR>");

}

function Mobil(tipe, merk, cc, warna) {

// Properti

this.tipe = tipe;

this.merk = merk;

this.cc = cc;

this.warna = warna;

// Metode

this.perolehWarna = perolehWarna;

this.ubahWarna = ubahWarna;

this.tampilkanInfoMobil = tampilkanInfoMobil;

}

// Membuat objek berdasarkan Mobil

var mobilku = new Mobil("Sidekick", "Suzuki", 1600, "Merah");

mobilku.tampilkanInfoMobil();

document.write("<HR>");

mobilku.ubahWarna("Merah Metalik");

mobilku.tampilkanInfoMobil();

</SCRIPT>

</BODY>

</HTML>

Simpan file diatas, kemudian jalankan pada web browser anda, maka hasilnya akan seperti

Latihan 2

<HTML>

<HEAD>

<TITLE>Menciptakan Objek dengan Notasi Literal</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">

// Membuat objek berdasarkan Buku

var bukuPascal = {judul: "Pemrograman Pascal",

pengarang: "Abdul Kadir"};

document.write(bukuPascal.judul + "<BR>");

document.write(bukuPascal.pengarang + "<BR>");

</SCRIPT>

</BODY>

</HTML>

Simpan file diatas, kemudian jalankan pada web browser anda, maka tampilannya akan seperti pada gambar dibawah ini :

Latihan 3

<HTML>

<HEAD>

<TITLE>Menampilkan Properti Objek</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">

function Mobil(tipe, merk, cc, warna) {

// Properti

this.tipe = tipe;

this.merk = merk;

this.cc = cc;

this.warna = warna;

}

// Membuat objek berdasarkan Mobil

var mobilku = new Mobil("Sidekick", "Suzuki", 1600, "Merah");

document.write(mobilku.tipe + "<BR>");

document.write(mobilku["tipe"] + "<BR>");

</SCRIPT>

</BODY>

</HTML>

Simpan file diatas, kemudian jalankan pada web browser anda, maka tampillannya akan seperti pada gambar dibawah ini :

OBJECT BAWAAN JAVASCRIPT

Object Document, Objek ini digunakan untuk mengakses informasi mengenai dokumen HTML, penampilan output, dan memanipulasinya. Seperti yang telah diuraikan sebelumnya bahwa Java Script berada dalam dokumen HTML dibungkus dalam tag <SCRIPT>, sehingga Java Script dapat secara langsung mengakses tag-tag HTML.

Property dari Objek Document

Berikut adalah property yang sering digunakan dalam Objek Document :

document.alinkColor=warna

memberikan warna activated link color

document.bgColor=warna

memberikan warna background

document.fgColor=warna

memberikan warna foreground atau warna huruf

document.linkColor=warna

memberikan warna link

document.vlinkColor=warna

memberikan warna visited link color

document.title=judul_window

memberikan judul/title window

document.image[]

mengakses objek image (dapat digunakan nama dari objek anchor/link)

document.forms[]

mengakses objek form (dapat digunakan nama dari objek form)

Method dari Objek Document

Method yang sering digunakan dalam Objek Document adalah sebagai berikut :

document.open()

menciptakan document HTML

document.close()

mengakhiri document HTML

document.write(output)

memberikan output ke browser

document.writeln(output)

memberikan output ke browser dengan menyertakan perpindahan baris

Khusus untuk output ke browser ada beberapa hal yang perlu diperhatikan, yaitu :

Anda dapat memberikan string diantara tanda ( dan ) pada objek write atau writeln.

Contoh : document.write(“Batman Jogja”);

Dalam objek write atau writeln, dapat juga digunakan untuk menampilkan isi variabel.

Contoh :

P = 5;

L = 10;

Luas = P*L;

document.write(Luas);

Terdapat karakter spesial yang dapat digunakan dalam objek write atau writeln, yaitu :

\b untuk backspace

\f untuk form feed

\n untuk baris baru

\r untuk carriage return

\t untuk tab

Object Window

Window merupakan objek tertinggi dalam objek JavaScript. Objek ini digunakan untuk memanipulasi tampilan kendela dari document HTML.

Property dari objek window

berikut adalah property yang sering digunakan dalam Objek Window :

window.length

mengetahui jumlah frame dalam window

window.location.href=alamat_url

mengakses objek location untuk melakukan redirect atau berpindah ke alamat tertentu

window.status=nilai_status

memberikan niai status window

Method dari Objek Window

method yang sering digunakan dalam Objek Window adalah sebagai berikut :

window.alert(pesan)

memunculkan messagw box atau sebuah pesan peringatan

window.confirm(pesan)

memunculkan sebuah pesan konfirmasi. Method ini memiliki dua nilai kembalian yaitu true untuk Ok dan False untuk Cancel

window.prompt(pesan,nilaidefault)

memunculkan sebuah pesan yang menantikan sebuah input

window.close()

menutup jendela aktif

window.open(url | file, windowname, windowfeatures)

membuka jendela baru dengan feature yang diberikan.

window.print()

membuka jendela dialog print

Object History

secara default akan menyimpan daftar-daftar URL yang pernah dikunjungi. Dalam javascript terdapat sebuah objek untuk mengakses daftar tersebut yaitu objek history.

Property dari objek history

Berikut adalah property yang sering digunakan dalam Objek History :

history.length

mengetahui banyaknya daftar URL yang pernah dikunjungi

Method dari Objek History

Berikut adalah method yang sering digunakan dalam objek History :

history.back()

menampilkan URL sebelum dari daftar

history.forward()

menampilkan URL sesudahnya dari daftar

history.go(n)

menampilkan history ke-n dari daftar