Algoritma, Struktur Data, dan Pemrograman: Bab 7. Pemrograman Internet

Sunday, December 25, 2016

Bab 7. Pemrograman Internet

JavaScript: Array

7.1 Pengantar

Array adalah sekelompok lokasi memori yang bertetangga yang memiliki nama sama dan tipe sama. Untuk merujuk ke lokasi tertentu dalam memori atau sebuah elemen di dalam suatu array, Anda perlu menspesifikasi nama array dan nomor posisi elemen yang ditunjuk. Nomor posisi adalah nilai yang mengindikasikan lokasi spesifik di dalam array.

7.2 Array

Gambar 7.1 menampilkan sebuah array integer bernama arrayAngka. Array ini memuat 12 elemen, yang semuanya dapat dirujuk dengan memberikan nama diikuti dengan nomor posisi elemen (diapit dalam kurung). Elemen pertama di dalam setiap array adalah elemen ke nol. Jadi, elemen pertama pada array arrayAngka dirujuk sebagai arrayAngka[0], elemen kedua sebagai arrayAngka[1], array ketujuh sebagai arrayAngka[6], dan seterusnya. Elemen ke-i arrayAngka dinyatakan sebagai arrayAngka[i-1].

Gambar 7.1 Sebuah array yang memuat 12 elemen

Nomor posisi di dalam kurung secara formal dinamakan dengan indeks (atau subskrip). Indeks adalah sebuah integer atau ekspresi integer. Perhatikan bahwa nama array bersubskrip merupakan ekspresi sisi-kiri, dimana ia dapat digunakan di sisi kiri dari sebuah penugasan untuk menempatkan suatu nilai baru ke dalam elemen array. Ia dapat pula digunakan di sisi kanan sebuah penugasan untuk menugaskan nilainya ke variabel lain.

Anda perlu mengamati array arrayAngka pada Gambar 7.1 secara lebih dekat. Nama array adalah arrayAngka. Panjang dari arrayAngka adalah 12 dan dapat dicari menggunakan ekspresi berikut:

arrayAngka.length

Setiap array di dalam JavaScript mengetahui panjangnya sendiri. Dua belas elemen array tersebut dirujuk sebagai arrayAngka[0] sampai arrayAngka[11]. Nilai dari arrayAngka[0] adalah -45, nilai dari arrayAngka[1] adalah 6, nilai dari arrayAngka[7] adalah 62, dan nilai dari ArrayAngka[11] adalah 78. Nilai-nilai yang disimpan di dalam array dapat digunakan dalam berbagai kalkulasi dan aplikasi.

Kurung siku yang mengapit subskrip array adalah sebuah operator JavaScript. Kurung siku memiliki derajat keutamaan yang sama dengan kurung biasa. Tabel pada Gambar 7.2 menunjukkan derajat keutamaan dan asosiatifitas operator-operator yang telah diintroduksi sejauh ini. Semuanya ditampilkan dari atas ke bawah dengan urutan keutamaan menurun.

Operator	Asosiatifitas	Tipe
() [] .	kiri ke kanan	tertinggi
++ -- !	kanan ke kiri	unary
* / %	kiri ke kanan	multiplikatif
+ -	kiri ke kanan	aditif
< <= > >=	kiri ke kanan	relasional
== !=	kiri ke kanan	ekualitas
&&	kiri ke kanan	AND logikal
\|\|	kiri ke kanan	OR logikal
?:	kanan ke kiri	kondisional
= += -= *= /= %=	kanan ke kiri	penugasan

Gambar 7.2 Derajat keutamaan dan asosiatifitas semua operator yang telah didiskusikan sejauh ini

7.3 Mendeklarasikan dan Mengalokasikan Array

Setiap array menempati ruang di dalam memori. Array dalam JavaScript adalah sebuah objek Array. Anda menggunakan operator new untuk mengalokasikan secara dinamis (meminta memori untuk) sejumlah elemen yang diperlukan tiap array. Operator new menciptakan sebuah objek ketika program dieksekusi dengan memperoleh memori yang cukup dalam menyimpan objek tersebut dengan tipe yang ditetapkan di sebelah kanan new. Proses penciptaan objek baru dikenal dengan penciptaan instans atau instansiasi objek, dan operator new dikenal sebagai operator alokasi memori dinamis. Array adalah objek yang harus diciptakan menggunakan new. Untuk mengalokasikan 12 elemen untuk array integer c, digunakan statemen

var c = new Array( 12 );

Statemen tersebut dapat pula dilakukan dengan dua langkah, sebagai berikut:

var c; // mendeklarasikan array

c = new Array( 12 ); // mengalokasikan array

Ketika array dialokasikan, bila setiap elemen tidak diinisialisasi, maka ia memiliki nilai undefined.

7.4 Contoh Penggunaan Array

Bagian ini akan menyajikan beberapa contoh penciptaan dan pemanipulasian array.

Menciptakan dan Menginisialisasi Array

Skrip pada Gambar 7.3 menggunakan operator new untuk mengalokasikan sebuah Array dengan lima elemen dan sebuah array kosong. Skrip mendemonstrasikan penginisialisasian sebuah Array dan juga menunjukkan bahwa sebuah Array dapat berkembang secara dinamis untuk mengakomodasi elemen-elemen baru. Nilai-nilai Array ditampilkan pada tabel XHTML.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Penginisialisasian sebuah Array</title>

<style type = "text/css">

table { width: 10em }

th { text-align: left }

</style>

<script type = "text/javascript">

<!--

// menciptakan(mendeklarasikan) dua array baru

var n1 = new Array( 5 ); // mengalokasikan Array lima-elemen Array

var n2 = new Array(); // mengalokasikan Array kosong

// menugaskan nilai-nilai pada tiap elemen dari Array n1

for ( var i = 0; i < n1.length; ++i )

n1[ i ] = i;

// menciptakan dan menginisialisasi lima elemen di dalam Array n2

for ( i = 0; i < 5; ++i )

n2[ i ] = i;

tampilArray( "Array n1:", n1 );

tampilArray( "Array n2:", n2 );

// menampilkan kepala tabel dua-kolom

// yang memuat subskrip dan elemen-elemen "sArray"

function tampilArray( kepala, sArray )

{

document.writeln( "<h2>" + kepala + "</h2>" );

document.writeln( "<table border = \"1\"" );

document.writeln( "<thead><th>Subskrip</th>" +

"<th>Nilai</th></thead><tbody>" );

// menampilkan subskrip dan nilai tiap elemen array

for ( var i = 0; i < sArray.length; i++ )

document.writeln( "<tr><td>" + i + "</td><td>" +

sArray[ i ] + "</td></tr>" );

document.writeln( "</tbody></table>" );

} // akhir fungsi tampilArray

// -->

</script>

</head><body></body>

</html>

Baris 17 menciptakan Array n1 sebagai sebuah array lima elemen. Baris 18 menciptakan Array n2 sebagai sebuah array kosong. Baris 21-22 menggunakan sebuah statemen for untuk menginisialisasi elemen-elemen dari n1 dengan nomor subskripnya (0 sampai 4). Perhatikan kegunaan ekspresi n1.length pada kondisi di dalam statemen for untuk menentukan panjang array. Pada contoh ini, panjang array adalah 5, jadi loop akan tetap dieksekusi sepanjang nilai dari variabel kendali kurang dari 5. Untuk sebuah array lima-elemen, nilai subskrip adalah 0 sampai 4, jadi penggunaan operator kurang dari, <, akan menjamin bahwa loop tidak mencoba mengakses sebuah elemen melebihi akhir array.

Gambar 7.3 Penginisialisasian elemen-elemen sebuah array

Baris 25-26 menggunakan sebuah statemen for untuk menambahkan lima elemen pada Array n2 dan menginisialisasi setiap elemen dengan nomor subskripnya (0 sampai 4). Perhatikan bahwa Array n2 dapat mengembang secara dinamis untuk mengakomodasi nilai-nilai yang ditugaskan pada tiap elemen array.

Baris 28-29 memanggil fungsi tampilArray (didefinisikan pada baris 33-46) untuk menampilkan isi tiap array pada tabel XHTML. Fungsi tampilArray menerima dua argumen, yaitu sebuah string untuk ditampilkan yang terletak sebelum tabel XHTML yang menampilkan isi array dan array yang akan ditampilkan. Baris 41-43 menggunakan sebuah statemen for untuk menampilkan teks XHTML yang mendefinisikan tiap baris dari tabel.

Jika nilai dari tiap elemen Array telah diketahui sebelumnya, elemen-elemen tersebut dapat dialokasikan dan diinisialisasi di dalam deklarasi array. Ada dua cara dalam menentapkan nilai awal. Statemen

var n = [ 10, 20, 30, 40, 50 ];

menggunakan sebuah daftar penginisialisasi dipisahkan-koma yang diapit di dalam sepasang kurung siku ([ dan ]) untuk menciptakan sebuah Array lima-elemen dengan subskrip 0, 1, 2, 3, dan 4. Ukuran array ditentukan oleh jumlah nilai di dalam daftar penginisialisasi. Perhatikan bahwa deklarasi tersebut tidak memerlukan operator new dalam menciptakan objek Array. Fungsionalitas ini disediakan oleh penerjemah JavaScript ketika ia menjumpai sebuah deklarasi array yang memuat suatu daftar penginisialisasi. Statemen

var n = new Array( 10, 20, 30, 40, 50 );

juga menciptakan sebuah array lima-elemen dengan subskrip 0, 1, 2, 3, dan 4. Pada kasus ini, nilai-nilai awal array ditetapkan sebagai argumen yang diapit sepasang kurung (terletak setelah new Array). Ukuran array ditentukan oleh jumlah nilai di dalam kurung. Adalah hal yang juga memungkinkan untuk mencadangkan ruang di dalam suatu Array untuk sebuah nilai yang akan ditetapkan belakangan menggunakan koma di dalam daftar penginisialiasi. Sebagai contoh, statemen

var n = [ 10, 20, , 40, 50 ];

menciptakan sebuah array lima-elemen, dimana elemen ketiga belum ditetapkan (n[2]).

Menginisialisasi Array dengan Daftar Penginisialisasi

Skrip pada Gambar 7.4 menciptakan tiga objek Array untuk mendemonstrasikan penginisialisasian array dengan daftar penginisialisasi (baris 18-20) dan menampilkan tiap array pada tabel XHTML menggunakan fungsi tampilArray yang sama dengan Gambar 7.3. Perhatikan bahwa ketika Array integer2 ditampilkan pada halaman web, elemen-elemen dengan subskrip 1 dan 2 (elemen kedua dan elemen ketiga dari array) muncul di halaman web sebagai undefined. Ada dua elemen yang nilainya tidak disediakan di dalam deklarasi pada baris 20.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Penginisialisasian Array dengan Deklarasi</title>

<style type = "text/css">

table { width: 15em }

th { text-align: left }

</style>

<script type = "text/javascript">

<!--

// Daftar penginisialisasi menentapkan jumlah elemen

// dan nilai untuk tiap elemen.

var warna = new Array( "cyan", "magenta","kuning", "hitam" );

var integer1 = [ 2, 4, 6, 8 ];

var integer2 = [ 2, , , 8 ];

tampilArray( "Array warna memuat", warna);

tampilArray( "Array integer1 memuat", integer1 );

tampilArray( "Array integer2 memuat", integer2 );

// menampilkan kepala tabel dua-kolom

// yang memuat subskrip dan elemen-elemen "sArray"

function tampilArray( kepala, sArray )

{

document.writeln( "<h2>" + kepala + "</h2>" );

document.writeln( "<table border = \"1\"" );

document.writeln( "<thead><th>Subskrip</th>" +

"<th>Nilai</th></thead><tbody>" );

// menampilkan subskrip dan nilai tiap elemen array

for ( var i = 0; i < sArray.length; i++ )

document.writeln( "<tr><td>" + i + "</td><td>" +

sArray[ i ] + "</td></tr>" );

document.writeln( "</tbody></table>" );

} // akhir fungsi tampilArray

// -->

</script>

</head><body></body>

</html>

Gambar 7.4 Pendeklarasian dan penginisialisasian array

Menjumlahkan Elemen-Elemen Array dengan for dan for...in

Skrip pada Gambar 7.5 menjumlahkan nilai-nilai yang dimuat di dalam sArray, sebuah array integer 10-elemen yang dideklarasikan, dialokasikan, dan diinisialisasi pada baris 13. Statemen pada baris 19 di dalam tubuh statemen for yang pertama melakukan penjumlahan. Perhatikan bahwa nilai-nilai yang disuplai oleh penginisialisasi untuk array sArray dapat dibaca ke dalam program menggunakan formulir XHTML.

Pada contoh ini, akan dikenalkan statemen for...in, yang memampukan sebuah skrip untuk melakukan sebuah tugas terhadap setiap elemen array. Baris 25-26 menunjukkan sintaks statemen for...in. Di dalam kurung, Anda mendeklarasikan variabel elemen yang digunakan untuk memilih setiap elemen di dalam objek di sebelah kanan katakunci in (sArray pada kasus ini). Ketika menggunakan for...in, JavaScript secara otomatis menentukan jumlah elemen array. Dengan beriterasinya penerjemah JavaScript menjelajahi elemen-elemen sArray, variabel elemen ditugasi sebuah nilai yang dapat dipakai sebagai subskrip untuk sArray. Pada kasus sebuah Array, nilai yang ditugaskan adalah subskrip dalam rentang 0 sampai sArray.length-1. Setiap nilai ditambahkan ke total2 untuk menghasilkan penjumlahan atas semua elemen array.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Penjumlahan Elemen-Elemen Array</title>

<script type = "text/javascript">

<!--

var sArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

var total1 = 0, total2 = 0;

// beriterasi melalui elemen-elemen array secara berurutan

// dan menambahkan nilai tiap elemen pada total1

for ( var i = 0; i < sArray.length; i++ )

total1 += sArray[ i ];

document.writeln( "Total menggunakan subskrip: " + total1 );

// beriterasi melalui elemen-elemen array menggunakan for... in

// untuk menambahkan nilai tiap elemen pada total2

for ( var elemen in sArray )

total2 += sArray[ elemen ];

document.writeln( "<br />Total menggunakan for...in: " + total2 );

// -->

</script>

</head><body></body>

</html>

Gambar 7.5 Penjumlahan elemen-elemen sebuah array

Menggunakan Elemen-Elemen Array sebagai Pencacah

Pada Bab 7, telah diberikan sebuah cara untuk mengimplementasikan program pelemparan-dadu pada Gambar 7.4. Program tersebut melemparkan sebuah dadu enam-sisi sebanyak 6000 kali dan menggunakan statemen switch untuk mencari total kemunculan tiap nilai yang dilempar. Versi array dari skrip tersebut ditunjukkan pada Gambar 7.6. Statemen switch pada Gambar 7.4 diganti dengan baris 24 pada program ini. Baris ini menggunakan nilai muka acak sebagai subskrip untuk array frekuensi dalam menentukan elemen mana yang akan diinkremen pada tiap iterasi loop. Karena perhitungan angka acak pada baris 23 menghasilkan angka-angka dari 1 sampai 6, array frekuensi harus cukup besar untuk memuat nilai skrip dari 1 sampai 6. Pada program ini, Anda mengabaikan elemen 0 dari array frekuensi dan hanya menggunakan elemen-elemen yang berkaitan dengan nilai-nilai sisi sebuah dadu. Selain itu, baris 32-34 pada program ini menggunakan sebuah loop untuk menghasilkan tabel yang ditulis satu baris per waktu pada Gambar 7.4.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Melempar sebuah Dadu Enam-Sisi 600 Kali</title>

<style type = "text/css">

table { width: 15em }

th { text-align: left }

</style>

<script type = "text/javascript">

<!--

var muka;

var frekuensi = [ , 0, 0, 0, 0, 0, 0 ]; // membiarkan frekuensi[0]

// tak-terinisialisasi

// menyimpulkan hasil

for ( var lempar = 1; lempar <= 6000; ++lempar )

{

muka = Math.floor( 1 + Math.random() * 6 );

++frekuensi[ muka ];

} // akhir for

document.writeln( "<table border = \"1\"><thead>" );

document.writeln( "<th>Muka</th>" +

"<th>Frekuensi</th></thead><tbody>" );

// menghasilkan tabel frekuensi tiap muka dadu

for ( muka = 1; muka < frekuensi.length; ++muka )

document.writeln( "<tr><td>" + muka + "</td><td>" +

frekuensi[ muka ] + "</td></tr>" );

document.writeln( "</tbody></table>" );

// -->

</script>

</head>

<body>

<p>Klik Refresh untuk menjalankan skrip ini kembali</p>

</body>

</html>

Gambar 7.6 Program pelemparan-dadu menggunakan array menggantikan switch

7.5 Pembangkit Citra Acak Menggunakan Array

Pada Bab 7, telah diciptakan sebuah pembangkit citra acak yang mengharuskan file-file citra dinamai dengan 1.gif, 2.gif, ..., 7.gif. Pada contoh ini (Gambar 7.7), Anda menciptakan pembangkit citra acak yang lebih elegan yang tidak mengharuskan nama-nama file berupa integer. Versi pembangkit citra acak ini menggunakan sebuah array gambar untuk menyimpan setiap nama file citra sebagai string. Skrip membangkitkan integer acak dan menggunakannya sebagai subskrip pada array gambar. Skrip menampilkan elemen img XHTML dengan atribut src yang memuat nama file citra.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Pembangkit Citra Acak</title>

table { width: 15em }

th { text-align: left }

</style>

<script type = "text/javascript">

<!--

var gambar =

[ "CPE", "EPT", "GPP", "GUI", "PERF", "PORT", "SEO" ];

// memilih sebuah citra acak dari array gambar dan menampilkan

// dengan menciptakan sebuah tag img dan menyambungkan atribut

// src dengan nama file

document.write ( "<img src = \"" +

gambar[ Math.floor( Math.random() * 7 ) ] + ".gif\" />" );

// -->

</script>

</head>

<body>

<p>Klik Refresh untuk menjalankan skrip ini kembali</p>

</body>

</html>

Gambar 7.7 Pembangkitan citra acak menggunakan array

Skrip mendeklarasikan array gambar pada baris 16-17 dan menginisialisasinya dengan nama-nama file citra. Baris 22-23 menciptakan tag img yang menampilkan citra acak pada halaman web. Baris 22 membuka tag img dan memulai atribut src. Baris 23 membangkitkan integer acak dari 0 sampai 6 sebagai indeks bagi array gambar. Ekspresi

gambar[ Math.floor( Math.random() * 7 ) ]

dievaluasi menjadi sebuah string dari array gambar, yang kemudian dituliskan ke dokumen (baris 23). Baris 23 menyempurnakan tag img dengan ekstensi file citra (.gif).

7.6 Referensi dan Parameter Referensi

Dua cara melewatkan argumen kepada fungsi (atau metode) dalam banyak bahasa pemrograman adalah pelewatan-dengan-nilai dan pelewatan-dengan-referensi. Ketika sebuah argumen dilewatkan kepada sebuah fungsi lewat nilai, salinan dari nilai argumen itu dibuat dan dilewatkan kepada fungsi yang dipanggil. Dalam JavaScript, angka, nilai boolean, dan string dilewatkan kepada fungsi lewat nilai.

Dengan pelewatan-dengan-referensi, pemanggil memberikan fungsi terpanggil akses langsung terhadap data pemanggil dan membolehkannya untuk memodifikasi data jika diperlukan. Prosedur ini dicapai melalui pelewatan kepada fungsi terpanggil alamat lokasi di dalam memori dimana data berada. Pelewatan-dengan-referensi dapat memperbaiki kinerja karena ia menghilangkan kebutuhan akan penyalinan data, terutama bila yang terlibat adalah data besar. Tetapi, hal ini juga dapat memperlemah keamanan karena fungsi terpanggil dapat mengakses data pemanggil. Dalam JavaScript, semua objek (jadi termasuk Array) dilewatkan kepada fungsi lewat referensi.

Untuk melewatkan sebuah referensi objek kepada sebuah fungsi, Anda hanya perlu menetapkan nama referensi pada pemanggilan fungsi. Biasanya, namareferensi merupakan pengenal yang digunakan program untuk memanipulasi objek. Pada bagian selanjutnya, akan didemonstrasikan pelewatan-dengan-nilai dan pelewatan-dengan-referensi menggunakan array.

7.7 Pelewatan Array kepada Fungsi

Untuk melewatkan sebuah argumen array kepada fungsi (Gambar 7.8), Anda perlu menetapkan nama array (sebuah referensi terhadap array) tanpa kurung siku. Sebagai contoh, jika array suhuPerJam dideklarasikan sebagai

var suhuPerJam = new Array( 24 );

maka pemanggilan fungsi

modifikasiArray( suhuPerJam );

akan melewatkan array suhuPerJam kepada fungsi modifikasiArray. Seperti disebutkan sebelumnya, setiap objek array dalam JavaScript mengetahui ukurannya sendiri (melalui atribut length). Jadi, ketika Anda melewatkan sebuah objek array kepada fungsi, Anda tidak perlu melewatkan ukuran array secara terpisah sebagai argumen. Gambar 7.3 mengilustrasikan konsep ini ketika Anda melewatkan Array n1 dan n2 kepada fungsi tampilArray untuk menampilkan isi tiap Array.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Pelewatan array dan elemen array individual

kepada fungsi</title>

<script type = "text/javascript">

<!--

var a = [ 1, 2, 3, 4, 5 ];

document.writeln( "<h2>Pengaruh pelewatan keseluruhan " +

"array lewat referensi</h2>" );

tampilArray( "Array asli: ", a );

modifikasiArray( a ); // array a dilewatkan dengan referensi

tampilArray( "Array termodifikasi: ", a );

document.writeln( "<h2>Pengaruh pelewatan elemen array " +

"dengan nilai</h2>" +

"a[3] sebelum modifikasiElemen: " + a[ 3 ] );

modifikasiElemen( a[ 3 ] ); // elemen array a[3] dilewatkan dengan nilai

document.writeln( "<br />a[3] setelah modifikasiElemen: " + a[ 3 ] );

// menampilkan judul diikuti dengan isi dari sArray

function tampilArray( kepala, sArray)

{

document.writeln(

kepala + sArray.join( " " ) + "<br />" );

} // akhir fungsi tampilArray

// fungsi yang memodifikasi elemen-elemen sebuah array

function modifikasiArray( sArray )

{

for ( var j in sArray )

sArray[ j ] *= 2;

} // akhir fungsi modifikasiArray

// fungsi yang memodifikasi nilai yang dilewatkan

function modifikasiElemen( e )

{

e *= 2; // menskalakan elemen e hanya selama di dalam

// fungsi

document.writeln( "<br />nilai di dalam modifikasiElemen: " + e );

} // akhir fungsi modifikasiElemen

// -->

</script>

</head><body></body>

</html>

Gambar 7.8 Pelewatan array dan elemen array individual kepada fungsi

Meskipun array secara menyeluruh dilewatkan melalui referensi, elemen array boolean dan numerik secara individual dilewatkan dengan nilai sama persis seperti variabel boolean dan numerik ketika dilewatkan kepada fungsi. Untuk melewatkan sebuah elemen array kepada fungsi, digunakan nama bersubskrip dari elemen sebagai argumen dalam pemanggilan fungsi.

Bagi sebuah fungsi agar dapat meneriman suatu Array melalui pemanggilan fungsi, daftar parameter fungsi harus menetapkan sebuah parameter yang akan merujuk ke Array dalam tubuh fungsi. Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki sintaks spesial untuk kepentingan ini. JavaScript hanya mensyaratkan bahwa pengenal untuk Array harus ditetapkan di dalam daftar parameter. Sebagai contoh, header fungsi untuk fungsi modifikasiArray yang ditulis sebagai

function modifikasiArray( b )

mengindikasikan bahwa modifikasiArray mengharap menerima sebuah parameter bernama b (argumen yang disuplai di dalam pemanggilan fungsi haruslah berupa sebuah Array). Array dilewatkan dengan referensi, dan oleh karena itu ketika fungsi terpanggil menggunakan nama array b, ia merujuk ke array aktual di dalam pemanggil. Skrip pada Gambar 7.8. mendemonstrasikan perbedaan antara pelewatan array secara menyeluruh dan pelewatan sebuah elemen array.

Statemen pada baris 17 memanggil fungsi tampilArray untuk menampilkan isi dari array a sebelum ia dimodifikasi. Fungsi tampilArray (didefinisikan pada baris 32-36) menerima sebuah string untuk ditampilkan dan array untuk ditampilkan. Statemen pada baris 34-35 menggunakan metode join untuk menciptakan sebuah string yang memuat semua elemen-elemen di dalam sArray. Metode join mengambil sebagai argumennya sebuah string yang memuat pemisah yang dipakai untuk memisahkan antar elemen array di dalam string yang dijadikan nilai balik. Jika argumen tersebut tidak ditetapkan, maka string kosong digunakan sebagai pemisah.

Baris 19 memanggil fungsi modifikasiArray (baris 39-43) dan melewatkan kepadanya array a. Fungsi modifikasiArray mengalikan setiap elemen dengan 2. Untuk mengilustrasikan bahwa elemen-elemen array a telah termodifikasi, statemen pada baris 21 memanggil fungsi tampilArray kembali untuk menampilkan isi array a setelah ia dimodifikasi. Seperti tertampil pada keluaran program, elemen-elemen dari array a justru dimodifikasi oleh modifikasiArray.

Untuk menunjukkan nilai dari a[3] sebelum pemanggilan terhadap modifikasiArray, baris 25 menampilkan nilai dari a[3]. Baris 27 memanggil modifikasiArray (baris 46-51) dan melewatkan a[3] sebagai argumen. Ingat bahwa a[3] sebenarnya merupakan satu nilai integer di dalam array a. Ingat pula bahwa nilai numerik dan nilai boolean selalu dilewatkan kepada fungsi melalui nilai. Oleh karena itu, salinan dari a[3] dilewatkan. Fungsi modifikasiElemen mengalikan argumennya dengan 2 dan menyimpan hasilnya di dalam parameter e. Parameter dari fungsi modifikasiElemen merupakan variabel lokal di dalam fungsi tersebut, jadi ketika fungsi berhenti, variabel lokal tidak lagi dapat diakses. Jadi, ketika kendali program kembali ke skrip utama, nilai tak-termodifikasi dari a[3] ditampilkan oleh statemen pada baris 29.

7.8 Pengurutan Array

Objek Array dalam JavaScript memiliki sebuah metode built-in, sort, untuk mengurutkan array. Gambar 7.9 mendemonstrasikan metode sort dari objek Array.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Pengurutan sebuah Array dengan Metode sort</title>

<script type = "text/javascript">

<!--

var a = [ 10, 1, 9, 2, 8, 3, 7, 4, 6, 5 ];

document.writeln( "<h1>Pengurutan sebuah Array</h1>" );

tampilArray( "Item-item data dengan urutan asli: ", a );

a.sort( bandingkanInteger ); // mengurutkan array

tampilArray( "Item-item data dengan urutan menaik: ", a );

// menampilkan judul diikuti dengan isi dari sArray

function tampilArray( kepala, sArray )

{

document.writeln( "<p>" + kepala +

sArray.join( " " ) + "</p>" );

} // akhir fungsi tampilArray

// fungsi untuk membandingkan

function bandingkanInteger( nilai1, nilai2 )

{

return parseInt( nilai1 ) - parseInt( nilai2 );

} // akhir fungsi bandingkanInteger

// -->

</script>

</head><body></body>

</html>

Gambar 7.9 Pengurutan sebuah array menggunakan metode sort dari objek Array

Secara default, metode sort (tanpa argumen) menggunakan perbandingan string untuk menentukan urutan pengurutan atas elemen-elemen Array. String dibandingkan menggunakan nilai-nilai ASCII dari karakter-karakternya. Pada contoh ini, akan diurutkan sebuah array yang memuat integer-integer.

Metode sort mengambil argumen opsionalnya berupa nama sebuah fungsi (dinamakan sebagai fungsi komparator) yang membandingkan kedua argumennya dan menghasilkan salah satu dari berikut:

· Sebuah nilai negatif jika argumen pertama kurang dari argumen kedua.

· Nol jika kedua argumen sama.

· Sebuah nilai positif jika argumen pertama lebih dari argumen kedua.

Contoh ini menggunakan fungsi bandingkanInteger (didefinisikan pada baris 27-30) sebagai fungsi komparator untuk metode sort. Fungsi itu menghitung perbedaan antara nilai integer dari dua argumennya (fungsi parseInt memastikan bahwa kedua argumen ditangani sebagai integer). Jika argumen pertama kurang dari argumen kedua, maka selisihnya akan berupa suatu nilai negatif. Jika kedua argumen sama, maka selisihnya akan nol. Jika argumen pertama lebih dari argumen kedua, maka selisihnya akan berupa suatu nilai positif.

Baris 16 memanggil metode sort dari objek Array dan melewatkan nama fungsi bandingkanInteger sebagai argumen. Metode sort menerima fungsi bandingkanInteger sebagai argumen, kemudian menggunakan fungsi itu untuk membandingkan elemen-elemen Array dalam mengurutkan array tersebut.

7.9 Array Multidimensi

Array multidimensi dengan dua subskrip seringkali dipakai untuk merepresentasikan tabel dengan nilai-nilai memuat informasi yang ditata dalam baris dan kolom. Untuk mengidentifikasi elemen tabel tertentu, Anda perlu menetapkan dua subskrip: subskrip pertama mengidentifikasi baris dan subskrip kedua mengidentifikasi kolom. Array yang memerlukan dua subskrip dalam mengidentifikasi elemen tertentu dinamakan dengan array dua-dimensi.

Array multidimensi dapat memiliki lebih dari dua dimensi. JavaScript tidak mendukung keberadaan array multidimensi secara langsung, tetapi membolehkan Anda untuk menetapkan array dengan elemen-elemen yang juga merupakan array. Ketika sebuah array memuat array-array satu-dimensi sebagai elemen-elemennya, Anda dapat membayangkan array-array satu-dimensi tersebut sebagai baris-baris sebuah tabel, dan posisi-posisinya sebagai kolom-kolom. Gambar 7.10 mengilustrasikan sebuah array dua-dimensi bernama a yang memuat tiga baris dan empat kolom (sebuah array tiga-kali-empat, atau tiga array satu-dimensi dengan 4 elemen). Secara umum, sebuah array dengan m baris dan n kolom disebut dengan sebuah array m-kali-n.

Setiap elemen di dalam array a diidentifikasi pada Gambar 7.10 menggunakan sebuah nama elemen dalam format a[i][j]; a adalah nama array, dan i dan j adalah subskrip yang secara unik mengidentifikasi baris dan kolom dari tiap elemen array. Perhatikan bahwa nama tiap elemen pada baris pertama memiliki subskrip pertama 0; nama tiap elemen pada kolom keempat memiliki subskrip kedua 3.

Gambar 7.10 Array dua-dimensi dengan tiga baris dan empat kolom

Array yang Memuat Array-Array Satu-Dimensi

Array b dengan dua baris dan dua kolom dapat dideklarasikan dan diinisialisasi dengan statemen

var b = [ [ 1, 2 ], [ 3, 4 ] ];

Nilai-nilai dikelompokkan secara baris dalam kurung-kurung siku. Array [1, 2] menginisialisasi elemen b[0], dan array [3, 4] menginisialisasi elemen b[1]. Jadi, 1 dan 2 menginisialisasi b[0][0] dan b[1][1]. Penerjemah menentukan jumlah baris dengan menghitung jumlah daftar sub-penginisialisasi, yaitu array-array bersarang di dalam array sebelah luar. Penerjeman menentukan jumlah kolom pada tiap baris dengan menentukan jumlah nilai di dalam sub-array yang menginisialisasi baris.

Array Dua-Dimensi dengan Baris-Baris Berbeda Panjang

Baris-baris sebuah array dua-dimensi dapat memiliki panjang yang bervariasi. Deklarasi

var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];

menciptakan array b dengan baris 0 memuat dua elemen (1 dan 2) dan baris 1 memuat tiga elemen (3, 4, dan 5).

Menciptakan Array Dua-Dimensi dengan new

Sebuah array multidimensi dengan tiap baris memiliki jumlah kolom yang berbeda dapat dialokasikan secara dinamis, sebagai berikut:

var b;

b = new Array( 2 ); // mengalokasikan baris-baris

b[ 0 ] = new Array( 5 ); // mengalokasikan kolom-kolom untuk baris 0

b[ 1 ] = new Array( 3 ); // mengalokasikan kolom-kolom untuk baris 1

Kode tersebut menciptakan sebuah array dua-dimensi dengan dua baris. Baris 0 memiliki lima kolom, dan baris 1 memiliki tiga kolom.

Contoh Array Dua-Dimensi: Menampilkan Nilai Elemen

Gambar 7.11 menginisialisasi array dua-dimensi dalam deklarasi dan menggunakan loop for...in bersarang untuk menjelajah array (memanipulasi setiap elemen array).

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Menginisialisasi array multidimensi</title>

<script type = "text/javascript">

<!--

var array1 = [ [ 1, 2, 3 ], // baris pertama

[ 4, 5, 6 ] ]; // baris kedua

var array2 = [ [ 1, 2 ], // baris pertama

[ 3 ], // baris kedua

[ 4, 5, 6 ] ]; // baris ketiga

tampilArray( "Nilai-nilai di dalam array1 secara baris", array1 );

tampilArray( "Nilai-nilai di dalam array2 secara baris", array2 );

function tampilArray( kepala, sArray )

{

document.writeln( "<h2>" + kepala + "</h2><pre>" );

// beriterasi melalui array-array satu-dimensi

for ( var i in sArray )

{

// beriterasi melalui elemen-elemen tiap

// array satu-dimensi

for ( var j in sArray[ i ] )

document.write( sArray[ i ][ j ] + " " );

document.writeln( "<br />" );

} // akhir for

document.writeln( "</pre>" );

} // akhir fungsi tampilArray

// -->

</script>

</head><body></body>

</html>

Gambar 7.11 Menginisialisasi array multidimensi. Array

Program mendeklarasikan dua array di dalam skrip utama (pada elemen head XHTML). Deklarasi array1 (baris 12-13 menyediakan enam penginisialisasi pada dua subdaftar. Subdaftar pertama menginisialisasi baris pertama dari array dengan nilai 1, 2, dan 3; subdaftar kedua menginisialisasi baris kedua dari array dengan nilai 4, 5, dan 6. Deklarasi array2 (baris 14-16) menyediakan enam penginisialisasi di dalam tiga subdaftar. Subdaftar untuk baris pertama secara eksplisit menginisialisasi baris pertama agar memiliki dua elemen dengan nilai 1 dan 2. Subdaftar untuk baris kedua menginisialisasi baris kedua agar memiliki satu elemen dengan nilai 3. Subdaftar untuk baris ketiga menginisialisasi baris ketiga dengan nilai 4, 5, dan 6.

Skrip memanggil fungsi tampilArray dari baris 18-19 untuk menampilkan tiap elemen array pada halaman web. Fungsi tampilArray (baris 21-37) menerima dua argumen, yaitu sebuah string kepala untuk ditampilkan yang terletak sebelum array dan array yang akan ditampilkan (sArray). Perhatikan kegunaan dari sebuah statemen for...in bersarang untuk menambilkan baris-baris dari tiap array dua-dimensi. Statemen for...in sebelah luar beriterasi menjelajahi baris-baris dari array. Statemen for...in sebelah dalam beriterasi menjelajahi kolom-kolom dari baris yang sedang diproses. Statemen for...in bersarang pada contoh ini dapat dituliskan dengan statemen for, sebagai berikut:

for ( var i = 0; i < sArray.length; ++i )

{

for ( var j = 0; j < sArray[ i ].length; ++j )

document.write( sArray[ i ][ j ] + " " );

document.writeln( "<br />" );

}

Pada statemen for sebelah luar, ekspresi sArray.length menentukan jumlah baris di dalam array. Pada statemen for sebelah dalam, ekspresi sArray[i].length menentukan jumlah kolom pada tiap baris array. Kondisi ini memampukan loop dalam menentukan, untuk tiap baris, jumlah kolom.

Manipulasi Array Multidimensi dengan Statemen for dan for...in

Banyak manipulasi array yang umum dijumpai menggunakan statemen for atau for...in. Sebagai contoh, statemen for berikut menetapkan semua elemen pada baris ketiga dari array a pada Gambar 7.10 menjadi nol:

for ( var kol = 0; kol < a[ 2 ].length; ++kol )

a[ 2 ][ kol ] = 0;

Anda menetapkan baris ketiga; oleh karena itu, Anda mengetahui bahwa subskrip pertama selalu 2 (0 adalah baris pertama dan 1 adalah baris kedua). Loop for hanya memodifikasi subskrip kedua (subskrip kolom). Statemen for tersebut ekivalen dengan:

a[ 2 ][ 0 ] = 0;

a[ 2 ][ 1 ] = 0;

a[ 2 ][ 2 ] = 0;

a[ 2 ][ 3 ] = 0;

Statemen for...in ini juga ekivalen dengan statemen for tersebut:

for ( var kol in a[ 2 ] )

a[ 2 ][ kol ] = 0;

Statemen for bersarang berikut menentukan total dari semua elemen pada array a:

var total = 0;

for ( var baris = 0; baris < a.length; ++baris )

for ( var kol = 0; kol < a[ baris ].length; ++kol )

total += a[ baris ][ kol ];

Statemen for mencari total dari semua elemen array, satu baris per waktu. Statemen for sebelah luar dimulai dengan menentapkan subskrip baris menjadi 0, sehingga elemen-elemen dari baris pertama ditotal menggunakan statemen for sebelah dalam. Statemen for sebelah luar kemudian menginkremen baris menjadi 1, sehingga elemen-elemen dari baris kedua dapat ditotal. Kemudian statemen for sebelah luar menginkremen baris menjadi 2, sehingga elemen-elemen dari baris ketiga ditotal. Hasilnya dapat ditampilkan ketika statemen for bersarang berhenti. Statemen for sebelumnya ekivalen dengan statemen for...in berikut:

var total = 0;

for ( var baris in a )

for ( var kol in a[ baris ] )

total += a[ baris ][ kol ];

7.10 Kuis Online

Kuis online merupakan salah satu aplikasi web populer yang sering digunakan untuk kepentingan edukasional. Para pengembang web secara umum membangun kuis menggunakan formulir XHTML sederhana dan memproses hasilnya menggunakan JavaScript. Array memampukan seorang programer untuk merepresentasikan beberapa pilihan jawaban (yang mungkin) pada sebuah struktur data tunggal. Gambar 7.12 memuat sebuah kuis online yang terdiri-dari satu pertanyaan. Halaman kuis memuat salah satu ikon dan sebuah formulir XHTML dimana pengguna mengidentifikasi informasi yang disajikan citra dengan menyeleksi salah satu dari empat tombol radio yang disediakan. Seteleh pengguna menyeleksi salah satu pilihan tombol radio yang disediakan dan menyerahkan formulir, skrip menentukan apakah pengguna menyeleksi jawaban yang benar atau tidak.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Kuis Online</title>

<script type = "text/JavaScript">

<!--

function periksaJawaban()

{

var kuisKu = document.getElementById( "kuisKu" );

// menentukan apakah jawaban benar

if ( kuisKu.elements[ 1 ].checked )

alert( "Selamat, jawaban Anda benar" );

else // jika jawaban salah

alert( "Jawaban Anda salah. Silahkan coba lagi" );

} // akhir fungsi periksaJawaban

-->

</script>

</head>

<body>

<form id = "kuisKu" onsubmit = "periksaJawaban()" action = "">

<p>Pilihan nama dari ikon dari gambar

yang ditampilkan berikut:<br />

<br />

<input type = "radio" name = "radiobutton" value = "1" />

<label>Rumah Adat Padang</label>

<input type = "radio" name = "radiobutton" value = "2" />

<label>Rumah Adat Batak</label>

<input type = "radio" name = "radiobutton" value = "3" />

<label>Rumah Adat Jawa</label>

<input type = "radio" name = "radiobutton" value = "4" />

<label>Rumah Adat Papua</label><br />

<input type = "submit" name = "submit" value = "Submit" />

<input type = "reset" name = "reset" value = "Reset" />

</p>

</form>

</body>

</html>

Gambar 7.12 Kuis online dengan JavaScript

Pertama-tama akan didiskusikan elemen body (baris 25-48) dari dokumen XHTML. Komponen-komponen GUI dari body berperan penting pada skrip.

Baris 26-47 mendefinisikan form yang menyajikan kuis kepada pengguna. Baris 26 memulai elemen form dan menetapkan atribut onsubmit menjadi “periksaJawaban()”, mengindikasikan bahwa penerjemah harus mengeksekusi fungsi JavaScript periksaJawaban (baris 12-21) ketika pengguna menyerahkan formulir (yaitu, mengklik tombol Submit atau menekan Enter).

Baris 29 menambahkan citra pada halaman web. Baris 32-42 menampilkan beberapa tombol radio dan beberapa label terkait yang menampilkan pilihan-pilihan jawaban yang mungkin. Baris 44-45 menambahkan tombol submit dan tombol reset pada halaman.

Algoritma, Struktur Data, dan Pemrograman

Menu

Sunday, December 25, 2016

Bab 7. Pemrograman Internet

No comments:

Post a Comment