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

Sunday, December 25, 2016

Bab 8. Pemrograman Internet

JavaScript: Objek

8.1 Pengantar

Bab ini akan menyajikan pemahaman yang lebih formal tentang objek. Akan dimulai dari pengenalan konsep orientasi objek. Bab ini juga akan membahas beberapa objek built-in JavaScript dan mendemonstrasikan kapabilitasnya.

8.2 Pengenalan Teknologi Objek

Bagian ini akan memberikan pengenalan umum tentang orientasi objek. Terminologi di sini akan mendukung beberapa bab ke depan. Di sini, Anda akan belajar bahwa objek merupakan cara berpikir alamiah tentang dunia dan tentang skrip yang memanipulasi dokumen XHTML. Pada Bab 4-8, Anda telah menggunakan dua objek JavaScript built-in, yaitu objek Math dan Array. Anda juga telah mengetahui dua objek yang disediakan oleh penjelajah web, document dan window, untuk melakukan pekerjaan skrip. JavaScript menggunakan objek untuk melakukan banyak pekerjaan dan oleh karena itu ia dinamakan dengan bahasa pemrograman berbasis objek. Tujuannya di sini adalah membantu Anda untuk mengembangkan cara berpikir berorientasi-objek. Teknologi seperti CSS, JavaScript, Ajax memiliki konsep-konsep yang dikenalkan pada bagian ini.

Konsep Teknologi-Objek

Akan dikenalkan teknologi objek dengan beberapa peristilahan kunci. Di manapun Anda melihat di sekeliling Anda, Anda melihat objek---manusia, binatang, tanaman, mobil, pesawat terbang, bangunan, komputer, dan lainnya. Manusia berpikir dalam satuan objek. Telepon, rumah, kompor, dan tempat tidur merupakan beberapa objek yang sering ada di sekeliling Anda.

Objek kadangkala dibagi ke dalam dua kategori: hidup dan mati. Objek hidup adalah objek bergerak dan melakukan pekerjaan. Objek mati tidak bergerak. Kedua jenis objek tersebut memiliki kesamaan. Semuanya memiliki atribut (seperti, ukuran, bentuk, warna, dan berat), dan semuanya memiliki watak (misalnya, bola memantul, mengembang, menyusut; bayi menangis, tidur, merangkak, berjalan, dan mengedip; mobil melaju, berbelok, dan memutar; handuk menyerap air). Anda akan belajar jenis-jenis atribut dan watak yang dimiliki oleh objek-objek perangkat-lunak.

Manusia belajar tentang objek dengan mempelajari atributnya dan mengamati wataknya. Pelbagai objek memiliki atribut yang sama dan menunjukkan watak yang sama pula. Perbandingan dapat dilakukan, misalnya, antara bayi dan orang dewasa, dan antara manusia dan monyet.

Desain Berorientasi-Objek (OOD, Object-Oriented Design) memodelkan perangkat-lunak dengan cara yang sama ketika manusia menjelaskan objek di dunia nyata. Desain ini memanfaatkan relasi kelas, dimana objek-objek dari kelas tertentu memiliki karakteristik yang sama. Misalnya, mobil dan truk memiliki karakteristik yang sama. OOD juga memiliki relasi pewarisan, dimana objek dari kelas baru diderivasi dengan mengabsorbsi karakteristik dari kelas yang sudah ada dan menambahkan karakteristik uniknya sendiri.

Perancangan berorientasi-objek memberikan cara yang alamiah dan intuitif dalam memandang proses perancangan perangkat-lunak, misalnya pemodelan objek berdasarkan atribut, watak, dan inter-relasi yang mengadopsi cara manusia memandang objek dunia nyata. OOD juga memodelkan komunikasi antar objek. Sama seperti manusia mengirimkan pesan satu sama lain, objek juga berkomunikasi melalui pesan. Sebuah objek akun bank dapat menerima pesan untuk mengurangi saldonya sejumlah besaran tertentu karena konsumen telah menarik sejumlah uang dari akun bank tersebut.

OOD mengenkapsulasi (membungkus) atribut dan operasi (watak) ke dalam objek. Hal ini berarti bahwa atribut dan operasi sebuah objek diikat atau dibungkus menjadi satu kesatuan. Objek juga dapat melakukan penyembunyian informasi. Hal ini berarti bahwa objek dapat mengetahui berkomunikasi satu sama lain melalui antarmuka, tetapi kedua objek tersebut tidak mengetahui bagaimana tiap objek itu diimplementasikan. Detil implementasi tersembunyi di dalam objek itu sendiri. Anda dapat menyetir mobil secara efektif, misalnya, tanpa perlu mengetahui detil bagaimana mesin, transmisi, dan rem bekerja secara internal. Sepanjang Anda menggunakan pedal gas, pedal rem, dan stir, Anda dapat mengendarai mobil secara efektif. Penyembunyian informasi merupakan hal yang krusial dalam rekayasa perangkat-lunak.

Sama seperti para perancang mobil, perancang penjelajah web juga memiliki himpunan objek terdefinisi yang mengenkapsulasi elemen-elemen dokumen XHTML dan yang memberitahu programer JavaScript tentang atribut dan watak tiap objek sehingga program JavaScript dapat berinteraksi dengan elemen-elemen tersebut. Anda akan melihat bahwa objek document memuat atribut dan watak yang menyediakan akses terhadap setiap elemen pada sebuah dokumen XHTML. Sama halnya, JavaScript menyediakan objek-objek yang mengenkapsulasi pelbagai kapabilitas di dalam sebuah skrip. Misalnya, objek Array JavaScript menyediakan beberapa atribut dan watak yang memampukan sebuah skrip untuk memanipulasi suatu koleksi data. Properti length (atribut) dari objek Array memuat jumlah elemen di dalam Array. Metode sort (watak) dari objek Array mengurutkan elemen-elemen Array.

Beberapa bahasa pemrograman, seperti Java, Visual Basic, C#, dan C++, merupakan bahasa pemrograman berorientasi-objek (OOP, object-oriented programming). Bahasa pemrograman semacam itu memampukan programer komputer untuk mengimplementasikan perancangan berorientasi-objek. Bahasa seperti C, di sisi lain, adalah bahasa pemrograman prosedural yang cenderung berorientasi aksi. Dalam bahasa prosedural, unit pemrograman adalah fungsi. Dalam bahasa berorientasi-objek, unit pemrograman adalah kelas. Objek diinstansiasi (diciptakan) dari kelas. Kelas memuat fungsi yang mengimplementasikan operasi dan data yang memuat atribut.

Programer prosedural berkonsentrasi pada fungsi. Programer mengelompokkan aksi-aksi (untuk melakukan pelbagai pekerjaan) ke dalam fungsi, dan mengelompokkan fungsi-fungsi untuk membentuk program. Data merupakan entitas penting dalam pemrograman prosedural.

Kelas, Properti, dan Metode

Programer berorientasi-objek berkonsentrasi pada penciptaan tipe terdefinisi-pengguna sendiri yang dinamakan dengan kelas. Setiap kelas memuat data, himpunan fungsi yang memanipulasi data, dan menyediakan layanan kepada klien (yaitu, kelas atau fungsi lain yang menggunakan kelas tersebut). Komponen data sebuah kelas disebut dengan properti. Sebagai contoh, sebuah kelas akun bank mencakup nomor akun dan saldo. Komponen fungsi sebuah kelas dinamakan dengan metode. Sebagai contoh, sebuah akun bank memuat metode-metode yang melakukan penyimpanan (menambah saldo), melakukan penarikan (mengurangi saldo), dan yang memperoleh jumlah saldo sekarang. Anda menggunakan tipe built-in (dan tipe terdefinisi-pengguna lain) sebagai blok pembangun untuk membangun tipe terdefinisi-pengguna yang baru.

Kelas merupakan “rencana” dalam membangun objek dari kelas itu. Sama seperti Anda dapat membangun banyak rumah dari satu rancangan, Anda dapat menginstansiasi (menciptakan) banyak objek dari satu kelas.

Kelas dapat memiliki relasi dengan kelas lain. Sebagai contoh, pada sebuah perancangan berorientasi-objek dari sebuah bank, kelas pelayan bank perlu berelasi dengan kelas lain, seperti kelas konsumen, kelas akun, dan lainnya. Relasi ini disebut dengan asosiasi. Pemaketan perangkat-lunak sebagai kelas dimaksudkan agar dapat dilakukan pendaur-ulangan kelas tersebut untuk kepentingan lain dan kepentingan di masa mendatang.

8.3 Objek Math

Metode –metode dari objek Math memampukan Anda untuk melakukan banyak perhitungan matematik yang umum dijumpai. Metode sebuah objek dipanggil dengan menuliskan nama objek yang diikuti dengan sebuah dot (.) dan nama metode. Yang diapit sepasang kurung (terletak setelah nama metode) adalah argumen (daftar argumen) metode. Sebagai contoh, untuk menghitung dan menampilkan akar kuadrat dari 900.0, Anda menuliskan

document.writeln( Math.sqrt( 900.0 ) );

yang memanggil metode Math.sqrt untuk menghitung akar kuadrat dari angka yang diapit oleh sepasang kurung (900.0), kemudian menampilkan hasilnya. Angka 900.0 merupakan argumen dari metode Math.sqrt. Statemen tersebut akan menampilkan 30.0. Beberapa metode dari objek Math ditampilkan pada Gambar 8.1.

Metode	Penjelasan	Contoh
abs( x )	Nilai absolut dari x.	abs( 7.2 ) adalah 7.2 abs( 0.0 ) adalah 0.0 abs( -5.6 ) adalah 5.6
ceil( x )	Membulatkan x ke integer terkecil yang tidak kurang dari x.	ceil( 9.2 ) adalah 10.0 ceil( -9.8 ) adalah -9.0
cos( x )	Kosinus trigonometrik dari x (x dalam radian).	cos( 0.0 ) adalah 1.0
exp( x )	Metode eksponensial .	exp( 1.0 ) adalah 2.71828 exp( 2.0 ) adalah 7.38906
floor( x )	Membulatkan x ke integer terbesar yang tidak lebih dari x.	floor( 9.2 ) adalah 9.0 floor( -9.8 ) adalah -10.0
log( x )	Logaritma natural dari x (basis e).	log( 2.718282 ) adalah 1.0 log( 7.389056 ) adalah 2.0
max( x, y )	Nilai terbesar dari x dan y.	max( 2.3, 12.7 ) adalah 12.7 max( -2.3, -12.7 ) adalah -2.3
min( x, y )	Nilai terkecil dari x dan y.	min( 2.3, 12.7 ) adalah 2.3 min( -2.3, -12.7 ) adalah -12.7
pow( x, y )	Nilai dari x yang dipangkatkan dengan y .	pow( 2.0, 7.0 ) adalah 128.0 pow( 9.0, .5 ) adalah 3.0
round( x )	Membulatkan x ke integer terdekat.	round( 9.75 ) adalah 10 round( 9.25 ) adalah 9
sin( x )	Sinus trigonometrik dari x (x dalam radian).	sin( 0.0 ) adalah 0.0
sqrt( x )	Akar kuadrat dari x.	sqrt( 900.0 ) adalah 30.0 sqrt( 9.0 ) adalah 3.0
tan( x )	Tangent trigonometrik dari x (x dalam radian).	tan( 0.0 ) adalah 0.0

Gambar 8.1 Metode-metode dari objek Math

Objek Math mendefinisikan beberapa konstanta matematik yang umum dipakai, yang dicantumkan pada Gambar 8.2. Perhatikan bahwa nama konstanta ditulis dengan huruf besar.

Konstanta	Penjelasan	Nilai
Math.E	Basis dari logaritma natural (e).	Berkisar 2.718.
Math.LN2	Logaritma natural dari 2.	Berkisar 0.693
Math.LN10	Logaritma natural dari 10.	Berkisar 2.302
Math.LOG2E	Logaritma basis 2 dari e.	Berkisar 1.442
Math.LOG10E	Logaritma basis 10 dari e.	Berkisar 0.434
Math.PI	. Perbandingan antara keliling lingkaran dengan diameternya.	Berkisar 3.141592653589793
Math.SQRT1_2	Akar kuadrat dari 0.5.	Berkisar 0.707
Math.SQRT2	Akar kuadrat dari 2.0.	Berkisar 1.414

Gambar 8.2 Konstanta-konstanta dari objek Math

8.4 Objek String

Pada bagian ini, akan dikenalkan kapabilitas pemrosesan karakter dan pemrosesan string pada JavaScript. Teknik-teknik yang digunakan di sini cocok untuk pemrosesan nama, alamat, nomor telepon, dan lainnya.

8.4.1 Hal Fundamental tentang Karakter dan String

Karakter merupakan blok pembangun yang fundamental pada program JavaScript. Setiap program terdiri-dari runtun karakter yang dikelompokkan bersama sehingga dapat diterjemahkan oleh komputer sebagai sederet instruksi untuk melakukan pekerjaan tertentu.

String merupakan sederet karakter yang diperlakukan sebagai unit tunggal. String memuat huruf, dijit, dan pelbagai karakter spesial, seperti +, -, *, /, dan $. JavaScript mendukung himpunan karakter Unicode, yang merepresentasikan sebagian besar bahasa-bahasa dunia. String merupakan objek bertipe String. Literal string atau konstanta string (sering kali disebut dengan objek String anonim) ditulis sebagai runtun karakter yang diapit oleh dua tanda kutip ganda atau oleh dua tanda kutip tunggal, sebagai berikut:

"Siti Mutmainah" (nama)

'Jl. Medan No. 27' (nama jalan)

"Pematang Siantar, SUMUT" (nama kota dan propinsi)

'(061) 555-1212' (nomor telepon)

String dapat ditugaskan kepada sebuah variabel di dalam deklarasi. Deklarasi

var warna = "biru”;

menginisialisasi variabel warna dengan objek String yang memuat string “biru”. String dapat dibandingkan menggunakan operator relasional (<, <=, >, dan >=) dan operator ekualitas (== dan !=). String dibandingkan menggunakan nilai Unicode dari karakter terkait. Sebagai contoh, ekspresi “hallo” < “Hallo” dievaluasi menjadi false karena huruf kecil memiliki nilai Unicode yang lebih tinggi.

8.4.2 Metode-Metode dari Objek String

Objek String mengenkapsulasi atribut dan watak dari sebuah string. Ia menyediakan banyak metode (watak) untuk melakukan pekerjaan-pekerjaan seperti memilih karakter-karakter dari sebuah string, menggabungkan string (disebut dengan penyambungan), mendapatkan substring dari sebuah string, melakukan pencarian substring di dalam sebuah string, mentokenkan string (memecah string menjadi kata-kata), dan mengkonversi string menjadi huruf besar atau huruf kecil. Objek String juga menyediakan beberapa metode yang menghasilkan tag XHTML. Gambar 8.3 mencantumkan banyak metode String. Gambar 8.4 – Gambar 8.7 mendemonstrasikan sebagian dari metode-metode tersebut.

Metode	Penjelasan
charAt( indeks )	Menghasilkan sebuah string yang memuat karakter pada indeks yang ditentukan. Jika tidak ada karakter pada indeks tersebut, charAt akan menghasilkan string kosong. Karakter pertama berlokasi pada indeks 0.
charCodeAt( indeks )	Menghasilkan nilai Unicode dari karakter yang berada pada indeks tertentu, atau menghasilkan Nan (not an number) jika tidak ada karakter pada indeks tersebut.
concat( string )	Menggabungkan argumennya ke akhir string yang memanggil metode tersebut. String pemanggil metode ini tidak dimodifikasi; sebuah String baru dihasilkan (dijadikan nilai balik). Metode ini sama dengan menjumlahlahkan dua string menggunakan operator penyambungan-string + (yaitu, s1.concat(s2) sama dengan s1 + s2).
fromCharCode( nilai1, nilai2, …)	Mengkonversi himpunan nilai-nilai Unicode menjadi sebuah string yang memuat karakter-karakter terkait.
indexOf( substring, indeks )	Mencari kemunculan pertama dari substring dimulai dari posisi indeks di dalam string yang memanggil metode ini. Metode ini menghasilkan indeks awal dari substring di dalam string sumber atau -1 jika substring tidak ditemukan. Jika argumen indeks tidak diberikan, maka metode memulai pencarian dari indeks 0 di dalam string sumber.
lastIndexOf( substring, indeks )	Searches for the last occurrence of substring starting from position index and searching toward the beginning of the string that invokes the method. The method returns the starting index of substring in the source string or –1 if substring is not found. If the index argument is not provided, the method begins searching from the end of the source string.
replace( stringCari, stringGanti )	Melakukan pencarian terhadap substring stringCari, dan mengganti kemunculan pertama dari substring tersebut dengan stringGanti dan menghasilkan string termodifikasi, atau string asli jika penggantian tidak dilakukan.
slice( awal, akhir )	Menghasilkan sebuah string yang memuat potongan dari string dimulai dari indeks awal sampai indeks akhir. Jika indeks awal tidak ditetapkan, maka metode ini menghasilkan sebuah string dari indeks awal ke akhir string sumber.
split( string )	Memecah string sumber ke dalam sebuah array yang memuat string-string (token-token), dimana argumen stringnya menetapkan pembatas (karakter yang mengindikasikan akhir dari tiap token di dalam string sumber).
substr( awal, panjang )	Menghasilkan sebuah string yang memuat sebanyak panjang karakter yang dimulai dari indeks awal di dalam string sumber. Jika panjang tidak ditetapkan, maka sebuah string yang memuat karakter-karakter dari awal sampai akhir dari string sumber dijadikan nilai balik.
substring( awal, akhir )	Menghasilkan sebuah string yang memuat karakter-karakter dari indeks awal sampai indeks akhir (tidak termasuk indeks akhir) di dalam string sumber.
toLowerCase()	Menghasilkan sebuah string dimana semua huruf besar akan dikonversi menjadi huruf kecil. Karakter yang bukan huruf tidak akan berubah.
toUpperCase()	Menghasilkan sebuah string dimana semua huruf kecil akan dikonversi menjadi huruf besar. Karakter yang bukan huruf tidak akan berubah.
Method-Metode yang menghasilkan tag XHTML
anchor( nama )	Membungkus atau menyatukan string sumber di dalam sebuah elemen achor (<a></a>) dengan nama sebagai nama anchor.
fixed()	Membungkus atau menyatukan string sumber di dalam sebuah elemen <tt></tt>.
link( url )	Membungkus atau menyatukan string sumber di dalam sebuah elemen achor (<a></a>) dengan url sebagai lokasi hyperlink.
strike()	Membungkus atau menyatukan string sumber di dalam sebuah elemen <strike></strike>.
sub()	Membungkus atau menyatukan string sumber di dalam sebuah elemen <sub></sub>.
sup()	Membungkus atau menyatukan string sumber di dalam sebuah elemen <sup></sup>.

Gambar 8.3 Beberapa metode dari objek String

8.4.3 Metode Pemroses-Karakter

Skrip pada Gambar 8.4 mendemonstrasikan beberapa metode pemrosesan-karater dari objek String, termasuk charAt (menghasilkan karakter pada posisi tertentu), charCodeAt (menghasilkan nilai Unicode dari karakter pada posisi tertentu), fromCharCode (menghasilkan sebuah string yang diciptakan dari sederet nilai Unicode), toLowerCase (menghasilkan versi huruf-kecil dari sebuah string), dan toUpperCase (menghasilkan versi huruf-besar dari sebuah string).

Baris 17-18 menampilkan karakter pertama di dalam String s (“ZEBRA”) menggunakan metode charAt. Metode charAt menghasilkan sebuah string yang memuat karakter pada indeks tertentu (0 pada contoh ini). Indeks untuk karakter pada sebuah string dimulai dari 0 (karakter pertama) sampai indeks length – 1. Jika indeks berada di luar batas string, maka metode ini menghasilkan sebuah string kosong.

Baris 18-19 menampilkan kode karakter untuk karakter pertama di dalam String s (“ZEBRA”) dengan memanggil metode charCodeAt. Metode charCodeAt menghasilkan nilai Unicode dari karakter pada indeks tertentu (0 pada kasus ini). Jika indeks berada di luar batas string, maka metode ini menghasilkan NaN.

<?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">

<!-- Metode charAt, charCodeAt, fromCharCode, toLowercase dan

toUpperCase. -->

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

<head>

<title>Metode-Metode Pemrosesan Karakter</title>

<script type = "text/javascript">

<!--

var s = "ZEBRA";

var s2 = "AbCdEfG";

document.writeln( "<p>Karakter pada indeks 0 di dalam '" +

s + "' adalah " + s.charAt( 0 ) );

document.writeln( "<br />Kode karakter pada indeks0 di dalam '"

+ s + "' adalah " + s.charCodeAt( 0 ) + "</p>" );

document.writeln( "<p>'" +

String.fromCharCode( 87, 79, 82, 68 ) +

"' memuat kode 87, 79, 82 dan 68</p>" )

document.writeln( "<p>'" + s2 + "' dalam huruf kecil adalah '" +

s2.toLowerCase() + "'" );

document.writeln( "<br />'" + s2 + "' dalam huruf besar adalah '"

+ s2.toUpperCase() + "'</p>" );

// -->

</script>

</head><body></body>

</html>

Gambar 8.4 Metode-metode charAt, charCodeAt, fromCharCode, toLowerCase, dan toUpperCase

Metode fromCharCode menerima sebagai argumennya sebuah daftar nilai Unicode (dimana tiap nilai dipisahkan dengan sebuah koma) dan membangun sebuah string yang memuat representasi karakter dari nilai-nilai Unicode tersebut. Baris 21-23 menampilkan string “WORD”, yang memuat kode-kode karakter 87, 79, 82, dan 68.

Statemen pada baris 25-26 dan baris 27-28 menggunakan metode toLowerCase dan toUpperCase untuk menampilkan versi dari String s2 (“AbCdEfG”) dalam huruf besar dan huruf kecil.

8.4.4 Metode Pencarian

Pencarian sebuah karakter atau sebuah runtun karakter di dalam suatu string merupakan tugas penting dalam pemrograman. Sebagai contoh, jika Anda menciptakan pengolah kata sendiri, Anda tentu ingin menyediakan kapabilitas pencarian dokumen. Skrip pada Gambar 8.5 mendemonstrasikan metode indexOf dan lastIndexOf yang melakukan pencarian terhadap substring tertentu di dalam sebuah string. Semua pencarian pada contoh ini dilakukan terhadap string global huruf (diinisialisasi pada baris 14 dengan "abcdefghijklmnopqrstuvwxyzabcdefghijklm" di dalam skrip).

Pengguna mengetikkan sebuah substring pada formulir XHTML bidang teks cariForm dan menekan tombol Cari untuk melakukan pencarian terhadap substring di dalam huruf. Pengklikan tombol Cari akan memanggil fungsi tombolDitekan (didefinisikan pada baris 16-19) untuk merespon event onclick dan melakukan pencarian. Hasil dari tiap pencarian ditampilkan pada bidang teks cariForm.

Baris 21-22 menggunakan metode indexOf untuk menentukan lokasi dari kemunculan pertama string nilMasukan.value (yaitu, string yang diketikkan pengguna pada bidang teks nilMasukan) di dalam string huruf. Jika substring ditemukan, maka indeks kemunculan pertama dari substring tersebut akan dijadikan nilai balik; sebaliknya, -1 akan dijadikan nilai balik.

Baris 23-24 menggunakan metode lastIndexOf untuk menentukan lokasi dari kemunculan akhir string nilMasukan.value (yaitu, string yang diketikkan pengguna pada bidang teks nilMasukan) di dalam string huruf. Jika substring ditemukan, maka indeks kemunculan akhir dari substring tersebut akan dijadikan nilai balik; sebaliknya, -1 akan dijadikan nilai balik.

<?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>

Pencarian String dengan Metode indexOf dan lastIndexOf

</title>

<script type = "text/javascript">

<!--

var huruf= "abcdefghijklmnopqrstuvwxyzabcdefghijklm";

function tombolDitekan()

{

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

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

cariForm.elements[2].value =

huruf.indexOf( nilMasukan.value );

cariForm.elements[3].value =

huruf.lastIndexOf( nilMasukan.value );

cariForm.elements[4].value =

huruf.indexOf( nilMasukan.value, 12 );

cariForm.elements[5].value =

huruf.lastIndexOf( nilMasukan.value, 12 );

} // akhir fungsi tombolDitekan

// -->

</script>

</head>

<body>

<form id = "cariForm" action = "">

<h1>String tempat pencarian adalah :<br />

abcdefghijklmnopqrstuvwxyzabcdefghijklm</h1>

<p>Masukkan substring yang akan dicari

<input id = "nilMasukan" type = "text" />

<input id = "cari" type = "button" value = "Cari"

onclick = "tombolDitekan()" /><br /></p>

<p>Kemunculan pertama pada indeks

<input id = "pertama" type = "text" size = "5" />

<br />Kemunculan akhir pada indeks

<br />Kemunculan pertama dimulai dari indeks 12 pada indeks

<input id = "pertama12" type = "text" size = "5" />

<br />Kemunculan akhir dimulai dari indeks 12 pada indeks

<input id = "akhir12" type = "text" size = "5" /></p>

</form>

</body>

</html>

Gambar 8.5 Pencarian string dengan indexOf dan lastIndexOf

Baris 25-26 menggunakan metode indexOf untuk menentukan lokasi dari kemunculan pertama string nilMasukan.value (yaitu, string yang diketikkan pengguna pada bidang teks nilMasukan, dimulai dari indeks 12) di dalam string huruf. Jika substring ditemukan, maka indeks kemunculan pertama dari substring tersebut (dimulai dari indeks 12) akan dijadikan nilai balik; sebaliknya, -1 akan dijadikan nilai balik.

Baris 27-28 menggunakan metode lasIndexOf untuk menentukan lokasi dari kemunculan akhir string nilMasukan.value (yaitu, string yang diketikkan pengguna pada bidang teks nilMasukan, dimulai dari indeks 12 bergerak menuju awal string) di dalam string huruf. Jika substring ditemukan, maka indeks kemunculan akhir dari substring tersebut (dimulai dari indeks 12) akan dijadikan nilai balik; sebaliknya, -1 akan dijadikan nilai balik.

8.4.5 Memecah String dan Mendapatkan Substring

Ketika Anda membaca sebuah kalimat, pikiran Anda tentu fokus pada kata demi kata secara individual, atau token-token, yang masing-masing memiliki makna bagi Anda. Proses pemecahan sebuah string menjadi token-token dikenal dengan tokenisasi. Penerjemah juga melakukan tokenisasi. Penerjemah JavaScript memecah statemen menjadi katakunci, pengenal, operator, dan elemen-elemen lainnya. Gambar 8.6 mendemonstrasikan metode split dari objek String, yang memecah sebuah string menjadi token-token. Antar token dipisahkan oleh pemisah (delimiter), yang umumnya berupa karakter spasi-putih seperti spasi, tab, karakter garis-baru, dan carriage return. Dokumen XHTML menampilkan sebuah formulir yang memuat suatu bidang teks dimana pengguna mengetikkan kalimat yang akan ditokenkan. Hasil dari proses tokenisasi ditampilkan pada komponen GUI textarea. Skrip juga mendemonstrasikan metode substring dari objek String, yang menghasilkan nilai balik berupa potongan string.

Pengguna mengetikkan sebuah kalimat ke dalam bidang teks id nilMasukan dan menekan tombol Pecah untuk menokenkan string. Fungsi pecahTombolDitekan (baris 12-21) menangani event onclick pada tombol.

<?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>Metode split dan substring dari Objek String</title>

<script type = "text/javascript">

<!--

function pecahTombolDitekan()

{

var stringMasukan = document.getElementById( "nilMasukan" ).value;

var token = stringMasukan.split( " " );

document.getElementById( "keluaran" ).value =

token.join( "\n" );

document.getElementById( "substringKeluaran" ).value =

stringMasukan.substring( 0, 10 );

} // akhir fungsi pecahTombolDitekan

// -->

</script>

</head>

<body>

<form action = "">

<p>Masukkan sebuah kalimat yang akan dipecah menjadi kata-kata<br />

<input id = "nilMasukan" type = "text" size = "40" />

<input type = "button" value = "Pecah"

onclick = "pecahTombolDitekan()" /></p>

<p>Kalimat setelah dipecah menjadi kata-kata adalah<br />

<textarea id = "keluaran" rows = "8" cols = "34">

</textarea></p>

<p>10 karakter pertama dari string masukan adalah

<input id = "substringKeluaran" type = "text"

size = "15" /></p>

</form>

</body>

</html>

Gambar 8.6 Metode split dan substring dari objek String

Baris 14 mendapatkan nilai dari bidang masukan dan menyimpannya di dalam variabel stringMasukan. Baris 15 memanggil metode split untuk menokenkan stringMasukan. Argumen pada metode split adalah string pembatas (delimiter), yaitu string yang menentukan akhir dari tiap token pada string asli. Pada contoh ini, karakter spasi membatasi antar token. String pembatas dapat memuat beberapa karakter yang bisa dipakai sebagai pembatas. Metode split menghasilkan nilai balik berupa sebuah array string yang memuat token-token. Baris 17 menggunakan metode join untuk menggabungkan token-token di dalam array token dan memisahkan tiap token dengan sebuah karakter garis-baru (\n). String yang dihasilkan kemudian ditugaskan kepada properti value dari komponen GUI keluaran (sebuah textarea XHTML).

Baris 18-20 menggunakan metode substring untuk mendapatkan sebuah string yang memuat 10 karakter pertama dari string yang diketikkan oleh pengguna (masih disimpan di dalam stringMasukan). Metode ini menghasilkan nilai balik berupa substring dari indeks awal (0 pada contoh ini) sampai indeks akhir - 1 (10 – 1 = 9 pada contoh ini). Jika indeks akhir lebih dari panjang string, maka substring yang dijadikan nilai balik memuat karakter-karakter dari indeks awal sampai akhir string asli.

8.4.6 Metode Markup XHTML

Skrip pada Gambar 8.7 mendemonstrasikan metode-metode dari objek String yang menghasilkan tag-tag markup XHTML. Ketika sebuah objek String memanggil metode markup, metode itu membungkus isi String di dalam tag XHTML yang sesuai. Metode-metode umumnya berguna untuk menghasilkan XHTML secara dinamis selama pemrosesan skrip.

<?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>Metode-Metode Markup XHTML dari Objek String</title>

<script type = "text/javascript">

<!--

var anchorText = "Ini adalah sebuah anchor";

var fixedText = "Ini adalah sebuah teks spasi mono";

var linkText = "Klik di sini untuk pergi ke anchorText";

var strikeText = "Ini adalah sebuah teks yang dicoret";

var subText = "subskrip";

var supText = "superskrip";

document.writeln( anchorText.anchor( "top" ) );

document.writeln( "<br />" + fixedText.fixed() );

document.writeln( "<br />" + strikeText.strike());

document.writeln(

"<br />Ini adalah sebuah teks dengan sebuah " + subText.sub() );

document.writeln(

"<br />Ini adalah sebuah teks dengan sebuah " + supText.sup() );

document.writeln( "<br />" + linkText.link( "#top" ) );

// -->

</script>

</head><body></body>

</html>

Gambar 8.7 Metode-metode markup XHTML dari objek String

Baris 12-17 mendefinisikan string-string yang memanggil metode-metode markup XHTML dari objek String. Baris 19 menggunakan metode anchor untuk memformat string di dalam variabel anchorText (“Ini adalah sebuah anchor”) sebagai

<a name = "top">Ini adalah sebuah anchor</a>

Elemen name dari anchor adalah argumen untuk metode. Anchor ini akan digunakan pada contoh sebagai target dari sebuah hyperlink.

Baris 20 menggunakan metode fixed untuk menampilkan teks di dalam sebuah font berlebar-tetap dengan memformat string di dalam variabel fixedText (“Ini adalah sebuah teks dengan spasi mono”) sebagai

<tt>Ini adalah sebuah teks dengan spasi mono</tt>

Baris 21 menggunakan metode strike untuk menampilkan teks dengan sebuah garis mencoret teks tersebut. Hal ini dilakukan dengan memformat string di dalam variabel strikeText (“Ini adalah sebuah teks yang dicoret”) sebagai

<strike>Ini adalah sebuah teks yang dicoret</strike>

Baris 22-23 menggunakan metode sub untuk menampilkan teks subskrip dengan memformat string di dalam variabel subText (“subskrip”) sebagai

<sub>subskrip</sub>

Perhatikan bahwa dokumen XHTML menampilkan kata subksrip lebih kecil dari teks lainnya dan ia berada sedikit di bawah baris.

Baris 24-25 memanggil metode sup untuk menampilkan teks superskrip dengan memformat string di dalam variabel supText (“superskrip”) sebagai

<sup>superskrip</sup>

Perhatikan bahwa dokumen XHTML menampilkan kata superskrip lebih kecil dari teks lainnya dan ia berada sedikit di atas baris.

Baris 26 menggunakan metode link untuk menciptakan sebuah hyperlink dengan memformat string di dalam variabel linkText (“Klik di sini untuk pergi ke anchorText”) sebagai

<a href = "#top">Klik di sini untuk pergi ke anchorText</a>

Target dari hyperlink (#top pada contoh ini) merupakan argumen pada metode dan dapat berupa sembarang URL. Pada contoh ini, target hyperlink adalah anchor yang diciptakan pada baris 19.

8.5 Objek Date

Objek Date JavaScript menyediakan beberapa metode untuk manipulasi tanggal dan waktu. Pemrosesan tanggal dan waktu dapat diterapkan berdasarkan pada zona waktu lokal komputer atau berdasarkan UTC (Coordinated Universal Time), yang sebelumnya dikenal dengan Greenwich Mean Time (GMT). Hampir semua metode dari objek Date memiliki zona waktu lokal dan versi UTCnya. Metode-metode dari objek Date dicantumkan pada Gambar 8.8.

Metode	Penjelasan
getDate() getUTCDate()	Menghasilkan sebuah angka dari 1 sampai 31 yang merepresentasikan hari dalam bulan dalam waktu lokal atau UTC.
getDay() getUTCDay()	Menghasilkan sebuah angka dari 0 (Minggu) sampai 6 (Sabtu) yang merepresentasikan hari dalam minggu dalam waktu lokal atau UTC.
getFullYear() getUTCFullYear()	Menghasilkan tahun sebagai angka empat-dijit dalam waktu lokal atau UTC.
getHours() getUTCHours()	Menghasilkan sebuah angka dari 0 sampai 23 yang merepresentasikan jam sejak tengah malam dalam waktu lokal atau UTC.
getMilliseconds() getUTCMilliSeconds()	Menghasilkan sebuah angka dari 0 sampai 999 yang merepresentasikan jumlah milidetik dalam waktu lokal atau UTC. Waku disimpan dalam jam, menit, detik, dan milidetik.
getMinutes() getUTCMinutes()	Menghasilkan sebuah angka dari 0 sampai 59 yang merepresentasikan menit untuk waktu lokal atau UTC.
getMonth() getUTCMonth()	Menghasilkan sebuah angka dari 0 (Januari) sampai 11 (Desember) yang merepresentasikan bulan dalam waktu lokal atau UTC.
getSeconds() getUTCSeconds()	Menghasilkan sebuah angka dari 0 sampai 59 yang merepresentasikan detik untuk waktu lokal atau UTC.
getTime()	Menghasilkan jumlah milidetik antara 1 Januari 1970 dan waktu di dalam objek Date.
getTimezoneOffset()	Menghasilkan selisih dalam menit antara waktu sekarang pada komputer lokal dengan waktu UTC.
setDate( val ) setUTCDate( val )	Menetapkan hari dalam bulan (1 sampai 31) dalam waktu lokal atau UTC.
setFullYear( y, m, d ) setUTCFullYear( y, m, d )	Menetapkan tahun dalam waktu lokal atau UTC. Argumen kedua dan ketiga, yang merepresentasikan bulan dan tanggal, bersifat opsional. Jika argumen ini diabaikan, maka nilai sekarang yang ada di dalam objek Date dipakai.
setHours( h, m, s, ms ) setUTCHours( h, m, s, ms )	Menetapkan jam dalam waktu lokal atau UTC. Argumen kedua, ketiga, keempat, yang merepresentasikan menit, detik, dan milidetik, bersifat opsional. Jika argumen ini diabaikan, maka nilai sekarang yang ada di dalam objek Date dipakai.
setMilliSeconds( ms ) setUTCMilliseconds( ms )	Menetapkan jumlah milidetik dalam waktu lokal atau UTC.
setMinutes( m, s, ms ) setUTCMinutes( m, s, ms )	Menetapkan menit dalam waktu lokal atau UTC. Argumen kedua dan ketiga, yang merepresentasikan detik dan milidetik, bersifat opsional. Jika argumen ini diabaikan, maka nilai sekarang yang ada di dalam objek Date dipakai.
setMonth( m, d ) setUTCMonth( m, d )	Menetapkan bulan dalam waktu lokal atau UTC. Argumen kedua, yang merepresentasikan tanggal, bersifat opsional. Jika argumen ini diabaikan, maka nilai tanggal sekarang yang ada di dalam objek Date dipakai.
setSeconds( s, ms ) setUTCSeconds( s, ms )	Menetapkan detik dalam waktu lokal atau UTC. Argumen kedua, yang merepresentasikan milidetik, bersifat opsional. Jika argumen ini diabaikan, maka nilai milidetik sekarang yang ada di dalam objek Date dipakai.
setTime( ms )	Menetapkan waktu berdasarkan argumennya (jumlah milidetik sejak 1 Januari 1970).
toLocaleString()	Menghasilkan sebuah representasi string atas tanggal dan waktu dalam format spesifik pada zona lokal komputer. Sebagai contoh, 13 September 2007, pada jam 3:42:22 PM direpresentasikan sebagai 09/13/07 15:47:22 atau 13/09/07 15:47:22.
toUTCString()	Menghasilkan sebuah representasi string atas tanggal dan waktu dalam format: 15 Sep 2007 15:47:22 UTC
toString()	Menghasilkan sebuah representasi string atas tanggal dan waktu dalam format spesifik pada zona lokal komputer.
valueOf()	Waktu dalam jumlah milidetik sejak tengah malam, 1 Januari 1970 (sama dengan getTime).

Gambar 8.8 Metode-metode dari objek Date

Skrip pada Gambar 8.9 mendemonstrasikan beberapa metode zona waktu lokal yang ditampilkan pada Gambar 8.8. Baris 12 menciptakan sebuah objek Date baru. Operator new mengalokasikan memori untuk objek Date. Kurung kosong mengindikasikan sebuah pemanggilan terhadap konstruktor tanpa argumen dari objek Date. Konstruktor merupakan suatu metode penginisialisasi untuk sebuah objek. Konstruktor dipanggil secara otomatis ketika sebuah objek dialokasikan dengan new. Konstuktor tanpa argumen tersebut menginisialisasi objek Date dengan waktu dan tanggal sekarang pada komputer.

<?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>Metode-Metode Tanggal dan Waktu</title>

<script type = "text/javascript">

<!--

var sekarang = new Date();

document.writeln(

"<h1>Representasi string dan valueOf</h1>" );

document.writeln( "toString: " + sekarang.toString() +

"<br />toLocaleString: " + sekarang.toLocaleString() +

"<br />toUTCString: " + sekarang.toUTCString() +

"<br />valueOf: " + sekarang.valueOf());

document.writeln(

"<h1>Metode-metode untuk zona waktu lokal</h1>" );

document.writeln( "getDate: " + sekarang.getDate() +

"<br />getDay: " + sekarang.getDay() +

"<br />getMonth: " + sekarang.getMonth() +

"<br />getFullYear: " + sekarang.getFullYear() +

"<br />getTime: " + sekarang.getTime() +

"<br />getHours: " + sekarang.getHours() +

"<br />getMinutes: " + sekarang.getMinutes() +

"<br />getSeconds: " + sekarang.getSeconds() +

"<br />getMilliseconds: " + sekarang.getMilliseconds() +

"<br />getTimezoneOffset: " + sekarang.getTimezoneOffset() );

document.writeln(

"<h1>Menetapkan argumen untuk sebuah objek Date baru</h1>" );

var lainDate = new Date( 2007, 2, 18, 1, 5, 0, 0 );

document.writeln( "Date: " + lainDate);

document.writeln( "<h1>Menetapkan metode-metode untuk zona waktu lokal</h1>" );

lainDate.setDate( 31 );

lainDate.setMonth( 11 );

lainDate.setFullYear( 2007 );

lainDate.setHours( 23 );

lainDate.setMinutes( 59 );

lainDate.setSeconds( 59 );

document.writeln( "Tanggal termodifikasi: " + lainDate );

// -->

</script>

</head><body></body>

</html>

Gambar 8.9 Metode-metode tanggal dan waktu dari objek Date (bagian 1 dari 2)

Gambar 8.9 Metode-metode tanggal dan waktu dari objek Date (bagian 2 dari 2)

Baris 16-19 mendemonstrasikan metode toString, toLocalString, toUTCString, dan valueOf. Perhatikan bahwa metode valueOf menghasilkan sebuah nilai integer besar yang merepresentasikan total milidetik antara tengah malam 1 Januari 1970 dan tanggal dan waktu yang disimpan di dalam objek Date, sekarang.

Baris 23-32 mendemonstrasikan metode-metode get untuk zona waktu lokal. Perhatikan bahwa metode getFullYear menghasilkan tahun sebagai sebuah angka empat-dijit. Perhatikan pula bahwa metode getTimeZoneOffset menghasilkan selisih dalam menit antara zona waktu lokal dan waktu UTC.

Baris 36 mendemonstrasikan penciptaan sebuah objek Date baru dan menyuplai argumen-ergumen kepada konstruktor Date untuk tahun, bulan, tanggal, menit, detik, dan milidetik. Perhatikan bahwa argumen jam, menit, detik, dan milidetik bersifat opsional. Jika salah satu dari keempat argumen itu diabaikan, maka nol akan disuplai untuk nilainya. Untuk argumen jam, menit, dan detik, jika argumen yang berada di sisi kanan salah satu dari ketiga argumen ditetapkan, maka ia juga harus ditetapkan (disuplai). Sebagai contoh, jika argumen menit ditetapkan, maka argumen jam harus juga ditetapkan. Jika argumen milidetik disuplai, maka ketiga argumen harus disuplai pula.

Baris 40-45 mendemonstrasikan metode-metode set dari objek Date untuk waktu zona lokal. Objek Date merepresentasikan bulan secara internal sebagai sebuah integer dari 0 sampai 11. Ketika menciptakan sebuah objek Date, Anda harus menetapkan 0 untuk mengindikasikan Januari, 1 untuk mengindikasikan Pebruari, ..., dan 11 untuk mengindikasikan Desember.

Objek Date menyediakan dua metode lain yang dapat dipanggil tanpa perlu menciptakan objek Date baru, yaitu Date.parse dan Date.UTC. Metode Date.parse menerima sebagai argumennya sebuah representasi string atas tanggal dan waktu, dan menghasilkan jumlah milidetik antara tengah malam 1 Januari 1970 dan tanggal dan waktu terspesifikasi. Nilai ini dapat dikonversi menjadi sebuah objek Date dengan statemen

var sTanggal = new Date( jumlahMiliDetik );

yang melewatkan kepada konstruktor Date jumlah milidetik sejak tengah malam 1 Januari 1970, untuk objek Date.

8.6 Objek Boolean dan Number

JavaScript menyediakan objek Boolean dan Number sebagai objek pembungkus (wrapper) untuk nilai boolean true/false dan untuk bilangan. Objek pembungkus ini mendefinisikan metode-metode dan properti-properti yang berguna untuk memanipulasi nilai boolean dan bilangan. Kedua objek ini juga menambahkan fungsionalitas untuk bekerja dengan tipe-tipe data sederhana.

Ketika sebuah program JavaScript memerlukan suatu nilai boolean, ia secara otomatis menciptakan sebuah objek Boolean untuk menyimpan nilai tersebut. Programer JavaScript dapat menciptakan objek Boolean secara eksplisit dengan statemen

var b = new Boolean( nilaiBoolean );

Argumen konstruktor nilaiBoolean menetapkan apakah nilai dari objek Boolean bernilai true atau false. Jika nilaiBoolean adalah false, 0, null, Number.NaN, atau sebuah string kosong (“”), atau jika tidak ada argumen yang disediakan, maka objek Boolean yang baru akan memuat false. Sebaliknya, objek Boolean yang baru akan memuat true. Gambar 8.10 mencantumkan metode-metode dari objek Boolean.

JavaScript secara otomatis menciptakan objek Number untuk menciptakan nilai numerik di dalam sebuah program JavaScript. Programer JavaScript dapat mencipatakan sebuah objek Number dengan statemen

var n = new Number( nilaiNumerik );

Argumen konstruktor nilaiNumerik merupakan angka yang akan disimpan di dalam objek. Meskipun Anda dapat secara eksplisit menciptakan objek Number, biasanya penerjemah JavaScript akan menciptakannya secara otomatis bila dibutuhkan. Gambar 8.11 mencantumkan metode-metode dan properti-properti dari objek Number.

Metode	Penjelasan
toString()	Menghasilkan string “true” jika nilai dari objek Boolean adalah true; sebaliknya, menghasilkan string “false”.
valueOf()	Menghasilkan nilai true jika objek Boolean adalah true; sebaliknya, menghasilkan nilai false.

Gambar 8.10 Metode-metode objek Bolean

Metode atau Properti	Penjelasan
toString( radiks )	Menghasilkan representasi string atas angka. Argumen opsional radiks (sebuah angka dari 2 sampai 36) menetapkan basis angka. Sebagai contoh, radiks 2 menghasilkan representasi biner , radiks 8 menghasilkan representasi oktal, 10 menghasilkan representasi desimal, dan 16 menghasilkan representasi heksadesimal.
valueOf()	Returns the numeric value.
Number.MAX_VALUE	Properti ini merepresentasikan angka terbesar yang dapat disimpan di dalam sebuah program JavaScript, berkisar 1.79E+308.
Number.MIN_VALUE	Properti ini merepresentasikan angka terkecil yang dapat disimpan di dalam sebuah program JavaScript, berkisar 5.00E–324.
Number.NaN	Properti ini merepresentasikan not a number---sebuah angka yang dihasilkan dari sebuah ekspresi aritmatik yang tidak menghasilkan sebuah angka (misalnya, ekspresi parseInt(“hallo”) tidak dapat mengkonversi string “hallo” menjadi sebuah angka, jadi parseInt akan menghasilkan Number.NaN. Untuk menentukan apakah sebuah nilai adalah NaN, uji hasil dengan fungsi isNaN, yang menghasilkan true jika nilai tersebut adalah NaN; sebaliknya, ia menghasilkan false.
Number.NEGATIVE_INFINITY	Properti ini merepresentasikan sebuah nilai yang kurang dari -Number.MAX_VALUE.
Number.POSITIVE_INFINITY	Properti ini merepresentasikan sebuah nilai yang lebih besar dari Number.MAX_VALUE.

Gambar 8.11 Metode-metode dari objek Number

8.7 Objek document

Objek document digunakan untuk memanipulasi dokumen yang dapat dilihat pada jendela penjelajah web. Objek document memiliki banyak properti dan metode, seperti metode document.write dan document.writeln, yang keduanya telah digunakan pada banyak contoh program JavaScript sebelumnya. Gambar 8.12 menunjukkan metode-metode dan properti-properti dari objek document yang digunakan pada bab ini.

Metode atau Properti	Penjelasan
getElementById( id )	Menghasilkan simpul DOM yang merepresentasikan elemen XHTML dengan atribut id yang cocok dengan id.
write( string )	Menulis string pada dokumen XHTML sebagai kode XHTML.
writeln( string )	Menulis string pada dokumen XHTML sebagai kode XHTML dan menambahkan sebuah karakter garis-baru di akhir.
cookie	Sebuah string yang memuat nilai-nilai dari semua cookies yang disimpan pada komputer pengguna untuk dokumen sekarang.
lastModified	Tanggal dan waktu ketika dokumen ini terakhir kali dimodifikasi.

Gambar 8.12 Metode-metode dan properti-properti dari objek document

8.8 Objek window

Objek window menyediakan beberapa metode untuk memanipulasi jendela penjelajah. Skrip berikut menunjukkan beberapa properti dan metode dari objek window yang umum dipakai dan menggunakannya untuk menciptakan situs web yang memuat banyak jendela penjelajah. Gambar 8.13 memampukan pengguna untuk menciptakan sebuah jendela penjelajah yang baru dengan mengisi formulir XHTML dan mengklik tombol Submit. Skrip ini juga memampukan pengguna untuk menambahkan teks pada jendela yang baru dan menavigasi jendela ke URL yang berbeda.

Skrip diawali pada baris 10. Baris 12 mendeklarasikan sebuah variabel yang merujuk ke jendela baru. Anda menamakan jendela baru sebagai jendela anak karena ia diciptakan dan dikendalikan oleh jendela induk pada skrip ini. Baris 14-50 mendefinisikan fungsi ciptakanJendelaAnak, yang menentukan fitur-fitur yang diseleksi oleh pengguna dan menciptakan sebuah jendela anak dengan fitur-fitur tersebut. Baris 18-20 mendeklarasikan beberapa variabel untuk menyimpan status dari checkbox (kotak periksa) pada halaman. Baris 23-38 menetapkan setiap variabel menjadi “yes” atau “no” berdasarkan apakah kotak periksa dicentang atau tidak.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<?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>Menggunakan Objek window</title>

<script type = "text/javascript">

<!--

var jendelaAnak; // variabel untuk mengendalikan jendela anak

function ciptakanJendelaAnak()

{

// semua variabel memuat "yes" atau "no"

// untuk memngenable atau mendisable sebuah fitur pada jendela anak

var toolBar;

var menuBar;

var scrollBars;

// menentukan apakah kotak-periksa Tool Bar dicentang

if ( document.getElementById( "toolBarCheckBox" ).checked )

toolBar = "yes";

else

toolBar = "no";

// menentukan apakah kotak-periksa Menu Bar dicentang

if ( document.getElementById( "menuBarCheckBox" ).checked )

menuBar = "yes";

else

menuBar = "no";

// menentukan apakah kotak-periksa Scroll Bar dicentang

if ( document.getElementById( "scrollBarsCheckBox" ).checked )

scrollBars = "yes";

else

scrollBars = "no";

//meneampilkan jendela dengan fitur-fitur terseleksi

jendelaAnak = window.open( "", "",

",toolbar = " + toolBar +

",menubar = " + menuBar +

",scrollbars = " + scrollBars );

// mendisable tombol

document.getElementById( "closeButton" ).disabled = false;

document.getElementById( "modifyButton" ).disabled = false;

document.getElementById( "setURLButton" ).disabled = false;

} // akhir fungsi ciptakanJendelaAnak

// menyisipkan teks dari textbox pada jendela anak

function modifikasiJendelaAnak()

{

if ( jendelaAnak.closed )

alert( "Anda berinteraksi dengan sebuah jendela tertutup" );

else

jendelaAnak.document.write(

document.getElementById( "teksUntukAnak" ).value );

} // akhir fungsi modifikasiJendelaAnak

// menutup jendela anak

function tutupJendelaAnak()

{

if ( jendelaAnak.closed )

alert( "Anda berinteraksi dengan sebuah jendela tertutup" );

else

jendelaAnak.close();

document.getElementById( "closeButton" ).disabled = true;

document.getElementById( "modifyButton" ).disabled = true;

document.getElementById( "setURLButton" ).disabled = true;

} // akhir fungsi tutupJendelaAnak

// menetapkan URL dari jendela anak menjadi URL

// pada URLAnak jendela induk

function setURLJendelaAnak()

{

if ( jendelaAnak.closed )

alert( "Anda berinteraksi dengan sebuah jendela tertutup" );

else

jendelaAnak.location =

document.getElementById( "URLAnak" ).value;

} // akhir fungsi setJendelaAnak

//-->

</script>

</head>

<body>

<h1>Hallo, ini adalah jendela utama</h1>

<p>Silahkan centang fitur-fitur untuk mengaktifkannya pada jendela anak<br/>

<input id = "toolBarCheckBox" type = "checkbox" value = ""

checked = "checked" />

<label>Tool Bar</label>

<input id = "menuBarCheckBox" type = "checkbox" value = ""

checked = "checked" />

<input id = "scrollBarsCheckBox" type = "checkbox" value = ""

checked = "checked" />

<label>Scroll Bars</label></p>

<p>Silahkan masukkan teks yang ingin Anda tampilkan

pada jendela anak<br/>

<input id = "teksUntukAnak" type = "text"

value = "<h1>Hallo, Saya adalah sebuah jendela anak.</h1> " />

<input id = "createButton" type = "button"

value = "Ciptakan Jendela Anak" onclick = "ciptakanJendelaAnak()" />

<input id= "modifyButton" type = "button" value = "Modifikasi Jendela Anak"

onclick = "modifikasiJendelaAnak()" disabled = "disabled" />

<input id = "closeButton" type = "button" value = "Tutup Jendela Anak"

onclick = "tutupJendelaAnak()" disabled = "disabled" /></p>

<p>URL untuk jendela lain adalah: <br/>

<input id = "URLAnak" type = "text" value = "./" />

<input id = "setURLButton" type = "button" value = "Tetapkan URL Anak"

onclick = "setURLJendelaAnak()" disabled = "disabled" /></p>

</body>

</html>

Gambar 8.13 Penggunaan objek window untuk menciptakan dan memodifikasi jendela

Gambar 41-44 menggunakan metode open dari objek window untuk menciptakan jendela anak. Metode open memiliki tiga parameter. Parameter pertama adalah URL dari halaman yang akan dibuka pada jendela baru, dan parameter kedua adalah nama jendela. Jika Anda menetapkan atribut target dari sebuah elemen a (anchor) untuk merespon nama sebuah jendela, maka href dari link akan dibuka pada jendela. Pada contoh ini, Anda melewatkan dua string kosong kepada window.open sebagai dua nilai parameter pertama karena Anda ingin membuka jendela baru dengan halaman kosong, dan Anda menggunakan metode yang berbeda dalam memanipulasi URL jendela anak.

Parameter ketiga pada metode open adalah sebuah string yang dipisahkan dengan koma, dengan semua nama fitur huruf kecil, masing-masing diikuti dengan sebuah tanda = dan sebuah “yes” atau “no” untuk menentukan apakah fitur tersebut ditampilkan pada jendela baru atau tidak. Jika parameter-parameter ini diabaikan, maka penjelajah web akan menciptakan sebuah jendela baru yang memuat halaman kosong, tanpa judul dan semua fitur tersedia.

Baris 53-60 mendefinisikan fungsi modifikasiJendelaAnak, yang menambahkan sebaris teks pada isi dari jendela anak. Pada baris 55, skrip menentukan apakah jendela anak ditutup atau tidak. Fungsi modifikasiJendelaAnak menggunakan properti jendelaAnak.closed untuk mendapatkan sebuah nilai boolean yang bernilai true jika jendela anak ditutup dan false jika jendela anak masih terbuka. Jika jendela ditutup, maka sebuah kotak alert akan ditampilkan untuk memberitahu pengguna bahwa jendela sekarang telah ditutup dan tidak dapat dimodifikasi. Jika jendela anak masih terbuka, baris 58-59 akan mendapatkan teks dari masukan teksUntukAnak (baris 103-104) pada formulir XHTML pada jendela induk dan menggunakan metode document.write untuk menuliskan teks ini pada jendela anak.

Fungsi tutupJendelaAnak (baris 63-70) juga menentukan apakah jendela anak ditutup. Jika jendela anak ditutup, maka skrip akan menampilkan sebuah kotak alert untuk memberitahu pengguna bahwa jendela telah tertutup. Jika jendela anak terbuka, maka baris 68 akan menutupnya menggunakan metode jendelaAnak.close. Baris 70-72 menonaktifkan tombol-tombol yang berinteraksi dengan jendela anak.

Fungsi setURLJendelaAnak (baris 77-84) menyalin isi dari bidang teks URLAnak ke properti location dari jendela anak. Jika jendela anak masih terbuka, maka baris 81-82 akan menetapkan properti location dari jendela anak menjadi string pada kotak teks URLAnak. Aksi ini akan mengubah URL dari jendela anak dan ekivalen dengan pengetikan sebuah URL baru pada batang alamat jendela.

Skrip berakhir pada baris 86. Baris 88-116 memuat tubuh dari dokumen XHTML, yang memuat sebuah formulir dengan kotak periksa, tombol, kotak teks, dan label. Skrip menggunakan elemen-elemen formulir yang didefinisikan di dalam tubuh untuk mendapatkan masukan dari pengguna. Baris 106, 108, 110, dan 115 menetapkan atribut onclick dari tombol-tombol XHTML. Setiap tombol ditetapkan untuk memanggil sebuah fungsi JavaScript terkait ketika diklik.

Gambar 8.14 memuat beberapa metode dan properti yang umum digunakan dari objek window.

Metode atau Properti	Penjelasan
open( url, nama, opsi )	Menciptakan sebuah jendela baru dengan URL jendela ditetapkan menjadi url, nama ditetapkan menjadi nama, dan fitur-fitur ditetapkan oleh string yang dilewatkan sebagai opsi.
prompt( prompt, default )	Menampilkan sebuah kotak dialog untuk meminta masukan dari pengguna. Teks dari dialog adalah prompt, dan nilai defaultnya ditetapkan menjadi default.
close()	Menutup jendela sekarang dan menghapus objeknya dari memori.
focus()	Metode ini mengaktifkan fokus pada jendela (menempatkan jendela pada latar depan).
blur()	Metode ini menonaktifkan fokus dari jendela (menempatkan jendela di latar belakang).
window.document	Properti ini memuat objek document yang merepresentasikan dokumen yang sekarang berada di dalam jendela.
window.closed	Properti ini memuat sebuah nilai boolean yang ditetapkan true jika jendela ditutup, dan false jika jendela terbuka.
window.opener	Properti ini memuat objek window dari jendela yang membuka jendela sekarang.

Gambar 8.13 Metode-metode dan properti-properti dari objek window

8.9 Menggunakan Cookie

Cookie merupakan sepenggal data yang disimpan pada komputer pengguna untuk menyimpan informasi tentang klien selama dan antar sesi penjelajah. Situs web dapat menyimpan cookie pada komputer klien untuk merekam preferensi pengguna atau informasi lain yang dapat didapatkan oleh situs web selama kunjungan klien. Sebagai contoh, situs web dapat memperoleh nama pengguna dari sebuah cookie dan menggunakannya untuk menampilkan pesan selamat datang.

Microsoft Internet Explorer dan Mozilla Firefox menyimpan cookie sebanyak file teks kecil pada komputer pengguna. Ketika seorang pengguna mengujungi sebuah situs web, penjelajah akan mencari sembarang cookie yang ditulis oleh skrip pada situs itu.

Cookie dapat diakses dalam JavaScript melalui properti cookie dari objek document. JavaScript memperlakukan sebuah cookie sebagai string teks. Sembarang fungsi atau metode string standar dapat memanipulasi cookie. Cookie memiliki sintaks “pengenal = nilai”, dimana pengenal adalah sembarang pengenal variabel JavaScript, dan nilai adalah nilai dari variabel cookie. Ketika terdapat cookie lebih dari satu untuk sebuah situs web, pasangan pengenal-nilai dipisahkan oleh titik-koma pada string document.cookie.

Cookie berbeda dari string biasa karena ia memiliki tanggal kadaluarsa (penjelajah web akan menghapusnya bila melebihi tanggal itu). Tanggal ini dapat didefinisikan dengan menetapkan properti expires pada string cookie. Jika tanggal kadaluarsa cookie tidak ditetapkan, maka cookie akan kadaluarsa secara default (pengguna menutup jendela penjelajah). Cookie dapat dihapus dengan menetapkan properti expires menjadi tanggal dan waktu lampau.

Operator penugasan tidak menulis-ulang (dengan menghapus isi lama sebelum menulis data baru), tetapi menyambungkan data baru pada isi lama. Jadi, jika Anda menetapkan dua cookie

document.cookie = "nama1=nilai1;";

document.cookie = "nama2=nilai2;";

maka document.cookie akan memuat “nama1 = nilai1; nama2 = nilai2”.

Gambar 8.15 menggunakan sebuah cookie untuk menyipman nama pengguna dan menampilkan pesan selamat datang. Contoh ini memperbaiki fungsionalitas pada contoh pada Gambar 4.11 dengan mensyaratkan pengguna untuk memasukkan nama selama kunjungan pertama pada halaman web. Pada tiap kunjungan berikutnya, skrip akan menampilkan nama pengguna yang disimpan di dalam cookie.

Baris 10 memulai skrip. Baris 12-13 mendeklarasikan variabel-variabel yang diperlukan untuk mendapatkan waktu, dan baris 14 mendeklarasikan variabel untuk menyimpan nama pengguna. Baris 16-27 memuat statemen if...else yang sama seperti pada Gambar 4.11 untuk menampilkan pesan selamat datang yang sensitif terhadap waktu.

Baris 30-66 memuat kode yang dipakai untuk memanipulasi cookie. Baris 30 menentukan apakah sebuah cookie ada pada komputer klien atau tidak. Ekspresi document.cookie dievaluasi menjadi true jika sebuah cookie ada. Jika cookie tidak ada, maka skrip akan meminta pengguna untuk memasukkan nama (baris 45). Skrip menciptakan sebuah cookie yang memuat string “nama = “, yang diikuti dengan salinan dari nama pengguna yang dihasilkan oleh fungsi escape (baris 49). Fungsi escape mengkonversi sembarang karakter non-alfanumerik, seperti spasi dan titik-koma, di dalam string menjadi runtun escape heksadesimal dengan bentuk “%XX”, dimana XX adalah nilai ASCII heksadesimal dari karakter spesial. Sebagai contoh, jika nama memuat nilai “David Maneaki”, maka statemen escape(nama) akan dievaluasi menjadi “David %20Maneaki”, karena nilai ASCII heksadesimal dari sebuah spasi kosong adalah 20.

Jika cookie ada (pengguna telah mengunjungi halaman), maka skrip akan mengekstrak nama pengguna dari string cookie dan menyimpannya pada sebuah variabel lokal. Baris 34 menggunakan fungsi unescape untuk mengganti semua runtun escape di dalam cookie dengan karakter biasa.

Anda memanggil split pada cookieKu dengan = sebagai delimiter untuk mendapatkan array cookieToken, dengan elemen pertama sama dengan nama pengenal dan elemen kedua sama dengan nilai pengenal. Baris 40 menugaskan nilai dari elemen kedua di dalam array cookieToken (nilai aktual yang disimpan di dalam cookie) kepada variabel nama. Baris 52-53 menambahkan pesan selamat datang pada halaman web menggunakan nama pengguna yang disimpan di dalam cookie.

<?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>Penggunaan Cookie</title>

<script type = "text/javascript">

<!--

var sekarang = new Date(); // jam dan tanggal sekarang

var jam = sekarang.getHours(); // jam sekarang (0-23)

var nama;

if ( jam < 12 ) // menentukan apakah pagi

document.write( "<h1>Selamat Pagi, " );

else

{

jam = jam - 12; // mengkonversi dari format 24-jam menjadi PM

// menentukan apakah sore atau malam

if ( jam < 6 )

document.write( "<h1>Selamat Sore, " );

else

document.write( "<h1>Selamat Malam, " );

} // akhir else

// menentukan apakah ada cookie

if ( document.cookie )

{

// mengkonversi karakter escape di dalam string cookie

// menjadi notasi biasa

var cookieKu= unescape( document.cookie );

// memecah cookie menjadi token-token menggunakan = sebagai delimiter

var cookieToken = cookieKu.split( "=" );

// menetapkan nama menjadi bagian dari cookie

nama = cookieToken[ 1 ];

} // akhir if

else

{

// jika tidak ada cookie, meminta pengguna untuk memasukkan nama

nama = window.prompt( "Silahkan masukkan nama Anda", "David" );

// escape terhadap karakter spesial di dalam string nama

// dan menambahkan nama pada cookie

document.cookie = "nama=" + escape( nama );

} // akhir else

document.writeln(

nama + ", selamat datang ke pemrograman JavaScript!</h1>" );

document.writeln( "<a href = 'javascript:wrongPerson()'> " +

"Klik di sini jika Anda bukan " + nama + "</a>" );

// mereset cookie jika orang yang salah

function wrongPerson()

{

// mereset cookie

document.cookie= "nama=null;" +

" expires=Thu, 01-Jan-95 00:00:01 GMT";

// menjalankan-ulang halaman untuk nama baru

location.reload();

} // akhir fungsi salahOrang

// -->

</script>

</head>

<body>

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

</body>

</html>

Gambar 8.15 Menggunakan cookie untuk menyimpan data identifikasi pengguna

Skrip ini memampukan pengguna untuk mereset cookie, yang berguna pada saat seseorang pengguna baru menggunakan komputer. Baris 54-55 menciptakan sebuah hyperlink, ketika diklik, memanggil fungsi JavaScript wrongPerson (baris 58-66). Baris 61-62 menetapkan nama cookie menjadi null dan properti expires menjadi 1 Januari 1995 (atau sembarang tanggal di masa lampau). Internet Explorer mendeteksi bahwa properti expires ditetapkan menjadi sebuah tanggal di masa lampau dan menghapus cookie dari komputer pengguna. Selanjutnya ketika halaman web dijalankan kembali, tidak akan ada cookie pada komputer pengguna. Metode reload dari objek location memaksa halaman untuk direfresh (baris 65). Karena cookie sudah tidak ada lagi, skrip akan meminta pengguna untuk memasukkan nama baru.

8.10 HTML Halaman-Jamak dan Aplikasi JavaScript

Bebeberapa bab terdahulu telah mengeksplorasi banyak konsep JavaScript dan bagaimana ia diaplikasikan pada web. Contoh JavaScript berikutnya akan menggabungkan beberapa konsep tersebut ke dalam satu halaman web. Gambar 8.16 menggunakan fungsi, cookie, array, loop, objek Date, objek window, dan objek document untuk menciptakan sebuah halaman yang memuat pesan selamat datang, kuis, citra acak, dan kutipan acak. Anda telah menggunakan semua konsep tersebut sebelumnya, tetapi contoh ini akan mengilustrasikan bagaimana konsep-konsep tersebut diaplikasikan bersamaan pada satu halaman web.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<?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>Pengaplikasian Semua Konsep JavaScript</title>

<script type = "text/javascript">

<!--

var sekarang = new Date(); // tanggal dan waktu sekarang

var jam = sekarang.getHours(); // jam sekarang

// array dengan nama-nama citra yang akan diseleksi secara acak

var gambar =

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

// array dengan beberapa kutipan yang diseleksi secara acak

var kutipan = [ "Form ever follows function.<br/>" +

" Louis Henri Sullivan", "E pluribus unum." +

" (One composed of many.) <br/> Virgil", "Is it a" +

" world to hide virtues in?<br/> William Shakespeare" ];

// menuliskan tanggal dan waktu sekarang pada halaman web

document.write( "<p>" + sekarang.toLocaleString() + "<br/></p>" );

// menentukan apakah sekarang pagi

if ( jam < 12 )

document.write( "<h2>Selamat Pagi, " );

else

{

jam = jam - 12; // mengkonversi dari format 24-jam menjadi 12-jam

// menentukan apakah sekarang sore atau malam

if ( jam < 6 )

document.write( "<h2>Selamat Sore, " );

else

document.write( "<h2>Selamat Malam, " );

} // akhir else

// menentukan apakah ada cookie

if ( document.cookie )

{

// mengkonversi karakter escape di dalam cookie

// menjadi notasi biasa

var cookieKu = unescape( document.cookie );

// memecah cookie menjadi token-token dengan = sebagai delimiter

var cookieToken = myCookie.split( "=" );

// menetapkan nama menjadi bagian dari cookie

nama = cookieToken[ 1 ];

} // akhir if

else

{

// jika tidak ada cookie, minta pengguna untuk memasukkan nama

nama = window.prompt( "Silahkan masukkan nama Anda", "David" );

// meng-escape karakter spesial di dalam string nama

// dan menambahkan nama pada cookie

document.cookie = "nama =" + escape( nama );

} // akhir else

// menuliskan pesan selamat datang pada halaman

document.writeln(

nama + ", selamat datang ke pemrograman JavaScript!</h2>" );

// menuliskan link untuk menghapus cookie

document.writeln( "<a href = \"javascript:wrongPerson()\" > " +

"Klik di sini jika Anda bukan " + nama + "</a><br/>" );

// menuliskan citra acak pada halaman

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

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

".gif\" /> <br/>" );

// menuliskan kutipan acak pada halaman

document.write ( kutipan[ Math.floor( Math.random() * 3 ) ] );

// menciptakan sebuah jendela dengan semua kutipan di dalamnya

function semuaKutipan()

{

// menciptakan jendela anak untuk kutipan

var jendelaKutipan = window.open( "", "", "resizable=yes, " +

"toolbar=no, menubar=no, status=no, location=no," +

" scrollBars=yes" );

jendelaKutipan.document.write( "<p>" );

// menjelajah semua kutipan dan menuliskannya pada jendela baru

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

jendelaKutipan.document.write( ( i + 1 ) + ".) " +

kutipan[ i ] + "<br/><br/>");

// menuliskan link untuk menutup jendela baru

jendelaKutipan.document.write( "</p><br/><a href = " +

"\"javascript:window.close()\">Tutup Jendela Ini</a>" );

} // akhir fungsi semuaKutipan

// mereset cookie dokumen jika orang yang salah

function wrongPerson()

{

// mereset cookie

document.cookie= "nama=null;" +

" expires=Thu, 01-Jan-95 00:00:01 GMT";

// memuat-ulang halaman untuk mendapatkan nama baru setelah cookie dihapus

location.reload();

} // akhir fungsi wrongPerson

// membuka jendela baru untuk file kuis2.html

function bukaKuis()

{

window.open( "kuis.html", "", "resizable=yes, ", "toolbar = no, " +

"menubar = no, scrollBars = no" );

} // akhir fungsi bukaKuis

// -->

</script>

</head>

<body>

<p><a href = "javascript:semuaKutipan()">Tampilkan Semua Kutipan</a></p>

<p id = "kuisSpot">

<a href = "javascript:bukaKuis()">Silahkan Isi Kuis Ini</a></p>

<script type = "text/javascript">

// variabel untuk mendapatkan tanggal dan waktu modifikasi terakhir

var modTanggal = new Date( document.lastModified );

// menuliskan tanggal dan waktu modifikasi terakhir pada halaman

document.write ( "Halaman ini terakhir dimodifikasi pada " +

modTanggal.toLocaleString() );

</script>

</body>

</html>

Skrip diawali pada baris 10. Baris 12-13 mendeklarasikan beberapa variabel yang diperlukan untuk menentukan waktu tunda. Baris 16-23 menciptakan dua array, yang isinya akan diseleksi secara acak. Halaman web ini memuat array gambar dan array kutipan. Baris 26 menuliskan tanggal dan waktu lokal pengguna menggunakan metode toLocaleString dari objek Date. Baris 29-40 menampilkan sebuah pesan selamat datang menggunakan kode yang sama seperti pada Gambar 4.11. Skrip akan menggunakan cookie yang ada untuk mendapatkan nama pengguna (baris 43-54) atau meminta nama dari pengguna baru. Baris 66-67 menuliskan pesan selamat datang pada halaman web, dan baris 70-71 menghasilkan link untuk mereset cookie. Baris 74-79 menuliskan citra acak dan kutipan acak pada halaman web. Skrip memiliki secara acak dengan memilih indeks pada tiap array.

Gambar 8.16 Halaman selamat datang menggunakan beberapa konsep JavaScript

Fungsi semuaKutipan (baris 82-98) menggunakan objek window dan sebuah loop for untuk membuka jendela baru yang memuat semua kutipan pada array kutipan. Skrip tidak menugaskan sebuah URL atau sebuah nama pada jendela ini, tetapi ia menetapkan fitur-fitur jendela untuk ditampilkan. Baris 88 membuka sebuah paragraf baru pada jendelaKutipan. Loop for (baris 91-93) menjelajah array kutipan dan menuliskan setiap kutipan pada jendelaKutipan. Baris 96-97 menutup paragraf pada jedelaKutipan, menyisipkan sebuah baris baru, dan menambahkan sebuah link di bawah halaman sehingga pengguna dapat menutup jendela. Perhatikan bahwa semuaKutipan yang menghasilkan sebuah halaman web dituliskan secara keselurutan menggunakan kode JavaScript.

Fungsi wrongPerson (baris 101-109) mereset nama pengguna pada cookie. Fungsi ini identika dengan fungsi wrongPerson pada Gambar 8.15.

Fungsi bukaKuis (baris 112-116) membuka sebuah jendela baru untuk menampilkan kuis. Dengan menggunakan metode window.open, skrip menghasilkan sebuah jendela baru yang memuat kuis.html (baris 114-115).

Skrip utama berakhir pada baris 118, dan tubuh dari dokumen XHTML diawali pada baris 120. Baris 121 menciptakan link yang memanggil fungsi semuaKutipan ketika ia diklik. Baris 123-124 menciptakan sebuah elemen paragraf yang memuat atribut id = “kuisSpot”. Paragraf ini memuat sebuah link yang memanggil fungsi bukaKuis.

Algoritma, Struktur Data, dan Pemrograman

Menu

Sunday, December 25, 2016

Bab 8. Pemrograman Internet

No comments:

Post a Comment