Modul Pemrograman Web
Diunggah oleh
Shintya DharmayantiModul Pemrograman Web
Diunggah oleh
Shintya DharmayantiMODUL PERKULIAHAN
Pemrograman Web
Fakultas Program Studi Kode MK Disusun Oleh
2017
Fakultas Ilmu Komputer Sistem Informasi 87039 Anton Tri Argono, ST, MTI
BAB 1
STRUKTUR HTML
1.1. Definisi HTML
HTML merupakan singkatan dari HyperText MarkUp Language. HTML
dapat dibuat pada sembarang editor, meski ada software-software khusus yang
dimaksudkan untuk memudahkan pekerjaan. Adapun editor- editor yang dimaksud
adalah NotePad, WordPad, MS Word, Excel dan lain-lain.
Pembuatan teks HTML hampir sama dengan pembuatan teks-teks lainnya
seperti pada MS Word. Pemberian format pada suatu teks dalam sebuah
dokumen akan bisa langsung terlihat hasilnya. Contohnya, jika Anda ingin
membuat sebuah dokumen pada MS Word dan memformatnya sehingga salah satu
kata/kalimat ingin diberikan format huruf tebal (Bold), miring (Italic), atau Garis
bawah pada teks (UnderLine), maka hasilnya segera dapat dilihat pada dokumen
tersebut. Berbeda dengan dokumen HTML, format-format yang diberikan pada
suatu teks tidak bisa dilihat langsung hasilnya, tetapi harus menggunakan
program khusus, yaitu Web Browser atau Browser
Perbedaan yang lebih mendasar terhadap dokumen-dokumen lainnya
yaitu, dokumen HTML bisa mengandung Link/hubungan kebagian lain dari
sebuah dokumen atau dokumen lain dari situs Web, baik dalam server Web yang
dama ataupun ke Server Web lainnya. Ciri adanya unsur link ini pada sebuah
dokumen HTML, biasanya suatu teks ditandai dengan warna biru dan garis
bawah. Apabila pointer mouse diarahkan ke link tersebut, maka pointer mouse
akan berubah menjadi gambar telapak tangan.
1.2. Persiapan Awal
Beberapa hal yang perlu dipersiapkan sebelum mulai membuat dokumen
HTML, diantaranya adalah persiapan software editor dan software Web Browser.
Editor HTML yang akan digunakan pada buku ini adalah editor NotePad
(walaupun dapat digunakan editor apapun). Sedangkan Web Browser yang
digunakan adalah Mozilla Firefox dan Internet Explorer (IE).
Ada beberapa tips khusus dalam penggunaan software-software di atas,
seperti misalnya dalam penggunaan editor HTML sebaiknya gunakan editor yang
Pemrograman Web : HTML & JavaScript 1
tidak terlalu banyak menyita memory komputer, Dan yang paling terpenting adalah
software tersebut compatibel dengan sistem komputer yang dimiliki.
1.3. Tag-tag Dasar HTML
Bentuk umum penulisan dokumen HTML adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> Teks Judul </TITLE>
</HEAD>
<BODY>
Isi Dokumen
</BODY>
</HTML>
Berikut ini adalah penjelasa kode pada bentuk umum penulisan dokumen HTML :
Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat
di dalamnya adalah kode HTML sehingga browser akan menterjemahkan
sebagai dokumen HTML.
Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas kepala
dan badan
Bagian Kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>. Pada
Bagian ini, bisa ditentukan judul dokumen HTML yang dituliskan dengan
pasangan <TITLE> dan </TITLE>.
Bagian badan ditandai dengan <BODY> dan </BODY>. Di dalam bagian inilah
dapat dituliskan teks-teks, penyisipan gambar, Link, atau pembuatan tabel.
1.4. Aturan-aturan Dasar HTML
Ada beberapa aturan-aturan dasar yang berlaku dalam penulisan tag-tag pada
HTML :
1. Setiap tag HTML harus diapit oleh tanda lebih kecil dan lebih besar
<..>
2. Tag yang dituliskan dapat berupa huruf kecil ataupun huruf kapital. Penulisan
huruf kecil atau kapital akan memberikan hasil yang sama. Meskipun demikian,
sebaiknya penulisan tag dituliskan dalam huruf kapital.
3. Hampir semua tag adalah tag yang berpasangan. Ciri dari tag yang
Pemrograman Web : HTML & JavaScript 2
berpasangan adalah selalu mempunyai tag awal dan tag akhir. Tag awal
ditandai dengan <..> dan tag akhir diikuti dengan tag slash-nya </..>.
Contoh tag berpasangan :
<HTML></HTML>
<BODY></BODY>
<HEAD></HEAD>
4. Browser akan mengabaikan spasi atau baris baru pada teks yang diapit oleh
tag. Contoh di bawah ini akan menampilkan hasil yang sama pada browser :
<BODY> Isi dokumen </BODY>
atau
<BODY>
Isi dokumen
</BODY>
5. File dokumen HTML harus disimpan sebagai file teks murni, dengan
menggunakan ekstensi html atau htm.
1.5. Struktur Dasar Dokumen HTML
Struktur dasar dokumen HTML seperti yang telah dijelaskan pada sub-bab 1.3,
contohnya adalah :
FILE : coba.html
<HTML> Judul
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
Selamat Datang
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 3
Gambar 1.1 Hasil coba.html
1.6. Menyusun Heading dan Sub-Heading
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks
yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :
<Hx></Hx> dimana :
Nilai x = 1, 2, 3, 4, 5, 6
FILE : heading.html
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1>
<H2>Belajar HTML</H2>
<H3>Belajar HTML</H3>
<H4>Belajar HTML</H4>
<H5>Belajar HTML</H5>
<H6>Belajar HTML</H6>
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 4
Gambar 1.2 Hasil heading.html
1.6.1. Atribut pada Heading
Heading mempunyai atribut ALIGN dengan value/nilainya adalah center, left,
right. Contoh beriut ini adalah format penulisan atribut Align pada tag <Hx> :
<Hx ALIGN=[left, center, right]> Teks Judul <Hx>
Dimana :
- Left : Untuk mengatur teks rata kiri
- Center : Untuk mengatur teks rata tengah
- Right : Untuk mengatur teks rata kanan
Pemrograman Web : HTML & JavaScript 5
FILE : athead.html
<HTML>
<HEAD>
<TITLE> Membuat Atribut Judul </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Belajar HTML</H1>
<H2 ALIGN="right">Belajar HTML</H2>
<H3 ALIGN="left">Belajar HTML</H3>
<H4 ALIGN="center">Belajar HTML</H4>
<H5 ALIGN="right">Belajar HTML</H5>
<H6 ALIGN="left">Belajar HTML</H6>
</BODY>
</HTML>
Gambar 1.3 Hasil athead.html
1.7. Membuat Horizontal Rule
Horizontal Rule atau biasa yang disebut dengan garis horisontal, sering
dipakai dalam pembuatan disain website. Tag yang digunakan untuk membuat
garis horisontal adalah tag <HR>. Tag ini bukanlah merupakan tag yan
berpasangan, oleh sebab itu tag ini tidak perlu diakhiri dengan tag slash-nya
</HR>. c Panjang garis horisontal yang terbentuk adalah panjangnya sama
dengan panjang jendela browsernya. Kendati demikian, tag <HR> mempunyai
beberapa atribut yang dapat menentukan panjang garis, lebar garis, warna
garis, posisi garis, dan efek bayang-bayang tiga dimensi.
Pemrograman Web : HTML & JavaScript 6
FILE : hr.html
<HTML>
<HEAD>
<TITLE> Membuat horozontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal
<HR>
</BODY>
</HTML>
Horizontal Rule
ditampilkan sepanjang
jendela browsernya
Gambar 1.4 Hasil hr.html
1.7.1. Atribut pada <HR>
Atribut yang terdapat pada <HR> adalah width, length, dan color.
Penggunaan atribut-atribut pada <HR> adalah sebagai berikut :
<HR ALIGN=a WIDTH=x SIZE=y COLOR = z NOSHADE>
Dimana :
- a = posisi garis (left, center, right)
- x = panjang garis (satuan pixel)
- y = tinggi garis (satuan pixel)
- z = warna garis
- NOSHADE = Garis tampil tanpa bayang-bayang tiga dimensi
Pemrograman Web : HTML & JavaScript 7
FILE : athr.html
<HTML>
<HEAD>
<TITLE> Membuat atribut horizontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal dengan berbagai atribut<BR>
<HR ALIGN="left" WIDTH=300 SIZE=5 COLOR=blue NOSHADE>
<HR ALIGN="center" WIDTH=400 SIZE=10 COLOR=green>
<HR ALIGN="right" WIDTH=150 SIZE=5 COLOR="pink" NOSHADE>
</BODY>
</HTML>
Gambar 1.5 Hasil athr.html
1.8. Fungsi Break
Line Break <BR> adalah tag yang berguna untuk membuat baris baru pada
sebuah dokumen HTML. Tag ini secara otomatis akan membuat baris baru tanpa
memberi baris kosong dan akan memotong sebarisan teks pada tempat dimana tag
<BR> tersebut diletakkan/disisipkan.
FILE : br.html
<HTML>
<HEAD>
<TITLE> Membuat baris baru </TITLE>
</HEAD>
<BODY>
Bunga Nusa Indah <BR>
Berwarna <BR> Merah
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 8
Gambar 1.6 Hasil br.html
1.9. FORMAT TEKS
Format teks pada dokumen HTML dapat menampilkan berbagai jenis font,
ukuran font, dan warna font pada layar. Atribut-atribut yang digunakan pada
<FONT> adalah SIZE, FACE, dan COLOR. Tag <FONT> ini merupakan tag
berpasangan, oleh sebab itu harus diakhiri dengan tag slash-nya </FONT>.
<FONT SIZE=x FACE=y COLOR=z> teks </FONT>
Dimana :
- x = ukuran font (1-7)
- y = jenis font (Comic Sans MS, Arial, Courier, dll)
- z = warna font (red, blue, green)
Ukuran font (SIZE) dapat diperbesar dan diperkecil dari nilai 1 sampai
dengan 7 (default font adalah 3). Sedangkan untuk jenis huruf digunakan atribut
FACE yang mempunyai nilai atau jenis huruf yang lazim pada pengolah kata
(Misalnya pada MS. WORD) yaitu Comic Sans MS, Arial, Courier, dll). Penulisan
jenis font ini harus sesuai dengan font yang sudah lazim digunakan.
Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai
pada atribut tersebut. Ada dua bentuk pemberian nilai warna yang bisa dipakai
pada atribut COLOR ini, yaitu yang pertama dengan menggunakan nama warna
itu sendiri, contohnya blue, red, dan green. Sedangkan yang kedua adalah dengan
menggunakan kode RGB suatu warna seperti, #000000 = Black, #0000FF.
Pemrograman Web : HTML & JavaScript 9
Selain itu, format teks dapat dilakukan secara khusus untuk menunjukkan
perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut.
Pembedaan ditampilkan dalam bentuk huruf tebal (bold) menggunakan
<B>teks</B>, miring (italic) menggunakan <I>teks</I>, digaris bawahi (underline)
menggunakan
<U>teks</U>, subscript menggunakan <SUB>teks</SUB>, superscript
menggunakan <SUP>teks</SUP>, dan semacamnya.
Beberapa Contoh Warna :
Tabel 1.1 Contoh
warna
Nama Warna Heksa Nama Warna Hexsa
Antiquewhite FAEBD7 Gold FFD700
Aqua 00FFFF Gray 808080
Black 000000 Green 008000
Blue 0000FF Greenyellow ADFF2F
Brown A52A2A Honeydew FOFFFO
Coral FF7F50 Magenta FF00FF
Cyan 00FFFF Orange FFA500
Darkgreen 006400 Skyblue 87CEEB
FILE : font.html
<HTML>
<HEAD>
<TITLE> Format Teks </TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" FACE="Courier" COLOR="red">Bunga Nusa Indah </FONT><BR>
Berwarna <BR> Merah
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 10
Gambar 1.7 Hasil font.html
1.10. Pewarnaan Background
Web site yang dibuat, kurang menarik jika belum disisipkan warna pada
latar belakang dari sebuah dokumennya. Pewarnaan pada latar belakang
dokumen dapat digunakan atribut pada <BODY>, yaitu atribut BGCOLOR.
Adapaun warna yang dapat digunakan bisa dilihat pada tabel 1.1 di atas.
Pembuatan warna background haruslah disesuaikan dengan warna teksnya.
Jangan sampai Web site yang dibuat, nantinya akan menampilkan tulisan-tulisan
yang tidak dapat dibaca.
FILE : warna.html
<HTML>
<HEAD>
<TITLE> Pemberian warna background </TITLE>
</HEAD>
<BODY BGCOLOR="honeydew">
<FONT SIZE="3" FACE="Courier" COLOR="magenta">Teks dengan warna magenta dan
menggunakan warna background honeydew </FONT><BR>
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 11
Gambar 1.8 Hasil warna.html
-----------------------------
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah seluruh contoh file program yang ada di dalam BAB 1 dengan menggunakan
kode-kode HTML !
Latihan Untuk Dikerjakan Di Rumah
Buatlah dokumen HTML dengan ketentuan sebagai berikut :
1. Judul pada title bar latihan pertamaku
2. Judul dokumen SURAT LAMARAN KERJA dengan ukuran heading 2
3. Isi dokumen Tentang surat lamaran kerja dengan ukuran font 3 (default), jenis
font Arial, dan warna teks biru
4. Berikan warna kuning pada backgrounnya
5. Berikan pemisah garis antara judul dokumen dan isi dokemen (ukuran dan warna
garis tentukan sendiri)
Pemrograman Web : HTML & JavaScript 12
BAB 2
PARAGRAF
2.1. Paragraf
Penahkah Anda belajar Bahasa Indonesia untuk materi mengarang ? Jika
Anda mengarang suatu dokumen, maka karangan Anda akan tersusun beberapa
paragraf atau biasanya disebut dengan alinea. Pada dokumen HTML, untuk
memisahkan antar paragraf satu dengan paragraf lainnya dapat digunakan tag <P>.
Tag ini merupakan tag yang berpasangan sehingga seharusnya ditutup dengan
tag slash-nya </P>. Jika Anda mempunyai 3 paragraf, untuk paragraf pertama
dan kedua, masing-masing <P> tidak harus ditutup dengan
</P>, dan pada paragraf ke tiga harus Anda tuliskan tag slash-nya </P>.
Jadi setiap paragraf haruslah dimulai dengan memberikan tag <P>. Di
akhir masing-masing paragraf tidak diharuskan menuliskan </P> sebagai akhir
paragraf. Namun jangan lupa, setiap pergantian pargraf harus dimulai dengan <P>
kembali.
FILE : paragraf.html
<HTML>
<HEAD>
<TITLE> Membuat Paragraf </TITLE>
</HEAD>
<BODY>
<P>Teks pada paragraf pertama
<P>Teks pada paragraf kedua
<P>teks pada paragraf ketiga</P>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 13
Gambar 2.1 Hasil paragraf.html
Pada Gambar 2.1, browser tersebut membperlihatkan bahwa setiap paragraf
akan ditampilkan dengan loncat satu baris. Jika teks yang akan ditampilkan
melebihi lebar jendela browser, maka secara otomatis tek yang tidak cukup akan
ditampilkan pada baris berikutnya seperti pada contoh di bawah ini.
FILE : parag1.html
<HTML>
<HEAD>
<TITLE> Teks melebihi lebar jendela </TITLE>
</HEAD>
<BODY>
<P>Teks baris pertama pada paragraf pertama. teks pada baris kedua.
Teks pada baris ke tiga. Teks pada pada baris keempat.
<P>Teks pada paragraf kedua
<P>Teks pada paragraf ketiga</P
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 14
Gambar 2.2 Hasil parag1.html
Pada initnya jika ingin mendefiniskan paragraf baru, maka harus dituliskan
secara eksplisit tag <p>-nya. Tidak ada pengaruhnya jika meng-enter berapa
kalipun di dalam editornya (NotePad), karena semuanya akan dianggap sebagai
suatu paragraf dengan sebelumnya.
Ukuran jendela browser akan menyebabkan hasil yang berbeda-beda.
Browser akan melakukan pemformatan tampilan sesuai dengan ukuran
windownya. Yang harus diingat adalah jangan menggunakan tag
<P> untuk menyisipkan baris kosong. Gunakan tag <BR> seperti pada Bab 1 sebagai
penggantinya.
Tag <P> mempunyai atribut ALIGN dengan value (nilai) adalah left, center
dan right. Penulisannya sebagai berikut :
<P ALIGN = [left, center, right]> teks paragraf </P>
FILE : parag2.html
<HTML>
<HEAD>
<TITLE>Paragraf dengan ALIGN </TITLE>
</HEAD>
<BODY>
<P ALIGN = "left">Teks baris pertama pada paragraf pertama. teks pada baris
kedua. Teks pada baris ke tiga. Teks pada pada baris keempat.
<P ALIGN = "center">Teks pada paragraf kedua
<P ALIGN = "right">Teks pada paragraf ketiga</P
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 15
Gambar 2.3 Hasil parag2.html
2.2. Karakter Spesial
Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih
kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti
akhir tag HTML. Jika Anda menginginkan browser untuk menampilkan karakter-
karakter tersebut, maka harus disisipkan entitas karakter ke dalam source HTML.
Entitas karakter mempunyai 3 bagian : sebuah ampersand (&), sebuah nama
entitas atau sebuah # dan nomor entitas, dan terakhir adalah tanda titik
koma/semicolon (;).
Kelebihan dengan menggunakan nama dibanding dengan nomor adalah
nama mudah diingat. Sedangkan kekurangannya adalah tidak semua browser
mendukung nama entitas terbaru; sedangkan dukungan untuk nomor entitas
hampir ada pada setiap browser. Entitas karakter pada dokumen HTML
mempunyai sifat case-sensitive. Artinya, dalam menuliskan entitas kareakter
tersebut, haruslah diperhatikan huruf kecil dan huruf kapitalnya. Misalnya :
Penulisan © akan berbeda dengan © atau &Copy; atau
&cOPy;
Pemrograman Web: HTML & JavaScript 16
Tabel 2.1 Karakter Spesial / Entitas Karakter
Nama Entitas Nomor Karakter Keterangan Hasil
© © Copyright
® ® Registered trademark
™ Trademark
¡ Non-breaking space
& & Ampersand &
« « Angle quotation mark (left) <<
» » Angle quotation mark (right) >>
" " Tanda kutip
< < Lebih kecil <
> = Lebih besar >
× × Tanda kali x
÷ ÷ Tanda bagi
FILE : karakter.html
<HTML> Gambar 2.4 Hasil karakter.html
<HEAD>
<TITLE>Karakter Spesial </TITLE>
</HEAD>
<BODY>
Untuk membuat teks dicetak lebih tebal, Anda harus menggunakan tag <B>
dan juga harus ditutup dengan tag slash-nya </B>
</BODY>
</HTML>
Gambar 2.4 Hasil karakter.html
Pemrograman Web: HTML & JavaScript 17
2.3. Daftar / List
Daftar atau List digunakan untuk menguraikan daftar sesuatu, misalnya
jenis-jenis list yang terdapat pada dokumen HTML tidak berbeda jauh dengan list-
list yang berada pada dokumen MS. WORD, yaitu :
1. List dengan nomor (Ordered List / Numbering)
2. List tanpa nomor/dengan suatu lambang (Unordered List / Bullet)
3. List definisi
List dengan nomor adalah model daftar yang setiap itemnya diberi nomor.
Sedangkan list tanpa nomor setiap itemnya menggunakan sebuah lambang/bullet.
Selain kedua list tadi, ada juga list yang memberi uraian terhadap suatu item
dalam daftar yang disebut list definisi.
2.3.1. List dengan Nomor / OrderedList / OL
Seperti yang telah diuraikan di atas, bahwa list dengan nomor selalu
menggunakan angka-angka 1, 2, 3, 4, 5,........dst sampai dengan banyaknya
jumlah item dalam list tersebut. Dalam penomorannya, tidaklah harus
menggunakan format nomor seperti di atas, tetapi dapat juga digunakan format
penomoran lainnya, seperti huruf kecil, huruf kapital angka romawi kecil ataupun
angka romawi besar.
Secara umum penggunaan OL, dapat dilihat seperti di bawah ini :
FILE : ol1.html
<HTML>
<HEAD>
<TITLE>List dengan nomor standar </TITLE>
</HEAD>
<BODY>
<H3>DAFTAR MAHASISWA SISTEM INFORMASI</H3>
<OL>
<LI>Ardhi Sasongko
<LI>Endah Mawar Indah
<LI>Sandy Nayoan
<LI>Dewi Aritonang
<LI>Rosarie Kumala Dewi
<LI>Yusrizal Fahmi
<LI>Umniy Salamah
<LI>Seto Tri Wasono
<LI>Yudi Renaldo
<LI>Met Sekendra
</OL>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 18
Gambar 2.5 Hasil ol1.html
Selain format standar penomoran di atas, dapat juga dilakukan penomoran
seperti yang ditunjukkan oleh tabel 2.2 berikut ini :
Tabel 2.2 Format penomoran pada OrderedList
Jenis Penomoran Keterangan
A Ditampilkan menggunakan abjad huruf besar/kapital
a Ditampilkan menggunakan abjad huruf kecil
I Ditampilkan menggunakan angka romawi besar
i Ditampilkan menggunakan angka romawi kecil
Format penomoran di atas digunakan pada atribut TYPE pada tag <OL>.
Jika tidak digunakan atribut TYPE, maka default format penomoran adalah
menggunakan angka biasa (1, 2, 3, .....). Selain TYPE, atribut yang dimiliki oleh
tag <OL> adalah atribut START. Atribut START digunakan untuk mendefinisikan
nomor awal yang akan digunakan pada ORDERED LIST <OL>.
Pemrograman Web: HTML & JavaScript 19
FILE : ol2.html
<HTML>
<HEAD>
<TITLE>List dengan abjad besar </TITLE>
</HEAD>
<BODY>
<H3>NAMA-NAMA BUNGA</H3>
<OL TYPE = "A" START="2">
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja
</OL>
</BODY>
</HTML>
Gambar 2.6 Hasil ol2.html
Pada gambar 2.6 di atas, format penomoran menggunakan TYPE = A,
artinya adalah daftar yang akan ditampilkan menggunakan huruf besar/kapital.
Sedangkan atribut START=2, dimaksudkan sebagai awal dari penomoran yang
dimulai pada abjad ke-2 yaitu dimulai dari huruf B.
2.3.2. List Tanpa Nomor / UnOrderedList / UL
List tanpa nomor dapat ditampilkan dengan format/bullet standar berupa
noktah/bulatan. Jenis ini dapat diubah menjadi disk (bentuk noktah tetapi tidak
diarsir tengahnya dan bentuk kotak/box.
Untuk dapat mengubah bentuk bulletnya dapat digunakan atribut TYPE
pada tag <UL>, yang penggunaannya sama dengan tag <OL>. Berbeda dengan
tag <OL>, tag <UL> tidak mempunyai atribut start.
Pemrograman Web: HTML & JavaScript 20
FILE : ul1.html
<HTML>
<HEAD>
<TITLE>UnorderedList dengan bullet standar </TITLE>
</HEAD>
<BODY>
<H3>NAMA-NAMA BUNGA</H3>
<UL>
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja
</UL>
</BODY>
</HTML>
Gambar 2.7 Hasil ul1.html
Contoh berikut ini, akan ditampilkan beberapa jenis bullet lainnya yaitu circle
dan square
Pemrograman Web : HTML & JavaScript 21
FILE : ul2.html
<HTML>
<HEAD>
<TITLE>UnorderedList dengan bullet lainnya </TITLE>
</HEAD>
<BODY>
<H3>NAMA-NAMA BUNGA</H3>
<UL TYPE="circle">
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja
</UL>
<H3>NAMA-NAMA BUNGA</H3>
<UL TYPE="square">
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja
</UL>
</BODY>
</HTML>
Gambar 2.8 Hasil ul2.html
Pemrograman Web: HTML & JavaScript 22
2.3.3. List Definisi / Definition List
List definisi digunakan untuk memberikan uraian terhadap suatu item di
dalam daftar. Tag yang digunakan pada Definition List adalah tag <DL>, tag
<DT>, dan tag <DD>. Semua tag tersebut merupakan tag yang berpasangan,
sehingga harus diakhiri dengan tag slash-nya masing-masing. Contoh berikut ini
merupakan penerapan dari definition list.
FILE : dl.html
<HTML>
<HEAD>
<TITLE>Membuat Definition List </TITLE>
</HEAD>
<BODY>
<H3>Daftar Definisi</H3>
<DL>
<DT>Bunga Mawar</DT>
<DD>Berwarna merah, merah muda, bahkan ada yang putih serta berduri</DD>
<DT>Bunga Melati</DT>
<DD>Berwarna putih, bentuknya kecil, bisa juga digunakan untuk hiasan
sanggul</DD>
</DL>
</BODY>
</HTML>
Gambar 2.9 Hasil dl.html
----------------------------
Pemrograman Web: HTML & JavaScript 23
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah seluruh contoh file program yang ada di dalam BAB 2 dengan menggunakan
kode-kode HTML !
Latihan Untuk Dikerjakan Di Rumah
Buatlah dokumen HTML dengan ketentuan sebagai berikut :
1. Judul pada title bar latihan BAB 2
2. Judul dokumen PT. EXSAKOMPUTINDO dengan ukuran heading 1. Diakhir judul
sisipkan karakter spesial
Registered trademark
3. Isi dokumen terdiri atas 3 paragraf (Tentukan sendiri isi masing masing
paragrafnya, ukuran font dan jenis font)
- Paragraf 1 : Posisi paragraf berada di kanan jendela browser
- Paragraf 2 : Posisi paragraf berada di tengah jendela browser dan isi
dokumen pada paragraf ini harus mengandung ORDERED LIST /
UNORDERED LIST
- Paragraf 3 : Posisi paragraf berada di kiri jendela browser
4. Berikan warna pada backgrounnya (bebas)
5. Berikan warna pada teksnya (bebas)
Pemrograman Web: HTML & JavaScript 24
BAB 3
FORMAT GAMBAR
3.1. Format Gambar GIF dan JPEG
Format gambar pada komputer sangat banyak dan beragam seperti
BMP, GIF, JPEG, dll. Format gambar JPG/JPEG merupakan file yang sangat
padat. File ini berukuran kecil meski gambarnya besar. Hal ini tentu saja akan
menguntungkan bagi pengunjung web site, dimana kecepatan yang lebih baik
sewaktu loading akan tercapai. Namun karena kompresi yang terlalu padat seperti
itu akan membuat kwalitas grafisnya kurang bagus.
JPEG dibuat oleh Joint Photografic Expert Group dan mulai dikenal luas
sejak tahun 1990. JPEG mampu menghasilkan gambar dengan ukuran 24 bit
per pixel, sehingga sangat efektif untuk menyimpan gambar-gambar dengan
kwalitas foto.
Format gambar GIF dapat menampilkan gambar yang lebih bagus dari
JPEG, sayangnya ukuran file menjadi sangat besar. Ini benar-benar kendala
bagi pengunjung website yang akan akan mendownload gambar. Meski
demikian ada dua hal yang membuat GIF menarik untuk dipakai dalam sebuah
web, yaitu apa yang disebut dengan Progressive Loading dan Transparance.
Progressive Loading adalah suatu kemampuan untuk menampilkan gambar
secara berangsur-angsur atau bertahap dari resolusi terendah sampai dengan
resolusi tertinggi.
Transparance memungkinkan user untuk menentukan bagian-bagian
mana dari gambar yang akan didefinisikan sebagai bagian yang transparan.
Sebuah gambar/bagian gambar yang transparan akan ditembus oleh gambar latar
belakang ketika ditampilkan di web.
3.2. Menampilkan Gambar Dalam Web
Sebuah dokumen HTML terasa ada yang kurang jika di dalamnya tidak
terdapat gambar-gambar. Gambar dapat berbicara seribu kata, bahkan gambar
terkadang berbicara lebih baik dari penjelasan teks yang panjang lebar. Gambar di
dalam sebuah website dapat menjadi daya tarik sendiri bagi pengunjungnya.
Umumnya browser dapat menampilkan gambar-gambar yang mempunyai
Pemrograman Web: HTML & JavaScript 25
format Graphic Interchange Format (GIF), dan Joint Photographic Experts Group
(JPEG). Setiap gambar akan membutuhkan waktu tambahan untuk didownload
dan memperlambat awal penampilan suatu dokumen dalam browser, oleh sebab
itu disarankan berhati-hati dalam pemilihan sebuah gambar dan menyertakannya
di dalam sebuah dokumen. Yang harus diperhatikan adalah sedapat mungkin
file gambar yang akan digunakan harus terlebih dahulu berada dalam satu
direktori dengan file dokumen html yang akan dibuat.
Gambar dapat dihasilkan melalui software grafik, antara lain Corel Draw,
Photoshop, PaintShop, MS- Paint, dan software grafik lainnya. Gambar juga
dapat dihasilkan melalui Scanner atau kamera digital, yang kemudian dikonversi
ke format grafik yang dimengerti oleh web. Untuk menampilkan gambar, diperlukan
tanda IMAGE <IMG> sebagai berikut :
<IMG SRC=namagambar.ekstension>
Nama gambar harus ditulis sesuai dengan nama file berikut ekstensionnya,
misalnya nama gambar bunga.gif, bola.jpg atau lainnya. Penulisan nama file
gambar bersifat case-sensitive. Gambar dapat ditempatkan dimana saja, seperti
juga obyek HTML lainnya. Atribut-atribut yang digunakan pada tag <IMG> selain
SRC adalah ALIGN yang mempunyai nilai bottom (default), middle, dan top,
VSPACE (Vertical Space), HSPACE (Horizontal Space), ALT, WIDTH, HEIGHT.
Ada juga jenis gambar animasi, yang di dalamnya tersimpan beberapa gambar GIF
yang disatukan di dalam suatu file, file ini dibuat untuk membuat gambar yang
nantinya dapat bergerak (animasi). Gambar animasi dapat dibuat melalui Editor
Animasi seperti GIF-Construction Set, GIF Builder, Animation Shop, dan software
lainnya. Pemunculan animasi GIF pada web menggunakan teknik yang sama
dengan GIF biasa yaitu dengan <IMG>.
Contoh berikut ini, akan ditampilkan sebuah gambar di dalam browser :
Pemrograman Web: HTML & JavaScript 26
FILE : image.html
<HTML>
<HEAD>
<TITLE>Menampilkan Gambar </TITLE>
</HEAD>
<BODY>
<IMG SRC="FISH.GIF">
</BODY>
</HTML>
Gambar 3.1 Hasil image.html
3.3. Mengatur Ukuran Gambar
Seperti yang sudah dijelaskan di atas, tag <IMG> mempunyai atribut
WIDTH dan HEIGHT untuk menentukan lebar dan tinggi gambar. Gambar yang
sudah ada dapat diperkecil maupun diperbesar. Tetapi haruslah diingat,
terkadang dengan memberikan atribut ini akan dapat menghasilkan bentuk gambar
yang tidak proporsional. Untuk mengubah ukuran gambar sebaiknya
menggunakan aplikasi yang bisa digunakan untuk mendapatkan ukuran gambar.
Sekarang perhatikan gambar 3.1. Gambar tersebut adalah sesuai dengan yang
aslinya dalam hal ukuran dan bentuknya. Selanjutnya akan diubah menjadi ukuran
seperti gambar 3.2 di bawah ini:
Pemrograman Web: HTML & JavaScript 27
FILE : image1.html
<HTML>
<HEAD>
<TITLE>Menampilkan Gambar Yang Sudah Diedit </TITLE>
</HEAD>
<BODY>
<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25">
</BODY>
</HTML>
Gambar 3.2 Hasil image1.html
3.4. Mengatur Posisi Gambar
Posisi gambar dapat diatur dengan menambahkan atribut ALIGN pada
tag <IMG>. Atribut ALIGN mempunyai nilai/value yaitu bottom, middle dan top.
Pemrograman Web: HTML & JavaScript 28
FILE : image2.html
<HTML>
<HEAD>
<TITLE>Menampilkan Posisi Gambar</TITLE>
</HEAD>
<BODY>
<P>sebuah gambar
<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="bottom">
Ikan
<P>Sebuah gambar
<IMG SRC="kipas.GIF" WIDTH="50" HEIGTH="25" ALIGN="middle">
Kipas angin
<P>Sebuah gambar
<IMG SRC="salju.GIF" WIDTH="50" HEIGTH="25" ALIGN="top">
Boneka salju
</P>
</BODY>
</HTML>
Gambar 3.3 Hasil image2.html
Selain ketiga posisi gambar di atas, ada lagi posisi gambar lainnya, yaitu left
dan right seperti contoh di bawah ini :
Pemrograman Web: HTML & JavaScript 29
FILE : image3.html
<HTML>
<HEAD>
<TITLE>Menampilkan Posisi Gambar left dan right</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="left">
Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk
kesehatan.
Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat
berguna bagi kesehatan.
<BR><BR><BR><BR><BR><BR>
<P>
<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="right">
Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk
kesehatan.
Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat
berguna bagi kesehatan.
</P>
</BODY>
</HTML>
Gambar 3.4 Hasil image3.html
3.5. Spasi Antar Teks Dengan Gambar
Jarak antar teks dengan gambar dapat diatur dengan menambahkan atribut
HSPACE untuk horizontal Space dan VSPACE untuk vertical SPACE. Perhatikan
contoh di bawah ini :
Pemrograman Web: HTML & JavaScript 30
FILE : image4.html
<HTML>
<HEAD>
<TITLE>Jarak teks dengan gambar</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="left" VSPACE="25"
HSPACE="25">
Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk
kesehatan.
Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat
berguna bagi kesehatan.
Ada ikan yang hidupnya di air tawar, seperti ikan mas, gurame, dll. Banyak pula
ikan yang hidup di air laut
diantaranya ikan tuna, tongkol, cumi, dan lain-lain. Namun ada pula ikan yang
hidup di air payau, contohnya
adalah bandeng. Cara pengolahan ikan supaya baunya tidak anyir adalah dengan
memberikan perasan jeruk
nipis sebelum ikan di simpan di dalam lemari pendingin.
</P>
</BODY>
</HTML>
Gambar 3.5 Hasil image4.html
3.6. Teks Pengganti Untuk Gambar
Adakalanya browser yang kita akses tidak dapat menampilkan gambar.
HTML menyediakan suatu mekanisme yang memberitahu pengguna internet
apa yang kurang pada web tersebut apabila tidak bisa mendapatkan
gambarnya. Untuk menampilkan teks sebagai pengganti gambar yaitu dengan
Pemrograman Web: HTML & JavaScript 31
menambahkan atribut ALT pada tag <IMG>. Pada beberapa browser teks pada
atribut ALT akan ditampilkan secara mengambang untuk memberitahu maksud
dari gambar, teks ini muncul apabila Anda menaruh mouse pointer di atas gambar
agak lama.
FILE : image5.html
<HTML>
<HEAD>
<TITLE>Mengganti Gambar Dengan Teks</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="FISH.GIF" ALIGN="left" ALT="Ikanikan yang menyehatkan">
Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk
kesehatan.
Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat
berguna bagi kesehatan.
</P>
</BODY>
</HTML>
Gambar 3.6 Hasil image5.html
3.7. Memberikan Border Pada Gambar
Gambar yang telah dimasukkan ke dalam dokumen HTML dapat diberikan
bingkai (border). Namun sangat jarang sekali disainer menmbahkan bingkai pada
gambarnya. Hal ini menyebabkan tampilan gambar jadi kurang begitu menarik.
Pemrograman Web: HTML & JavaScript 32
Untuk menambahkan bingkai pada gambar, dapat digunakan atribut BORDER pada
tag <IMG>. Atribut BORDER ini mempunyai nilai/value dalam satuan piksel.
FILE : image6.html
<HTML>
<HEAD>
<TITLE>Menampilkan Gambar diBingkai</TITLE>
</HEAD>
<BODY>
<P>sebuah gambar
<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="middle" BORDER="5">
Ikan
</P>
</BODY>
</HTML>
Gambar 3.7 Hasil image6.html
3.8. Gambar Eksternal
Selain gambar internal, yang telah dijelaskan sebelumnya, ada juga
gambar yang diperoleh secara eksternal yaitu gambar yang dipanggil dari web
lainnya / alamat yang berbeda dari direktori dokumen HTML berasal.
-------------------------------------
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Pemrograman Web: HTML & JavaScript 33
Buatlah seluruh contoh file program yang ada di dalam BAB 3 dengan menggunakan
kode-kode HTML !
Latihan Untuk Dikerjakan Di Rumah
Setelah Anda membuat latihan untuk dikerjakan di rumah BAB 2, sisipkan sebuah
gambar yang berhubungan dengan bidang dari PT. EXSAKOMPUTINDO. Jarak
antara gambar dengan teks ditentukan sesuai dengan proporsionalnya. Gambar
diletakkan di bawah judul dokumen dan berada di sebelah kiri dari seluruh isi
dokumen.
Pemrograman Web: HTML & JavaScript 34
BAB 4
LINK
Dalam HTML untuk membuat suatu link menggunakan elemen Anchor yang
dinyatakan dengan tag berpasangan <A></A>. Dalam browser link
biasanya dinyatakan dalam teks dengan garis bawah. Jika seorang pemakai
mengklik teks pada suatu link, browser akan membawa pemakai ke path dari link
tersebut. Untuk membuat link, digunakan suatu atribut tambahan HREF pada
tag <A>. jika suatu link dinyatakan sebagai <A HREF=image6.html> Gambar
6 </A>, ini berarti file yang dituju oleh link tersebut adalah image6.html,
sedangkan Gambar 6 adalah teks yang akan ditampilkan browser dengan garis
bawah sebagai penanda suatu link.
Sintaks :
<A HREF=url>Teks Penjelas</A>
4.1 URL
URL merupakan kependekkan dari Uniform Resource Locator. URL adalah
istilah untuk menyatakan alamat suatu dokumen yang harus ditampilkan jika
link pada teks tersebut di-klik.
Ada terdapat dua macam URL dalam pemrograman HTML, URL Relatif dan
URL Absolut. Pada URL Relatif pemrogram tidak perlu menuliskan secara lengkap
definisi dari URL tetapi cukup menyebutkan nama direktori dan nama file
dokumen HTMLnya saja; nama direktori pun tidak perlu dituliskan apabila nama
file dokumen link berada dalam satu direktori dengan nama dokumen yang
mengandung link tersebut.
URL Absolut dipergunakan apabila letak dokumen link berada pada
komputer atau server web yang berbeda.
4.2 Link ke dokumen lain
Untuk membuat link ke dokumen lain yang haruskan diperhatikan adalah
letak/nama direktori dari file yang akan dituju, seperti yang telah dijelaskan di atas.
Pemrograman Web: HTML & JavaScript 35
Berikut ini contoh link ke dokumen lain pada direktori yang sama dan pada
direktori yang berbeda.
<A HREF=link.html> Link ke file pada direktori yang sama. </A>
<A HREF = ../Tes Link> Link ke file di atas direktori saat ini </A>
<A HREF = images/fish.gif> Link ke gambar ikan pada direktori images</A>
Semua contoh diatas menjelaskan cara untuk membuat link ke dokumen lain
pada mesin atau host yang sama. Tetapi jika Anda ingin membuat link ke
dokumen lain pada host yang berbeda. Untuk melakukan hal ini, Anda cukup
menyebutkan nama host tersebut, misalnya:
<A HREF=http://www.lagu.com/padi.html> Syair Lagu Padi </A>
4.3 Link ke bagian tertentu dalam suatu dokumen
Anda juga dapat membuat link untuk melompat ke bagian tertentu dalam
suatu dokumen. Untuk itu, Anda tidak hanya perlu membuat link saja, tetapi juga
perlu menyediakan suatu nama anchor. Jika link adalah sarana yang
membawa Anda ke lokasi informasi yang Anda tuju, maka nama anchor
merupakan lokasi yang menjadi tujuan dari link tersebut.
Untuk membuat link yang membawa pembaca ke suatu bagian tertentu
dalam dokumen, cukup sertakan tanda # setelah nama file dalam suatu URL.
Kemudian ikuti dengan nama yang Anda berikan pada bagian dokumen yang
dituju.
Misalnya, dalam dokumen Anda belajar.html terdapat suatu bagian yang
bertemakan HTML dan Anda menginginkan pembaca untuk bisa langsung
menuju ke bagian tersebut jika mengklik suatu link, maka Anda akan
menggunakan link seperti berikut:
<A HREF=#HTML>Trik HTML </A>
Anda juga dapat menuliskan link teesebut secara lengkap seperti ini :
<A HREF=belajar.html#HTML> Trik HTML</A>,
atau <A HREF=http://www.html.com/belajar.html#HTML> Trik HTML</A>.
Pemrograman Web: HTML & JavaScript 36
Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Jadi
untuk link di atas, anchor Anda akan terlihat seperti ini:
<A NAME=HTML> Belajar Trik HTML </A>
4.4 Link ke E-mail
Mungkin Anda pernah melihat link mailto pada bagian bawah Web page
yang digunakan untuk menghubungi pembuat page jika Anda mempunyai suatu
pertanyaan atau masalah.
URL mailto menyebabkan browser untuk menampilkan suatu kotak dialog di
mana pembaca mengetikan pesan-pesannya. Berikut ini adalah contoh suatu link
ke e-mail :
<A HREF = mailto:[email protected]> Silakahkan kirim mail untuk Anton </A>
Link.html merupakan contoh penggunaan link pada dokumen HTML.
Link.html:
<HTML>
<HEAD>
<TITLE>My homepage</TITLE>
</HEAD>
<BODY>
<A HREF = "http://www.microsoft.com"> Link ke Web Microsoft</A>
<br>
<A HREF ="email.html">Link ke dokumen email.html</A>
<br>
<A HREF = "mailto:[email protected]"> Silahkan kirim mail untuk Anton </A>
<br>
<A HREF="#HTML">Trik HTML </A>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<A NAME="HTML"> Belajar Trik HTML </A>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 37
Link.html ditampilkan dalam browser web :
4.5 Membuka Link ke Jendela Baru
Mungkin Anda pernah meng-klik link yang secara otomatis membuka
jendela/ halaman baru pada browser.
Untuk melakukan hal tersebut, Anda hanya perlu menambahkan perintah
TARGET=_BLANK pada link tersebut. Berikut ini adalah contoh suatu link jika
di-klik akan membuka halaman baru pada Browser Anda:
<A HREF = link.html TARGET=_blank> Link Dengan Membuka Jendela Baru </A>
Link1.html merupakan contoh penggunaan target link.
Link1.html:
<HTML>
<HEAD>
<TITLE>My homepage</TITLE>
</HEAD>
<BODY>
<A HREF = http://www.microsoft.com TARGET=_blank> Link ke Web Microsoft</A>
<br>
</BODY>
</HTML>
Satu hal lagi tentang link.... Anda bisa membuat link ke situs web milik orang lain
Pemrograman Web: HTML & JavaScript 38
tanpa
harus meminta ijin terlebih dahulu. Hal ini sah dan sangat bisa diterima. Link inilah
yang menyebabkan Web menjadi World Wide Web.
-----------------------------------
Latihan Untuk Dikerjakan Di Laboratorium Komputer
1. Buatlah seluruh contoh file program yang ada di BAB 4 dengan menggunakan
kode- kode HTML !
2. Lanjutkan Tugas yang ada di BAB 3 tentang PT. EXSAKOMPUTINDO
dengan memberikan link pada Produk dan Jenis Layanan perusahaan serta
link untuk Email perusahaan !
Pemrograman Web: HTML & JavaScript 39
BAB 5
TABEL
Banyak orang suka menampilkan infrormasinya dalam bentuk tabel, hal ini
disebabkan karena bentuknya yang ringkas dan mudah untuk dibaca. Informasi
dalam tabel yang biasanya ditampilkan secara ringkas dalam beberapa baris
saja membuat orang lebih mudah untuk menyerapnya.
5.1 Dasar-Dasar Pembuatan Tabel
Tag TABLE digunakan untuk menyajikan informasi dalam bentuk tabel, yang
berbentuk baris dan kolom. Sintaks dasar Tag TABLE :
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
Tag <TR></TR> merupakan tag yang digunakan untuk pendefinisian suatu
baris, sedangkan tag <TD></TD> merupakan tag yang digunakan untuk
pendefinisian suatu kolom. Berikut implementasi membuat suatu tabel yang terdiri
atas 2 baris dan 3 kolom.
<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Tag <TH></TH> merupakan tag pengganti <TD></TD> yang dapat digunakan
untuk pendefinisian judul kolom dalam suatu tabel. Secara otomatis text yang
berada dalam sel tersebut akan berbentuk tebal (bold). Contoh penggunaan :
<TABLE>
<TR>
<TH>No.</TH>
<TH>Nama Mahasiswa</TH>
<TH>NIM</TH>
</TR>
</TABLE>
Pemrograman Web I: HTML & JavaScript 40
Isi/tulisan yang akan disajikan didalam tabel selalu dituliskan diantara tag
kolom. Atribut-atribut pada tag TABLE:
Atribut Keterangan Contoh
Menentukan letak tabel, di kiri, <TABLE ALIGN=RIGHT><TR> <TD>
ALIGN=LEFT, RIGHT,
kanan atau tengah jendela Tabel disebelah kanan</TD></TR>
ATAU CENTER
browser </TABLE>
<TABLE ALIGN=RIGHT
Gambar untuk latar belakang
BACKGROUND = URL BACKGROUND =latar.gif>
pada tabel
</TABLE>
<TABLE ALIGN=RIGHT BGCOLOR=
BGCOLOR = #rrggbb
Warna untuk latar belakang tabel RED><TR><TD> Tabel dengan latar
atau nama warna
belakang merah </TD></TR></TABLE>
Lebar border tabel. Jika <TABLE BORDER=5> TR> <TD> Tabel
BORDER=n BORDER=0 berarti tabel tersebut dengan border 5 pixel
tidak punya border </TD></TR></TABLE>
<TABLE BORDER=1 BORDERCOLOR
BORDERCOLOR =
=RED> <TR> <TD> Tabel dengan
#rrggbb atau nama Warna border
border berwarna merah
warna
</TD></TR></TABLE>
<TABLE BORDER=1
BORDERCOLOR- BORDERCOLORLIGHT =RED> <TR>
Warna border pada bagian kiri
LIGHT= #rrggbb atau <TD> Tabel dengan warna border pada
dan atas
nama warna bagian kiri dan atas berwarna merah
</TD></TR></TABLE>
<TABLE BORDER=1
BORDERCOLOR- BORDERCOLORDARK =BLUE> <TR>
Warna border pada bagian kanan
DARK= #rrggbb atau <TD> Tabel dengan warna border pada
dan bawah
nama warna bagian kanan dan bawah berwarna biru
</TD></TR></TABLE>
<TABLE BORDER=0
CELLSPACING=5 CELLPADDING=4>
CELLSPACING=n Jarak antar sel-sel dalam table
</TABLE>
<TABLE BORDER=0
Jarak antara sel dengan CELLSPACING=5 CELLPADDING=4>
CELLPADDING=n
bordernya dalam suatu tabel
</TABLE>
Pemrograman Web : HTML & JavaScript 41
HEIGHT=n
Tinggi tabel <TABLE HEIGHT= 25%></TABLE>
HEIGHT=n%
WIDTH=n
Lebar Tabel <TABLE WIDTH = 25%></TABLE>
WIDTH=n%
<TABLE BORDER=1 WIDTH=20%
VALIGN = TOP, atau
Perataan vertikal teks VALIGN=TOP> <TR> <TD> Teks
BOTTOM
berada di atas </TD></TR></TABLE>
Kecuali atribut CELLSPACING, CELLPADDING semua atribut pada tag
TABLE bisa digunakan pada tag TD, berikut ini tambahan atribut pada tag TD.
Atribut Keterangan Contoh
<TR><TD>Kolom pertama</TD>
Jumlah kolom yang digabungkan <TD COLSPAN=2> Kolom
COLSPAN=n
menjadi satu kolom kedua</TD>
</TR>
<TR>
<TD ROWSPAN=2>1</TD>
Jumlah baris yang digabungkan
ROWSPAN <TD>2</TD>
menjadi satu baris
<TD>3</TD>
</TR>
VALIGN=MIDDLE, TOP Perataan vertikal teks dalam
atau BOTTOM suatu sel.
Contoh membuat tabel dalam html
: Nama File: Table.html :
<HTML>
<BODY>
<P>Setiap tabel dimulai dengan sebuah tag
TABLE.<BR> Setiap baris dimulai dengan sebuah
tag TR.<BR> Setiap data dimulai dengan sebuah
tag TD.</P>
<H4>Satu Kolom:</H4>
<TABLE BORDER=1>
<TR>
<TD>Kolom 1</TD>
</TR>
</TABLE>
<H4>Satu Baris dan Tiga Kolom:<H4>
<TABLE BORDER=1>
<TR>
<TD>Kolom 1 </TD>
<TD>Kolom 2 </TD>
<TD>Kolom 3 </TD>
</TR>
Pemrograman Web I: HTML & JavaScript 42
</TABLE>
<H4>Dua Baris Tiga Kolom:</H4>
<TABLE BORDER=1>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
<H4>Tabel Tanpa Border:</H4>
<TABLE BORDER=0>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Table.html ditampilkan pada browser web :
5.2 Membuat Judul Tabel
Pemrograman Web I: HTML & JavaScript 43
Tag CAPTION digunakan untuk menyajikan informasi judul sebuah tabel,
yang secara default berada di tengah pada bagian atas tabel.
Contoh penggunaan tag CAPTION :
<TAB
LE>
<CAPTION>Judul Sebuah Tabel</CAPTION>
<TR>
<TD></TD>
</TR
>
</T
ABL
E>
Penambahan atribut align=bottom pada tag CAPTION dapat digunakan
untuk menempatkan judul pada bagian bawah tabel. Contoh tabel dengan Caption
dan Header: Nama File: Caption.html :
<HTML>
<BODY>
<H4>This tabel has a caption, and a thick border</H4>
<TABLE BORDER=4>
<CAPTION>This is a Caption</CAPTION>
<TABLE BORDER=6>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
<H4>Tabel Header:</H4>
<TABLE BORDER=1>
<TR>
<TH>Nama</TH>
<TH>Alamat</TH>
<TH>Telepon</TH>
</TR>
<TR>
<TD>Jon Keboy</TD>
<TD>Jl. Angker Indah</TD>
<TD>7878787</TD>
</TR>
<TR>
<TD>Frank de Pengky</TD>
<TD>Jl. Ongol-ongol</TD>
<TD>7779988</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Pemrograman Web I: HTML & JavaScript 44
Caption.html ditampilkan pada browser web :
5.3 Mengatur Posisi Tabel
Atribut ALIGN digunakan untuk mengatur posisi sebuah tabel, yang secara
default berada di sebelah kiri halaman web.
Contoh penggunaan atribut ALIGN :
<TABLE ALIGN=CENTER>
<TR>
<TD></TD>
</TR
>
</T
ABL
E>
Penambahan atribut align=center pada tag TABLE dapat digunakan untuk
menempatkan tabel pada tengah halaman.
5.4 Fungsi Cellspacing dan Cellpadding
Atribut CELLSPACING digunakan untuk mengatur jarak antar sel-sel dalam
sebuah tabel, sedangkan atribut CELLPADDING digunakan untuk mengatur
jarak antara sel dengan bordernya dalam sebuah tabel.
Contoh
penggunaan: Nama
File: Cell.html :
<HTML>
Pemrograman Web I: HTML & JavaScript 45
<BODY>
<H4>Without cellpadding:</H4>
<TABLE BORDER=1>
<TR>
<TD>First</TD>
<TD>Row</TD>
</TR>
<TR>
<TD>Second</TD>
<TD>Row</TD>
</TR>
</TABLE>
<H4>With Cellpadding:</H4>
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>First</TD>
<TD>Row</TD>
</TR>
<TR>
<TD>Second</TD>
<TD>Row</TD>
</TR>
</TABLE>
<H4>With Cellspacing:</H4>
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>First</TD>
<TD>Row</TD>
</TR>
<TR>
<TD>Second</TD>
<TD>Row</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Cell.html ditampilkan pada browser web :
Pemrograman Web I: HTML & JavaScript 46
5.5 Fungsi Rowspan dan Colspan
Atribut ROWSPAN digunakan untuk menggabungkan beberapa baris sel-sel
dalam sebuah tabel, sedangkan atribut COLSPAN digunakan untuk
menggabungkan beberapa kolom sel dalam sebuah tabel. Contoh penggunaan:
Nama File: Span.html :
<HTML>
<BODY>
<H4>Cell that spans two columns:</H4>
<TABLE BORDER=1>
<TR>
<TH>Name</TH>
<TH COLSPAN=2>Telephone</TH>
</TR>
<TR>
<TD>Bill Gates</TD>
<TD>555 77 854</TD>
<TD>555 77 855</TD>
</TR>
</TABLE>
<H4>Cell that spans two rows:</H4>
<TABLE BORDER=1>
<TR>
<TH>Name:</TH>
<TD>Bill Gates</TD>
</TR>
<TR>
<TH
ROWSPAN=2>Telephone</TH>
<TD>555 77 854</TD>
</TR>
<TR>
<TD>555 77 855</TD>
</TR>
</TABLE>
Pemrograman Web I: HTML & JavaScript 47
<H4>Empty Cell</H4>
<TABLE BORDER=1>
<TR>
<TD>Ini Text</TD>
<TD>Ini Text</TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
<P>As you can see, one of the cells has no border. <BR>
That because it is empty. Try to insert a space in the
cell.<BR> Still it has no border.</P>
<P>The trick is to insert a nonbreaking space in the
cell.<BR> Nobreaking space is a character entity. </P>
</BODY>
</HTML>
Span.html ditampilkan pada browser web :
5.6 Fungsi Atribut WIDTH
Atribut WIDTH digunakan untuk mengatur lebar tabel maupun lebar sel dalam
sebuah tabel. Untuk pengaturan lebar setiap kolom, biasanya atribut WIDTH
hanya digunakan pada baris pertama dalam sebuah tabel. Hal ini untuk
mempermudah pengaturan dan mempersingkat kode program. Contoh
Pemrograman Web I: HTML & JavaScript 48
penggunaan:
<TABLE BORDER=1 WIDTH=500>
<TR
>
<TH WIDTH=10 ALIGN=CENTER>No.</TH>
<TH WIDTH=300 ALIGN=CENTER>Nama Mahasiswa</TH>
<TH WIDTH=190 ALIGN=CENTER>NIM</TH>
</TR
>
<TR
>
<TD>1.</TD>
<TD>Agus Santoso</TD>
<TD>78053189</TD>
</TR
>
<TR
>
<TD>2.</TD>
<TD>Budi Prayitno</TD>
<TD>81709766</TD>
</TR
>
</T
ABL
E>
5.7 Fungsi Atribut ALIGN dan VALIGN
Atribut ALIGN digunakan untuk mengatur posisi text dalam sel secara
horizontal (LEFT, RIGHT dan CENTER), sedangkan atribut VALIGN digunakan
untuk mengatur posisi text secara vertical (TOP, MIDDLE dan BOTTOM). Contoh
penggunaan:
<TABLE BORDER=1 WIDTH="500">
<TR
>
<TH WIDTH="10" ALIGN="CENTER">No.</TH>
<TH WIDTH="100" ALIGN="CENTER">Nama Mahasiswa</TH>
<TH WIDTH="300" ALIGN="CENTER">Alamat</TH>
</TR
>
<TR
>
<TD VALIGN=TOP>1.</TD>
<TD VALIGN=TOP>Agus Santoso</TD>
<TD>Jl. Ketapang No. 7 RT 005/01 Jatipadang Ps. Minggu
Jakarta Selatan</TD>
</TR
>
<TR
>
<TD VALIGN=BOTTOM>2.</TD>
<TD VALIGN=BOTTOM>Budi Prayitno</TD>
Pemrograman Web I: HTML & JavaScript 49
<TD>Jl. Raya Jagakarsa No. 36 RT 010/05 Jagakarsa Cilandak
Jakarta Selatan</TD>
</TR
>
</T
ABL
E>
5.8 Pewarnaan Pada Tabel
Pengaturan warna pada tabel sering digunakan untuk mempercantik tampilan
pada laporan termasuk memberi tanda pada isi sel-sel yang dianggap penting.
Atribut BGCOLOR sering digunakan untuk mengatur warna background tabel
atau dapat juga menggunakan atribut BACKGROUND apabila ingin memberi
latar belakang berupa gambar dalam sebuah tabel. Contoh penggunaan:
Nama File: Warna.html :
<HTML>
<BODY>
<TABLE WIDTH=400 BORDER=1>
<TR BGCOLOR="yellow">
<TH AlIGN="left">Money Spent on...</TH>
<TH ALIGN="right">January</TH>
<TH ALIGN="right">FEBRUARY</TH>
</TR>
<TR>
<TD ALIGN="left">Clothes</TD>
<TD ALIGN="right">$241.10</TD>
<TD ALIGN="right">$50.20</TD>
</TR>
<TR>
<TD ALIGN="left">Make-Up</TD>
<TD ALIGN="right">$30.00</TD>
<TD ALIGN="right">$44.45</TD>
</TR>
<TR>
<TD ALIGN="left">Food</TD>
<TD ALIGN="right">$730.40</TD>
<TD ALIGN="right">$650.00</TD>
</TR>
<TR>
<TH ALIGN="left">Sum</TH>
<TH ALIGN="right">$1001.50</TH>
<TH ALIGN="right">$744.65</TH>
</TR>
</TABLE>
</BODY>
</HTML>
Warna.html ditampilkan pada browser web :
Pemrograman Web I: HTML & JavaScript 50
5.9 Fungsi Atribut NOWRAP
Atribut NOWRAP digunakan untuk mengatur lebar sel agar disesuaikan dengan
lebar text dalam sebuah sel. Hal ini untuk mempermudah pengaturan lebar kolom
agar isi sel tidak turun ke bawah apabila lebarnya kurang. Contoh penggunaan:
<TABLE BORDER=1 WIDTH="500">
<TR>
<TH WIDTH="10" ALIGN="CENTER">No.</TH>
<TH WIDTH="100" ALIGN="CENTER">Nama Mahasiswa</TH>
<TH WIDTH="300" ALIGN="CENTER">Alamat</TH>
</TR>
<TR>
<TD VALIGN="TOP">1.</TD>
<TD VALIGN="TOP" NOWRAP>Agus Imam Santoso</TD>
<TD>Jl. Ketapang No. 7 RT 005/01 Jatipadang Ps. Minggu
Jakarta Selatan</TD>
</TR>
<TR>
<TD VALIGN="BOTTOM">2.</TD>
<TD VALIGN="BOTTOM">Budi Katsuhama Prayitno</TD>
<TD>Jl. Raya Jagakarsa No. 36 RT 010/05 Jagakarsa Cilandak
Jakarta Selatan</TD>
</TR>
</TABLE>
Pemrograman Web I: HTML & JavaScript 51
Latihan Untuk Dikerjakan Di Rumah
Buatlah sebuah file html dengan nama klien.html yang berisi daftar klien dari
PT. EXSAKOMPUTINDO dengan menggunakan tabel seperti contoh di bawah ini !
Daftar Klien PT. EXSAKOMPUTINDO
1. Klien Swasta
2. Klien Pemerintah / BUMN
3. Klien Perguruan Tinggi
Pemrograman Web I: HTML & JavaScript 52
BAB 6
FRAME
6.1. Konsep Frame
Frame atau yang biasa juga disebut bingkai, merupakan salah satu fasilitas yang
disediakan oleh web browser dengan cara membagi Windows-Client Area menjadi
beberapa bagian (sub window). Pembagian ini dapat dilakukan secara horisontal maupun
vertikal. Banyak sekali yang dapat dilakukan oleh frame seperti tampilan web yang lebih
bervariasi.
Meskipun frame memiliki kemampuan untuk membagi jendela browser sebanyak
yang diinginkan tapi dalam prakteknya, tidak akan lebih dari dua atau tiga buah frame yang
digunakan. Karena penggunaan frame yang berlebihan hanyalah akan menimbulkan
kebingungan.
Dasar penggunaan frame adalah memiliki dua buah dokumen yang berbeda, yaitu :
1. Layout documents (dokumen tata letak)
Dokumen ini biasanya tidak menampilkan isi apapun, fungsinya hanya untuk membagi
jendela menjadi beberapa bagian. Dalam frame, dokumen ini dibuat dengan menggunakan
sepasang tag
<FRAMESET>.
2. Content Documents (dokumen isi).
Dokumen ini adalah dokumen yang nantinya akan mengisi frame tersebut. Dokumen ini
adalah merupakan dokumen HTML biasa, namun dokumen ini nantinya akan
divariasikan melalui Hyperlink, dimana link dapat dibuat pada satu bingkai dapat
ditampilkan pada bingkai yang lain. Dokumen ini didefinisikan dengan tag <FRAME
SRC=url>
6.2. Membuat bingkai FRAME baris dan kolom, serta variasi FRAME
Membuat bingkai/frame sama dengan membuat layout documents yaitu dengan
menggunakan sepasang tag <FRAMESET>...</FRAMESET>. Dalam pembuatan frame, tidak
menggunakan sepasang tag <BODY>...</BODY> sebagaimana jika ingin membuat dokumen
HTML. Sepasang tag <BODY> tersebut akan digantikan dengan sepasang tag
<FRAMESET>. Sehingga bentuk struktur dokumen HTMLnya akan berubah menjadi seperti di
bawah ini :
<HTML>
<HEAD>
<TITLE>.......<TITLE>
</HEAD>
<FRAMESET>
Pemrograman Web: HTML & JavaScript 53
Isi Bingkai
</FRAMESET>
</HTML>
Seperti halnya dengan tabel, FRAME dapat juga terbagi atas baris dan kolom. Untuk
membagi frame menjadi beberapa baris, dapat menambahkan atribut ROWS pada tag
<FRAMESET>. Sedangkan untuk membuat beberapa kolom dapat menambahkan
atribut COLS pada tag
<FRAMESET>. Masing-masing atribut tersebut mempunyai nilai yang dapat ditentukan
dengan piksel atau persentase. Misalnya : <FRAMESET COLS=100, 100> berarti frame akan
terdiri atas dua
kolom yang masing-masing kolom lebarnya sebanyak 100 piksel. Atau dapat juga
dituliskan
<FRAMESET COLS=30%, 70%> yang berarti frame terdiri atas 2 kolom dengan lebar
kolom pertama 30% dari jendela browsernya dan kolom kedua lebarnya 70%.
Aturan-aturan dasar dalam pembagian baris dan kolom pada tag <FRAMESET> adalah
sebagai berikut :
1. Dalam pembagian baris/kolom, setiap nilai dipisahkan dengan tanda koma ,
Baris/kolom harus mempunyai nilai berdasarkan banyak baris/kolom tersebut. Misalnya
nilai 25%, 25%, 50% akan membuat tiga buah baris/kolom pada frame.
2. Jika nilai yang diberikan berupa persentase, maka nilai-nilai tersebut jangan kurang dan
jangan lebih dari nilai 100%.
3. Untuk membuat sisa nilai persentase, biasanya menggunakan tanda *. Misalnya : 25%,*
Artinya akan membuat dua buah baris/kolom yang pertama lebarnya 25% dan yang
kedua akan menggunakan berapa pun lebar dari ruang yang tersisa.
4. Ada juga penggunaan : COLS=*, 2* Hal ini berarti pembagian frame menjadi dua kolom,
dimana kolom kedua memiliki lebar dua kali lebih besar dari kolom pertama.
Perhatikan contoh berikut ini :
FILE : frame1.html
<HTML>
<HEAD>
<TITLE>Frame 2 kolom</TITLE>
</HEAD>
<FRAMESET COLS="25%,*">
<FRAME SRC="url">
<FRAME SRC="url">
</FRAMESET>
</HTML>
Pemrograman Web: HTML & JavaScript 54
Gambar 6.1 Hasil frame1.html
Tag <FRAME SRC=url> digunakan untuk mengisi sebuah frame yang akan menunjukkan
sebuah alamat/lokasi suatu file yang akan ditampilkan. Penerapannya sama dengan tag
<IMG SRC=url>. Jumlah tag <FRAME SRC=url> tergantung pada jumlah frame kolom
atau baris yang ditentukan dari tag <FRAMESET>. Jika frame terdiri atas dua baris atau
kolom, maka sebanyak dua tag <FRAME SRC=url> harus dituliskan. Seperti contoh di
atas, telah didefinisikan dua buah kolom pada tag <FRAMESET> maka akan terdapat pula
dua buah tag <FRAME SRC=url>. Perhatikan contoh berikut ini :
FILE : frame2.html
<HTML>
<HEAD>
<TITLE>Frame 3 baris</TITLE>
</HEAD>
<FRAMESET ROWS="25%,25%,*">
<FRAME SRC="parag1.html">
<FRAME SRC="image3.html">
<FRAME SRC="table.html">
</FRAMESET>
</HTML>
Pemrograman Web: HTML & JavaScript 55
Gambar 6.2 Hasil frame2.html
Pada contoh di atas, dibuat 3 buah baris frame dengan ukuran baris pertama dan
kedua sebesar 25% serta baris ketiga berukuran sisanya, yaitu 50%. Frame baris
pertama akan menampilkan file parag1.html, frame baris kedua akan menampilkan
image3.html dan frame baris ketiga akan menampilkan file table.html. Hasilnya dapat
dilihat pada gambar 6.2.
Pembuatan frame tidak hanya terbatas pada frame baris dan frame kolom.
Anda dapat memvariasikan frame baris dan frame kolom. Variasi berikut ini akan membuat
dua buah frame kolom, dimana kolom kedua akan dibagi menjadi empat buah frame baris.
FILE : frame3.html
<HTML>
<HEAD>
<TITLE>Variasi frame baris dan kolom</TITLE>
</HEAD>
<FRAMESET ROWS="100%" COLS="30%,*">
<FRAME SRC="url">
<FRAMESET ROWS="25%,25%,25%,25%">
<FRAME SRC="url">
<FRAME SRC="url">
<FRAME SRC="url">
<FRAME SRC="url">
</FRAMESET>
</FRAMESET>
</HTML>
Pemrograman Web: HTML & JavaScript 56
Gambar 6.3 Hasil frame3.html
6.3. Format Tampilan Frame
Frame yang telah dibuat dapat diformat sesuai dengan keinginan pembuatnya.
Format pada frame antara lain MARGIN, BORDER, NORESIZE, dan SCROLLING.
Semua format tersebut merupakan atribut yang terdapat pada tag <FRAME>.
6.3.1. Atribut Margin
Dokumen HTML yang mengisi sebuah frame dapat ditentukan marginnya, baik
margin kiri maupun margin kanan. Selain margin kiri dan kanan, dapat ditentukan pula
margin atas dan bawah.
Untuk menentukan margin-margin tersebut digunakan atribut MARGINWIDTH dan MARGINHEIGHT
ada tag <FRAME>. Atribut-atribut ini menggunakan value/nilai dalam satuan piksel.
Perhatikan contoh berikut ini :
FILE : frame4.html
<HTML>
<HEAD>
<TITLE>Penggunaan Margin</TITLE>
</HEAD>
<FRAMESET ROWS="30%,30%,*">
<FRAME SRC="parag2.html">
<FRAME SRC="parag2.html" MARGINHEIGHT="50" MARGINWIDTH="50" >
<FRAME SRC="parag2.html" MARGINHEIGHT="20" MARGINWIDTH="20" >
</FRAMESET>
</HTML>
Pemrograman Web: HTML & JavaScript 57
Gambar 6.4 Hasil frame4.html
6.3.2. Atribut Border
Atribut Border berguna untuk mengatur tebal-tipisnya garis pemisah antar frame.
Jika tidak diinginkan adanya garis pemisah, dapat menambahkan nilai 0 pada atribut
Border. Perhatikan contoh berikut ini :
FILE : frame5.html
<HTML>
<HEAD>
<TITLE>Menghilangkan Border</TITLE>
</HEAD>
<FRAMESET COLS="30%,30%,*" BORDER="0">
<FRAME SRC="parag2.html">
<FRAME SRC="ul2.html">
<FRAME SRC="table.html">
</FRAMESET>
</HTML
Pemrograman Web: HTML & JavaScript 58
Gambar 6.5 Hasil frame5.html
6.3.3. Atribut Noresize
Jika frame yang telah dibuat tidak dapat diubah ukurannya ketika ditampilkan pada
browser, maka dapat ditambahkan atribut NORESIZE pada tag <FRAME>. Perhatikan contoh
berikut ini :
FILE : frame6.html
<HTML>
<HEAD>
<TITLE>Penggunaan Atribut NORESIZE</TITLE>
</HEAD>
<FRAMESET COLS="30%,30%,*">
<FRAME SRC="parag2.html" NORESIZE>
<FRAME SRC="ul2.html" NORESIZE>
<FRAME SRC="table.html" NORESIZE>
</FRAMESET>
</HTML>
Pemrograman Web: HTML & JavaScript 59
Gambar 6.6 Hasil frame6.html
6.3.4. Atribut Scrolling
Jika isi dokumen HTML yang dimasukkan ke dalam frame mempunyai karakter yang
panjang dan lebar nya melebihi panjang dan lebar jendela browsernya, maka frame dari isi
dokumen tersebut akan mengandung scroll kiri-kanan atau scroll atas-bawah (Batang
penggulung). Perhatikan gambar berikut ini : (Frame mengandung Scroll)
Gambar 6.7 Frame mengandung SCROLL kiri-kanan dan atas-bawah
Jika Scroll tersebut akan dihilangkan, maka tambahkan atribut SCROLLING=no pada tag
<FRAME>.
Pemrograman Web: HTML & JavaScript 60
FILE : frame7.html
<HTML>
<HEAD>
<TITLE>Penggunaan Atribut SCROLLING</TITLE>
</HEAD>
<FRAMESET COLS="30%,30%,*">
<FRAME SRC="parag2.html" SCROLLING = "no" >
<FRAME SRC="ul2.html" SCROLLING = "no">
<FRAME SRC="table.html" SCROLLING = "no">
</FRAMESET>
</HTML>
Gambar 6.8 Hasil frame7.html
6.4. Link dan Target pada Frame
Hal mendasar yang perlu diketahui adalah tentang kemana halaman yang menjadi
target sebuah link akan ditampilkan. Misalkan akan dibuat dua buah kolom frame. Kolom
frame pertama berisikan dokumen HTML yang berisi beberapa teks penghubung untuk
link. Bila teks penghubung link tersebut diklik, maka akan ditampilkan pada halaman baru
yang akan menggantikan halaman kolom frame pertama tersebut. Jika ingin kembali ke
halaman semula, maka harus dibuat link baliknya.
Salah satu keuntungan menggunakan frame adalah dapat menampilkan target
link pada frame lain dalam satu jendela browser, dengan tanpa harus membuat link balik
ke halaman utama. Atau dapat juga menampilkannya pada jendela browser yang baru.
Untuk menampilkan link tersebut yaitu dengan cara menambahkan atribut TARGET pada
tag
<A> dan atribut NAME pada tag <FRAME>. Nama yang diberikan kepada atribut NAME
harus sama dengan nama pada atribut TARGET. Misalnya pada dokumen HTML :
<A HREF=url TARGET=target1>teks_penghubung</A>
Pemrograman Web: HTML & JavaScript 61
Maka pada pada frame tempat menampilkan target sebuah link harus diberi nama sesuai
dengan nama pada atribut TARGET di atas, yaitu :
<FRAME SRC=url NAME=target1>
Adapun langkah-langkahnya adalah sebagai berikut :
1. Buat dua buah frame kolom dengan lebar masing-masing adalah 30% dan 70%
<HTML>
<HEAD>
<TITLE>Link dan Target pada Frame</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="url">
<FRAME SRC="url" NAME="target1">
</FRAMESET>
Gambar 6.9 Hasil frame8.html
2. Buat dokumen HTML yang di dalamnya terdiri atas empat buah link dan beri
nama atribut TARGET =target1
Pemrograman Web: HTML & JavaScript 62
FILE : frame9.html
<HTML>
<HEAD>
<TITLE>Link dan Target pada Frame</TITLE>
</HEAD>
<BODY>
<H2>Links to :</H2>
<HR>
<A HREF="ul1.html" TARGET="target1">File ul1</A><BR>
<A HREF="ul2.html" TARGET="target1">File ul2</A><BR>
<A HREF="table.html" TARGET="target1">File table2</A><BR>
<A HREF="caption.html" TARGET="target1">File table3</A><BR>
</BODY>
</HTML>
Gambar 6.10 Hasil frame9.html
3. Buka dokumen frame 8.html, gantilah url pada kolom frame pertama dengan
frame9.html
sehingga menjadi :
FILE : frame8.html
<HTML>
<HEAD>
<TITLE>Link dan Target pada Frame</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="frame9.html">
<FRAME SRC="url" NAME="target1">
</FRAMESET>
</HTML>
Pemrograman Web: HTML & JavaScript 63
Gambar 6.11 Hasil frame8.html setelah url diganti dengan
frame9.html
Lihat Gambar 6.11, kolom frame pertama telah diisi oleh file frame9.html. Kemudian klik-lah
salah satu link tersebut (misalnya klik File ul1), hasilnya dapat dilihat pada kolom frame
yang kedua, seperti gambar di bawah ini :
Gambar 6.12 Hasil frame8.html setelah File ul1 diklik
Selain nama yang diberikan pada atribut TARGET diatas, dapat juga nama pada atribut
TARGET tersebut diganti menjadi :
_self : Menampilkan link target pada frame yang sama.
_parent : Menampilkan link target yang akan menutup seluruh jendela browser
_top : sama dengan _parent
_blank : Menampilkan link target pada jendela browser yang baru
Pemrograman Web: HTML & JavaScript 64
Gambar 6.13 Target=_blank akan menampilkan jendela browser yang baru
6.5. Tag <NOFRAME>
Mungkin ada beberapa jendela browser yang tidak dapat menampilkan sebuah
frame hal ini disebabkan oleh keterbatasan browser tersebut dalam mendukung fitur frame.
Hal ini dapat diatasi dengan memberitahukan kepada pengunjung web bahwa halaman
dokumen HTML hanya bisa dilihat dengan browser yang mendukung fitur frame. Caranya
adalah dengan menuliskan sepasang tag
<NOFRAMES>. Perhatikan contoh berikut ini :
FILE : frame10.html
<HTML>
<HEAD>
<TITLE>Link dan Target pada Frame</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="frame9.html">
<FRAME SRC="url">
</FRAMESET>
<NOFRAMES>
Ma'af, halaman ini hanya dapat dibuka oleh browser yang mendukung fitur frame
</NOFRAMES>
</HTML>
---------------------------------
Pemrograman Web: HTML & JavaScript 65
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah seluruh contoh file program yang ada di dalam BAB 6 dengan menggunakan kode-
kode HTML !
Latihan Untuk Dikerjakan Di Rumah
Buat sebuah halaman web yang terdiri dari dua buah frame window secara vertikal dengan
ukuran masing-masing 30% dan 70%. Frame sebelah kiri berisi link menu-menu: Home, Profile,
Products, Customers dan Contact Us. Tampilkan isi menu tersebut di frame sebelah kanan. Isi
file .html yang ditampilkan adalah tergantung dari pilihan Menu yang dibuat pada Frame sebelah
kiri.
Pemrograman Web: HTML & JavaScript 66
BAB 7
FORMULIR
7.1. Dasar-dasar Formulir
Pernahkah Anda melihat tampilan sebuah halaman web berbentuk formulir yang
digunakan untuk mengisi data-data? Seperti misalnya dalam pembuatan email yang
mewajibkan pengunjung web untuk mengisi data-datanya? Bagaimana formulir tersebut
nantinya akan diproses? Anda pun dapat merancang sebuah formulir dengan menggunakan
kode-kode HTML dan menentukan metode pengiriman informasi yang dimasukkan melalui
formulir tersebut. Namun HTML mempunyai keterbatasan dalam pengolahan data-data yang
dimasukkan ke dalam formulir tersebut.
Dialog interaktif antara WEB-Client dan WEB-Server dilakukan dengan bantuan
Common Gateway Interface (CGI), yaitu sebuah program yang dapat berinteraksi dengan Client.
Program ini dapat berbentuk executeable (EXE) atau Script.
Pada dasarnya bahasa pemrograman apa saja dapat digunakan sebagai CGI program,
misalnya C, C++, PERL, SHELL, atau Database Management (SQL) dan lain-lainnya.
Ada dua buah metode pengiriman yang digunakan dalam mengirim data yang telah
diisikan ke dalam formulir :
1. GET
Input yang didapat dari formulir akan dikirim ke server sebagai parameter bagi program
yang menjalankannya.
2. POST
Input yang didapat dari formulir akan dikirim ke server dan dianggap sebagai Standard Input
(STDIN) untuk program yang memanggilnya.
Dengan adanya dua metode seperti di atas, metode POST mampu menyimpan data
dalam jumlah banyak. Jika data yang diinput mempunyai banyak field pada suatu formaulir,
maka sangat cocok menggunakan metode POST karena metode ini dapat menangani
data jauh lebih baik dari pada metode GET.
Dalam konvensi HTML, Nama PATH yang menggunakan kata cgi-bin (commmon
gateway interface-binary), adalah mengaktifkan program yang ada di server tersebut. Misalnya
program di server bernama getform, maka instruksi yang ditulis adalah : ACTION=/cgi-
bin/getform.
Dengan demikian hasil masukkan formulir akan dikirim ke server dan selanjutnya server akan
menjalankan program getform tersebut, Bila server melihat dalam PATH ada kata cgi-bin maka
server tidakmengambil file HTML, melainkan menjalankan program. Jawaban dari program akan
dikirim server ke client, karena itu jawaban tersebut harus dalam format HTML..
Pemrograman Web: HTML & JavaScript 67
7.2. Pembuatan Formulir
Sebuah form dibentuk dengan pasangan tag <FORM>......<FORM>. Tag form ini
memiliki dua buah atribut yaitu METHODE dan ACTION. Atribute Method digunakan untuk
menunjukkan metode pengiriman informasi ke Web Server, apakah menggunakan metode
GET atau POST. Atribut Action digunakan untuk menentukan kemana Informasi form akan
diserahkan. Jika menggunakan CGI Script pada Web Server maka tentukanlah URL-script-nya.
Struktur dasar formulir adalah sebagai berikut :
<FORM METHOD=POST ACTION=url-script>
<INPUT> berfungsi untuk mendefinisikan kontrol-kontrol
</FORM>
7.2.1. Tipe Input
Tipe Input menyatakan suatu tipe kontrol yang akan digunakan. Macam-macam atribut
tipe input yang dapat diolah oleh FORM antara lain :
1. Text Boxes
2. Radio Button
3. Check Boxes
4. Password Boxes
5. Submit Button dan Reset Button
6. Seleksi/Check List
7. Text Area
Pada umumnya Tag <INPUT> mempunyai atribut TYPE, NAME, VALUE, SIZE,
dan MAXLENGTH. Misalnya :
<INPUT TYPE=text NAME=nama SIZE=25> <INPUT
Dimana :
INPUT = Sebuah Tag
TYPE = Tipe Input
NAME = Definisi Variabel
nama = Nama Variabel
SIZE = Panjang Karakter
7.2.1.1. Text Boxes
Text Boxes digunakan untuk mengumpulkan data seperti nama orang, alamat, dan
lain sebagainya. Perhatikan contoh berikut ini :
Pemrograman Web: HTML & JavaScript 68
FILE : form1.html
<HTML>
<HEAD>
<TITLE>INPUT dengan Text Area </TITLE>
</HEAD>
<BODY>
<PRE>
<FORM METHOD="POST">
Masukkan NIM :<INPUT TYPE="text" NAME="nim" SIZE="8">
Masukkan NAMA :<INPUT TYPE="text" NAME="nama" SIZE="20">
Masukkan AlAMAT :<INPUT TYPE="text" NAME="alamat" SIZE="30">
</FORM>
</PRE>
</BODY>
</HTML>
Gambar 7.1 Hasil form1.html
Dari file form1.html tertulis Masukkan NIM, Masukkan NAMA, dan Masukkan
ALAMAT merupakan teks yang akan ditampilkan pada jendela browser. TYPE=text
merupakan tipe kontrol atau tipe input yang digunakan. Atribut NAME nim, nama, dan alamat
adalah nama yang diberikan untuk kotak teks tersebut, nama ini akan dikembalikan oleh
browser sebagai identifier untuk informasi yang diminta oleh pemakai. Atribut SIZE
merupakan ukuran panjang kotak teks dengan satuan karakter.
7.2.1.2. Radio Button
Radio Button digunakan bagi pengunjung web yang akan memilih satu pilihan dari
banyak pilihan yang tersedia. Misalnya : Jenis Kelamin (Pria/Wanita). Perhatikan contoh
berikut ini :
Pemrograman Web: HTML & JavaScript 69
FILE : form2.html
<HTML>
<HEAD>
<TITLE>INPUT dengan Radio Button </TITLE>
</HEAD>
<BODY>
<PRE>
<FORM METHOD="POST">
<H2>Jenis Kelamin :</H2><BR>
<INPUT TYPE="radio" NAME="kelamin" VALUE="pria">Pria<BR>
<INPUT TYPE="radio" NAME="kelamin" VALUE="wanita">Wanita
</FORM>
</PRE>
</BODY>
</HTML>
Gambar 7.2 Hasil form2.html
7.2.1.3. Check Boxes
Check Boxes digunakan bagi pengunjung web yang akan memilih satu atau lebih
pilihan dari banyak pilihan yang tersedia. Misalnya : Hobby (Membaca, menari,
memancing). Perhatikan contoh berikut ini :
Pemrograman Web: HTML & JavaScript 70
FILE : form3.html
<HTML>
<HEAD>
<TITLE>INPUT dengan Check Boxes </TITLE>
</HEAD>
<BODY>
<PRE>
<FORM METHOD="POST">
<H3>Hobi :</H3><BR>
<INPUT TYPE="Checkbox" NAME="membaca" VALUE="membaca">Membaca<BR>
<INPUT TYPE="Checkbox" NAME="menyanyi" VALUE="menyanyi">Menyanyi<BR>
<INPUT TYPE="Checkbox" NAME="menari" VALUE="menari">Menari<BR>
<INPUT TYPE="Checkbox" NAME="memancing" VALUE="mamancing">Memancing<BR>
<INPUT TYPE="Checkbox" NAME="olahraga" VALUE="olahraga">Olah Raga<BR>
</FORM>
</PRE>
</BODY>
</HTML>
Gambar 7.3 Hasil form3.html
7.2.1.4. Password Boxes
Password adalah teks yang dimasukkan sebagai input, namun teks tidak ditampilkan
pada layar. Layar akan menampilkan tanda asteriks, atau bullet. Fasilitas ini biasanya
digunakan dalam Web Site yang memerlukan suatu password tertentu untuk dimasukkan
atau memasukkan kode-kode tertentu seperti password setelah melakukan Login ke suatu
web. Perhatikan contoh berikut ini :
FILE : form4.html
<HTML>
<HEAD>
<TITLE>INPUT dengan Password Boxes </TITLE>
</HEAD>
<BODY>
<PRE>
Silakan Anda Login Terlebih Dahulu<BR>
<FORM METHOD="POST">
LOGIN : <INPUT TYPE="Text" NAME="login" SIZE="20"><BR>
PASSWORD : <INPUT TYPE="password" NAME="kode"
SIZE="20"><BR>
</FORM>
</PRE>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 71
Gambar 7.4 Hasil form4.html
7.2.1.5. Submit Button dan Reset Button
Submit Button berfungsi mengirimkan semua input yang sudah diberikan ke Server.
Proses ini sesuai dengan atribut ACTION yang diberikan pada tag <FORM>. Sedangkan
Reset Button berfungsi membersihkan semua input yang sudah diberikan.
Pada akhir sebuah formulir umumnya tombol SUBMIT dan RESET selalu ditampilkan sebagai
berikut :
<INPUT TYPE=submit>
<INPUT TYPE=reset>
Perhatikan contoh berikut ini :
FILE : submit.html
<HTML>
<HEAD>
<TITLE>Penggunaan Submit dan Reset </TITLE>
</HEAD>
<BODY>
<PRE>
<FORM METHOD="POST">
Masukkan NIM :<INPUT TYPE="text" NAME="nim" SIZE="8">
Masukkan NAMA :<INPUT TYPE="text" NAME="nama"
SIZE="20">
Masukkan AlAMAT :<INPUT TYPE="text" NAME="alamat" SIZE="30"><BR><BR>
<INPUT TYPE="submit" VALUE=" OK "><INPUT TYPE="reset" VALUE="Cancel">
</FORM>
</PRE>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 72
Gambar 7.5 Hasil submit.html
7.2.2. Seleksi/Check List
Seleksi adalah memilih nilai dari sebuah teks/string dari sebuah daftar singkat. Pilihan
lebih dari satu akan digunakan atribut MULTIPLE dan jumlah pilihan dapat ditentukan dengan
variabel SIZE.
<SELECT NAME=var>
<OPTION>Pilihan1
<OPTION>Pilihan2
<OPTION>Pilihan3
</SELECT>
Dengan demikian, pemakai dapat memilih dan hasil pilihan akan dikirim ke server
Pemrograman Web: HTML & JavaScript 73
FILE : form5.html
<HTML>
<HEAD>
<TITLE>Pilihan-pilihan </TITLE>
</HEAD>
<BODY>
<PRE>
Pekerjaan :
<FORM METHOD="POST">
<SELECT NAME="pekerjaan">
<OPTION>Pelajar/Mahasiswa
<OPTION>Pegawai Swasta
<OPTION>Pegawai Negeri
<OPTION>Wiraswasta
<OPTION>Lain-lain
</SELECT>
</FORM>
</PRE>
</BODY>
</HTML>
Gambar 7.6 Hasil form5.html
7.2.3. Text Area
Text Area adalah suatu area yang dapat diisi dengan teks berupa komentar,
komplain, atau pesan apa saja. Biasanya teks yang ditampilkan berupa memo dan umumnya
mempunyai karakter yang sangat panjang.
Struktur dasar TextArea adalah sebagai berikut :
<TEXTAREA COLS=x ROWS=y>
Isi Komentar
</TEXTAREA>
Pemrograman Web: HTML & JavaScript 74
FILE : form6.html
<HTML>
<HEAD>
<TITLE>Komentar-komentar </TITLE>
</HEAD>
<BODY>
<PRE>
Isikan pendapat anda di bawah ini :
<FORM METHOD="POST">
<TEXTAREA COLS="40" ROWS="5">
</TEXTAREA>
</FORM>
</PRE>
</BODY>
</HTML>
Gambar 7.7 Hasil form6.html
Latihan Untuk Dikerjakan di Laboratorium Komputer
Buatlah sebuah buku tamu yang berisikan nama, alamat email dan pesan/saran pelanggan
PT EXSAKOMPUTINDO, sesuai dengan segmen yang telah dipelajari di atas.
Pemrograman Web: HTML & JavaScript 75
BAB 9
PENGENALAN
JAVASCRIPT & DASAR-
DASAR JAVASCRIPT
Tujuan Instruksional Umum :
Agar mahasiswa dapat mengenal dan memahami sejarah
perkembangan JavaScript serta dapat memahami tag-tag dasar
pada JavaScript
Tujuan Instruksional Khusus :
- Mahasiswa dapat membuat tag-tag dasar pada JavaScript.
- Mahasiswa dapat mengetahui persamaan dan perbedaan
antara dokumen HTML biasa dengan dokumen HTML yang
mengandung JavaScript.
- Mahasiswa dapat memahami bahwa JavaScript merupakan
bahasa yang berorientasi objek.
- Mahasiswa dapat membuat jendela-jendela yang akan
ditampilkan pada saat program JavaScript dijalankan.
Pokok Bahasan :
- Sejarah dan Perkembangan JavaScript
- Apa yang diperlukan ?
- JavaScript dan HTML
- Pesan-pesan kesalahan
- Bahasa berorientasi objek (properti, metode, penanganan kejadian)
- Menangani pemasukan data
- Jendela peringatan
- Jendela Konfirmasi
- Objek pada JavaScript
- Variabel dan Nilai (deklarasi variabel, penaman variabel, tipe data)
- Ekspresi
- Operator
- Komentar
Daftar Pustaka :
- Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS,
JavaScript & PHP, Penerbit Andi, Yogyakarta, 2002
- Anthony Pranata, Panduan Pemrograman JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002
- DR. Erhans A, Membuat Desain Web dengan JavaScript,
Penerbit PT. Ercontara Rajawali, Jakarta, 2002
- Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998
Pemrograman Web: HTML & JavaScript 76
9.1. Sejarah & Perkembangan JavaScript
Dewasa ini dunia Internet, khususnya World Wide Web berkembang dengan
sangat pesat. Perkembangan ini tentu saja mendorong orang untuk membuat
halaman Web yang lebih interaktif dan juga lebih cerdas. Salah satu cara
membuat halaman Web menjadi lebih interaktif adalah dengan menggunakan
JavaScript, bahasa script yang dikembangkan Netscape Communications bekerja
sama dengan Sun Microsystems.
Berbicara tentang Web tidak lepas dari HTML (Hypertext Markup
Language), bahasa yang digunakan untuk membuat halaman Web. HTML
merupakan bahasa yang sangat mudah dipelajari, Anda tidak perlu mempunyai
latar belakang pemrograman untuk menggunakannya, namun untuk membuat
halaman yang interaktif, HTML saja tidak cukup. Oleh karena itu muncullah CGI
(Common Gateway Interface). Dengan CGI halaman web bisa menampilkan
pencacah pengunjung, animasi sederhana dan masih banyak lagi.
Disamping CGI, ada bahasa pemrograman lainnya yang juga digunakan
untuk meningkatkan interaktivitas halaman web, yaitu Java. Java dikembangkan
oleh Sun Microsystems dari bahasa pemrograman yang sudah sangat populer yaitu
C++. Pada Java beban pemrosesan dialihkan ke klien sehingga beban server
menjadi berkurang. Dengan Java, kita bisa menampilkan animasi bersuara,
menampilkan berbagai diagram, dsb.
Dari latar belakang inilah, Netscape Communications bersama dengan
Sun Microsystems mengembangkan bahasa skrip yang diberi nama JavaScript. Asal
mula JavaScript adalah LiveScript. Dikembangkan pertama kali pada tahun 1995.
Bahasa ini dikenali pada browser Netscape Navigator mulai versi 2.0 ke
atas. Microsoft juga melengkapi Internet Explorer dengan JavaScript mulai versi 3.0
ke atas.
Pada dasarnya skrip tidak berbeda dengan bahasa pemrograman biasa
karena skrip juga berisi kumpulan instruksi program. Hanya saja skrip mempunyai
aturan yang lebih sederhana dan biasanya tidak dikompilasi. JavaScript adalah skrip
yang ditempelkan pada kode HTML dan diproses pada sisi klien.
Bahasa JavaScript versi 1.0 sudah mengalami perkembangan sejak dirilis
tahun 1995 yang lalu. Yang pertama adalah dirilisnya JavaScript 1.1 pada tahun
1996. Yang kedua adalah dirilisnya JavaScript 1.2 pada tahun 1997.
Pada akhir tahun 1996, Netscape menyerahkan proses standarisasi
spesifikasi bahasa JavaScript ke badan independent, yaitu ECMA (European
Computer Manufacturers Association). ECMA inilah yang pada akhirnya
Pemrograman Web: HTML & JavaScript 77
melakukan standarisasi JavaScript.
JavaScript merupakan bahasa berorientasi objek (Object Oriented
Programming).
Bahasa berorientasi objek harus mendukung 3 konsep dasar, yaitu :
1. Pengkapsulan (Encapsulation)
2. Pewarisan (Inheritance)
3. Polimorfisme (Polymorphism)
9.2. Apa yang diperlukan ?
Untuk mempelajari pemrograman JavaScript, hanya dua piranti yang
diperlukan, yaitu :
1. Editor teks
- NotePad
- Word Pad
- Dll.
2. Web Browser
- Mozilla Firefox
- Internet Explorer
- Dll.
Editor teks yang digunakan harus dapat menyimpan file dalam format ASCII. Dan
Web browser yang digunakan harus mendukung JavaScript.
9.3. JavaScript dan HTML
Program JavaScript dituliskan pada file HTML (.html atau .html) dengan
menggunakan tag kontainer <SCRIPT>. Dengan kata lain, kita tidak perlu menuliskan
program JavaScript pada file terpisah. Yang dimaksud dengan tag kontainer
adalah tag yang diawali dengan
<NAMA_TAG> dan diakhiri dengan </NAMA_TAG>.
Contoh :
<HTML> . </HTML>
<HEAD> </HEAD>
<BODY> </BODY>
Tag kontainer <SCRIPT> mempunyai atribut Language. Isikan atribut Language
dengan JavaScript. Disamping JavaScript, ada juga skript lain yang diletakkan
pada halaman HTML, yaitu VBScript. VBScript dikembangkan oleh Microsoft dari
Pemrograman Web: HTML & JavaScript 78
bahasa pemrograman yang cukup populer Visual Basic for Application (VBA).
Untuk menulis program VBScript, bisa digunakan tag kontainer <SCRIPT>, hanya
saja atribut language diisi VBScript.
Browser-browser lama yang belum mendukung skrip biasanya mengabaikan tag
<SCRIPT>. Namun masalahnya ada beberapa browser lama yang menuliskan
teks diantara tag <SCRIPT> dan </SCRIPT>. Jalan termudah dengan
memahami sesuatu adalah dengan mempraktekannya.
Oleh karena itu cobalah program JavaScript berikut ini :
FILE : skrip1-1.html
<HTML>
<HEAD>
<TITLE>Sekilas JavaScript</TITLE>
</HEAD>
<BODY>
Belajar membuat program JavaScript<BR>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Selamat Sore<BR>");
document.write("Anton Tri Argono");
//-->
</SCRIPT>
</BODY>
</HTML>
Keterangan :
Kode-kode tersebut di atas disebut dengan skrip JavaScript diawali dengan tag
<SCRIPT> dan diakhiri dengan tag </SCRIPT>. Di dalam tag <SCRIPT>
terdapat atribut LANGUAGE yang diisi dengan JavaScript. Tag ini oleh
browser yang mengenal JavaScript akan segera ditanggapi dengan
menerjemahkan kode yang terdapat diantara tag <SCRIPT> dan </SCRIPT>.
Tanda <!-- dan //--> umumnya disertakan dengan tujuan agar sekiranya
browser tidak mengenali JavaScript maka browser akan memperlakukannya
sebagai komentar sehingga tidak ditampilkan pada jendela browser.
Kode :
document.write ("Selamat
Sore"); document.write
("Anton Tri
Argono");
disebut sebagai sebuah pernyataan (statement). Pernyataan adalah sebuah perintah
pada JavaScript yang berdiri sendiri dan menghasilkan suatu tindakan. Dalam hal ini
pernyataan tersebut berfungsi untuk menampilkan string pada jendela browser.
Perlu diketahui jika terdapat lebih dari satu pernyataan, maka antara pernyataan
Pemrograman Web: HTML & JavaScript 79
satu dengan lainnya harus dipisahkan dengan tanda titikkoma (;).
Dengan demikian, pada kode JavaScript di depan terdapat dua perintah yang
masing- masing menampilkan string Selamat Sore dan Anton Tri Argono.
Hasilnya dapat dilihat pada gambar di bawah ini :
Gambar 9.1 Hasil skrip1-1.html
9.4. Pesan-pesan Kesalahan
Kode JavaScript yang salah secara sintaks akan membuat browser
menampilkan kotak dialog yang menyatakan pesan kesalahan. Sebagai contoh,
ubahlah tulisan document pada kode di atas menjadi Document dan
kemudian simpan kembali file tersebut. Selanjutnya panggillah kembali file tersebut
pada browser. Maka pesan kesalahan yang muncul adalah :
Gambar 9.2. Tampilan Pesan Kesalahan
Pemrograman Web: HTML & JavaScript 80
Pesan kesalahan terdapat pada baris ke-9 berupa kata Document yang tidak dikenal.
Umumnya kesalahan yang sering terjadi pada kode JavaScript diakibatkan oleh
hal-hal sebagai berikut :
1. Kesalahan karena penulisan huruf kapital dan huruf kecil.
2. Penggunaan tanda kutip yang tidak cocok.
3. Kesalahan dalam tag <SCRIPT>
9.5. Bahasa Berorientasi Objek
JavaScript merupakan sebuah bahasa yang berorientasi objek.
Sebuah objek terdiri dari properti, metode dan penanganan kejadian (event
handler).
9.5.1. Properti
Properti adalah atribut dari sebuah objek. Pada contoh di depan,
document adalah sebuah objek bawaan pada javascript. Untuk mengakses
sebuah properti, perlu penulisan dengan bentuk sebagai berikut :
nama_objek.nama_properti
Tanda titik digunakan sebagai pemisah antara nama objek dan nama properti.
Properti dapat diberi nilai melalui bentuk penugasan berikut :
Objek.properti = nilai
FILE : skrip1-2.html
<HTML>
<HEAD>
<TITLE> properti defaultStatus </TITLE>
</HEAD>
<BODY>
Tes defaultStatus
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.defaultStatus = "coba"
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 81
Gambar 9.3. Hasil skrip1-2.html
Hasil pemberian nilai ke default status
9.5.2. M e t o d e
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan
sesuatu tindakan terhadap objek. Sebagai contoh, write() pada objek
document adalah metode yang digunakan untuk menuliskan tulisan ke jendela
browser.
Seperti halnya properti, metode dipanggil dengan menyebutkan nama
objek, tanda titik, dan nama metode diikuti dengan daftar parameter yang
diletakkan di dalam tanda kurung.
9.5.3. Penanganan Kejadian
Penanganan kejadian (event handler) adalah sekumpulan kode yang
akan dijalankan manakala pemakai melakukan suatu tindakan (biasa disebut
dengan kejadian). Contoh kejadian adalah ketika pemakai mengklik tombol
mouse atau ketika menutup jendela browser.
Bentuk penanganan kejadian adalah seperti berikut ini:
nama_kejadian=kumpulan kode Contoh kejadian adalah onMouseOver
dan onMouseOut. Penanganan kejadian ini dapat diletakkan pada suatu
link. Dalam hal ini onMouseOver adalah kejadian yang berlangsung saat
penunjuk mouse menunjuk ke link dan onMouseOut adalah kejadian yang
berlangsung saat penunjuk mouse tidak lagi menyorot link.
Pemrograman Web: HTML & JavaScript 82
Contoh :
<A HREF = www.detik.com
onMouseOver = window.status = Anda menyorot link; return
true onMouseOut = window.status = ; return true>
Detik.com </A>
9.6. Manangani Pemasukkan Data
JavaScript memiliki mekanisme yang memungkinkan pemakai disuguhi
jendela untuk memasukkan sederetan masukan dan setelah pemakai mengkilk
tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses.
Misal, skrip berikut ini akan meminta user memasukan namanya dan kemudian
akan mendapatkan jawaban.
FILE : skrip1-3.html
<HTML>
<HEAD>
<TITLE>Jendela Memasukkan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Nama Anda : ");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 9.4 Hasil skrip1-3.html
Masukkan nama anda, misalnya Anton Tri Argono. Kemudian klik tombol OK maka :
Pemrograman Web: HTML & JavaScript 83
Gambar 9.4 Hasil skrip1-3.html setelah jendela prompt
dimasukkan sebuah nama
9.7. Jendela Peringatan
Jika Anda ingin memberikan sebuah pesan kepada user, Anda bisa
menyajikannya dalam bentuk kotak dialog yang biasa disebut Alert Box. Maka
pernyataan yang diberikan:
Window.alert("Jendela Peringatan");
FILE : skrip1-4.html
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.alert("Jendela Peringatan");
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 9.5 Hasil skrip1-4.html
Pemrograman Web: HTML & JavaScript 84
9.8. Jendela Konfirmasi
JavaScript menyediakan jendela konfirmasi. Hal ini dapat dilakukan
dengan menggunakan metode confirm().
FILE : skrip1-5.html
<HTML>
<HEAD>
<TITLE>Jendela Konfirmasi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var jawab = window.confirm("Anda sudah belajar?");
document.write("Jawaban Anda: " + jawab);
//-->
</SCRIPT></BODY></HTML>
Gambar 9.6 Hasil skrip1-5.html
Jika pada gambar 9.6 tombol OK diklik, maka akan terlihat hasilnya seperti
gambar berikut:
Gambar 9.7 Hasil skrip1-5.html setelah tombol OK diklik
Pemrograman Web: HTML & JavaScript 85
9.9. Objek pada JavaScript
JavaScript mempunyai objek hirarki yang disebut sebagai window.
Window
Locatio
n
History
Docum
ent
Forms
Anchors
Window merupakan objek berisi metoda dan properti yang berinteraksi
dengan window aktual. Setiap window dapat mempresentasikan Frame. Location
berisi properti dan metoda yang berkaitan dengan lokasi URL. History berisi
tentang infomasi daftar dari history tempat/url yang telah dikunjungi. Sedangkan
document merupakan objek yang paling banyak digunakan dalam JavaScript,
termasuk penggunaan forms, links, string (teks) dan lainnya.
9.10. Variabel dan Nilai
Dalam sebuah bahasa pemrograman, variabel sangatlah berperan
penting. Biasanya variabel digunakan untuk menyimpan data. Variabel adalah
suatu nama yang digunakan untuk menyimpan nilai dan nilai yang ada di
dalamnya dapat diubah sewaktu- waktu. Variabel berlawanan dengan literal atau
konstanta, dimana konstanta menyatakan nilai yang tetap .
Pada JavaScript, pendeklarasian variabel bersifat opsional, artinya bahwa
variabel bisa dideklarasikan atau tidak. Bila suatu variabel diberikan sebuah nilai,
maka JavaScript menganggap bahwa variabel tersebut telah dideklarasikan.
Meskipun pendeklarasian variabel pada JavaScript bersifat opsional, akan
lebih baik jika variabel selalu
dideklarasikan dalam pembuatan program.
9.10.1. Deklarasi Variabel
Pendeklarasian variabel pada JavaScript ditulis dengan menggunakan pernyataan
var. Contoh :
var nama = "sarah";
var nilai = 8;
var x,y,z = "7"; var alamat;
Pemrograman Web: HTML & JavaScript 86
Pada contoh pertama, variabel nama dideklarasikan dan diisi dengan string sarah.
Pada contoh kedua, variabel nilai dideklarasikan dan diisi dengan nilai 8. Pada
contoh ketiga x, y, z dideklarasikan dan diisi dengan string 7. Pada contoh
ketiga ini, dapat langsung dideklarasikan tiga variabel sekaligus dengan cukup
menuliskan kata kunci var satu kali saja. Adapunun pada contoh terakhir variabel
alamat akan diisi dengan null.
Walaupun suatu variabel dapat dideklarasikan tanpa diberi nilai awal, sebaiknya hal
seperti ini dihindari. Variabel tidak dapat digunakan sebelum diberi sebuah nilai
atau dideklarasikan secara eksplisit.
Contoh :
Document.write(nama);
Padahal nama belum diberi oleh nilai tertentu atau belum dideklarasikan, maka
pesan kesalahan akan dimunculkan.
9.10.2. Penamaan Variabel
Penamaan variabel harus mengikuti aturan-aturan sebagai berikut :
1. Penamaan variabel diawali dengan huruf atau tanda karakter garis bawah ( _ ).
2. Nama variabel tidak boleh mengandung karakter spasi. Bila variabel terdiri
dari beberapa kata, maka variabel dapat dipisahkan dengan karakter garis
bawah.
3. Karakter kedua dan seterusnya dapat berupa huruf, angka, atau karakter garis bawah.
4. Penamaan variabel tidak boleh menggunakan kata kunci JavaScript.
5. Beberapa variabel yang bernama sama tidak dapat dimiliki dalam sebuah blok.
Tetapi dapat digunakan asalkan variabel-variabel tersebut terletak dalam blok
yang berbeda.
6. Sebaiknya penamaan variabel dibuat sesuai dengan apa yang disimpannya.
7. Huruf kapital dan huruf kecil dibedakan (CASE-SENSITIF)
Contoh : (Penamaan Variabel)
- nama, nama1, nama_2 BENAR
- 2nama, nama 1, nama, datanama+nim SALAH
(Karena diawali dengan angka, mengandung spasi, mengandung tanda +)
- nama_1 dan NAMA_1 BENAR
(Menyatakan variabel yang berbeda karena huruf kapital dan huruf kecil dibedakan.
Pemrograman Web: HTML & JavaScript 87
9.11. Tipe Data
JavaScript tidak mendukung tipe data secara eksplisit. Hal ini dapat dilihat
pada beberapa contoh sebelumnya. Variabel dapat dideklarasikan tetapi tidak
menentukan tipe datanya.
Meskipun JavaScript tidak mendukung tipe data secara eksplisit, namun
JavaScript mempunyai tipe data secara implisit, yaitu :
1. Bilangan atau Numerik Misalnya : 456, -90
2. String Misalnya : Anton Tri Argono
3. Nilai logika atau dikenal dengan istilah boolean. Nilainya berupa true atau false
4. Null Variabel yang tidak diinisialisasi
9.11.1. Tipe Data Bilangan/Numerik
Tipe bilangan/numerik dapat dibedakan menjadi tipe bilangan bulat dan
bilangan real.Bilangan bulat dapat ditulis dengan basis 10 (desimal), basis 8 (Oktal),
ataupun basis 16 (Heksadesimal).
1. Bilangan Desimal
Bilangan desimal menggunakan digit 0 sampai dengan 9. Bilangan desimal
ditulis dengan tidak boleh diawali dengan angka 0 (nol) (kecuali bilangan nol itu
sendiri) Contoh : 078 tidak diartikan sebagai 78
2. Bilangan Oktal
Bilangan oktal menggunakan digit 0 sampai dengan 7. Bilangan oktal ditulis
dengan diawali angka 0 (nol).
Contoh : 012 (identik dengan 10 dalam satuan desimal)
3. Bilangan Heksadesimal
Bilangan heksadesimal menggunakan digit o samapi dengan 9, huruf A
sampai dengan hurf F. Bilangan heksadesimal diawali dengan awalan 0x atau
0X.
Contoh : A (identik dengan 10 dalam satuan desimal) FF (identik dengan 255
dalam satuan desimal)
Bilangan real bisa mengandung tanda pecahan. Untuk mendeklarasikan tipe bilangan
real, dapat digunakan tanda titik atau notasi ilmiah (notasi E) dan bukan tanda
koma. Tanda e
atau tanda E yang biasa digunakan untuk menyatakan notasi ilmiah bisa digunakan.
Contoh :
var A = 8765.789; var B = 8.765789;
Pemrograman Web: HTML & JavaScript 88
Pada contoh di atas pendeklarasikan dua buah bilangan yang sama, hanya saja
pada pada pendeklarasikan pertama digunakan tanda titk sedangkan pada
pendeklarasikan kedua digunakan notasi ilmiah.
8.11.2. Tipe Data String
String adalah deretan karakter-karakter. Pada JavaScript string dapat
dituliskan diantara tanda petik tunggal () atau tanda ().
Contoh :
var nama = Anton Tri Argono;
var nama = "Anton Tri Argono";
Cara penulisan yang harus digunakan tergantung pada kebutuhan.
Bila string yang dideklarasikan di dalamnya terdapat karakter , lebih baik gunakan
tanda petik tunggal.
Contoh :
var a = Eko berkata, "Hari sudah malam";
Dan sebaliknya, jika string yang dideklarasikan di dalamnya terdapat karakter , lebih
baik gunakan tanda petik ganda.
Contoh :
var a = "Dont cry " ;
Jika string tidak memiliki karakter sama sekali, maka stringnya disebut string kosong.
Penulisannya : atau JavaScript menyediakan karakter-karakter khusus, seperti :
b menyatakan backspace
f menyatakan form feed
n menyatakan karakter baris baru
r menyatakan carriage return (memindah kursor ke awal baris)
t menyatakan karakter tab
9.11.3. Tipe Data Logika/Boolean
Tipe data boolean hanya dapat bernilai true atau false, dimana true menyatakan
benar dan false menyatakan salah. Tipe seperti ini banyak digunakan sebagai
kondisi dalam pernyataan seperti if dan while.
Contoh :
var nilai_1 = (nilai_2 < 100);
Pemrograman Web: HTML & JavaScript 89
Pada contoh tersebut, jika nilai_2 lebih kecil dari pada 100 maka nilai_1 akan
bernilai true. Sebaliknya jika nilai_2 bernilai lebih besar atau sama dengan 100,
nilai_1 akan bernilai false.
9.11.4. Tipe Data Null
Tipe data null digunakan untuk merepresentasikan variabel yang tidak diinisialisasi.
Nilai null menyatakan nilai khusus yang berarti bahwa nilainya tidak
ada. Contoh :
var total ;
Pada contoh tersebut variabel total akan diberi nilai null, yang menyatakan bahwa
variabel ini tidak pernah diberi nilai.
9.12. Ekspresi
Ekspresi merupakan suatu bentuk yang menghasilkan suatu nilai. Dalam
bentuk yang sederhana ekspresi, biasanya ekspresi merupakan sebuah
variabel. Dan dalam bentuk yang kompleks biasanya sebuah ekspresi disajikan
dengan melibatkan operator & operand.
Misalnya :
31*6 EKSPRESI
Angka 3, 1, dan 6 adalah merupakan operand, sedangkan simbol dan * berperan
sebagai operator. Contoh dalam penggunaan ekspresi adalah yang biasanya
terjadi pada pernyataan yang menggunakan write.
document.write(4 + 5);
akan menampilkan hasil ekspresi 4 + 5 pada jendela browser.
9.13. Operator
Pada dasarnya, operator pada JavaScript dapat dibagi menjadi enam,
yaitu :
1. Operator Aritmatik
2. Operator Pemberian nilai
3. Operator pemanipulasi bit (bitwise)
4. Operator pembanding
5. Operator Logika
6. Operator String
9.13.1. Operator Aritmatik
Pemrograman Web: HTML & JavaScript 90
Operator aritmatik digunakan pada operan bertipe numerik. Semua operator
berlaku untuk bilangan bulat maupun bilangan pecahat (floating-point). Ada dua
macam operator aritmatik :
1. Operator aritmatik tunggal (unary)
Hanya menggunakan satu buah
operand
2. Operator aritmatik biner (binary)
Menggunakan operand lebih dari satu (biasanya 2 buah operand)
Tabel 9.1 Operator Aritmatik
Operator Tunggal/Biner Kegunaan
+ Biner Penjumlahan
- Biner Pengurangan
* Biner Perkalian
/ Biner Pembagian
% Biner Modulus (sisa pembagian)
++ Tunggal Penambahan dengan 1
(kenaikan)
-- Tunggal Pengurangan dengan 1
(penurunan)
JavaScript tidak mendukung operator untuk perpangkatan. Perpangkatan
dapat dilakukan melalui metode yang akan dijelaskan untuk berikutnya berikutnya.
Operator +, -, *, dan / sering kali dijumpai dalam penggunaannya di setiap
bahasa pemrograman. Yang perlu diperhatikan adalah operator penambahan
dengan satu (++) dan operator pengurangan dengan satu (--). Kedua operator ini
masing-masing digunakan untuk menambah atau mengurangi nilai suatu variabel
dengan satu..
Contoh :
var x = 50;
Kemudian pada baris berikutnya dituliskan :
x++;
maka nilai variabel x sekarang adalah 51. emudian bila dituliskan lagi
x--;
variabel x akan kembali bernilai 50.
Operator ++ dan dapat dituliskan di belakang atau di depan variabel : ++x
atau x--; Pada kasus di atas, letak operator ++ atau (di depan atau di belakang
variabel) tidak berpengaruh.. Ada kasus lain dimana letak tanda ++ atau sangat
berpengaruh.
Pemrograman Web: HTML & JavaScript 91
Contoh :
var y = 10;
kemudian pada baris berikutmya ditulis pernyataan :
x = y++;
pernyataan ini berarti nilai y diberikan kepada x kemudian di tambah 1. Dengan kata
lain, sekarang x bernilai 10 dan y bernilai 11.
Bila operator dituliskan di depan variabel :
x = ++y;
maka x dan y bernilai sama yaitu 11. Hal ini dikarenakan pernyataan tersebut
dapat diterjemahkan menjadi : nilai y ditambah dengan 1 kemudian hasilnya
diberikan kepada x.
9.13.2. Operator Pemberian Nilai
Operator pemberian nilai digunakan bila ingin memberi nilai ke suatu operan
atau mengubah nilai suatu operan. Semua opearotor pada tabel 4.2 dapat
dikenakan pada operan bertipe numerik. Hanya operator = dan += yang dapat
dikenakan pada operan bertipe string.
Operator += digunakan untuk menambah suatiu operan dengan operan lain.
Contoh :
var x = 10;
Bila kemudian dituliskan
pernyataan : x+= 20
variabel x bernilai 30. Hal ini dikarenakan pernytaan tersebut dapat diterjemahkan
menjadi nilai x ditambah dengan 20.
Tabel 9.2 Operator Pemberi Nilai
Operator Keterangan Contoh Artinya
+= Ditambah dengan x += x = x + Y
-= Dikurangi dengan x -= x = x - y
*= Dikalikan dengan x *= x = x * y
/= Dibagi dengan x /= x = x / y
%= Dikenai operasi modulus dengan x %= x = x % y
<<= Dikenai operasi bit << dengan x <<= x = x << y
>>= Dikenai operasi bit >> dengan x >>= x = x >> y
>>>= Dikenai operasi bit >>> dengan x >>>= x = x >>> y
&= Dikenai operasi bit AND dengan x &= y x = x & y
|= Dikenai operasi bit OR dengan x |= y x = x | y
^= Dikenai operasi bit XOR dengan x ^= y x = x ^ y
Pemrograman Web : HTML & JavaScript 92
9.13.3. Operator Pemanipulasian Bit
Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe
bilangan bulat.
Tabel 9.3. Operator Pemanipulasian Bit
Operat r Keterangan
& Operator bit AND
| Operator bit OR
^ Operator bit XOR
~ Operator NOT
<< Menggeser ke kiri
>> Menggeser ke kanan
>>> Menggeser ke kanan dengan diisi nol
9.13.4. Operator Pembanding
Operator pembanding digunakan untuk membandingkan dua buah operan.
Operan yang dikenai operator ini dapat bertipe string, numerik, maupun ekspresi
lain. Hasil dari operasi pembandingan adalah data bertipe boolean yang
menunjukkan hasil operasi benar atau salah.
Tabel 9.4. Operator Pembanding
Operato Keterangan
== Kesamaan
!= Ketidaksamaan
> Lebih besar daripada
< Lebih kecil daripada
>= Lebih besar atau sama dengan
<= Lebih kecil atau sama dengan
9.14. Konversi Tipe
Konversi tipe data pada JavaScript telah diatur dengan sendirinya oleh
JavaScript itu sendiri. Konversi tipe data string ke dalam tipe data numerik dapat
menggunakan fungsi paseInt() atau parseFloat(). Fungsi parseInt() adalah fungsi
yang berguna untuk mengkonversi string bilangan menjadi bilangan bulat.
Sedangkan fungsi parseFloat() adalah fungsi yang berguna untuk mengkonversi
string bilangan menjadi bilangan pecahan.
9.15. Komentar
Komentar dalam JavaScript dapat dibuat dengan menggunakan /* dan */.
Semua teks yang terletak dalam pasangan tanda tersebut tidak akan diproses oleh
JavaScript.
=================== oOo ===================
Pemrograman Web : HTML & JavaScript 93
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah kode program JavaScript dengan file-file yang ada di dalam BAB 9 di atas !
Latihan Untuk Dikerjakan Di Rumah
1. Buatlah sebuah jendela peringatan/informasi untuk menampilkan kata Perhatian,
saya cantik !
2. Buat pula sebuah jendela konfirmasi untuk mengkonfirmasikan kata Saya
cantik : Setuju kan ?
3. Buatlah program untuk mengitung luas segitiga, dengan ketentuan sebagai berikut :
- window.defaultStatus berisikan kata Selamat Mencoba
- Nilai alas diinput melalui jendela prompt dan browser akan
menampilkan nilai alas yang diinput
- Nilai tinggi diinput melalui jendela prompt dan browser akan
menampilkan nilai tinggi yang diinput
- Hitung luas segitiga dengan rumus : (alas * tinggi) / 2
- Browser menampilkan Luas segitiga yang telah dihitung
Pemrograman Web : HTML & JavaScript 94
BAB 10
OPERATOR DAN PERCABANGAN
Tujuan Instruksional Umum :
Agar mahasiswa dapat mengenal dan memahami percabangan-percabangan
dalam JavaScript
Tujuan Instruksional Khusus :
- Mahasiswa dapat membuat perintah-perintah dasar yang berhubungan
dengan percabangan
- Mahasiswa dapat membuat percabangan yang bersarang
Pokok Bahasan :
- Operator ?
- Blok pernyataan
- Pernyataan if tanpa else
- Pernyataan if dengan else
- Pernyataan if bersarang
- Pernyataan switch
Daftar Pustaka :
- Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002
- Anthony Pranata, Panduan Pemrograman JavaScript, Penerbit Andi, Ypgyakarta, 2002
- Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002
- DR. Erhans A, Membuat Desain Web dengan JavaScript, Penerbit PT. Ercontara Rajawali,
Jakarta, 2002
- Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998
Pemrograman Web : HTML & JavaScript 95
10.1. Operator ?
Penggunaan operator ? dapat digunakan dengan statemen sebagai berikut :
Kondisi ? pernyataan1_dijalankan_jika_kondisi_benar :
pernyataan2_dijalankan_jika_kondisi_salah
Perhatikan contoh berikut ini :
FILE : skrip10-1.html
<HTML>
<HEAD>
<TITLE>Operator ?</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var berat=prompt("Masukkan berat badan anda : ",
0); var hasil=(berat >=100) ? "Anda Gendut" : "Anda
kurus"; document.write("Hasil : " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 10.1 Hasil skrip10-1.html
Kemudian isikan berat badan, misalnya 150, maka hasilnya akan tampak seperti gambar di bawah
ini:
Gambar 10.2 Hasil skrip10-1.html setelah diinput
Pemrograman Web : HTML & JavaScript 96
10.2. Blok Pernyataan
Blok pernyataan adalah sekelompok pernyataan yang terdapat di dalam tanda kurung
kurawal
{}. Intinya, kalau dalam percabangan terdapat beberapa pernyataan maka sebaiknya
mnggunakan blok pernyataan.
{
pernyat
aan1;
pernyat
aan2;
pernyat
aan3;
.........
pernyataanke-n;
}
10.3. Pernyataan If Tanpa Else
Pernyataan if merupakan pernyataan untuk menjalankan sebuah kondisi dimana kondisi
dapat bernilai banar atau salah.
Struktur pernyatan if tanpa else adalah sebagai berikut :
if (kondisi)
pernyataan
Perhatikan contoh berikut ini
: FILE : skrip10-2.html
<HTML>
<HEAD>
<TITLE>Pernyataan if</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var berat=prompt("Masukkan berat badan anda : ", 0);
var hasil = "Anda kurus";
if (berat >=100)
hasil = "Anda gendut";
document.write("Hasil berat badan anda : " +hasil);
</SCRIPT>
</BODY>
</HTML>
Gambar 10.3 Hasil skrip10-2.html
Pemrograman Web : HTML & JavaScript 97
Gambar 10.4 Hasil pada gambar 10.3 setelah diinput dan diklik OK
10.4. Pernyataan if dengan else
Pernyataan if dengan else mempunyai struktur sebagai berikut :
if (kondisi) {
Pernyataan-pernyataan yang akan
dijalankan Jika kondisi bernilai benar;
} else {
Pernyataan-pernyataan yang akan
dijalankan Jika kondisi bernilai salah;
}
Perhatikan contoh berikut ini :
FILE : skrip10-3.html
<HTML>
<HEAD>
<TITLE>Pernyataan if-else</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var berat = prompt("Masukkan berat badan anda: ", 0);
var hasil = "";
if (berat >= 100)
hasil = "Anda Gendut";
else
hasil = "Anda Kurus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 98
Gambar 10.5 Hasil skrip10-3.html
Pada gambar 10.5 isikan berat badan, misalnya 20 kemudian klik OK maka akan
terlihat hasilnya seperti di bawah ini :
Gambar 10.6 Hasil skrip10-3.html setelah
diinput
10.5. Pernyataan if bersarang
Pada kasus-kasus tertentu, mungkin akan diletakkan pernytaan if lain setelah
else.
Bentuk umum :
if (kondisi_1)
pernyataan yang dijalankan jika kondisi_1 benar
else if (kondisi_2)
pernyataan yang dijalankan apabila kondisi_1 tidak
terpenuhi dan kondisi_2 terpenuhi
else
pernyataan yang dijalankan bila semua kondisi
tidak terpenuhi
Perhatikan contoh berikut ini :
Pemrograman Web : HTML & JavaScript 99
FILE : skrip10-4.html
<HTML>
<HEAD>
<TITLE> If bersarang </TITLE>
</HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var kota=prompt("Nama kota besar di pulau Jawa (Huruf pertama harus kapital):", "");
if (kota=="Bandung")
document.write("Ibu kota Jawa Barat");
else if (kota=="Surabaya")
document.write("Ibu kota Jawa Timur");
else if (kota=="Semarang")
document.write("Ibu kota Jawa Tengah");
else
document.write("Kota ini belum terdeteksi");
//-->
</SCRIPT>
</BODY>
</HTML>
Setelah program dijalankan, maka akan ditanyakan kota besar di Pulau Jawa. Misalnya
diisikan Bandung, perlu diingat dalam hal ini bahwa penamaan kota harus diawali dengan huruf
kapital. Jika anda memasukkan dengan benar nama kotanya, tetpai tidak diawali
dengan huruf kapital, maka nama kota tersebut tidak terdeteksi.
Gambar 10.7 Hasil skrip10-4.html tampilan awal setelah program
dijalankan
Gambar 10.8 Hasil skrip10-4.html setelah diinput & mengklik OK
Pemrograman Web : HTML & JavaScript 10
10.6. Pernyataan Switch
Kegunaan pernyataan ini adalah untuk menangani percabangan majemuk. Dengan kata
lain, pernyataan switch digunakan untuk menyederhanakan pernyataan if bersarang.
Bentuk Umum :
switch (variabel) {
case nilai_1 :
perintah_1;
brea
k; case
nilai_2 :
perintah_2;
break;
...........
case nilai_m :
perintah_m;
brea
k; default :
perintah_n;
break;
}
Pada bentuk ini, break bersifat opsional (bisa saja tidak disertakan).
Kegunaannya adalah untuk mengarahkan eksekusi ke akhir switch. Perlu diketahui, setiap
case bisa mengandung lebih dari satu pernyataan, dengan antar pernyataan dipisahkan
dengan tanda titik - koma. Bagian default juga bersifat opsional. Bagian ini akan
dieksekusi tak ada yang cocok dengan bagian case. Perhatikan contoh berikut ini :
FILE : skrip10-5.html
<HTML>
<HEAD>
<TITLE>Penggunaan switch</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var tanggal = new Date();
var kode_hari = tanggal.getDay();
var nama_hari = "";
switch(kode_hari) {
case 0:
nama_hari = "Minggu";
break;
case 1:
nama_hari = "Senin";
break;
case 2:
nama_hari = "Selasa";
break;
Pemrograman Web : HTML & JavaScript 10
Lanjutan FILE : skrip10-5.html
case 3:
nama_hari = "Rabu";
break;
case 4:
nama_hari = "Kamis";
break;
case 5:
nama_hari = "Jumat";
break;
case 6:
nama_hari = "Sabtu";
}
document.write("Hari ini hari " + nama_hari);
document.write(", tanggal " + tanggal.getDate() +
"/" + (tanggal.getMonth() + 1) +
"/" + tanggal.getYear());
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 10.9 Hasil skrip10-5.html
----------------------------------------
Pemrograman Web : HTML & JavaScript 102
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah program JavaScript dengan file-file yang ada di dalam BAB 9
Latihan Untuk Dikerjakan Di Rumah
Buatlah sebuah program dengan menggunakan JavaScript dengan ketentuan sebagai berikut :
- Input melalui jendela Prompt dengan kalimat : Masukkan nilai huruf (A, B, C, D, E) :
- Nilai yang diinput akan ditampilkan di browser
- Jika pengguna memilih nilai A maka hasilnya adalah Istimewa
- Jika pengguna memilih nilai B maka hasilnya adalah Baik
- Jika pengguna memilih nilai C maka hasilnya adalah Cukup
- Jika pengguna memilih nilai D maka hasilnya adalah Buruk
- Jika pengguna memilih nilai E maka hasilnya adalah Sangat Buruk
- Nilai yang dipilih berikut hasilnya akan ditampilkan di browser
- Jangan lupa tampilkan pula hari dan tanggal pada saat browser menjalankan program ini
M
1
Pemrograman Web : HTML & JavaScript 10
BAB 11
LOOPING
11.1. Proses Pengulangan
Pengulangan digunakan untuk mengeksekusi pernyataan-pernyataan beberapa
kali. Blok berisi pernyataan-pernyataan yang harus diulang atau sering juga disebut
kalang (loop). Jadi suatu pernyataan dapat dieksekusi misalnya sebanyak 50 kali
dengan cara menuliskannya di dalam kalang.
Untuk menangani pengulangan-pengulangan, JavaScript menyediakan
pernyataan- pernyataan sebagai berikut :
1. while
2. do.while
3. for
11.2. Pernyataan while
Pernyataan while biasanya digunakan bila belum tahu pasti berapa banyak
pengulangan dilakukan. Berakhirnya kalang while ditentukan oleh suatu kondisi. Bila
kondisi sudah tidak terpenuhi maka pengulangan akan dihentikan. Dengan kata lain,
selama kondisi masih terpenuhi, pengulangan akan terus dilakukan. Bentuk pernyataan
while :
while (kondisi) {
pernyataan
}
Jika dalam tanda { } hanya terdapat satu pernyataan, tanda tersebut bisa
dihilangkan. Alur programnya adalah mula-mula kondisi dalam while diperiksa. Jika
bernilai true maka pernyataan yang mengikuti kondisi while akan dieksekusi dan
kemudian kondisi diperiksa lagi. Selama kondisi masih bernilai benar, maka bagian
pernyataan akan dijalankan terus. Begitu kondisi bernilai false, pernyataan while akan
berakhir. Perhatikan contoh berikut ini :
Pemrograman Web : HTML & JavaScript 104
FILE : skrip11-1.html
<HTML>
<HEAD>
<TITLE>Contoh while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var bilangan =
0; while
(bilangan < 10)
{
document.write("Sistem
Informasi<BR>"); bilangan++;
}
//-->
</SCRIPT>
Gambar 11.1 Hasil skrip11-1.html
Jika program skrip11-1 dijalankan, maka hasilnya akan terlihat pada gambar 6.1.
HasiL yang ditampilkan berupa string Sistem Informasi yang tercetak sebanyak sepuluh
kali.
Pemrograman Web : HTML & JavaScript 105
FILE : skrip11-2.html
<HTML>
<HEAD>
<TITLE>Contoh while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var bilangan = 0;
while (bilangan <
5) {
document.write("Bilangan " + bilangan
+"<BR>"); bilangan++;
}
//-->
</SCRIPT>
</BODY>
</HTML>
Jika program skrip11-2 dijalankan, maka hasilnya akan terlihat pada gambar 11.2.
seperti yang terlihat di bawah ini. Hasil yang ditampilkan berupa Bilangan 0 sampai
dengan 4.
Gambar 11.2 Hasil skrip11-2.html
11.3. Pernyataan do.....while
Pernyataan do.while mulai diperkenalkan pada JavaScript 1.2. Kegunaan
pernyataan ini hampir sama dengan pernyataan while, yaitu untuk mengulang beberapa
pernyataan apabila jumlah pengulangan belum diketahui. Perbedaaannya adalah pada
pernyataan do..while, pengujian kondisi diletakkan pada akhir kalang. Bentuk
pernyataan do.while :
Pemrograman Web : HTML & JavaScript 106
do
{
bok pernyataan
} while (kondisi);
Perhatikan contoh berikut ini :
FILE : skrip11-3.html
<HTML>
<HEAD>
<TITLE>Penggunaan do while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var
bilanga
n = 1;
do {
document.write(bilangan
+ "<BR>"); bilangan++;
} while (bilangan < 10);
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 11.3 Hasil skrip11-3.html
Pemrograman Web : HTML & JavaScript 107
Pada file skrip11-3.html, dapat dilihat bahwa pada awalnya dideklarasikan variabel
bilangan=1 yang akan menjadi nilai awal pada variabel bilangan. Kemudian bilangan
akan tercetak selama kondisi terpenuhi yaitu bilangan < 10.
11.4. Pernyataan for
Pernyataan ini adalah pernytaan yang peling sering digunakan. Pernyataan
ini akan digunakan ketika sudah diketahui berapa kali pengulangan akan dilakukan.
Bentuk Pernyataan for :
for (inisialisasi; kondisi; penaikan_penurunan) {
pernyataan_pernyataan
}
Perhatikan contoh berikut ini :
FILE : skrip11-4.html
<HTML>
<HEAD>
<TITLE>Penggunaan for</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var bil = 0;
for (bil = 1; bil <= 10;
bil++)
document.write(bil +
"<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 11.4 Hasil skrip11-4.html
Pemrograman Web : HTML & JavaScript 108
11.5. Pernyataan break dan continue
Pada beberapa kasus, mungkin pengulangan akan dihentikan di tengah jalan.
Untuk keperluan itulah, JavaScript menyediakan pernyataan break. Pernyataan break
dapat digunakan pada pernyataan for maupun while.
Pernyataan continue adalah pernyataan lain yang digunakan pada pengulangan.
Pernyataan ini digunakan untuk mengembalikan aliran program ke penguji kondisi
pengulangan.
Dengan kata lain, pernyataan-pernyataan di bawah continue akan diabaikan.
Pernyataan break dan continue dapat juga digunakan pada kalang bersarang
(baik for maupun while). Pada kalang bersarang, pernyataan break akan menghentikan
semua kalang sedangkan pernyataan akan mengembalikan aliran program ke penguji
kondisi kalang paling dalam.
Perhatikan contoh penggunaan break berikut ini :
FILE : skrip11-5.html
<HTML>
<HEAD>
<TITLE>Penggunaan break</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var bilangan = 0;
while (bilangan <
10) {
if (bilangan
== 5) break;
document.write(bilangan +
"<BR>"); bilangan++;
}
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 109
Gambar 11.5 Hasil skrip11-5.html
Contoh penggunaan continue :
FILE : skrip11-6.html
<HTML>
<HEAD>
<TITLE>Penggunaan continue</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var i = 0;
while (i <
10) { if
(i == 5)
{
i++;
continue;
}
document.write(i +
"<BR>"); i++;
}
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 110
Gambar 11.6 Hasil skrip11-6.html
FILE : skrip11-7.html
<HTML>
<HEAD>
<TITLE>Penggunaan continue</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var i = 0;
while (i < 15) { if (i == 8)
{
i++;
continue;
}
document.write(i + " Teknik Informatika <BR>"); i++;
}
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 111
Gambar 11.7 Hasil skrip11-7.html
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah program JavaScript dengan file-file yang ada di dalam MODUL 11
Latihan Untuk Dikerjakan Di Rumah
1. Buat program untuk mencetak kata Pemrograman JavaScript sebanyak 10 baris
tersusun ke bawah
2. Buatlah sebuah program dengan menggunakan JavaScript. Ketika dijalankan,
program tersebut akan menanyakan nilai masukkan. Setelah nilai dimasukkan, maka
nilai tersebut akan ditampilkan di browser. Program akan terus menanyakan sebuah
nilai dan mencetaknya secara tersusun ke bawah. Pada saat nilai yang diinput lebih
besar atau sama dengan 100, program akan berhenti
-----------------------------------
Pemrograman Web : HTML & JavaScript 112
BAB 12
FUNGSI
12.1. Definisi Fungsi
Fungsi merupakan bagian program yang melakukan tugas tertentu. Beberapa
fungsi juga bisa mengembalikan nilai tertentu. Pada dasarnya ada dua macam fungsi
pada JavaScript, yaitu fungsi yang didefinisikan sendiri dan fungsi bawaan (built-in
function).
Bentuk Umum fungsi :
function nama_fungsi (parameter1, parameter2, )
{
pernyataan-pernyataan
}
Nama_fungsi merupakan nama yang diberikan ke fungsi tersebut. Aturan penamaan
fungsi sama dengan aturan penamaan variabel. parameter1, parameter2, . Merupakan
informasi diberikan ke fungsi ini. Bila tidak ada informasi yang diberikan, tulislah tanda ().
Sebuah fungsi tidak hanya menerima informasi, tetapi juga dapat
mengembalikan informasi. Caranya adalah dengan menggunakan kata kunci return.
Contoh :
function
penjumlahan(x,y) {
var hasil = x + y;
return(hasil);
Pernyataan pertama dalam fungsi berupa :
var hasil = x + y;
yang digunakan untuk mendeklarasikan variabel hasil dan kemudian mengisinya
Pemrograman Web : HTML & JavaScript 113
dengan penjumlahan kedua argumen x dan y.
Pernyataan kedua yaitu pernyataan return digunakan untuk memberikan nilai
balik fungsi. Perlu diketahui bahwa pernyataan return akan membuat fungsi
berakhir dan menghasilkan nilai yang sesuai dengan isi variabel hasil, yakni
berupa penjumlahan kedua argumennya.
Perhatikan contoh fungsi yang tidak menggunakan parameter berikut ini :
FILE : skrip12-1.html
<HTML>
<HEAD>
<TITLE>Fungsi tanpa parameter</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cetak()
{
document.write("Pemrograman JavaScript <BR>")
}
document.write("Hasil cetakan : <BR>")
cetak()
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 12.1 Hasil skrip12-1.html
Kadangkala ada juga fungsi yang menggunakan parameter seperti contoh di bawah ini :
Pemrograman Web : HTML & JavaScript 114
FILE : skrip12-2.html
<HTML>
<HEAD>
<TITLE>Fungsi tanpa parameter</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cetak(str)
{
document.write("Pemrograman JavaScript dan " + str + "<BR>")
}
document.write("Hasil cetakan : <BR>");
cetak("PHP")
cetak("ASP")
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 12.2 Hasil skrip12-2.html
12.2. Variabel Lokal dan Variabel Global
Dalam pembuatan fungsi tidak dianjurkan untuk menggunakan variabel
global (variabel yang dikenali di semua bagian program). Perhatikan contoh
berikut ini fungsi yang menggunakan variabel global :
Pemrograman Web : HTML & JavaScript 115
FILE : skrip12-3.html
<HTML>
<HEAD>
<TITLE>Variabel Global</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function kali(a, b)
{ c = a * b;
return(c);
}
var c = 100;
document.write("c semula = " + c +
"<BR>"); document.write(kali(10, 2) +
"<BR>");
document.write("c sekarang = " + c + "<BR>");
//-->
</SCRIPT>
/BODY
Gambar 12.3 Hasil skrip12-3.html
Jika dilihat dari contoh di atas, variabel c pada fungsi kali()
merupakan variabel global karena tidak didefinisikan dengan var. Maka
variabel c pada pemanggil fungsi ini akan ikut berubah ketika fungsi kali()
dipanggil. Bagaimana jika variabel c sudah didefinisikan terlebih dahulu?
Perhatikan contoh di bawah ini :
Pemrograman Web : HTML & JavaScript 116
FILE : skrip12-4.html
<HTML>
<HEAD>
<TITLE>Variabel Lokal</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function kali(a, b)
{ var c = a * b;
return(c);
}
var c = 100;
document.write("c semula = " + c +
"<BR>"); document.write(kali(10, 2) +
"<BR>"); document.write("c sekarang = "
+ c + "<BR>");
//-->
</SCRIPT>
</BODY>
Gambar 12.4 Hasil skrip12-4.html
Dapat dilihat pada contoh skrip12-4, terdapat definisi var pada variabel
c, hal ini menandakan bahwa variabel tersebut merupakan variabel lokal yang
diletakkan pada fungsi kali.
Pemrograman Web : HTML & JavaScript 117
12.3. Fungsi Rekursif
Fungsi rekursif adalah fungsi yang dapa memanggil dirinya sendiri. Biasanya
fungsi rekursif ini digunakan untuk masalah tertentu, seperti faktorial.
Perhatikan contoh berikut ini :
FILE : skrip12-5.html
<HTML>
<HEAD>
<TITLE>Fungsi Rekursif</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function faktorial(x) {
if (x == 0)
return(1);
else
return( x * faktorial(x-1));
}
document.write("6! = " + faktorial(6));
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 12.5 Hasil skrip12-5.html
12.4. Contoh Lain Penggunaan Fungsi
Perhatikan contoh lain berikut ini dalam penggunaan fungsi lainnya.
Pemrograman Web : HTML & JavaScript 118
FILE : skrip12-6.html
<HTML>
<HEAD>
<TITLE>Contoh Fungsi Lainnya</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function contohlain()
{
alert("Selamat Siang")
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE = "button" onclick="contohlain()" value = "Panggil Fungsi">
</FORM>
</BODY>
</HTML>
Pada saat program dijalnkan, maka akan dihasilkan tampilan sebagai berikut :
Gambar 12.6 Hasil skrip12-6.html
Jika button Panggil Fungsi diklik maka akan ditampilkan sebuah window alert
sebagai berikut :
Gambar 12.7 Hasil skrip12-6.html
Fungsi di atas dibuat tanapa adanya sebuah parameter fungsi. Hal ini tidaklah
Pemrograman Web : HTML & JavaScript 119
menjadi masalah. Perhatikan contoh berikut ini yang menggunakan parameter pada
fungsinya.
FILE : skrip12-7.html
<HTML>
<HEAD>
<TITLE>Contoh Fungsi Lainnya Dengan Parameter</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function contohlain(teks)
{
alert("Hai " +teks)
}
//-->
</SCRIPT>
<FORM>
Masukkan nama Anda : <INPUT TYPE="text" name="nama">
<INPUT TYPE="button" onclick="contohlain(nama.value)" value="Panggil Fungsi">
</FORM>
</BODY>
</HTML>
Jalankan program di atas, kemudian masukkan nama Anda, misalnya Sarwati Rahayu,
maka tampilan pada jendela Browser seperti di bawah ini :
Gambar 12.8 Hasil skrip12-7.html
Kemudian klik button Panggil Fungsi di atas, maka browser akan menampilkan jendela
alert sebagai berikut :
Pemrograman Web : HTML & JavaScript 120
Gambar 12.9 Hasil skrip12-7.html
Latihan Untuk Dikerjakan Di Laboratorium Komputer
Buatlah program JavaScript dengan file-file yang ada di dalam BAB 12 ini.
Tugas Untuk Dikerjakan Di Rumah
Buatlah tiga buah fungsi yaitu: fungsi Penjumlahan, Perkalian dan Pembagian dua
buah bilangan. Nilai bilangan pertama dan nilai bilangan kedua harus diinput. Hasil
inputan dan hasil perhitungan ditampilkan di browser.
----------------- oOo -----------------
Pemrograman Web : HTML & JavaScript 121
BAB 13
ARRAY
13.1. Definisi Array
Array merupakan sekumpulan elemen, yang masing-masing elemennya mempunyai
tipe apa saja. Konsep array merupakan penggabungan beberapa variabel menjadi satu
kesatuan.
Dapat juga dikatakan bahwa array adalah wadah yang dapat menyimpan sebuah nilai
skalar. Masing-masing nilai diakses melalui indeks yang disebut subskrip. Biasanya indeks
dimulai dari bilangan nol (0).
nilai
100 50 80 20 40
Nilai[0] Nilai[1] Nilai[2] Nilai[3] Nilai[4]
Gambar 13.1 Array
Array diimplementasikan melalui objek array. Penulisannya dapat dilakukan sebagai berikut :
namaArray=new Array(elemen_1, elemen_2, .., elemen_n ) atau
namaArray=[elemen_1, elemen_2, .., elemen_n]
Contoh :
var nilai = new Array (100, 50, 80, 20, 40) atau
var kota = new Array (Jakarta, Bogor,
Bekasi,Depok) atau var nilai = new Array (5)
13.2. Jumlah Elemen Array
Jumlah elemen array dapat diketahui dengan menggunakan properti length dalam objek.
Misalnya, terdapat elemen array sebagai berikut :
var nilai = new Array (100, 50, 80, 20, 40)
maka jumlah elemen array nilai adalah nilai.length
Selain mengetahui jumlah elemen array nilai, dapat juga menampilkan isi dari sebuah array
Pemrograman Web: HTML & JavaScript 122
sebagai berikut :
document.write(namaArray[indeks])
Perhatikan contoh berikut ini :
FILE : skrip13-1.html
<HTML>
<HEAD>
<TITLE>Jumlah Elemen Array</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
<!--
var kota = new Array();
document.write("1. Jumlah elemen: " +
kota.length + "<BR>");
kota[10] = "Jakarta";
document.write("2. Jumlah elemen: " +kota.length + "<BR>");
var nilai = new Array(5);
document.write("3. Jumlah elemen: " +nilai.length + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
Gambar 13.2 Hasil skrip13-1.html
Pemrograman Web: HTML & JavaScript 123
13.3. Property pada Array
Objek Array mengandung beberapa properti sebagaimana tercantum seperti di bawah ini :
1. Index : Berisi indeks yang menyatakan posisi string yang cocok dengan pola
ekspresi reguler
2. Input : Menyatakan string asli yang cocok dengan ekspresi reguler
3. Length : Menyatakan jumlah elemen array
4. Prototype : Berguna untuk menciptakan properti yang berlaku untuk seluruh objek
array dalam sebuah skrip
13.4. Metode Array
Objek Array mengandung beberapa metode seperti di bawah ini :
1. concat berguna menggabungkan elemen-elemen dari dua buah array. Bentuk umumnya :
namaArray1.concat(namaArray2)
2. join berguna untuk mendapatkan sebuah string yang disusun oleh setiap elemen
pada array dengan pemisah berupa koma atau berupa string yang ditentukan oleh
pemrogram.
Bentuk umumnya :
namaArray.join() atau namaArray.join(string pemisah)
3. pop berguna untuk membuang elemen terakhir dalam array dan memberikan elemen
terakhir tersebut sebagai nilai balik.
Bentuk umumnya :
namaArray.pop()
4. push berguna untuk menambahkan satu atau beberapa elemen ke bagian terakhir
dari array. Bentuk umum :
namaArray.push(elemen_1, ., elemen_N)
5. shift berguna untuk membuang elemen pertama dalam array dan memberikan nilai balik
berupa elemen pertama pada array.
Bentuk umum :
namaArray.shift()
6. unshift berguna untuk menambahkan satu atau beberapa elemen ke posisi sebelum
elemen partama dalam array
Bentuk umum :
nama_Array.unshift(elemen_1, ., elemen_N)
Pemrograman Web: HTML & JavaScript 124
7. slice berguna untuk mendapatkan satu atau beberapa elemen
dalam array. Bentuk umum :
namaArray.slice(indeksAwal, indeksAkhir)
8. Splice berguna untuk menghapus elemen-elemen dalam array dan sekaligus
menambahkan elemen-elemen ke dalam array.
Bentuk umum :
namaArray.splice(indeksAwal, jumlah_dihapus,
[el_tamb_1, .el_tamb_en])
9. toString berguna menghasilkan string yang tersusun atas elemen-elemen array dengan
pemisah berupa koma. Selain itu metode ini bisa dikenakan pada elemen array.
Kegunaannya adalah untuk mengubah sembarang tipe nilai elemen menjadi teks (string).
namaArray.toString
10. reverse membalik urutan elemen-elemen dalam string. Elemen pertama menjadi elemen
terakhir dan elemen terakhir menjadi elemen pertama. Bentuk umum :
namaArray.reverse()
11. sort berguna untuk mengurutkan data. Bentuk umum :
namaArray.sort
13.5. Array Dimensi Banyak
Selain berdimensi satu, array dapat juga dibuat menjadi dimensi banyak
(bisa dimensi dua atau tiga). Array berdimensi dua dapat dibentuk dengan
membuat dua buah array dan salah satu array diberikan sebagai elemen dari array
yang lain. Perhatikan contoh array dua dimensi berikut ini
:
FILE : skrip13-2.html
<HTML>
<HEAD>
<TITLE>Array Dua Dimensi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nilai = [ [100, 200, 300],
[400, 500, 600],
[700, 800, 900] ];
Pemrograman Web: HTML & JavaScript 125
document.write("Isi nilai:<BR>");
document.write(nilai + "<BR>");
document.write("Pengaksesan dengan dua
indeks:<BR>"); document.write(nilai[0][0]
+ "<BR>");
document.write(nilai[0][2 + "<BR>")
document.write(nilai[1][0 + "<BR>")
document.write(nilai[1][1 + "<BR>")
document.write(nilai[1][2 + "<BR>")
document.write(nilai[2][0 + "<BR>")
document.write(nilai[2][1 + "<BR>")
document.write(nilai[2][2 + "<BR>")
//-->
</SCRIPT
>
</BODY>
Maka hasilnya akan ditampilkan sebagai berikut :
Gambar 13.3 Hasil skrip13-2.html
Perhatikan pula contoh array tiga dimensi berikut ini :
Pemrograman Web: HTML & JavaScript 126
FILE : skrip13-3.html
<HTML>
<HEAD>
<TITLE>Array Tiga Dimensi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var x = [[["10", "20"], ["30", "40"]],
[["50", "60"], ["70", "80"]]];
document.write("Isi
x:<BR>
"); document.write(x +
"<BR>"
);
document.write("Pengaksesan dengan tiga indeks:<BR>");
document.write(x[0][0][0] + "<BR>");
document.write(x[0][0][1] + "<BR>");
document.write(x[0][1][0] + "<BR>");
document.write(x[0][1][1] + "<BR>");
document.write(x[1][0][0] + "<BR>");
document.write(x[1][0][1] + "<BR>");
document.write(x[1][1][0] + "<BR>");
document.write(x[1][1][1] + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 127
Gambar 13.4 Hasil
skrip13-3.html
Kerjakan latihan-latihan Array di bawah ini dan tampilkan outputnya pada jendela browser
(Internet Explorer atau Mozilla FireFox) :
1.
<HTML>
<HEAD>
<TITLE>Menampilkan Isi Array</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var jurusan = new Array ("Teknik Informatika",
"Sistem Informasi",
"Teknik Elektro",
"Teknik Industri");
var i;
for (i = 0; i < jurusan.length; i++) {
document.write(jurusan[i] + "<BR>");
}
//-->
</SCRIPT>
</BODY>
</HTML></HTML>
Pemrograman Web: HTML & JavaScript 128
2.
<HTML>
<HEAD>
<TITLE>Array Asosiatif</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var mobil = new Array();
mobil["tipe"] = "Grand Civic";
mobil["merk"] = "Honda";
mobil["cc"] = 1600;
mobil["warna"] = "Merah Tua";
for (var i in mobil)
document.write(i + " -> " + mobil[i] + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
3.
<HTML>
<HEAD>
<TITLE>Properti prototype</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function tampilkanElemenArray() { for
(var i = 0; i < this.length; i++) {
document.write("[" + i + "] = " + this[i] + "<BR>");
}
}
Array.prototype.cetak = tampilkanElemenArray;
var fti = new Array("Teknik Informatika", "Sistem Informasi", "Teknik Elektro", "Teknik Industri");
var ftsp = new Array("Arsitektur", "Teknik Sipil", "Disain Interior");
document.write("Jurusan yang ada di FTI: <BR>"); fti.cetak();
document.write("Jurusan yang ada di FTSP: <BR>");
ftsp.cetak();
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 129
4.
<HTML>
<HEAD>
<TITLE>Metode concat</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var a1 = new Array("Satu", "Dua", "Tiga");
var a2 = new Array("Empat", "Lima");
var a3 = a1.concat(a2);
for (var i = 0; i < a3.length; i++)
document.write("[" + i + "] = " +
a3[i] + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
5.
<HTML>
<HEAD>
<TITLE>Metode pop</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var a1 = new Array("Satu", "Dua", "Tiga");
document.write("Isi a1 semula:<BR>");
document.write(a1 + "<BR>");
var elemen = a1.pop();
document.write("Isi a1 setelah pop():<BR>");
document.write(a1 + "<BR>");
document.write("Elemen hasil pop():<BR>");
document.write(elemen + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 130
.6.
<HTML>
<HEAD>
<TITLE>Metode slice</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var a1 = new Array("Satu", "Dua", "Tiga", "Empat","Lima", "Enam");
document.write("Isi a1 semula:<BR>");
document.write(a1 + "<BR>");
var a2 = a1.slice(2);
document.write("Isi a1 setelah slice(2):<BR>");
document.write(a1 + "<BR>");
document.write("Isi a2 hasil slice(2):<BR>");
document.write(a2 + "<BR>");
var a3 = new Array("Satu", "Dua", "Tiga", "Empat","Lima", "Enam");
document.write("Isi a3 semula:<BR>"); document.write(a3 + "<BR>");
var a4 = a3.slice(2,5);
document.write("Isi a4 hasil slice(2, 5):<BR>");
document.write(a4 + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web: HTML & JavaScript 131
BAB 14
OBJEK JAVASCRIPT
14.1. Interaksi dengan Dokumen HTML
Objek Javascript yang berhubungan dengan dokumen HTML yang dimuat di
browser antara lain adalah objek form, objek button, objek text, objek checkbox,
objek radio, objek password, dan sebagainya.
14.1.1. Objek Form
Form yang pernah dipelajari pada bab-bab sebelumnya mempunyai dua buah
atribut yaitu METHOD dan ACTION. Formulir beserta atribut-atributnya dapat
diakses dengan menggunakan JavaScript.
Selain atribut-atribut di atas ada beberapa atribut lainnya yang
menyertai formulir, diantaranya :
1. Atribut NAME
Menyatakan nama formulir.
2. Atribut ENCTYPE
Menentukan jenis data pada URL. Misalnya berisi text/ascii . Pada Java
Script, metode ini dinyatakan dengan properti encoding.
3. Atribut TARGET
Menentukan hasil formulir yang akan ditempatkan pada frame atau halaman.
4. onSubmit
Penanganan kejadian jika tombol submit diklik
5. onReset
Penanganan kejadian jika tombol reset diklik
Perhatikan contoh berikut ini :
Pemrograman Web : HTML & JavaScript 132
FILE : skrip14-1.html
<HTML>
<HEAD>
<TITLE>Contoh FORM</TITLE>
</HEAD>
<BODY>
<FORM NAME = "form1" METHOD = "POST" ACTION = "skrip1-
1.html"
onSubmit = "alert('Tombol OK diklik')" onReset =
Masukkan Anda : <INPUT TYPE = NAME = "nama"
nama "TEXT"
<INPUT TYPE "SUBMIT" VALUE=" OK "
=
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Formulir akan menjalankan ");
document.write(document.forms[0].action); document.write("
jika tombol OK diklik");
//-->
</SCRIPT>
</BODY>
</HTML>
Jika file skrip14-1.html dijalankan kemudian isikan nama Anda pada text box
yang tersedia, maka hasilnya sebagai berikut :
Gambar 14.1 Hasil skrip14-1.html
Pemrograman Web : HTML & JavaScript 133
Jika tombol OK diklik maka akan ada jendela pesan seperti dibawah ini :
Gambar 14.2 Jendela Alert
Pada jendela alert tersebut, jika diklik tombol OK, maka browser akan menampilkan isi
file skrip1-1.html :
Gambar 14.3 Pemanggilan file skrip1-1.html
14.1.2. Objek Button
Tipe input pada formulir digunakan untuk memasukkan sebuah input yang biasanya
menggunakan beberpa atribut yang terdapat pada tag <INPUT>.
Beberapa atribut yang terdapat dalam tag <INPUT> dapat diproses dalam Java Script,
diantaranya :
Pemrograman Web : HTML & JavaScript 134
1. Atribut NAME
Menyatakan variabel dari sebuah masukkan.
2. Atribut Value:
Menyatakan judul pada tombol.
3. onClick():
Penanganan kejadian jika tombol ini diklik.
Perhatikan contoh berikut ini :
FILE : skrip14-2.html
<HTML>
<HEAD><TITLE>Obyek Button</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function checkTombol(form) {
if(form.tombol.value == " On
") {
alert("Tombol akan menjadi
Off"); form.tombol.value = "
Off ";
}else{
alert("Tombol akan menjadi
On"); form.tombol.value = "
On ";
}
}
//-->
</SCRIPT>
</HEAD>
<BODY><FORM>
Kliklah pada tombol berikut untuk membuat keadaan On ke Off
atau sebaliknya<BR>
Gambar 14.4 Pemanggilan file skrip14-2.html
Pemrograman Web : HTML & JavaScript 135
Pada gambar 14.4 di atas, jika tombol on diklik maka jendela browser
akan menampilkan jendela alert seperti di bawah ini :
Gambar 14.5 Alert tampilan akan menjadi off
Jika pada jendela alert tombol OK diklik, maka tombol akan berubah menjadi Off dan
begitu seterusnya.
14.1.3. Objek Text
Pada tag <INPUT> terdapat pula atribut text yang biasanya digunakan untuk
memasukkan data dari keyboard. Text ini dapat diproses pada JavaScript dan
dinamakan sebagai objek teks. Beberapayang berhubungan dengan text yang
digunakan pada JavaScript :
1. TYPE
Menyatakan jenis atribut dari TYPE
2. NAME
Menyatakan variabel
3. VALUE
Menyatakan isi dari field teks
4. onBlur
Penanganan kejadian saat field teks tidak disorot lagi
5. onChange
Penanganan kejadian saat isi field teks ini berubah
6. onFocus
Penanganan kejadian saat field teks ini menjadi fokus
7. onSelect
Penanganan kejadian saat isi field teks ini dipilih (diblok
8. focus()
Identik kalau field teks ini diklik
Pemrograman Web : HTML & JavaScript 136
9. blur()
Identik kalau field teks ini ditinggalkan
10. select()
Identik dengan memblok teks pada field teks ini.
Perhatikan contoh di berikut ini :
FILE : skrip14-3.html
<HTML>
<HEAD>
<TITLE>Memeriksa Objek text</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cekIsiField() {
if (document.form1.elements[0].value ==
"") { alert("Nama harap diisi");
document.form1.elements[0].focus();
return;
}
if (document.form1.elements[1].value ==
"") { alert("alamat harap diisi");
document.form1.elements[1].focus();
return;
}
window.location.href = "skrip14-2.html";
}
//-->
</SCRIPT>
<FORM NAME = "form1" METHOD = "POST">
Nama : <INPUT TYPE = "TEXT" NAME =
"nama"><BR> Alamat: <INPUT TYPE = "TEXT" NAME
= "alamat"><BR>
<INPUT TYPE = "BUTTON" NAME = "tombolok" VALUE = "Kirim"
onClick = "cekIsiField()">
</FORM>
/
Jika program tersebut dijalankan, maka browser akan menampilkan sebagai
berikut, kemudian isikan nama dan alamat pada kotak yang telah tersedia :
Pemrograman Web : HTML & JavaScript 137
Gambar 14.6 Hasil skrip14-3.html
Jika salah satu kotak tidak disi (nama atau alamat), kemudian tombol Kirim diklik, maka
browser akan menampilkan sebuah pesan berbentuk jendela alert seperti di bawah ini :
Gambar 14.7 Peringatan jika field alamat tidak diisi
Tetapi jika semua field telah terisi, maka browser akan menjalankan file skrip14-2.html.
14.1.4. Objek CheckBox
Kotak CheckBox berguna untuk melakukan pilihan yang kemungkinannya ada dua,
yaitu bisa dipilih atau bisa juga tidak. Objek checkbox dapat diproses dengan
JavaScript. Beberapa hal yang berhubungan dengan objek checkbox, diantaranya :
1. Atribut CHECKED
Digunakan untuk memberikan keadaan awal agar kotak check dalam keadaan
dicentang.
Pada JavaScript atribut ini identik dengan properti defaultChecked.
Pemrograman Web : HTML & JavaScript 138
2. Properti Checked
Untuk mengetahui keadaan kotak check. Nilainya true jika kotak check dalam
keadaan tercentang dan false untuk keadaan sebaliknya.
3. onClick
Menyatakan penanganan kejadian saat kotak check diklik.
Perhatikan contoh berikut ini :
FILE : skrip14-4.html
<HTML>
<HEAD>
<TITLE>Kotak Cek</TITLE>
</HEAD>
<BODY>
Pilihlah maksimal 15 SKS<BR>
<FORM NAME = "formTes" METHOD = "POST">
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cekKRS() {
var jum_sks = 0;
for (var i = 0; i < 7; i++) {
if (document.formTes.elements[i].checked)
jum_sks += matakuliah[i][2];
}
document.formTes.fieldJumlah.value = jum_sks; if
(jum_sks > 15)
alert("Anda harus mengurangi SKSn" + "karena melebihi 15
SKS");
}
function cekKirim() {
if (document.formTes.fieldJumlah.value > 15)
alert("Anda harus mengurangi SKSn" + "karena melebihi 15
SKS");
else
window.location.href = "url";
}
var matakuliah =
[["TI201", "Pemrograman Tertruktur", 3],
["TI202", "Pengenalan Basis Data", 3],
["TI203", "Komunikasi Data", 3],
["TI204", "Teknologi Informasi", 3],
["TI205", "Sistem Berkas", 3], ["IN201",
"Bahasa Inggris II", 2], ["FI201",
"Fisika Dasar II", 3]];
document.write("<TABLE BORDER = '2'>");
document.write("<TR><TH>Kode</TH><TH>Matakuliah</TH>");
document.write("<TH>SKS</TH><TH>Pilihan</TH></TR>"); for
(var i = 0; i < 7; i++) {
document.write("<TR><TD>" + matakuliah[i][0] + "</TD><TD>" +
matakuliah[i][1] + "</TD><TD>" + matakuliah[i][2] +
Pemrograman Web : HTML & JavaScript 139
"</TD><TD><INPUT TYPE = 'CHECKBOX'" + " NAME = 'mk" +
matakuliah[i][0] + "'" + " onClick = 'cekKRS()'>");
}
document.write("<TR><TD COLSPAN = '2' ");
document.write("ALIGN = 'RIGHT'>Jumlah SKS</TD>");
document.write("<TD COLSPAN = '2'>");
document.write("<INPUT TYPE = 'TEXT' VALUE = '0' ");
document.write("SIZE = '3'" ); document.write("NAME =
'fieldJumlah'</TD></TR>");
document.write("</TABLE>");
//-->
</SCRIPT>
<BR>
<INPUT TYPE = "BUTTON" NAME = "tombolKirim" VALUE = "Kirim"
onClick = "cekKirim()">
</FORM>
</BODY>
</HTML>
Jika program tersebut dijalankan, maka browser akan menampilkan :
Gambar 14.8 Hasil skrip 14-4.html
14.1.5. Objek Radio
Objek ini biasanya digunakan secara berpasangan, minimal dua buah. Objek ini
dapat diproses pada JavaScript. Beberapa hal yang berhubungan dengan
Radio Button, diantaranya :
Pemrograman Web : HTML & JavaScript 140
1. Atribut radio
Digunakan untuk memberikan keadaan awal agar radio button dalam keadaan
dipilih. Pada JavaScript atribut ini identik dengan properti defaultRadio.
2. Properti Radio
Untuk mengetahui keadaan radio button. Nilainya true jika radio button
dalam keadaan terpilih dan false untuk keadaan sebaliknya.
3. onClick
Menyatakan penanganan kejadian saat radio button diklik.
Perhatikan contoh berikut ini :
FILE : skrip14-5.html
<HTML>
<HEAD>
<TITLE>Objek radio</TITLE>
</HEAD>
<BODY>
Pilih hobby Anda<BR>
<FORM NAME = "form1" METHOD = "GET">
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "membaca"
onClick = "info()">Membaca<BR>
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "olahraga"
onClick = "info()">Olah Raga<BR>
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "menari"
onClick = "info()">Menari<BR>
<INPUT TYPE = "RADIO" NAME = "hobi" VALUE = "memasak"
onClick = "info()">Memasak<BR>
<HR> Info:
<INPUT TYPE = "TEXT" NAME = "fieldhobi" SIZE = "40">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function info() {
for (var i = 0; i < 4; i++)
if (document.form1.hobi[i].checked)
document.form1.fieldhobi.value =
document.form1.hobi[i].value;
}
//-->
</SCRIPT>
</BODY>
Jika skrip 14-5.html dijalankan, maka hasilnya adalah sebagai berikut :
Pemrograman Web : HTML & JavaScript 141
Gambar 14.9 Hasil skrip 14-5.html
14.1.6. Objek Password
Ciri dari objek password adalah apa yang diinput akan tercetak tanda
asterik atau bullet. Objek ini juga dapat diproses dengan menggunakan JavaScript.
Perhatikan contoh berikut ini :
FILE : skrip14-6.html
<HTML>
<HEAD><TITLE>Objek password</TITLE></HEAD>
<BODY>
<FORM NAME = "form1"
<PRE>
Masukkan Password 1:
Masukkan Password 2:
</PRE>
ACTION
= "skrip14-2.html" METHOD = "POST">
<INPUT
<INPUT
TYPE = "PASSWORD" NAME = "pass1"> TYPE = "PASSWORD" NAME = "pass2">
<INPUT TYPE = "BUTTON" NAME = "proses" VALUE = "Proses"
onClick = "cekPass()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cekPass() {
if (document.form1.pass1.value != document.form1.pass2.value)
alert("password1 dan password2 yang dimasukkan tidak sama");
else
window.location.href = "skrip14-2.html";
}
//-->
</SCRIPT>
</BODY>
</HTML>
Pemrograman Web : HTML & JavaScript 142
Jika skrip14-6.html dijalankan, maka hasilnya adalah sebagai berikut :
Gambar 14.10 Hasil skrip14-6.html
Setelah program skrip14-6.html dijalankan, maka akan tampil seperti yang terlihat
pada Gambar 11-10. Misalnya akan dimasukkan passwor 1 dan password 2
dengan karakter yang berlainan, kemudian klik tombol proses maka jendela
browser akan menampilkan sebuah jendela alert sebagai berikut :
Gambar 14.11 Password tidak sama
Sebaliknya, jika password keduanya benar, maka jendela browser akan
menampilkan file skrip14-2.html.
14.1.7. Upload Berkas
Pada tag <FORM> dapat menggunakan tag <INPUT> dengan TYPE berupa FILE
yang berguna untuk mengirim berkas ke server. Perhatikan contoh berikut ini :
FILE : skrip14-7.html
Pemrograman Web : HTML & JavaScript 143
<HTML>
<HEAD>
<TITLE>Upload Berkas</TITLE>
</HEAD>
<BODY>
<FORM NAME = "form1" METHOD = "POST">
Pilih berkas yang akan di-uplopad:
<INPUT TYPE = "FILE" NAME = "upload" onChange = "komentar()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function komentar() {
alert("Pilihan berkas: " + document.form1.upload.value);
}
//-->
</SCRIPT>
</BODY>
</HTML>
Jika skrip14-7.html dijalankan, maka hasilnya akan tampak sebagai berikut :
Gambar 14.12 Hasil skrip14-7.html
Jika tombol browse diklik, maka akan muncul kotak dialog sebagai berikut :
Pemrograman Web : HTML & JavaScript 144
Gambar 14.13 Kotak dialog memilih berkas
Pada gambar 14.13, pilihlah file yang akan diupload (misalnya skrip13-8.html) dan
klik tombol open, maka akan browser akan menampilkan jendela alert sebagai
berikut :
Gambar 14.14 Pesan bahwa memilih skrip13-8.html
--------------oOo---------------
Pemrograman Web : HTML & JavaScript 145
Pemrograman Web : HTML & JavaScript 146
Daftar Pustaka
https://id.wikipedia.org/wiki/HTML
https://www.w3.org
https://www.w3schools.com/html/default.asp
http://www.duniailkom.com
http://www.html-5-tutorial.com/
Firrar Utdirartatmo, Segudang Trik Pengembangan Situs Web, Penerbit
Andi, 2006
Alb. V. Dian Sano, HTML, JSP dan MySQL, Penerbit Andi, 2005.
Lukmanul Hakim & Uus Musalini, Cara Cerdas Menguasai Layout,
Desain dan Aplikasi Web, Elexmedia Komputindo, 2004
Sebesta, R.W., Programming the World Wide Web, Addison Wesley,
2002
Anda mungkin juga menyukai
- Tutorial Belajar JavaScript Dasar Untuk PemulaBelum ada peringkatTutorial Belajar JavaScript Dasar Untuk Pemula3 halaman
- Modul Pemrograman Dasar Untuk Jurusan RPL, TKJ Dan MM96% (27)Modul Pemrograman Dasar Untuk Jurusan RPL, TKJ Dan MM49 halaman
- Silabus - Full Stack ASPNET Core MVC and RESTful API ASPNET CoreBelum ada peringkatSilabus - Full Stack ASPNET Core MVC and RESTful API ASPNET Core3 halaman
- Diktat Kuliah Algoritma Dan Struktur Data 2 PDFBelum ada peringkatDiktat Kuliah Algoritma Dan Struktur Data 2 PDF102 halaman
- Pemrograman Web Dengan PHP MySQL PDFBelum ada peringkatPemrograman Web Dengan PHP MySQL PDF98 halaman
- Yuk Belajar Install Ubuntu Server 18.4Belum ada peringkatYuk Belajar Install Ubuntu Server 18.425 halaman
- Belajar HTML Dasar Pengertian HTML v2Belum ada peringkatBelajar HTML Dasar Pengertian HTML v2120 halaman
- Kelas Online - Fullstack Web Developer PDFBelum ada peringkatKelas Online - Fullstack Web Developer PDF7 halaman
- Belajar Bahasa Pemrograman Web (Basic) With PHP+MySQLBelum ada peringkatBelajar Bahasa Pemrograman Web (Basic) With PHP+MySQL53 halaman
- Membangun Server VoIP Dengan Aplikasi OzekiBelum ada peringkatMembangun Server VoIP Dengan Aplikasi Ozeki1 halaman
- Pengujian IaC Berbasis DevOps Dan Ansible Menggunakan Metode Black Box TestingBelum ada peringkatPengujian IaC Berbasis DevOps Dan Ansible Menggunakan Metode Black Box Testing8 halaman
- 11.0 MODUL CRUD DATA DOSEN FIREBASE (Secure)100% (1)11.0 MODUL CRUD DATA DOSEN FIREBASE (Secure)32 halaman
- Pdfbook Otomatisasi Administrasi Jaringan Dengan Script PythonBelum ada peringkatPdfbook Otomatisasi Administrasi Jaringan Dengan Script Python11 halaman
- Modul 1 Project Aplikasi Sistem Informasi Desa Dengan Berbasis Web Dan MobileBelum ada peringkatModul 1 Project Aplikasi Sistem Informasi Desa Dengan Berbasis Web Dan Mobile80 halaman
- Asuk Melihat Komputer Orang Lain Dengan CMDBelum ada peringkatAsuk Melihat Komputer Orang Lain Dengan CMD4 halaman
- Buku Panduan Geolocator Dan Location Service FlutterBelum ada peringkatBuku Panduan Geolocator Dan Location Service Flutter15 halaman
- Prosedur Instalasi Server Softswitch Berbasis SIP: Rizal Fahmi, A.Md - KomBelum ada peringkatProsedur Instalasi Server Softswitch Berbasis SIP: Rizal Fahmi, A.Md - Kom20 halaman
- Tutorial Membuat Website Dengan CMS Joomla Versi 3100% (4)Tutorial Membuat Website Dengan CMS Joomla Versi 352 halaman
- Mengkonfigurasi Internet Gateway Dan Hostpot Di Mikrotik Ilham Dan TsaqifBelum ada peringkatMengkonfigurasi Internet Gateway Dan Hostpot Di Mikrotik Ilham Dan Tsaqif4 halaman
- Materi_8_-_Pengenalan_HTML_-_Revisi 3Belum ada peringkatMateri_8_-_Pengenalan_HTML_-_Revisi 3124 halaman
- Pen Gen Alan Dasar HTML (Tugas Irfan)Belum ada peringkatPen Gen Alan Dasar HTML (Tugas Irfan)117 halaman
- Pemrograman Python untuk Pemula: PemrogramanDari EverandPemrograman Python untuk Pemula: Pemrograman
- Modul Pemrograman Dasar Untuk Jurusan RPL, TKJ Dan MMModul Pemrograman Dasar Untuk Jurusan RPL, TKJ Dan MM
- Silabus - Full Stack ASPNET Core MVC and RESTful API ASPNET CoreSilabus - Full Stack ASPNET Core MVC and RESTful API ASPNET Core
- Belajar Bahasa Pemrograman Web (Basic) With PHP+MySQLBelajar Bahasa Pemrograman Web (Basic) With PHP+MySQL
- Pengujian IaC Berbasis DevOps Dan Ansible Menggunakan Metode Black Box TestingPengujian IaC Berbasis DevOps Dan Ansible Menggunakan Metode Black Box Testing
- Pdfbook Otomatisasi Administrasi Jaringan Dengan Script PythonPdfbook Otomatisasi Administrasi Jaringan Dengan Script Python
- Modul 1 Project Aplikasi Sistem Informasi Desa Dengan Berbasis Web Dan MobileModul 1 Project Aplikasi Sistem Informasi Desa Dengan Berbasis Web Dan Mobile
- Buku Panduan Geolocator Dan Location Service FlutterBuku Panduan Geolocator Dan Location Service Flutter
- Prosedur Instalasi Server Softswitch Berbasis SIP: Rizal Fahmi, A.Md - KomProsedur Instalasi Server Softswitch Berbasis SIP: Rizal Fahmi, A.Md - Kom
- Tutorial Membuat Website Dengan CMS Joomla Versi 3Tutorial Membuat Website Dengan CMS Joomla Versi 3
- Mengkonfigurasi Internet Gateway Dan Hostpot Di Mikrotik Ilham Dan TsaqifMengkonfigurasi Internet Gateway Dan Hostpot Di Mikrotik Ilham Dan Tsaqif