daftarisisi.ilkom.unsri.ac.id/.../2018/11/praktikum-pemrograman-web-i-fix.pdf ·...

Daftar Isi

Halaman Depan..........................................................................................................Halaman Pengesahan .................................................................................................

Daftar Isi ....................................................................................................................

Modul 1 : Dasar-Dasar HTML .................................................................................

Modul 2 : Link, Frame dan Tabel .............................................................................

Modul 3 : Interaktivitas Dasar (Form dan Gambar) ................................................

Modul 4 : Style Sheet ................................................................................................

Modul 5 : Javascript : Dasar, Variabel dan Fungsi ...................................................

Modul 6 : Javascript : Percabangan dan Perputaran .................................................

Modul 7 : Javascript : Obyek String, Date dan Array ...............................................

Modul 8 : Javascript : Penanganan Browser .............................................................

Modul 9 : Javascript : Gambar, Frame, Form dan Client .........................................

Modul 10 : Javascript : Pemrograman Game Sederhana ..........................................

Lampiran : Atribut CSS ............................................................................................

3

12

3

4

12

19

25

30

35

39

47

53

60

65

MODUL 1DASAR-DASAR HTML

RINGKASANDalam praktikum kali ini, Anda akan mempelajari penggunaan dari beberapa tagdasar yang hampir akan selalu digunakan dalam setiap praktikum Anda nantinya.Perhatikan daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halamanHTML.Tag HTML dasar

Start Tag<html><body><h1>-<h6><p><br><hr><!-->

NN3.03.03.03.03.03.03.0

IE3.03.03.03.03.03.03.0

W3C3.23.23.23.23.23.23.2

KegunaanMendefinisikan sebuah dokumen htmlMendefinisikan isi/badan suatu dokumenMendefinisikan heading ke 1 s/d heading ke 6Mendefinisikan sebuah paragrafMenyisipkan sebuah line breakMendefinisikan sebuah garis horisontalMendefinisikan komentar dalam kode sumber HTML

Setelah itu, Anda akan mempelajari penggunaan dari beberapa tag yang digunakandalam melakukan pemformatan tampilan halaman web supaya lebih sesuai dengankeinginan atau agar lebih rapi dan terstruktur. Perhatikan beberapa daftar tag dibawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapadiantaranya telah dihilangkan dari daftar tag HTML standar, namun masihmemungkinkan untuk ditampilkan pada beberapa browser tertentu atau browserlama.Tag untuk pemformatan teks dasar

Start Tag<b><big><em><i><small><strong><sub><sup><ins><del>

NN3.03.03.03.03.03.03.03.0

IE3.03.03.03.03.03.03.03.04.04.0

W3C3.23.23.23.23.23.23.23.24.04.0

KegunaanMendefinisikan teks tebalMendefinisikan teks yang lebih besarMendefinisikan teks yang dimiringkanMendefinisikan teks yang dimiringkanMendefinisikan teks yang lebih kecilMendefinisikan teks tebalDefines subscripted textMendefinisikan teks yang posisinya lebih ke atasMendefinisikan teks yang bergaris bawahMendefinisikan teks yang hendak dihapus

<s><strike><u>

Dihilangkan. Gunakan saja <del>Dihilangkan. Gunakan saja <del>Dihilangkan. Gunakan saja style

Tag untuk tampilan ‘hasil keluaran komputer’

Start Tag NN IE W3C Kegunaan<code><kbd>

3.0 3.03.0 3.0

3.23.2

Mendefinisikan teks kode komputerMendefinisikan teks dari keyboard

4

<samp><tt><var><pre><listing><plaintext><xmp>

3.0 3.03.0 3.03.0 3.03.0 3.0

3.23.23.23.2

Mendefinisikan teks contoh kode komputerMendefinisikan teks model teletypeMendefinisikan sebuah variabelMendefinisikan teks preformattedDihilangkan. Gunakan saja <pre>Dihilangkan. Gunakan saja <pre>Dihilangkan. Gunakan saja <pre>

Tag untuk Citation, Quotation, dan Definisi

Start Tag<abbr><acronym><address><bdo><blockquote><q><cite><dfn>

NN IE

4.04.0 4.0

3.0 3.04.0

3.0 3.03.0

W3C4.04.03.24.03.24.03.23.2

KegunaanMendefinisikan suatu kependekanMendefinisikan suatu singkatanMendefinisikan suatu elemen alamatMendefinisikan arah teksMendefinisikan quotation panjangMendefinisikan quotation pendekMendefinisikan suatu kutipanMendefinisikan suatu istilah

Contoh tag untuk Entitas karakter

Tampilan Deskripsispasi kosong

Nama Entitas

Nomor Entitas

<>&"'¢£¥§©®×÷

kurang darilebih daridan (ampersand)tanda petik/kutip (quotation mark)koma atas (apostrophe)CentPoundYenSectionCopyrightregistered trademarkMultiplicationDivision

<>&"

¢£¥§©®×÷

<>&"'¢£¥§©®×÷

Ketika Anda menulis suatu dokumen, mungkin terkadang Anda menuliskan kalimatdalam bentuk poin-poin yang menerangkan tentang suatu hal. Dalam suatu halamanweb, terkadang Anda juga ingin melakukan hal yang sama. Terdapat tag khususuntuk penulisan dalam format poin-poin, perhatikan daftar di bawah ini.Tag untuk list

Start Tag<ol><ul><li><dl>

NN3.03.03.03.0

IE3.03.03.03.0

W3C3.23.23.23.2

KegunaanMendefinisikan sebuah list orderedMendefinisikan sebuah list unorderedMendefinisikan sebuah item dalam listMendefinisikan sebuah list definisi

5

<dt> 3.0 3.0 3.2 Mendefinisikan sebuah istilah list definisi<dd> 3.0 3.0 3.2 Mendefinisikan sebuah keterangan list definisi<dir> Dihilangkan. Gunakan saja <ul><menu> Dihilangkan. Gunakan saja <ul>

LATIHANDalam modul ini Anda akan berlatih untuk menggunakan berbagai tag dasar untukpemrograman web menggunakan HTML. Ketikkan setiap kelompok tag dalamsebuah file, simpan dalam folder Anda sendiri yang telah ditentukan, kemudianjalankan di web browser yang telah terinstall. Ketikkan setiap kode sumber apaadanya terlebih dahulu (termasuk spasi kosong). Perhatikan hasil tampilannya,kemudian belajar untuk memodifikasi setiap kelompok tag untuk mengetahui maksuddari setiap baris tag HTML yang Anda ketikkan. Jangan lupa untuk menyimpansetiap modifikasi Anda sebelum menjalankan ulang di dalam browser.Silakan mencoba juga tag yang masuk dalam kategori “dihilangkan”, untuk melihatseperti apa tampilan yang dapat dimunculkan. Untuk entitas karakter, silakan cobanomor entitas selain yang telah ada pada daftar di atas, untuk melihat entitaskarakter apa saja yang dapat digunakan dalam sebuah halaman web.Bagian terakhir adalah list. List adalah salah satu komponen yang cukup seringdigunakan dalam suatu halaman Web. Dalam bentuk aslinya, mungkin sudah tidakterlalu banyak digunakan lagi dan digantikan fungsinya dengan image (gambar),tetapi ada perlunya juga Anda mengetahui list saat tidak memiliki gambar yang akandijadikan bullet.

1. Paragraf dan line break<html><body><p>Paragraf ini

mengandung banyak spasi dan barisdalam kode sumbernya,

tetapi browserakan mengabaikannya.</p><p>Sedangkan yang ini memiliki spasipanjang.</p><p align=”center”>Jumlah baris dalam setiap paragraf tergantung pada ukuran window browserAnda. Bila Anda mengubah ukuran window browser, jumlah baris dalam paragrafakan berubah.</p><p align=”right”>Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.</p></body></html>

2. Background color dan heading<html><body><body bgcolor="yellow">

6

<p>Perhatikan bahwa halaman ini seharusnya berwarna kuning.</p><h1>Ini adalah heading 1</h1><h2>Ini adalah heading 2</h2><h3>Ini adalah heading 3</h3><h4>Ini adalah heading 4</h4><h5>Ini adalah heading 5</h5><h6>Ini adalah heading 6</h6><p>Gunakan tag heading hanya untuk membuat heading saja. Janganmenggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakantag lain untuk keperluan itu. </p><h1 align="center">Ini adalah heading 1</h1><p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p></body></html>

3. Garis horisontal dan komentar tersembunyi<html><body><p>Tag hr mendefinisikan sebuah garis horisontal, default-nya adalah ratatengah:</p><hr color=”green” ><p align=”left”>Terdapat paragraf disini</p><hr width=”80%” size=”10” align=”left”><p align=”right”>Terdapat paragraf disini</p><hr width=”400” size=”6” align=”right” color=”red”><center><p>Terdapat paragraf disini</p></center><!— Ini adalah komentar yang tidak akan ditampilkan di layar browser --></body></html>

4. Pemformatan teks<html><body><b>Teks ini tebal </b><br><strong> Teks ini juga tebal </strong><br><big> Teks ini hurufnya besar </big><br><em> Teks ini miring </em><br><i> Teks ini juga miring </i><br><small> Teks ini hurufnya kecil </small><br>Teks ini berisi <sub> subscript </sub><br>Teks ini berisi <sup> superscript </sup></body></html>

7

5. Teks yang di-preformat<html><body><pre>Ini adalah

Teks yang di-preformat.Preformat akan menampilkan spasi dan

line break apa adanya.</pre><p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p><pre>for i = 1 to 10

print inext i</pre></body></html>

6. Tag “keluaran komputer”, alamat, singkatan, dan kependekan<html><body><code>Kode Komputer </code><br><kbd>Masukan dari keyboard</kbd><br><tt>Teks jenis teletype </tt><br><samp>Teks contoh</samp><br><var>Variabel komputer </var><br><p><b>Catatan:</b> Tag-tag tersebut biasanya digunakan untuk menampilkan kodekomputer/ pemrograman.<p><address>FMIPA UAD<br>Jl. Prof Dr Soepomo<br>Janturan<br>Yogyakarta</address><br><abbr title="Universitas Ahmad Dahlan">UAD</abbr><br><acronym title="World Wide Web">WWW</acronym><p>Atribut title digunakan untuk menampilkan versi yang dieja ketika pointermouse berada di atas kependekan atau singkatan.</p><p>Dalam IE 5, hanya elemen acronym yang mau bekerja.</p><p>Dalam Navigator 6.2, elemen abbr dan acronym keduanya dapatbekerja.</p></body></html>

7. Arah teks dan quotation<html>

8

<body><p>Bila browser Anda mendukung kemampuan bi-directional override (bdo), barisberikut ini akan dituliskan dari kanan ke kiri (rtl):</p><bdo dir="rtl">Anggap saja ini tulisan bahasa Arab</bdo><br>Ini adalah contoh quotation panjang:<blockquote>Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotationpanjang. Ini adalah quotation panjang. Ini adalah quotation panjang.</blockquote>Ini adalah contoh quotation pendek:<q>Ini adalah quotation pendek.</q><p>Menggunakan elemen blockquote, browser menyisipkan line break dan margin,tetapi elemen q tidak akan menampilkan apapun yang khusus.</p></body></html>

8. Teks yang terhapus, disisipkan, dan entitas karakter<html><body><p>satu dosin adalah<del>duapuluh</del><ins>duabelas</ins>buah</p><p>Hampir semua browser akan memberi garis (overstrike) pada teks yang(maksudnya) terhapus dan teks yang disisipkan akan diberi garis bawah.</p><p>Tetapi beberapa browser yang lama akan menampilkan teks yang terhapus atauteks disisipkan sebagai suatu teks biasa (plain text).</p><p>Ini adalah entitas karakter: </p><p>Coba untuk mengganti 000 dengan suatu angka (misalnya 169), dan muat ulanghalaman Anda agar Anda dapat melihat hasil dari perubahan yang dilakukan.</p></body></html>

9. List unordered dan ordered<html><body><h4>Sebentuk list unordered:</h4><ul>

9

<li>Kopi</li><li>Teh</li><li>Susu</li></ul><br><h4>Sebentuk list ordered:</h4><ol><li>Kopi</li><li>Teh</li><li>Susu</li></ol></body></html>

10. Jenis-jenis list ordered<html><body><h4>List bernomor:</h4><ol><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ol><h4>List dengan huruf:</h4><ol type="A"><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ol><h4>List dengan huruf kecil:</h4><ol type="a"><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ol><h4>List dengan angka romawi:</h4><ol type="I"><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ol><h4>List dengan angka romawi kecil:</h4><ol type="i"><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ol></body></html>

10

11. Jenis-jenis list unoredered<html><body><h4>List dengan bullet berbentuk disc:</h4><ul type="disc"><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ul><h4>List dengan bullet berbentuk lingkaran:</h4><ul type="circle"><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ul><h4>List dengan bullet berbentuk kotak:</h4><ul type="square"><li>Apel</li><li>Pisang</li><li>Lemon</li><li>Jeruk</li></ul></body></html>

12. List bersarang dan list definisi<html><body><h4>Sebuah list bersarang:</h4><ul><li>Kopi</li><li>Teh<ul><li>Teh hitam</li><li>Teh Hijau</li></ul></li><li>Susu</li></ul><br><h4>Contoh list definisi:</h4><dl><dt>Kopi</dt><dd>Minuman panas hitam</dd><dt>Susu</dt><dd>Minuman dingin putih</dd></dl></body></html>

11

Atribut Target Kegunaantarget="_blank" Memuat dokumen baru ke dalam window baru yang

kosongtarget="_self" Memuat dokumen baru ke dalam window yang sama

dengan anchor (default)target="_parent" Memuat dokumen baru ke dalam parent frame (bila

menggunakan frame)target="_top" Memuat dokumen baru ke dalam keseluruhan window

browser (cara yang umum digunakan untuk keluar dariframe)

Start Tag NN IE W3C Kegunaan<table> 3.0 3.0 3.2 Mendefinisikan sebuah tabel<th> 3.0 3.0 3.2 Mendefinisikan sebuah header tabel<tr> 3.0 3.0 3.2 Mendefinisikan suatu barisan dalam tabel<td> 3.0 3.0 3.2 Mendefinisikan suatu sel dalam table<caption> 3.0 3.0 3.2 Mendefinisikan sebuah caption untuk tabel

Start Tag NN IE W3C Kegunaan<frameset> 3.0 3.0 4.0 Mendefinisikan sebuah himpunan frame<frame> 3.0 3.0 4.0 Mendefinisikan sebuah sub window (sebuah frame)

<noframes> 3.0 3.0 4.0 Mendefinisikan sebuah bagian noframe untuk browseryang tidak dapat menangani frame

<iframe> 6.0 3.0 4.0 Mendefinisikan sebuah inline sub window (frame)

Start Tag NN IE W3C Kegunaan<a> 3.0 3.0 3.2 Mendefinisikan sebuah anchor

MODUL 2LINK, FRAME DAN TABEL

RINGKASANSitus web biasanya tidak hanya terdiri atas 1 halaman saja (homepage, halamanawal/ pembuka). Bila suatu situs terdiri atas lebih dari 1 halaman, situs tersebut pastimenggunakan hyperlink. Perhatikan bahwa tag untuk link memang hanya 1, tetapimemiliki beberapa atribut tambahan agar link tersebut memberikan fungsi yangberbeda. Untuk keperluan modifikasi tampilan agar link tidak hanya terlihat sebagailink standar, nantinya akan disampaikan dalam materi khusus CSS. Tampilan linkjuga dapat diubah sedikit lewat modifikasi tag <body> dalam suatu file HTML.

Sebuah halaman web yang ditampilkan dalam suatu window browser dapat dipecahdalam beberapa tampilan yang berbeda. Masing-masing bagian tampilan dapatberisi sebuah tampilan dari file HTML, sehingga dalam satu window browser dapatdibuka beberapa file HTML sekaligus. Untuk dapat menampilkan beberapa file HTMLdalam satu window browser, dibutuhkan tag untuk membuat window menjadibeberapa bingkai (frame). Di bawah ini adalah tag untuk membentuk frame padawindow browser.

Dalam suatu halaman web, pemformatan saja tidaklah cukup untuk membentuktampilan web yang rapi dan enak dipandang. Supaya tampilannya lebih terstruktur,Anda dapat menggunakan tabel. Perhatikan tag-tag di bawah ini.

12

<colgroup> 3.0 4.0 Mendefinisikan sekelompok kolom dalam tabel

<col> 3.0 4.0 Mendefinisikan nilai atribut untuk satu atau lebih kolomdalam sebuah tabel

<thead> 4.0 4.0 Mendefinisikan suatu head tabel<tbody> 4.0 4.0 Mendefinisikan suatu badan tabel<tfoot> 4.0 4.0 Mendefinisikan suatu footer tabelLATIHANSilakan mencoba kode-kode contoh pada modul ini, kemudian silakan mencobavariasi penggunaannya. Gunakan alamat tujuan yang berbeda dari contoh yang ada.Bila tidak terdapat koneksi ke Internet, gunakan alamat lokal saja terlebih dahulu.Alamat lokal juga mempercepat akses Anda, sehingga hasilnya lebih cepat tampil dilayar monitor. Bila Anda ingin menggunakan halaman tujuan secara lokal, sebaiknyaAnda membuat file HTML tambahan dengan nama file yang disesuaikan agar dapatdipanggil. Isi file HTML tambahan terserah Anda, yang penting bisa digunakan untukmenunjukkan bahwa tag Anda bekerja seperti seharusnya.Untuk mencoba kode HTML tentang frame, silakan menyiapkan file-file yangdiperlukan sesuai dengan nama-nama file yang telah disebutkan dalam contoh kodedalam modul ini. Simpan di tempat yang sesuai dengan penunjukan frame Anda,disarankan disimpan dalam folder yang sama tempat Anda menyimpan file definisiframe. Sebagai awalan, sebaiknya Anda menggunakan browser IE, sebelummencobakannya ke Navigator atau Opera (bila ada).Latihan menggunakan tabel mengharuskan Anda mencoba bentuk-bentuk yang adadalam contoh, kemudian silakan mencoba-coba sendiri variasi contoh denganmenambahkan atau mengurangi sel dan isinya. Variasikan juga parameternya, agarAnda tahu setiap bagian penentu tampilan tabel.

1. Link biasa, link gambar, link ke window baru, dan link internal<html><body><p><a href="halaman.htm">Teks ini</a> adalah sebuah link ke suatu halamandalam situs Web.</p><p><a href="www.microsoft.com">Teks ini</a> adalah sebuah link ke halaman awalSitus Microsoft di World Wide Web.</p><p><a href="#C4">Melompat ke bagian lain dalam halaman ini.</a></p><p>Anda dapat juga menggunakan gambar sebagai sebuah link:<a href="linkgambar.htm"><img border="0" src="tombol.gif" width="65" height="38"></a></p><a href="baru.htm" target="_blank">halaman Berikutnya</a><p>Bila Anda memberikan atribut target sebuah link menjadi "_blank",

13

Link tersebut akan membuka sebuah window browser baru.</p><p><p> Ada tulisan disini (lakukan copy dan paste baris ini untuk baris berikutnya)</p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p><a name="C4"><h2> Disinilah tujuan lompatan link internal anda </h2></a><p> Ada tulisan disini </p><p> Ada tulisan disini </p><p> Ada tulisan disini </p></body></html>

2. Link ke e-mail<html><body><p>Ini adalah link ke e-mail:<a href="mailto:[email protected]?Subject=Halo%20lagi">Kirim e-mail</a></p><p><b>Catatan:</b> Spasi di antara setiap kata sebaiknya digantikan dengan tanda%20 untuk <b>memastikan</b> bahwa browser akan menampilkan teks Andadengan benar.</p><p>Ini juga contoh link ke e-mail:<ahref="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=Apakah%20Anda%20mau%20diundang%20ke%20pesta%20malam%20minggu?">Kirim e-mail!</a></p></body></html>

3. Frameset (horisontal dan vertikal)<html><frameset rows="50%,50%"><frame src="frame1.htm"><frameset cols="25%,75%"><frame src="frame2.htm"><frame src="frame3.htm">

14

</frameset></frameset></html>

4. Frameset dengan atribut no-resize = “true”<html><frameset rows="50%,50%"><frame noresize="true" src="frame1.htm"><frameset cols="25%,75%"><frame noresize="true" src="frame2.htm"><frame noresize="true" src="frame3.htm"></frameset></frameset></html>

5. Frame inline<html><body><iframe src ="default.htm"></iframe><p>Beberapa browser lama tidak mendukung iframe.</p><p>Bila browser yang Anda pakai sekarang tidak mendukung, iframe tak akanterlihat.</p></body></html>

6. Membuat tabel<html><body><p>Setiap tabel dimulai dengan tag table.Setiap baris tabel dimulai dengan tag tr.Setiap data dalam tabel dimulai dengan tag td.</p><h4>Satu baris satu kolom dengan border normal:</h4><table border="1"><tr><td>100</td></tr></table><h4>Satu baris dan tiga kolom dengan border tebal:</h4><table border="8"><tr><td>100</td><td>200</td><td>300</td></tr></table><h4>Dua baris dan tiga kolom dengan border sangat tebal:</h4><table border="15"><tr><td>100</td><td>200</td><td>300</td></tr>

15

<tr><td>400</td><td>500</td><td>600</td></tr></table><h4>Tabel ini tidak memiliki border:</h4><table border="0"><tr><td>100</td><td>200</td></tr><tr><td>300</td><td>400</td></tr></table></body></html>

7. Sel kosong dalam tabel<html><body><table border="1"><tr><td>Teks</td><td>Teks</td></tr><tr><td></td><td>Teks</td></tr></table><p>Seperti yang Anda lihat, salah satu sel tidak memiliki border. Itu terjadi karena seltersebut kosong. Cobalah untuk menyisipkan sebuah spasi ke dalam seltersebut. Ternyata tetap saja tidak memiliki border.</p><p>Cara yang benar adalah dengan menyisipkan spasi non-breaking di dalam sel.</p><p>Spasi non-breaking adalah sebuah entitas karakter. Bila Anda tidakmengetahui apa yang disebut karakter entitas, baca kembali materi kuliahtentang hal tersebut.</p><p>Entitas spasi non-breaking dimulai dengan tanda ampersand ("&"),kemudian karakter-karakter "nbsp", dan diakhiri dengan semicolon (";")</p><p></p></body></html>

8. Sel tabel yang diperlebar<html>

16

<body><h4>Sel yang melebar dua kolom:</h4><table border="1"><tr><th>Nama</th><th colspan="2">Telepon</th></tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr></table><h4>Sel yang melebar dua baris:</h4><table border="1"><tr><th>Nama depan:</th><td>Bill Gates</td></tr><tr><th rowspan="2">Telepon:</th><td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table></body></html>

9. Menambahkan latar belakang ke tabel<html><body><h4>Dengan warna latar belakang:</h4><table border="1" bgcolor="red"><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table><h4>Dengan latar belakang gambar:</h4><table border="1" background="../bg.jpg"><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>

17

<h4>Latar belakang pada sel:</h4><table border="1"><tr><td bgcolor="red">Pertama</td><td>Baris</td></tr><tr><td background="../bg.jpg">Kedua</td><td>Baris</td></tr></table></body></html>

18

MODUL 3INTERAKTIVITAS DASAR(FORM DAN GAMBAR)

RINGKASANBila Anda suatu ketika ingin memasukkan informasi ke suatu situs web, maka andamemerlukan fasiiltas khusus untuk keperluan tersebut. Dalam HTML Anda dapatmembuat tampilan halaman untuk menerima masukan dari pengunjung situs,kemudian menyimpannya di situs Anda atau langsung dimunculkan kembali sebagaisuatu halaman. Disinilah perlunya menggunakan form. Perhatikan tag di bawah ini.

Start Tag NN IE W3C Kegunaan<form><input>

3.0 3.0 3.23.0 3.0 3.2

Mendefinisikan sebuah form untuk input dari pengunjungMendefinisikan sebuah field input

<textarea> 3.0 3.0 3.2 Mendefinisikan sebuah text-area (sebuah kontrol masukanteks jenis multi-line)

<label><fieldset><legend>

<select>

4.0 4.04.0 4.04.0 4.0

3.0 3.0 3.2

Mendefinisikan sebuah label ke kontrolMendefinisikan sebuah fieldsetMendefinisikan suatu caption untuk sebuah fieldsetMendefinisikan sebuah list yang dapat dipilih (drop-downbox)

<optgroup> 6.0 4.0 Mendefinisikan sebuah kelompok pilihan<option><button><isindex>

3.0 3.0 3.24.0 4.0

Mendefinisikan sebuah pilihan dalam drop-down boxMendefinisikan sebuah tombolDihilangkan. Gunakan saja <input>

Anda tentu saja tidak ingin membuat halaman web yang hanya berisi teks saja. Agarhalaman web Anda lebih menarik, gunakan unsur grafis berupa gambar. Anda dapatmemanipulasi gambar dalam suatu halaman web sehingga menghasilkan berbagaiefek. Tag di bawah ini digunakan untuk keperluan tersebut.

Start Tag<img><map><area>

NN3.03.03.0

IE3.03.03.0

W3C3.23.23.2

KegunaanMendefinisikan sebuah gambarMendefinisikan sebuah image map (peta gambar)Mendefinisikan sebuah area di dalam suatu image map

LATIHANDisini Anda akan berlatih membuat form dengan segala obyeknya. Tetapi hanyasekedar form untuk mengumpulkan data secara interaktif, tanpa memproses datatersebut. Di bagian ini belum akan dibicarakan tentang pemrosesan data, olehkarena itu silakan mencoba-coba setiap obyek dalam form saja, dengan berbagaicara penempatannya yang memungkinkan.Untuk dapat melihat gambar dalam halaman dokumen Anda, silakan mempersiapkanterlebih dahulu gambar-gambar yang akan digunakan. Untuk gambar bergerak,gunakan saja format animasi GIF. Untuk gambar diam, gunakan format sesuai yangdiperlihatkan dalam kode sumber contoh.

1. Field teks dan password<html><body>

19

<form>Nama depan:<input type="text" name="namadepan"><br>Nama belakang:<input type="text" name="namabelakang"><br>Password:<input type="password" name="password"></form><p>Perhatikan bahwa ketika Anda mengetikkan karakter-karakter dalam suatu fieldpassword, browser akan menampilkan asterisk atau bullet saja, bukannyakarakter yang diketikkan.</p></body></html>

2. Checkbox dan tombol radio<html><body><form>Saya memiliki sebuah sepeda:<input type="checkbox" name="Sepeda"><br>Saya memiliki sebuah mobil:<input type="checkbox" name="Mobil" value="ON"><br>Jenis kelamin Anda?<br>Pria:<input type="radio" name="Sex" value="pria"><br>Wanita:<input type="radio" name="Sex" value="wanita" checked></form><p>Ketika seorang pengguna memberikan klik mouse pada sebuah tombol radio,tombol tersebut terlihat diberi tanda cek, dan semua tombol lain yang beradadalam nama yang sama akan kehilangan tanda cek-nya</p></body></html>

3. Kotak drop down dengan nilai default<html><body><form><select name="mobil"><option value="volvo">Volvo<option value="peugeot">Peugeot<option value="fiat" selected>Fiat<option value="jaguar">Jaguar</select></form>

20

</body></html>

4. Tombol dan fieldset<html><body><fieldset><legend>Informasi kesehatan:</legend><form>Tinggi <input type="text" size="3">Berat <input type="text" size="3"><br><input type="button" value="Ada tombol disini"></form></fieldset><p>Bila tidak terlihat adanya border di sekeliling form input, browser Anda sudahterlalu lama.</p></body></html>

5. Form dengan field input dan tombol submit<html><body><form name="input" action="http://www.w3c.org/form_action.asp" method="get">Masukkan nama depan Anda:<input type="text" name="namadepan" value="Mickey"><br>Masukkan nama belakang Anda:<input type="text" name="namabelakang" value="Mouse"><br><input type="submit" value="Submit"></form><p>Bila Anda meng-klik tombol "Submit", Anda akan mengirim input yangdimasukkan lewat form di atas ke pemroses yang bernama form_action.asp disitus w3c.</p></body></html>

6. Mengirim e-mail dari suatu form<html><body><form action="@" method="post" enctype="text/plain"><h3>Form ini mengirim sebuah e-mail ke W3C.</h3>Nama<br><input type="text" name="nama" value="Nama Anda” size="20"><br>Mail:<br><input type="text" name="mail" value="Mail Anda" size="20"><br>Komentar:<br>

21

<input type="text" name="komentar" value="Komentar Anda" size="40"><br><br><input type="submit" value="Send"><input type="reset" value="Reset"></form></body></html>

7. Menyisipkan gambar latar belakang dan depan<html><body background="background.jpg"><h3>Lihatlah, ada gambar latar belakang!</h3><p>Baik file gambar dengan format gif maupun jpg dapat digunakan sebagailatar belakang HTML.</p><p>Bila gambar yang digunakan lebih kecil dari halaman situs, gambar akanditampilkan berulang-ulang.</p><p>Sebuah gambar dari folder lokal:<img src="gambar1.gif" width="144" height="50"></p><p>Gambar dari folder lain:<img src="../images/gambar2.gif" width="33" height="32"></p><p>Mengambil gambar dari situs lain:<img src="www.yahoo.com/images/ie.gif" width="73" height="68"></p></body></html>

8. Mengatur posisi gambar<html><body><p>Sebuah gambar<img src ="../images/contoh.gif" align="bottom" width="100" height="50">di antara teks</p><p>Sebuah gambar<img src ="../images/contoh.gif" align="middle" width="100" height="50">di antara teks</p><p>Sebuah gambar<img src ="../images/contoh.gif" align="top" width="100" height="50">di antara teks</p><p>Perhatikan bahwa default pengaturan adalah bottom (diletakkan di bagianbawah)</p><p>Sebuah gambar<img src ="../images/contoh.gif" width="100" height="50">

22

di antara teks</p><p><img src ="../images/contoh.gif" width="100" height="50">Sebuah gambar di depan teks</p><p>Sebuah gambar di belakang teks<img src ="../images/contoh.gif" width="100" height="50"></p></body></html>

9. Menampilkan teks alternatif untuk gambar<html><body><img src="../images/gambar.gif" alt="Keterangan" width="32" height="32"><p>Browser text-only hanya akan menampilkan teks dalam atribut "alt", yaituKeterangan".Perhatikan bahwa bilamana Anda membawa pointer mouse di atas gambartersebut maka teks alternatif akan ditampilkan.</p></body></html>

10. Membuat Hyperlink pada gambar dan Image Map<html><body><p>Anda dapat menggunakan gambar sebagai suatu link:<a href="halaman2.htm" ><img border="0" src="gambar1.gif" width="65" height="38"></a></p><p>Gerakkan pointer mouse di atas gambar untuk melihat perbedaan link yangdituju:</p><img src="../images/planet.gif" width=145 height=126 usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" ><area shape="circle" coords="90,58,3" alt="Mercur" href="mercur.htm" ><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" ></map></body></html>

11. Latar belakang dengan warna teks yang sesuai<html><body bgcolor="#d0d0d0"><p>Paragraf ini terlihat enak dibaca karena menggunakan kombinasi warna latarbelakang dan warna teks yang sesuai.</p>

23

</body></html>

12. Latar belakang dengan warna teks yang buruk<html><body bgcolor="#ffffff" text="yellow"><p>Paragraf ini terlihat tidak nyaman dibaca karena menggunakan kombinasi warnalatar belakang dan warna teks yang tidak sesuai.</p></body></html>

24

StartTag

NN IE W3C Kegunaan

<style> 4.0 3.0 3.2 Mendefinisikan style dalam sebuah dokumen

<link> 4.0 3.0 3.2 Mendefinisikan relasi antara dua dokumen yangberhubungan

MODUL 4STYLE SHEET

RINGKASANSetelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tibasaatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untukkeperluan tersebut, Anda dapat menggunakan style sheet/CSS. CSS tidak hanyadapat membuat tampilan nampak lebih baik, tetapi dapat membuat pengembanganhalaman web menjadi jauh lebih efisien karena menghilangkan semua kesulitanyang muncul pada halaman web biasa tanpa style.Style

LATIHANBagian ini mencakup penggunaan CSS untuk mengubah tampilan standar padahalaman web Anda. Tidak semua tag style digunakan disini karena jumlahnya sangatbanyak, silakan Anda cari referensi lain sebagai tambahan untuk mempelajari CSS.Seperti biasa, simpan file-file Anda dalam folder Anda sendiri, kemudian cobalahlangsung untuk melihat hasil setiap contoh, lalu ubahlah isinya untuk melihat variasitampilannya yang memungkinkan. Perhatikan bahwa semua contoh disinimenggunakan CSS internal, silakan Anda berlatih untuk mengubahnya menjadi CSSeksternal. Gunakan sembarang gambar yang dapat Anda temui untuk contoh yangmemerlukan gambar (sesuaikan dulu dengan nama file dalam contoh).

1. Pengaturan latar belakang<html><head><style type="text/css">body{background: #00ff00url("gambar.gif")no-repeat fixedcenter center}</style></head><body><p><b>Catatan:</b>Properti background-attachment dan background-position tidak bisa digunakandalam browser Netscape 4.0.</p><p>Ada teks disini</p><p>Tuliskan sekehendak kalian</p><p>Terserah apa saja</p><p>Yang penting ada tulisannya</p>

25

</body></html>

2. Penanganan font<html><head><style type="text/css">p.normal {font-weight: normal}p.tebal {font-weight: bold}p.teballl {font-weight: 900}p.lengkap{font: italic small-caps 900 12px arial}</style></head><body><p class="normal">Perhatikan paragraf ini</p><p class="tebal">Bandingkan dengan paragraf diatasnya</p><p class="teballl">Bandingkan yang ini juga</p><p class="lengkap">Paragraf dengan semua atribut font dimasukkan</p></body></html>

3. Pembuatan border<html><head><style type="text/css">p.borderous{border-style: double;border-width: 5px 10px 1px medium;border-color: #ff0000#00ff00 #0000ffrgb(250,0,255)}</style></head><body><p class="borderous"><b>Catatan:</b> Properti "border-color" dan "border-width" tidak dikenali olehbrowser Internet Explorer bila digunakan secara langsung. Gunakan properti"border-style" untuk menyiapkan border dalam Internet Explorer.<br>Internet Explorer 5.5 mendukung semua border style. Internet Explorer 4.0 - 5.0tidak mendukung nilai "dotted" dan "dashed" </p></body></html>

4. Pengaturan margin<html><head>

26

</style></head><body><p>Disini Anda menggunakan gambar berukuran kecil sebagai bullet untuk list.Properti outside akan menyebabkan list menjadi lebih rapi bila terdiri atas itemyang berupa kalimat panjang dan window browser berukuran kecil.</p><ul><li>Kopi</li><li>Teh</li><li>Coca Cola</li></ul></body></html>

7. Elemen latar depan dan latar belakang<html><head><style type="text/css">img.x1{position:absolute;left:0;top:0;z-index:1}img.x2{position:absolute;left:0;top:100;z-index:-1}</style></head><body><p><b>Catatan:</b> Netscape 4 tidak mendukung properti "z-index".</p><h1>Sepertinya Heading ini terhalang oleh gambar</h1><img class="x1" src="gambar.bmp" width="100" height="80"><p>Nilai default z-index adalah 0. Z-index 1 memiliki prioritas lebih tinggi,sedangkan Z-index –1 memiliki prioritas lebih rendah.</p><p></p><img class="x2" src="gambar.bmp" width="100" height="80"><p>Sekarang Anda bisa membandingkan dengan tampilan di bagian bawah ini.Apakah masih terhalang gambar?</p></body></html>

8. Mengubah tampilan Link<html><head><style type="text/css">a:link {color: #ff0000}a.one:visited {color: #0000ff}a.one:hover {color: #ffcc00}a.two:visited {color: #0000ff}

28

a.two:hover {font-size: 150%}a.three:visited {color: #0000ff}a.three:hover {background: #66ff66}a.four:visited {color: #0000ff}a.four:hover {font-family: fixedsys}a.five:visited {color: #0000ff; text-decoration: line-through}a.five:hover {text-decoration: overline}</style></head><body><p>Gerakkan pointer mouse di atas link-link di bawah ini untuk membuat linktersebut berubah tampilannya.</p><p><a class="one" href="hlm1.htm"">Mengubah properti color</a></p><p><a class="two" href="hlm2.htm"> Mengubah properti font-size</a></p><p><a class="three" href="hlm3.htm"> Mengubah properti background-color</a></p><p><a class="four" href="hlm4.htm"> Mengubah properti font-family</a></p><p><a class="five" href="hlm5.htm"> Mengubah properti text-decoration</a></p></body></html>

29

Operator Description Example Result+ Addition x=2

x+24

- Subtraction x=25-x

3

* Multiplication x=4x*5

20

/ Division 15/55/2

32.5

% Modulus (division remainder) 5%210%810%2

120

++ Increment x=5x++

x=6

-- Decrement x=5x--

x=4

Operator Example Is The Same As= x=y x=y+= x+=y x=x+y-= x-=y x=x-y*= x*=y x=x*y/= x/=y x=x/y%= x%=y x=x%y

MODUL 5JAVASCRIPT:

DASAR, VARIABEL DAN FUNGSI

RINGKASANSetelah Anda berlatih dan menguasai segi tampilan dari web menggunakan HTMLdan CSS, sudah saatnya Anda berlatih untuk mengenal pemrograman web yangsebenarnya, yaitu pemrograman skrip. Mulai dari tahap ini Anda akan belajarJavaScript sebagai skrip dasar yang dikenal semua browser (skrip pada sisi client).Anda tidak akan langsung melompat belajar skrip dari sisi server, karena skrip darisisi server akan selalu memaksa Anda untuk menggunakan satu produk tertentu(ASP, CF, PHP, dan lain-lain), dan biasanya Anda akan menjadi fanatik pada satuproduk saja tanpa mengetahui kemampuan produk lain. Anda juga tidak akan belajarbahasa pemrograman Java secara khusus, karena Java fokusnya adalahportabilitas, bukan pada web saja. Disamping JavaScript, bilamana waktumemungkinkan Anda nantinya juga akan berlatih menggunakan VBScript (salah satuanggota keluarga Visual Basic yang mencakup VB, VBScript, VBA/macro, ASP,VB.net, dan ASP.net).

Operator Aritmetika

Operator Penunjukan

Operator Perbandingan

Operator Description Example

30

Operator Description Example&& and x=6

y=3

(x < 10 && y > 1) returns true|| or x=6

y=3

(x==5 || y==5) returns false! not x=6

y=3

x != y returns true

== is equal to 5==8 returns false!= is not equal 5!=8 returns true> is greater than 5>8 returns false< is less than 5<8 returns true>= is greater than or equal to 5>=8 returns false<= is less than or equal to 5<=8 returns trueOperator Logika

LATIHANSederhana saja, agar Anda mau membiasakan diri dengan JavaScript, maka Andaharus banyak berlatih mulai dari yang paling dasar. Buatlah semua contoh di bawahini, jalankan untuk melihat hasilnya, dan lakukan modifikasi untuk lebih mengenaldan mengetahui kegunaan skrip yang baru Anda buat.

1. Menuliskan teks<html><body><script type="text/javascript">document.write("Hello World!")</script></body></html>

2. Memformat teks dengan tag HTML<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script></body></html>

3. JavaScript yang diletakkan pada bagian HEAD<html><head><script type="text/javascript">function message(){

31

alert("This alert box was called with the onload event")}</script></head><body onload="message()"></body></html>

4. JavaScript yang diletakkan pada bagian BODY<html><head></head><body><script type="text/javascript">document.write("This message is written when the page loads")</script></body></html>

5. JavaScript eksternal<html><head></head><body><script src="xxx.js"></script><p>The actual script is in an external script file called "xxx.js".</p></body></html>

6. Deklarasi variabel, memberi nilai, dan menampilkannya<html><body><script type="text/javascript">var name = "Hege"document.write(name)document.write("<h1>"+name+"</h1>")</script><p>This example declares a variable, assigns a value to it, and then displays thevariable.</p><p>Then the variable is displayed one more time, only this time as aheading.</p></body></html>

7. Fungsi<html><head><script type="text/javascript">function myfunction(){alert("HELLO")}

32

</script></head><body><form><input type="button"onclick="myfunction()"value="Call function"></form><p>By pressing the button, a function will be called. The function will alert amessage.</p></body></html>

8. Fungsi dengan argumen<html><head><script type="text/javascript">function myfunction(txt){alert(txt)}</script></head><body><form><input type="button"onclick="myfunction('Hello')"value="Call function"></form><p>By pressing the button, a function with an argument will be called. Thefunction will alertthis argument.</p></body></html>

9. Fungsi dengan argumen (lagi)<html><head><script type="text/javascript">function myfunction(txt){alert(txt)}</script></head><body><form><input type="button"onclick="myfunction('Good Morning!')"value="In the Morning"><input type="button"onclick="myfunction('Good Evening!')"value="In the Evening"></form><p>

33

When you click on one of the buttons, a function will be called. The function willalertthe argument that is passed to it.</p></body></html>

10. Fungsi yang mengembalikan suatu nilai<html><head><script type="text/javascript">function myFunction(){return ("Hello, have a nice day!")}</script></head><body><script type="text/javascript">document.write(myFunction())</script><p>The script in the body section calls a function.</p><p>The function returns a text.</p></body></html>

11. Fungsi dengan argumen yang mengembalikan suatu nilai<html><head><script type="text/javascript">function total(numberA,numberB){return numberA + numberB}</script></head><body><script type="text/javascript">document.write(total(2,3))</script><p>The script in the body section calls a function with two arguments, 2 and3.</p><p>The function returns the sum of these two arguments.</p></body></html>

34

MODUL 6JAVASCRIPT:

PERCABANGAN DAN PUTARAN

RINGKASANBagian berikutnya yang masih merupakan dasar dari JavaScript adalah percabangandan putaran. Dapat dikatakan bahwa percabangan dan putaran merupakan salahsatu inti metode dalam semua bahasa pemrograman yang ada di dunia, karenadengan percabangan dan putaran akan dihasilkan sebuah program yang dinamis,dan bukan program yang linear serta bersifat statik. Karena JavaScript merupakansalah satu cara dalam melakukan pemrograman web di sisi client, maka JavaScriptjuga memiliki kemampuan ini.

LATIHANDisini Anda akan berlatih melakukan membentuk percabangan (pemilihan berdasarkondisi) dan membuat putaran dalam skrip. Jalankan contoh-contoh di bawah ini,kemudian perhatikan baik-baik dasar penggunaan dari setiap elemen untukpercabangan dan perulangan yang disertakan. Cobalah untuk mengembangkannyasendiri dalam bentuk modifikasi.

1.<html><body><script type="text/javascript">var d = new Date()var time = d.getHours()if (time < 10){document.write("<b>Good morning</b>")}</script><p>This example demonstrates the If statement.</p><p>If the time on your browser is less than 10, you will get a "Good morning"greeting.</p></body></html>

2.<html><body><script type="text/javascript">var d = new Date()var time = d.getHours()if (time < 10){document.write("<b>Good morning</b>")}else{

35

document.write("<b>Good day</b>")}</script><p>This example demonstrates the If...Else statement.</p><p>If the time on your browser is less than 10, you will get a "Good morning"greeting.Otherwise you will get a "Good day" greeting.</p></body></html>

3.<html><body><script type="text/javascript">var r=Math.random()if (r>0.5){document.write("<a href='http://www.uad.ac.id'>Visit UAD Official Website</a>")}else{document.write("<a href='http://www.ugm.ac.id'>Visit UGM Official Website</a>")}</script></body></html>

4.<html><body><script type="text/javascript">var d = new Date()theDay=d.getDay()switch (theDay){

case 5:document.write("Finally Friday")

breakcase 6:

document.write("Super Saturday")breakcase 0:

document.write("Sleepy Sunday")breakdefault:

document.write("I'm really looking forward to this weekend!")}</script><p>This example demonstrates the switch statement.</p><p>You will receive a different greeting based on what day it is.</p><p>Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

36

</body></html>

5.<html><body><script type="text/javascript">for (i = 0; i <= 5; i++){document.write("The number is " + i)document.write("<br>")}</script><p>Explanation:</p><p>The for loop sets <b>i</b> equal to 0.</p><p>As long as <b>i</b> is less than , or equal to, 5, the loop will continue torun.</p><p><b>i</b> will increase by 1 each time the loop runs.</p></body></html>

6.<html><body><script type="text/javascript">for (i = 1; i <= 6; i++){document.write("<h" + i + ">This is header " + i)document.write("</h" + i + ">")}</script></body></html>

7.<html><body><script type="text/javascript">i=0while (i <= 5){document.write("The number is " + i)document.write("<br>")i++}</script><p>Explanation:</p><p><b>i</b> equal to 0.</p><p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p><p><b>i</b> will increase by 1 each time the loop runs.</p></body></html>

8.<html>

37

<body><script type="text/javascript">i=0do{document.write("The number is " + i)document.write("<br>")i++}while (i <= 5)</script><p>Explanation:</p><p><b>i</b> equal to 0.</p><p>The loop will run</p><p><b>i</b> will increase by 1 each time the loop runs.</p><p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p></body></html>

38

MODUL 7JAVASCRIPT:

OBYEK STRING, DATE DAN ARRAY

RINGKASANSetelah Anda terbiasa dengan dasar-dasar JavaScript beserta penggunaan variabel,termasuk mulai mengenal pemrograman skrip fungsi, maka selanjutnya Anda dapatmulai berlatih menggunakan berbagai obyek yang tersedia dalam JavaScript. Sepertitelah disampaikan dalam perkuliahan, JavaScript menyediakan banyak obyek built-inyang dapat langsung diaplikasikan oleh pengguna. Dengan beragam modifikasiatribut serta nilai yang dapat diberikan pada suatu obyek, maka Anda akanmendapatkan beragam hasil pula.

Properti obyek string

PropertiesLength

Metode obyek string

ExplanationReturns the number of characters in a string

NN IE ECMA2.0 3.0 1.0

Methodsanchor()big()blink()bold()charAt()charCodeAt()

ExplanationReturns a string as an anchorReturns a string in big textReturns a string blinkingReturns a string in boldReturns the character at a specified positionReturns the Unicode of the character at a

NN2.02.02.02.02.04.0

IE ECMA3.03.0

3.03.0 1.04.0 1.0

specified positionconcat()fixed()fontcolor()fontsize()fromCharCode()indexOf()

Returns two concatenated stringsReturns a string as teletypeReturns a string in a specified colorReturns a string in a specified sizeReturns the character value of a UnicodeReturns the position of the first occurrence of a

4.02.02.02.04.02.0

4.03.03.03.04.03.0

specified string inside another string. Returns -1if it never occurs

italics()lastIndexOf()

link()match()

replace()

search()

Returns a string in italicReturns the position of the first occurrence of aspecified string inside another string. Returns -1if it never occurs. Note: This method starts fromthe right and moves left!Returns a string as a hyperlinkSimilar to indexOf and lastIndexOf, but thismethod returns the specified string, or "null",instead of a numeric valueReplaces some specified characters with somenew specified charactersReturns an integer if the string contains some

2.0 3.02.0 3.0

2.0 3.04.0 4.0

4.0 4.0

4.0 4.0specified characters, if not it returns -1

39

slice() Returns a string containing a specified characterindex

4.0 4.0

small()split()strike()sub()substr()

Returns a string as small textReplaces a string with a commaReturns a string strikethroughReturns a string as subscriptReturns the specified characters. 14,7 returns 7

2.04.02.02.04.0

3.04.0 1.03.03.04.0

characters, from the 14th character (starts at 0)substring()

sup()toLowerCase()toUpperCase()

Metode obyek date

MethodsDate()getDate()getDay()

getMonth()

getFullYear()getYear()

Returns the specified characters. 7,14 returns allcharacters from the 7th up to but not includingthe 14th (starts at 0)Returns a string as superscriptConverts a string to lower caseConverts a string to upper case

ExplanationReturns a Date objectReturns the date of a Date object (from 1-31)Returns the day of a Date object (from 0-6.0=Sunday, 1=Monday, etc.)Returns the month of a Date object (from 0-11.0=January, 1=February, etc.)Returns the year of a Date object (four digits)Returns the year of a Date object (from 0-99).Use getFullYear instead !!

2.0 3.0 1.0

2.0 3.02.0 3.0 1.02.0 3.0 1.0

NN IE ECMA2.0 3.0 1.02.0 3.0 1.02.0 3.0 1.0

2.0 3.0 1.0

4.0 4.0 1.02.0 3.0 1.0

getHours()getMinutes()getSeconds()getMilliseconds()

Returns the hour of a Date object (from 0-23)Returns the minute of a Date object (from 0-59)Returns the second of a Date object (from 0-59)Returns the millisecond of a Date object (from

2.02.02.04.0

3.0 1.03.0 1.03.0 1.04.0 1.0

0-999)getTime() Returns the number of milliseconds since

midnight 1/1-19702.0 3.0 1.0

getTimezoneOffset() Returns the time difference between the user'scomputer and GMT

2.0 3.0 1.0

getUTCDate()

getUTCDay()

getUTCMonth()

getUTCFullYear()

getUTCHours()

getUTCMinutes()

Returns the date of a Date object in universal(UTC) timeReturns the day of a Date object in universaltimeReturns the month of a Date object in universaltimeReturns the four-digit year of a Date object inuniversal timeReturns the hour of a Date object in universaltimeReturns the minutes of a Date object in

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0universal time

40

getUTCSeconds() Returns the seconds of a Date object inuniversal time

4.0 4.0 1.0

getUTCMilliseconds() Returns the milliseconds of a Date object inuniversal time

4.0 4.0 1.0

parse()

setDate()

setFullYear()setHours()setMilliseconds()

setMinutes()setMonth()

Returns a string date value that holds thenumber of milliseconds since January 01 197000:00:00Sets the date of the month in the Date object(from 1-31)Sets the year in the Date object (four digits)Sets the hour in the Date object (from 0-23)Sets the millisecond in the Date object (from 0-999)Set the minute in the Date object (from 0-59)Sets the month in the Date object (from 0-11.0=January, 1=February)

2.0 3.0 1.0

2.0 3.0 1.0

4.0 4.0 1.02.0 3.0 1.04.0 4.0 1.0

2.0 3.0 1.02.0 3.0 1.0

setSeconds()setTime()setYear()setUTCDate()

Sets the second in the Date object (from 0-59)Sets the milliseconds after 1/1-1970Sets the year in the Date object (00-99)Sets the date in the Date object, in universal

2.02.02.04.0

3.0 1.03.0 1.03.0 1.04.0 1.0

time (from 1-31)setUTCDay()

setUTCMonth()

setUTCFullYear()

setUTCHour()

setUTCMinutes()

setUTCSeconds()

Sets the day in the Date object, in universaltime (from 0-6. Sunday=0, Monday=1, etc.)Sets the month in the Date object, in universaltime (from 0-11. 0=January, 1=February)Sets the year in the Date object, in universaltime (four digits)Sets the hour in the Date object, in universaltime (from 0-23)Sets the minutes in the Date object, in universaltime (from 0-59)Sets the seconds in the Date object, inuniversal time (from 0-59)

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0

4.0 4.0 1.0

setUTCMilliseconds() Sets the milliseconds in the Date object, inuniversal time (from 0-999)

4.0 4.0 1.0

toGMTString()

toLocaleString()

toString()

Metode obyek array

Methodslength

concat()join()

Converts the Date object to a string, set to GMTtime zoneConverts the Date object to a string, set to thecurrent time zoneConverts the Date object to a string

ExplanationReturns the number of elements in an array.This property is assigned a value when an arrayis createdReturns an array concatenated of two arraysReturns a string of all the elements of an array

2.0 3.0 1.0

2.0 3.0 1.0

2.0 4.0 1.0

NN IE ECMA3.0 4.0 1.0

4.0 4.0 1.03.0 4.0 1.0

41

concatenated togetherreverse() Returns the array reversed 3.0 4.0 1.0slice() Returns a specified part of the array 4.0 4.0sort() Returns a sorted array 3.0 4.0 1.0

LATIHANSeperti dalam pertemuan sebelumnya, gunakan contoh-contoh di bawah ini agarAnda dapat lebih mengenal akrab obyek-obyek dalam JavaSript dan caramemanfaatkannya. Perhatikan bahwa Anda benar-benar harus menelaah setiapbaris skrip agar Anda tahu proses kerja setiap skrip yang Anda buat.

1. Menghitung karakter suatu string<html><body><script type="text/javascript">var str="W3CSchools is great!"document.write("</p>" + str + "</p>")document.write(str.length)</script></body></html>

2. Menguji apakah string berisi karakter tertentu, dengan indexof()<html><body><script type="text/javascript">var str="W3CSchools is great!"var pos=str.indexOf("School")if (pos>=0){document.write("School found at position: ")document.write(pos + "<br />")}else{document.write("School not found!")}</script><p>This example tests if a string contains a specified word. If the word is found itreturns the position of the first character of the word in the original string. Note:The first position in the string is 0!</p></body></html>

3. Menguji apakah string berisikan karakter tertentu, dengan match()<html><body><script type="text/javascript">var str = "W3CSchools is great!"document.write(str.match("great"))</script><p>This example tests if a string contains a specified word. If the word is found itreturns the word.</p>

42

</body></html>

4. Memunculkan bagian string tertentu<html><body><script type="text/javascript">var str="W3CSchools is great!"document.write(str.substr(2,6))document.write("<br /><br />")document.write(str.substring(2,6))</script><p>The substr() method returns a specified part of a string. If you specify (2,6) thereturned string will be from the second character (start at 0) and 6 long.</p><p>The substring() method also returns a specified part of a string. If you specify(2,6) it returns all characters from the second character (start at 0) and up to, butnot including, the sixth character.</p></body></html>

5. Mengubah menjadi huruf besar atau kecil<html><body><script type="text/javascript">var str=("Hello JavaScripters!")document.write(str.toLowerCase())document.write("<br>")document.write(str.toUpperCase())</script></body></html>

6. Membuat array berisi nama-nama<html><body><script type="text/javascript">var famname = new Array(6)famname[0] = "Jan Egil"famname[1] = "Tove"famname[2] = "Hege"famname[3] = "Stale"famname[4] = "Kai Jim"famname[5] = "Borge"for (i=0; i<6; i++){document.write(famname[i] + "<br>")}</script></body></html>

43

7. Menghitung elemen yang berada dalam array<html><body><script type="text/javascript">var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai Jim","Borge")for (i=0; i<famname.length; i++){document.write(famname[i] + "<br>")}</script></body></html>

8. Tanggal hari ini<html><body><script type="text/javascript">var d = new Date()document.write(d.getDate())document.write(".")document.write(d.getMonth() + 1)document.write(".")document.write(d.getFullYear())</script></body></html>

9. Jam saat ini<html><body><script type="text/javascript">var d = new Date()document.write(d.getHours())document.write(".")document.write(d.getMinutes())document.write(".")document.write(d.getSeconds())</script></body></html>

10. Mengeset tanggal<html><body><script type="text/javascript">var d = new Date()d.setFullYear("1990")document.write(d)</script></body></html>

11. Melihat waktu UTC<html><body>

44

var minutes = time.getMinutes()minutes=((minutes < 10) ? "0" : "") + minutesvar seconds = time.getSeconds()seconds=((seconds < 10) ? "0" : "") + secondsvar clock = hours + ":" + minutes + ":" + secondsdocument.forms[0].display.value = clocktimer = setTimeout("start()",1000)}</script></head><body onload="start()" onunload="stop()"><form><input type="text" name="display" size="20"></form></body></html>

46

MODUL 8JAVASCRIPT:

PENANGANAN BROWSER

RINGKASANPernahkan Anda memasuki suatu situs yang memiliki beragam fasilitas yang sangatmemudahkan atau membebaskan Anda dari perlunya menguasai browser yangAnda gunakan? Misalnya Anda ingin mematikan tombol mouse agar pengunjungsitus Anda tidak dapat menyimpan gambar yang ada pada halaman Anda, ataumem-bookmark halaman Anda sehingga tercatat di daftar situs favorit pengunjungAnda, atau memberikan kemudahan pada pengunjung untuk mencetak halaman webAnda tersebut. Semua ini dan berbagai macam hal lain dapat Anda berikan ke dalamhalaman web situs Anda dengan hanya beberapa baris singkat JavaScript.

LATIHANBuatlah contoh-contoh di bawah ini, dan tampilkan dalam browser dengan ukuranwindow kecil agar Anda dapat lebih melihat efeknya. Perhatikan baik-baik setiapbaris skrip, dan kenali bagian mana yang memungkinkan skrip tersebut memberikanhasil seperti yang diinginkan. Perhatikan juga bahwa ada beberapa skrip yangbersifat browser-specific yaitu IE, sehingga mungkin tidak akan dapat bekerja biladibuka dengan browser selain IE. Anda akan sangat memerlukan pengetahuantentang hal ini nantinya.

1. Mengubah teks pada tag <title><html><head><script type="text/javascript">function newTitle(){parent.document.title="Put your new title here"}</script><body>Click this button and check the browser's title field<form><input type="button" onclick="newTitle()" value="Get A new title"></form></body></html>

2. Memunculkan alert box<html><body><script type="text/javascript">alert("Hello World!")</script></body></html>

3. Mematikan tombol kanan mouse<html><head><script type="text/javascript">

47

function disable(){if (event.button == 2){alert("Sorry no rightclick on this page.\nYou cannot view my source\nand youcannot steal my images.")}}</script></head><body onmousedown="disable()"><p>Right-click on this page to trigger the event.</p><p>The event property is not recognized in Netscape.</p></body></html>

4. Memunculkan kotak konfirmasi<html><body><script type="text/javascript">var name = confirm("Press a button")if (name == true){document.write("You pressed OK")}else{document.write("You pressed Cancel")}</script></body></html>

5. Memberikan masukan kepada skrip<html><head></head><body><script type="text/javascript">var name = prompt("Please enter your name","")if (name != null && name != ""){document.write("Hello " + name)}</script></body></html>

6. Membuka halaman web pada window baru<html><head><script language=javascript>function openwindow(){window.open("http://www.mail.telkom.net")

48

}</script></head><body><form><input type=button value="Open Window" onclick="openwindow()"></form></body></html>

7. Membuka beberapa window halaman web baru sekaligus<html><head><script language=javascript>function openwindow(){window.open("http://www.google.com/")window.open("http://www.yahoo.com/")}</script></head><body><form><input type=button value="Open Windows" onclick="openwindow()"></form></body></html>

8. Berganti halaman lewat tombol<html><head><script type="text/javascript">function locate(){location="http://www.uad.ac.id/"}</script></head><body><form><input type="button" onclick="locate()" value="New location"></form></body></html>

9. Menambahkan bookmark/favorite<html><head><script type="text/javascript">function bookmark(){window.external.AddFavorite("http://www.telkomsel.com","Telkomsel")}</script></head>

49

<body><form><input type="button" onclick="bookmark()" value="Click here to bookmark me"></form></body></html>

10. Menjadikan halaman sebagai default homepage<html><head><script type="text/javascript">function makeDefault(element){element.style.behavior='url(#default#homepage)';element.setHomePage('http://www.uad.ac.id');}</script></head><body><p>Click the button and UAD will become your default home page.</p><form><input type="button"onclick="makeDefault(this)"value="Make UAD your default homepage"></form></body></html>

11. Me-refresh halaman yang sedang ditampilkan<html><head><script type="text/javascript">function refresh(){location.reload()}</script></head><body><form><input type="button" value="Refresh" onclick="refresh()"></form></body></html>

12. Mengganti teks pada status bar browser<html><head><script type="text/javascript">function load(){window.status = "put your message here"}</script></head>

50

<body onload="load()"><p>Look in the statusbar</p></body></html>

13. Mencetak halaman yang sedang tampil di browser<html><head><script type="text/javascript">function printpage(){window.print()}</script></head><body><form><input type="button" value="Print this page" onclick="printpage()"></form></body></html>

14. Memberitahukan kapan halaman web di-update terakhir kali<html><body>This page was last modified:<br /><script language="JavaScript">document.write(document.lastModified)</script><br /><br />View source to see how it is done</body></html>

15. Efek Scroll ke bawah beberapa baris<html><head><script type="text/javascript">function scrolldown(){for (i=1; i<=600; i++)

{window.scroll(1,i)}

}</script></head><body><form><input type="button" value="Scroll" onclick="scrolldown()"></form>Push<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />the<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

51

scroll<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />button<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />to see<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />the<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />effect<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body></html>

52

MODUL 9JAVASCRIPT:

GAMBAR, FRAME, FORM, DAN CLIENT

RINGKASANBagian berikutnya dari latihan menggunakan JavaScript adalah penguasaan skripuntuk menangani obyek gambar, frame, form, dan pendeteksian elemen web padaclient yaitu browser yang digunakan. Pada dasarnya, HTML memang telah memilikitag untuk penanganan obyek gambar, frame, dan form, tetapi seperti halnya sifatHTML yang statis, maka tag HTML untuk penanganan obyek-obyek tersebut jugamemberikan hasil yang statis pula. JavaScript selain dapat digunakan untukmembuatnya lebih dinamis, juga digunakan untuk menjadi pre-processor darimasukan yang diberikan pengunjung halaman web ke situs web Anda, sehinggasitus web Anda memiliki interaktivitas yang sebenarnya.

LATIHANSilakan Anda kerjakan latihan-latihan di bawah ini, dan seperti sebelumnya,perhatikan bagian mana saja yang digunakan agar dapat memberikan hasil yangdiinginkan. Untuk beberapa contoh, Anda memerlukan file-file HTML tambahan,silakan Anda buat file HTML tambahan dengan isi yang berbeda-beda agar hasilnyalebih terlihat jelas. Diantara file tambahan yang dibutuhkan terdapat file pemrosesmasukan dari form. Bahasan file pemroses masukan form belum dijangkau dalamperkuliahan (dibahas khusus dalam pemrograman web tingkat lanjut, skrip pada sisiserver), sehingga file HTML untuk pemroses form cukup file dummy saja yang berisipesan teks “Data telah diproses”.

1. Preload gambar ke memori<html><head><script type="text/javascript">if (document.images)

{a = new Image(160, 120)a.src = "gambar.jpg"}

</script></head><body><img src="gambar.jpg" width="160" height="120"></body></html>

2. Keluar dari frame<html><head><script type="text/javascript">function breakout(){if (window.top != window.self){window.top.location="targetpage.htm"}}

53

</script></head><body><form>To break out of the frame:<input type="button" onclick="breakout()" value="Click me"></form></body></html>

3. Melakukan update halaman pada 2 iframe<html><head><script type="text/javascript">function twoframes(){document.all("frame1").src="frame_c.htm"document.all("frame2").src="frame_d.htm"}</script></head><body><iframe src="frame_a.htm" name="frame1"></iframe><iframe src="frame_b.htm" name="frame2"></iframe><br /><form><input type="button" onclick="twoframes()" value="Change url of the twoiframes"></form></body></html>

4. Validasi alamat e-mail<html><head><script type="text/javascript">function validate(){x=document.myFormat=x.myEmail.value.indexOf("@")if (at == -1)

{alert("Not a valid e-mail")return false}

}</script></head><body><form name="myForm" action="prosesform.htm" onsubmit="return validate()">Enter your E-mail address:<input type="text" name="myEmail"><input type="submit" value="Send input"></form><p>This example only tests if the email address contains an "@" character.</p>

54

<p>Any "real life" code will have to test for punctuations, spaces and other thingsaswell.</p></body></html>

5. Validasi panjang masukan teks<html><head><script type="text/javascript">function validate(){x=document.myForminput=x.myInput.valueif (input.length>5){alert("Do not insert more than 5 characters")return false}else{return true}}</script></head><body><form name="myForm" action="prosesform.htm" onsubmit="return validate()">In this input box you are not allowed to insert more than 5 characters:<input type="text" name="myInput"><input type="submit" value="Send input"></form></body></html>

6. Menjadikan teks masukan sebagai obyek aktif<html><head><script type="text/javascript">function setfocus(){document.forms[0].field.select()document.forms[0].field.focus()}</script></head><body><form><input type="text" name="field" size="30" value="input text"><input type="button" value="Selected" onclick="setfocus()"></form></body></html>

7. Menggunakan tombol radio

55

<html><head><script type="text/javascript">function check(browser){document.forms[0].answer.value=browser}</script></head><body><form>Which browser is your favorite<br><input type="radio" name="browser"value="Explorer">Microsoft Internet Explorer<br><input type="radio" name="browser"

onclick="check(this.value)"

onclick="check(this.value)"value="Netscape">Netscape Navigator<br><input type="text" name="answer"></form></body></html>

8. Menggunakan kotak cek<html><head><script type="text/javascript">function check(){coffee=document.forms[0].coffeeanswer=document.forms[0].answertxt=""for (i = 0; i<coffee.length; ++ i){if (coffee[i].checked){txt=txt + coffee[i].value + " "}}answer.value="You ordered a coffee with " + txt}</script></head><body><form>How would you like your coffee?<br><input type="checkbox" name="coffee" value="cream">With cream<br><input type="checkbox" name="coffee" value="sugar">With sugar<br><input type="text" name="answer" size="30"><input type="button" name="test" onclick="check()" value="Order"></form></body></html>

9. Menggunakan kotak drop-down

56

<html><head><script type="text/javascript">function put(){option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].texttxt=optiondocument.forms[0].favorite.value=txt}</script></head><body><form><p>Select your favorite browser:<select name="dropdown" onchange="put()"><option>Internet Explorer<option>Netscape Navigator</select></p><p>Your favorite browser is:<input type="text" name="favorite" value="Internet Explorer"></p></form></body></html>

10. Kotak drop-down sebagai menu<html><head><script type="text/javascript">function go(form){location=form.selectmenu.value}</script></head><body><form><select name="selectmenu" onchange="go(this.form)"><option>--Select page--<option value="http://www.telkom.net">TelkomNet<option value="http://www.google.com">Google<option value="http://www.uad.ac.id">UAD</select></form></body></html>

11. Kotak teks yang otomatis berpindah fokus bila batasan masukan terpenuhi<html><head><script type="text/javascript">

57

function toUnicode(elmnt,content){if (content.length==elmnt.maxLength)

{next=elmnt.tabIndexif (next<document.forms[0].elements.length)

{document.forms[0].elements[next].focus()}

}}</script></head><body><p>This script automatically sets focus to the next input field when the currentinput field's maxlength has been reached</p><form name="myForm"><input size="3" tabindex="1" name="myInput"maxlength="3" onkeyup="toUnicode(this,this.value)"><input size="3" tabindex="2" name="mySecond"maxlength="3" onkeyup="toUnicode(this,this.value)"><input size="3" tabindex="3" name="myThird"maxlength="3" onkeyup="toUnicode(this,this.value)"></form></body></html>

12. Deteksi browser yang digunakan<html><head><script type="text/javascript">document.write("You are browsing this site with: "+ navigator.appName)</script></head><body></body></html>

13. Deteksi konfigurasi tampilan yang digunakan<html><body><script type="text/javascript">document.write("SCREEN RESOLUTION: ")document.write(screen.width + "*")document.write(screen.height + "<br>")document.write("AVAILABLE VIEW AREA: ")document.write(window.screen.availWidth + "*")document.write(window.screen.availHeight + "<br>")document.write("COLOR DEPTH: ")document.write(window.screen.colorDepth + "<br>")</script></body></html>

14. Redirect ke situs web berdasarkan browser yang digunakan

58

<html><head><script type="text/javascript">function redirectme(){bname=navigator.appNameif (bname.indexOf("Netscape")!=-1)

{window.location="http://www.netscape.com"return}

if (bname.indexOf("Microsoft")!=-1){window.location="http://www.microsoft.com"return}

window.location="http://www.w3.org"}</script></head><body><form><input type="button" onclick="redirectme()" value="Redirect"></form></body></html>

59

MODUL 10JAVASCRIPT:

PEMROGRAMAN GAME SEDERHANA

RINGKASANBagian berikutnya dari latihan menggunakan JavaScript adalah penguasaan skripuntuk menangani interaktivitas serta pemrosesan input-output secara real-time.Dengan kata lain, anda akan memasuki bagian berikutnya dari pemanfaatan HTMLDinamik.

LATIHANSilakan Anda buat program game sederhana di bawah ini, dan perhatikan setiapbagian dari skrip ini agar anda mengetahui cara kerjanya. Sebagai bahan untukpercobaan anda, cobalah mengganti variabel-variabel dalam skrip untuk mengetahuipengaruhnya dalam program.

<html><BODY BGCOLOR="#444444" TEXT="#004400" VLINK="#FF8844"onload="onloadmes()"><head><TITLE>face GAME</TITLE><pre><SCRIPT LANGUAGE="JavaScript"><!--var timerID = nullvar patno=1var cr="\r\n"var blankno=0var totalblank=""var lr=1var lowerlf=""var downlf=""var downno=0var inplay=0var missilex=99var missiley=99var mychrx=1var myblank=""var mymove=0var spcf1=""var spcf2=""var spcf3=""var hitflag=0var score=0var selec=0var mname=" Windows is"var rsmiss=""function array1(arn) {this.length = arn;for (var ar1 = 0; ar1 <= arn; ar1++) {this[ar1] = 1 }return this}

60

if (mychrx <= 0){mychrx=1}}function goright(){mymove=0mychrx=mychrx+1if (mychrx >= 56){mychrx=55}}function golmax(){if (inplay == 1){mymove=-1}}function gormax(){if (inplay == 1){mymove=1}}function fire(){if (inplay == 0){if (selec == 1){selec=9

inplay=1init()}

}else{if (missiley == 99){missiley=18

missilex=mychrx+3}}}function gameover(){score=0for (var enerme=1;enerme<25;enerme++){if (faker[enerme] == 1){score=score+1}}if (score == 0){document.fmark.win.value=cr+cr+cr+cr+cr+cr+cr+cr+"Congratulation!"+cr+cr+" ALL CREAR!!"}else{document.fmark.win.value=cr+cr+cr+cr+cr+cr+cr+cr+" GAMEOVER"+cr+cr+" "+score+" ENEMY REMAINED"}inplay=0}function interval1(){if (missiley != 99) {missiley=missiley-1}if (missiley < 0){missiley=99}mychrx=mychrx+mymoveif (mychrx <= 0){mychrx=1}if (mychrx >= 56){mychrx=55}blankno=blankno+lrtotalblank = blankx[blankno]if (blankno >= 20) {lr=-1

downno=downno+1blankno=20}

if (blankno <= 0) {lr=1downno=downno+1blankno=0}

if (downno >= 12) {gameover()}downlf=""for (var upperspc=0;upperspc<downno;upperspc++){

62

if (missiley == upperspc){downlf=downlf+blankx[missilex]+"|"+cr}else{downlf=downlf+cr}

}if (inplay == 1){patno=patno+1if (patno >= 3) {patno = 1}for (var addline = 1; addline < 5; addline++){mestotal[addline]=totalblankrsmiss=""if (missiley == (downno+addline*2-2)){if (blankno <= missilex){hitflag=parseInt((missilex-blankno)/7,10)if (hitflag < 6){if ((missilex-blankno-(hitflag*7)) >= 1){if ((missilex-blankno-(hitflag*7)) <= 5){if (faker[(addline*6)+hitflag-5] == 1){faker[(addline*6)+hitflag-5] = 0missiley=99}}}}else{if (missilex > (blankno+42)){

rsmiss=blankx[missilex-blankno-42]+"|"}

}}else{mestotal[addline]=blankx[missilex]+"|"if (missilex < (blankno-1)){mestotal[addline]=mestotal[addline]+blankx[blankno-1-missilex]

}}}

for (var addfaker = 1; addfaker < 7; addfaker++){if (faker[(addline*6)+addfaker-6] == 1){

mestotal[addline]=mestotal[addline]+face[patno]}else{mestotal[addline]=mestotal[addline]+" "}

}mestotal[addline]=mestotal[addline]+rsmiss

}spcf1=crspcf2=crspcf3=crif (missiley == (downno+1)){spcf1=blankx[missilex]+"|"+cr}if (missiley == (downno+3)){spcf2=blankx[missilex]+"|"+cr}if (missiley == (downno+5)){spcf3=blankx[missilex]+"|"+cr}lowerlf=""for (var lowerspc=0;lowerspc<(11-downno);lowerspc++){if (missiley == (downno+7+lowerspc)){lowerlf=lowerlf+blankx[missilex]+"|"+cr}else{lowerlf=lowerlf+cr}

}myblank=blankx[mychrx]

63

document.fmark.win.value =downlf+mestotal[1]+cr+spcf1+mestotal[2]+cr+spcf2+mestotal[3]+cr+spcf3+mestotal[4]+cr+lowerlf+myblank+" _A_ "+cr+myblank+" [___] "timerID = setTimeout("interval1()",250)}}//--></SCRIPT></pre></head><FORM NAME="fmark"><center><textarea NAME="win" rows=20 cols=63>You must get Netscape2.0 or later.If you use Netscape 4.0b1, CLICK RESET!</textarea></center><center><pre><INPUT TYPE="button" VALUE=" " ONCLICK="golmax()"><INPUTTYPE="button" VALUE=" LEFT " ONCLICK="goleft()"><INPUT TYPE="button"VALUE="FIRE" ONCLICK="fire()"><INPUT TYPE="button" VALUE="RIGHT"ONCLICK="goright()"><INPUT TYPE="button" VALUE=" "ONCLICK="gormax()"></pre></center><br><p><center><pre><INPUT TYPE="button" VALUE=" RESET "ONCLICK="restarter()"></pre></center><hr><center><A HREF='welcome.html'><bold>Home page</bold></A></center></FORM></BODY></HTML>

64

Property Description Values NN IE W3Cbackground A shorthand property for

setting all backgroundproperties in onedeclaration

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

6.0 4.0 CSS1

background-attachment

Sets whether abackground image isfixed or scrolls with therest of the page

scrollfixed

6.0 4.0 CSS1

background-color Sets the backgroundcolor of an element

color-rgbcolor-hexcolor-nametransparent

4.0 4.0 CSS1

background-image Sets an image as thebackground

urlnone

4.0 4.0 CSS1

background-position Sets the startingposition of a backgroundimage

top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx-% y-%x-pos y-pos

6.0 4.0 CSS1

background-repeat Sets if/how abackground image willbe repeated

repeatrepeat-xrepeat-yno-repeat

4.0 4.0 CSS1

Property Description Values NN IE W3Cborder A shorthand property for

setting all of theproperties for the fourborders in onedeclaration

border-widthborder-styleborder-color

4.0 4.0 CSS1

border-bottom A shorthand property forsetting all of theproperties for the bottomborder in onedeclaration

border-bottom-widthborder-styleborder-color

6.0 4.0 CSS1

LAMPIRANATRIBUT CSS

Background

Border

65

border-bottom-color Sets the color of thebottom border

border-bottom-style Sets the style of thebottom border

border-bottom-width Sets the width of thebottom border

border-color

border-style

thinmediumthicklength

6.0 4.0 CSS2

6.0 4.0 CSS2

4.0 4.0 CSS1

border-color

border-left

border-left-color

Sets the color of the four colorborders, can have fromone to four colorsA shorthand property for border-left-widthsetting all of the

border-styleproperties for the left

border-colorborder in onedeclarationSets the color of the left border-colorborder

6.0 4.0 CSS1

6.0 4.0 CSS1

6.0 4.0 CSS2

border-left-style Sets the style of the left border-style 6.0 4.0 CSS2border

border-left-width

border-right

Sets the width of the left thinborder

mediumthicklength

A shorthand property for border-right-widthsetting all of the

border-styleproperties for the right

border-colorborder in onedeclaration

4.0 4.0 CSS1

6.0 4.0 CSS1

border-right-color Sets the color of the border-color 6.0 4.0 CSS2right border

border-right-style Sets the style of the border-style 6.0 4.0 CSS2right border

border-right-width Sets the width of theright border

thinmedium

4.0 4.0 CSS1

thicklength

border-style

border-top

Sets the style of the four noneborders, can have from

hiddenone to four styles

dotteddashedsoliddoublegrooveridgeinsetoutset

A shorthand property forborder-top-width

6.0 4.0 CSS1

6.0 4.0 CSS1

66

Property Description Values NN IE W3Cclear Sets the sides of an

element where otherfloating elements arenot allowed

leftrightbothnone

4.0 4.0 CSS1

cursor Specifies the type ofcursor to be displayed

urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp

6.0 4.0 CSS2

display Sets how/if an elementis displayed

noneinlineblocklist-itemrun-incompactmarkertableinline-table

4.0 4.0 CSS1

setting all of theproperties for the topborder in onedeclaration

border-styleborder-color

border-top-color Sets the color of the topborder

border-color 6.0 4.0 CSS2

border-top-style Sets the style of the topborder

border-style 6.0 4.0 CSS2

border-top-width Sets the width of the topborder


4.0 4.0 CSS1

border-width A shorthand property forsetting the width of thefour borders in onedeclaration, can havefrom one to four values


4.0 4.0 CSS1

Classification

67

table-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-caption

float Sets where an image or lefta text will appear in

rightanother element

none

4.0 4.0 CSS1

position Places an element in astatic, relative, absoluteor fixed position

staticrelativeabsolute

4.0 4.0 CSS2

fixedvisibility Sets if an element

should be visible orinvisible

visiblehiddencollapse

6.0 4.0 CSS2

DimensionProperty Description Values NN IE W3Cheight Sets the height of an

elementautolength

6.0 4.0 CSS1

%line-height Sets the distance

between linesnormalnumber

4.0 4.0 CSS1

length%

max-height Sets the maximumheight of an element

nonelength

CSS2

%max-width Sets the maximum width none

of an elementlength%

CSS2

min-height Sets the minimumheight of an element

length%

CSS2

min-width Sets the minimum width lengthof an element

%

CSS2

width Sets the width of anelement

auto%

4.0 4.0 CSS1

length

FontProperty Description Values NN IE W3Cfont A shorthand property for

setting all of theproperties for a font inone declaration

font-stylefont-variantfont-weightfont-size/line-height

4.0 4.0 CSS1

font-familycaptioniconmenumessage-boxsmall-captionstatus-bar

font-family A prioritized list of fontfamily names and/orgeneric family names foran element

family-namegeneric-family

4.0 3.0 CSS1

font-size Sets the size of a font xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%

4.0 3.0 CSS1

font-size-adjust Specifies an aspectvalue for an elementthat will preserve the x-height of the first-choicefont

nonenumber

CSS2

font-stretch Condenses or expandsthe current font-family

normalwidernarrowerultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded

CSS2

font-style Sets the style of the font normalitalicoblique

4.0 4.0 CSS1

font-variant Displays text in a small-caps font or a normalfont

normalsmall-caps

6.0 4.0 CSS1

font-weight Sets the weight of a font normalboldbolderlighter100200300

4.0 4.0 CSS1

69

Property Description Values NN IE W3Ccontent Generates content in a

document. Used withthe :before and :afterpseudo-elements

stringurlcounter(name)counter(name, list-style-type)counters(name,string)counters(name,string, list-style-type)attr(X)open-quoteclose-quoteno-open-quoteno-close-quote

CSS2

counter-increment Sets how much thecounter increments oneach occurrence of aselector

noneidentifier number

CSS2

counter-reset Sets the value thecounter is set to on eachoccurrence of a selector

noneidentifier number

CSS2

quotes Sets the type ofquotation marks

nonestring string

CSS2

Property Description Values NN IE W3Clist-style A shorthand property for

setting all of theproperties for a list inone declaration

list-style-typelist-style-positionlist-style-image

6.0 4.0 CSS1

list-style-image Sets an image as thelist-item marker

noneurl

6.0 4.0 CSS1

list-style-position Sets where the list-itemmarker is placed in thelist

insideoutside

6.0 4.0 CSS1

list-style-type Sets the type of the list-item marker

nonedisccirclesquare

4.0 4.0 CSS1

400500600700800900

Generated Content

List and Marker

70

decimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha

marker-offset autolength

CSS2

Property Description Values NN IE W3Cmargin A shorthand property for

setting the marginproperties in onedeclaration

margin-topmargin-rightmargin-bottommargin-left

4.0 4.0 CSS1

margin-bottom Sets the bottom marginof an element

autolength%

4.0 4.0 CSS1

margin-left Sets the left margin ofan element

autolength%

4.0 3.0 CSS1

margin-right Sets the right margin ofan element

autolength%

4.0 3.0 CSS1

margin-top Sets the top margin ofan element

autolength%

4.0 3.0 CSS1

Property Description Values NN IE W3Coutline A shorthand property for

setting all the outlineproperties in onedeclaration

outline-coloroutline-styleoutline-width

CSS2

outline-color Sets the color of theoutline around anelement

colorinvert

CSS2

Margin

Outlines

71

Property Description Values NN IE W3Cbottom Sets how far the bottom

edge of an element isabove/below the bottomedge of the parentelement

auto%length

6.0 5.0 CSS2

clip Sets the shape of anelement. The element isclipped into this shape,and displayed

shapeauto

6.0 4.0 CSS2

left Sets how far the leftedge of an element is tothe right/left of the leftedge of the parentelement

auto%length

4.0 4.0 CSS2

overflow Sets what happens ifthe content of anelement overflow its

visiblehiddenscroll

6.0 4.0 CSS2

Property Description Values NN IE W3Cpadding A shorthand property for

setting all of thepadding properties inone declaration

padding-toppadding-rightpadding-bottompadding-left

4.0 4.0 CSS1

padding-bottom Sets the bottom paddingof an element

length%

4.0 4.0 CSS1

padding-left Sets the left padding ofan element

length%

4.0 4.0 CSS1

padding-right Sets the right padding ofan element

length%

4.0 4.0 CSS1

padding-top Sets the top padding ofan element

length%

4.0 4.0 CSS1

outline-style Sets the style of theoutline around anelement

nonedotteddashedsoliddoublegrooveridgeinsetoutset

CSS2

outline-width Sets the width of theoutline around anelement


CSS2

Padding

Positioning

72

area autoright Sets how far the right

edge of an element is tothe left/right of the rightedge of the parentelement

auto%length

5.0 CSS2

top Sets how far the topedge of an element isabove/below the topedge of the parentelement

auto%length

4.0 4.0 CSS2

vertical-align Sets the verticalalignment of an element

baselinesubsupertoptext-topmiddlebottomtext-bottomlength%

4.0 4.0 CSS1

z-index Sets the stack order ofan element

autonumber

6.0 4.0 CSS2

Property Description Values NN IE W3Cborder-collapse Sets the border model

of a tablecollapseseparate

5.0 CSS2

border-spacing Sets the distancebetween the borders ofadjacent cells (only forthe "separated borders"model)

length length CSS2

caption-side Sets the position of thecaption according to thetable

topbottomleftright

CSS2

empty-cells Sets whether cells withno visible contentshould have borders ornot (only for the"separated borders"model)

showhide

6.2 CSS2

table-layout Sets the algorithm usedto lay out the table

autofixed

5.0 CSS2

Table

TextProperty Description Possible Values NN IE W3C

73

color Sets the color of a text color 4.0 3.0 CSS1direction Sets the text direction ltr

rtlCSS2

letter-spacing Increase or decreasethe space betweencharacters

normallength

6.0 4.0 CSS1

text-align Aligns the text in anelement

leftrightcenterjustify

4.0 4.0 CSS1

text-decoration Adds decoration to text noneunderlineoverlineline-throughblink

4.0 4.0 CSS1

text-indent Indents the first line oftext in an element

length%

4.0 4.0 CSS1

text-shadow nonecolorlength

text-transform Controls the letters in anelement

nonecapitalizeuppercaselowercase

4.0 4.0 CSS1

unicode-bidi normalembedbidi-override

5.0 CSS2

white-space Sets how white spaceinside an element ishandled

normalprenowrap

4.0 5.5 CSS1

word-spacing Increase or decreasethe space betweenwords

normallength

6.0 6.0 CSS1

74

Universitas riwijaya

Fakultas Ilmu

Komputer

Laboratorium

LEMBAR

PENGESAHAN

MODUL

PRAKTIKUM

SISTEM

MANAJEMEN

MUTU ISO

9001:2008

No. Dokumen Tanggal 4 AGUSTUS 2016

Revisi Halaman 2 DARI 48

MODUL PRAKTIKUM

Mata Kuliah Praktikum : Pemrograman Web I

Kode Mata Kuliah Praktikum : FSI124002

SKS : 1

Program Studi : SISTEM INFORMASI

Semester : 2 (Genap) 2016/2017

DIBUAT OLEH DISAHKAN OLEH DIKETAHUI OLEH

DOSEN PENGAMPUH

Ken Ditha Tania, M.Kom

KETUA JURUSAN

Endang Lestari R, M.T.

WAKIL DEKAN 1

BIDANG AKADEMIK

Syamsuryadi, S. SI., M. Kom

daftarisisi.ilkom.unsri.ac.id/.../2018/11/praktikum-pemrograman-web-i-fix.pdf ·...

Documents