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

Sunday, December 25, 2016

Bab 9. Pemrograman Internet

DOM: Objek dan Koleksi

9.1 Pengantar

Pada bab ini akan dikenalkan mengenai DOM (Document Object Model). DOM memberikan Anda akses terhadap semua elemen pada suatu halaman web. Di dalam penjelajah web, formulir paragraf, tabel, dan lainnya, direpresentasikan pada sebuah hierarki objek. Dengan menggunakan JavaScript, Anda dapat menciptakan, memodifikasi, dan menghilangkan elemen-elemen di dalam halaman web secara dinamis.

Baik Internet Explorer maupun Netscape memiliki versi HTML dinamis (DHTML) yang berbeda, yang masing-masing menyediakan fungsionalitas yang sama. Namun, meskipun keduanya memiliki kapabilitas yang sama, kedua model tersebut tidak kompatibel satu sama lain. Dalam usaha meningkatkan kompatibilitas lintas-penjelajah, W3C memberlakukan DOM terstandarisasi. Firefox, IE7, dan banyak penjelajah web lainnya mengimplementasikan hampir semua fitur DOM dari W3C.

Bab ini akan dimulai dengan secara formal mengenalkan konsep atas simpul DOM dan pohon DOM. Kemudian akan didiskusikan pelbagai properti dan metode dari simpul DOM dan akan dirangkum beberapa metode lain dai objek document. Di sini akan didiskusikan pula secara dinamis bagaiman mengubah beberapa properti gaya (style properties), yang memampukan Anda untuk menciptakan banyak jenis efek, seperti warna latar belakang dan animasi yang didefinisikan sendiri oleh pengguna.

9.2 Pemodelan sebuah Dokumen: Simpul dan Pohon DOM

Seperti yang telah Anda lihat pada beberapa bab sebelumnya, metode getElementById dari objek document merupakan cara yang paling sederhana untuk mengakses sebuah elemen tertentu di dalam halaman web.

Metode getElementById menghasilkan objek-objek yang dinamakan dengan simpul DOM. Setiap elemen pada sebuah halaman XHTML dimodelkan pada penjelajah web menggunakan simpul DOM. Semua simpul di dalam sebuah dokumen membangun apa yang dinamakan dengan pohon DOM, yang mendeskripsikan hubungan antar elemen. Simpul berelasi satu sama lain melalui relasi anak-induk. Sebuah elemen XHTML yang berada di dalam elemen lain dikatakan sebagai anak dari elemen yang memuatnya. Elemen pemuat dikenal sebagai induk. Sebuah simpul dapat memiliki banyak anak, tetapi ia hanya bisa memiliki satu induk. Simpul-simpul dengan induk yang sama disebut sebagai saudara.

Beberapa penjelajah memiliki perangkat yang memampukan Anda untuk melihat representasi visual atas pohon DOM dari sebuah dokumen. Ketika menginstal Firefox, Anda dapat memilih untuk menginstal sebuah perangkat yang dinamakan DOM Inspector, yang memampukan Anda untuk melihat pohon DOM atas sebuah dokumen XHTML. Untuk memeriksa sebuah dokumen, pengguna Firefox dapat mengakses DOM Inspector dari menu Tools. Jika DOM Inspector tidak ada pada menu, jalankan installer Firefox dan pilih Custom pada Setup Type, dan pastikan bahwa kotak DOM Inspector dicentang pada jendela Optional Components.

Microsoft menyediakan sebuah Developer Toolbar untuk Internet Explorer yang memampukan Anda untuk memeriksa pohon DOM atas sebuah dokumen. Toolbar tersebut dapat diunduh dari Microsoft di alamat go.microsoft.com/fwlink/?LinkId=92716. Begitu toolbar tersebut diinstal, Anda bisa menjalankan-ulang penjelejah web, kemudian mengklikn ikon di sisi kanan toolbar dan memilih IE Developer Toolbar dari menu tersebut. Gambar 9.1 menunjukkan sebuah dokumen XHTML dan pohon DOMnya yang ditampilkan oleh Developer Toolbar.

Dokumen XHTML memuat beberapa elemen sederhana. Sebuah simpul dapat diekspansi atau disusutkan menggunakan tombol + dan – yang berada di samping nama simpul. Gambar 9.1b menunjukkan semua simpul di dalam dokumen yang diekspansi secara penuh. Simpul dokumen di bagian atas pohon disebut dengan simpul akar, karena ia tidak memiliki induk. Simpul html merepresentasikan elemen html (baris 7-24).

<?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>Demonstrasi Pohon DOM</title>

</head>

<body>

<h1>Sebuah Halaman XHTML</h1>

<p>Halaman ini memuat beberapa elemen dasar XHTML. Anda menggunakan

DOM Inspector dari IE Developer Toolbar untuk melihat pohon DOM

dari dokumen, yang memuat sebuah simpul DOM untuk setiap elemen

di dalam dokumen.</p>

<p>Berikut adalah sebuah daftar:</p>

<ul>

</ul>

</body>

</html>

Gambar 9.1a Dokumen XHTML dengan penjelajah Internet Explorer

Gambar 9.1b Demonstrasi atas sebuah pohon DOM dokumen

Simpul head dan body adalah saudara, karena keduanya merupakan anak dari simpul html. Simpul head memuat satu simpul title, yang merepresentasikan baris 9. Simpul body memuat simpul-simpul yang merepresentasikan setiap elemen pada halaman. Perhatikan bahwa simpul-simpul li merupakan anak dari simpul ul, karena semuanya bersarang di dalam simpul ul.

9.3 Menjelajah dan Memodifikasi Pohon DOM

DOM memberikan Anda akses terhadap elemen-elemen sebuah dokumen, yang memampukan Anda untuk memodifikasi isi sebuah halaman secara dinamis menggunakan JavaScript event-driven. Bagian ini akan mengenalkan beberapa properti dan metode dari semua simpul DOM yang memampukan Anda untuk menelusuri pohon DOM, untuk memodifikasi simpul, dan untuk menghapus isi halaman secara dinamis.

Gambar 9.2 menunjukkan beberapa fungsionalitas simpul-simpul DOM. Program memampukan Anda untuk menyoroti, memodifikasi, menyisipkan, dan menghapus elemen.

Baris 117-132 memuat elemen-elemen dasar XHTML. Setiap elemen memiliki sebuah atribut id, yang juga ditampilkan di awal elemen (di dalam kurung siku). Sebagai contoh, id dari elemen h1 pada baris 117-118 ditetapkan sebagai bigheading, dan kepala teks diawali dengan [bigheading]. Ini memampukan pengguna untuk melihat id dari tiap elemen pada halaman. Tubuh juga memuat sebuah elemen h3, beberapa elemen p, dan sebuah list tak-terurut.

Elemen div (baris 133-162) memuat bagian lain dari tubuh XHTML. Baris 134 memulai dengan sebuah elemen form, menugaskan string kosong kepada atribut action yang diperlukan (karena Anda tidak memberikannya kepada sebuah server), dan menghasilkan false kepada atribut onsubmit. Ketika onsubmit (dari sebuah form) menghasilkan false, navigasi yang diarahkan ke alamat yang ditentukan pada atribut action akan dibatalkan. Ini memampukan Anda untuk memodifikasi halaman menggunakan menggunakan fungsi penanganan event JavaScript tanpa harus memuat-ulang XHTML yang asli.

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

136

137

138

139

140

141

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

<?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>Fungsionalitas Dasar DOM</title>

<style type = "text/css">

h1, h3 { text-align: center;

font-family: tahoma, geneva, sans-serif }

p { margin-left: 5%;

margin-right: 5%;

font-family: arial, helvetica, sans-serif }

ul { margin-left: 10% }

a { text-decoration: none }

a:hover { text-decoration: underline }

.nav { width: 100%;

border-top: 3px dashed blue;

padding-top: 10px }

.highlighted { background-color: yellow }

.submit { width: 120px }

</style>

<script type = "text/javascript">

<!--

var simpulSekarang; // menyimpan simpul tersorot

var hitungId = 0; // digunakan menugaskan id unik pada elemen baru

// mendapatkan dan menyoroti sebuah elemen dengan atribut id

function denganId()

{

var id = document.getElementById( "gbi" ).value;

var target = document.getElementById( id );

if ( target )

geserKe( target );

} // akhir fungsi denganId

// menyisipkan sebuah elemen paragraf sebelum elemen sekarang

// menggunakan metode insertBefore

function sisip()

{

var simpulBaru = ciptakanSimpulBaru(

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

simpulSekarang.parentNode.insertBefore( simpulBaru, simpulSekarang );

geserKe( simpulBaru );

} // akhir fungsi sisip

// menempatkan sebuah simpul paragraf sebagai anak dari simpul sekarang

function sambungSimpul()

{

var simpulBaru = ciptakanSimpulBaru(

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

simpulSekarang.appendChild( simpulBaru );

geserKe( simpulBaru);

} // akhir fungsi sambungSimpul

// mengganti simpul yang terseleksi dengan sebuah simpul paragraf

function gantiSekarang()

{

var simpulBaru = ciptakanSimpulBaru(

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

simpulSekarang.parentNode.replaceChild( simpulBaru, simpulSekarang );

geserKe( simpulBaru );

} // akhir fungsi gantiSekarang

// menghapus simpul sekarang

function hapus()

{

if ( simpulSekarang.parentNode == document.body )

alert( "Tidak dapat menghapus elemen level-atas." );

else

{

var simpulLama= simpulSekarang;

geserKe( simpulLama.parentNode );

simpulSekarang.removeChild( simpulLama);

} // akhir else

} // akhir fungsi hapus

// mendapatkan dan menyoroti induk dari simpul sekarang

function induk()

{

var target = simpulSekarang.parentNode;

if ( target != document.body )

geserKe( target );

else

alert( "Tidak ada simpul induk." );

} // akhir fungsi induk

// fungsi pembantu yang menghasilkan sebuah simpul paragraf baru

// yang memuat sebuah id unik

function ciptakanSimpulBaru( teks )

{

var simpulBaru = document.createElement( "p" );

idSimpul= "baru" + hitungId;

++hitungId;

simpulBaru.id = idSimpul;

teks = "[" + idSimpul + "] " + teks;

simpulBaru.appendChild(document.createTextNode( teks ) );

return simpulBaru;

} // akhir fungsi ciptakanSimpulBaru

// fungsi pembantu yang menggeser ke simpulSekarang yang baru

function geserKe( simpulBaru )

{

simpulSekarang.className = ""; // menghapus sorotan

simpulSekarang = simpulBaru;

simpulSekarang.className = "highlighted"; // menyoroti simpul baru

document.getElementById( "gbi" ).value = simpulSekarang.id;

} // akhir fungsi geserKe

// -->

</script>

</head>

<body onload = "simpulSekarang = document.getElementById( 'bigheading' )">

[bigheading] Model Objek DHTML </h1>

<h3 id = "smallheading">[smallheading] Fungsionalitas Elemen</h3>

<p id = "para1">[para1] Model Objek Dokumen (DOM) membuat

akses cepat dan dinamis ke semua elemen pada sebuah dokumen XHTML

untuk pemanipulasian dengan JavaScript.</p>

<p id = "para2">[para2] Agar lebih mengerti, Anda perlu lebih banyak

"belajar JavaScript secara mandiri, atau kunjungi

[link] JavaScript Resource Center.</a></p>

<p id = "para3">[para3] Tombol di bawah mendemonstrasikan:(list)</p>

<ul id = "list">

<li id = "item1">[item1] getElementById dan parentNode</li>

<li id = "item2">[item2] sisip dan sambungSimpul</li>

<li id = "item3">[item3] gantiSekarang dan hapus </li>

</ul>

<div id = "nav" class = "nav">

<form onsubmit = "return false" action = "">

<table>

<tr>

<td><input type = "text" id = "gbi"

value = "bigheading" /></td>

<td><input type = "submit" value = "Dengan id"

onclick = "denganId()" class = "submit" /></td>

</tr><tr>

<td><input type = "text" id = "sisip" /></td>

<td><input type = "submit" value = "Sisipkan sebelum"

onclick = "sisip()" class = "submit" /></td>

</tr><tr>

<td><input type = "text" id = "sambung" /></td>

<td><input type = "submit" value = "Sambung Anak"

onclick = "sambungSimpul()" class = "submit" /></td>

</tr><tr>

<td><input type = "text" id = "ganti" /></td>

<td><input type = "submit" value = "Ganti Sekarang"

onclick = "gantingSekarang()" class = "submit" /></td>

</tr><tr><td />

<td><input type = "submit" value = "Hapus Sekarang"

onclick = "hapus()" class = "submit" /></td>

</tr><tr><td />

<td><input type = "submit" value = "Dapatkan Induk"

onclick = "induk()" class = "submit" /></td>

</tr>

</table>

</form>

</div>

</body>

</html>

Gambar 9.2 Fungsionalitas dasar DOM

Sebuah table ( baris 135-160) memuat beberapa kendali untuk memodifikasi dan memanipulasi elemen-elemen pada halaman. Setiap tombol (dari keenam tombol) memanggil fungsi penanganan-event masing-masing untuk melakukan aksi yang dideskripsikan oleh value.

Kode JavaScript dimulai dengan mendeklarasikan dua variabel. Variabel simpulSekarang (baris 27) menjejak simpul tersorot sekarang, karena fungsionalitas dari tombol-tombol bergantung pada simpul mana yang sedang diseleksi. Atribut onload pada body (baris 116) menginisialisasi simpulSekarang dengan elemen h1 yang memiliki id bigheading. Variabel hitungId (baris 28) dipakai untuk menugaskan sebuah id unik kepada setiap elemen baru yang diciptakan. Kode JavaScript lainnya memuat fungsi-fungsi penanganan-event untuk tombol-tombol XHTML dan dua fungsi pembantu yang dipanggil oleh fungsi penanganan-event (event-handler). Sekarang akan dibahas

setiap tombol dan fungsi penanganan-event terkait secara lebih detil.

Mencari dan Menyoroti sebuah Elemen Menggunakan getElementById dan className

Baris pertama pada tabel (baris 136-141) memampukan pengguna untuk memasukkan id dari sebuah elemen ke dalam bidang teks (baris 137-138) dan mengklik tombol Dengan id (baris 139-140) untuk mencari dan menyoroti elemen, seperti yang ditunjukkan pada Gambar 9.2. Atribut onclick menetapkan fungsi penanganan-event untuk tombol tersebut agar memanggil denganId().

Fungsi denganId didefinisikan pada baris 31-38. Baris 33 menggunakan getElementById untuk menugaskan isi dari bidang teks kepada variabel id. Baris 34 menggunakan getElementById lagi untuk mencari elemen yang memiliki atribut id yang cocok dengan isi dari variabel id, dan menugaskannya kepada variabel target. Jika sebuah elemen ditemukan dengan id yang diberikan, maka getElementById akan menghasilkan nilai balik berupa sebuah objek yang merepresentasikan elemen tersebut. Jika tidak ada elemen cocok yang ditemukan, maka getElementById akan menghasilkan null. Baris 36 memeriksa apakah target merupakan sebuah objek (Ingat bahwa sembarang objek yang dipakai sebagai ekspresi boolean adalah true, sedangkan null adalah false). Jika target dievaluasi menjadi true, maka baris 37 akan memanggil fungsi geserKe dengan target sebagai argumennya.

Fungsi geserKe, yang didefinisikan pada baris 106-112, dipakai di seluruh program untuk menyoroti sebuah elemen baru pada halaman. Elemen sekarang diberikan latar-belakang kuning menggunakan kelas gaya highlighted, yang didefinisikan pada baris 22. Baris 108 menetapkan properti className dari simpul sekarang menjadi string kosong. Properti className memampukan Anda untuk mengubah atribut class dari sebuah elemen XHTML. Pada kasus ini, Anda menghapus atribut class untuk membuang kelas highlighted dari simpulSekarang sebelum Anda menyoroti elemen yang baru.

Baris 109 menugaskan objek simpulBaru (yang dilewatkan kepada fungsi sebagai sebuah parameter) kepada variabel simpulSekarang. Baris 110 menambahkan kelas gaya highlighted pada simpulSekarang yang baru menggunakan properti className.

Terakhir, baris 111 menggunakan properti id untuk menugaskan id dari simpul sekarang kepada properti value dari bidang masukan. Sama seperti className yang memampukan Anda untuk mengakses atribut class dari sebuah elemen, properti id juga mengendalikan atribut id sebuah elemen. Baris ini dipakai untuk memastikan bahwa properti value dari bidang teks konsisten dengan id dari simpul yang terseleksi saat ini.

Menciptakan dan Menyisipkan Elemen Menggunakan insertBefore dan appendChild

Dua baris tabel selanjutnya memampukan pengguna untuk menciptakan sebuah elemen baru dan menyisipkannya tepat sebelum simpul sekarang atau sebagai anak dari simpul sekarang. Baris kedua (baris 141-145) memampukan pengguna untuk memasukkan teks ke dalam bidang teks dan mengklik tombol Sisipkan sebelum. Teks ditempatkan pada sebuah paragraf baru, yang kemudian disisipkan ke dalam dokumen tepat sebelum elemen yang terseleksi saat ini. Tombol-tombol pada baris 143-144 memanggil fungsi sisip, yang didefinisikan pada baris 42-48.

Baris 44-45 memanggil fungsi ciptakanSimpulBaru, melewatkan kepadanya nilai dari bidang masukan (dengan id adalah sisip) sebagai argumen. Fungsi ciptakanSimpulBaru, yang didefinisikan pada baris 94-103, menciptakan sebuah simpul paragraf yang memuat teks yang dilewatkan kepada fungsi itu. Baris 96 menciptakan sebuah elemen p menggunakan metode createElement dari objek document. Metode createElement menciptakan sebuah simpul DOM yang baru, dan mengambil nama tag sebagai argumennya. Perhatikan bahwa ketika createElement menciptakan sebuah elemen, ia tidak menyisipkan elemen tersebut pada halaman.

Baris 97 menciptakan sebuah id unik untuk elemen baru dengan menyambungkan “baru” dengan nilai dari hitungId sebelum menginkremen hitungId pada baris 98. Baris 99 menugaskan id kepada elemen baru. Baris 100 menyambung id dari elemen (diapit kurung siku) dengan awal dari teks (parameter yang memuat teks paragraf).

Baris 101 mengenalkan dua metode baru. Metode createTextNode dari objek document menciptakan sebuah simpul yang hanya dapat memuat teks. Jika diberikan sebuah argumen string, maka createTextNode akan menyisipkan string tersebut ke dalam simpul teks. Pada baris 101, Anda menciptakan sebuah simpul teks baru yang memuat isi dari variabel teks. Simpul baru ini kemudian dipakai (masih pada baris 101) sebagai argumen kepada metode appendChild, yang dipanggil pada simpul paragraf. Metode appendChild dipanggil pada sebuah simpul induk untuk menyisipkan simpul anak (yang dilewatkan sebagai argumen).

Seteleh elemen p diciptakan, baris 102 mengembalikan simpul tersebut kepada fungsi pemanggil sisip, dimanan ia ditugaskan kepada variabel simpulBaru pada baris 44-45. Baris 46 menyisipkan sebuah simpul yang baru saja diciptakan tepat sebelum simpul yang sekarang terseleksi. Properti parentNode dari setiap simpul DOM memuat induk dari simpul. Pada baris 46, Anda menggunakan properti parentNode dari simpulSekarang untuk mendapatkan induknya.

Anda memanggil metode insertBefore (baris 46) pada simpul induk dengan simpulBaru dan simpulSekarang sebagai argumennya untuk menyisipkan simpulBaru sebagai anak dari induk secara langsung (berada sebelum simpulSekarang). Sintaks umum dari metode insertBefore adalah

induk.insertBefore( anakBaru, anakYgAda );

Metode ini dipanggil pada sebuah induk dengan anak baru dan anak yang sudah ada sebagai argumen. Simpul anakBaru disisipkan sebagai anak dari induk secara langsung dan ditempatkan sebelum anakYgAda. Baris 47 menggunakan fungsi geserKe untuk memperbarui simpulSekarang menjadi simpul yang baru saja disisipkan dan menyorotinya pada halaman XHTML.

Baris tabel yang ketiga (baris 145-149) memampukan pengguna untuk menyambung atau menempelkan sebuah simpul paragraf baru sebagai anak dari elemen sekarang. Fitur ini menggunakan prosedur yang sama dengan fungsionalitas insertBefore. Baris 53-54 pada fungsi appendNode menciptakan sebuah simpul baru, baris 55 menyisipkannya sebagai anak dari simpul sekarang, dan baris 56 menggunakan geserKe untuk memperbarui simpulSekarang dan menyoroti simpul yang baru.

Mengganti dan Menghapus Elemen Menggunakan replaceChild dan removeChild

Dua baris berikutnya (baris 149-156) memampukan pengguna untuk mengganti elemen sekarang dengan sebuah elemen p yang baru atau hanya untuk menghapus elemen sekarang. Baris 150-152 memuat sebuah bidang teks dan sebuah tombol yang mengganti elemen tersorot sekarang dengan sebuah simpul paragraf baru yang memuat teks pada bidang teks.

Tombol pada baris 151-152 memanggil fungsi gantiSekarang, yang didefinisikan pada baris 60-66. Baris 62-63 memanggil ciptakanSimpulBaru, dengan cara yang sama dengan yang ada pada insert dan appendNode, untuk mendapatkan format teks dari bidang masukan. Baris 64 mendapatkan induk dari simpulSekarang, kemudian memanggil metode replaceChild pada induk tersebut. Metode replaceChild bekerja sebagai berikut:

induk.replaceChild( anakBaru, anakLama );

Metode replaceChild dari induk menyisipkan anakBaru menggantikan anakLama.

Baris 77 menggunakan metode removeChild untuk menghapus simpulLama (sebuah anak dari simpulSekarang yang baru) dari tempatnya pada dokumen XHTML. Secara umum,

induk.removeChild( anak );

akan menghapus anak dari simpul induk.

9.4 Gaya Dinamis

Gaya (style) sebuah elemen dapat diubah secara dinamis. Seringkali perubahan tersebut dilakukan untuk merespon event dari pengguna. Perubahan gaya semacam itu dapat menciptakan banyak efek, termasuk menu interaktif dan animasi. Gambar 9.3 merupakan sebuah contoh sederhana yang mengubah properti gaya background-color dalam merespon masukan dari pengguna.

<?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>Gaya Dinamis</title>

<script type = "text/javascript">

<!--

function mulai()

{

var warnaMasukan = prompt( "Masukkan sebuah warna masukan " +

"untuk warna latar dari halaman ini", "" );

document.body.style.backgroundColor = warnaMasukan;

} // akhir fungsi mulai

// -->

</script>

</head>

<body id = "body" onload = "mulai()">

<p>Selamat Datang ke Situs Kami!</p>

</body>

</html>

Gambar 9.3 Gaya (style) dinamis

Fungsi mulai (baris 12-17) meminta pengguna untuk memasukkan sebuah nama warna, kemudian menetapkan warna latar-belakang menggunakan nilai tersebut. Perhatikan bahwa error akan terjadi bila Anda memasukkan warna yang tidak valid. Anda merujuk warna latar-belakang sebagai document.body.style.backgroundColor, yaitu properti body dari objek document. Anda kemudian menggunakan properti style (sebuah properti dari hampir semua elemen XHTML) untuk menetapkan properti backgroung-color dari CSS. Dalam JavaScript, properti ini dikenal sebagai backgroundColor, dimana tanda hubung (-) dihapus untuk menghindari kebingungan dengan operator pengurangan. Konvensi penamaan ini konsisten dengan hampir semua properti CSS. Sebagai contoh, borderWidth berkorelasi dengan border-width (properti CSS), dan fontFamily berkorelasi dengan properti CSS font-family. Secara umum, semua properti CSS diakses dalam format simpul.style.propertistyle.

Gambar 9.4 mengintroduksi metode setInterval dan clearInterval dari objek window, dengan menggabungkan keduanya dengan gaya dinamis untuk menciptakan efek animasi. Contoh ini merupakan sebuah viewer citra sederhana yang memampukan Anda untuk memiliki sampul buku Sianipar dan melihatnya dalam ukuran yang lebih besar. Ketika citra salah satu citra thumbnail di sisi kanan diklik, versi citra yang lebih besar akan bertumbuh dari pojok kiri-atas pada area citra utama.

Elemen body (baris 66-85) memuat dua elemen div, keduanya menggunakan left menggunakan gaya-gaya yang didefinisikan pada baris 14 dan 17. Elemen div sebelah kiri memuat citra berukuran-penuh buku1.jpg, yang muncul ketika halaman dimuat. Elemen div sebelah kanan memuat enam citra thumbnail yang akan merespon event klik dengan memanggil metode tampil dan melewatkan kepadanya nama file dari citra berukuran-penuh terkait.

Fungsi tampil (baris 46-62) secara dinamis memperbarui citra pada div sebelah kiri menjadi citra yang diklik oleh pengguna. Baris 48-49 mencegah bagian lain dari fungsi untuk dieksekusi jika interval didefinisikan (animasi sedang berlangsung). Baris 51 mendapatkan div kiri dengan idnya, imgSampul. Baris 52 menciptakan sebuah elemen img yang baru. Baris 53-55 menetapkan idnya menjadi imgSampul, menetapkan srcnya menjadi file citra yang sesuai di dalam direktori ukuranpenuh, dan menetapkan atribut alt yang diperlukan. Baris 56-59 menambahkan beberapa inisialisasi lain sebelum memulai animasi pada baris 61. Untuk menciptakan efek animasi pertumbuhan, baris 57-58 menetapkan width dan height menjadi 0. Baris 59 mengganti simpul citraBesar dengan simpulBaru (yang diciptakan pada baris 52), dan baris 60 menetapkan hitung, variabel yang mengendalikan animasi, menjadi 0.

Baris 61 mengintroduksi metode setInterval dari objek window, yang memulai animasi. Metode ini mengambil dua parameter, yaitu sebuah statemen untuk dieksekusi secara berulang dan sebuah integer yang menetapkan berapa kali eksekusi dilakukan (dalam milidetik). Anda menggunakan setInterval untuk memanggil fungsi jalankan setiap 10 detik. Metode setInterval menghasilkan sebuah pengenal unik untuk menjejak interval tertentu. Anda menugaskan pengenal ini kepada variabel interval. Anda menggunakan pengenal ini untuk menghentikan animasi ketika citra telah selesai membesar.

Fungsi jalankan, yang didefinisikan pada baris 28-42, menambah tinggi citra dengan nilai kecepatan dan memperbarui lebarnya untuk menjaga konsistensi aspek rasio. Karena fungsi jalankan dipanggil tiap 10 milidetik, penambahan ini terjadi secara berulang untuk menciptakan efek pembesaran teranimasi.

<?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>Viewer Sampul Buku Sianipar</title>

<style type = "text/css">

.thumbs { width: 192px;

height: 370px;

padding: 5px;

float: left }

.mainimg { width: 289px;

padding: 5px;

float: left }

.imgSampul { height: 373px }

img { border: 1px solid black }

</style>

<script type = "text/javascript">

<!--

var interval = null; //menjejak interval

var kecepatan = 6; // menentukan kecepatan animasi

var hitung = 0; // ukuran citra selama animasi

// dipanggil secara berulang untuk menganimasi sampul buku

function jalankan()

{

hitung += kecepatan;

// menghentikan animasi ketika citra cukup besar

if ( hitung >= 375 )

{

window.clearInterval( interval );

interval = null;

} // akhir if

var citraBesar = document.getElementById( "imgSampul" );

citraBesar.style.width = .7656 * hitung + "px";

citraBesar.style.height = hitung + "px";

} // akhir fungsi jalankan

// menyisipkan citra sesuai pada area citra utama dan

// memulai animasi

function tampil( filecitra)

{

if ( interval )

return;

var citraBesar = document.getElementById( "imgSampul" );

var simpulBaru = document.createElement( "img" );

simpulBaru.id = "imgSampul";

simpulBaru.src = "ukuranpenuh/" + filecitra;

simpulBaru.alt = "Citra Besar";

simpulBaru.className = "imgSampul";

simpulBaru.style.width = "0px";

simpulBaru.style.height = "0px";

citraBesar.parentNode.replaceChild( simpulBaru, citraBesar );

hitung = 0; // memulai citra pada ukuran 0

interval = window.setInterval( "jalankan()", 10 ); // animasi

} // akhir fungsi tampil

// -->

</script>

</head>

<body>

<img id = "imgSampul" src = "ukuranpenuh/buku1.jpg"

alt = "Citra Sampul Penuh" class = "imgSampul" />

</div>

<img src = "thumbs/buku1.jpg" alt = "buku1"

onclick = "tampil( 'buku1.jpg' )" />

<img src = "thumbs/buku2.jpg" alt = "buku2"

onclick = "tampil( 'buku2.jpg' )" />

<img src = "thumbs/buku3.jpg" alt = "buku3"

onclick = "tampil( 'buku3.jpg' )" />

<img src = "thumbs/buku4.jpg" alt = "buku4"

onclick = "tampil( 'buku4.jpg' )" />

<img src = "thumbs/buku5.jpg" alt = "buku5"

onclick = "tampil( 'buku5.jpg' )" />

<img src = "thumbs/buku6.jpg" alt = "buku6"

onclick = "tampil( 'buku6.jpg' )" />

</div>

</body>

</html>

Gambar 9.4 Gaya-gaya dinamis untuk animasi

Baris 30 menambahkan nilai dari kecepatan (dideklarasikan dan diinisialisasi dengan 6 pada baris 24) pada hitung, yang menjejak kemajuan animasi dan menentukan ukuran terkini dari citra. Jika citra telah membesar menjadi ukuran penuh dengan height (35), maka baris 35 akan menggunakan metode clearInterval dari objek window untuk menghentikan pemanggilan repetitif atas metode jalankan. Anda melewatkan pengenal interval kepada clearInterval pada baris 61.

Baris 39 mendapatkan citra dan baris 40-41 menetapkan properti width dan height dari CSS. Perhatikan bahwa baris 40 mengalikan hitung dengan sebuah faktor penskala .7656 untuk menjaga konsistensi rasio citra.

Algoritma, Struktur Data, dan Pemrograman

Menu

Sunday, December 25, 2016

Bab 9. Pemrograman Internet

No comments:

Post a Comment