LAPORAN RESMI DHTMLPRAKTIKUM DESAIN & PEMROGRAMAN WEB

3 D3 IT B

SISTA ANINDYA AISYAH7410030044

chyztha@student.eepis-its.edu

Politeknik Elektronika Negeri Surabaya (PENS) 2012

1. Hello WorldSource Code .html:

Output Design:

Analisa:Dalam percobaan ini terdapat JavaScript untuk menampilkan heading 1 dengan tulisan “Hello World!” (lihat line 7-9).

2. Jumlah link anchorSource Code .html:

Sista Anindya Aisyah7410030044

Output Design:Pada saat source code .html diatas dieksekusi, maka awal tampilan browser adalah seperti ini:

Terdapat link UPT Jaringan yang apabila diklik akan masuk ke direktori jaringan/ seperti dibawah ini:

Analisa:Didalamnya terdapat JavaScript untuk menghitung jumlah link anchors-nya (lihat line 14-16). Link anchors terlihat ada simbol kuning-kuning seperti gambar dibawah ini...

Link anchors dalam halaman ini ada 3 buah. Fungsi dari link achors ini hampir sama dengan fungsi link biasa, hanya saja jangkauannya lebih pendek. Link anchors ini digunakan untuk menghubungkan ke bagian tertentu dalam satu web/blog yang sama.

Sista Anindya Aisyah7410030044

3. innerHTML dari link anchor pertama dalam dokumenSource Code .html:

Output Design:

Analisa:Terdapat pendeklarasian link anchor seperti yang terlihat pada source

code .html pada line 7 sampai 9.

Kemudian terdapat JavaScript untuk menampilkan innerHTML link anchor pertama, yaitu dimulai dari indeks ke 0 (lihat line 13 pada source code .html)

Sista Anindya Aisyah7410030044

4. Tanggal dan waktu terakhir dokumen diperbaharuiSource Code .html:

Output Design:Pada awal source code diatas dijalankan, maka tampilannya seperti ini:

Untuk melihat perubahan yang lebih jelas, saya sedikit memodifikasi file/dokumen ini dalam beberapa hari kedepan, sehingga terlihat tanggal dan waktu terakhir dokumen diperbaharui:

Analisa:Pada gambar pertama, yang muncul adalah tanggal 16 Oktober 2012 pukul 08:33:31 karena memang pada saat awal source code dibuat langsung dieksekusi (tanpa ada perubahan sedikitpun). Setelah seminggu kemudian saya mencoba mengeksekusi ulang dokumen, maka terlihat adanya perubahan pada tanggal dan waktu-nya file/dokumen terakhir diperbaharui.

Sista Anindya Aisyah7410030044

5. Perbedaan write() dan writeln()Source Code .html:

Output Design:

Analisa:Dalam percobaan ini, terlihat jelas penggunaan perintah write() dan writeln(). Perintah write() tidak memberikan baris baru pada setiap statement (lihat source code line 10-11). Berbeda dengan perintah writeln() yang secara otomatis memberikan baris baru pada setiap statement (line 17-18).

Sista Anindya Aisyah7410030044

6. Mengganti attribute target dari sebuah linkSource Code .html:

Output Design:Pada awal source code diatas dijalankan, maka tampilannya seperti ini:

Terdapat sebuah link yang menghubungkan ke situs www.eepis-its.edu, dan sebuah button. Pertama, kita coba klik dulu link-nya...

Sista Anindya Aisyah7410030044

Maka tab tersebut akan langsung memunculkan situs dari www.eepis-its.edu

Berbeda hal-nya apabila sebelum mengKlik link tersebut kita klik dahulu button yang ada.

Setelah kita klik button-nya, lalu kita klik lagi link website PENS tersebut maka akan muncul situs dari website PENS pada tab baru disebelahnya...

Analisa:Terdapat button Change Target yang berfungsi untuk memanggil fungsi changeTarget() (line 14). Fungsi ini bertujuan untuk mengubah target dalam pembukaan web page yang baru (line 8). Target=”_blank” ini maksudnya adalah membuka webpage baru, pada tab yang baru disebelahnya.

Sista Anindya Aisyah7410030044

7. Mereset formSource Code .html:

Output Design:Awal source code .html diatas diklik, maka tampilan akan seperti ini. Terdapat sebuah form sederhana yang terdiri dari 2 text box dan sebuah button.

Sista Anindya Aisyah7410030044

Kemudian kita isi kedua text box tersebut...

...pada saat kita klik button Reset form, maka form yang telah terisi sebelumnya akan ter-reset (kembali ke keadaan awal sebelum diisi)

Analisa:Terdapat sebuah form dengan nama “frm1” (line 14), yang terdiri dari 2 text box dan sebuah button Reset. Button reset ini berfungsi untuk memanggil fungsi formReset() (line 17). Dengan perintah JavaScript document.getElementById(“frm1”).reset(); maka seluruh isian yang ada pada form ini akan menjadi kosong (kembali ke keadaan awal sebelum diisi).

Sista Anindya Aisyah7410030044

8. Submit formSource Code .html:

Output Design:Awal source code diatas dijalankan, maka akan tampil seperti berikut. Terdapat 2 text box dan sebuah button Submit form.

Kita isi form tersebut...

Sista Anindya Aisyah7410030044

..setelah itu klik button Submit form:

Analisa:Terdapat error, “File not found” karena memang tidak ada file form_action.asp nya. Saya tidak membuat file .asp-nya (lihat source code line 15).

9. Mengganti attribute src pada iFrame

Sista Anindya Aisyah7410030044

Source Code .html:

Output Design:Awal source code diatas dijalankan maka tampilannya adalah sebagai berikut. Terdapat sebuah frame dengan source link dari www.eepis-its.edu (line 13) dan sebuah button Change Source.

Setelah diklik button Change Source, maka tampilannya didalam iFrame akan berubah menjadi:

Analisa:

Sista Anindya Aisyah7410030044

Terdapat iFrame dengan id “myframe” yang didalamnya diisi source link dari www.eepis-its.edu (lihat line 13). Juga terdapat button Change Source, yang apabila diklik akan memanggil fungsi changeSrc(). Fungsi changeSrc() ini berfungsi untuk mengganti source pada iFrame. Yang semula source iFrame adalah www.eepis-its.edu akan berubah menjadi http://lecturer.eepis-its.edu apabila diklik (lihat line 8).

10. Event onClickSource Code .html:

Output Design:Pada saat awal source code .html diatas diklik, maka tampilannya seperti berikut:

Terdapat 2 field. Field pertama telah diisi string bertuliskan “Hello World!”. Field kedua kosong. Dan terdapat sebuah button Copy Text.

Pada saat button Copy Text tersebut diklik maka...

Analisa:

Sista Anindya Aisyah7410030044

Percobaan diatas adalah percobaan untuk mengcopy sebuah teks. Pada field1 telah diisi nilai string “Hello World” (line 13). Kemudian terdapat sebuah button Copy Text untuk memanggil fungsi copyText() (line 16). Fungsi copyText() ini adalah untuk mengopy teks dari field1 (yang telah mempunyai nilai string tadi) ke field 2 (yang masih kosongan), lihat line 8.

11. onMouseOver dan onMouseOut pada sebuah gambarSource Code .html:

Output Design:Pada awal source code dijalankan, tampilan akan menjadi seperti ini:

...pada saat kita mengarahkan cursor/mouse ke arah gambar tersebut, ukuran gambarnya akan menjadi lebih besar:

Sista Anindya Aisyah7410030044

Analisa:Pada awal dijalankan, ukuran gambar adalah 32x32 piksel (terdapat dalam fungsi normalImg()), karena termasuk onMouseOut. Akan tetapi ketika mouse diarahkan ke arah gambar (onMouseOver) maka akan memanggil fungsi bigImg() yang mengubah ukuran gambar menjadi 64x64 piksel. Jika mouse ditarik keluar dari gambar lagi, maka ukuran akan menjadi 32x32 piksel lagi (kembali ke ukuran normal yang telah diinisialisasi).

12. Menghapus option dari dropdown listSource Code .html:

Output Design:Awal source code diatas dijalankan, maka tampilannya seperti ini:

Sista Anindya Aisyah7410030044

Terdapat 4 drop down list, yang terdiri dari Apple, Pear, Banana, dan Orange. Setelah itu kita pilih salah 1 untuk menghapus pilihan, misal Banana.

Setelah dipilih Banana, klik button Remove selected option yang berada disebelahnya

Maka, apabila kita lihat kembali menu drop down-nya maka opsi Banana sudah terhapus...

Analisa:Terdapat id “mySelect” untuk pilihan Apple, Pear, Banana, dan Orange. Juga terdapat button Remove selected option yang bertugas untuk memanggil fungsi removeOption() (line 21). Fungsi removeOption() ini adalah untuk menghapus opsi yang kita pilih tadi, dengan mengambil element dengan id “mySelect” tadi (line 8-9).

13. Menghapus baris pada sebuah tabelSource Code .html:

Sista Anindya Aisyah7410030044

Output Design:Awal tampilan source diatas saat pertama kali dijalankan...

Coba diklik button Delete pada Row 2, maka:

Analisa:Terdapat 3 baris pada sebuah tabel diatas dimana masing-masing tabel terdapat sebuah button delete yang nantinya akan memanggil fungsi deleteRow(). Didalam

Sista Anindya Aisyah7410030044

fungsi deleteRow() ini terdapat statement yang bertugas untuk mendelete baris dalam sebuah tabel yang dipilih user (lihat line 6-10).

14. Menambah baris pada sebuah tabelSource Code .html:

Output Design:Pada awal source code diatas dijalankan, tampilan akan seperti ini. Terdapat tabel dengan 3 baris dan 2 kolom.

Jika kita mengKlik button Insert Row-nya, maka akan disisipkan sebuah baris baru diatasnya:

Sista Anindya Aisyah7410030044

Analisa:Terdapat sebuah button Insert row yang bertugas untuk memanggil fungsi insRow(). Didalam fungsi insRow() terdapat beberapa statement untuk menambahkan baris baru yang juga disesuaikan dengan jumlah kolom pada tabel tersebut (lihat line 8-12).

15. Mengganti isi dari sebuah cell tabelSource Code .html:

Output Design:

Sista Anindya Aisyah7410030044

Pada awal source code diatas diklik, maka tampilan akan menjadi seperti berikut. Terdapat sebuah tabel dengan 3 baris dan 2 kolom, dan juga sebuah button Change content...

...pada saat button Change content tersebut diklik maka, baris pertama kolom pertama akan berubah isi/content-nya menjadi:

Analisa:Terdapat sebuah button Change content yang bertugas untuk memanggil fungsi changeContent() (line 29). Didalam fungsi changeContent tersebut terdapat beberapa statement untuk mengganti isi/konten tabel pada baris tertentu. Dalam percobaan ini adalah mengubah isi/konten pada baris pertama, berarti indeks array rows-nya diisi [0] (lihat line 8), dan isi/konten yang baru dituliskan pada .innerHTML-nya (lihat line 9).

Kesimpulan:

“...DHTML merupakan perpaduan antara HTML, CSS,

dan JavaScript..”

Sista Anindya Aisyah7410030044