Adoc - Pub Modul 1 Dasar Dasar HTML

http://www.hendra-jatnika.web.
id
Modul 1: Dasar-dasar HTML
1.1 HTML
• HTML adalah singkatan dari Hypertext Markup Language

• Suatu file HTML merupakan file text yang diapit oleh tag-tag markup
• Tag markup memberitahu Web browser bagaimana halaman ditampilkan
• Suatu file HTML haruslah mempunyai ekstensi sebagai htm atau html
– .html lebih disukai
– .htm digunakan karena masih ada server dengan sistim operasi lama yang hanya
dapat menangani nama “8+3” (8 characters, dot, 3 characters)
Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti notepad
1.2 Sejarah HTML

Tim Berners-Lee pada tahun 1989 yang mengusulkan suatu sistim dokumen hypertext
untuk digunakan oleh organisasi riset nuklir Eropa, CERN. HTML yang didasarkan Standard
Generalized Markup Language (SGML) belakangan diperkenalkan pertama kali dalam sistim
yang disebut "The World-Wide Web" (WWW) pada Oktober 1990. Kronologi perkembangan
HTML sejak diperkenalkan pertamakali hingga saat ini diperlihatkan sbb:
 Oktober tahun 1990: pertama kali doleh Berners-Lee's


e t
Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet

Juli 1994: draft untuk HTML 2.0 di rilis a N
Juni 1993: draft yang mendefenisikan HTML di rilis

 d r
Februari 1995: draft HTML 2.0 hasil perbaikan diusulkan sebagai suatu RFC (Request
For Comments)
e n
H
 September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866)
By
 Maret 1995: draft HTML 3.0 di rilis (belakangan habis masa nerlakunya/expired)
 Mei 1996: draft HTML 3.2 di rilis
 Juli 1996: HTML experimental DTD 'Cougar' di rilis
 Januari 1997: HTML 3.2 (Wilbur) direkomendasi oleh W3C (World Wide Web
Consortium
 Juli 1997: darft HTML 4.0 (dikembangkan dari Cougar) di rilis
 Nopember 1997: HTML 4.0 menjadi usulan rekomendasi W3C
 Desember 1997: HTML 4.0 direkomendasi oleh W3C
 April 1998: HTML 4.0 direvisi dan direkomendasi oleh W3C
 Desember 1998: draft untuk formulasi HTML dalam XML (eXtensible Markup
Language) dengan codename ‘Voyager’ di rilis
 Januari 1999: draft kerja awal XHTML 1.0 di rilis
 Desember 1999: XHTML 1.0 menjadi usulan rekomendasi W3C
 September 1999: draft kerja awal XHTML 1.1 di rilis
 Januari 2000: XHTML 1.0 direkomendasi oleh W3C
 April 2001: XHTML 1.1 menjadi usulan rekomendasi W3C
 Mei 2001: XHTML 1.1 direkomendasi oleh W3C
1.3 Tag HTML
• Tag HTML digunakan untuk mark elemen HTML

• Tag HTML ditempatkan dalam kurung, < … >
Page 1 / 197
http://www.hendra-jatnika.web.id
• Kebanyakan tag HTML merupakan pasangan, <b> dan </b> (tag awal dan akhir)
• Text yang berada diantara kedua tag adalah unsur content (tag bertindak sebagai
container)
• Tag harus tersusun secara baik (properly nested ) yaitu tidak saling tumpang tindih
• Tag tidak case sensitive; <b> mempunyai arti sama dengan <B>
• XHTML adalah case sensitive dan harus lower case
1.4 Struktur dokumen HTML

Dokumen HTML minimal memliki tag sbb:
<html>
<head>
<title>My Title</title>
</head>
<body>
Hello, World!
</body>
</html>
tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file
HTML
e t
tag <TITLE> dan </TITLE>, Tulisan yang berada diantara tag ini akan ditampilkan
N
oleh browser pada bagian title yang mana merupakan title dari jendela browser.
a
d r
tag <HEAD> </HEAD> , Berisi keterangan informasi halaman, seperti title dan jenis
dokumen dll
e n
H
tag <BODY> </BODY> , menandai awal dan akhir dari badan dokumen HTML yang
y
ditampilkan pada browser
B
1.5 Fungsi dan Pengunaan tag-tag dalam HTML
1.5.1 Menformat Text
HTML mengandung tag yang dapat digunakan memformat tampilan tulisan pada
halaman anda. Tag yang digunakan a.l:
tag <i> dan </i> untuk membuat text italic

tag <b> and </b> untuk membuat text boldface
tag <h1>, <h2>, <h3>, <h4>, <h5>, atau <h6> untuk header dalam dolumen dengan
ukuran font besar untuk <h1>dan terkecil untuk <h6> (lebih lanjut lihat modul)
Contoh :
Kode Hasil
<H1>Heading 1</H1>
<H2>Heading 2</H2> Heading 1
<H4>Heading 4</H4>
Heading 3
Heading 6
Page 2 / 197
Tabel tag untuk Formating dan Style

Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>
Author's Address <ADDRESS></ADDRESS>
Block Quote <BLOCKQUOTE></BLOCKQUOTE>
Citation <CITE></CITE>
Code <CODE></CODE>
Definition <DFN></DFN>
Division <DIV></DIV>
Emphasis <EM></EM>
Heading <H?></H?>
Keyboard Input <KBD></KBD>
Large Font Size <BIG></BIG>
Sample Output <SAMP></SAMP>
Small Font Size <SMALL></SMALL>
Strong Emphasis <STRONG></STRONG>
Variable <VAR></VAR>
Tabel tag Formatting Presentasi/tampilan
Base Font Size <BASEFONT SIZE=?>
Blinking <BLINK></BLINK>
Bold
Center
<B></B>
<CENTER></CENTER> e t
Change Font Size a
<FONT SIZE=+|-?></FONT> N
Font Color
d r
<FONT COLOR="#$$$$$$"></FONT>
Font Size
e n
<FONT SIZE=?></FONT>
Italic <I></I> H
Preformatted
Strikeout
By
<PRE></PRE>
<S></S>
Subscript <SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT>
Underline <U></U>
Width <PRE WIDTH=?></PRE>
Tabel tag Pengaturan Baris Halaman (Dividers)
Alignment <HR ALIGN=LEFT|RIGHT|CENTER>
Align Text <P ALIGN=LEFT|CENTER|RIGHT> </P>
Line Break <BR>
Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>
Horizontal Rule <HR>
No Break <NOBR> </NOBR>
Paragraph <P> </P>
Solid Line <HR NOSHADE>
Thickness <HR SIZE=?>
Width <HR WIDTH=?>
Width Percent <HR WIDTH=%>
Word Break <WBR>
Page 3 / 197
Tabel tag Pengaturan Warna dan Backgrounds

Active Link <BODY ALINK="#$$$$$$">
Background Color <BODY BGCOLOR="#$$$$$$">
Text Color <BODY TEXT="#$$$$$$">
Tiled Background <BODY BACKGROUND="URL">
Link Color <BODY LINK="#$$$$$$">
Visited Link <BODY VLINK="#$$$$$$">
1.5.2 Whitespace
• Whitespace adalah karakter yang tidak diprint seperti: space, tab, newline, dan lainnya
• HTML memperlakukan whitespace sebagai pemisah kata, dan baris text secara
otomatis mengikuti lebar dari halaman
• Untuk pidah baris halaman dapat digunakan tag <br> atau tag <p> dan </p>
membuat kumpulan text dalam satu pragraf
• Tag <pre> dan </pre> dapat digunakan pada text sehingga whitespace ditampilkan
sesuai dengan apa yang ditulis (“pre” singkatan dari “preformatted”)
1.5.3 Karakter khusus Yang di Cadangkan
Ada sejumlah karakter yang tidak dapat diketik langsung pada bagian body HTML,
termasuk symbol untuk bahasa asing.
e t
Tabel Karakter khusus
a N
Entitas r
Keterangan
d Contoh
©
e n
copyright symbol ©
® H
registered trademark ®

By symbol
trademark symbol ™
nonbreaking space
< less-than symbol <
> greater-than symbol >
& ampersand &
" quotation mark "
Contoh :
Kode Hasil
2 < 3, adalah benar<br> 2 < 3, adalah benar
3 > 4, adalah salah 3 > 4, adalah salah
Page 4 / 197
1.5.4 Lists
• Ada dua jenis list HTML yaitu ordered, <ol> to </ol>, dan unordered, <ul> to </ul>
• Ordered lists menggunakan nomor: 1, 2, 3, ...
• Unordered lists menggunakan bullets (•)
• Elements dari list adalah <li> dan </li>
Contoh :
Kode Hasil
<ul>  Sugar
<li>Sugar</li>  Chips
<li>Chips</li>  Caffeine
<li>Caffeine</li>  Chocolate
<li>Chocolate</li>
</ul>
Attributes
• Beberapa tag mempunyai atribut untuk tambahan informasi:

Bentuk: nama attribut="nilai atribut"
e t
N
Contoh: ordered list dapat diganti menjadi A, B, C, ... dengan memberi atribut sbb:
a
d r
en
Kode Hasil
<ol>
<li>Sugar</li> H 1. Sugar
<li>Chips</li>
<li>Caffeine</li> By 2.
3.
Chips
Caffeine
<li>Chocolate</li> 4. Chocolate
</ol>
<ol type="A">
<li>Sugar</li> A. Sugar
<li>Chips</li> B. Chips
<li>Caffeine</li> C. Caffeine
<li>Chocolate</li> D. Chocolate
</ol>
Tabel tag Lists

<UL TYPE=DISC|CIRCLE|SQUARE><LI
Bullet Type
TYPE=DISC|CIRCLE|SQUARE>
Defination List <DL> <DT> <DD> </DL>
Directory List <DIR> <LI> </DIR>
Menu List <MENU> <LI> </MENU>
Numbering Type <OL TYPE=A|a|I|i|1><LI TYPE=A|a|I|i|1>
Ordered Lists <OL> <LI> </OL>
Starting Number <OL VALUE=?><LI VALUE=?>
Unordered List <UL> <LI> </UL>
Page 5 / 197
1.5.4 Links
• Untuk me link kehalaman lain: <a href="URL"> ke halaman </a>

– Contoh: I'm taking <a href = "http://www.stmik.edu/news/index.html">Berita </a>
alumni.
– Link text secara otomatis akan berwarna biru dan underlined (purple jika telah
dikunjungi)
• Untuk link ke bagian lain dari halaman yang sama:
– Insert nama anchor: <a name="refs">References</a>
– Lakukan link: <a href="#refs">My references</a>
• Untuk link dari halam lain ke nama anchor:
<a href="PageURL#refs">My references</a>
• Untuk link e-mail <A HREF="mailto:psagala@yahoo.com">Mail!</A>
1.5.6 Images
• Images (pictures) bukanlah bagain dari halaman HTML; HTML hanya memberitahu
dimana image di temukan
<img src="URL" alt="text description" width="150" height="100">
•
• e t
Atribut src attribute yang diperlukan sedang lainnya optional
The URL alamat dan nama image seperti:.gif, .jpg, atau .png
• a N
Atribut alt memberi text sebagai representasi jika image gagal ditampilkan
•
d r
Atribut height and width jika disertakan memperbaiki tampilan image (jika ukuran salah
n
maka tampilan gambar akan terganggu)
e
H
• Tidak ada tag akhir </img> karena tag <img> bukan container
Tabel tag Links dan Gambar

Alignment
By <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>
<IMG SRC="URL"ALIGN=LEFT|RIGHT|
Alignment
TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***">
Border <IMG SRC="URL" BORDER=?>
<META HTTP-EQUIV="Refresh" CONTENT="?;
Client Pull
URL=URL">
Define Target <A NAME="***"> </A>
Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?">
Display Image <IMG SRC="URL">
Embed Object <EMBED SRC="URL">
Imagemap <IMG SRC="URL" ISMAP>
Imagemap <IMG SRC="URL" USEMAP="URL">
URL Link <A HREF="URL"> </A>
<A HREF="URL#***"> </A><A HREF="#***">
Link to Target
</A>
Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">
Map <MAP NAME="***"> </MAP>
Object Size <EMBED SRC="URL" WIDTH="?" HEIGHT="?">
Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?>
Page 6 / 197
<AREA SHAPE="RECT" COORDS=",,,"

Section
HREF="URL"|NOHREF>
Target Window <A HREF="URL" TARGET="***"> </A>
1.5.7 Tables
• Tables digunakan untuk mengorganisir informasi dalam dua dimensi (baris dan kolom)
• Suatu <table> dapat terdiri satu atau lebih baris table, <tr>
• Setiap baris table terdiri dari satu atau lebih cell table data, <td>, atau cell table header,
<th>
– Perbedaan antara <td> dan <th> hanya pada format text. Pada cell <th> otomatis
dalam format “boldface” dan “centered”
• Borders (batas) pada cell dapat diberi dengan menambah attribute: border="1" pada tag
awal <table>
Contoh table:
Kode Hasil
<table border="1">
<tr>
<th>Name</th> <th>Phone</th>
</tr>
<tr>
<td>Dick</td> <td>555-1234</td>
</tr> e t
<tr> a N
<td>Jane</td> <td>555-2345</td>
d r
</tr>
e n
<tr> H
By
<td>Sally</td> <td>555-3456</td>
</tr>
</table>
Tabel tag untuk Tables

Define Table <TABLE> </TABLE>
Table Border <TABLE BORDER> </TABLE>
Table Border <TABLE BORDER=?> </TABLE>
Cell Spacing <TABLE CELLSPACING=?>
Cell Padding <TABLE CELLPADDING=?>
Table Width <TABLE WIDTH=?>
Table Width (%) <TABLE WIDTH=%>
Table Caption <CAPTION> </CAPTION>
Table Alignment <CAPTION ALIGN=TOP|BOTTOM>
Table Row <TR> </TR>
Table Header <TH> </TH>
<TD ALIGN=LEFT|RIGHT|CENTER
Alignment
VALIGN=TOP|MIDDLE|BOTTOM>
No Line Breaks <TD >
Columns to Span <TD COLSPAN=?>
Rows to Span <TD ROWSPAN=?>
Page 7 / 197
Desired Width <TD WIDTH=?>

Width Percent <TD WIDTH=%>
1.5.8 Frames
• Frames adalah cara membagi jendela browser dalam beberapa bingkai. Halaman
HTML terpisah dapat ditempatkan pada tiap bingkai.
Framesets
• Frames ditempatkan dalam frameset

• Gantikan <body>...</body> dengan <frameset>...</frameset>
• Pada Tag awal <frameset> gunakan atribut:
• rows= nilai dari tinggi baris _
• cols= nilai dari lebar koloml_
• Nilai dapat berupa % atau pixel)
Contoh: <frameset cols="20%,80%">
Menambah frames pada frameset
• Letakkan tag <frame> dalam <frameset> yang merupakan rows atau columns
t
– <frame> bukan container maka tidak ada tag akhir </frame>
e
N
• Setiap <frame> mempunyai atribut seperti ini: src=”URL “
a
Dan beberapa tag e optional:
d r
– scrolling="yes|no|auto" (default is "auto")
– noresize
e n
H
By
Contoh lengkap Frame (situs The Java API):
Kode
<HTML>
<HEAD>
<TITLE>Java 2 Platform SE v1.4.0</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAMESET rows="30%,70%">
<FRAME src="overview-frame.html" name="packageListFrame">
<FRAME src="allclasses-frame.html" name="packageFrame">
</FRAMESET>
<FRAME src="overview-summary.html" name="classFrame">
</FRAMESET>
<NOFRAMES>
<H2>If you see this, you have frames turned off!</H2>
</NOFRAMES>
</HTML>
Page 8 / 197
Hasil
e t
a N
d r
Tabel tag Frames e n
H
By
Column Widths <FRAMESET COLS=,,,> </FRAMESET>
Column Widths <FRAMESET COLS=*> </FRAMESET>
Define Frame <FRAME>
Display Document <FRAME SRC="URL">
Frame Document <FRAMESET> </FRAMESET>
<FRAME
Frame Name
NAME="***"|_blank|_self|_parent|_top>
Margin Width <FRAME MARGINWIDTH=?>
Margin Height <FRAME MARGINHEIGHT=?>
Not Resizeable <FRAME NORESIZE>
Scrollbar <FRAME SCROLLING="YES|NO|AUTO">
Row Heights <FRAMESET ROWS=,,,> </FRAMESET>
Row Heights <FRAMESET ROWS=*> </FRAMESET>
Unframed Content <NOFRAMES> </NOFRAMES>
1.5.9 Forms
• <form> merupakans tag HTML yang digunakan untuk rancangan interface pada halam
web:
– Untuk meminta informasi dari user yang kemudian dikirim ke server
• Suatu form terdiri dari:
Page 9 / 197
– : <form parameters> ...form elements... </form>
Elemen Form termasuk:: buttons, checkboxes, text fields, radio buttons, drop-down
menus, dll
– Form biasanya dilenkapi button untuk kirim informasi ke server “Submit button”
Parameters form memberitahu bagaimana informasi dikirim:.
– action="url" (diperlukan)
• menetapkan kemana informasi dikirim jik button “Sbmit” diklik
– method="get" (default)
• Data Form dikirim sebagai suatu URL dengan menyertakan info data form form
• Dapat digunakan jika hanay menggunkan data l ASCII dan tidak lebih dari 100
karakter
– method="post"
• Data Form dikirim dalam body URL request
tag <input>
– Kebanyakan elemen form menggunakan tag input dengan, type="..." berupa: text,
checkbox, radio, password, hidden, submit, reset, button, file, atau image
• Parameter taga input a.l:
– name: nama dari elemen
– value: “value”/nilai dari elemen
– readonly: nila yang tak bisa dirobah
e t
– disabled: user tak dapat melakukan apa pun pada elemen ini
a N
Contoh-contoh Text input:
d r
e n
A text field:
H
By
<input type="text" name="textfield" value="with an initial value">
Hasil:
A password field:
<input type="password" name="textfield3" value="secret">
Hasil:
textarea
A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
Hasil:
Page 10 / 197
Buttons
• A submit button:
<input type="submit" name="Submit" value="Submit">
• A reset button:
<input type="reset" name="Submit2" value="Reset">
• A plain button:
<input type="button" name="Submit3" value="Push Me">
Hasil:
Keterangan:
e t
• Submit : kirim data
a N
Reset : restore semua lemen form ke keadaan semula
•
• Button : ada aksi dari java script d r
e n
H
Checkboxes
Kode
By Hasil
A checkbox:
<input type="checkbox"
name="checkbox”
value="checkbox" checked>
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female
Hasil:
Page 11 / 197
Drop-down menu or list

Kode Hasil
A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
Contoh lengkap:
Kode Hasil
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type"
content="text/html;
</head>
charset=iso-8859-1">
e t
<body> a N
<p><b>Who are you?</b></p>
d r
<form method="post" action="">
e n
<p>Name: H
By
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender"
value="m">Male
<input type="radio" name="gender"
value="f">Female</p>
</form>
</body>
</html>
Tabel tag Forms

Checked <INPUT CHECKED>
Default Option <OPTION SELECTED>
<FORM ACTION="URL" METHOD=GET|POST>
Define Form
</FORM>
Field Name <INPUT NAME="***">
Field Size <INPUT SIZE=?>
Field Value <INPUT VALUE="***">
File Upload <FORM ENCTYPE="multipart/form-data></FORM>
Input Box Size <TEXTAREA ROWS=? COLS=?> </TEXTAREA>
Input Field <INPUT
Page 12 / 197
TYPE="TEXT|PASSWORD|CHECKBOX|RADIO
|IMAGE|HIDDEN|SUBMIT|RESET">
Max Length <INPUT MAXLENGTH=?>
Multiple Choice <SELECT MULTIPLE>
Name of Box <TEXTAREA NAME="***"> </TEXTAREA>
Name of List <SELECT NAME="***"> </SELECT>
Option <OPTION>
Selection List <SELECT> </SELECT>
<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL>
Wrap Text
</TEXTAREA>
# of Options <SELECT SIZE=?> </SELECT>
Contoh Komplit kombinasi form dan table:

Kode:
<html>
<body>
<center>
<form method="POST" action="Kuesioner.php3">
<div align="center">
<center>
<table border="0" width="500">
<tr>
<th colspan=2>
Kuesioner Mahasiswa
e t
</th>
a N
</tr>
<tr>
d r
<td width="106">Nama</td>
e n
H
<td width="471"><input type="text" name="Nama" size="20"></td>
</tr>
<tr>
By
<td width="106">Password</td>
<td width="471"><input type="password" name="Password"
size="20"></td>
</tr>
<tr>
<td width="106">Jenis Kelamin</td>
<td width="471"><input type="radio" value="0" checked
name="Kelamin">Pria
<input type="radio" name="Kelamin"
value="1">Wanita</td>
</tr>
<tr>
<td width="106">Hobby</td>
<td width="471"><input type="checkbox" name="C1"
value="ON">Membaca,
<input type="checkbox" name="C2" value="ON">Sport,
<input type="checkbox" name="C3" value="ON">Music,
<input type="checkbox" name="C4"
value="ON">Memasak,
<input type="checkbox" name="C5" value="ON">Tamasya
</td>
</tr>
<tr>
<td width="106">Komentar</td>
<td width="471"><textarea rows="2" name="Komentar"
cols="55"></textarea></td>
</tr>
Page 13 / 197
<tr>
<td width="106">Jurusan</td>
<td width="471"><select size="1" name="Jurusan">
<option selected>Komputer</option>
<option>Akuntansi</option>
<option>Sekretaris</option>
</select></td>
</tr>
</table>
</center>
</div>
<p><input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Reset"></p>
</form>
</center>
</body>
</html>
Hasil:
Kuesioner Mahasiswa
Nama
Password
Jenis
Kelamin Pria Wanita
Membaca, Sport, Music,

Hobby
Memasak, Tamasya
e t
a N
Komentar
d r
e n
Jurusan
H
By
Komputer
Submit Reset
1.6 Link Absolut dan Relatif

Pada bab diatas telah ditunjukan kode html yang berfungsi sebagai link ke objek
gambar taupun ke halaman html seperti: <a href="URL"> ke halaman </a>.
URL (Uniform Resource Location) merupkan alamat/lokasi tempat objek gambar atau
halaman yang hendak dilink berda. Objek tersebut dapat berada dalam satu folder dengan file
pemanggil atau berda pada folder lain yang berbeda.
Ada dua cara menuliskan lokasi atau alamat yang dilink/dipanggil tersebut yaitu dengan
menuliskan secara lengkap URL yang dilink seperti (link absolut):
http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif
Dalam contoh ini chef.gif adalah nama objek gambar yang dipanggil/dilink dengan lokasi
seperti ditunjukkan diatas. Sedangkan file yang memanggil adalah page1.html.
Cara lain adalah dengan menuliskan alamat relatif seperti berikut (link relatif):
Page 14 / 197
SRC="chef.gif" berarti gambar tersebut ada

di folder yang sama dengan dokumen html
SRC="images/chef.gif" berarti gambar

tersebut terletak satu folder di bawah (sub
folder) dokumen html.
SRC="../chef.gif" berarti gambar tersebut

terletak satu folder di atas dokumen html.
SRC="../../chef.gif" berarti gambar

tersebut terletak dua folder di atas dokumen
html.
e t
a N
d r
SRC="../images/chef.gif" berarti gambar
H en tersebut terletak satu folder di atas kemudian

satu folder ke bawah di direktori images.
By
SRC="../../../other/images/chef.gif"
Ada baiknya menggunakan URL relatif dibandingkan dengan pemakaian URL absolut
(lengkap). Karena dalam perancangan web site, hasil rancangan dapat disimpan di hard disk
sendiri dan semua link akan berfungsi pada saat di-upload ke server di internet, dan juga
file/gambar tersebut akan lebih cepat ditampilkan oleh browser. Adapun URL absolut
digunakan jika gambar tadi terletak di server yang sama sekali berbeda.
Page 15 / 197
CSS (Cascading Style Sheets)
Pendahuluan
CSS merupakan suatu teknik atau cara sederhana dalam membuat style (layout-tampilan)
dokumen html menjadi lebih efisien. Dengan CSS pekerjaan dalam desain dan pengelolaan situs
web menjadi lebih mudah karena ada pemisahan antara konten dan layout. Satu style sheet dapat
digunakan untuk tampilan keseluruhan situs. Dengan demikian melakukan modifikasi file css
secara otomatis akan meng update juga keseluruhan halaman-halaman web.
Pada dasarnya CSS adalah kumpulan/list dari statemen (pernyataan) atau dikenal sebagai
rules yang dapat merender berbagai sifat pada elemen HTML. Style rule dapat ditujukan untuk
elemen tunggal, multi elemen, seluruh dokumen, atau bahkan sekaligus untuk multi dokumen.
Juga dimungkinkan menerapkan banyak rule yang saling berbeda untuk suatu elemen berbeda
lokasi yang menggunakan metoda berbeda. Sebagai style rule tunggal, semua rule ini
dikumpulkan dan di satukan dan dikenal sebagai “cascading” of style.
Sintaks bahasa untuk style sheet agak berbeda dengan HTML, sehingga diperlukan
penjelasan lebih lanjut dalam implementasinya.
Alasan diperkenalkannya CSS adalah ketika HTML yang semula ditujukan untuk mark-up
language berbasis content (content terpisah dari kode), berkembang tak terkendali dengan
diperkenalkannya berbagai cara formatting dan juga elemen/atribut oleh para pembuat browser.
Sehingga menjadikan kode HTML terkotori dan menyimpang dari tujuan utama HTML. Dengan
CSS dapat dibuat terpisah antara tampilan dan content.
e t
Perkembangan CSS:
a N
- Mei 1995 - Draft awal CSS d r
e n
- November 1995 – Drat kerja CSS1 oleh W3C (World Wide Web Consortium)
H
- 17 Desember 1996 - CSS1 direkomendasi oleh W3C
By
- November 1997 – Draft kerje CSS2 di rilis ke publik
- Maret 1998 - CSS2 usulan rekomendesai W3C
- Mei 1998 - CSS2 direkomendasi oleh W3C
- Desember 1998 - W3C merilis Note "List of suggested extensions to CSS" -
- Augustus 2002 – Draft pertama CSS 2.1 dirilis ke publik
- Januari 2003 – Draft kerja kedua dari CSS 2.1 dirilis
- September 2003 – Draft kerja terakhir CSS 2.1 dirilis
Deawasa ini hampir semua browser mendukung CSS2, meskipun ada bagian dari fitur yang
belum dapat di implementasi pada browser. Dan saat ini CSS3 masih dalam pengembangan
dengan memikirkan penggunaan ke depan.
Keuntungan Style Sheets
 Pemisahan antara content dari tampilan

 Tampilan dan layout semua halaman situs web dapat dirancang dalam satu file
 Menghasilkan markup HTML yang lebih bagus, fleksibel dan maintainable
 Dapat digunakan baik untuk HTML maupun halaman XML
 Menambah kecepatan download
 Proses rendering dilakukan di sistem dari pada di layar halaman
 Mempunyai banyak fitur kontrol visual
 Mudah di kembangkan untuk kemampuan ke depan
Page 16 / 197
Kelemahan CSS sbb:
 Browser-browser belum sepenuhnya men-support secara baik semua fitur CSS
Ada 3 cara implementasi CSS pada halaman html yaitu:

Inline Styles
embedded stylesheets
external stylesheets
Sintaks CSS
Sintaks CSS cukup sederhana—terdiri dari kumpulan selectors (pilihan tags) dan
descriptors (memberi tahu apa yang dilakukan padanya):
Selektor dinyatakan terlebih dahulu yang kemudian Selektor ditempatkan pad kurung
kurawal {' and '}.
• File CSS hanya terdiri dari pasangan-pasangan selector/descriptor

– Selectors berupa tag HTML atau tag XML
• Sintaks umum adalah:

e t
selector {property: value}
a N
d r
– atau
e n
selector, ..., selector {
H
By
property: value;
...
property: value }
– dimana:
• selector adalah tag yang akan dipengaruhi

• property dan value menjelaskan bagaimana tag ditampilkan
– Contoh: h1 {color: green; font-family: Verdana} artinya sesuatu yang terkandung

dalam tag h1 (HTML heading level 1) akan menjadi : font Verdana dan warna green
Contoh CSS
Contoh Keterangan
/* This is a comment */ Komentar
h1,h2,h3 {font-family: Arial, sans-serif;} Prioritas adalah font pertama
p, table, li, address { font-family: "Courier Font dan margin diberlakukan untuk
New";margin-left: 15pt; } semua tag (p, table, address)
p, li, th, td {font-size: 80%;} Ukuran 80% untuk elemen dari tag
th {background-color:#FAEBD7} Warna dpt dpt ditulis dalam
Page 17 / 197
body { background-color: #ffffff;} hexadesimal

a:link {color:darkred} an unvisited link
a:visited {color:darkred} a link that has been visited
a:active {color:red} a link now being visited
a:hover {color:red} when the mouse hovers over it
Selectors
• Tag-tag baik HTML atau XML dapat digunakan sebagai elemen selector:
body { background-color: #ffffff }
• Multiple selectors:
em, i {color: red}
Pengulangan selectors:
h1, h2, h3 {font-family: Verdana; color: red}
h1, h3 {font-weight: bold; color: pink}
• Jika terjadi ketidak sesuaian nilai, maka yang paling akhir menimpa yang pertama
• Universal selector * dapat digunakan untuk semua elements:
* {color: blue}
• Jika terjadi ketidak sesuaian nilai, maka selectors spesifik menimpa yang umum (sehingga
em akan tetap red)
Contoh
e t
a N
d r
e n
H
By
• Descendent selector memilih tag dengan specific ancestor:

– p code { color: brown }
code dipilih jika berda dalam suatu paragraph
• A child selector > memilih tag dalam suatu specific parent:
h3 > em { font-weight: bold }
memlih em hanya jika parent yang diikuti segera adalah h3
• An adjacent selector memilih element yang diikuti segera oleh lainnya:
b + i { font-size: 8pt }
Contoh: <b>I'm bold and</b> <i>I'm italic</i>
Hasil: I'm bold and I'm italic
• Attribute selector :
– Syntax: element[attribute] { ... }
– Contoh: table[border] { ... }
Page 18 / 197
• Nilai atribut:
– Syntax: element[attribute="value"] { ... }
– Contoh: table[border="0"] { ... }
Atribut class
• Memungkinkan styles yang berbeda untuk element yg sama

– Style sheet:
p.important {font-size: 24pt; color: red}
p.fineprint {font-size: 8pt}
– Pada HTML:
<p class="important">The end is nigh!</p>
<p class="fineprint">Offer ends 1/1/97.</p>
• Mendefenisikan suatu selector yang dapat di aplikasikan pada setiap elemen pada class,
cukup hilangkan nama tag (tetap ada dot):
.fineprint {font-size: 8pt}
Atribut id
• Atribut id layaknya atribut class, tapi menggunakan tanda # .

– Style sheet:
e t
p#important {font-style: italic} atau
a N
# important {font-style: italic}
d r
– Pada HTML:
<p id="important"> e n
H
• class dan id keduanya dapat digunakan, dan tidak mesti mempunyai nama yang
berbeda: By
<p class="important" id="important">
div dan span
• div dan span adalah elemen HTML yang mempunyai fungsi untuk menangani informasi
CSS
• div seperti layaknya paragraph membri line break sebelum dan sesudah; sedangkan
span tidak
• Contoh:
– CSS: div {background-color: #66FFFF}
span.color {color: red}
– HTML: <div>This div is treated like a paragraph, but <span class="color">this
span</span> is not.</div>
Penggunaan style sheets

• Ada tiga cara menggunakan (attach) CSS:
– External style sheet

• Merupakan cara yang paling powerful (ber dayaguna)
Page 19 / 197
• Berlaku baik untuk HTML maupun XML

• Semua CSS dapat digunakan
– Embedded style sheet

• Digunakan hanya pada HTML (bukan utko XML)
• Semua CSS dapat digunakan
– Inline styles
• Digunakan hanya pada HTML (bukan utko XML )
• Terbatas dalam sintaks CSS
External style sheets
• Dalam HTML, ditempatkan dalam elemen <head> :

<link REL="STYLESHEET" TYPE="text/css" HREF="Style Sheet URL">
• Dalam prolog dokumen XML:

<?xml-stylesheet href="Style Sheet URL" type="text/css"?>
Embedded style sheets

e t
• Dalam HTML, pada elemen <head> :
a N
<style TYPE="text/css">
d r

H
</style> By
Catatan: tanda  adalah merupakan tanda untuk komentar dalam html. Akan
tetapi dalam hal ini berfungsi untuk menghindarkan tampilan error jika browser yang
menggunakan belum mengenal/tidak support css.
Inline style sheets
• Atribut STYLE dapat ditambahkan pada setiap elemen HTML:

<html-tag STYLE="property: value"> or
<html-tag STYLE="property: value;
property: value; ...; property: value">
• Keuntungan:
– Berguna jika hanya sebagian kecil yang ingin di markup
• Kekurangan:
– Karena tercampur - membingungkan kode HTML
– Tidak dapat diterapkan keseluruhan fitur CSS
Page 20 / 197
Urutan (order) Cascading
• Styles diterapkan pad HTML dalam urutan berikut:

– Browser default
– External style sheet
– Internal style sheet (inside the <head> tag)
– Inline style (inside other elements)
• Jika ada conflict dalam styles conflict, maka yang terdekat (nearest) ( atau most
recently applied) dimenangkan
Contoh urutan cascading:
• External style sheet: h3 { color: red;

text-align: left;
font-size: 8pt }
• Internal style sheet: h3 { text-align: right;
font-size: 20pt }
• Hasil pada attributes: color: red;
text-align: right;
font-size: 20pt
e t
Beberapa properties and values dari font a N
d r
• font-family:
e n
– inherit (same as parent) H
By
– Verdana, "Courier New", ... (if the font is on the client computer)
– serif | sans-serif | cursive | fantasy | monospace
• font-size:
– inherit | smaller | larger | xx-small | x-small | small | medium | large | x-large
| xx-large | 12pt
• font-weight:
– normal | bold |bolder | lighter | 100 | 200 | ... | 700
• font-style:
– normal | italic | oblique
Menyingkat properties
• Contoh kombinasi properties:

h2 { font-weight: bold; font-variant: small-caps; font-size: 12pt; line-height:
14pt; font-family: sans-serif }
dapat ditulis sebagai:

h2 { font: bold small-caps 12pt/14pt sans-serif }
Page 21 / 197
Colors dan lengths
• color: and background-color:

– aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive |
purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) | Browser-
specific names (not recommended)
• Dalam ukuran:
– em, ex, px, % : font size, x-height, pixels, percent of inherited size
– in, cm, mm, pt, pc: inches, centimeters, millimeters, points (1/72 of an inch), picas (1
pica = 12 points), relative to the inherited value
Beberapa properties dan values dari Text
• text-align:
– left | right | center | justify
• text-decoration:
– none | underline | overline | line-through
• text-transform:
– none | capitalize | uppercase | lowercase
• text-indent
– length | 10% (indents the first line of text)
e t
• white-space:
a N
– normal | pre | nowrap
d r
e n
Pseudo-classes H
•
waktu:
By
Pseudo-classes adalah elemen yang keadaan (dan tampilan) dapat berobah terhadap
• Syntax: element:pseudo-class {...}

– :link  suatu link yang belum dikunjungi
– :visited  link yang sudah dikunjungi
– :active  link yang sedang diklik
– :hover  link yang ditempatkan mouse di atasnya (tapi belum di klik)
• Pseudo-classes dapat ditempatkan dimanapun dalam CSS selectors
Page 22 / 197
Tabel Sintaks CSS Kaitannya dengan Versi Browser
CSS Browser
Sintak Sintak Spesifik 1.0 2.0 IExplorer Netscape Opera
Inclusion Methods X X 3.0 4.0B2 3.5
External Style Sheets X X 3.0 4.0B2 3.5
Embedded Style Sheets X X 3.0 4.0B2 3.5
Inline Style Sheets X X 3.0 4.0B3 3.5
@Rules X X 4.0 4.0 3.5
@charset -- X 5.5 6.0 ??
@import X X 4.0 6.0 3.5
@media -- X 4.0 6.0 3.5
@namespace -- -- -- 6.0 --
@page -- X 5.5 -- 4.0
@fontdef -- -- -- 4.0-4.x --
@font-face -- X 4.0 -- --
Rule Set Syntax X X 3.0 4.0 3.5
Selector Grouping X X 3.0 4.0 3.5
Declaration Grouping X X 3.0 4.0 3.5
e t
Declaration Shorthands X X
a N3.0 4.0 3.5
Selectors X
d r X 3.0 4.0 3.5
Element - Namespace
e n -- -- -- 6.0 --
Element - Universal H -- X 5.0 6.0 4.0
By
Element - Simple
Element - Descendent
X
X
X
X
3.0
3.0
4.0
4.0
3.5
3.5
Element - Child -- X -- 6.0 3.5
Element - Adjacent -- X -- 6.0 5.0
Attribute - Simple -- X -- 6.0 4.0
Attribute - Value -- X -- 6.0 4.0
Attribute - Begin Value -- -- -- 6.0 --
Attribute - End Value -- -- -- 6.0 --
Attribute - Substring Value -- -- -- 6.0 --
Attribute - One-Of-Many -- X -- 6.0 4.0
Attribute - Hyphen -- X -- -- --
Attribute - Namespace -- -- -- 6.0 --
HTML - Class X X 3.0 4.0 3.5
HTML - ID X X 3.0 4.0 3.5
Pseudo-Classes X X 3.0 4.0 3.5
:link X X 3.0 4.0 3.5
:visited X X 3.0 4.0 3.5
:active X X 4.0 6.0 5.0
Page 23 / 197
:hover -- X 4.0 6.0 4.0

:focus -- X -- 6.0 7.0
:root -- -- -- 6.0 --
:empty -- -- -- 6.0 --
:not -- -- -- 6.0 --
:first-child -- X -- 6.0 7.0
:first-node -- -- -- 6.0 --
:last-node -- -- -- 6.0 --
:last-child -- -- -- 6.0 --
:lang -- X -- -- --
:viewport -- -- -- 6.0 --
:viewport-scroll -- -- -- 6.0 --
:canvas -- -- -- 6.0 --
:scrolled-content -- -- -- 6.0 --
:first -- X -- -- ??
:left -- X -- -- ??
:right -- X -- -- ??
Pseudo-Elements X X 5.5B1 6.0 3.5
:before -- X --
e t 6.0 4.0
:after -- X
a N -- 6.0 4.0
:first-letter X d rX 5.5B1 6.0 3.5
:first-line e n X X 5.5B1 6.0 3.5
Miscellaneous Syntax
H X X 3.0 4.0 3.5
Unicode Escapes By -- X 6.0 6.0 6.0
Comments X X 3.0 4.0 3.5
!important X X 4.0 6.0 3.5
Contoh-Contoh:
Contoh 1 (eksternal css)
Copy dan paste berikut ini sebagai eksternal1.css
body {background-color: yellow}

h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
Files eksternal1.css di link melalui file html:
eksternal1.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="eksternal1.css" />
</head>
Page 24 / 197
<body>
<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>
<p>This paragraph has a left
margin of 50 pixels</p>
</body>
</html>
Contoh 2 (eksternal css)
eksternal2.css
body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
eksternal2.html
<html>
<head>
<link rel="stylesheet" type="text/css"
href="eksternal2.css"/>
e t
</head>
a N
<body> d r
e n
<h1>This is a header 1</h1>
H
By
<hr>
<p>You can see that the style

sheet formats the text</p>
<p><a href="index.html" tppabs="http://www.microsoft.com/"

target="_blank">This is a link</a></p>
</body>
</html>
Contoh3 (embedded css)

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>

<h2>This is header 2</h2>
Page 25 / 197
<p>This is a paragraph</p>
</body>
</html>
Contoh 4 (embedded css)
<html>
<head>
p {border-style: solid;
border-bottom-width: 15px}
</style>
</head>
<body>
<p>The "border-bottom-width" property is not recognized in Internet

Explorer if it is used alone. Use the "border-style" property to set the
borders first
with Internet Explorer.</p>
</body>
</html>
Contoh 5 (embedded css)

e t
<html>
<head> a N
d r
ul {float:left;
e n
width:100%;
padding:0; H
margin:0;
By
list-style-type:none;}
a {float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
In the example above, we let the ul element and the a element float to
the left.
The li elements will be displayed as inline elements (no line break
Page 26 / 197
before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a
width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>
</body>
</html>
Contoh 6 (embeded css)

<html>
<head>
ul {
list-style-type:square; list-style-position:inside; list-style-
image:url('arrow.gif')}
</style>
</head>
<body>
<p><b>Note:</b> Netscape 4 does not display the images or position the

list.</p>
<ul>
<li>Coffee</li>
e t
<li>Tea</li>
<li>Coca Cola</li> a N
</ul>
d r
e n
</body>
</html> H
Contoh 7 (embeded css)
<html>
By
<head>
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}

a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}

a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}

a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}

a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
Page 27 / 197
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp.htm"

tppabs="http://www.w3schools.com/css/default.asp" target="_blank">This
link changes color</a></b></p>
<p><b><a class="two" href="default.asp.htm"
link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp.htm"
link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp.htm"
link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp.htm"
link changes text-decoration</a></b></p>
</body>
</html>
References
e t
• Some of the examples in this presentation were taken from the W3Schools online tutorial at
http://www.w3schools.com/css/css_syntax.asp
a N
d r
• Dave Raggett’s Adding a Touch of Style is a very nice online tutorial at
http://www.w3.org/MarkUp/Guide/Style
e n
H
• Index DOT Css has also been a great source of information about CSS:
By
http://www.blooberry.com/indexdot/css/index.html
– In particular, there is a list of when CSS features were first supported by which browsers (-
- means “not yet supported”) at
http://www.blooberry.com/indexdot/css/supportkey/syntax.htm
Page 28 / 197
e t
a N
d r
e n
H
By
Page 29 / 197
JavaScript
Apa dan untuk apa JavaScript?
• JavaScript dikembangkan pertama sekali oleh Netscape, merupakan bahasa script
paling populer pada internet dan kompatibel dengan berbagai browser
• Javascript dirancang untuk menambah interaktivitas halaman-halaman HTML.
• JavaScript adalah bahasa scripting (teks biasa – tanpa di compile) bebas lisensi dan
mudah untuk dipelajari dan digunakan dibanding bhs programming tradisional.
• JavaScript bekerja pada sisi client (client side). Browsers menterjemahkan statemen
(perintah) JavaScript yang disisipkan (embedded) secara langsung pada halaman HTML.
• JavaScript dirancang untuk digunakan pada halaman Web dan terintegrasi dengan
HTML.
• Statemen JavaScript yang disisipkan pada halaman HTML dapat mengenal dan
merespon User Events seperti Mouse Clicks, Form Input, dan Page Navigation.
• JavaScript dapat membaca dan menulis elemen-elemen HTML
• JavaScript dapat digunakan untuk validasi data - Sebagai contoh dalam Form Isian
• JavaScript dapat digunakan untuk deteksi browser pengunjung (nama, versi dll)
• JavaScript dapat digunakan untuk membuat cookies – Suatu informasi yang distore
pada komputer pengunjung untuk kemudian diretrieve untuk menegnal pengunjung
tersebut.
Apakah Java sama dengan JavaScript?

e t
Tidak. Ada banyak perbedaan antar Java and JavaScript.
a N
d r
JavaScript
e n Java
Object based language
H Object oriented language
By
Diinterpretasi (bukan compiled) oleh client.
Di Compile pd server sebelum dieksekusi
pada client.
Hasilnya berupa Applet, diakses dari halaman
Kodenya berintegrasi dalam dokumen HTML
HTML
Terbatas pada fungsi browser Bisa sebagai aplikasi mandiri
Jenis data variable tidak dideklarasi (loose Jenis data Variable harus dideklarasi (strong
typing). typing).
Dynamic binding Static binding
Bekerja sebatas pada elemen HTML Lebih dari sekedar elemen dokumen HTML
(misalnya multimedia)
Mampu mengakses objek dan fungsionalitas Tidak mampu mengakses objek dan
browser fungsionalitas browser
Bagaimana cara menggunakan JavaScript ?
Kode JavaScript ditempatkan didalam file HTML, dengan demikian kode JavaScript
dapat dibuat dengan cara yang sama membuat HTML yaitu menggunakan editor teks
seperti WordPad ataupun NotePad.
Page 30 / 197
Ada dua cara memasukkan JavaScript dalam dokumen HTML :
 Menggunakan tag HTML yang menangani event.

 Menyisipkan kodet JavaScript didalam tag <SCRIPT>...</SCRIPT>
1. Menangani Event
• Menangani Event akan mengubah halaman yang statis menjadi lebih dinamis.
• Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti klik
pada mouse, klik pada tombol submit di suatu form, dan keluar dari halaman.
• JavaScript menggunakan Event Handlers untuk merespon Event.
• Event Handlers telah ditulis kedalam berbagai jensi tag HTML dan tidak
diperlukan lagi tag <SCRIPT>.
Sebagai contoh, berikut ini adalah contoh kombinasi HTML dan JavaScript untuk
memberi pesan bagi user.
Contoh: Event Click

<HTML>
<BODY>
e t
<FORM>
<INPUT TYPE=BUTTON VALUE="Klik disni"
a N
onClick="alert('Terimakasih')">
d r
</FORM>
</BODY>
e n
</HTML> H
By
Bentuk "onClick" adalah Event Handler, sebagai atribut dari tag <INPUT> dalam suatu
HTML. Sedangkan kode JavaScript berda dalam tanda petik yaitu: "alert('Terimakasih')"
Kebanyakan (tidak semua) element-elemen pada halaman web merespon thdp interaktivitas
user (seperti: keystrokes, mouse clicks) dengan membuat events Handlers dapat ditempatkan
pada elemen form HTML
Contoh 2
<HTML> * name : dapat digunakan oleh kode
<BODY> JavaScript lain
<form method="post" action=""> * value : yang muncul pada button (yaitu: “Click
<input type="button" me”)
name="myButton" * onclick : nama event yang di handle
value="Click me" * Nilai dari elemen onclick adalah kode
onclick="alert('You clicked the JavaScript code yang di execute yaitu
button!');"> "alert('You clicked the button!');"
</form>
</BODY>
<HTML>
Page 31 / 197
Catatan:
1. JavaScript adalah case sensitive (HTML tidak case sensitive)

onclick="alert('You clicked the button!');"
 Bagian yang digaris bawahi (onclick) adalah HTML
 Sedangkan yang berda dalam tanda petik (quote) adalah JavaScript
 Sehingga sering terlihat onclick di ganti huruf bersar menjadi onClick untuk
memudahkan dibaca tapi tidak untuk alert (JavaScript)
2. Tanda petik tunggal dan dobel digunakan dalam hal ini karena ada tanda petik
didalam tanda petik.
3. Menempatkan semicolon (;) pada setiap statemen adalah optional kecuali jika lebih
dari statemen dalam satu baris.
4. <script type="text/javascript"> juga dapat dituliskan sebagai
<script language="javaScript">
5. Menagani Browser versi lama (tidak support JavaScript)
Browser versi lama umumnya tidak mendukung java script dan akan menampilkan
code script sebagi content. Untuk mencegah hal ini terjadi digunakan tag commnet
HTML seperti diperlihatkan berikut:
<script type="text/javascript">

</script>
e t
a N
6. Komentar
d r
n
JavaScript mendukung dua bentuk format untuk komentar:
e
•
•
H
Komentar satu baris yang diawali dengan suatu double slash (//)
Komentar banyak baris yang diawali dengan suatu /* dan diakhiri dengan
suatu */ By
Event-event Umum
Kebanyakan elemen HTML menghasilkan even berikut:
– onClick -- elemen form untuk di click

– onDblClick -- elemen form di click dua kali secara berturutan (dobel click)
– onMouseDown – tombol mouse ditekan saat berada diatas elemen form
– onMouseOver -- mouse digerakkan diatas elemen form
– onMouseOut -- mouse digerakkan menjauh elemen form
– onMouseUp -- tekanan tombol mouse dilepas sementra berada diatas elemen form
– onMouseMove -- mouse digerakkan
Contoh 3: MouseOver dan MouseOout (Rollover )
<html>
<body>
<h1 onMouseOver="style.color='red';"
onMouseOut="style.color='blue';">Hello </h1>
</body>
</html>
Page 32 / 197
Tabel Events dan event handlers I
Event Diterapkan pada Terjadi jika Handler

Load Document body User me-load halaman onLoad
dalam browser
Unload Document body User exits dari halaman onUnload
Error Images, window Error pada saat load onError
image atau window
Abort Images User meng-abort saat load onAbort
image
KeyDown Documents, images, links, User menekan suatu key OnKeyDown
text areas
KeyUp Documents, images, links, User melepas tekanan OnKeyUp
text areas pada key
KeyPress Documents, images, links, User menekan dan onKeyPress
text areas menahan key
Change Text fields, text areas, select User mengganti nilai onChange
lists elemen
MouseDown Documents, buttons, links User menekan tombol OnMouseDown
mouse
MouseUp Documents, buttons, links User melepas tekanan OnMouseUp
tombol mouse
Click Buttons, radio buttons, User meng-click pada onClick
checkboxes, submit buttons, elemen form atau link
reset buttons, links
e t
MouseOver Links a N
User menggerakkan OnMouseOver
d r
kursor stas link
MouseOut Areas, links
e n User menggerakkan OnMouseOut
H kursosr menjauhi image
map atau link
Select
By
Text fields, text areas User memilih field dari
elemen form input
onSelect
Move Windows User atu script OnMove

mengerakkan window
Lihat Modul untuk selengkapnya
2. Menggunakan Tag <SCRIPT>

• Kebanyakan kode JavaScript ditempatkan didalam tag <script>
Contoh:
<html>
<body>
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
• Ada beberapa cara penempatan kode JavaScript didalam halaman HTML:

o Scripts yang ditempatkan pada bagian body akan dieksekusi sementara
halaman diload.
o Script yang ditempatkan pada bagian head akan dieksekusi jika dipanggil
Page 33 / 197
o Script eksternal yaitu kode javascript dibuat terpisah dalam satu file yang
dapat dipanggil melalui file html
Contoh: Script pada Bagian Head dan dipanggil (eksekusi) pada bagian body
<html>
<head>
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>
Contoh: Script pada Bagian Body dan dikesekusi begitu halaman di load
<html>
<head>
</head>
<body>
document.write("This message is written when the page loads")
</script>
e t
</body>
</html> a N
d r
Contoh: Script External
e n
H
Buat file javascript yang disimpan dengan ekstensi .js dan kemudian dipanggil melalui file
By
html
<html>
<head>
</head>
<body>
<script src="xxx.js">
</script>
<p>
Script merupakan suatu file ekternal dengan nama"xxx.js".
</p>
</body>
</html>
JavaScript Popup Boxes
Alert Box dalam JavaScript dapat dibuat dalam tiga jenis popup box: Alert box, Confirm
box, dan Prompt box.
Alert Box
Alert box sering digunakan untuk meyakinkan bahwa informasi datang melalui user.
Ketika suatu alert box pops up (muncul), user mesti klik "OK" untuk dilanjutkan.
Page 34 / 197
Syntax:
alert("sometext")
Contoh:
<html>
<head>
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>
Confirm Box
Confirm box sering digunakan diinginkan bahwa user telah menerima sesuatu.
Ketika confirm box muncul, user mesti klik salah satu "OK" atau "Cancel".
Syntax:
confirm("sometext")
e t
Contoh:
a N
<html>
d r
<head>
e n
function disp_confirm() H
By
{
var name=confirm("Press a button")
if (name==true)
{
document.write("You pressed the OK button!")
}
else
{
document.write("You pressed the Cancel button!")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_confirm()" value="Display a confirm box">
</form>
</body>
</html>
Prompt Box
Prompt box sering digunakan untuk memberi user kesempatan menginput suatu nilai sebelum masuk suatu
halaman.
Ketika Prompt box muncul, user mesti kilk salah satu "OK" atau "Cancel" to proceed after entering an input
value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax:
prompt("sometext","defaultvalue")
Page 35 / 197
Contoh:
<html>
<head>
function disp_prompt()
{
var name=prompt("Please enter your name","")
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_prompt()" value="Display a prompt box">
</form>
</body>
</html>
Variabel
Variabel adalah suatu “container” bagi informasi yang hendak disimpan
JavaScript memiliki beberapa tipe dari nilai sebagai berikut :

e t

a N
Number, baik bilangan nyata (real) maupun bilangan bulat (integer) (contoh 4.156
dan 39)
d r

e n
String (contoh "ini adalah JavaScript")
 H
Logical (Boolean) dengan nilai true dan false
By
 Null, yang mana adalah keyword khusus yang mengawali nilai kosong.
Perlu diperhatikan bahwa tidak ada perbedaan antara tipe integer dengan real,
keduanya memiliki tipe yang sama yaitu number.
JavaScript tidak menyediakan tipe data khusus untuk data tanggal. Tetapi memiliki
beberapa fungsi dan object date yang dapat digunakan untuk melakukan manipulasi data
tanggal.
Aturan Mendefinisikan Nama Variabel
 Nama Variable adalah case sensitive (beda antar huruf besar dan kecil)
 Harus dimulai dengansuatu huruf atau under score ( _ ), dengan hruf dan selanjtnya
berupa angka
Contoh penulisan nama variabel:
First_Name
t99
_name
Batasan lainnya dalam pemberian nama variabel adalah tidak boleh sama dengan cadangan
kata pada JavaScript. Tabel 1 adalah daftar dari cadangan kata pada JavaScript.
Page 36 / 197
Table 1. Cadangan kata pada JavaScript.
abstract extends int super

boolean false interface switch
break final long synchronized
byte finally native this
case float new throw
catch for null throws
char function package transient
class goto private true
const if protected try
continue implements public var
default import return val
do in short while
double instanceof static with
else
Jangkauan dari Variabel
JavaScript memiliki dua jangkauan untuk variabel:


variabel Global
variabel Local e t
a N
r
Variabel lokal digunakan didalam suatu fungsi dan ruang linkupnya terbatas pada fungsi
d
n
tersebut. Jika keluar dari fungsi maka variabel jadi hilang. Variabel lokal dapa mempunyai
e
H
nama yang sama dalam funsi berbeda. Untuk mendeklarasikan suatu variabel lokal, harus
diawali dengan var, seperti contoh berikut ini:
var MaxValue=0
By
Jika variable dideklarasi diluar funsi dan semaua fungsi dalam halaman dapat mengaksesnya
didefenisikan sebagai variabel global.
JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel
global. Walaupun JavaScript memperbolehkan anda menggunakan nama variabel yang sama
untuk local maupun global, tetapi adalah praktek yang tidak disarankan.
TIP
Untuk memastikan fungsi mendapatkan nilai yang benar dari
suatu variabel global, deklarasikan semua variabel global
tersebut pada awal dari script.
Contoh: variabel
<html>
<body>
var name = "Budi Santosa"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
Page 37 / 197
<p>Contoh ini mendeklarasikan suatu variable, memberi (assigns) nilai padanya dan
menampilkannya </p>
</body>
</html>
Ekspresi dan Operator

Literal dan variabel dihubungkan oleh operator, hasil dari pernyataan tersebut adalah
ekspresi. JavaScript menyediakan berbagai operator yang memungkinkan programmer
menulis sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit.
Operator JavaScript dapat dibagi menjadi beberapa kategori berikut:
 Arithmetic operator
 Assigment operator
 Comparison operator
 Logical operator
 String operator
Arithmetic Operators
Operator Deskripsi Contoh Hasil

+ Addition x=2 4
x+2
- Subtraction
e t
x=2 3
a N 5-x
* Multiplication
d r x=4 20
e n x*5
/ Division
H 15/5
5/2
3
2.5
%
By
Modulus (division remainder) 5%2
10%8
1
2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--
Assignment Operators
Operator Contoh Sama dengan

= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Comparison Operators
Operator Deskripsi Contoh

== is equal to 5==8 returns false
!= is not equal 5!=8 returns true
Page 38 / 197
> is greater than 5>8 returns false

< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true
Logical Operators
Operator Deskripsi Contoh

&& and x=6
y=3
(x < 10 && y > 1) returns true

|| or x=6
y=3
(x==5 || y==5) returns false

! not x=6
y=3
!(x==y) returns true
Operator String
String umumnya adalah teks, contoh "Hello World!". Untuk menyatukan dua atau lebih nilai variable string
variables dapat gunakan opreator +.
e t
a N
txt1="What a very"
txt2="nice day!" d r
txt3=txt1+txt2
e n
H
By
Variabel txt3 sekarang menjadi "What a verynice day!".
Menambah space antara dua string.
txt1="What a very"
txt2="nice day!"
txt3=txt1+" "+txt2
atau
txt1="What a very "

txt2="nice day!"
txt3=txt1+txt2
Variable txt3 menjadi "What a very nice day!".
Functions
Function adalah suatu blok kode yang dapat digunakan ulang dan dapat dieksekusi oleh
suatu event ataupun jika function dipanggil.
Mendefenisikan Function
function myfunction(argument1,argument2,etc)
{
some statements
}
Page 39 / 197
Function dengan tanpa arguments harus diikutkan dalam kurung (parentheses):
function myfunction()
{
some statements
}
Arguments adalah variables yang digunakan dalam function. Nilai variable adalah nilai yang
dilewatkan oleh paggilan function.
function result(a,b)
{
c=a+b
return c
}
atau
function total(a,b)
{
result=a+b
return result
}
Conto-contoh Function:
e t
1. Memanggil suatu function.
a N
<html>
d r
<head>
e n
function myfunction() H
{
alert("HELLO")
}
By
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
<p>Dengan menekan tombol, funtion akan dipanggil dan function akan
menampilkan (alert) message.</p>
</body>
</html>
2. Function dengan arguments

Melewatkan variable ke function, dan menggunakan nilai variable dalam function.
<html>
<head>
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
Page 40 / 197
<body>
<form>
onclick="myfunction('Hello')"
value="Call function">
</form>
<p>Dengan menekan tombol, function dengan suatu argument akan

dipanggil dan function menampilkan (alert) argument ini.</p>
</body>
</html>
3. Function dengan arguments 2
<html>
<head>
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
onclick="myfunction('Selamat Pagi!')"
value="Pada pagi hari">
e t
a N
onclick="myfunction('Selamat Malam!')"
d r
value="Pada malam hari">
</form>
e n
H
<p>
By
Jika salah satu dari tombol maka function akan dipanggil dan
menampilkan argument yang dilewatkan padanya.
</p>
</body>
</html>
4. Function yang mengembalikan suatu nilai
<html>
<head>
function myFunction()
{
return ("Hallo, apa khabar ?")
}
</script>
</head>
<body>
document.write(myFunction())
</script>
<p>Script pada body memanggil function.</p>
<p>Dan function mengembalikan (returns) suatu text.</p>
</body>
</html>
Page 41 / 197
5 . Function dengan arguments dan returns suatu nilai
Function untuk menghitung jumlah 2 arguments dan return hasilnya.
<html>
<head>
function total(numberA,numberB)
{
return numberA + numberB
}
</script>
</head>
<body>
document.write(total(2,3))
</script>
<p>Script pada body memanggil function dengan dua arguments, 2 dan
3.</p>
<p>Function mengembalikan hasil penjumlahan kedua arguments.</p>
</body>
</html>
Conditional Statements
berdasarkan kondisi yang berbeda

e t
Conditional statements dalam JavaScript digunakan untuk melaksanakan aksi berbeda
a N
Dalam JavaScript ada tiga conditional statements:
d r
 e n
if statement – digunakan jika ingin mengeksekusi suatu kode ketika
H
kondisi/persyaratan adalah benar (true)

kode untuk dieksekusi By
if...else statement – digunakan jika ingin memilih satu atau dua baris
 switch statement – digunakan jika ingin memilih satu dari banyak baris
untuk dieksekusi
Contoh-contoh:
1. If statement (jika kondisi tertentu adalah “true”)
<html>
<body>
var d = new Date()
var time = d.getHours()
if (time > 12)
{
document.write("<b>Selamat Siang dan Malam</b>")
}
</script>
<p>
This example demonstrates the If statement.
</p>
Page 42 / 197
<p>
Jika waktu dari komputer lebih besar dari 12, maka akan
dimunculkan ucapan "Selamat Siang/Malam".
</p>
</body>
</html>
2. If...else statement
<html>
<body>
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Selamat Pagi</b>")
}
else
{
document.write("<b>Selamat Siang</b>")
}
</script>
<p>
Contoh memperagakan If...Else statement.
</p>
</body>
</html>
e t
3. Random link a N
d r
Link ke W3Schools.com atau ke RefsnesData.no akan mempunyai kesempatan sebesar 50%.
e n
<html>
<body> H
By
var r=Math.random()
if (r>0.5)
{
document.write("<a href='http://www.w3schools.com/'>Learn Web
Development!</a>")
}
else
{
document.write("<a href='http://www.refsnesdata.no/'>Visit
Refsnes Data!</a>")
}
</script>
</body>
</html>
4. Switch statement
Jika ingin memilih satu dari banyak blok kode untuk dieksekusi.
<html>
<body>
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
Page 43 / 197
case 6:
document.write("Sabtu hari libur kerja")
break
case 5:
document.write("Jumat hari krida")
break
case 2:
document.write("Hari ini Selasa, agar lebih giat
belajar")
break
case 1:
document.write("Senin hari awal kerja")
break
default:
document.write("Hari Minggu, Selamat bersantai!")
}
</script>
<p>Contoh ini memperagakan pernyataan switch.</p>

<p>Dalam hal ini, Sunday=0, Monday=1, Tuesday=2,dst.</p>
</body>
</html>
JavaScript Looping
e t
a N
untuk beberapakali.
d r
Looping statements dalam JavaScript digunakan untuk eksekusi satu blok kode yang sama
e n
H
Dalam JavaScript beberapa looping statement sbb:

nilai true.
By
while – Perintah while terus mengulangi loop selama kondisi memiliki
 do...while - loops sekali, dan mengulangi loop selama kondisi memiliki

nilai true
 for - Perintah for mengulang suatu loop sampai kondisi menghasilkan
evaluasi true atau loop keluar dengan perintah break
Contoh-contoh:
1. For loop
Menggunakan For loop untuk menjalankan blok kode yang sama untuk beberapakali (sesuai yang ditetapkan)
<html>
<body>
for (i = 0; i <= 5; i++)
{
document.write("Ini adalah Bilangan " + i)
document.write("<br>")
}
</script>
<p>Penjelasan:</p>
<p>For loop di set <b>i</b> sama dengan 0.</p>
<p>Loop berlanjut dan berulang <b>i</b> sepanjang bilangan mencapai
hingga sama dengan 5</p>
Page 44 / 197
</body>
</html>
2. Looping through HTML headers

For loop untuk menulis HTML headers.
<html>
<body>
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">Ini adalah header " + i)
document.write("</h" + i + ">")
}
</script>
</body>
</html>
3. While loop
While loop untuk menjalankan kode sepanjang kondis true
<html>
<body>
i = 0
while (i <= 5)
e t
{
document.write("Ini adalah Bilangan " + i) a N
d r
i++
} e n
</script> H
<p>Explanation:</p> By
<p><b>i</b> equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will
continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>
4. Do while loop
Catatan: Loop akan selalu di eksekusi sekali meski kondisi false, karena penyataan executed berada sebelum
condisi di uji
<html>
<body>
i=0
do
{
document.write("Ini adalah Bilangan " + i)
i++
}
while (i <= 5)
</script>
<p>Explanation:</p>
Page 45 / 197
<p><b>i</b> equal to 0.</p>

<p>The loop will run</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
</body>
</html>
Array Object
Objek Array digunakan untuk menyimpan sekumpulan nilai pada nama variable tunggal. Setiap nilai
merupakan elemen dari array dan mempunyai nomor index.
Contoh berikut dua array dengan masing-masing tiga elemen:
var family_names=new Array(3)

var family_names=new Array("Tove","Jani","Stale")
Dapat juga dituliskan nama dari array dengan nomor indek yang dimulai dengan 0, seperti contoh
berikut:
family_names[0]="Tove"
family_names[1]="Jani"
family_names[2]="Stale"
e t
a N
r
Dan data dapat di ambil (retrieved) dengan munggunakan nomor index number dari elemen array
d
yang diinginkan seperti berikut:
e n
mother=family_names[0] H
father=family_names[1]
By
Contoh-contoh
1. Membuat array dengan parameter numeric dan memberi data padanya .
<html>
<body>
var famname = new Array(6)
famname[0] = "Jan Egil"
famname[1] = "Tove"
famname[2] = "Hege"
famname[3] = "Stale"
famname[4] = "Kai Jim"
famname[5] = "Borge"
for (i=0; i<6; i++)

{
document.write(famname[i] + "<br>")
}
</script>
</body>
Page 46 / 197
</html>
2. Create a literal array

Metoda length digunakan untuk berapa banyak elemen dalam array.
<html>
<body>
var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai
Jim","Borge")
for (i=0; i<famname.length; i++)

{
document.write(famname[i] + "<br>")
}
</script>
</body>
</html>
3. Array – beberapa sifat dan metoda

Beberapa sifat dan metoda yang digunakan dengan object array.
<html>
<body>
var famname = new Array(3)
e t
famname[0] = "Jani"
famname[1] = "Tove"
a N
famname[2] = "Hege"
d r
e
document.write(famname.length + "<br>") n
H
document.write(famname.join(".") + "<br>")
By
document.write(famname.reverse() + "<br>")
document.write(famname.push("Ola","Jon") + "<br>")
document.write(famname.pop() + "<br>")
document.write(famname.shift() + "<br>")
</script>
</body>
</html>
4. Array - sort()
Metoda sort(). Contoh ini memperagakan pengurutan (sort) bilangan yang terdapat dalam suatu array.
<html>
<body>
<p>
<b>Note:</b> Jika tidak menggunkan compareFunction dalam pengurutan
(sort) maka array diurut secara lexicographic. Dimana dalam hal ini
angka "500" akan muncul terlebih dahulu(dianggap lebih kecil)
dibanding angka "7" , tapi dalam numeric sort angka 7 muncul duluan
(lebih kecil) dibanding 500. Contoh disini memperagakan compare
function – untuk sort element dalam array.
</p>
array1=new Array("Red","Blue","Green")
array2=new Array("70","9","800")
array3=new Array(50,10,2,300)
array4=new Array("70","8","850",30,10,5,400)
Page 47 / 197
function compareNum(a,b)
{
return a-b
}
document.write("Sorted: " + array1.sort())

document.write("<br /><br />")
document.write("Sorted without compareNum: " + array2.sort())

document.write("<br />")
document.write("Sorted with compareNum: " + array2.sort(compareNum))


</script>
</body>
</html>
5. Array - concat() and slice()
Cara penggunaan concat() dan slice().

e t
<html>
<body>
a N
d r
var famname = new Array(3) e n
famname[0] = "Jani" H
famname[1] = "Tove"
famname[2] = "Hege" By
var famname2 = new Array(3)
famname2[0] = "John"
famname2[1] = "Andy"
famname2[2] = "Wendy"
var famname3 = new Array("Stale","Borge")
document.write(famname.join() + "<br>")
document.write(famname.concat(famname2) + "<br>")
document.write(famname.concat(famname2,famname3) + "<br>")
document.write(famname.slice(1) + "<br>")
</script>
</body>
</html>
6. Array - splice()
Cara penggunaan splice() method.
<html>
<body>
myCars=["BMW","Volvo","Saab","Ford"]
document.write("myCars: " + myCars)
Page 48 / 197
removed=myCars.splice(2,0,"Volkswagen")
document.write("After adding 1: " + myCars)
removed=myCars.splice(3,1)
document.write("After removing 1: " + myCars)
removed=myCars.splice(2,1,"Seat")
document.write("After replacing 1: " + myCars)
removed=myCars.splice(0,2,"Peugeot","Honda","Toyota")
document.write("After replacing 2 and adding 1: " + myCars)
</script>
</body>
</html>
Sifat dan metoda objek Array dijelaskan melalui tabel-tabel berikut:
NN: Netscape, IE: Internet Explorer
Properties
Syntax: object.property_name
e t
a N
Property
d rDescription NN IE
constructor
e n
Contains the function that created an object's prototype 4 4
length
H
Returns the number of elements in the array 3 4
By
prototype Allows you to add properties to an array 3 4
Methods
Syntax: object.method_name()
Method Description NN IE
concat() Joins two or more arrays and returns a new array 4 4
join(delimiter) Puts all the elements of an array into a string separated 3 4
by a specified delimiter (comma is default)
pop() Removes and returns the last element of an array 4 5.5
push("element1","element2") Adds one or more elements to the end of an array and 4 5.5
returns the new length
reverse() Reverses the order of the elements in an array 3 4
shift() Removes and returns the first element of an array 4 5.5
slice(begin[,end]) Creates a new array from a selected section of an 4 4
existing array
sort() Sorts the elements of an array 3 4
splice(index,howmany[,el1,el2]) Adds and/or removes elements of an array 4 5.5
toSource() Returns a string that represents the source code of the 4.06 4
array
toString() Returns a string that represents the specified array and 3 4
Page 49 / 197
its elements
unshift("element1","element2") Adds one or more elements to the beginning of an 4 5.5
array and returns the new length
valueOf() Returns the primitive value of an array 4 3
Date Object
Date object digunakan untuk bekerja dalam tanggal dan waktu.
Untuk membuat instance dari objek Date digunakan variable "d", sbb:
var d=new Date()
Kemudian semua metoda yang berkaitan dengan objek Date dapat di akses melalui variable "d" tersebut. Misal
untuk tampilan hari ini dapat ditulis sbb:.
d.getDate()
Objek Date juga dapat mempunyai parameter sbb:
new Date(milliseconds)
new Date(dateString)
new Date(yr_num, mo_num, day_num [, hr_num, min_num, sec_num, ms_num])
e t
Beberapa contoh pembuatan objek Date:
a N
var d=new Date("October 12, 1988 13:14:00")
d r
var d=new Date("October 12, 1988")
e n
var
var
d=new
d=new
Date(88,09,12,13,14,00)
Date(88,09,12) H
var d=new Date(500)
By
Contoh-contoh:
1. Date
Mengembalikan tanggal hari ini : tanggal, bulan, dan tahun.

Pada Metoda getMonth : 0 → January, 1 → February dst, sehingga perlu ditambahkan 1 untuk tampilan bulan
yang tepat.
<html>
<body>
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>
</body>
</html>
2. Time
Mengemablikan waktu lokal: Jam, minit, dan detik. Untuk waktu GMT time gunakan getUTCHours,
getUTCMinutes dst.
Page 50 / 197
<html>
<body>
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>
</body>
</html>
3. Set date
Juga date atau time dapat diset kedalam date object, dengan menuliskan setDate, setHour dst. Contoh ini
memperagakan seting tahun penuh.
<html>
<body>
var d = new Date()
d.setFullYear("1990")
document.write(d)
</script>
</body>
e t
</html>
a N
d r
4. UTC time
e n
getUTCDate method (Universal Coordinated Time ) yaitu waktu yang ditetapakan oleh World Time Standard.
H
By
<html>
<body>
var d = new Date()
document.write(d.getUTCHours())
document.write(".")
document.write(d.getUTCMinutes())
document.write(".")
document.write(d.getUTCSeconds())
</script>
</body>
</html>
5. Display weekday
Contoh ini memperagakan penulisan hari dalam teks (sebagai ketentuan: Sunday→0, Monday→1 dst).
<html>
<body>
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
document.write("Today is " + weekday[d.getDay()])
</script>
</body>
</html>
6. Display full date
Contoh penulisan hari, tanggal, bulan dan tahun secara komplit.
Page 51 / 197
<html>
<body>
var d=new Date()
var weekday=new
Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu")
var monthname=new
Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov
","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
</body>
</html>
7. Display time
Jika pada contoh-contoh diatas tampilan waktu adalah waktu saat tersebut (tidak berobah seiring perobahan
waktu), maka pada contoh ini ditampilkan waktu yang berobah seiring perobahan waktu.
<html>
<head>
var timer = null
function stop()
{
clearTimeout(timer)
e t
}
a N
function start()
d r
{
e n
var time = new Date()
var hours = time.getHours() H
By
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}
</script>
</head>
<body onload="start()" onunload="stop()">
<form>
<input type="text" name="display" size="20">
</form>
</body>
</html>
Tabel lengkap yang berkaitan dengan objek waktu
Properties:
NN: Netscape, IE: Internet Explorer
Syntax: object.property_name
Property Description NN IE
constructor Contains the function that created an object's prototype 4 4
prototype Allows addition of properties to a date 3 4
Page 52 / 197
Methods
Syntax: object.method_name()
Method Description NN IE
Date() Returns a Date object 2 3
getDate() Returns the date of a Date object (from 1-31) 2 3
getDay() Returns the day of a Date object (from 0-6. 0=Sunday, 1=Monday, 2 3
etc.)
getMonth() Returns the month of a Date object (from 0-11. 0=January, 2 3
1=February, etc.)
getFullYear() Returns the year of a Date object (four digits) 4 4
getYear() Returns the year of a Date object (from 0-99). Use getFullYear 2 3
instead !!
getHours() Returns the hour of a Date object (from 0-23) 2 3
getMinutes() Returns the minute of a Date object (from 0-59) 2 3
getSeconds() Returns the second of a Date object (from 0-59) 2 3
getMilliseconds() Returns the millisecond of a Date object (from 0-999) 4 4
getTime() Returns the number of milliseconds since midnight 1/1-1970 2 3
getTimezoneOffset() Returns the time difference between the user's computer and GMT 2 3
getUTCDate() Returns the date of a Date object in universal (UTC) time 4 4
getUTCDay() Returns the day of a Date object in universal time 4 4
getUTCMonth() Returns the month of a Date object in universal time 4 4
getUTCFullYear()
et
Returns the four-digit year of a Date object in universal time 4 4
getUTCHours()
getUTCMinutes() r aN
Returns the hour of a Date object in universal time
Returns the minutes of a Date object in universal time
4
4
4
4
getUTCSeconds() n d
Returns the seconds of a Date object in universal time 4 4
getUTCMilliseconds()
He
Returns the milliseconds of a Date object in universal time 4 4
By
parse() Returns a string date value that holds the number of milliseconds 2 3
since January 01 1970 00:00:00
setDate() Sets the date of the month in the Date object (from 1-31) 2 3
setFullYear() Sets the year in the Date object (four digits) 4 4
setHours() Sets the hour in the Date object (from 0-23) 2 3
setMilliseconds() Sets the millisecond in the Date object (from 0-999) 4 4
setMinutes() Set the minute in the Date object (from 0-59) 2 3
setMonth() Sets the month in the Date object (from 0-11. 0=January, 2 3
1=February)
setSeconds() Sets the second in the Date object (from 0-59) 2 3
setTime() Sets the milliseconds after 1/1-1970 2 3
setYear() Sets the year in the Date object (00-99) 2 3
setUTCDate() Sets the date in the Date object, in universal time (from 1-31) 4 4
setUTCDay() Sets the day in the Date object, in universal time (from 0-6. 4 4
Sunday=0, Monday=1, etc.)
setUTCMonth() Sets the month in the Date object, in universal time (from 0-11. 4 4
0=January, 1=February)
setUTCFullYear() Sets the year in the Date object, in universal time (four digits) 4 4
setUTCHours() Sets the hour in the Date object, in universal time (from 0-23) 4 4
setUTCMinutes() Sets the minutes in the Date object, in universal time (from 0-59) 4 4
setUTCSeconds() Sets the seconds in the Date object, in universal time (from 0-59) 4 4
setUTCMilliseconds() Sets the milliseconds in the Date object, in universal time (from 0- 4 4
999)
Page 53 / 197
toGMTString() Converts the Date object to a string, set to GMT time zone 2 3
toLocaleString() Converts the Date object to a string, set to the current time zone 2 3
toString() Converts the Date object to a string 2 4
e t
a N
d r
e n
H
By
Page 54 / 197
JavaScript
Apa dan untuk apa JavaScript?
• JavaScript dikembangkan pertama sekali oleh Netscape, merupakan bahasa

script paling populer pada internet dan kompatibel dengan berbagai browser
• Javascript dirancang untuk menambah interaktivitas halaman-halaman HTML.
• JavaScript adalah bahasa scripting (teks biasa – tanpa di compile) bebas lisensi
dan mudah untuk dipelajari dan digunakan dibanding bhs programming tradisional.
• JavaScript bekerja pada sisi client (client side). Browsers menterjemahkan
statemen (perintah) JavaScript yang disisipkan (embedded) secara langsung pada
halaman HTML.
• JavaScript dirancang untuk digunakan pada halaman Web dan terintegrasi
dengan HTML.
• Statemen JavaScript yang disisipkan pada halaman HTML dapat mengenal dan
merespon User Events seperti Mouse Clicks, Form Input, dan Page Navigation.
• JavaScript dapat digunakan untuk validasi data - Sebagai contoh dalam Form
Isian

e t
JavaScript a N Java
d r
Object based language
e n Object oriented language
H
Diinterpretasi (bukan compiled) oleh Di Compile pd server sebelum dieksekusi
client.
By
Kodenya berintegrasi dalam dokumen
pada client.
Hasilnya berupa Applet, diakses dari
HTML halaman HTML
Jenis data variable tidak dideklarasi (loose Jenis data Variable harus dideklarasi
typing). (strong typing).
Bekerja sebatas pada elemen HTML Lebih dari sekedar elemen dokumen
HTML (misalnya multimedia)
Mampu mengakses objek dan Tidak mampu mengakses objek dan
fungsionalitas browser fungsionalitas browser
1
Page 55 / 197
Bagaimana cara menggunakan JavaScript ?
Kode JavaScript ditempatkan didalam file HTML, dengan demikian kode JavaScript
dapat dibuat dengan cara yang sama membuat HTML yaitu menggunakan editor teks
seperti WordPad ataupun NotePad.
Ada dua cara memasukkan JavaScript dalam dokumen HTML :

 Menyisipkan kodet JavaScript didalam tag <SCRIPT>...</SCRIPT>
Menangani Event
• Menangani Event akan mengubah halaman yang static menjadi lebih

dinamis.
• Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti
klik pada mouse, klik pada tombol submit di suatu form, dan keluar dari
halaman.
• JavaScript menggunakan Event Handlers untuk merespon Event.
• Event Handlers telah ditulis kedalam berbagai jenis tag HTML dan tidak
diperlukan lagi tag <SCRIPT>.
Sebagai contoh, berikut ini adalah contoh kombinasi HTML dan JavaScript
untuk memberi pesan bagi user.
e t
<HTML> a N
<BODY>
d r
<FORM>
e n
H
By
</FORM>
</BODY>
</HTML>
Bentuk "onClick" adalah Event Handler, sebagai atribut dari tag <INPUT> dalam suatu
HTML. Sedangkan kode JavaScript berada dalam tanda petik yaitu:
"alert('Terimakasih')"
Kebanyakan (tidak semua) element-elemen pada halaman web merespon terhadap

interaktivitas user (seperti: keystrokes, mouse clicks) dengan membuat events Handlers
yang dapat ditempatkan pada elemen form HTML
Contoh 2 Event handler :

<form method="post" action=""> * name : dapat digunakan oleh kode
<input type="button" JavaScript lain
name="myButton" * value : yang muncul pada button
value="Click me" (yaitu: “Click me”)
onclick="alert('You clicked the * onclick : nama event yang di handle
button!');"> * Nilai dari elemen onclick adalah kode
</form> JavaScript code yang di execute yaitu
"alert('You clicked the
button!');"
2
Page 56 / 197
Kapitalisasi
JavaScript adalah case sensitive (HTML tidak case sensitive)
 Sehingga sering terlihat onclick di ganti huruf besar menjadi onClick untuk
memudahkan membacanya
Catatan:
 Karena ada tanda petik didalam tanda petik maka diperlukan tanda petik
tunggal dan dobel
 Menempatkan semicolon (;) pada setiap statemen adalah optional kecuali jika
lebih dari statemen dalam satu baris.
Event-event Umum
Kebanyakan elemen HTML menghasilkan even berikut:
– onClick -- elemen form untuk di click

– onDblClick -- elemen form di click dua kali secara berturutan (dobel click)
– onMouseDown – tombol mouse ditekan saat berada diatas elemen form
– onMouseOver -- mouse digerakkan diatas elemen form
e t
onMouseUp -- tekanan tombol mouse dilepas sementra berada diatas elemen
–
form a N
d r
e n
Contoh 3a: Rollover H
By
Keter: Kode diatas akan membuat teks Hello berwarna merah jika mouse dikenakan padanya
dan berwarna biru jika mouse dijauhkan
Contoh 3 b: Rollover dengan menggunakan Image
<img src="../Images/duke.gif"
width="55" height="68"
onMouseOver="src='../Images/duke_wave.gif';"
onMouseOut="src='../Images/duke.gif';">
3
Page 57 / 197
Load Document body User me-load halaman onLoad

dalam browser
Unload Document body User exits dari halaman onUnload
image atau window
Abort Images User meng-abort saat onAbort
load image
KeyDown Documents, images, links, User menekan suatu key OnKeyDown
text areas
KeyUp Documents, images, links, User melepas tekanan OnKeyUp
text areas pada key
KeyPress Documents, images, links, User menekan dan onKeyPress
text areas menahan key
Change Text fields, text areas, User mengganti nilai onChange
select lists elemen
MouseDown Documents, buttons, links User menekan tombol OnMouseDown
mouse
MouseUp Documents, buttons, links User melepas tekanan OnMouseUp
tombol mouse
e t
Click Buttons, radio buttons, N
User meng-click pada onClick
checkboxes, submit
buttons, reset buttons, d ra
elemen form atau link
links e n
MouseOver Links H User menggerakkan OnMouseOver
MouseOut By
Areas, links
kursor stas link
User menggerakkan OnMouseOut
kursosr menjauhi image
map atau link
Select Text fields, text areas User memilih field dari onSelect
elemen form input
mengerakkan window
Resize Windows User atau script me- OnResize
resize window
DragDrop Windows User men-drop suatu onDragDrop
object pada browser
window
Focus Windows dan semua User memberi fokus OnFocus
elemen form elemen input
Blur Windows dan semua User mengerakkan OnBlur
elemen form focus ke elemen lain
Reset Forms User meng-click Reset onReset
button
Submit Forms User meng-click Submit onSubmit
button
4
Page 58 / 197
Menggunakan Tag <SCRIPT>
• Kebanyakan kode JavaScript ditempatkan didalam tag <script>

• Ada beberapa cara penempatan kode JavaScript didalam halaman HTML:
o Scripts yang ditempatkan pada bagian body → akan
dieksekusi sementara halaman diload.
o Script yang ditempatkan pada bagian head → akan
dieksekusi jika dipanggil
o Script eksternal yaitu kode javascript dibuat terpisah dalam
satu file yang dapat dipanggil melalui file html
Script pada Bagian Head dan Script Bagian Body

dipanggil (eksekusi) pada bagian body. dan dikesekusi begitu halaman di load
<html> <html>
<head> <head>
<script </head>
type="text/javascript">
function message() <body>
{
alert("This alert box was <script
called with the onload
e t
type="text/javascript">
event")
a N
document.write("This
}
d r message is written when
</script>
</head> e n the page loads")
</script>
H
By
<body onload="message()"> </body>
</html>
</body>
</html>
Script External
<html>
<head>
</head>
<body>
</script>
<p>
The actual script is in an external script file called
"xxx.js".
</p>
</body>
</html>
5
Page 59 / 197
Catatan:
1. <script type="text/javascript"> juga dapat dituliskan sebagai
<script language="javaScript">
2. Menagani Browser versi lama (tidak support JavaScript)
Browser versi lama umumnya tidak mendukung java script dan akan menampilkan
code script sebagai content. Untuk mencegah hal ini terjadi digunakan tag comment
(komentar) HTML seperti diperlihatkan berikut:

</script>
3. Komentar
 Komentar satu baris yang diawali dengan suatu double slash (//)
 Komentar banyak baris yang diawali dengan suatu /* dan diakhiri dengan
suatu */
e t
a N
d r
e n
H
By
6
Page 60 / 197
DAFTAR ISI
 Pengenalan JavaScript
 Menggunakan Javacript
 Variabel dan Literal
 Ekspresi dan Operator
 Perintah Kendali dan Fungsi
 Dasar dari Objek
 Objek Built-In dan Fungsi
 Netscape Objects
 Objek form
 Window dan Frame
 Ringkasan
e t
a N
d r
e n
H
By
7
Page 61 / 197
Walaupun Netscape Navigator akan mengolah semua teks dalam tag <SCRIPT> sebagai JavaScript, tetapi
adalah lebih baik melakukan deklarasi LANGUAGE yang menentukan jenis bahasa script yang digunakan.
karena ada beberapa bahasa script lainnya untuk HTML, mendeklarasikan jenis bahasa script adalah suatu
praktek yang baik. Marilah kita memulai dengan suatu program sederhana yang akan mencetak Hello
World.
Contoh :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
</HTML>
Hasil:
e t
a N
d r
e n
H
By
Contoh diatas menunjukkan program Javascript diketik diantara tag <HEAD> dan </HEAD>. Jika contoh
JavaScript diatas diketikkan diantara tag <BODY>, juga akan memiliki hasil yang sama. Tetapi karena bagian
heading akan dibaca terlebih dahulu dibandingan kan dengan bagian <BODY>, adalah praktek pemrograman
yang baik untuk menempatkan semua fungsi maupun variabel global pada bagian heading. Dan semua perintah
JavaScript yang berkaitan dengan dokumen ditempatkan pada bagian body HTML.
Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga untuk menghindari kesalahan pada
browser tersebut, anda perlu mengetikkan script diantara tag komentar HTML:

Catatan
Ingat, selalu mengetik JavaScript diantara baris komentar sehingga
browser non Java dapat mengabaikannya.
Variabel dan Literal
8
Page 62 / 197
 Number, baik bilangan nyata (real) maupun bilangan bulat (integer) (contoh 4.156 dan 39)
 String (contoh "ini adalah JavaScript")
 Logical (Boolean) dengan nilai true dan false
Walaupun dengan jumlah tipe data yang sedikit, tetapi cukup untuk unjuk kerja JavaScript. Perlu diperhatikan
bahwa tidak ada perbedaan antara tipe integer dengan real, keduanya memiliki tipe yang sama yaitu number.
JavaScript tidak menyediakan tipe data khusus untuk data tanggal. Tetapi memiliki beberapa fungsi dan object
date yang dapat digunakan untuk melakukan manipulasi data tanggal.
Mendefinisikan Variabel
Aturan penamaan variabel pada JavaScript adalah nama harus dimulai dengan suatu huruf atau garis bawah (_)
dan huruf selanjutnya dapat berupa angka (0-9), huruf besar (A-Z) atau huruf kecil (a-z), garis bawah. Berikut
ini adalah contoh penamaan variabel yang sah:
First_Name
t99
_name
Catatan
JavaScript tidak memeriksa spelling dari nama variabel. Tetapi
e
memudahkan proses pembacaan dan pencarian kesalahan.t
programmer sebaiknya menggunakan spelling yang benar untuk
a N
d r
Batasan lainnya dalam pemberian nama variabel adalah tidak boleh sama dengan cadangan kata pada
n
JavaScript. Tabel 1 adalah daftar dari cadangan kata pada JavaScript.
e
H
abstract
Byextends int super
do in short while
double instanceof static with
else
Tidak semua kata dalam Table 1 digunakan oleh JavaScript dewasa ini; dan beberapa diantara dicadangkan
untuk pemakaian yang akan datang. Cadangan Kata tidak boleh d digunakan untuk nama variabel, nama fungsi,
nama metode, dan nama object
9
Page 63 / 197
Variabel dalam JavaScript dapat menyimpan semua tipe data yang sah, dan tidak diperlukan suatu deklarasi tipe
data. Pada script yang sama, suatu variabel dapat diset ke type data yang berbeda dalam suatu deklarasi tunggal.
Berikut ini deklarasi variabel yang sah:
temperature =
temperature = "The temperature is"
temperature = "The temperature is " +
Karena JavaScript sangat longgar tentang tipe, sehingga menyediakan beberapa fungsi untuk melakukan
manipulasi data string dan nilai numerik.
 variabel Global
 variabel Local
Variabel lokal digunakan didalam suatu fungsi dan ruang linkupnya terbatas pada fungsi tersebut. Untuk
mendeklarasikan suatu variabel lokal, harus diawali dengan var, seperti contoh berikut ini:
var MaxValue=0
e t
JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel global. Walaupun
adalah praktek yang tidak disarankan. a N

JavaScript memperbolehkan anda menggunakan nama variabel yang sama untuk local maupun global, tetapi
d r
TIP
e n
H
Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu
By
variabel global, deklarasikan semua variabel global tersebut pada awal
dari script.
Literal
Sebagai lawan dari variabel, literal mewakili nilai baku yang digunakan dalam JavaScript. JavaScript
mendukung literal berikut:
 Integer literal
 Floating point literal
 Boolean literal
 String literal
 Special character
Integer dapat dalam basis desimal (basis 10), hexadesimal, dan oktal. Suatu nilai desimal adalah semua angka
yang tidak diawali dengan nol (seperti 4, 89, atau 57). Suatu angka yang diawali dengan nol, adalah berbasis
oktal (seperti 04, 065, atau 0145). Suatu bilangan dinyatakan dalam basis hexadesimal diawali dengan 0x atau
0X (seperti 0xff, 0X44, atau 0xAE).
Suatu literal floating-point terdiri dari komponen: suatu desimal bulat, suatu decimal berkoma (.), suatu desimal
pecahan, dan eksponen. (seperti 1.23 or 44.6389) atau dalam notasi scientific (3.6E-8, .4E12, or -2.7E12).
Setiap literal floating-point literal minimal memiliki satu digit dengan satu desimal atau eksponen.
Literal Boolean adalah true atau false.
Literal String dapat diapit oleh petik tunggal ( ' ) atau petik ganda ( " ). Tanda petik awal dan akhir harus sama,
seperti contoh berikut:
10
Page 64 / 197
"a double quoted literal"
'a single quoted literal'
TIP
Ketika anda menulis event handle, apit string dengan petik tunggal,
karena petik ganda dibatasi untuk nilai atribut pada HTML
Literal string dapat juga mengandung karakter khusus untuk kendali baris Table 2 adalah daftar dari karakter
khusus dan fungsi-fungsinya.
Table 2. Karakter khusus JavaScript.
Keterangan Spesial Karakter

Backspace \b
Form feed \f
Newline \n
Carriage return \r
Tab \t
Tanda backslash (\) adalah karakter escape pada JavaScript. Ketika digunakan pada akhir dari suatu baris, akan
berfungsi sebagai character penyambung baris. Ketika diikuti oleh karakter lain, karakter escape tersebut akan
kehilangan fungsi khususnya. Dalam JavaScript, programmer mengunakan backslash untuk escape backslash
lainnya, suatu petik tunggal, dan suatu petik ganda.
e t
Ekspresi dan Operator a N
d r
e n
Literal dan variabel dihubungkan oleh operator, hasil dari pernyataan tersebut adalah ekspresi. JavaScript
H
menyediakan berbagai operator yang memungkinkan programmer menulis sejumlah ekspresi dari yang paling
By
sederhana sampai yang paling sulit.
 Assignment operator
 Bitwise operator
 String operator
JavaScript memiliki operator binari maupun unari. Suatu operator binari memiliki format.
operand1 operator operand2
Sebagai contoh , 9 * 7 atau temp = 24 adalah ekspresi dengan operator binari.
Operator unari memiliki dua format:
operand operator
atau
operator operand
Sebagai contoh ekspresi mengunakan operator unari adalah ++y atau y++.
11
Page 65 / 197
Assignment Operator
Operator pemberi nilai (=) adalah suatu operator binari yang digunakan untuk memberi nilai ke operand di sisi
kiri (biasanya berupa suatu variabel) yang didasarkan pada nilai operand sebelah kanan (seperti FirstName =
"John" atau x = y * 9). Table 3 adalah daftar singkat operator pemberi nilai.
Table 3. Daftar Operator assignment
Shorthand operator Artinya Contoh

x += y x = x + Y x +=
x -= y x = x - y x -=
x *= y x = x * y x *=
x /= y x = x / y x /=
x %= y x = x % y x %=
x <<= y x = x << y x <<=
x >>= y x = x >> y x >>=
x >>>= y x = x >>> y x >>>=
x &= y x = x & y x &= 0xC0
x |= y x = x | y x |= 0x0F
x ^= y x = x ^ y x ^= 0XFF
Catatan
Bagi yang tidak familiar dengan pemrograman C, hati-hati dengan
t
perbedaan antara assignment operator (=) dan comparison operator
e
(==)
a N
Arithmetic Operator
d r
e n
H
Sesuai dengan fungsinya operator aritmatika melakukan operasi perhitungan aritmatika terhadap suatu nilai
By
numerik baik dalam literal maupun variabel. JavaScript mendukung operator standard aritmatika untuk
penjumlahan (+), pengurangan (-), perkalian (*), dan pembagian (/). Juga memiliki operator modulus (%),
increment (++), decrement (--), dan unary negation (-).
Operator modulus (%) adalah suatu operator binary yang mengembalikan nilai sisa dari suatu pembagian bulat
operand1 terhadap operand2. Sebagai contoh, hasil dari 27 % 6 adalah 4.
Operator increment unary adalah menambah nilai satu ke variabel operand, sedangkan operator decrement unary
mengurangi satu dari padanya. Bagaimanapun, nilai yang dikembalikan tergantung dari posisi operator terhadap
operand Jika operator berada didepan (++x atau --x), nilai yang dikembalikan adalah x+1 atau x-1. Ketika
operator dibelakang(x++ or x--), nilai x dikembalikan sebelum ditambah atau dikurang.
Operator khusus unari arithmetic adalah operator unari negation operator. Ia membalikan tanda dari nilai yang
diberikan pada suatu variabel. Sebagai contoh, jika x = -7, -x mengubah nilai menjadi 7.
Bitwise Operator
Untuk programmer yang perlu menangani bit. JavaScript menyediakan satu set dari operator bitwise. Untuk
operator ini, JavaScript melakukan konversi terhadap operand menjadi integer 32-bit sebelum melakukan
operasi padanya. Operator logika bitwise adalah
 Bitwise AND (&), akan mengembalikan nilai dari logika AND antara sepasang bit. Sebagai contoh ,
0x0f & 0x0a mengembalikan 0x0a.
 Bitwise OR (|), akan mengembalikan nilai dari logika OR antara setiap pasangan dari bit. Sebagai
contoh, 0x05 | 0x0a mengembalikan 0x0f.
 Bitwise XOR (^), akan mengembalikan nilai dari logika exclusive OR between antara tiap pasangan
bit. Sebagai contoh, 0x0f ^ 0x0a mengembalikan 0x05.
12
Page 66 / 197
JavaScript juga menyediakan satu set bitwise untuk operasi shift operand1 terhadap jumlah yang ditentukan di
operand2. Operand ini adalah
 Shift left (<<), akan mengeser bit ke kiri dengan jumlah tertentu. Bit yang melewati batas kiri akan
diabaikan, dan suatu bit nol akan digeser dari kanan. Sebagai contoh, 0x0f << 2 mengembalikan
0x3c.
 Sign propagating shift right (>>) mempertahankan bit tanda dari nilai ketika melakukan geser ke kanan
sesuai dengan jumlah yang ditentukan. Bit yang tergeser melewati bata kanan akan diabaikan, kecuali
bit tanda, bit nol akan digeser dari kiri.. Sebagai contoh, 10 >> 2 mengembalikan 2 dan -10 >> 2
mengembalikan -2.
 Zero-fill right shift (>>>) sama seperti >>, cuma tidak mempertahankan bit tanda ketika dilakukan
pergeseran sesuai dengan jumlah yang ditentukan.
Logical Operator
Operator logika membutuhkan operand dengan nilai Boolean (true atau false) dan mereka akan mengembalikan
suatu nilai logika. Operator logika adalah sebagai berikut :
 Logical AND (&&)

 Logical OR (||)
 Logical NOT (!)
Operator logika NOT adalah suatu unary operator yang mempertahankan nilai ekspresi.
Comparison Operator
e t
Operator perbandingan diterapkan pada perbandingan pada data numerik dan data string serta tidak dapat
a N
dilakukan pada nilai Boolean. Masing-masing operand harus memiliki tipe yang sama: nemerik dibandingkan
dengan numerik atau string dengan string. Hasil dari perbandingan adalah sautu nilai Boolean. Operator
perbandingan adalah:
d r
e n


Equal (==)
Not equal (!=)
H


Greater than (>)
By
Greater than or equal to (>=)
 Less than (<)
 Less than or equal to (<=)
JavaScript juga mendukung ekspresi secara kondisi (conditional expression) yang mana berbentuk.
(condition) ? true_value : false_value
Jika kondisi adalah benar, ekspresi memiliki dari true_value. Sebaliknya memiliki nilai dari
false_value. Seperti saudaranya yang berbasis bahasa C, ekpresi kondisi adalah ekspresi standard dan dapat
digunakan dimana saja, dan dapat dilihat sebagai berikut :
battery_status = (voltage > 1.3) ? "good" : "weak"
String Operator
Operator string (+) mengabung dua nilai string dan mengembalikan satu string dimana merupakan hasil
gabungan dari keduanya. Sebagai contoh :
"Java" + "Script"
13
Page 67 / 197
Menghasilkan
"JavaScript"
Operator shorthand += mengabung string kiri dengan string dikanan operand dan memberikan nilai baru pada
operand disebelah kiri.
Urutan operasi
Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu operator, urutan operasi dari operator
menentukan nilai hasil evaluasi. Dengan menggunakan tanda kurung, programmer dapat mengatur aturan
tersebut. Table .4 adalah urutan prioritas operasi dari yang paling rendah sampai yang paling tinggi.
Table 4. Prioritas urutan operasi dari prioritas rendah sampai tinggi.
Keterangan Operator
Assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=
Conditional ?:
Logical OR ||
Logical AND &&
Bitwise OR |
Bitwise XOR ^ e t
Bitwise AND &
a N
Equality == !=
d r
Relational
e
< <= > >=n
Bitwise shift H
<< >> >>>
Addition/subtraction
Multiply/divide
By +-
*/%
Negation/increment ! ~ - ++ -
Call, member () []
Struktur Kendali dan Fungsi

Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan perintah-
perintah yang dapat mengatur aliran dari informasi. Berdasarkan hasil komputasi yang telah dilakukan,
JavaScript akan membuat keputusan jalur mana yang akan dieksekusi. Kita akan membahas tentang perintah
conditional dan loop dalam JavaScript.
Walaupun semua kode harus ditulis dalam penanganan event, tetapi hal ini adalah praktek pemrograman yang
kurang baik. Sebagai pengantinya, gunakan fungsi, kode akan menjadi lebih modular dan dapat digunakan
kembali (reuseable).
Perintah kondisi
Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan bagian sebelumnya. JavaScript memiliki
suatu perintah kondisi if. Tata cara penulisan dari perintah kondisi tersebut adalah sebagai berikut:
if (condition) {
14
Page 68 / 197
statements1 }
[else {
statements2}]
condition adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean true atau false.
contoh pemakaian statement if:
if (n>3) {
status = true
if (j != n) j = 0 }
else j = n
Perhatian
Bagi programmer C harus berhati-hati dengan evaluasi kondisi pada
JavaScript. Suatu kondisi numerik yang mengasilkan nol adalah tidak
sama dengan suatu Boolean true pada JavaScript, dan sebaliknya suatu
nilai bukan nol tidak sema dengan Boolean false. Pada JavaScript hasil
dari suatu kondisi harus data type Boolean.
e t
N
Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan. Contoh berikut adalah perintah yang benar:
a
d r
if (a==b) j=0
e n
else j=1 H
Perintah Perulangan
By
JavaScript mendukung dua struktur loop; perintah for dan perintah while. Untuk control pada struktur loop,
JavaScript menyediakan perintah break dan continue.
Perintah for
Perintah for pada JavaScript sama dengan yang ada di Java dan C. Perintah for mengulang suatu loop sampai
kondisi menghasilkan evaluasi true atau loop keluar dengan perintah break . Syntax untuk perintah for
adalah sebagai berikut :
for ([initial-expression;] [condition;] [increment-expression])

{
statements
Urutan proses untuk perintah for adalah sebagai berikut:
1. Interpreter menjalankan initial-expression. Ekspresi ini mementukan nilai yang diperlukan

untuk kendali perulangan.
15
Page 69 / 197
2. Kemudian interpreter memeriksa condition. Jika true, kendali dilanjutkan ke langkah selanjutnya.
Jika false, kendali diarahkan ke perintah setelah perulangan.
3. Kemudian interpreter menjalankan increment-expression, yang mana melakukan update
terhadap variabel-variabel yang digunakan untuk kendali perulangan.
4. Kemudian statement dijalankan dan, jika ditemukan suatu break atau continue, kendali kembali ke
langkah 2.
Contoh :
<HTML>
<HEAD>

</SCRIPT>
e t
</HEAD>
a N
<BODY>
</BODY> d r
</HTML>
e n
H
By
Hasil :
number: 1 square: 1
number: 2 square: 4
number: 3 square: 9
number: 4 square: 16
Perintah while
Perintah while terus mengulangi loop selama kondisi memiliki nilai true. Syntax untuk perintah while adalah
sebagai berikut :
while (condition) {
statements
16
Page 70 / 197
Test kondisi terjadi pada perulangan while yang pertama kali dan pada akhir dari setiap loop. Ketika hasil test
mengembalikan false, kendali dilewatkan ke perintah berikutnya setelah loop. Perintah for yang diubah ke
suatu while loop.
Contoh:
<HTML>
<HEAD>
i=1
while (i<=10) {
sq=i*i
document.write("number: " + i + "square: " + sq +

"<BR>")
i++
// end script hiding -->
</SCRIPT>
e t
</HEAD>
a N
<BODY>
d r
</BODY>
</HTML>
e n
H
Hasil:
number: 1 square: 1
By
number: 2 square: 4
number: 3 square: 9
Perintah break
Perintah break menghentikan for atau while loop dan mengembalikan kendali ke perintah berikutnya yang
mengikuti loop. Contoh berikut menggambarkan bagaimana menggunakan perintah break:
i=0
while (i<10) {
if (i==3)
break
i++
17
Page 71 / 197
Perintah continue
Seperti perintah break, perintah continue menghentikan interasi tersebut untuk suatu for atau while
loop; Tetapi tidak keluar dari loop; Tetapi melakukan interasi berikutnya.
 Pada suatu while loop, kendali dilewatkan ke condition.

 Pada suatu for loop, dilewatkan ke increment-expression.
Berikut ini memperlihatkan bagaimana menggunakan perintah continue:
i=0
while (i<10) {
if (i==3)
continue
i++
e t
Perintah function
a N
d r
Suatu function adalah sekumpulan dari perintah JavaScript yang akan mengerjakan tugas tertentu. Fungsi ini
n
dapat dipanggil dari segala titik pada dokumen tersebut dan dipanggil dari event. Format dari perintah
e
function adalah sebagai berikut:
H
By
function FunctionName(argument list) {
statements
}
Contoh:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"

</SCRIPT>
</HEAD>
<BODY>
18
Page 72 / 197

</SCRIPT>
</BODY>
</HTML>
TIP
Karena browser membaca perintah tersebut diapit oleh
<HEAD>...</HEAD> duluan; adalah praktek yang baik untuk
memesan semua variabel global dan semua fungsi pada HEAD dari
dokumen. Hal ini mencegah kesalahan seperti non-initialized variables
dan undefined functions
Argumen dari suatu fungsi dapat berupa sembarang tipe data atau objek JavaScript. Objek array
functionName.argument[i] dan functionName.arguments.length mengandung nilai jumlah
argumen yang dikirim ke fungsi, argumen acuan dengan mendeklarasikan nama-nama variabel. Hal ini
memungkinkan sejumlah argumen dilewatkan ke fungsi sebagai suatu argument array. Contoh berikut
menunjukkan pemakaian dari suatu variable argument list.
Contoh :
<HTML>
e t
<HEAD>
a N
d r

</SCRIPT>
</BODY>
</HTML>
Contoh diatas menggambarkan beberapa hal yang penting dari suatu fungsi. Suatu variabel global diinisialisasi
pada bagian <HEAD>. Perintah var mendeklarasikan i sebagai suatu variabel lokal pada fungsi. Juga
ditunjukkan bagaimana perintah return dapat digunakan untuk memastikan fungsi dijalankan dengan baik.
Perintah return juga dapat mengembalikan string atau nilai numerik, sebagaimana yang ditunjukkan oleh contoh
dibawah ini:
e t
a N
function RetExam(a, b) {
d r
var x=0
e n
H
By
x = a+b
return x
TestResult=RetExam(5, 7)
Komentar
 Komentar banyak baris yang diawali dengan suatu /* dan diakhiri dengan suatu */
Komentar single-line, dari C++, memperlakukan semua yang dari double slash ke belakang sebagai suatu
komentar, berikut ini adalah contoh yang sah untuk suatu komentar single-line :
// this is a comment
if (a=b) c=1 // also a valid comment
Komentar banyak baris mengikuti aturan pada C dan dapat digunakan untuk menandai perintah JavaScript,
sebagaimana yang ditunjukkan oleh contoh sebelumnya, adalah sutu komentar HTML, baris terakhir
membutuhkan dua slash untuk menjaga JavaScript dapat menginterprestasikan baris tersebut.
20
Page 74 / 197
Dasar dari Objek

JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan merupakan bahasa object-oriented
programming (OOP). Perancang JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru; tetapi
bertujuan membuat suatu bahasa script untuk mengintegrasikan objek yang telah dibuat dengan suatu bahasa
OOP kedalam dokumen HTML. Selanjutnya Javascript tidak memiliki encapsulation , inheritance, dan
abstraction seperti pada C++ atau Java.
Tetapi class pada JavaScript menyediakan properti dan metode untuk membuat objek.
Objek dan Properti
Berikut ini adalah notasi yang digunakan oleh JavaScript untuk menggambarkan suatu objek dan propertinya:
ObjekName.PropertyName
Sebagai contoh, objek mydog memiliki properti sebagai berikut :
mydog.breed="small mut"
mydog.age=5
mydog.weight=25
t
Objek juga dapat menggunakan acuan array dengan menggunakan nama propertinya sebagai index:
e
a N
mydog["breed"]="small mut"
d r
mydog["age"]=5
e n
H
By
mydog["weight"]=25
Juga dapat mengunakan acuan array dengan index secara numerik:
mydog[0]="small mut"
mydog[1]=5
mydog[2]=25
Defining Metodes
Suatu fungsi yang berasosiasikan objek acuan adalah metode. format berikut meng-asosiasikan fungsi dengan
suatu objek:
ObjekName.MetodeName = function_name
Kemudian metode tersebut berkerja dengan suatu objek:
ObjekName.MetodeName(parameters);
21
Page 75 / 197
Bekerja dengan Objek
Untuk melakukan manipulasi pada objek membutuhkan fasilitas tambahan dari JavaScript yaitu dengan perintah
for...in , perintah with , operator new, dan kata kunci this.
Perintah for...in
Perintah for...in menyediakan suatu mekanisme perulangan untuk iterasi melalui semua properti dari suatu
objek. Dengan format adalah sebagai berikut :
for (variable in Objekname) {
statements
Contoh berikut mengunakan perintah ini untuk menampilkan semua properti dalam suatu objek dan nilai
asosiasinya:
function ListProperti(obj, obj_name) {
var result = ""
for (var i in obj) {
e t
result += obj_name + "." + i " = " + obj[i] + "<BR>"
a N
}
d r
return result
e n
H
By
PropList = ListProperti(mydog, "mydog")
Pada contoh sebelumnya, variabel i adalah nama dari property, kemudian mengindeks objek dengan
menggunakan property name_obj[i].
Perintah with
Pada beberapa situasi suatu objek perlu dibuat acuan beberapa kali. Perintah with membuat acuan ke suatu
objek default yang berada dalam kurung. Tata cara penulisannya adalah sebagai berikut:
with (ObjekName) {
statements
Objek math berikut merupakan contoh pemakaian dari perintah with:
var r =
var x =
with (Math) {
22
Page 76 / 197
r = p / (1 - cos(a))
x = (2 * p * cos(a)) / (sin(a) * sin(a))
Operand new
Untuk suatu tipe objek user-defined, operand new berfungsi membuat suatu instance baru
dari objek. Tata cara penulisannya adalah sebagai berikut:
ObjekName = new ObjekType(param1 [, param2,] É [, paramN])
Kata kunci this
this mengacu pada objek yang sekarang. Pada bagian selanjutnya akan ditunjukkan
bagaimana pemakaian kata kunci ini dalam penulisan function dan metode.
Membuat Objek baru
Walaupun JavaScript memiliki sejumlah besar objek yang telah didefinisikan, developer
dapat membuat objeknya sendiri. Untuk membuat suatu objek baru diperlukan dua langkah
yaitu:
e t
a N
d r
1. Mendefinisikan jenis objek dengan membuat suatu fungsi.
2. Membuat instances dari objek tersebut dengan menggunakan operand new.
e n
H
Fungsi tersebut mendefinisikan jenis objek, properti, dan metode. Sebagai contoh untuk
membuat suatu objek dog:
By
function dog(breed, age, weight) {
this.breed = breed;
this.age = age;
this.weight = weight;
Untuk menggunakan fungsi diatas, operand new diperlukan untuk mendefinisikan suatu
instance baru untuk objek tersebut. Sebagai contoh:
mydog = new dog("small mut", 5, 25);
Selain type data yang umum (string, numeric, and Boolean), objek yang lain dapat juga
menjadi properti dari suatu objek. Contoh menambah suatu nomor izin pada objek jenis dog,
nomor izib ini juga mengacu pada objek lain.
function doglicense(owner, phone_number) {

23
Page 77 / 197
this.owner = owner;
this.phone_number = phone.number;
AZ123 = new doglicense("John Smith", "999-9999");
Jenis Objek dog perlu dimodifikasi untuk mengikutsertakan informasi baru tersebut:
function dog(breed, age, weight, license) {
this.breed = breed;
this.age = age;
this.license = license;
mydog = new dog("mixed mut", 5, 25, AZ123); e t

a N
d r
n
Untuk mengacu pada pemilik mydog, syntax berikut diperlukan
e
H
mydog.license.owner
By
CATATAN
Jika suatu property baru ditambahkan pada suatu objek
tanpa mengubah jenis objek, properti tambahan tersebut
hanya berpengaruh pada objek tersebut dan bukan pada
semua instances dari objek jenis yang sama.
CATATAN
Suatu variabel string atau suatu string literal adalah suatu
objek string. Metode string adalah asosiasi dengan objek
ini, dan akan didiskusikan pada bagian "Objek dan fungsi
built-in".
Mendefinisikan Array
Tidak seperti bahasa lainnya, Java script tidak memiliki suatu tipe data array. Tetapi
bagaimanapun, fungsi yang sama dapat dengan membentuk suatu objek untuk melakukan
emulasi suatu array. Langkah pertama untuk mendefinsikan suatu objek array:
function MakeArray(n) {
24
Page 78 / 197
this.length = n;
for (var i = 1; i <= n; i++)
this[i] = 0;
return this
Langkah berikutnya adalah mendefinisikan suatu instance untuk membentuk objek

MakeArray :
ExmpArray = new MakeArray(20);
Ketika anda memberikan nilai pada suatu elemen array, hal tersebut menyerupai memberi
nilai pada suatu type data array. Perbedaannya adalah array ini dimulai dari satu dan bukan
nol, karena nol mendefinisikan panjang dari array:
ExmpArray[1] = "test1"
ExmpArrya[2] = "another test"
e t
Objek dan Fungsi Built-In a N
d r
e n
Objek dan fungsi yang akan dijelaskan pada bagian ini adalah bagian dari lingkungan
H
JavaScript, selanjutnya sangat tergantung pada jenis web browser. Adapun objek dan fungsi
By
tersebut adalah sebagai berikut:
 Objek string dan metode asosiasinya

 Objek Math dan metode asosiasinya
 Objek date dan metode asosiasinya
 Fungsi eval, parseInt, dan parseFloat
Objek String
Suatu string yang dipetik adalah suatu variabel string atau suatu properti string dari suatu
objek, segala sesuatu yang ditempatkan diantara petik adalah suatu string. Ada dua cara untuk
menggunakan suatu objek string:
1. stringName.propertyName
2. stringName.metodeName(parameters)
Properti Object String
Object string hanya memiliki sebuah properti -length. Karena berupa properti, berikut ini
adalah acuan yang benar:
StringLength = stringVariable.length;
25
Page 79 / 197
StringLength = mydog.name.length;
StringLength = "This is a string".length;
Metodee Objek String
Sejumlah besar metode adalah asosiasi dengan objek string. Disamping fungsi manipulasi
string yang normal, banyak diantaranya berfungsi membungkus string diantara tag HTML.
Berikut ini adalah daftar dari metode object string:
 anchor(nameAttribute). Dengan nameAttribute sebagai nilai dari parameter yang

dilewatkan ke metode, metode anchor mengurung text dengan tag <A></A>. Berikut
ini adalah contohnya:
document.write("Other Links".anchor("other_links"));
 big(). String di apit dengan tag <BIG></BIG>.

 blink(). String di apit dengan tag <BLINK></BLINK> .
 bold(). String di apit dengan tag <B></B>.
 charAt(index). Metode ini mengembalikan huruf yang ditentukan oleh index,
dimana index adalah range 0 sampai stringName.length - 1. Jika index berada
diluar jangkauan, suatu null string akan dikembalikan.
 fixed(). String di apit dengan tag <TT></TT>.
e t

a N
fontcolor(color). String di apit dengan tag <FONT COLOR="color"></FONT>.
r
Parameter color ditentukan dengan format rrggbb.
d

e n
fontsize(size). String di apit dengan tag <FONTSIZE=size></FONTSIZE>. Nilai
dapat berupa angka satu sampai tujuh, atau dapat perubahan secara relatif (+ atau -)
H
yang didasarkanpada ukuran font dasar yang ditentukan pada tag <BASEFONT>.

By
indexOf(searchValue, [fromIndex]). Metode ini mengembalikan posisi index
dari string pertama yang ditemukan berdasarkan string searchValue. fromIndex
secara optional menentukan posisi awal pencarian. Jika pencarian tidak ditemukan
maka JavaScript mengembalikan -1.
 italics(). String di apit dengan tag <I></I>.
 lastOf(searchValue, [fromIndex]). Menyerupai indexOf, cuma pencarian
dilakukan dari arah belakang.
 link(hrefAttribute). String di apit dengan tag <A HREF=hrefAttribute></A>.
 small(). String di apit dengan tag <SMALL></SMALL>.
 strike(). String di apit dengan tag <STRIKE></STRIKE>.
 sub(). String di apit dengan tag <SUB></SUB>.
 substring(indexA, indexB). Metode ini mengembalikan subset dari suatu string,
yaitu dari posisi index A s/d indexB-1. Jika indexA sama dengan indexB
akan dikembalikan suatu null string.
 sup(). String di apit dengan tag <SUP></SUP>.
 toLowerCase(). Metode ini mengubah string ke huruf kecil dan mengembalikannya.
 toUpperCase(). Metode ini mengubah string ke huruf besar dan mengembalikannya.
Objek Math
Object Math menyediakan suatu himpunan dari nilai-nilai standar matematika dan metode-
metode yang argumennya berupa himpunan dari operator matematika yang disediakan
dengan JavaScript. Tidak seperti object lainnya, object Math tidak membutuhkan suatu
26
Page 80 / 197
instance dari object sebelum menggunakan metode objek math tersebut. Untuk memudahkan
pemasukkan nama dan pembacaan, metode Math sering diikat dengan perintah with. Syntax
untuk object Math adalah sebagai berikut:
1. Math.propertyName
2. Math.metodeName(parameters)
Properti Objek Math
Object Math memiliki delapan buah properti. Properti-properti ini ini mendefinisikan
berbagai konstanta matematika. Tabel 5. menunjukkan properti-properti tersebut dan nilai
perkiraannya.
Table 5. Properti-properti objek Math dan nilainya.
Property Description Approx. value

E Euler's constant 2.718
LN2 Natural logarithm of 2 0.693
LN10 Natural logarithm of 10 2.302
LOG2E Base 2 logarithm of e 1.442
PI Ratio of circumference to diameter
e t 3.14159
SQRT1_2 Square root of one-half N 0.707
SQRT2 Square root of two ra 1.414
nd
Metode Objek Math
He
By
Object Math memiliki sejumlah metode yang argumennya adalah himpunan dari operator
matematika:
 abs(number). Metode ini mengembalikan nilai absolut dari number.

 acos(number). Mengembalikan nilai arc cosinus dari number yang bernilai antara -1
and 1.
 asin(number). Mengembalikan nilai arc sinus
 atan(number). Mengembalikan nilai arc tangen dalam radian.
 ceil(number). Mengembalikan nilai integer berikutnya yang lebih besar atau sama
dengannnumber.
 cos(number). Mengembalikan nilai cosinus dari number (dalam sudut radian).
 exp(number). Mengembalikan pangkat e dari number, dimana e adalah konstanta
Euler's.
 floor(number). Mengembalikan integer yang lebih kecil atau sama dengan the
number.
 log(number). Mengembalikan logaritma natural (base e) dari number, dimana
number adalah sembarang bilangan positif hasil ekspresi atau object. Jika number
berada diluar jangkauan maka nilai pengembalian defaultnya adalah
1.797693134862316e+308.
 max(number1, number2). Mengembalikan terbesar dari kedua number.
 min(number1, number2). Mengembalikan terkecik dari kedua number.
 pow(base, exponent). Metode ini melakukan pangkat base terhadap exponent.
Jika salah satunya bilangan imaginier, maka akan dikembalikan nol.
27
Page 81 / 197
 random(). Hanya terdapat pada paltforms UNIX, yang mana mengembalikan suatu
pseudorandom number antara nol dan satu. Pada Netscape Navigator 3.0, metode
random() metode dapat digunakan pada semua platforms.
 round(number). Mengembalikan nilai dari number yang dibulatkan kebilangan
integer terdekat.
 sin(number). Mengembalikan nilai sinus dari sudut dalam radian.
 sqrt(number). Mengembalikan nilai akar dari bilangan non negatif, Jika diluar
jangkauan akan dikembalikan nol.
 tan(number). Mengembalikan nilai tangen dari sudut dalam radian.
Objek Date
Walaupun JavaScript tidak menyediakan suatu type data Date, tetapi menyediakan suatu
objek Date yang mana menangani informasi date dan time. Semua tanggal adalah jumlah
milidetik sejak January 1, 1970, 00:00:00. Akibatnya semua tanggal sebelum 1970 adalah
tidak sah.
Objek Date membutuhkan suatu instance dari objek Date yang berkaitan dengan pemakaian
metode-metodenya. Instance dapat berupa suatu objek baru atau properti dari objek yang ada.
Ada empat cara untuk membentuk instance baru:
dateObjectName = new Date()
dateObjectName=new Date("month day, year

e t
hours:minutes:seconds")
a N
d
dateObjectName=new Date(year, month, day)r
e n
dateObjectName=new Date(year, month, date, hours, minutes,
seconds) H
By
Membentuk suatu himpunan dari tanggal dan waktu ke tanggal dan waktu sekarang.
Mengosongkan time berarti memberinya nilai nol. Karena objek Date tidak mengandung
properti apa-apa, hanya ada satu format untuk metode Date:
dateObjectName.metodeName(parameters)
Pengecualiaanya adalah UTC dan metode parse, yang mana adalah metode status dan
pemakaiannya
Date.UTC(parameters)
Date.parse(parameters)
Table 6 menjelaskan nilai yang akan dikembalikan oleh berbagai perintah get.
Table 6. Memisahkan informasi dalam objek Date.
metode Date Nilai yang dikembalikan
28
Page 82 / 197
getDate() Day of the month

getDay() Day of the week
getHours Hour of the day
getMinutes Minutes in the hour
getMonth The month
getSeconds Seconds in the minute
getTime Milliseconds since 1/1/1970
getTimezoneOffset Offset between local time and GMT
getYear The year
Selain dapat menerima berbagai informasi dari object Date, metode pada Tabel 7
menunjukkan bagaimana mengubah informasi date.
Table 19.7. Setting informasi dalam objek Date.
metode Date Nilai yang sah

setDate(dayValue) 1-31
setHours(hoursValue) 0-23
setMinutes(minutesValue) 0-59
setMonth(monthValue)
e t
0-11
N
ra
setSeconds(secondsValue) 0-59
setTime(timeValue)
n d >=0
setYear(yearValue)
H e >=1970
By
Dua metode tambahan yang dapat digunakan untuk melakukan konvesi data tanggal ke suatu
nilai string, adalah sebagai berikut:
 toGMTString(). Metode ini meng-konversi date dalam GMT (Greenwich Mean

Time) dan mengembalikannya sebagai suatu string. Format sebenarnya tergantung
pada platform hardware.
 toLocaleString(). Mthod ini meng-konversi string ke format locale, yang mana
bervariasi berdasarkan setting.
Objek Date juga memiliki dua metode statik untuk menangani string; hal tersebut memiliki
format Date.metode(). Metode-metode ini adalah sebagai berikut:
 parse(dateString). Metode ini melakukan konversisuatu string tanggal ke jumlah

detik sejak January 1, 1970, 00:00:00. Setting waktu adalah default. Tetapi juga
mendukung akhiran yang menentukan GMT oatau U.S. standard time zones.
 UTC(year, month, day [, hrs] [, min] [, sec]). Metode ini mengembalikan
jumlah milidetik sejak January 1, 1970, 00:00:00 Universal Time Coordinate (dengan
kata lain adalah, GMT).
Fungsi Built-In
JavaScript mendukung beberapa function built-in yang mana tidak berkaitan dengan object
tertentu. Berikut ini adalah function-function built-in adalah sebagai berikut:
29
Page 83 / 197
 eval(string). Function eval meng-evaluasikan string, yang mana dapat berupa

ekspresi JavaScript, perintah, atau urutan dari perintah-perintah, dan mengembalikan
hasil. Beberapa contoh dari function eval adalah
var x =
var y =
var z = "if (x <= 9) (x*y) else (x/y);"
document.write(eval("x + y / 4"), "<BR>")
document.write(eval(z), "<BR>")
 parseFloat(string). Fungsi ini mengurai string dan mengembalikan suatu nilai

floating point. Jika karakter pertama bukan suatu bilangan atau tanda, nilai nol akan
dikembalikan pada platform Windows, dan NaN (not a number) pada platforms lain.
 parseInt(string [, radix]). Fungsi parseInt mengurai string dan
mengembalikan suatu integer berdasarkan basis yang ditentukan. Nilai dari akar
tersebut adalah 8 untuk octal, 10 untuk desimal, dan 16 untuk hexadesimal.
 isNaN(testValue). Fungsi ini hanya ada pada platforms UNIX untuk dan
mengevaluasi testValue untuk menentukan apalah adalah NaN. Akan dikembalikan
true atau false

e t
escape("string"). Mengembalikan encoding ASCII dari suatu argumen dalam ISO
Latin-1 character set. string tersebut adalah suatu non-alpahnumeric string atau
a N
property dari suatu object yang ada. Jika berupa suatu alphanumeric, akan dilewatkan
d r
nilai ke output string tanpa melakukan encoding terhadapnya.

e n
unescape("string"). Mengembalikan karakter ASCII untuk %xx, atau hexadesimal
H
yang ditentukan dalam parameter string.
Objek Netscape By
Sebagai tambahan kepada objek-objek JavaScript dan metode, Pengembang halaman Web
dapat mengakses objek-objek dan metode dalam Netscape browser. Bagian ini akan
membahas Objek Netscape Navigator dan metode-metodenya.
Hirarki Objek Navigator
Netscape Navigator membangun suatu hirarki instance-instance yang berkaitan dengan

dokumen yang sedang diproses.
Hirarki ini penting untuk membuat acuan kepada object dan propertinya. Turunan dari suatu
object adalah properti dari objek orang tuanya. Karena semua objek adalah merupakan
turunan dari objek window , sehingga objek window sendirinya tidak memiliki acuan ke
objek maupun properti apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window
lain membutuhkan tambahan nama window kepada object acuan-nya.
30
Page 84 / 197
Hal yang penting dari HTML Layout
Untuk dapat menggunakan JavaScript secara benar membutuhkan pengertian bagaimana

Netscape Navigator memproses suatu dokumen HTML. Ketika suatu dokumen HTML di
muat, browser akan mulai melakukan proses terhadap baris pertama dari dokumen. Browser
membuat layout dari layar berdasarkan perintah HTML yang terdapat dalam dokumen
tersebut. Setelah layar selesai digambar, layar tidak dapat digambar ulang tanpa melakukan
proses terhadap dokumen baru. Bagaimana hal ini mempengaruhi frame dan window adalah
topik pada bagian berikutnya.
e t
N
Sesuai dengan hal ini, maka instance dari suatu objek ada setelah proses dilakukan terhadap
a
d r
baris HTML yang menghasilkan instance tersebut. Dengan kata lain JavaScript tidak dapat
mengacu pada suatu objek HTML seperti form, atau menjalankan suatu fungsi sampai
e n
browser memproses perintah tersebut. Sebagai contoh, JavaScript tidak dapat mengacu pada
H
suatu objek form sampai browser memproses HTML untuk form tersebut. Demikian juga
By
dengan proses perubahan properti, setelah browser menggunakan properti dalam
menghasilkan layout window, maka perubahan properti setelah itu tidak memiliki efek
terhadap tampilannya.
Walaupun nampaknya keterbatasan tersebut berat, namun dengan pengertian yang baik
terhadap HTML proses dan JavaScript akan mengurangi frustasi. Prinsip utama yang perlu
diingat bahwa suatu dokumen HTML diproses secara berurut dan JavaScript adalah bagian
dari proses secara berurut tersebut.
Objek Window
Objek window adalah orang tua dari semua object. Hal tersebut termasuk semua window dan
frame yang berada dalam suatu. Ketika browser mulai memuat suatu dokumen HTML, hal
tersebut dimulai dengan suatu instance dari objek window. Jika dokumen HTML membuat
suatu frame, informasi dari frame tersebut tersimpan dalam suatu objek frame array. Dengan
kata lain, membuka suatu window akan menghasilkan suatu anak dari objek window.
Kehebatan dari JavaScript adalah terletak pada kemampuan untuk melakukan utilisasi
properti dan metode dari objek window.
Bagian ini akan membahas properti dari objek window berikut :
 objek Location
 objek History
 objek Document
31
Page 85 / 197
Diantara ketiga objek tersebut, document adalah objek yang paling penting dalam hirarki
tersebut. Objek document itu sendirinya mengacu kepada objek lain. Hal lain yang penting
dari hal ini adalah sebagai berikut:
 objek form
 objek anchor
 objek link
Objek location
Objek location mengandung informasi tentang URL sekarang. Acuannya ke objek tersebut
adalah sebagai berikut:
[windowReference.]location[.propertyName]
Properti dari object location mengacu pada bagian individual dari URL:
protocol//hostname:port pathname search hash
CATATAN
t
Objek location dan properti location dari objek
e
a N
dokumen (document.location) memiliki tujuan yang
berbeda. Objek location dapat berubah, tetapi properti
location tidak dapat berubah. d r
e n
H
Properti dari objek location adalah sebagai berikut:
 protocol. protocol
By menentukan metode access dari URL.
 hostname. hostname mengandung nama host dan domain, atau alamat IP, dari host
tujuan.
 port. port adalah TCP/IP port, jika kosong akan digunakan port default dari protocol
tersebut.
 pathname. pathname meliputi path resource pada host tujuan.
 search. property search adalah string yang dimulai dengan tanda ? yang digunakan
untuk script CGI.
 hash. property hash adalah suatu string yang dimulai dengan tanda hash(#) dan
diikuti dengan suatu anchor name.
 href. property ini merupakan keseluruhan dari URL. Jika acuan dibuat
ke[windowName.]location, property href menjadi asumsi.
 host. Property ini ekivalen dengan hostname:port.
CATATAN
Walaupun JavaScript memungkinkan modifikasi pada
properti individual, praktek pemrograman yang umum
adalah mengubah properti href. Pendekatan ini mencegah
hasil error dari browser sebelum akses URL belum berubah
secara keseluruhan.
32
Page 86 / 197
Objek History
Akses ke objek History adalah topik yang kontroversial karena memungkinkan script
mengirim history kembali ke server. Untuk mencegah pemakaian yang menyimpang,
Netscape Navigator 2.01 keatas telah menghilangkan object ini.
Objek document
Object document menyimpan properti, objek, dan metode yang mewakili dokumen. Hal
tersebut mengacu pada bagian dokumen HTML yang didefinsikan oleh tag <BODY></BODY>.
Bagian ini mendiskusikan komponen dari objek dokumen, kecuali objek form (yang akan
dibahas pada bagian berikutnya).
Properti objek document
Option HTML ke tag <BODY> mendefinisikan properti objek document. JavaScript mengacu
pada semua properti ini, kecuali untuk image background.
CATATAN
String yang diperlukan untuk mengubah properti color
adalah dalam format document.colorProperty =
"#RRGGBB" atau document.colorproperty="colorName".
Property color lainnya didefinisikan dalam tag
<HEAD></HEAD> yang mendahului tag <BODY>. e t
a N
Properti color untuk object
d r
document adalah sebagai berikut:
e n
 H
bgColor. Property ini menentukan warna latarbelakang dari dokumen. Property
 By
bgColor secara langsung mengupdate tampilan.
fgColor. Property ini menentukan warna text dari dokumen. Setelah browser
menyelesaikan layout dari dokumen HTML., browser mengabaikan perubahan pada
propery ini. Kecuali tag <FONT> atau metode fontcolor metode menyediakan suatu
mekanisme alternatif untuk mengubah warna text.
 linkColor. linkColor mewakili warna dari suatu link yang didefinsikan oleh HREF.
 alinkColor. property control warna dari suatu active link. Dengan kata lain, hal
tersebut adalah warna dari link ketika terpilih.
 vlinkColor. Situs yang pernah dikunjungi, browser menampilkan warna untuk link
tersebut.
Contoh:
<FORM>
<SELECT onChange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="40E0D0"> Torquoise
<OPTION VALUE="2E8B57"> Sea Green
<OPTION VALUE="87CEEB"> Sky Blue
<OPTION VALUE="F4A460"> Sandy Brown
<OPTION VALUE="FFF0F5"> Lavender Blush
<OPTION VALUE="FF1493"> Deep Pink
<OPTION VALUE="FFFFFF" SELECTED> White
33
Page 87 / 197
</SELECT>
</FORM>
Hasil :
White
Object document juga mengandung properti berikut yang tidak berkaitan dengan warna:
 lastModified. Property read-only yang berkaitan dengan tanggal terakhir dokumen

dimodifikasi.
 location. Property read-only yang biasanya sama dengan nilai dari lokasi object,
kecuali redirection digunakan untuk URL
 referrer. Property read-only mengandung URL untuk dokument yang mana di link
ke dokumen tersebut.
 title. Property read-only mengandung nilai yang ditentukan pada
tag<TITLE></TITLE>.
Contoh:
e t

e n
</SCRIPT>
H
Hasil: By
Update terakhir :01/31/2001 10:57:42
The anchors Object
Object anchors mengandung suatu array dari semua anchors yang dideklarasikan dengan
atribut NAME dari tag <A> </A>. Array tersebut dimulai dari 0 dan berlanjut sampai
document.anchors.length - 1. Nilai dari document.anchors[index] adalah null.
TIP
Sebelum menggunakannya untuk memberikan nilai seperti
location.hash, adalah mungkin untuk memeriksa
keabsahan dari anchor dengan membandingkannya dengan
panjang array; anda menggunakan bilangan berurut untuk
menentukan anchors
34
Page 88 / 197
Objek link
Array link mengandung object link yang didefinisikan oleh tag <A></A> atau dengan metode
link. Array tersebut meliputi objek untuk atribut HREF dan NAME. Dengan tambahan ke atribut
TARGET, properti dari masing-masing object link adalah identik dengan object location.
CATATAN
link array adalah suatu array read-only. Entries tambahan
ditambahkan dengan tag <A></A>. Metode link melakukan
modifikasi terhadap isi dalam array link
Object link memiliki dua event handler: onClick dan onMouseOver. Bagian ini disebut
sebagai "The Form Object," pada bagian selanjutnya di bab ini, menggambarkan bagaimana
mengunakan event handler.
Properti cookie
Property cookie mengandung suatu nilai string dari isi cookier dari file cookies.txt untuk
dokumen tersebut. Untuk suatu keterangan lengkap tentang bagaimana menggunakan
cookies, lihat bagian Netscape cookie specification. Metode substring, charAt, indexOf, dan
lastIndexOf dapat digunakan untuk memisahkan string cookie.
The document Object Metodes

e t
Object document mengandung lima metode: a N
d r
 document.write()
e n
 document.writeln()
H
By
 document.open()
 document.close()
 document.clear()
Sebagaimana yang ditunjukkan pada contoh sebelumnya, metode document.write, tanpa

mengacu pada suatu window, menulis text ke window yang sekarang. Metode
document.writeln() adalah sama dengan document.write, selain itu juga menyisip suatu
karakter newline pada akhir dari argumen. Format dari metode ini adalah sebagai berikut:
document.write(expression [, expression2] ... [expressionN])
document.writeln(expression [, expression2] ... [expressionN])
Tipe default MIME adalah text/html. Bagaimanapun, metode

document.open(["mimetype"]) memungkinkan untuk membuka type MIME lainnya,
seperti text/plain, image/gif, image/jpeg, image/x-bitmap, dan plugIn. Metode
document.open() membuka suatu stream untuk mengumpulkan output dari metode write
dan write.ln. Jika tipe MIME adalah text atau image, browser membuka suatu stream untuk
layout, untuk plugIn, browser membukanya pada suatu plug-in. Jika suatu dokumen telah
siap dalam target windows, mthod open menghapusnya.
CATATAN
35
Page 89 / 197
Sekarang, tidak dimungkinkan lagi untuk mencetak tulisan

apapun dengan JavaScript melalui metode write ataupun
writeln
Stream tersebut tetap terbuka sampai browser menemukan metode document.close().

document.close() memaksakan isi dari stream ditampilkan. Metode
document.clear()membersihkan isi dari window.
Objek Form
HTML tag <FORM></FORM> adalah fasilitas input data oleh pemakai, dan output data variabel
kepada pemakai. Input oleh pemakai memiliki efek pemilihan pada sisi klien yang dapat
dikirm ke server. Pada sisi lain, data variabel seperti marquees dapat ditampilkan pada form.
Pada sisi input, event handle adalah fasilitas untuk membangkitkan rutin JavaScript untuk
melakukan aktifitas pada proses edit data seperti validasi. Pada sisi output, JavaScript
memegang peranan penting dalam mengatur bagaimana data ditampilkan.
penanganan events
Event adalah hasil dari aksi pemakai, seperti klik pada suatu tombol mouse, checking pada
suatu kotak, dan pengiriman form. Penanganan Event didefinsikan dalam tag HTML
sepanjang JavaScript berkaitan dengan event tersebut. Berikut ini adalah contoh yang
merupakan kode dari suatu penanganan event.
e t
<INPUT TYPE="button" VALUE="Submit"
a N
onClick="validate(this.form)">
d r
e n
Pada contoh sebelumnya, kata kunci this mengacu pada objek tersebut, yang mana adalah
H
objek button. Dengan menyebutkan this.form, adalah acuan ke objek form yang
By
mengandung button tersebut. Ketika contoh sebelumnnya menjalankan suatu fungsi, perintah
JavaScript juga sah. Kalau lebih dari satu perintah, tiap perintah harus dipisahkan dengan
suatu titik koma.
TIP
Praktek pemrograman yang baik adalah menggunakan
fungsi karena mereka membuat kode lebih mudah dibaca
dan dapat digunakan kembali.
NOTE
Sampai suatu dokumen HTML selesai di muat ke window
yang mengandung tag <BODY></BODY>, suatu window
tidak mengandung penanganan event.
Berikut ini adalah daftar dari penanganan event yang didukung oleh JavaSCript:
 onBlur.JavaScript menjalankan penanganan event ini ketika pemakai meninggalkan

field yang menyebabkan kehilangan fokus.
 onChange. dijalankan ketika user meninggalkan field dan terjadi perubahan nilai
object tersebut.
 onClick. event onClick terjadi ketika pemakai klik pada window atau link..
 onFocus. event ini terjadi ketika suatu form mendapatkan fokus.
36
Page 90 / 197
 onLoad. event ini terjadi ketika browser selesai memuat suatu dokumen atau semua
frame didalam tag <FRAMESET>.
 onMouseOver. event ini terjadi ketika mouse bergerak melewati object dari luar object
tersebut. Rutin JavaScript harus mengembalikan true untuk status dan properti
defaultStatus yang ditentukan..
 onSelect. event ini terjadi ketika pemakai melakukan select text pada text area..
 onSubmit. terjadi ketika user submit suatu form. Jika JavaScript mengembalikan
false, form tersebut tidak akan di submit, nilai lainnya atau tidak ada nilai balik,
membuat form di submit.
 onUnload. event ini terjadi ketika dokument di exit.
Penanganan Event adalah bagian dari berbagai object. Beberapa object mendukung lebih dari
satu penanganan event, dan beberapa penanganan event terjadi pada banyak objek. Tabel.8
menunjukkan hubungan antara penanganan event dan objek-objek.
Table 8. Hubungan antara penanganan event dan objek.
Objek Penanganan Event

button onClick
checkbox onClick
form onSubmit
link onClick, onMouseOver
radio onClick
e t
reset onClick
a N
select
r
onBlur, onChange, onFocus
d
submit onClick
e n
text
H
onBlur, onChange, onFocus, onSelect
textarea
window
By
onBlur, onChange, onFocus, onSelect
onLoad, onUnload
Contoh:

</SCRIPT>
e t
<FORM NAME="dropdown">
a N
d r
<SELECT NAME="site" onChange='buka();' ALIGN="left">
<OPTION SELECTED>Pilih tutorial yang diinginkan
<OPTION>HTML
e n
<OPTION>JavaScript
<OPTION>ASP H
<OPTION>PHP
<OPTION>Perl
</SELECT>
By
</FORM>
47
Page 101 / 197
JavaScript
DAFTAR ISI
 Pengenalan JavaScript
 Menggunakan Javacript
 Variabel dan Literal
 Ekspresi dan Operator
 Perintah Kendali dan Fungsi
 Dasar dari Objek
 Objek Built-In dan Fungsi
 Netscape Objects
 Objek form
 Window dan Frame
 Ringkasan
1. Pengenalan JavaScript
Apa JavaScript?
t
JavaScript adalah bahasa script untuk client-side (sisi-client) yang dapat digunakan untuk membuat
e
a N
halaman web menjadi interaktif dan lebih dinamis. JavaScript dikembangkan pertama sekali oleh
Netscape, merupakan bahasa script paling populer pada internet dan kompatibel dengan berbagai
browser.
d r
e n
Ringkasan apa dan untuk apa JavaScript:H
•
•
By
Javascript dirancang untuk menambah interaktivitas halaman-halaman HTML.
JavaScript adalah bahasa scripting (teks biasa – tanpa di compile) bebas lisensi dan mudah
untuk dipelajari dan digunakan dibanding bhs programming tradisional.
• JavaScript bekerja pada sisi client (client side). Browsers menterjemahkan statemen
(perintah) JavaScript yang disisipkan (embedded) secara langsung pada halaman HTML.
• JavaScript dirancang untuk digunakan pada halaman Web dan terintegrasi dengan HTML.
• Statemen JavaScript yang disisipkan pada halaman HTML dapat mengenal dan merespon
User Events seperti Mouse Clicks, Form Input, dan Page Navigation.
• JavaScript dapat digunakan untuk validasi data - Sebagai contoh, JavaScript dapat digunakan
untuk fungsi verifikasi keabsahan informasi ketika user mengisi form isian melalui halaman Web.
Dengan menempatkan JavaScript pada HTML, JavaScript dapat menterjemahkan setiap text yang
diisikan dan selanjutnya memberi peringatan (alert) melalui dialog box setiap user meng-input
informasi yang tidak valid. Atau dapat juga digunakan untuk melakukan aksi seperti: menjalankan
file audio, menjalankan applet, atau berkomunikasi dengan plug-in
Java adalah object-oriented language (bahasa berorientasi objek) sedangkan JavaScript adalah object-
based language (bahasa yang didasarkan objek). Perbedaannya sangat mendasar seperti: Java sebagai
bahasa object-oriented mempunyai sifat dan kemampuan seperti: inheritance, encapsulation,
overloading dan polymorphism sedangkan JavaScript tidak.
Page 102 / 197

Perbedaan keduanya dapat dibandingkan pada tabel dibawah ini.

JavaScript Java
Diinterpretasi (bukan compiled) oleh client. Di Compile pda server sebelum dieksekusi pada client.
Kodenya berintegrasi dalam dokumen HTML Hasilnya berupa Applet, diakses dari halaman HTML
Jenis data variable tidak dideklarasi (loose typing). Jenis data Variable harus dideklarasi (strong typing).
Bekerja sebatas pada elemen HTML Lebih dari sekedar elemen dokumen HTML (misalnya
multimedia)
Mampu mengakses objek dan fungsionalitas browser Tidak mampu mengakses objek dan fungsionalitas
browser
Perlu diketahui bahwa JavaScript versi Microsoft yang disebut sebagai "JScript", mempunyai
beberapa perbedaan yang membuatnya tidak sepenuhnya kompatibel dengan JavaScript orisinil.
2. Cara menggunakan JavaScript
Kode JavaScript ditempatkan didalam file HTML, dengan demikian kode JavaScript dapat dibuat
dengan cara yang sama membuat HTML yaitu menggunakan editor teks seperti WordPad ataupun
NotePad.
e t
Ada dua cara memasukkan JavaScript dalam dokumen HTML : a N
d r
e n

H
Menyisipkan kodet JavaScript didalam tag <SCRIPT>...</SCRIPT>
2.1 Menangani Event By

Menangani Event akan mengubah halaman yang static menjadi lebih dinamis. Event adalah hasil terhadap aksi
yang dilakukan oleh pemakai, seperti klik pada mouse, klik pada tombol submit di suatu form, dan keluar dari
halaman. JavaScript menggunakan Event Handlers untuk merespon Event.
Event Handlers telah ditulis kedalam berbagai jensi tag HTML dan tidak diperlukan lagi tag
<SCRIPT>. Sebagai contoh, berikut ini adalah contoh kombinasi HTML dan JavaScript untuk
memberi pesan bagi user.
<HTML>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
Bentuk "onClick" adalah Event Handler, sebagai atribut dari tag <INPUT> dalam suatu HTML.
Sedangkan kode JavaScript berda dalam tanda petik yaitu: "alert('Terimakasih')"
Event-Event
Kebanyakan (tidak semua) element-elemen pada halaman web merespon thdp interaktivitas
user (seperti: keystrokes, mouse clicks) dengan membuat events
Handlers dapat ditempatkan pada elemen form HTML
Page 103 / 197

Contoh 2 Event handler :
 <form method="post" action="">

name="myButton"
value="Click me"
onclick="alert('You clicked the button!');">
</form>
 name : dapat digunakan oleh kode JavaScript lain

 value : yang muncul pada button (yaitu: “Click me”)
 onclick : nama event yang di handle
 Nilai dari elemen onclick adalah kode JavaScript code yang di execute yaitu
"alert('You clicked the button!');"
Kapitalisasi
JavaScript adalah case sensitive (HTML tidak case sensitive)
 Sehingga sering terlihat onclick di ganti hurufr bersar menjadi onClick untuk
memudahkan dibaca
Catatan:
 Karena ada tanda petik didalam tanda petik maka diperlukan tanda petik tunggal
dan dobel
e t
a N
Event-event Umum
d r
e n
– H
• Kebanyakan elemen HTML menghasilkan even berikut:
onClick -- elemen form untuk di click
–
–
–
By
onDblClick -- elemen form di click dua kali secara berturutan (dobel click)
onMouseDown – tombol mouse ditekan saat berada diatas elemen form
onMouseOver -- mouse digerakkan diatas elemen form
– onMouseUp -- tekanan tombol mouse dilepas sementra berada diatas elemen form
Contoh 3: Rollover sederhana
• Kode berikut akan mebuat teks Hello berwarna merah jika mouse dikenakan
padanya dan berwarna biru jika mouse dijauhkan
• Rollover dengan menggunkan Image:
<img src="../Images/duke.gif"
width="55" height="68"
onMouseOver="src='../Images/duke_wave.gif';"
onMouseOut="src='../Images/duke.gif';">
Page 104 / 197

Load Document body User me-load onLoad

halaman dalam
browser
Unload Document body User exits dari onUnload
halaman
image atau window
Abort Images User meng-abort onAbort

saat load image
KeyDown Documents, images, User menekan suatu OnKeyDown
links, text areas key
KeyUp Documents, images, User melepas tekanan OnKeyUp
links, text areas pad key
KeyPress Documents, images, User menekan dan onKeyPress
links, text areas menahan key
Change Text fields, text areas, User mengganti nilai onChange
select lists elemen
MouseDown Documents, buttons, User menekan OnMouseDown
links tombol mouse
MouseUp Documents, buttons, User melepas OnMouseUp
links tekanan tombol
mouse
N et
Click Buttons, radio a
User meng-click pada
r onClick
buttons, checkboxes,
n d elemen form atau link
buttons, links
H e
submit buttons, reset
By
MouseOver Links User menggerakkan OnMouseOver
kursor stas link
MouseOut Areas, links User menggerakkan OnMouseOut
kursosr menjauhi
image map atau link
Select Text fields, text areas User memilih field onSelect
dari elemen form
input
mengerakkan window
Resize Windows User atau script me- OnResize
resize window
DragDrop Windows User men-drop suatu onDragDrop
object pada browser
window
Focus Windows dan semua User memberi fokus OnFocus
elemen form elemen input
Blur Windows dan semua User mengerakkan OnBlur
elemen form focus ke elemen lain
Reset Forms User meng-click onReset
Reset button
Submit Forms User meng-click onSubmit
Submit button
<html>
Page 105 / 197

<head>
</head>
<body>
<FORM>
<SELECT onChange=
</SELECT>
</FORM>
<br>
<form method="post" action="">
name="myButton"
value="Click me"
onClick="alert('You clicked the button!');">
</form>
e t
</body>
</html> a N
d r
e n
H
By
Page 106 / 197

Kebanyakan kode JavaScript dipmapat didalam tag <script> seperti diperlihatkan contoh dibawah
ini:
Contoh: Menulis teks pada halaman
<html>
<body>
document.write("Hello World!")
</script>
</body>
</html>
Car penulisan lain dari tag script dan atributnya adalah sbb:
<SCRIPT LANGUAGE="javaScript">
</SCRIPT>
Kode pada contoh diatas akan menghasilkan keluaran pada halaman HTML sbb:
Hello World!
Penjelasan:
• Gunakan tag <script> dan juga atribut yang menunjukkan bahasa script yang digunakan
<script type="text/javascript"> atau <SCRIPT LANGUAGE="javaScript">
•
e t
Perintah untuk menuliskan sesuatu pada halaman adalah: document.write
a N
d r
• Kemudian tutup dengan tag <script>
e n
</script> H
Penempatan JavaScript By
Ada beberapa cara penempatan kode JavaScript didalam halaman HTML.
Scripts yang ditempatkan pada bagian body akan dieksekusi sementara halaman diload.
Scripts yang ditempatkan pada bagian head akan dieksekusi jika dipanggil.
Contoh
Bagian Head Bagian Body

Script berupa fungsi (message) ditempatkan di bagian Scipt dikesekusi begitu halaman di load
head, kemudian fungsi dipanggil dipanggil (eksekusi)
pada bagian body.
<html> <html>
<head> <head>
<script type="text/javascript"> </head>
function message()
{ <body>
alert("This alert box was called
with the onload event") <script type="text/javascript">
} document.write("This message is
</script> written when the page loads")
</head> </script>
<body onload="message()"> </body>

</html>
</body>
Page 107 / 197

</html>
Script External
Script juga dapat ditempatkan sebagai file tersendiri (file dengan ekstensi .js) seperti berikut:
<html>
<head>
</head>
<body>
</script>
<p>
The actual script is in an external script file called "xxx.js".
</p>
</body>
</html>
Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga untuk menghindari kesalahan pada
browser tersebut, anda perlu mengetikkan script diantara tag komentar HTML:

e t
Catatan
a N
d r
Ingat, selalu mengetik JavaScript diantara baris komentar sehingga
n
browser non Java dapat mengabaikannya.
e
H
3. Variabel dan Literal
By
 Number, baik bilangan nyata (real) maupun bilangan bulat (integer) (contoh 4.156 dan 39)
 String (contoh "ini adalah JavaScript")
 Logical (Boolean) dengan nilai true dan false
Walaupun dengan jumlah tipe data yang sedikit, tetapi cukup untuk unjuk kerja JavaScript. Perlu diperhatikan
bahwa tidak ada perbedaan antara tipe integer dengan real, keduanya memiliki tipe yang sama yaitu number.
JavaScript tidak menyediakan tipe data khusus untuk data tanggal. Tetapi memiliki beberapa fungsi dan object
date yang dapat digunakan untuk melakukan manipulasi data tanggal.
Mendefinisikan Variabel
Aturan penamaan variabel pada JavaScript adalah nama harus dimulai dengan suatu huruf atau garis bawah (_)
dan huruf selanjutnya dapat berupa angka (0-9), huruf besar (A-Z) atau huruf kecil (a-z), garis bawah. Berikut
ini adalah contoh penamaan variabel yang sah:
First_Name
t99
_name
Page 108 / 197

Catatan
JavaScript tidak memeriksa spelling dari nama variabel. Tetapi
programmer sebaiknya menggunakan spelling yang benar untuk
memudahkan proses pembacaan dan pencarian kesalahan.
Batasan lainnya dalam pemberian nama variabel adalah tidak boleh sama dengan cadangan kata pada
JavaScript. Tabel 1 adalah daftar dari cadangan kata pada JavaScript.
abstract extends int super

do in short
e t while
double instanceof static
a N with
else
d r
e n
H
Tidak semua kata dalam Table 1 digunakan oleh JavaScript dewasa ini; dan beberapa diantara dicadangkan
untuk pemakaian yang akan datang. Cadangan Kata tidak boleh d digunakan untuk nama variabel, nama fungsi,
nama metode, dan nama object
By
Variabel dalam JavaScript dapat menyimpan semua tipe data yang sah, dan tidak diperlukan suatu deklarasi tipe
data. Pada script yang sama, suatu variabel dapat diset ke type data yang berbeda dalam suatu deklarasi tunggal.
Berikut ini deklarasi variabel yang sah:
temperature =
temperature = "The temperature is"
temperature = "The temperature is " +
Karena JavaScript sangat longgar tentang tipe, sehingga menyediakan beberapa fungsi untuk melakukan
manipulasi data string dan nilai numerik.
 variabel Global
 variabel Local
Variabel lokal digunakan didalam suatu fungsi dan ruang linkupnya terbatas pada fungsi tersebut. Untuk
mendeklarasikan suatu variabel lokal, harus diawali dengan var, seperti contoh berikut ini:
Page 109 / 197

var MaxValue=0
JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel global. Walaupun
JavaScript memperbolehkan anda menggunakan nama variabel yang sama untuk local maupun global, tetapi
adalah praktek yang tidak disarankan.
TIP
Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu
variabel global, deklarasikan semua variabel global tersebut pada awal
dari script.
Literal
Sebagai lawan dari variabel, literal mewakili nilai baku yang digunakan dalam JavaScript. JavaScript
mendukung literal berikut:
 Integer literal
 Floating point literal
 Boolean literal
 String literal
 Special character
Integer dapat dalam basis desimal (basis 10), hexadesimal, dan oktal. Suatu nilai desimal adalah semua angka
yang tidak diawali dengan nol (seperti 4, 89, atau 57). Suatu angka yang diawali dengan nol, adalah berbasis
e t
oktal (seperti 04, 065, atau 0145). Suatu bilangan dinyatakan dalam basis hexadesimal diawali dengan 0x atau
0X (seperti 0xff, 0X44, atau 0xAE).
a N
d r
Suatu literal floating-point terdiri dari komponen: suatu desimal bulat, suatu decimal berkoma (.), suatu desimal
n
pecahan, dan eksponen. (seperti 1.23 or 44.6389) atau dalam notasi scientific (3.6E-8, .4E12, or -2.7E12).
e
H
Setiap literal floating-point literal minimal memiliki satu digit dengan satu desimal atau eksponen.
By
Literal Boolean adalah true atau false.
Literal String dapat diapit oleh petik tunggal ( ' ) atau petik ganda ( " ). Tanda petik awal dan akhir harus sama,
seperti contoh berikut:
"a double quoted literal"
'a single quoted literal'
TIP
Ketika anda menulis event handle, apit string dengan petik tunggal,
karena petik ganda dibatasi untuk nilai atribut pada HTML
Literal string dapat juga mengandung karakter khusus untuk kendali baris Table 2 adalah daftar dari karakter
khusus dan fungsi-fungsinya.
Table 2. Karakter khusus JavaScript.
Keterangan Spesial Karakter

Backspace \b
Form feed \f
Newline \n
Page 110 / 197

Carriage return \r
Tab \t
Tanda backslash (\) adalah karakter escape pada JavaScript. Ketika digunakan pada akhir dari suatu baris, akan
berfungsi sebagai character penyambung baris. Ketika diikuti oleh karakter lain, karakter escape tersebut akan
kehilangan fungsi khususnya. Dalam JavaScript, programmer mengunakan backslash untuk escape backslash
lainnya, suatu petik tunggal, dan suatu petik ganda.
4. Ekspresi dan Operator

Literal dan variabel dihubungkan oleh operator, hasil dari pernyataan tersebut adalah ekspresi. JavaScript
menyediakan berbagai operator yang memungkinkan programmer menulis sejumlah ekspresi dari yang paling
sederhana sampai yang paling sulit.
 Assignment operator
 Bitwise operator
 String operator
JavaScript memiliki operator binari maupun unari. Suatu operator binari memiliki format.
e t
operand1 operator operand2
a N
d r
Sebagai contoh , 9 * 7 atau temp = 24 adalah ekspresi dengan operator binari.
e n
Operator unari memiliki dua format:
H
operand operator
By
atau
operator operand
Sebagai contoh ekspresi mengunakan operator unari adalah ++y atau y++.
Assignment Operator
Operator pemberi nilai (=) adalah suatu operator binari yang digunakan untuk memberi nilai ke operand di sisi
kiri (biasanya berupa suatu variabel) yang didasarkan pada nilai operand sebelah kanan (seperti FirstName =
"John" atau x = y * 9). Table 3 adalah daftar singkat operator pemberi nilai.
Table 3. Daftar Operator assignment
Shorthand operator Artinya Contoh

x += y x = x + Y x +=
x -= y x = x - y x -=
x *= y x = x * y x *=
x /= y x = x / y x /=
x %= y x = x % y x %=
x <<= y x = x << y x <<=
Page 111 / 197

x >>= y x = x >> y x >>=

x >>>= y x = x >>> y x >>>=
x &= y x = x & y x &= 0xC0
x |= y x = x | y x |= 0x0F
x ^= y x = x ^ y x ^= 0XFF
Catatan
Bagi yang tidak familiar dengan pemrograman C, hati-hati dengan
perbedaan antara assignment operator (=) dan comparison operator
(==)
Arithmetic Operator
Sesuai dengan fungsinya operator aritmatika melakukan operasi perhitungan aritmatika terhadap suatu nilai
numerik baik dalam literal maupun variabel. JavaScript mendukung operator standard aritmatika untuk
penjumlahan (+), pengurangan (-), perkalian (*), dan pembagian (/). Juga memiliki operator modulus (%),
increment (++), decrement (--), dan unary negation (-).
Operator modulus (%) adalah suatu operator binary yang mengembalikan nilai sisa dari suatu pembagian bulat
operand1 terhadap operand2. Sebagai contoh, hasil dari 27 % 6 adalah 4.
Operator increment unary adalah menambah nilai satu ke variabel operand, sedangkan operator decrement unary
mengurangi satu dari padanya. Bagaimanapun, nilai yang dikembalikan tergantung dari posisi operator terhadap
operand Jika operator berada didepan (++x atau --x), nilai yang dikembalikan adalah x+1 atau x-1. Ketika
e t
operator dibelakang(x++ or x--), nilai x dikembalikan sebelum ditambah atau dikurang.
a N
d r
Operator khusus unari arithmetic adalah operator unari negation operator. Ia membalikan tanda dari nilai yang
diberikan pada suatu variabel. Sebagai contoh, jika x = -7, -x mengubah nilai menjadi 7.
e n
Bitwise Operator
H
By
Untuk programmer yang perlu menangani bit. JavaScript menyediakan satu set dari operator bitwise. Untuk
operator ini, JavaScript melakukan konversi terhadap operand menjadi integer 32-bit sebelum melakukan
operasi padanya. Operator logika bitwise adalah
 Bitwise AND (&), akan mengembalikan nilai dari logika AND antara sepasang bit. Sebagai contoh ,
0x0f & 0x0a mengembalikan 0x0a.
 Bitwise OR (|), akan mengembalikan nilai dari logika OR antara setiap pasangan dari bit. Sebagai
contoh, 0x05 | 0x0a mengembalikan 0x0f.
 Bitwise XOR (^), akan mengembalikan nilai dari logika exclusive OR between antara tiap pasangan
bit. Sebagai contoh, 0x0f ^ 0x0a mengembalikan 0x05.
JavaScript juga menyediakan satu set bitwise untuk operasi shift operand1 terhadap jumlah yang ditentukan di
operand2. Operand ini adalah
 Shift left (<<), akan mengeser bit ke kiri dengan jumlah tertentu. Bit yang melewati batas kiri akan
diabaikan, dan suatu bit nol akan digeser dari kanan. Sebagai contoh, 0x0f << 2 mengembalikan
0x3c.
 Sign propagating shift right (>>) mempertahankan bit tanda dari nilai ketika melakukan geser ke kanan
sesuai dengan jumlah yang ditentukan. Bit yang tergeser melewati bata kanan akan diabaikan, kecuali
bit tanda, bit nol akan digeser dari kiri.. Sebagai contoh, 10 >> 2 mengembalikan 2 dan -10 >> 2
mengembalikan -2.
 Zero-fill right shift (>>>) sama seperti >>, cuma tidak mempertahankan bit tanda ketika dilakukan
pergeseran sesuai dengan jumlah yang ditentukan.
Logical Operator
Page 112 / 197

Operator logika membutuhkan operand dengan nilai Boolean (true atau false) dan mereka akan mengembalikan
suatu nilai logika. Operator logika adalah sebagai berikut :
 Logical AND (&&)

 Logical OR (||)
 Logical NOT (!)
Operator logika NOT adalah suatu unary operator yang mempertahankan nilai ekspresi.
Comparison Operator
Operator perbandingan diterapkan pada perbandingan pada data numerik dan data string serta tidak dapat
dilakukan pada nilai Boolean. Masing-masing operand harus memiliki tipe yang sama: nemerik dibandingkan
dengan numerik atau string dengan string. Hasil dari perbandingan adalah sautu nilai Boolean. Operator
perbandingan adalah:
 Equal (==)
 Not equal (!=)
 Greater than (>)
 Greater than or equal to (>=)
 Less than (<)
 Less than or equal to (<=)
JavaScript juga mendukung ekspresi secara kondisi (conditional expression) yang mana berbentuk.
e t
(condition) ? true_value : false_value
a N
d r
e n
Jika kondisi adalah benar, ekspresi memiliki dari true_value. Sebaliknya memiliki nilai dari
H
false_value. Seperti saudaranya yang berbasis bahasa C, ekpresi kondisi adalah ekspresi standard dan dapat
digunakan dimana saja, dan dapat dilihat sebagai berikut :
By
battery_status = (voltage > 1.3) ? "good" : "weak"
String Operator
Operator string (+) mengabung dua nilai string dan mengembalikan satu string dimana merupakan hasil
gabungan dari keduanya. Sebagai contoh :
"Java" + "Script"
Menghasilkan
"JavaScript"
Operator shorthand += mengabung string kiri dengan string dikanan operand dan memberikan nilai baru pada
operand disebelah kiri.
Urutan operasi
Page 113 / 197

Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu operator, urutan operasi dari operator
menentukan nilai hasil evaluasi. Dengan menggunakan tanda kurung, programmer dapat mengatur aturan
tersebut. Table .4 adalah urutan prioritas operasi dari yang paling rendah sampai yang paling tinggi.
Table 4. Prioritas urutan operasi dari prioritas rendah sampai tinggi.
Keterangan Operator
Assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=
Conditional ?:
Logical OR ||
Logical AND &&
Bitwise OR |
Bitwise XOR ^
Bitwise AND &
Equality == !=
Relational < <= > >=
Bitwise shift << >> >>>
Addition/subtraction +-
Multiply/divide */%
Negation/increment ! ~ - ++ -
Call, member () []
e t
a N
d r
5. Struktur Kendali dan Fungsi
e n
H
Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan perintah-
By
perintah yang dapat mengatur aliran dari informasi. Berdasarkan hasil komputasi yang telah dilakukan,
JavaScript akan membuat keputusan jalur mana yang akan dieksekusi. Kita akan membahas tentang perintah
conditional dan loop dalam JavaScript.
Walaupun semua kode harus ditulis dalam penanganan event, tetapi hal ini adalah praktek pemrograman yang
kurang baik. Sebagai pengantinya, gunakan fungsi, kode akan menjadi lebih modular dan dapat digunakan
kembali (reuseable).
Perintah kondisi
Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan bagian sebelumnya. JavaScript memiliki
suatu perintah kondisi if. Tata cara penulisan dari perintah kondisi tersebut adalah sebagai berikut:
if (condition) {
statements1 }
[else {
statements2}]
condition adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean true atau false.
contoh pemakaian statement if:
Page 114 / 197

if (n>3) {
status = true
if (j != n) j = 0 }
else j = n
Perhatian
Bagi programmer C harus berhati-hati dengan evaluasi kondisi pada
JavaScript. Suatu kondisi numerik yang mengasilkan nol adalah tidak
sama dengan suatu Boolean true pada JavaScript, dan sebaliknya suatu
nilai bukan nol tidak sema dengan Boolean false. Pada JavaScript hasil
dari suatu kondisi harus data type Boolean.
Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan. Contoh berikut adalah perintah yang benar:
if (a==b) j=0
else j=1
Perintah Perulangan
e t
JavaScript mendukung dua struktur loop; perintah for dan perintah while. Untuk control pada struktur loop,
JavaScript menyediakan perintah break dan continue.
a N
Perintah for d r
e n
H
Perintah for pada JavaScript sama dengan yang ada di Java dan C. Perintah for mengulang suatu loop sampai
By
kondisi menghasilkan evaluasi true atau loop keluar dengan perintah break . Syntax untuk perintah for
adalah sebagai berikut :
for ([initial-expression;] [condition;] [increment-expression])

{
statements
Urutan proses untuk perintah for adalah sebagai berikut:
1. Interpreter menjalankan initial-expression. Ekspresi ini mementukan nilai yang diperlukan

untuk kendali perulangan.
2. Kemudian interpreter memeriksa condition. Jika true, kendali dilanjutkan ke langkah selanjutnya.
Jika false, kendali diarahkan ke perintah setelah perulangan.
3. Kemudian interpreter menjalankan increment-expression, yang mana melakukan update
terhadap variabel-variabel yang digunakan untuk kendali perulangan.
4. Kemudian statement dijalankan dan, jika ditemukan suatu break atau continue, kendali kembali ke
langkah 2.
Contoh :
<HTML>
Page 115 / 197

<HEAD>
for (i=1; i<=10; i++) {
sq=i*i
document.write("number: " + i + " square: " + sq +

"<BR>")
// akhor dari penyembunyiang -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Hasil :
number: 1 square: 1
number: 2 square: 4
e t
number: 3 square: 9
a N
d r
e n
number: 8 square: 64 H
By
Perintah while
Perintah while terus mengulangi loop selama kondisi memiliki nilai true. Syntax untuk perintah while adalah
sebagai berikut :
while (condition) {
statements
Test kondisi terjadi pada perulangan while yang pertama kali dan pada akhir dari setiap loop. Ketika hasil test
mengembalikan false, kendali dilewatkan ke perintah berikutnya setelah loop. Perintah for yang diubah ke
suatu while loop.
Contoh:
<HTML>
<HEAD>
Page 116 / 197

i=1
while (i<=10) {
sq=i*i
document.write("number: " + i + "square: " + sq +

"<BR>")
i++
// end script hiding -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Hasil:
e t
number: 1 square: 1
a N
number: 2 square: 4
d r
number: 3 square: 9
e n
number: 5 square: 25 H
By
Perintah break
Perintah break menghentikan for atau while loop dan mengembalikan kendali ke perintah berikutnya yang
mengikuti loop. Contoh berikut menggambarkan bagaimana menggunakan perintah break:
i=0
while (i<10) {
if (i==3)
break
i++
Perintah continue
Page 117 / 197

Seperti perintah break, perintah continue menghentikan interasi tersebut untuk suatu for atau while
loop; Tetapi tidak keluar dari loop; Tetapi melakukan interasi berikutnya.
 Pada suatu while loop, kendali dilewatkan ke condition.

 Pada suatu for loop, dilewatkan ke increment-expression.
Berikut ini memperlihatkan bagaimana menggunakan perintah continue:
i=0
while (i<10) {
if (i==3)
continue
i++
Perintah function
Suatu function adalah sekumpulan dari perintah JavaScript yang akan mengerjakan tugas tertentu. Fungsi ini
dapat dipanggil dari segala titik pada dokumen tersebut dan dipanggil dari event. Format dari perintah
function adalah sebagai berikut:
e t
a N
function FunctionName(argument list) {
d r
e n
statements
H
}
Contoh:
<HTML>
By
<HEAD>

</SCRIPT>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
TIP
Karena browser membaca perintah tersebut diapit oleh
<HEAD>...</HEAD> duluan; adalah praktek yang baik untuk
memesan semua variabel global dan semua fungsi pada HEAD dari
dokumen. Hal ini mencegah kesalahan seperti non-initialized variables
dan undefined functions
Argumen dari suatu fungsi dapat berupa sembarang tipe data atau objek JavaScript. Objek array
functionName.argument[i] dan functionName.arguments.length mengandung nilai jumlah
argumen yang dikirim ke fungsi, argumen acuan dengan mendeklarasikan nama-nama variabel. Hal ini
memungkinkan sejumlah argumen dilewatkan ke fungsi sebagai suatu argument array. Contoh berikut
menunjukkan pemakaian dari suatu variable argument list.
Contoh :
<HTML>
<HEAD>
e t
a N

</SCRIPT>
</BODY>
</HTML>
Contoh diatas menggambarkan beberapa hal yang penting dari suatu fungsi. Suatu variabel global diinisialisasi
pada bagian <HEAD>. Perintah var mendeklarasikan i sebagai suatu variabel lokal pada fungsi. Juga
ditunjukkan bagaimana perintah return dapat digunakan untuk memastikan fungsi dijalankan dengan baik.
Perintah return juga dapat mengembalikan string atau nilai numerik, sebagaimana yang ditunjukkan oleh contoh
dibawah ini:
e t
function RetExam(a, b) {
a N
d r
var x=0
e n
x = a+b H
return x By
}
TestResult=RetExam(5, 7)
Komentar
 Komentar banyak baris yang diawali dengan suatu /* dan diakhiri dengan suatu */
Komentar single-line, dari C++, memperlakukan semua yang dari double slash ke belakang sebagai suatu
komentar, berikut ini adalah contoh yang sah untuk suatu komentar single-line :
// this is a comment
if (a=b) c=1 // also a valid comment
Komentar banyak baris mengikuti aturan pada C dan dapat digunakan untuk menandai perintah JavaScript,
sebagaimana yang ditunjukkan oleh contoh sebelumnya, adalah sutu komentar HTML, baris terakhir
membutuhkan dua slash untuk menjaga JavaScript dapat menginterprestasikan baris tersebut.
Page 120 / 197

6. Dasar dari Objek

JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan merupakan bahasa object-oriented
programming (OOP). Perancang JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru; tetapi
bertujuan membuat suatu bahasa script untuk mengintegrasikan objek yang telah dibuat dengan suatu bahasa
OOP kedalam dokumen HTML. Selanjutnya Javascript tidak memiliki encapsulation , inheritance, dan
abstraction seperti pada C++ atau Java.
Tetapi class pada JavaScript menyediakan properti dan metode untuk membuat objek.
Objek dan Properti
Berikut ini adalah notasi yang digunakan oleh JavaScript untuk menggambarkan suatu objek dan propertinya:
ObjekName.PropertyName
Sebagai contoh, objek mydog memiliki properti sebagai berikut :
mydog.breed="small mut"
mydog.age=5
mydog.weight=25
e t
Objek juga dapat menggunakan acuan array dengan menggunakan nama propertinya sebagai index:
a N
d r
mydog["breed"]="small mut"
e n
mydog["age"]=5
H
mydog["weight"]=25
By
Juga dapat mengunakan acuan array dengan index secara numerik:
mydog[0]="small mut"
mydog[1]=5
mydog[2]=25
Defining Metodes
Suatu fungsi yang berasosiasikan objek acuan adalah metode. format berikut meng-asosiasikan fungsi dengan
suatu objek:
ObjekName.MetodeName = function_name
Kemudian metode tersebut berkerja dengan suatu objek:
ObjekName.MetodeName(parameters);
Page 121 / 197

Bekerja dengan Objek
Untuk melakukan manipulasi pada objek membutuhkan fasilitas tambahan dari JavaScript yaitu dengan perintah
for...in , perintah with , operator new, dan kata kunci this.
Perintah for...in
Perintah for...in menyediakan suatu mekanisme perulangan untuk iterasi melalui semua properti dari suatu
objek. Dengan format adalah sebagai berikut :
for (variable in Objekname) {
statements
Contoh berikut mengunakan perintah ini untuk menampilkan semua properti dalam suatu objek dan nilai
asosiasinya:
function ListProperti(obj, obj_name) {
var result = ""

e t
for (var i in obj) { a N
d r
n
result += obj_name + "." + i " = " + obj[i] + "<BR>"
e
} H
return result By
PropList = ListProperti(mydog, "mydog")
Pada contoh sebelumnya, variabel i adalah nama dari property, kemudian mengindeks objek dengan
menggunakan property name_obj[i].
Perintah with
Pada beberapa situasi suatu objek perlu dibuat acuan beberapa kali. Perintah with membuat acuan ke suatu
objek default yang berada dalam kurung. Tata cara penulisannya adalah sebagai berikut:
with (ObjekName) {
statements
Objek math berikut merupakan contoh pemakaian dari perintah with:
var r =
Page 122 / 197

var x =
with (Math) {
r = p / (1 - cos(a))
x = (2 * p * cos(a)) / (sin(a) * sin(a))
Operand new
Untuk suatu tipe objek user-defined, operand new berfungsi membuat suatu instance baru
dari objek. Tata cara penulisannya adalah sebagai berikut:
ObjekName = new ObjekType(param1 [, param2,] É [, paramN])
Kata kunci this
this mengacu pada objek yang sekarang. Pada bagian selanjutnya akan ditunjukkan
bagaimana pemakaian kata kunci ini dalam penulisan function dan metode.
Membuat Objek baru

e t
a N
r
Walaupun JavaScript memiliki sejumlah besar objek yang telah didefinisikan, developer
d
yaitu: e n
dapat membuat objeknya sendiri. Untuk membuat suatu objek baru diperlukan dua langkah
H
By
1. Mendefinisikan jenis objek dengan membuat suatu fungsi.
2. Membuat instances dari objek tersebut dengan menggunakan operand new.
Fungsi tersebut mendefinisikan jenis objek, properti, dan metode. Sebagai contoh untuk
membuat suatu objek dog:
function dog(breed, age, weight) {
this.breed = breed;
this.age = age;
Untuk menggunakan fungsi diatas, operand new diperlukan untuk mendefinisikan suatu
instance baru untuk objek tersebut. Sebagai contoh:
mydog = new dog("small mut", 5, 25);
Page 123 / 197

Selain type data yang umum (string, numeric, and Boolean), objek yang lain dapat juga
menjadi properti dari suatu objek. Contoh menambah suatu nomor izin pada objek jenis dog,
nomor izib ini juga mengacu pada objek lain.
function doglicense(owner, phone_number) {
this.owner = owner;
this.phone_number = phone.number;
AZ123 = new doglicense("John Smith", "999-9999");
Jenis Objek dog perlu dimodifikasi untuk mengikutsertakan informasi baru tersebut:
function dog(breed, age, weight, license) {
this.breed = breed;
this.age = age;
this.weight = weight; e t
a N
this.license = license;
d r
}
e n
H
By
mydog = new dog("mixed mut", 5, 25, AZ123);
Untuk mengacu pada pemilik mydog, syntax berikut diperlukan
mydog.license.owner
CATATAN
Jika suatu property baru ditambahkan pada suatu objek
tanpa mengubah jenis objek, properti tambahan tersebut
hanya berpengaruh pada objek tersebut dan bukan pada
semua instances dari objek jenis yang sama.
CATATAN
Suatu variabel string atau suatu string literal adalah suatu
objek string. Metode string adalah asosiasi dengan objek
ini, dan akan didiskusikan pada bagian "Objek dan fungsi
built-in".
Mendefinisikan Array
Page 124 / 197

Tidak seperti bahasa lainnya, Java script tidak memiliki suatu tipe data array. Tetapi
bagaimanapun, fungsi yang sama dapat dengan membentuk suatu objek untuk melakukan
emulasi suatu array. Langkah pertama untuk mendefinsikan suatu objek array:
function MakeArray(n) {
this.length = n;
for (var i = 1; i <= n; i++)
this[i] = 0;
return this
Langkah berikutnya adalah mendefinisikan suatu instance untuk membentuk objek

MakeArray :
ExmpArray = new MakeArray(20);
Ketika anda memberikan nilai pada suatu elemen array, hal tersebut menyerupai memberi
e t
nilai pada suatu type data array. Perbedaannya adalah array ini dimulai dari satu dan bukan
nol, karena nol mendefinisikan panjang dari array:
a N
d r
ExmpArray[1] = "test1" e n
H
By
ExmpArrya[2] = "another test"
7. Objek dan Fungsi Built-In

Objek dan fungsi yang akan dijelaskan pada bagian ini adalah bagian dari lingkungan
JavaScript, selanjutnya sangat tergantung pada jenis web browser. Adapun objek dan fungsi
tersebut adalah sebagai berikut:
 Objek string dan metode asosiasinya

 Objek Math dan metode asosiasinya
 Objek date dan metode asosiasinya
 Fungsi eval, parseInt, dan parseFloat
Objek String
Suatu string yang dipetik adalah suatu variabel string atau suatu properti string dari suatu
objek, segala sesuatu yang ditempatkan diantara petik adalah suatu string. Ada dua cara untuk
menggunakan suatu objek string:
1. stringName.propertyName
2. stringName.metodeName(parameters)
Page 125 / 197

Properti Object String
Object string hanya memiliki sebuah properti -length. Karena berupa properti, berikut ini
adalah acuan yang benar:
StringLength = stringVariable.length;
StringLength = mydog.name.length;
StringLength = "This is a string".length;
Metodee Objek String
Sejumlah besar metode adalah asosiasi dengan objek string. Disamping fungsi manipulasi
string yang normal, banyak diantaranya berfungsi membungkus string diantara tag HTML.
Berikut ini adalah daftar dari metode object string:
 anchor(nameAttribute). Dengan nameAttribute sebagai nilai dari parameter yang

dilewatkan ke metode, metode anchor mengurung text dengan tag <A></A>. Berikut
ini adalah contohnya:
document.write("Other Links".anchor("other_links"));
e t
a N

d r
big(). String di apit dengan tag <BIG></BIG>.

e n
blink(). String di apit dengan tag <BLINK></BLINK> .
bold(). String di apit dengan tag <B></B>.

 H
charAt(index). Metode ini mengembalikan huruf yang ditentukan oleh index,
By
dimana index adalah range 0 sampai stringName.length - 1. Jika index berada
diluar jangkauan, suatu null string akan dikembalikan.
 fixed(). String di apit dengan tag <TT></TT>.
 fontcolor(color). String di apit dengan tag <FONT COLOR="color"></FONT>.
Parameter color ditentukan dengan format rrggbb.
 fontsize(size). String di apit dengan tag <FONTSIZE=size></FONTSIZE>. Nilai
dapat berupa angka satu sampai tujuh, atau dapat perubahan secara relatif (+ atau -)
yang didasarkanpada ukuran font dasar yang ditentukan pada tag <BASEFONT>.
 indexOf(searchValue, [fromIndex]). Metode ini mengembalikan posisi index
dari string pertama yang ditemukan berdasarkan string searchValue. fromIndex
secara optional menentukan posisi awal pencarian. Jika pencarian tidak ditemukan
maka JavaScript mengembalikan -1.
 italics(). String di apit dengan tag <I></I>.
 lastOf(searchValue, [fromIndex]). Menyerupai indexOf, cuma pencarian
dilakukan dari arah belakang.
 link(hrefAttribute). String di apit dengan tag <A HREF=hrefAttribute></A>.
 small(). String di apit dengan tag <SMALL></SMALL>.
 strike(). String di apit dengan tag <STRIKE></STRIKE>.
 sub(). String di apit dengan tag <SUB></SUB>.
 substring(indexA, indexB). Metode ini mengembalikan subset dari suatu string,
yaitu dari posisi index A s/d indexB-1. Jika indexA sama dengan indexB
akan dikembalikan suatu null string.
Page 126 / 197

 sup(). String di apit dengan tag <SUP></SUP>.

 toLowerCase(). Metode ini mengubah string ke huruf kecil dan mengembalikannya.
 toUpperCase(). Metode ini mengubah string ke huruf besar dan mengembalikannya.
Objek Math
Object Math menyediakan suatu himpunan dari nilai-nilai standar matematika dan metode-
metode yang argumennya berupa himpunan dari operator matematika yang disediakan
dengan JavaScript. Tidak seperti object lainnya, object Math tidak membutuhkan suatu
instance dari object sebelum menggunakan metode objek math tersebut. Untuk memudahkan
pemasukkan nama dan pembacaan, metode Math sering diikat dengan perintah with. Syntax
untuk object Math adalah sebagai berikut:
1. Math.propertyName
2. Math.metodeName(parameters)
Properti Objek Math
Object Math memiliki delapan buah properti. Properti-properti ini ini mendefinisikan
berbagai konstanta matematika. Tabel 5. menunjukkan properti-properti tersebut dan nilai
perkiraannya.
t
Table 5. Properti-properti objek Math dan nilainya.
e
a N
Property Description
d r Approx. value
E Euler's constant
e n 2.718
LN2
H
Natural logarithm of 2 0.693
LN10
LOG2E By
Natural logarithm of 10
Base 2 logarithm of e
2.302
1.442
PI Ratio of circumference to diameter 3.14159
SQRT1_2 Square root of one-half 0.707
SQRT2 Square root of two 1.414
Metode Objek Math
Object Math memiliki sejumlah metode yang argumennya adalah himpunan dari operator
matematika:
 abs(number). Metode ini mengembalikan nilai absolut dari number.

 acos(number). Mengembalikan nilai arc cosinus dari number yang bernilai antara -1
and 1.
 asin(number). Mengembalikan nilai arc sinus
 atan(number). Mengembalikan nilai arc tangen dalam radian.
 ceil(number). Mengembalikan nilai integer berikutnya yang lebih besar atau sama
dengannnumber.
 cos(number). Mengembalikan nilai cosinus dari number (dalam sudut radian).
Page 127 / 197

 exp(number). Mengembalikan pangkat e dari number, dimana e adalah konstanta

Euler's.
 floor(number). Mengembalikan integer yang lebih kecil atau sama dengan the
number.
 log(number). Mengembalikan logaritma natural (base e) dari number, dimana
number adalah sembarang bilangan positif hasil ekspresi atau object. Jika number
berada diluar jangkauan maka nilai pengembalian defaultnya adalah
1.797693134862316e+308.
 max(number1, number2). Mengembalikan terbesar dari kedua number.
 min(number1, number2). Mengembalikan terkecik dari kedua number.
 pow(base, exponent). Metode ini melakukan pangkat base terhadap exponent.
Jika salah satunya bilangan imaginier, maka akan dikembalikan nol.
 random(). Hanya terdapat pada paltforms UNIX, yang mana mengembalikan suatu
pseudorandom number antara nol dan satu. Pada Netscape Navigator 3.0, metode
random() metode dapat digunakan pada semua platforms.
 round(number). Mengembalikan nilai dari number yang dibulatkan kebilangan
integer terdekat.
 sin(number). Mengembalikan nilai sinus dari sudut dalam radian.
 sqrt(number). Mengembalikan nilai akar dari bilangan non negatif, Jika diluar
jangkauan akan dikembalikan nol.
 tan(number). Mengembalikan nilai tangen dari sudut dalam radian.
Objek Date
e t
a N
Walaupun JavaScript tidak menyediakan suatu type data Date, tetapi menyediakan suatu
d r
objek Date yang mana menangani informasi date dan time. Semua tanggal adalah jumlah
e n
milidetik sejak January 1, 1970, 00:00:00. Akibatnya semua tanggal sebelum 1970 adalah
tidak sah. H
By
Objek Date membutuhkan suatu instance dari objek Date yang berkaitan dengan pemakaian
metode-metodenya. Instance dapat berupa suatu objek baru atau properti dari objek yang ada.
Ada empat cara untuk membentuk instance baru:
dateObjectName = new Date()
dateObjectName=new Date("month day, year

hours:minutes:seconds")
dateObjectName=new Date(year, month, day)
dateObjectName=new Date(year, month, date, hours, minutes,

seconds)
Membentuk suatu himpunan dari tanggal dan waktu ke tanggal dan waktu sekarang.
Mengosongkan time berarti memberinya nilai nol. Karena objek Date tidak mengandung
properti apa-apa, hanya ada satu format untuk metode Date:
dateObjectName.metodeName(parameters)
Page 128 / 197

Pengecualiaanya adalah UTC dan metode parse, yang mana adalah metode status dan
pemakaiannya
Date.UTC(parameters)
Date.parse(parameters)
Table 6 menjelaskan nilai yang akan dikembalikan oleh berbagai perintah get.
Table 6. Memisahkan informasi dalam objek Date.
metode Date Nilai yang dikembalikan

getDate() Day of the month
getDay() Day of the week
getHours Hour of the day
getMinutes Minutes in the hour
getMonth The month
getSeconds Seconds in the minute
getTime Milliseconds since 1/1/1970
getTimezoneOffset
e t
Offset between local time and GMT
getYear The year a N
d r
e n
Selain dapat menerima berbagai informasi dari object Date, metode pada Tabel 7
H
menunjukkan bagaimana mengubah informasi date.
By
Table 19.7. Setting informasi dalam objek Date.
metode Date Nilai yang sah

setDate(dayValue) 1-31
setHours(hoursValue) 0-23
setMinutes(minutesValue) 0-59
setMonth(monthValue) 0-11
setSeconds(secondsValue) 0-59
setTime(timeValue) >=0
setYear(yearValue) >=1970
Dua metode tambahan yang dapat digunakan untuk melakukan konvesi data tanggal ke suatu
nilai string, adalah sebagai berikut:
 toGMTString(). Metode ini meng-konversi date dalam GMT (Greenwich Mean

Time) dan mengembalikannya sebagai suatu string. Format sebenarnya tergantung
pada platform hardware.
 toLocaleString(). Mthod ini meng-konversi string ke format locale, yang mana
bervariasi berdasarkan setting.
Page 129 / 197

Objek Date juga memiliki dua metode statik untuk menangani string; hal tersebut memiliki
format Date.metode(). Metode-metode ini adalah sebagai berikut:
 parse(dateString). Metode ini melakukan konversisuatu string tanggal ke jumlah

detik sejak January 1, 1970, 00:00:00. Setting waktu adalah default. Tetapi juga
mendukung akhiran yang menentukan GMT oatau U.S. standard time zones.
 UTC(year, month, day [, hrs] [, min] [, sec]). Metode ini mengembalikan
jumlah milidetik sejak January 1, 1970, 00:00:00 Universal Time Coordinate (dengan
kata lain adalah, GMT).
Fungsi Built-In
JavaScript mendukung beberapa function built-in yang mana tidak berkaitan dengan object
tertentu. Berikut ini adalah function-function built-in adalah sebagai berikut:
 eval(string). Function eval meng-evaluasikan string, yang mana dapat berupa

ekspresi JavaScript, perintah, atau urutan dari perintah-perintah, dan mengembalikan
hasil. Beberapa contoh dari function eval adalah
var x =
var y =
var z = "if (x <= 9) (x*y) else (x/y);" e t

a N
document.write(eval("x + y / 4"), "<BR>")
d r
document.write(eval(z), "<BR>")
e n
H
 By
parseFloat(string). Fungsi ini mengurai string dan mengembalikan suatu nilai
floating point. Jika karakter pertama bukan suatu bilangan atau tanda, nilai nol akan
dikembalikan pada platform Windows, dan NaN (not a number) pada platforms lain.
 parseInt(string [, radix]). Fungsi parseInt mengurai string dan
mengembalikan suatu integer berdasarkan basis yang ditentukan. Nilai dari akar
tersebut adalah 8 untuk octal, 10 untuk desimal, dan 16 untuk hexadesimal.
 isNaN(testValue). Fungsi ini hanya ada pada platforms UNIX untuk dan
mengevaluasi testValue untuk menentukan apalah adalah NaN. Akan dikembalikan
true atau false
 escape("string"). Mengembalikan encoding ASCII dari suatu argumen dalam ISO
Latin-1 character set. string tersebut adalah suatu non-alpahnumeric string atau
property dari suatu object yang ada. Jika berupa suatu alphanumeric, akan dilewatkan
nilai ke output string tanpa melakukan encoding terhadapnya.
 unescape("string"). Mengembalikan karakter ASCII untuk %xx, atau hexadesimal
yang ditentukan dalam parameter string.
8. Objek Netscape
Sebagai tambahan kepada objek-objek JavaScript dan metode, Pengembang halaman Web
dapat mengakses objek-objek dan metode dalam Netscape browser. Bagian ini akan
membahas Objek Netscape Navigator dan metode-metodenya.
Page 130 / 197

Hirarki Objek Navigator
Netscape Navigator membangun suatu hirarki instance-instance yang berkaitan dengan

dokumen yang sedang diproses.
Hirarki ini penting untuk membuat acuan kepada object dan propertinya. Turunan dari suatu
object adalah properti dari objek orang tuanya. Karena semua objek adalah merupakan
turunan dari objek window , sehingga objek window sendirinya tidak memiliki acuan ke
objek maupun properti apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window
lain membutuhkan tambahan nama window kepada object acuan-nya.
e t
a N
Hal yang penting dari HTML Layout d r
e n
H
Untuk dapat menggunakan JavaScript secara benar membutuhkan pengertian bagaimana
By
Netscape Navigator memproses suatu dokumen HTML. Ketika suatu dokumen HTML di
muat, browser akan mulai melakukan proses terhadap baris pertama dari dokumen. Browser
membuat layout dari layar berdasarkan perintah HTML yang terdapat dalam dokumen
tersebut. Setelah layar selesai digambar, layar tidak dapat digambar ulang tanpa melakukan
proses terhadap dokumen baru. Bagaimana hal ini mempengaruhi frame dan window adalah
topik pada bagian berikutnya.
Sesuai dengan hal ini, maka instance dari suatu objek ada setelah proses dilakukan terhadap
baris HTML yang menghasilkan instance tersebut. Dengan kata lain JavaScript tidak dapat
mengacu pada suatu objek HTML seperti form, atau menjalankan suatu fungsi sampai
browser memproses perintah tersebut. Sebagai contoh, JavaScript tidak dapat mengacu pada
suatu objek form sampai browser memproses HTML untuk form tersebut. Demikian juga
dengan proses perubahan properti, setelah browser menggunakan properti dalam
menghasilkan layout window, maka perubahan properti setelah itu tidak memiliki efek
terhadap tampilannya.
Walaupun nampaknya keterbatasan tersebut berat, namun dengan pengertian yang baik
terhadap HTML proses dan JavaScript akan mengurangi frustasi. Prinsip utama yang perlu
diingat bahwa suatu dokumen HTML diproses secara berurut dan JavaScript adalah bagian
dari proses secara berurut tersebut.
Objek Window
Page 131 / 197

Objek window adalah orang tua dari semua object. Hal tersebut termasuk semua window dan
frame yang berada dalam suatu. Ketika browser mulai memuat suatu dokumen HTML, hal
tersebut dimulai dengan suatu instance dari objek window. Jika dokumen HTML membuat
suatu frame, informasi dari frame tersebut tersimpan dalam suatu objek frame array. Dengan
kata lain, membuka suatu window akan menghasilkan suatu anak dari objek window.
Kehebatan dari JavaScript adalah terletak pada kemampuan untuk melakukan utilisasi
properti dan metode dari objek window.
Bagian ini akan membahas properti dari objek window berikut :
 objek Location
 objek History
 objek Document
Diantara ketiga objek tersebut, document adalah objek yang paling penting dalam hirarki
tersebut. Objek document itu sendirinya mengacu kepada objek lain. Hal lain yang penting
dari hal ini adalah sebagai berikut:
 objek form
 objek anchor
 objek link
Objek location
e t
N
Objek location mengandung informasi tentang URL sekarang. Acuannya ke objek tersebut
a
adalah sebagai berikut:
d r
e n
H
[windowReference.]location[.propertyName]
By
Properti dari object location mengacu pada bagian individual dari URL:
protocol//hostname:port pathname search hash
CATATAN
Objek location dan properti location dari objek
dokumen (document.location) memiliki tujuan yang
berbeda. Objek location dapat berubah, tetapi properti
location tidak dapat berubah.
Properti dari objek location adalah sebagai berikut:
 protocol. protocol menentukan metode access dari URL.

 hostname. hostname mengandung nama host dan domain, atau alamat IP, dari host
tujuan.
 port. port adalah TCP/IP port, jika kosong akan digunakan port default dari protocol
tersebut.
 pathname. pathname meliputi path resource pada host tujuan.
Page 132 / 197

 search. property search adalah string yang dimulai dengan tanda ? yang digunakan
untuk script CGI.
 hash. property hash adalah suatu string yang dimulai dengan tanda hash(#) dan
diikuti dengan suatu anchor name.
 href. property ini merupakan keseluruhan dari URL. Jika acuan dibuat
ke[windowName.]location, property href menjadi asumsi.
 host. Property ini ekivalen dengan hostname:port.
CATATAN
Walaupun JavaScript memungkinkan modifikasi pada
properti individual, praktek pemrograman yang umum
adalah mengubah properti href. Pendekatan ini mencegah
hasil error dari browser sebelum akses URL belum berubah
secara keseluruhan.
Objek History
Akses ke objek History adalah topik yang kontroversial karena memungkinkan script
mengirim history kembali ke server. Untuk mencegah pemakaian yang menyimpang,
Netscape Navigator 2.01 keatas telah menghilangkan object ini.
Objek document
e t
a N
Object document menyimpan properti, objek, dan metode yang mewakili dokumen. Hal
d r
tersebut mengacu pada bagian dokumen HTML yang didefinsikan oleh tag <BODY></BODY>.
n
Bagian ini mendiskusikan komponen dari objek dokumen, kecuali objek form (yang akan
e
dibahas pada bagian berikutnya). H
Properti objek document By
Option HTML ke tag <BODY> mendefinisikan properti objek document. JavaScript mengacu
pada semua properti ini, kecuali untuk image background.
CATATAN
String yang diperlukan untuk mengubah properti color
adalah dalam format document.colorProperty =
"#RRGGBB" atau document.colorproperty="colorName".
Property color lainnya didefinisikan dalam tag
<HEAD></HEAD> yang mendahului tag <BODY>.
Properti color untuk object document adalah sebagai berikut:
 bgColor. Property ini menentukan warna latarbelakang dari dokumen. Property

bgColor secara langsung mengupdate tampilan.
 fgColor. Property ini menentukan warna text dari dokumen. Setelah browser
menyelesaikan layout dari dokumen HTML., browser mengabaikan perubahan pada
propery ini. Kecuali tag <FONT> atau metode fontcolor metode menyediakan suatu
mekanisme alternatif untuk mengubah warna text.
 linkColor. linkColor mewakili warna dari suatu link yang didefinsikan oleh HREF.
Page 133 / 197

 alinkColor. property control warna dari suatu active link. Dengan kata lain, hal
tersebut adalah warna dari link ketika terpilih.
 vlinkColor. Situs yang pernah dikunjungi, browser menampilkan warna untuk link
tersebut.
Contoh:
<FORM>
<SELECT onChange=
</SELECT>
</FORM>
Hasil :
White
e t
a N
d r
e n
Object document juga mengandung properti berikut yang tidak berkaitan dengan warna:
H
 lastModified.
dimodifikasi.
By
Property read-only yang berkaitan dengan tanggal terakhir dokumen
 location. Property read-only yang biasanya sama dengan nilai dari lokasi object,
kecuali redirection digunakan untuk URL
 referrer. Property read-only mengandung URL untuk dokument yang mana di link
ke dokumen tersebut.
 title. Property read-only mengandung nilai yang ditentukan pada
tag<TITLE></TITLE>.
Contoh:

</SCRIPT>
Hasil:
Update terakhir :01/31/2001 10:57:42
Page 134 / 197

The anchors Object
Object anchors mengandung suatu array dari semua anchors yang dideklarasikan dengan
atribut NAME dari tag <A> </A>. Array tersebut dimulai dari 0 dan berlanjut sampai
document.anchors.length - 1. Nilai dari document.anchors[index] adalah null.
TIP
Sebelum menggunakannya untuk memberikan nilai seperti
location.hash, adalah mungkin untuk memeriksa
keabsahan dari anchor dengan membandingkannya dengan
panjang array; anda menggunakan bilangan berurut untuk
menentukan anchors
Objek link
Array link mengandung object link yang didefinisikan oleh tag <A></A> atau dengan metode
e t
link. Array tersebut meliputi objek untuk atribut HREF dan NAME. Dengan tambahan ke atribut
a N
TARGET, properti dari masing-masing object link adalah identik dengan object location.
d r
CATATAN
e n
link H
array adalah suatu array read-only. Entries tambahan
By
ditambahkan dengan tag <A></A>. Metode link melakukan
modifikasi terhadap isi dalam array link
Object link memiliki dua event handler: onClick dan onMouseOver. Bagian ini disebut
sebagai "The Form Object," pada bagian selanjutnya di bab ini, menggambarkan bagaimana
mengunakan event handler.
Properti cookie
Property cookie mengandung suatu nilai string dari isi cookier dari file cookies.txt untuk
dokumen tersebut. Untuk suatu keterangan lengkap tentang bagaimana menggunakan
cookies, lihat bagian Netscape cookie specification. Metode substring, charAt, indexOf, dan
lastIndexOf dapat digunakan untuk memisahkan string cookie.
The document Object Metodes
Object document mengandung lima metode:
 document.write()
 document.writeln()
 document.open()
 document.close()
 document.clear()
Page 135 / 197

Sebagaimana yang ditunjukkan pada contoh sebelumnya, metode document.write, tanpa

mengacu pada suatu window, menulis text ke window yang sekarang. Metode
document.writeln() adalah sama dengan document.write, selain itu juga menyisip suatu
karakter newline pada akhir dari argumen. Format dari metode ini adalah sebagai berikut:
document.write(expression [, expression2] ... [expressionN])
document.writeln(expression [, expression2] ... [expressionN])
Tipe default MIME adalah text/html. Bagaimanapun, metode

document.open(["mimetype"]) memungkinkan untuk membuka type MIME lainnya,
seperti text/plain, image/gif, image/jpeg, image/x-bitmap, dan plugIn. Metode
document.open() membuka suatu stream untuk mengumpulkan output dari metode write
dan write.ln. Jika tipe MIME adalah text atau image, browser membuka suatu stream untuk
layout, untuk plugIn, browser membukanya pada suatu plug-in. Jika suatu dokumen telah
siap dalam target windows, mthod open menghapusnya.
CATATAN
Sekarang, tidak dimungkinkan lagi untuk mencetak tulisan
apapun dengan JavaScript melalui metode write ataupun
writeln
e t
N
Stream tersebut tetap terbuka sampai browser menemukan metode document.close().
a
r
document.close() memaksakan isi dari stream ditampilkan. Metode
d
n
document.clear()membersihkan isi dari window.
e
9. Objek Form
H
By
HTML tag <FORM></FORM> adalah fasilitas input data oleh pemakai, dan output data variabel
kepada pemakai. Input oleh pemakai memiliki efek pemilihan pada sisi klien yang dapat
dikirm ke server. Pada sisi lain, data variabel seperti marquees dapat ditampilkan pada form.
Pada sisi input, event handle adalah fasilitas untuk membangkitkan rutin JavaScript untuk
melakukan aktifitas pada proses edit data seperti validasi. Pada sisi output, JavaScript
memegang peranan penting dalam mengatur bagaimana data ditampilkan.
penanganan events
Event adalah hasil dari aksi pemakai, seperti klik pada suatu tombol mouse, checking pada
suatu kotak, dan pengiriman form. Penanganan Event didefinsikan dalam tag HTML
sepanjang JavaScript berkaitan dengan event tersebut. Berikut ini adalah contoh yang
merupakan kode dari suatu penanganan event.
<INPUT TYPE="button" VALUE="Submit"

onClick="validate(this.form)">
Pada contoh sebelumnya, kata kunci this mengacu pada objek tersebut, yang mana adalah
objek button. Dengan menyebutkan this.form, adalah acuan ke objek form yang
mengandung button tersebut. Ketika contoh sebelumnnya menjalankan suatu fungsi, perintah
JavaScript juga sah. Kalau lebih dari satu perintah, tiap perintah harus dipisahkan dengan
suatu titik koma.
Page 136 / 197

TIP
Praktek pemrograman yang baik adalah menggunakan
fungsi karena mereka membuat kode lebih mudah dibaca
dan dapat digunakan kembali.
NOTE
Sampai suatu dokumen HTML selesai di muat ke window
yang mengandung tag <BODY></BODY>, suatu window
tidak mengandung penanganan event.
Berikut ini adalah daftar dari penanganan event yang didukung oleh JavaSCript:
 onBlur.JavaScript menjalankan penanganan event ini ketika pemakai meninggalkan

field yang menyebabkan kehilangan fokus.
 onChange. dijalankan ketika user meninggalkan field dan terjadi perubahan nilai
object tersebut.
 onClick. event onClick terjadi ketika pemakai klik pada window atau link..
 onFocus. event ini terjadi ketika suatu form mendapatkan fokus.
 onLoad. event ini terjadi ketika browser selesai memuat suatu dokumen atau semua
frame didalam tag <FRAMESET>.
 onMouseOver. event ini terjadi ketika mouse bergerak melewati object dari luar object
tersebut. Rutin JavaScript harus mengembalikan true untuk status dan properti
defaultStatus yang ditentukan..
e t

a N
onSelect. event ini terjadi ketika pemakai melakukan select text pada text area..

d r
onSubmit. terjadi ketika user submit suatu form. Jika JavaScript mengembalikan
membuat form di submit. e n

false, form tersebut tidak akan di submit, nilai lainnya atau tidak ada nilai balik,
 H
onUnload. event ini terjadi ketika dokument di exit.
By
Penanganan Event adalah bagian dari berbagai object. Beberapa object mendukung lebih dari
satu penanganan event, dan beberapa penanganan event terjadi pada banyak objek. Tabel.8
menunjukkan hubungan antara penanganan event dan objek-objek.
Table 8. Hubungan antara penanganan event dan objek.
Objek Penanganan Event

button onClick
checkbox onClick
form onSubmit
link onClick, onMouseOver
radio onClick
reset onClick
select onBlur, onChange, onFocus
submit onClick
text onBlur, onChange, onFocus, onSelect
textarea onBlur, onChange, onFocus, onSelect
window onLoad, onUnload
Page 137 / 197

Contoh:

d r
</SCRIPT>
e n
<FORM NAME="dropdown"> H
By
<SELECT NAME="site" onChange='buka();' ALIGN="left">
<OPTION SELECTED>Pilih tutorial yang diinginkan
<OPTION>HTML
<OPTION>JavaScript
<OPTION>ASP
<OPTION>PHP
<OPTION>Perl
</SELECT>
</FORM>
Page 147 / 197

XHTML
Apa XML?
 XML singkatan dari EXtensible Markup Language

 XML adalah suatu markup language seperti halnya HTML
 XML dirancang untuk menjelaskan data (describe data)
 Tag-tag pada XML belum didefenisikan sebelumnya, tapi dapat
didefenisikan sendiri
 XML menggunakan Document Type Definition (DTD) ataun XML
Schema uantuk menjelaskan data (self-descriptive)
Persoalan dengan HTML (The problem with HTML)
• HTML dimulai sebagai suatu cara dari cara untuk menjelaskan structure
dari dokumen, dengan tag-tag untuk mengindikasikan headers,
paragraphs, dan sejenisnya
• Karena orang menginginkan untuk mengontrol tampilan (appearance)
dari dokumen, maka HTML memerlukan tags lain seperti mengontrol
fonts, alignment, dll.
• Hasilnya adalah markup language yang dapat melakukan keduanya, tapi
tidak bagus/optimal untuk keduanya. e t
a N
HTML vs. XML d r
e n
H
B y
XML kelihatan seperti HTML, tapi
 HTML menggunakan sekumpulan  Tag pada XML bebas dibuat (dan

tag yang telah tetap (fixed) mendefenisikan arti)
 XML dirancanga untuk
 HTML dirancang untuk menjelaskan data pada komputers
menampilkan data pada manusia  Dokumen XML haruslah well-
 Browsers sangat toleran pada formed (syntaknya betul)
kesalahan dalam HTML  Hanya browsers dengan versi
 Semua browsers dapat terbaru dapat menampilkan XML
menampilkan HTML
Contoh file Xml
<?xml version="1.0" encoding="ISO-8859-1"?>


<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
Page 148 / 197

<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
</catalog>
Penjelasan
Pada contoh diatas, bagian prolog berisi dua baris yang sifatnya opsional:

e t
N
• Baris pertama adalah deklarasikan XML, yang menyatakan bahwa
a
r
dokumen tersebut merupakan dokumen XML versi 1.0. dengan
d
encoding=”ISO-88859-1.
e n
• Baris kedua merupakan baris komentar. Penambahan komentar
H
digunakan untuk membantu mengingatkan atau sebagai catatan bagi
By
developer. Komentar diawali dengan karakter .
• Setelah bagian prolog adalah bagian elemen dokumen. Bagian tersebut
merupakan sebuah elemen tunggal yang bisa berisi elemen-elemen tambahan.
Pada contoh di atas, elemen dokumen adalah catalog. Di dalam elemen
dokumen berisi elemen cd. Dalam setiap elemen anggota catalog terdapat
data-data berupa karakter.
Dari contoh di atas dapat dilihat bahwa dokumen XML tersusun secara
terstruktur berdasarkan tag-tag yang didefinisikan oleh pembuat dokumen. Dengan
struktur dokumen seperti ini ditambah kebebasan XML mendefinisikan tag baru,
menyebabkan XML menjadi pilihan untuk kebutuhan penyimpanan data.
Aplikasi XML menawarkan berbagai keuntungan antara lain:
Kelebihan utama XML adalah kemampuan untuk melakukan data interchange.

Karena organisasi yang berbeda (dan juga bagian yang berbeda dari organisasi yang
sama) jarang berdasar pada sekumpulan tools yang sama, Perlu sejumlah kerja
ekstra untuk memungkinkan kedua belah pihak berkomunikasi. XML
mempermudah pengiriman data terstruktur lewat web sehingga tidak ada hilang
dalam proses penerjemahan.
Page 149 / 197

Memungkinkan Komunikasi Business to Business. ketika menggunakan XML,
misalnya , si A dapat menerima data bertag XML dari sistem B , dan sebaliknya.
Kedua belah pihak tidak perlu tahu bagaimana sistem yang lain terorganisasi. Jika
partner/supplier yg lain kemudian bergabung dengan organisasi si A misalnya, si A
tidak perlu menuliskan ulang kode dokumen untuk dipertukarkan dengan sistem
anggota baru tersebut. Cukup dengan meminta mereka mengikuti aturan yang diatur
dalam DTD (Data Type Defenition).
Memungkinkan Smart Agents, Ketika menulis sebuah agent, salah satu

tantangan adalah untuk mengerti data yang masuk. Agent yang baik menerjemahkan
informasi dengan pintar, dan kemudian menanggapinya dengan semestinya. Jika
data yang dikirim ke agen distruktur dengan XML, akan lebih mudah untuk agen
tersebut untuk mengerti apa arti data tersebutsb dan bagaimana hubungannya
dengan data yang sudah diketahuinya.
Memungkinkan Pencarian Pintar, Salah satu masalah besar dengan Web yang
sekarang adalah bahwa Search Engine tidak dapat memproses HTML dengan pintar.
t
Misal, jika anda mencari seorang bernama “chip”, anda akan menemukan halaman
e
N
tentang Chocolate Chip, Computer Chip, binatang chipmunk dan orang yang
a
d r
bernama Chip. Tapi jika sudah ada DTD untuk records name dan address, pencarian
e n
orang yang bernama Chip dapat menghasilkan hasil yg lebih akurat dan berguna.
H
By
Aturan Penulisan XML (Sintaks XML)
 Semua elemen XML haruslah mempunyai tag pembuka dan penutup
 Tag XML adalah case sensitif (membedakan huruf besar dan kecil)
<Message>This is incorrect</message>
<message>This is correct</message>
 Semua elemen XML haruslah tersusun tersarang (nested) atau tidak

saling overlap.
Contoh salah:
<b><i>This text is bold and italic</b></i>
Seharusnya:
<b><i>This text is bold and italic</i></b>
 Semua dokumen XML haruslah mempunyai akar tag (root tag)

<root>
<child>
<subchild>.....</subchild>
</child>
</root>
 Nilai atribut haruslah selalu diberi tanda quote (“).
Page 150 / 197
<note date="12/11/99">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
“Well Formed” dan “Valid” XML
• Suatu dokumen XML disebut “well formed” jika telah memenuhi

sayarat penulisan sintaks seperti dijelaskan diatas.
• Sedangkan suatu dokumen XML disebut “Valid’ jika telah “well
formed” dan juga telah memenuhi aturan DTD (Data Type Document).
DTD merupakan grammar/tata bahasa yang menjelaskan tetang atribut dan

tag apa yang valid dalam suatau dokumen XML, dan dalam konteks apa
mereka valid. (baca reference yang berkaitan dengan DTD).
Menampilakan XML dalam HTML
Dokumen XML hanya bisa ditampilkan browser versi terbaru seperti IE

versi 5 keatas dan Netsacpe versi 6 sedangkan untuk dapat ditampilkan
e t
oleh browser versi yang lama perlu terlebih dahulu dikonversi ke HTML
(dapat dilakukan di server). a N
d r
Seperti dijelaskan diatas salah satu tujuan diperkenalkannya xml adalah
e n
untuk komunikasi data yang dapat dimengerti oleh komputer. Sehingga
H
tampilan dari dokumen XML kurang menrik unuk konsumsi mata manusia.
By
Oleh kerananya dokumen XML juga dapat ditampilkan dalam berbagai
tampilan sehingga yang menarik layaknya presentasi HTML. Untuk
menampilkan XML sebagi HTML, diperlukan bahasa perantara yang
memfasilitasi tarnsformasi XNL ke HTML, yait:
1. XSLT (eXtensible Stylesheet Language Transformation)

2. CSS (Cascading Style Sheet)
Page 151 / 197

1. XML dengan XSLT dan Xpath
Apa XSL?
• XSL singkatan dari Extensible Stylesheet Language

• CSS dirancang untuk styling halaman HTML, meskipun bisa digunakan
untuk style halaman XML
• XSL dirancang khusus untuk style halaman XML, dan jauh lebih canggih
(sophisticated) dibanding CSS
• XSL terdiri dari tiga languages:
–XSLT (XSL Transformations) adalah language yang digunakan untuk
transformasi dokumen XML kedalam jenis dokumen lainnya (paling
uumum adalah HTML)
–XPath adalah language untuk seleksi bagian dari dokumen XML untuk
ditransformasi dengan XSLT
–XSL-FO (XSL Formatting Objects) adalah pengganti dari CSS (tapi
hingga saat ini belum ada implementasinya)
Bagaimana Cara Kerjanya?
• Sumber dokumen XML source di parse (diurai) kedalam source tree

(struktur pohon)
e t
• XPath digunakan untuk menetapkan template yang match dengan
bagian-bagian dari source tree
a N
r
• Selanjutnya XSLT digunakan untuk transform bagian yang match dan
d
n
meletakkannya kedalam hasil tree dan merupakan out-put dari dokumen
e
H
XPath
XML document:
By XPath layaknya seperti paths
dalam sistim file komputer
<?xml version="1.0"?>
<library> / menunjukkan dokumen itu sendiri
<book> (tidak ada elemen specific)
<title>XML</title>
<author>Gregory Brill</author>
/library selects the root element
</book>
<book>
<title>Java and XML</title> /library/book selects setiap elemen
<author>Brett book
McLaughlin</author>
</book> //author selects setiap elemen
</library > author, dimanapun terdapat
Page 152 / 197

XSLT
• <xsl:for-each select="//book"> pencarian melalui setiap elemen book

yang terdapat didalam dokumen
• <xsl:value-of select="title"/> memilih isi (content ) dari elemen title
dalam lokasi bersangkutan
• <xsl:for-each select="//book">
<xsl:value-of select="title"/>
</xsl:for-each>
memilih content dari elemen title untuk setiap book dalam dokumen
XML
Penggunaan XSL untuk membuat HTML
• Tujuan untuk membuat data xml • Menjadi HTML dengan tampilan

berikut: seperti berikut ini:
<?xml version="1.0"?> Book Titles:

<library> • XML
<book> • Java and XML
<title>XML</title> Book Authors:
• Gregory Brill
</book>
• Brett McLaughlin
<book>
<title>Java and XML</title> e t
<author>Brett a N
McLaughlin</author>
d r
</book>
e n
</library > H
Langkah:
By
• Simpan (save) data xml diatas kedalam file dengan ekstensi xml (mis:
books.xml)
• Simpan dokumen diatas (tabbel sebelah kanan) kedalam file xsl (mis:
books.xsl). File ini menjelaskan bagaiman menyeleksi elemen-elemen
books.xml dan menempatkannya kedalam halaman HTML.
• Kaitkan/hubungkan books.xsl melalui books.xml seperti diperlihatkan
berikut ini:
books.xml
• <?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="book-titles.xsl"?>
<library>
<book>
<title>XML</title>
</book>
<book>
Page 153 / 197

<title>Java and XML</title>
<author>Brett McLaughlin</author>
</book>
</library >
Tip transformasi xml ke html dengan xsl
HTML yang diinginkan Outline XSL
<html> <?xml version="1.0"

<head> encoding="ISO-8859-1"?>
<title>Book Titles and
Authors</title> <xsl:stylesheet version="1.0"
</head>
<body> xmlns:xsl="http://www.w3.org/199
<h2>Book titles:</h2> 9/XSL/Transform">
<ul>
<li>XML</li> <xsl:template match="/">
<li>Java and XML</li>
</ul> <html> ... </html>
<h2>Book authors:</h2>
<ul> </xsl:template>
<li>Gregory Brill</li> </xsl:stylesheet>
<li>Brett McLaughlin</li>
</ul>
</body> e t
</html> a N
d r
e n
Pemilihan titles dan authorsH
B y
<h2>Book titles:</h2>
<ul>
<xsl:for-each select="//book">
<li>
</li>
</xsl:for-each>
</ul>
...dengan cara yang sama dapat dilanjutkan dengan mengganti title
dengan author
Page 154 / 197

book.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/
XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Book Titles and Authors</title>
</head>
<body>
<h2>Book titles:</h2>
<ul>
<li>
</li>
</xsl:for-each>
</ul>
<ul>
e t
<li>
<xsl:value-of select="author"/> a N
</li> d r
</xsl:for-each>
e n
</ul> H
</body>
</html>
</xsl:template>
By
</xsl:stylesheet>
2. XML dengan Style Sheet

Disamping XSLT seperti telah dijelaskan diatas, dokumen xml juga dapat
ditampilkan ke HTML menggunkan bahasa style sheet seperti CSS (Cascading Style
Sheet).
Menggunakan style sheet bertingkat merupakan metoda termudah untuk
menampilkan seluruh dokumen XML. Tetapi dibandingkan dengan metoda penampilan
dokumen XML yang lain, style sheet bertingkat agak terbatas. Karena walaupun style
sheet bertingkat memberikan kontrol yang cukup tinggi untuk cara browser memformat
isi elemen dalam dokumen XML, tidak memungkinkan akses atribut XML, entitas,
instruksi pemrosesan, dan komponen lain, dan juga tidak untuk memproses informasi
yang dimuat dalam komponen ini.
Page 155 / 197

Membuat dokumen XML dengan Style Sheet dengan langkah dasar sebagai
berikut :
1. Buat file style sheet
2. Kaitkan style sheet ke dokumen XML
Style sheet bertingkat adalah sebuah file teks biasa, umumnya dengan eksetensi
.css, yang berisi kumpulan aturan yang menyatakan pada browser bagaimana
memformat dan menampilkan elemen dalam dokumen XML yang spesifik.
Listing contoh file untuk style sheet bertingkat:
rental.xml
<?xml version='1.0'?>

<?xml-stylesheet type="text/css" href="rental.css"?>
<INVENTARIS>
<RENTAL_MOBIL Stok="yes">
<JENIS_MOBIL>Sedan</JENIS_MOBIL>
<MERK> Suzuki Baleno</MERK>
<HARGA_RENTAL>Rp. 150.000/hari</HARGA_RENTAL>
</RENTAL_MOBIL>
<JENIS_MOBIL>Van</JENIS_MOBIL>
<MERK>Kia Carnival</MERK>
</RENTAL_MOBIL>
e t
<JENIS_MOBIL>Mini bus</JENIS_MOBIL>
a N
<MERK>Mazda E300</MERK>
d r
</RENTAL_MOBIL>
e n
H
<JENIS_MOBIL>Truck</JENIS_MOBIL>
By
<MERK>Mitsubishi</MERK>
</RENTAL_MOBIL>
<JENIS_MOBIL>Bus</JENIS_MOBIL>
<MERK>Mercedes</MERK>
</RENTAL_MOBIL>
</INVENTARIS>
Rental.css
/* File Name : rental.css */

RENTAL_MOBIL
{display:block;
margin-top:12pt;
font-size:10pt}
JENIS_MOBIL
{display:block;
font-size:10pt;
font-weight:bold;
font-style:italic}
MERK, HARGA_RENTAL
{display:block;
Page 156 / 197

margin-left:15pt;)
Contoh:
Pada contoh (file terpisah) tampilkan xml dalam html dengan teknik xslt dan css.
Misal: cdcatalog.xml dan cdcatalog.xsl. Kemudian kaitkan cdcatalog.xsl
pada cdcatalog.xml seperti berikut:

<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
e t
a N
d r
e n
H
By
Page 157 / 197

Document Type Definitions
XML dan DTD

• DTD (Document Type Definition) menjelaskan struktur satu atau lebih dokumen
XML. Khusunya DTD menjelaskan berikut ini:
–Elements
–Attributes, dan
–Entities
• Suatu dokumen XML disebut weel-formed atau well-structured jika mengikuti aturan
sintaks
• Suatu dokumen XML disebut valid jika telah ditetapkan dan memenuhi suatu DTD
Kenapa DTD?
• Dokumen XML dirancang untuk di olah/diproses oleh program komputer

–Jika anda membuat sembarang tags dalam dokumen XML, akan sulit
membuat program yang dapat memproses tag tersebut
–Tetapi DTD menetapkan terlebih dahulu, setiap tag yang boleh muncul, kapan
(urutan) tag muncul dan atribut apa yang menyertainya dll,
• Dengan demikian DTD membuat suatu XML menjadi legal (dapat diverifikasi)
• DTD yang di sharing diantara kelompok pengguna akan menghasilkan dokumen
XML yang konsisten
Parsers
e t
a N
• Parser XML adalah API (Application Programming Interface) yang membaca
content dari dokumen XML d r
e n
– API yang popular adalah DOM (Document Object Model) dan SAX (Simple API for
XML) H
By
• Parser Validasi adalah parser XML yang membandingkan dokumen XML terhadap
DTD dan melaporkan setiap error/kesalahan
– Kebanyakan browsers belum menggunakan parser validasi
Contoh XML
<novel>
<foreword>
<paragraph>This is the great American novel.</ paragraph>
</foreword>
<chapter number="1">
<paragraph>It was a dark and stormy night.</paragraph>
<paragraph>Suddenly, a shot rang out!</paragraph>
</chapter>
</novel>
Dokumen XML terdiri dari (dan DTD menjelaskan):

•Elements, seperti novel dan paragraph, terdiri dari tags dan content
•Attributes, seperti number="1", terdiri dari name dan value
•Entities (tidak digunakan dalam contoh ini)
Contoh DTD
<!DOCTYPE novel [
<!ELEMENT novel (foreword, chapter+)>
Page 158 / 197

<!ELEMENT foreword (paragraph+)>
<!ELEMENT chapter (paragraph+)>
<!ELEMENT paragraph (#PCDATA)>
<!ATTRIBUTE chapter number CDATA #REQUIRED>
]>
• Novel terdiri dari foreword dan satu atau lebih chapter, dalam hal ini
– Setiap chapter harus mempunyai nomor attribute
• Foreword terdiri dari satu atau lebih paragraph
• Chapter juga terdiri dari satu atau lebih paragraph
• Paragraph terdiri dari PCDATA (parsed character data) (teks yang tidak berisi elemen lain)
Deskripsi ELEMENT
• Suffixes:
? optional (pilihan) foreword?
+ satu atau lebih chapter+
* zero atau lebih appendix*
• Separators
, keduanya, dalam urutan foreword?, chapter+
| atau section|chapter
• Grouping
( ) grouping (section|chapter)+
Elements whitout children (Eelemen tanpa anak)

e t
• Sintaks <!ELEMENT name category> a N
d r
– name adalah nama elemen yang digunakan dalam tag start dan tag akhir
– category boleh EMPTY (kosong):
e n
H
•Contoh dalam DTD: <!ELEMENT br EMPTY>
•Contoh dalam XML: <br></br> atau <br />
By
–Dalam XML, elemen empty adalah yang tidak terdapat konten apapun antara tag
start dan tag akhir
–Suatu elemen empty dapat mempunyai attribut
Elements with unstructured children (elemen dgn anak tdk terstruktur)
• Sintaks <!ELEMENT name category>

–Kategory boleh ANY (sembarang)
•Ini menunjukkan isi dari any dapat berupa--character data, element, even
undeclared elements (elemen yang belum dideklarasi)
•Karena tujuan penggunaan DTD adalah untuk menetapkan struktur dokumen
(xml) maka sedapat mungkin penggunaan ANY dihindarkan
–Kategory berupa (#PCDATA), menunjukkan bahwa hanya karakter data yang boleh
digunakan
•Cantoh dalam DTD: <!ELEMENT paragraph (#PCDATA)>
•Contoh dalam XML: <paragraph>A shot rang out!</paragraph>
•Catatan: Dalam (#PCDATA), whitespace di kept sesuai dengan yang di berikan
•Elements tidak boleh digunakan dalam parsed character data (PCDATA)
Entitas berupa character data dapat digunakan
Elements with children (elemen dgn anak)
Page 159 / 197

• Kategori menjelaskan satu atau lebih anak:
<!ELEMENT novel (foreword, chapter+)>
–Tanda kurung diperlukan meski hanya terdiri dari satu anak
–Space (spasi) diperlukan sebelum kurung pembuka
–Koma (,) anatar element artinya semua children harus muncul, dan harus dalam
urutan yang sesuai
–“|” separator artinya setiap child dapat digunakan
–Children dapat mempunyai children
–Tanda kurung dapat digunakan untuk pengelompokan:
<!ELEMENT novel (foreword, (chapter+|section+))>
Elements with mixed content (elemen dengan konten campuran)
• # #PCDATA menjelaskan element dengan hanya character data

• #PCDATA dapat digunakan dalam “atau” pengelompokan:
–<!ELEMENT note (#PCDATA|message)*>
– Ini disebut sebagai mixed content (konten compuran)
Names dan namespaces
• Semua nama element, attributes, dan entities, baik dalam DTD maupun XML,
berbentuk sebagai berikut:
– Nama dimulai dengan huruf atau underscore (garis bawah)
– Nama dapat terdiri dari hanya huruf, angka, titik-titik, hyphens, underscores, dan
colons
e t
N
• DTD tidak mengenal namespaces—DTD menganggap suatu colon sebagai bagian
a
dari nama
d r
– Contoh berikut adalah berbeda (dan keduanya legal):
•<!ELEMENT chapter (paragraph+)>
e n
H
•<!ELEMENT myBook:chapter (myBook:paragraph+)>
By
– Hindari penggunaan colons dalam nama, kecuali mengindikasikan namespaces
Contoh DTD
• <!DOCTYPE novel [
<!ELEMENT novel
(foreword, chapter+, biography?, criticalEssay*)>
<!ELEMENT foreword (paragraph+)>
<!ELEMENT chapter (section+|paragraph+)>
<!ELEMENT section (paragraph+)>
<!ELEMENT biography(paragraph+)>
<!ELEMENT criticalEssay (section+)>
<!ELEMENT paragraph (#PCDATA)>
]>
Attributes dan entities

• Sebagai tambahan pada elements, suatu DTD boleh mendeklarasikan attribute and
entities
–This slide shows examples; we will discuss each in detail
• Suatu attribute menjelaskan informasi yang dapat diletakkan dalam tag awal elemen
Page 160 / 197

–Dalam XML: <dog name="Spot" age="3"></dog>
–Dalam DTD: <!ATTLIST dog
name CDATA #REQUIRED
age CDATA #IMPLIED >
• Suatu entity menjelaskan teks sebagai pengganti (substitusi)
–Dalam XML: &copyright;
–Dalaml DTD: <!ENTITY copyright "Copyright Dr. Dave">
Attributes
• Format dari attribute adalah:
<!ATTLIST element-name
name type requirement
name type requirement>
diman name-type-requirement dapat diulang sebanyak yang dinginkan
– Untuk pemisah bagian-bagian dilakukan hanya dengan spaces (Oleh karenanya perlu kehati-hatian)
– Element-name memberi tahu elemen mana yang dapat memeliki atribut ini
– Name adalah nama dari attribute
– Setiap element mempunyai type (jenis), seperti CDATA (character data)
– Setiap element dapat seabagai: required, optional, atau “fixed”
– Dalam XML, attribute dapat muncul dalam urutan sembarang
Jenis-jenis attribute penting
• Ada sepuluh jenis

• Yang paling penting a.l.:
–CDATA
–(man|woman|child)
Nilainya adalah character data
e t
Nilainya adalah salah satu dari daftar ini
–ID a N
Nilainya adalah suatu identifier unik
d r
• Nilai ID haruslah nama XML legal dan harus unuik dalam dokumen
–NMTOKEN n
Nilainya adalah nama XML legal
e
H
• Kadang ini digunakan untuk mencegah whitespace dalam nama
• Juga untuk mencegah angka, karena nama XML tidak adapat dimulai dengan angka
B y
Jenis attribute yang kurang penting
• IDREF ID dari element lain

• IDREFS Daftar dari ID lain
• NMTOKENS Daftar darai nama XML yang valid
• ENTITY Suatu entitas
• ENTITIES Daftar adari entitas
• NOTATION Suatu notasi
• xml: nilai XML awal (A predefined XML value)
Requirements
• Kembali ke contoh bentuk suatu attribute

<!ATTLIST element-name name type requirement>
• Requirement adalah salah satu dari:
Page 161 / 197

–Suatu nilai default yang dilingkupi tanda petik
• Contoh: <!ATTLIST degree CDATA "PhD">
–#REQUIRED
• Attribute harus ada
–#IMPLIED
• Attribute adalah pilihan (optional)
–#FIXED "value"
• Attribute selalu mempunyai nilai yang diberikan
• Jika telah ditetapkan dalam XML, nilai yang sama harus digunakan
Entities
• Ada lima entitas yang telah ditetapkan: <, >, &, ", and '
• Entitas tambahan dapat ditentukan dalam DTD:
<!ENTITY copyright "Copyright Dr. Dave">
• Entitas dapat didefenisikan dalam document lain:
<!ENTITY copyright SYSTEM "MyURI">
• Contoh penggunaan dalam XML:
This document is &copyright; 2002.
• Entitas jangan dibingungkan dengan referensi character yang merupakan nilai antara
& dan #
• Contoh: &233#; atau &xE9#; sebagai indikasi karakter é
Contoh lain: XML

<?xml version="1.0"?>
e t
<!DOCTYPE myXmlDoc SYSTEM
a N
r
"http://www.mysite.com/mydoc.dtd"> <weatherReport>
d
<date>05/29/2002</date>
<location> e n
H
<city>Philadelphia</city>, <state>PA</state> <country>USA</country>
</location>
<temperature-range> By
<high scale="F">84</high>
<low scale="F">51</low>
</temperature-range>
</weatherReport>
DTD untuk contoh xml ini

<!ELEMENT weatherReport (date, location,
temperature-range)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT location (city, state, country)>
<!ELEMENT city (#PCDATA)>
<!ELEMENT state (#PCDATA)>
<!ELEMENT country (#PCDATA)>
<!ELEMENT temperature-range
((low, high)|(high, low))>
<!ELEMENT low (#PCDATA)>
<!ELEMENT high (#PCDATA)>
<!ATTLIST low scale (C|F) #REQUIRED>
<!ATTLIST high scale (C|F) #REQUIRED>
Inline DTDs
Page 162 / 197
• Jika suatu DTD digunakan hanya satu dokumen XML, dapat diletakkan langsung
dalam dokumen:
<?xml version="1.0">
<!DOCTYPE myRootElement [

]>
<myRootElement>

</myRootElement>
External DTDs
• External DTD (DTD yang terpisah dari dokumen) di deklarasikan dalam SYSTEM
atau PUBLIC:
<!DOCTYPE myRootElement SYSTEM
"http://www.mysite.com/mydoc.dtd">
– Nama yang muncul setelah DOCTYPE (dalam contoh ini, myRootElement) harus sesuai (match)
dengan elemen root dari XML:
– Gunakan SYSTEM untuk external DTDs yang didefenisikan oleh sendiri, dan PUBLIC untuk resmi
(official) yaitu DTD yang dipublish.
– External DTDs direferensikan dalam URL
• Extension file untuk external DTD adalah .dtd
Keterbatasan DTD
e t
• DTDs merupakan bahasa spesifikasi yang sangat lemah
a N
r
– Kita tidak dapat meletakkan pembatasan pada konten elemen
d
– Sulit untuk spesifikasi:
e n
Semua children harus muncul, tapi dapat dalam urutan sembarang
•
H
This element must occur a certain number of times
•
By
–There are only ten data types for attribute values
• But most of all: DTDs aren’t written in XML!
–If you want to do any validation, you need one parser for the XML and another for the
DTD
–This makes XML parsing harder than it needs to be
–There is a newer and more powerful technology: XML Schemas
–However, DTDs are still very much in use
Validators
• Opera 5 and Internet Explorer 5 can validate your XML against an internal DTD
–IE provides (slightly) better error messages
–Opera apparently just ignores external DTDs
–IE considers an external DTD to be an error
• jEdit (my favorite editor) with the XML plugin will check for well-structuredness
and (if the DTD is inline) will validate your XML each time you do a Save
–http://www.jedit.org/
Page 163 / 197

Source: Berbagai Sumber di Internet
Prinsip Perancangan Web
Disain web atau disain situs merupakan komponen penting dalam membangun bisnis
berbasis web atau yang dikenal dengan E-commerce. Disain web merupakan bidang multi
disiplin yang dipengaruhi oleh antara lain: disain grafis, pemrograman, teknologi
cilent/server, ilmu kepustakaan (library science), disain user interface dan lain sebagainya.
Aspek penting dari disain web adalah perancangan dan pengorganisasian content (isi)
dari situs web, kemudian pertimbangan visual, teknologi dan pertimbangan ekonomi.
 Parameter disain Web

Tujuan utama content web adalah untuk menginformasikan sesuatu atau dengan kata
lain untuk merayu user. Sedangkan penggunaan teknologi adalah untuk implementasi
fungsi dari situs. Sementara itu visual memberi bentuk dari situs. Faktor lain yang
perlu dipertimbangkan dalam embangun situs adalah ekonomi. Situs tidak perlu
dibangaun jika tidak jelas kemungkinan ekonominya. Akan tetapi kadang-kadang
faktor ekonomi tidak terlalu dipertimbangkan dalam mendesain suatu situs seperti
halnya pada situs pribadi. Sedangkan pada situs Intranet Content merupakan
pertimbangan utama sedangkan faktor visual kadang tidak terlalu diperhatikan
sebagaimana layaknya promosi web untuk publik.
e t
berikut. a N
Sebagai kesimpulan: untuk membangun situs dapat diacu melalui gambaran piramida
d r
Kegunaan/Purpose
e n
(Ekonomi)
H Content merupakan batu bata yang
By
digunakan membangun piramida.
Untuk itu perlu fondasi yang kuat
yaitu yang digambarkan oleh visual
dan teknologi. Sedangkan
penekanan ekonomi menjadikan
Content
projek mempunyai nilai.
User Disainer
Bentuk /Form Fungsi
(Visual) (Teknologi)
 Model Proses Pengembangan Web

Dalam membangun situs web dapat didekati sebagai proses Top-Down seperti
diperlihatkan oleh diagram berikut:
Page 164 / 197

Defenisi
Persoalan
- Eksplorasi Konsep
Analisa
Kebutuhan
- Spesifikasi
Desain
- Prototipe
Integrasi dan
Pengujian Sistim
Rilis, Operasi dan

pemeliharaan
 Pertama yang perlu diketahui adalah kegunaan atau tujuan dari situs dibanguna.
Secara seksama didefenisikan problem dari situs yang mengacu pada setiap goal
yang hendak dicapai.
 Setelah goal ditetapkan, kemudian ditentukan spesifikasinya. Spesifikasi ini
merupakan syarat-syarat untuk situs dimana dalam hal ini perlu dipertimbangkan
faktor audience (pemirsa).
e t

a N
Langkah selanjutnya memulai pembangunan situs termasuk prototipe secara
teknik dan visual
d r
 n
Selanjutnya tahap implementasi hasil dari disain dan melakukan pengujian
e

(Integrasi dan Pengujian).
H
Terakhir adalah Rilis (Release) atau Publikasi situs. Kadang-kadang masih
By
diperlukan modifikasi berdasarkan umpan balik dari user.
Motto dalam mendesain Web adalah: “ Membangun untuk User”

 Kesalahan umum yang sering dilakukan disainer dalam membangun web adalah
para desainer membangun untuk memenuhi keinginan mereka dari pada
membangun situs untuk user. Harus selalu diingat aturan : “ Your are Not the User
“
Apa yang anda mengerti belum tentu sebagai apa yang dimengerti oleh user,
karena user mungkin tidak mempunyai interest atau ketertarikan yang sama dengan
anda sebagai disainer.
 Kunci sukses desain situs web adalah selalu mencoba berfikir dari titik pandang
user.
 Aturan lain disain web: “ Design for the common user, but account for the
difference” , artinya: User dapat mempunyai karakteristik dasar yang mirip tapi
juga mereka adalah individu yang berbeda dengan yang lain dan perlu dipenuhi
keinginannya.
Page 165 / 197

Persiapan Pembuatan Suatu WebSite
WebSite/HomePage:
Merupakan suatu kesatuan dari document-dokumen yang terhubung dengan atribut yang
sama (misalnya: Topik, Fungsi, ataupun system Desain yang sama).
Jadi sebuah WebSite memiliki banyak dokumen yang biasanya disebut halaman Web
(WebPage), serta komponen lain seperti Image, Media, dan obyek-obyek yang berhubungan.
Secaraumum, persiapan membuat WebSite, sebagai berikut:

1. Merumuskan tujuan pembuatan WebSite.
2. Menentukan Isi.
3. Menentukan Target Marketnya.
4. Menentukan Strukturnya.
Merumuskan Tujuan Pembuatan Website
Berdasarkan Isi maupun Tujuan, WebSite biasanya dapat digolongkan, antara lain:
1. Profil Perusahaan (Company Profile), Profil Pribadi (Artis, Curiculum Vitae, Web
e t
Personal, dst) Berfungsi sebagai media Presentasi, informasi, publikasi, Promosi,
N
dan Pemasaran. Web ini harus memiliki daya tarik bagi pengunjung untuk menyimak
a
d r
isi web sehingga faktor desain menjadi paling utama.
2. Informasi/Berita, Media Informasi dan Berita adalah yang terutama (Majalah/Koran
n
online). Keakuratan dan kelengkapan informasi dari web semacam ini sangat
e
penting.
H
3. Services, Media untuk pelayanan, seperti Free Email, Search Engine, SMS via
By
Internet, E-Commerce (Media Transaksi Online), dst.
Sebuah Web dapat mencakup lebih dari satu Kategori saja,

namun ada kategori yang lebih dominan.
Menentukan Isi/Content/menu Web
Dengan tujuan dan target yang jelas maka kita dapat mempersiapkan isi/Content
yang akan ditampilkan.
Contoh:
Web sebuah Company, isinya antara lain:

[About Us], [Product], [Clients], [Contact Us], [News]
Web Seorang Artis, isinya antara lain:

[Profil Singkat], [Photo Galeri], [Jumpa Fans], [Seputar Gossip], [Agenda], [NEWS]
Masing-masing Content dapat ditambahkan lagi Sub-Content, Contoh:

Dalam content [NEWS], terdapat Sub Content yaitu:
 Berita Terkini
 Berita Terdahulu
 Berita Anda
Page 166 / 197

 Kirim Berita
Pengaturan data/dokumen WebSite dalam Folder

dan Penamaan Dokument HTML
Hal ini memegang peranan penting dalam kemudahan me-maintenance sebuah

web.
Berikut adalah sebuah gambaran bagaimana pengaturan Folder:
Sediakan Dua Folder.

data-data/dokument Image, PSD, Hasil Scan, Ketikan, dll disimpan dalam  Bahan Web
Jangan campur adukkan dalam folder utama (Data WebSite yang akan di UpLoad)
 NamaWeb
 Images
Gambar1.JPG
Gambar2.JPG
Logo.GIF
 index.html Sebagai Halaman Cover / halaman Pertama,
 AboutUs.html Nama yang telah standard secara internasional,
 Product.htm
 Clients.htm e t
adalah: Index.html atau Default.html
 ContactUs.htm
a N
 News.htm
d r
e n
H
By
Faktor yang perlu diperhatikan dalam Rancangan Tampilan Web.
Suatu WebSite yang baik memiliki pemikiran Semiotik secara matang,

terbagi atas 3 hal yaitu:
1. Semantik
Menyangkut Kesesuaian Tema, Konsep Desain yang ditampilkan, dst.
Tema, Konsep, dll tidak lepas dari Prinsip-prinsip Desain, seperti:
Unik :
Dalam membuat karya apapun seorang designer mempunyai kesadaran untuk tidak
meniru atau menggunakan karya orang lain. Begitu pula seorang Web Designer
harus mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang
telah digunakan atau dibuat oleh orang lain.
Komposisi :
Seorang Web Designer selalu memperhatikan komposisi warna yang akan digunakan
dalam website yang dibuatnya. Pergunakan selalu Palette 216 WebColor, RGB.
Page 167 / 197

Web Colour :
Dalam membangun website suatu perusahaan, Web Designer harus peka dalam
menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut
(Colour Company).
Contoh: Telkom Corporate Color-nya adalah biru, Coca-Cola : merah dan putih,
Standard-Chartered : hijau dan biru, dsb. Untuk kemudian warna-warna tadi
digunakan sebagai warna dominan atau sebagai elemen pendukung [garis,
background, button, dsb].
Simple :
Web Designer banyak yang menggunakan prinsip "Keep it Simple", hal ini ditujukan
agar tampilan website tersebut terlihat rapi, bersih dan juga informatif.
Sign System (Sistem Tanda) :

Dalam hal ini diharapkan dengan melihat tanda atau gambar, user [audience] dapat
dengan mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar
[image] yang berkesan tombol, padahal itu bukan tombol [link].
2. Sintaktik
Kesatuan dan Keterpaduan Desain,
Adalah penting dalam segi estetika maupun segi navigasi, supaya netter tidak
mengalami kebingungan dalam menelusuri halama-halaman web yang dibuat.
e t
N
Contoh: memiliki kesamaan tema dalam halaman-halaman webnya.
a
Keterpaduan Desain, dapat dilihat seperti:
d r
n
Kesamaan Jenis Font, Warna, Tombol Navigasi (Menu), Letak Menu, Komposisi, dst.
e
H
By
Fokus dan Hirarki :
Contoh: tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya:
Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul
yang berukuran hampir sama. Hal ini akan membingungkan user [audience] untuk
menentukan pesan mana yang harus lebih dahulu dibaca [dilihat].
Konsisten :
Contoh: tentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub
Judul, dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi.
Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut.
3. Pragmatik
Dalam hal ini menyangkut kemampuan Teknis dan pemahaman akan
kemampuan/kekurangan Software yang digunakan dalam mendesain Web.
Kemampuan, Pemahaman, dan wawasan akan software-software tersebut
diharapkan Web Designer dapat se-Efektif + Se-Efesien mungkin dalam proses
perancangannya.
Ergonomis :
Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah dalam
hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri
website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga mudah
Page 168 / 197

dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah dan
cepat untuk di akses dan lebih penting lagi adalah Informatif.
Pemahaman akan Faktor teknis,

(memahami kelemahan / kekurangan Teknologi yang ada).
yang perlu menjadi periksa dalam Mendesain Web:
FONT
Gunakan Font yang umum agar tidak terjadi ‘Missing Font’ yang menyebabkan
kekacauan pada Web yang telah kita rancang. Font Umum yang dimaksud
adalah Font yang telah ‘ter-Instal’ Secara umum (Otomatis) oleh Komputer (PC
/ MAC) - (pada umumnya) saat menginstal Windows / Browser.
( Misal: Arial, Times New Roman, Verdana )
(Catatan: Untuk mengatasi Missing Font, telah dikeluarkan bahasa khusus yaitu
DHTML).
WARNA
Gunakan dengan Format RGB
Karena Tampilan Web dilihat pada Monitor (Warna yang terbentuk oleh Cahaya)
- bukan seperti CMYK (Pada media Cetak)
e t
Ukuran PIXEL
a N
Gunakan PIXEL Sebagai satuan ukuran.
d r
e n
Resolusi Monitor H
By
Saat ini sangat umum Web berpatokan pada ukuran
Resolusi Monitor 800 x 600
(Sudah jarang Web yang berpatokan dibawah resolusi tersebut)
Boleh saja menggunakan di atas Resolusi tersebut,

tergantung Teknologi / Masyarakat yang akan terus berkembang.
Format Gambar / Image

File image yang dimasukkan dalam dokumen Html,
ada 2 jenis yang digunakan: GIF dan JPG / JPEG,
selain itu ada pula file PNG (Portable Network Graphic)

namun jenis ini jarang digunakan.
GIF :
Menampilkan 256 warna saja, bisa merupakan GIF Animasi,
dan dapat Transparant.
JPG :
Format Gambar yang penuh warna (Full Colour),
membentuk gradasi dengan sangat baik dengan kompresi yang tinggi.
Page 169 / 197

Di atas adalah sebagian kecil kendala yang ada karena Teknologi tidak luput dari banyak kendala.
Walau demikian, jangan jadikan Teknologi sebagai penguasa. Jadikan Teknologi sebagai “Alat
Bantu”, bukan kita diperbudak Teknologi, tetapi Teknologi adalah Budak kita !
“It’s the Man behind the Gun”
Demikian beberapa aspek dan prinsip yang digunakan Web Designer dalam
membuat website, selebihnya merupakan ekspresi dari pembuat website itu
sendiri
yang terwujud dalam penggayaan penyusunan website.
Web yang tidak mengindahkan hal-hal tersebut di atas,

Desain yang dibuat dengan ‘asal-asalan’
hanya akan membuat jera/jengkel pengunjung Web.
Perangkat Software Pendukung
Desain :
Untuk membuat desain suatu homepage biasanya para web designer dimulai dengan
software ini sebagai tampilan sementara atau dalam membuat layout homepage.
1.
2.
Adobe Photoshop : Desain berbasis titik (bitmap/Pixel)
e t
Adobe Image Ready : Memotong gambar-gambar ke dalam format html
3.
a
Adobe Illustrator : Desain berbasis vector N
4. CorelDraw : Desain berbasis vector
d r
5.
n
Macromedia Freehand : Desain berbasis vector
e
Efek Desain : H
By
Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah
efek cahaya, textur dan manipulasi teks.
1. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai's Power
Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu
anda mendesain layout homepage di Adobe Photoshop / Image Ready.
2. Macromedia Firework : Efek teks
3. Painter : Memberikan efek lukisan
4. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.
Animasi :
Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup.
1. Macromedia Flash : Membuat animasi dan Efek-efek SWF

(Software serupa: Adobe Live Motion, Corel RAVE, SWiSH)
2. SWiSH : Membuat berbagai macam efek text dengan format file FLASH.
3. Gif Construction Set : Membuat animasi file gif
4. Microsoft Gif Animator : Membuat animasi file gif
5. 3D Studio Max : Untuk membuat objek dan animasi 3D
6. Swift 3D : Merancang animasi 3D dengan format file FLASH.
7. Ulead Cool 3D : Membuat animasi efek text 3D.
Web Editor :
Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web
dengan teks dan sedikit bahasa script / Html.
Page 170 / 197

1. Macromedia Dreamweaver
2. Microsoft Frontpage
3. Alaire Homesite
4. Adobe Go Live
5. Corel WebDesigner
6. Cold Fusion
7. Net Object Fusion
Programming :
Hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming
bertugas sebagai akses database, form isian, dan membuat web lebih interaktif.
Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang, dan Iklanbaris.
1. ASP (Active Server Page)

2. Borland Delphy
3. CGI (Common Gateway Interface)
4. PHP
5. Perl
(Baca: Fasilitas Pendukung / Menu Interaktif, hal. 21)
Upload :
File html kita perlu di letakkan (upload) di suatu tempat (hosting)
agar dapat diakses di seluruh dunia.
1. Bullet FTP
e t
2.
3.
Cute FTP
WS-FTP
a N
4.
d r
Macromedia Dreamweaver : dengan fasilitas Site FTP
5.
n
Microsoft Frontpage : dengan fasilitas Publish
e
Sound Editor : H
1.
By
Untuk mengedit file midi atau wav, perlu alat khusus untuk itu.
Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav.
2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi
Banyak sekali memang software untuk membuat suatu homepage dan kita tidak perlu
mempelajari semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula
dalam mendesain web lebih baik dimulai terlebih dulu dengan mempelajari software Web
Editor seperti Microsoft Frontpage atau Macromedia Dreamweaver agar lebih mengenal
aturan-aturan membuat homepage dan mengenal bahasa html.
Sekilas tentang: Adobe Image Ready
Software yang memang ‘khusus’ dibuat oleh Adobe untuk keperluan Web Design.
(Seperti halnya dengan Adobe Photoshop) fungsi Image Ready adalah untuk memanipulasi
Image, me-retouch, memberi effect-effect pada image, dst dengan Optimized
(kompressi) yang dirancang khusus untuk keperluan Web.
Kelebihan lain dari Image Ready:

membuat Animasi GIF sederhana untuk keperluan Web.
Sekilas tentang: Macromedia Flash
Adalah format animasi berbasis web.
Page 171 / 197

Mungkin tidak asing lagi dengan nama Flash. Macromedia Flash merupakan salah satu
Software yang sering digunakan dalam membuat animasi berbasis Web dengan format
Shockwave (.SWF).
Untuk melihat file SWF melalui browser generasi awal diperlukan Pug-in Khusus.
Dengan berkembangnya popularitas Flash, system Windows dan Machintosh serta browser
generasi terbaru sudah mendukungnya tanpa perlu Plugin) .
Banyak orang dibuat kagum olehnya, disebabkan karena ukuran filenya yang begitu kecil
tetapi dapat menampilkan animasi di web yang luar biasa mengagumkan. Segala bentuk
effect, sound, games interaktif, dst dapat dibuat dalam software ini.
FLASH dimulai sebagai software untuk membuat animasi cel (Baca: Kartun) bernama
Future Splash. Dengan perangkat ini, dimungkinkan untuk membuat animasi dengan
ukuran kecil untuk didistribusikam melalui Internet. Dengan kemampuan Macromedia di
bidang Multimedia, FLASH kini dikembangkan menjadi perangkat Multimedia Interaktif.
Software serupa muncul seperti:

Adobe Live Motion, Corel Rave, SwiSH, dan banyak lagi.
Dengan kepopuleran FLASH,

akhirnya banyak vendor mengintegrasikan format FLASH pada softwarenya. Seperti:
Software Vektor (Freehand, Illustrator, CorelDraw), Video (Affter Effects, Director), 3D
(Max, Maya) dan banyak lagi, - sudah bisa meng-output langsung ke dalam format ini.
e t
a N
d r
e n
H
By
Page 172 / 197

Unsur-unsur Visualisasi Web
Terdapat beberapa hal yang perlu menjadi perhatian

dalam merancang sebuah Web, antara lain:
1. Sign System WebSite
Dalam menjelajah sebuah web, kadang diperlukan sebuah Sistem Tanda

(Sign System), yang dapat dibagi atas:
Menurut Fungsinya:
Button Menu Utama, Contoh:
e t
a N
d r
e n
H
Button Sub Menu, Contoh:
By
Navigasi, Contoh:
Back
(Back to Top)
Next
Page 173 / 197

Button Lain-lain, Contoh:
Download SIGN IN Home
SKIP Isi ! Batal !
Menurut Bentuknya:
Icon Menu :
Tombol Menu yang disertai Simbol/Grafis yang unik.
Location Tarif & Package Schedule NEWS
e t
a N
d r
e n
H
By
Hover Button :
Tombol yang memiliki efek/berubah bila disentuh kursor mouse.
Bullets :
Icon Kecil. (Lihat :)
Web Application :
 Original Concept Application Design
 Database design
 Database manipulation application
 Database Technology :
 Mapping Database
Mini Icon (Bullets)
Page 174 / 197

2. Form Field
Form Pilihan ataupun Isian untuk keperluan-keperluan tertentu

(Terdapat Program khusus), antara lain:
Drop Down Menu / Multi Select Drop Down Menu
Text Box
e t
a N
Memo Box
d r
e n
H
By Check Box
Page 175 / 197

3. Lain-lain
Site Map
Struktur Web dalam bentuk bagan
Index.html / Default.html
Merupakan nama file untuk halaman pertama dan sudah merupakan standard
perancangan web saat ini.
Hit Counter
Angka yang menunjukkan jumlah pengunjung.
Banner
Banner Sponsor /Informasi Singkat /Promosi produk tertentu.
Agar menarik, biasanya dibuat animasi atau memakai effect-effect tertentu.
Hak Cipta /Mandatoris /webmaster /Disclaimer

Biasanya diletakkan pada Cover (Paling Bawah) dan atau di tiap halaman.
Contoh :
info@siloamgleneagles.com
e t
Please send comments, feedback, and suggestions to
a
Copyright ©1999 - Siloam GleneaglesN
About Webmaster - Last update on 5 July 2002
d r
e n
Get a better view from our web site through 800x600 screen resolution,
High Colour 16 Bit and more features by access with Internet Explorer 4.0.
H
By
Data contained here in is solely for information only & should not be used as a basis for any transaction
whatsoever.
Siloam Gleneagles shall not be held liable or responsible for any inaccuracies in the data
obtained from outside sources.
Menu Interaktif / Fasilitas Pendukung
Interaktif, terjemahan gampangnya adalah: “Komunikasi”.

Menu Interaktif di Internet maknanya adalah Komunikasi antara Netter dengan
Netter lain dan Pemilik Web yang bersangkutan.
Menu Interaktif ada beberapa macam, antara lain:
GUESTBOOK
Buku tamu biasa digunakan supaya pengunjung web kita dapat meninggalkan
pesan dan kesannya tentang web Anda.
WEB HOSTING
Tempat menyimpan file html, agar desain homepage kita dapat dilihat oleh
pengunjung di seluruh dunia.
CHATTING
Fasilitas ngobrol.
Page 176 / 197

POOLING / Jajak Pendapat

Bila Anda ingin tahu jawaban terbanyak dari para pengunjung tentang pilihan
dari pertanyaan-pertanyaan Anda.
MAILING LIST
Membuat komunitas lewat email yang membicarakan hal-hal tertentu bersama
orang lain.
WEB STATISTIK
Melihat statistik homepage Anda. Dari mana saja pengunjung berasal, browser
apa saja yang mereka pakai, hari apa saja homepage kita ramai dikunjungi
orang.
WEB CHECK
Mengetahui kecepatan loading dan spesifikasi tentang homepage anda.
Konsultasi
Message Board
Dan masih banyak lagi…
Untuk menambahkan Fasilitas pendukung tersebut, Anda dituntut paham

tentang pemrograman asp, php, atau perl.
e t
a N
d r
Namun ada banyak situs yang menyediakan fasilitas tersebut secara Cuma-Cuma
(Gratis) namun tentunya hal yang kita dapatkan secara gratis akan diimbangi
e n
dengan sesuatu yang harus kita terima. Biasanya mereka menampilkan banner
H
[iklan] di homepage kita dan ini sebenarnya sangat menganggu, tapi tetap saja
By
kita harus menerima bila ingin menggunakan fasilitas gratis tersebut.
Web Hosting
Pilihlah Rumah Yang Nyaman Untuk Homepage Anda!
Pada saat Anda membangun sebuah situs web atau homepage, pada saat itu juga Anda
harus berpikir web hosting mana yang ingin digunakan. Sebab agar situs yang Anda buat
dapat dilihat pengunjung dari segala penjuru dunia, file web tersebut mau tidak mau harus
diletakan di sebuah server web yang tersambung ke internet 24 jam setiap hari.
Komputer atau server tersebut dapat berupa komputer di rumah, kantor atau di service
web hosting yang banyak bertaburan di internet. Dan apapun yang Anda pilih, selalu ada
pro dan kontra yang harus diperhitungkan baik-baik.
Saat ini ada banyak perusahaan yang menyediakan tempat gratis untuk menempatkan situs
web Anda misalnya, Geocities, Tripod dll. Persoalannya sekarang adalah: Anda harus
memilih yang mana? Yang gratis atau yang bayar? Apakah harus memilih tempat yang gratis
tersebut atau menyewa tempat di suatu perusahaan web hosting?
Semua pilihan - akhirnya - kembali harus Anda yang memutuskan. Sebagai satu
pertimbangan terpenting adalah seberapa serius Anda membuat situs web tersebut. Jika
hanya main-main, iseng, atau kepepet, tentu situs gratis harus Anda jadikan pilihan. Tetapi
jika Anda ingin serius serta takut jatuh gengsi, maka yang Anda harus pilih adalah jasa web
hosting dan web design profesional.
Page 177 / 197

Apa sih bedanya yang signifikan? Silahkan Anda baca tabel dibawah ini:
Fasilitas Gratis Bayar

Kapasitas Terbatas Tergantung yang Anda bayar
Keamanan Sesuai yang disediakan Lebih baik dari yang gratis
Banner Iklan Banyak Tidak ada
Penggunaan Script Tidak ada - Terbatas Sesuai yang Anda bayar
Manajemen Informasi Agak bikin repot Mudah
Up to date Tidak terbatas Tidak terbatas
CATATAN:
 Tidak ada situs web yang tidak bermasalah. Misalnya, Anda tidak bisa
meng-update isi, situs tidak bisa di akses, dan yang paling parah adalah
situs Anda di hack orang. Jika salah satu contoh diatas terjadi, yang
harus Anda lakukan adalah menghubungi bagian customer service.
 Hati-hati, banyak perusahaan yang menawarkan kecepatan akses!
Supaya Anda tidak terjebak, jika memungkinkan, Anda harus melihat
dalam server macam apa data Anda akan tersimpan. Kalau Anda punya
duit cukup banyak, lebih bagus bila Anda memasang server sedniri
[server colocation] di sebuah perusahaan ISP, web hosting atau data
center.
 Cari tahu berapa banyak situs web yang tersimpan di satu server.
prosesor Pentium 1 GHz dan RAM 512 MB. e t

Optimalnya adalah sekitar 100 - 150 situs untuk sebuah server dengan

a N
Tanyakan pada web hosting yang Anda pilih, apakah perusahaannya
r
membuat backup secara teratur. Seandainya tidak, lekas-lekaslah Anda
d
n
angkat kaki dan mengucapkan selamat tinggal. Cari perusahaan yang
e

lain!
H
Keamanan. Bagian ini amat penting. sebab data Anda yang tersimpan
By
harus aman 'lahir-batin'. Syukur-syukur ada asuransi yang bisa Anda
klaim, kalau server perusahaan tersebut mengalami kerusakan yang
cukup lama.
mau PILIH YANG GRATIS ?
Jika Anda ingin membuat sebuah web pages yang kecil dan sangat sederhana,
sebaiknya pilih yang gratis saja. Ada banyak situs-situs yang menyediakan layanan
gratis ini.
Pada web hosting gratis yang cukup terkenal seperti Geocities telah menyediakan
beberapa cara untuk membuat dan mem-promosikan situs Anda dengan beberapa
langkah mudah. Tool pembuatan situsnya terbagi dalam dua kategori: PageWizard
untuk pemula, dan File Manager and Advanced HTML Editor untuk pemakai yang
lebih mahir.
Untuk pemula, Anda tinggal menjawab beberapa pertanyaan yang sudah tertera di
sana, dan Geocities akan langsung membuatkan sebuah situs yang menarik untuk
Anda.
Fasilitas pendukung [Add On] yang diberikan oleh Geocities sangat beragam. Dari
mulai Hits Counters, Guest Book, Statistik, Keadaan Cuaca, Game sampai Web
Page 178 / 197

Camera! Anda dapat menambahkan semua fasilitas yang tersedia secara cuma-
cuma.
Berbeda dengan Geocities yang hanya menyediakan tempat gratis sebesar 15 MB,
Tripod akan menyediakan 50 MB untuk Anda. Selain mendukung fasilitas FTP dan
Frontpage 2000, Anda juga dapat memilih applikasi CGI Script serta Javascript. Bila
bergabung ke Lycos, Anda akan diberikan e-mail dan voicemail, instant messaging,
download software dan mendengarkan lagu-lagu kesukaan Anda. Semuanya - sekali
lagi - gratis!!!
Nah, jadi tunggu apa lagi? Masih banyak kok situs-situs yang menyediakan web
hosting gratis. Kapasitas dan fasilitasnya - tentu saja - berbeda-beda. Anda bisa
memilih yang mana saja sesuai selera!
Langkah-Langkah Membuat Homepage
Ada bermacam-macam langkah yang digunakan profesi web untuk membuat suatu
website/ homepage. Berikut ini adalah proses secara umum yang dilakukan
kebanyakan profesi web di Indonesia untuk membuat web.
1. Membuat Sketsa Desain : Desainer biasayanya menuangkan ide dalam

membuat interface suatu homepage dalam bentuk sketsa di kertas dahulu.
e t
Untuk itu jangan pernah melupakan “Sketsa” dalam memulai setiap
rancangan… karena perencanaan yang baik adalah Sketsa. (sketsa adalah
“Senjata utama” seorang desainer). a N
2.
d r
Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan
n
software seperti Adobe Photoshop /Adobe Illustrator /Macromedia
e
H
Fireworks /Macromedia Freehand, dan banyak lagi (sesuai selera) untuk
memperhalus sketsa desain.
3.
By
Membagi gambar menjadi potongan kecil-kecil : Setelah layout desain
homepage sudah jadi. File gambar tersebut dipecah menjadi potongan
kecil-kecil untuk mengoptimize waktu download pengunjung situs. Untuk
melakukan hal tersebut dapat digunakan software Adobe Image Ready.
Software ini dapat langsung memotong gambar yang besar tadi dan
otomatis juga menjadikannya ke dalam format html.
4. Membuat Animasi : Animasi diperlukan untuk menghidupkan
web/homepage kita agar menarik pengunjung. Macromedia Flash dan Gif
Construction Set dapat dipakai untuk melakukan hal tersebut.
5. Membuat HTML : Setelah itu kita merapikan layout desain kita seperti
menempatkan beberapa tombol dan gambar, menambah text, mengedit
script HTML, membuat layout form ke dalam format HTML. Untuk itu kita
perlu software HTML Editor seperti Macromedia Dreamweaver, Microsoft
Frontpage, dll (sesuai selera).
6. Programming dan Script : Untuk website e-commerce, iklan baris, lelang,
database, membuat guestbook, counter, dan forum diskusi. File HTML kita
perlu programming untuk melakukan aktivitas semacam itu. Programming
dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI,
PHP, Visual Basic. Dan perlu diperhatikan bahwa programming dan script
ini biasanya dilakukan setelah desain web/homepage kita telah jadi.
7. Upload HTML : Setelah file kita telah menjadi html beserta gambar dan
scriptnya, kita perlu meng-upload file kita ke suatu tempat (hosting0, agar
semua orang di dunia dapat mengakses halaman html kita. Biasanya
Macromedia Dreamweaver dengan fasilitas site FTP dan Microsoft
Page 179 / 197

Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau

dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP.
8. Homepage Pribadi : Untuk homepage pribadi atau yang sekedar ingin
coba-coba biasanya setelah file html sudah jadi dapat hosting di tempat-
tempat gratis, memakai guestbook dan counter gratis dan menambah
macam-macam accesories dalam mempercantik homepage pribadi
tersebut. Lihat tutorial Fasilitas gratis pendukung homepage.
Cara Mengenalkan Homepage
Setelah Anda selesai mendesain dan meng-upload file bukan berarti tugas Anda
sudah selesai. Apa artinya Anda punya website tapi nggak ada orang yang tahu ?
Nah, supaya website Anda dikenal orang ada beberapa cara yang bisa Anda
lakukan, yaitu :
 Daftarkan ke search engine

Search engine banyak digunakan orang untuk mendapatkan alamat suatu
situs berdasarkan keyword yang mereka masukkan. Di internet sekarang ini
terdapat ratusan, bahkan ribuan search engine. Mulai dari yang ecek-ecek
sampai yang besar (yang dikelola secara professional). Anda tidak harus
mendaftarkan web Anda ke semua search engine tersebut, tapi daftarkan
saja ke beberapa search engine yang terkenal (baik itu yang ada di
Indonesia maupun di luar negeri).
e t
N
Yang pertama, pada saat Anda mendaftar pada suatu search engine Anda
a
d r
harus memasukkan keyword dan deskripsi singkat tentang web site Anda.
Contohnya Search Indonesia, Catcha, Google dll.
e n
H
Yang kedua, pada saat mendaftar Anda cukup menunjukkan URL website
By
Anda. Setelah itu, search engine tersebut akan "menjelajah" ke web Anda
dan mencari keyword dan deskripsi yang terletak pada meta tag halaman
web Anda. Untuk itu, sebelum upload, pastikan bahwa Anda telah
menuliskan meta tag tersebut dengan benar.
 Ikut Banner Exchange

Ini cara lain untuk mengenalkan web Anda. Dengan mengikuti pertukaran
banner maka Anda diwajibkan untuk menampilkan banner orang lain (yang
menjadi anggota) pada situs Anda. Dan sebaliknya banner Anda pun akan
ditampilkan pada situs lain. Ukuran banner yang digunakan biasanya 468 x
60 pixel. Untuk membuat banner GIF Animasi Anda dapat menggunakan
Adobe ImageReady.
Profesi-Profesi Pekerja Web

Tumbuhnya internet makin lama makin sangat diperlukan oleh segala lapisan masyarakat,
mulai dari kalangan pelajar sampai kepada kalangan bisnis. Dengan adanya World Wide Web
membuat dunia informasi semakin diminati dan dirasakan kegunaannya, dimulai dari
penayangan profil hingga ke jalur transaksi sudah banyak dilakukan melalui web di masing-
masing situs milik masing-masing. Kebutuhan seperti ini menimbulkan banyak profesi-
profesi baru didalam dunia internet, diantarnya :
Page 180 / 197

- Web Designer - Web Programmer - Web Administrator - Web Master - Web Developer
Web Designer
Tugasnya adalah pendisainan tampilan situs (web) mulai dari pengolahan gambar, tata
letak, warna, dsb. Didalam pendandanan suatu situs seorang Web Designer harus menguasai
:
- HTML, DHTML
- Pengolah Gambar
- Animasi, Movie (Film)
Web Programmer
Jika situs yang akan dibuat mempunya fasilitas interaksi antara pengunjung dan situs
misalnya menyangkut dengan transaksi, input output data dan database maka seorang Web
Programmer yang akan mengerjakannya dengan membuat aplikasi-aplikasi yang berkerja
diatas situs (web). Penguasaan yang biasanya harus dikuasai pada umumnya oleh Web
Programmer :
- CGI Perl, PHP, MySQL (Unix base)
- ASP (NT base)
- JSP (Java Server Page)

- Java Script dan Applet
Web Administrator
e t
Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi Server,
N
baik itu mulai dari instalasi sampai kepada masalah (troubleshooting), biasanya seorang
a
Web Administrator harus menguasai :
- OS Unix (LInux, FreeBSD, dll)
d r
- OS NT
e n
- Jaringan (LAN, WAN, Intranet)
- Keamanan Server H
Web Master By
Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai dari desain,
program dan keamanan server namun tidak terlalu turut mencampuri ke masing-masing
divisi, cukup dengan mempertanggun jawabkan atas jalannya suatu situs (web). Penguasaan
yang harus dimiliki :
- HTML, DHTML
- Web Desain (DreamWeaver, Flash, Adobe)
- CGI Perl, PHP, MySQL, ASP, Java
- Penguasaan bermacam OS (Operating System)
- Keamanan Server
- Jaringan (LAN, WAN, Intranet)
Web Developer
Kegiatan diatas secara keseluruhan dinamakan suatu team yang dinamakan Web Developer.
Dari kesemua penjelasan ini hanya bersifat pada umumnya, jika ada kerangkapan tugas
maupun penambahan penguasaan dan pengetahuan, semua tergantung dari kebutuhan
pihak masing-masing.
Page 181 / 197

e t
a N
d r
e n
H
By
Page 182 / 197

Lebih lanjut dengan promosi web melalui search engine
Promosi website manjadi begitu penting, karena mendatangkan pengunjung sama

susahnya (bahkan lebih susah) daripada membuat website itu sendiri. Jika Anda baru saja
berhasil membangun sebuah website, itu hanya merupakan langkah awal dari proses web
development. Karena indikator utama sukses atau tidaknya sebuah website dilihat dari
banyaknya jumlah pengunjung potensial yang datang. Dalam hal ini, meskipun Anda
memiliki website dengan desain yang mewah dan teknologi scripting yang canggih, belumlah
bisa dikatakan sukses jika memiliki jumlah visitor yang kecil.
Banyak pengusaha-pengusaha yang merasa kecewa karena telah menghabiskan banyak biaya
untuk membuat website perusahaan, tetapi tidak mendatangkan hasil seperti yang diharapkan.
Penjualan produk dan jasa perusahaan tidak bisa meningkat seperti yang diharapkan. Semua
ini terjadi karena mereka kurang memperhatikan sisi promosi website, yang sebenarnya
merupakan bagian termahal dari proses web development.
Dalam hal ini banyak cara yang bisa dilakukan untuk mempromosikan website.
Promosi bisa dilakukan mulai dari cara tradisional secara off-line dengan memasang spanduk
pada tempa umum, melaui selebaran, melalui televisi dan radio hinnga secara on-line atau
memanfaatkan teknologi web. Pada bagian ini difokuskan pada pembahasan search engine
(mesin pencari) yang menyangkut kategorisasi search engine, cara kerja dan bagaimana
mempromosikan situs web secara efektif melalui search engine.
Promosi situs Web melalui Search Engine

Search Engine vs Directory
e t
a N
d r
Keuntungan promosi melalui search engine dapat dilihat dari kenyataan bahwa lebih
dari 80% pemakai internet mengandalkan search engine sebagai alat pencari informasi
e n
(berdasarkan research dari Georgia Tech's GVU Center). Jumlah ini akan terus bertambah
H
mengingat search engine merupakan cara yang termudah dan tercepat dalam mencari
By
informasi. Dengan terdaftarnya website Anda di search engine berarti akan memudahkan
orang lain mencari informasi produk/jasa yang Anda tawarkan. Yang lebih penting lagi,
informasi Anda akan jatuh pada orang yang tepat, karena pencarian pada search engine
disesuaikan pada keyword/kata kunci serta sistem direktori yang sangat terstruktur.
Sebelum melangkah lebih lanjut ada baiknya kalau Anda mengetahui apa itu search
engine, bagaimana mereka bekerja, dan apa perbedaan antara search engine dan directory.
Search engine merupakan sebuah sistem database yang dirancang untuk meng-index alamat-
alamat internet (URL, FTP, usenet, dll). Untuk melaksanakan tugasnya ini, search engine
memiliki program khusus yang biasanya disebut spider, bot, atau crawler. Pada saat Anda
mendaftarkan sebuah alamat web (URL), spider dari search engine akan menerima dan
menganalisa URL tersebut. Dengan proses dan prosedur yang serba otomatis, spider ini akan
memutuskan apakah web yang anda daftarkan layak diterima atau tidak. Jika layak, spider
akan menambahkan alamat URL tersebut ke sistem database mereka. Rangking-pun segera
ditetapkan dengan algoritma dan caranya masing-masing. Jika tidak layak, terpaksa Anda
harus bersabar dan mengulangi pendaftaran dengan periode tertentu. Jadi semua yang
namanya search engine, pasti memiliki program yang disebut Spider. Dan program inilah
yang sebenarnya menentukan apakah web site Anda bisa diterima atau tidak. Contoh
beberapa search engine terkenal adalah : Altavista, Google, Lycos, Northern Light, Hotbot,
dan masih bayak lagi.
Berbeda dengan directory yang meng-index halaman web secara manual. Manual yang
dimaksud adalah mereka menggunakan orang biasa untuk menganalisa setiap halaman web
yang masuk. Tidak menggunakan spider atau crawler seperti halnya search engine.
Keunggulan directory dibanding search engine adalah memberikan hasil pencarian yang lebih
relevan dengan kualitas yang relatif lebih baik. Tapi karena semua proses dilakukan secara
Page 183 / 197

manual menggunakan editor manusia, jumlah database yang dimiliki biasanya jauh lebih kecil
dibandingkan dengan search engine. Itulah sebabnya sekarang ini banyak perusahaan yang
mengelola directory menerapkan sistem ganda, yaitu menggunakan directory + search engine.
Contoh nyata adalah Yahoo yang menggandeng Google sebagai search engine default-nya.
Contoh beberapa directory terkenal selain Yahoo adalah Open Directory Project, Looksmart,
dan NBCi.
Setelah mengetahui perbedaan antara search enginan dan directory, bagian
selanjutnya akan menjelaskan bagaimana mengoptimalkan halaman web Anda (dari segi
HTML), sebelum didaftarkan ke search engine. Akan sangat baik kalau Anda sebelumnya
sudah mengerti atau pernah belajar bahasa HTML, karena yang akan dibahas pada tutorial ini
banyak berhubungan dengan teknis penulisan HTML. Bagi yang sama sekali belum pernah
mempelajari HTML, saya sarankan untuk membaca tutorialnya terlebih dahulu. Tidak perlu
secara detail, cukup dasar-dasarnya saja. Tutorial HTML yang lumayan lengkap dapat Anda
temukan disini.
Rangking pada Search Engine
Memiliki halaman web yang enak dipandang mata, belum tentu memberikan
hasil yang baik pada search engine. Pada bagian ini akan dijelaskan bagaimana cara
mengoptimalkan halaman web dengan tag-tag HTML khusus, dan hal-hal apa saja
yang mempengaruhi rangking pada Search Engine.
Setiap search engine memiliki cara dan algoritma masing-masing untuk

t
menentukan rangking sebuah website. Tetapi beberapa poin dibawah ini sudah
e
web site Anda memakainya. a N
umum dipakai tolok ukur oleh sebagian besar search engine, dan pastikan kalau
d r
Keyword pada domain name, jika suatu website yang berisi koleksi lagu-lagu mp3 misalnya,
n
akan sangat baik kalau digunakan domain www.mp3.com. Ini adalah cara kuno, tetapi sampai
e
H
saat ini masih tetap dipakai oleh search engine.
Keyword pada nama file, misalnya Anda memiliki halaman web yang berisi informasi
By
mengenai hotel di bali, sebaiknya disimpan dengan nama bali-hotels.html, ini juga akan
mempengaruhi rangking.
Keyword pada page title, tag <title> pada halaman HTML sangat penting untuk
dioptimalkan. Usahakan agar title yang digunakan mengandung keyword yang relevan
dengan isi halaman web.
Keyword pada headline, bagi Anda yang sudah menguasai HTML tentu mengenal tag
<H1>,<H2>, dst. Tag headline sangat baik dipakai untuk judul sebuah paragraf, misalnya :
<H1>Hotels in Bali</H1>. Headline sangat diperhitungkan oleh Search Engine.
Keyword yang relevan pada meta tag, Meta tags, adalah tag-tag HTML khusus yang
digunakan untuk menggambarkan keseluruhan dari isi web Anda. Meta tag akan kita bahas
secara khusus di bagian berikutnya. Janganlah menggunakan keyword yang sama sekali tidak
ada hubungannya dengan isi halaman web Anda. Hal ini bisa dideteksi oleh search engine dan
akan dianggap spamming.
Keyword pada page content, keyword yang diharapkan harus terdapat pada isi
halaman web. Gunakan juga frase atau kata-kata lain yang berhubungan dengan
keyword utama.
Link Popularity, adalah jumlah halaman web lain yang memasang link ke web site
Anda. Beberapa search engine utama sangat memperhatikan hal ini. Semakin besar
link popularity suatu web site, rangkingnya akan semakin tinggi.
Beberapa poin yang dijelaskan diatas akan dibahas lebih mendalam. Jika web site
sudah dioptimalkan sesuai dengan 7 poin tersebut, diharapkan akan mendapat
rangking yang baik pada search engine.
Page 184 / 197

Penggunaan Meta Tag
Ada banyak meta tag sesuai dengan standar HTML 4.0 dari World Wide Web
Consortion, tapi sebenarnya yang betul-betul dipakai oleh search engine hanya 3,
description, keyword, dan robots. Lihat pada lampiran untuk mengetahui labih lanjut
Meta Tag.
Meta Tag Description

Meta tag description digunakan untuk memberikan gambaran umum mengenai isi
dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan
agar description ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page
yang bersangkutan. Contoh penulisan meta tag description adalah sebagai berikut:
<meta name="description" content="Promosi-web.com is a search engine tutorial that
explain how to get top rangking in all major search engine and get high traffic for your web
site. Available in Bahasa Indonesia.">
Beberapa search engine seperti Nothern Light dan Google tidak memakai meta tags sebagai
deskripsi hasil pencariannya. Yang mereka gunakan adalah kalimat-kalimat awal yang ada
pada halaman tersebut. Itulah sebabnya kenapa saya sarankan agar Anda menggunakan isi
dari meta tag description sebagai kalimat pembuka. Dan jika bagian paling awal dari web
Anda berupa sebuah menu, maka deskripsi yang ditampilkan pada hasil pencarian Northern
Light adalah seperti ini :
Home | Products and Service | Contact Us | About Us ...welcome to our online store, the best
place on the web to...
e t
Meta Tag Keyword
a N
Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa
d r
yang bisa menemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag
keyword adalah sebagai berikut :
e n
H
<meta name="keywords" content="keyword1 keyword2 keyword3 ...">
atau ada juga yang menulis dengan pemisah tanda koma :
By
<meta name="keywords" content="keyword1, keyword2, keyword3, ...>
Keduanya berfungsi sama dan tidak ada pengaruhnya pada search engine. Tujuan pemakaian
tanda koma agar keyword-keyword tersebut lebih mudah dibaca. Yang perlu diperhatikan
disini adalah jangan mengulang sebuah kata lebih dari 3 kali, karena akan dianggap
spamming. Contoh pemakaian meta tag keyword yang salah adalah :
<meta name="keywords" content="bali, bali hotels, travel in bali, bali island, bali weather>
Disini terlihat sekali bahwa kata "bali", diulang lebih dari 3 kali. Contoh berikut ini tidak akan
dianggap spamming oleh search engine :
<meta name="keywords" content="bali hotels travel bali island bali weather">

Yang tak kalah pentingnya mengenai keyword adalah jangan membuat keyword yang tidak
ada hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming.
Misalkan web Anda memuat informasi mengenai pariwisata di Bali, jangan sekali-kali
menambahkan "MP3" atau "Britney Spears" sebagai keyword hanya karena keyword-
keyword ini merupakan keyword favorit di internet dan banyak dicari orang.
Meta Tag Robots
Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web
yang mana bisa di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat
berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita
tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine. Format
dasar dari meta tag robots adalah sebagai berikut :
Page 185 / 197

<meta name="robots" content="index | noindex | follow | nofollow">

Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link
yang ada maka tambahkan perintah berikut ini :
<meta name="robots" content="index follow">
Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk
mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).
Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri
link yang ada pada suatu halaman web.
<meta name="robots" content="noindex nofollow">
Setelah mengetahui tentang meta tag, bagian selanjutnya akan membahas mengenai
penyusunan content/isi halaman web yang search engine friendly, karena content merupakan
hal penting dalam kesuksesan situs web.
Pengoptimalan content situs web

Content adalah raja. Itulah kunci sukses untuk mendapatkan rangking yang tinggi
pada search engine. Bagian ini akan menjelaskan bagaimana merancang isi halaman web
yang search engine friendly. Namun tetap harus dijaga, agar visitor Anda betah membacanya.
Satu hal yang perlu diingat adalah website yang Anda miliki dirancang untuk visitor, bukan
untuk search engine. Janganlah terlalu berlebihan hanya karena ingin mendapat rangking
yang tinggi, tapi justru membuat isi halaman web tidak enak untuk dibaca. Jika hal ini tidak
dierhatikan, maka visitor hanya akan datang sekali saja dan mereka akan enggan untuk
berkunjung lagi. Langkah pertama, susunlah isi web Anda secara biasa. Buat kalimat-kalimat
e t
yang menarik dan enak untuk dibaca. Tetapi usahakan agar keyword-keyword pada meta tag,
terpakai pada kalimat-kalimat di awal paragraf. Jagalah agar topiknya tidak terlalu meluas dan
a N
tetap spesifik. Sebuah halaman web yang baik hanya berisi dua sampai tiga fokus bahasan.
r
Tip-tiperikutmerupakan langkah selanjutnya untuk mengoptimalkan halaman web: .
d
e n
Perhatikan penggunaan gambar. Hindari penggunaan gambar/image yang terlalu berat pada
web Anda. Usahakan agar ukuran halaman web + gambar tetap dibawah 64 kb. Gunakan
H
software-software seperti Adobe Photoshop (menu file - save for web) untuk mengoptimalkan
By
gambar. Penggunaan Flash dan Java yang berlebihan sebaiknya dihindari.
Hindari pemakaian frame. Frame memang baik dipakai sebagai navigasi, tetapi bisa
membingungkan search engine. Halaman utama frameset biasanya tidak berisi content apa-
apa. Kalaupun Anda terpaksa menggunakan frame, ingatlah mencantumkan tag
<noframe></noframe> dan tuliskan rangkuman dari isi halaman web Anda pada tag tersebut
agar search engine yang tidak mendukung frame masih bisa membacanya.
Rancanglah agar web Anda bisa dibaca oleh semua browser. Halaman web yang tampak
cantik di Internet Explorer kadang-kadang hanya tampak blank pada Netscape Navigator.
Hati-hatilah dengan hal ini karena bisa menurunkan rangking pada search engine. Bukankah
kecantikan itu juga relatif bagi setiap orang :)
Gunakan keyword utama pada title halaman web. Isi dari tag <title></title> sangat
berpengaruh pada rangking search engine. Rancanglah sebuah title yang menarik untuk
dibaca dan jaga agar ukurannya tidak melebihi 70 karakter.
Usahakan agar halaman web Anda memakai page headline (H1-6), dan gunakan keyword
utama sebagai <H1>healine</H1>. Hindari pemakaian font yang terlalu kecil <font
size="1"> dan susah dibaca.
Jika Anda memasang image ingatlah agar selalu melengkapinya dengan atribut alt. Beberapa
search engine menggunakan alt tag sebagai pedoman relevansi hasil pencarian. <IMG
SRC="gambar.jpg" ALT="tambahkan beberapa keyword utama disini">.
Meskipun tidak banyak, beberapa search engine juga membaca comment tag. Isilah comment
tag Anda dengan beberapa keyword yang relevan.
Beberapa search engine utama seperti Altavista dan Google memberikan poin lebih banyak
untuk paragraf-paragraf yang letaknya di awal. Jadi seperti yang sudah disebutkan
sebelumnya, usahakan memakai keyword-keyword andalan Anda di awal halaman.
Page 186 / 197

Doorway Page
Memang agak susah untuk mengoptimalkan halaman web sesuai dengan ketujuh tips
yang diberikan sebelumnya. Terutama dari segi content. Apalagi jika Anda membuat web
untuk sebuah perusahaan. Semua content (kalimat/paragraf) sudah diberikan apa adanya.
Anda tidak mungkin merubahnya dengan begitu saja. Begitu juga untuk web-web semacam
portal yang isinya beragam. Walaupun halam index-nya sudah Anda bolak-balik, tetap saja
susah mendapat posisi bagus untuk keyword tertentu. Jika menghadapi situasi seperti ini,
saatnya Anda menggunakan doorway page. Doorway page adalah sebuah halaman web yang
dibuat untuk menonjolkan satu sampai dua keyword saja. Satu atau dua keyword tersebut
akan menjadi inti pembicaraan dari sebuah halaman, sehingga search engine akan
menganggap isi halaman tersebut lebih relevan. Dari doorway page ini, bisa dipasang link
yang mengarah ke halaman index yang sebenarnya. Sebut saja Anda memiliki website
www.promosi-web.com, tetapi halaman indexnya sudah tidak bisa dioptimalkan lagi. Untuk
itu Anda harus membuat sebuah doorway page bernama promosi.html, karena "promosi"
adalah keyword yang Anda harapkan. Tapi perludiingatkan, pakailah doorway page hanya
jika terpaksa. Alangkah baiknya kalau Anda bisa mengoptimalkan halaman index yang asli.
Jika Anda sudah memutuskan untuk membuat doorway page, perhatikanlah langkah-langkah
berikut ini.
Putuskan untuk keyword apa doorway page tersebut akan dibuat. Pilih satu sampai tiga kata
yang Anda anggap paling potensial dan berhubungan dengan web Anda.
Optimalkan title, meta description, dan meta keyword-nya, sesuai dengan keyword utama
yang Anda pilih.
e t
Mulailah membuat content yang panjangnya minimal 3 paragraf. Jangan membuat halaman
a N
yang terlalu pendek, karena beberapa search engine seperti Altavista dan Northern Light akan
r
memprioritaskan halaman yang kaya akan content. Usahakan agar keyword-keyword yang
d
e n
Anda pilih dipakai pada setiap paragraf.
Jika menggunakan gambar, jagalah agar ukurannya tidak terlalu besar dan isi bagian alt-nya
dengan keyword yang Anda pilih. H
By
Simpan halaman web Anda dengan nama yang sebenarnya, contoh : promosi.html, jangan
disimpan dengan nama index1.htm atau index2.html.
Setelah semuaya sudah siap. selanjutnya sudah bisa mulai mendaftarkan website Anda ke
berbagai search engine utama.
Halaman Dinamis untuk Search Engine
Halaman web dinamis memang membuat tugas kita sebagai pengelola web menjadi
lebih mudah. Kita dapat mengupdate content setiap saat melalui sesi admin yang user friendly
tanpa harus membongkar kode-kode HTML. Semua itu memang sangat mengefisienkan
waktu dan tenaga. Tetapi ingat, tidak semua yang mudah itu baik. Spider dari search engine
lebih suka melahap halaman-halaman web yang bersifat statis ketimbang halaman dinamis
yang bisa berubah setiap saat.
Halaman dinamis biasanya ditandai dengan URL yang juga bersifat dinamis (ditandai dengan
adanya tanda tanya pada URL, seperti :
ttp://www.myweb.com/index.php?page=1). Dalam hal ini halaman dinamis bisa kelompokkan
menjadi dua macam, yaitu : content yang sama pada URL yang berbeda dan content yang
berbeda pada URL yang sama.
Spider bisa kebingungan pada saat menemui sebuah halaman web yang isinya sama, tapi
terdapat pada alamat URL yang berbeda-beda. Disini website kecil akan terlihat besar karena
banyaknya halaman, padahal isinya kebanyakan sama. Jika menemui kasus seperti ini, spider
dengan mudah akan mengabaikan website tersebut karena dikategorikan sebagai spamming.
Hal ini perlu dihindari.
Page 187 / 197

Lain lagi pada kasus kedua yaitu content yang berbeda terdapat pada URL yang sama. Kasus
seperti ini biasanya terjadi pada halaman-halaman web yang diupdate pada jangka waktu
yang pendek, setiap jam atau bahkan setiap menit. Dalam hal ini search engine hanya
mengindex halaman tersebut sesuai dengan jadwal kedatangan spider, biasanya 3 minggu
hingga 3 bulan. Meskipun halaman tersebut diupdate keesokan harinya, listing di search
engine tetap tidak akan berubah, dan hanya akan berubah apabila spider sudah
mengunjunginya lagi.
Ada dua solusi yang dapat disarankan, agar sebagian besar halaman dinamis Anda bisa
terlisting, yaitu :
1. Dengan cara membuat site map yang bersifat statis.

Dari halaman site map ini Anda bisa membuat link mengarah pada setiap halaman dinamis
pada website Anda. Spider sangat menghargai link yang Anda buat ke setiap halaman, ia akan
menelusuri link tersebut secara langsung, dan jika halaman dinamis Anda mempunyai content
yang berbeda (tidak bersifat spamming atau mengulang content yang sama), kemungkinan
besar akan diterima. Apalagi halaman-halaman tersebut juga di-link oleh webiste lain yang
mempunyai domain berbeda, kemungkinan terlisting akan lebih besar lagi.
2. Memakai jasa paid inclusion

Jika mempunyai dana lebih, Anda bisa memakai jasa paid inclusion seperti yang disediakan
Altavista atau Inktomi. Dengan service ini spider dari search engine yang bersangkutan akan
datang lebih sering mengunjungi website Anda (bisa 2 sampai 3 hari sekali). Dengan cara ini
listing halaman dinamis Anda akan
e t
terupdate lebih cepat.
a N
d r
Bagaimanapun juga menggunakan halaman statis tetap lebih baik disamping juga lebih
meringankan beban kerja server. Tetapi jika Anda harus menggunakan halaman dinamis,
cobalah cara-cara tersebut.
e n
H
By
Daftar alamat dan layanan Search Engine
Mendaftar ke Search Engine ini ada gratis dan ada yang harus membayar. Search engine yang
tidak gratis akan lebih cepat dalam proses pengeluaran daftar dan lebih banyak jalur search
engine yang saling berhubungan.
Beberapa kategori dalam Search Engine:
The Major Search Engines Paid Listings Search Engines

News Search Engines Specialty Search Engines
Metacrawlers Kids Search Engines
Multimedia Search Engines Regional Search Engines
Search Utilities
Beberapa layanan search engine:
Seach Engine Alamat Site Keterangan

AOL Search http://search.aol.com/
AltaVista http://www.altavista.com Salah satu yang tertua.
Ask Jeeves http://www.askjeeves.com Memberi pelayanan secara personal.
Direct Hit http://www.directhit.com Menampilkan alamat site dan juga
Page 188 / 197

rangkingnya
Excite http://www.excite.com Selain memakai index juga memakai
human-powered.
FAST Search http://www.alltheweb.com/ Salah satu dengan jumlah index
terbanyak yang dijalankan oleh Terra
Lycos.
Google http://www.google.com Pilihan terbaik dari layanan search
engine yang menawarkan banyak web
site dan pencarian images.
HotBot http://hotbot.lycos.com/ Pilihan favorit bagi peneliti.
IWon http://home.iwon.com/index_gen.html Didukung oleh Televisi Network CBS
dan selalu memberikan hadiah-hadiah
secara teratur.
Inktomi http://www.inktomi.com/ Aslinya Inktomi berada di UC
Berkeley kemudian penciptanya
membuka usaha sendiri dengan nama
yang sama dan mengisi index baru.
LookSmart http://www.looksmart.com/ Index untuk pencarian dilakukan
secara bertahap, bekerja sama dengan
MSN Search, Excite, dll.
Lycos http://www.lycos.com/sitemap.asp Lycos memulainya dengan pendataan
berdasarkan web yang masuk dan
masih membutuhkan data dari search
e t
engine lain, namun sekarang sudah
dapat berdiri sendiri.
MSN Search http://search.msn.com/
a N
Bekerja sama dengan LookSmart
d r dengan hasil kedua berasal dari
e n Inktomi, juga dari RealNames, dan

Direct Hit.
Netscape Search's H
http://search.netscape.com/ Hasil pencarian berasal dari Open
Northern Light
By
http://www.northernlight.com/
Directory dan data Netscape. Hasil
kedua datang dari Google, dll.
Pilihan favorit lainnya bagi peneliti
yang menampilkan index yang
banyak, selain itu juga ditampilkan
beberapa dokumen yang tidak dapat
dibuka tanpa bayar.
Open Directory http://dmoz.org/
RealNames http://www.realnames.com Sistem yang digunakan lebih
sederhana dengan hanya
mencantumkan kata kunci yang
sederhana. Merupakan search engine
yang berhasil.
Yahoo http://www.yahoo.com/ Yang paling pupolar yang memiliki
reputasi baik dalam membantu dalam
pencarian informasi dengan mudah.
Page 189 / 197

Lampiran
Tutorial META Tag
META Tag adalah tag-tag HTML yang memberikan informasi keterangan isi
dari suatu halaman web yang akan ditampilkan oleh pengunjung. Search engine
mengenalinya dan digunakan oleh pemilik situs web dan administrator untuk
menentukan positioning dan keterangan pada hasil pencarian search engine. Banyak
search engine dewasa ini bekerja dengan membaca META Tag sebagai bagian dari
formula index.
Meta tag ditempatkan pada lemen <HEAD> </HEAD> dari file HTML.
 META Tag Abstract
Tag Abstract mendefinisikan suatu abstraksi ringkas dari situs web anda
META Tag Abstract sangat menyerupai tag META description, perbedaannya adalah
sebagai suatu abstraksi atau suatu ringkasan pendek dari META tag description.
e t
Pada umumnya META Tag Abstract berupa satu baris kalimat yang memberikan
a N
gambaran seluruh halaman. Walaupun search engine jarang menggunakan tag ini,
d r
n
tetapi merupakan pelengkap yang berguna bagi search engine yang hanya
e
H
membaca sejumlah baris pertama dari halaman web anda.
By
Penulisan META Tag Abstract
META Name: "Abstract"

General Usage: <META name="Abstract" content="Abstract phrase">
Pemakaian oleh Search Engine
Walaupun tidak banyak search engine yang secara khusus mencari META tag
Abstract, tetapi hal tersebut menambahkan suatu generalisasi pada halaman anda di
bagian header yang sering dibaca oleh search engine pada saat menemukan suatu
halaman web.
 META Tag Author
Tag Author mendeklarasikan siapa pembuat dokumen tersebut
Page 190 / 197

META Tag Author mendefinisikan nama dari pembuat dokumen yang sedang dibaca.
Tag ini tidak didukung secara luas tetapi dikenali sebagai bagian dari META Tag
standar. Format data yang didukung meliputi nama, alamat email dari webmaster,
nama perusahaan atau alamat internet (URL). Format yang paling umum adalah
menyisip nama dari orang atau organisasi dan alamat kontak email. Sebagai contoh :
Webmaster (webmaster@submitcorner.com)
Penulisan META Tag Author
META Name: "Author"

General Usage: <META name="Author" content="Author Information">
Walaupun tidak banyak search engine yang secara khusus mencari META Tag
Author, hal tersebut secara jelas mendefinsikan siapa pembuat dan/atau
bertanggung jawab mengupdate halaman web tersebut.
e t
 META Tag Copyright a N
d r
e n
Tag Copyright mendefinisikan informasi tentang hak cipta dokumen tersebut
H
By
META Tag copyright mendefinisikan pernyataan hak cipta yang ingin anda nyatakan
pada dokumen halaman web anda. Anda dapat menyertakan nama merek dagang,
nomor patent, hak cipta atau informasi lain yang ingin anda publikasi sebagai hak
cipta intelektual. META Tag Copyright adalah suatu pernyataan hak cipta dalam
bentuk bebas.
Pemakaian META Tag Copyright
META Name: "Copyright"

General Usage: <META name="Copyright" content="Copyright Statement">
Walaupun tidak banyak search engine yang secara khusus mencari META Tag
Copyright, hal tersebut secara jelas menunjukkan peryataan dari pemilik atau
Page 191 / 197

pengaturan lisensi secara langsung pada bagian header halaman web anda. Pada
umumnya, search engine tidak membaca dan/atau menyimpan informasi ini.
 META Tag Description
Tag Description adalah suatu keterangan umum apa yang terkandung dalam
halaman web anda
Search engine yang mendukung META tag sering menampilkan META tag
description besamaan dengan title halaman anda pada hasil pencariannya. Search
engine sering mengambil seluruh META tag dari field description anda, tetapi
sesuatu yang senantiasa perlu diingat oleh para webmaster adalah keterbatasan
tempat tampilan search engine, biasanya kurang dari 20 kata yang mana dapat anda
gunakan untuk menarik perhatian pemakai, karena alasan ini biasanya ketika
membuat META tag ini, webmaster harus membuat kalimat pertama dari field
description mereka untuk menarik perhatian dari pemakai, dan sisanya untuk
keterangan lebih lanjut.
e t
Pemakaian META Tag Description
a N
d r
META Name: "Description"
e n
General Usage:
H
<META name="Description" content="Your description">
By
Pemakaian oleh Search Engines
META Tag Description dan Keyword adalah dua META tag utama yang dicari oleh
search engine ketika mengindeks halaman web anda. Keterangan dan kata kunci
adalah kata-kata yang ingin anda tampilkan pada hasil search engine, jadi pastikan
bahwa anda memberikan tulisan yang sangat berarti pada kalimat yang ingin anda
gunakan untuk menerangkan seluruh halaman situs web anda.
 META Tag Distribution
Tag Distribution mendefinisikan level dari distribusi dokumen yang ada
META Tag distribution mendefinisikan level atau tingkat dari distribusi dari halaman
web anda dan bagaimana klasifikasinya dalam hubungan dengan metode distribusi
pada world wide web. Sampai sekarang hanya ada tiga bentuk distribusi yang
didukung oleh tag distribution : Global (menunjukkan bahwa halaman web anda
Page 192 / 197

ditujukan untuk distribusi massa pada setiap orang), Local (ditujukan untuk distribusi
lokal dari dokumen anda), dan IU - Internal Use (tidak ditujukan untuk distribusi
umum).
Penulisan Meta Tag Distribution
META Name: "Distribution"

Supported Distributions: Global | Local | IU
General Usage: <META name="Distribution" content="Global">
Note: Only use one of the above
Pemakaian oleh search engine
META Tag Distribution jarang digunakan karena bisanya pembuat halaman web
mendistribusikan halaman mereka kepada setiap orang dengan suatu distribusi
global. Hampir semua webmaster mengabaikan tag ini kecuali anda ingin membatasi
jumlah pembaca, dalam banyak ini pemakaian META tag Robots adalah ide yang
lebih baik.
e t
a N
 Expires META Tag
d r
e n
H
Tag Expires mendeklasikan kepada search engine kapan isi dari situs web anda
akan kadaluarsa
By
META Tag Expires mendefinisikan tanggal dan waktu kadaluarsa dari dokumen yang
diindex. Jika situs web anda hanya digunakan untuk suatu waktu terbatas atau
setelah tanggal tertentu dokumen menjadi tidak sah lagi, anda harus
mengikutsertakan tag Expires untuk memberitahukan kepada search engine kapan
menghapus halaman anda dari database mereka.
Tag expires umumnya digunakan bersamaan dengan Tag Revisit yang berarti
membuat search engine mengunjungi kembali setiap beberapa hari. Hal ini
umumnya digunakan oleh situs web yang mengupdate isi mereka secara berkala
dan ingin search engine memperoleh suatu copy yang terbaru dari ini mereka.
Pemakaian META Tag Expires
META Name: "Expires"

General Usage: <META name="Expires" content="Tue, 01 Jun 1999 19:58:02 GMT">
Note: Requires RFC1123 date as shown above
Page 193 / 197

META Tag Expire pada prinsipnya digunakan sebagai arti memberitahukan kepada
search engine suatu tanggal tertentu ketika mereka harus menghapus halaman anda
dari database mereka. Jika halaman anda kadaluarsa pada suatu tanggal tertentu,
adalah disarankan untuk menentukan tag ini dengan satu atau dua hari sebelum
waktu kadaluarsa sehingga search engine memiliki waktu untuk menghapusnya,
sehingga pengunjung tidak mendapatkan informasi yang sudah kadaluarsa.
 META Tag Keywords
Tag Keyword adalah suatu urutan dari kata kunci yang mewakili isi dari situs anda
Search engine yang mendukung META tag sering menggunakan kata kunci yang
ditemukan dalam halaman anda untuk melakukan kategori situs web anda
berdasarkan pada algoritma indexing pada search engine. Pastikan anda memiliki
e t
kata kunci yang sesuai untuk situs anda dan hindari perulangan yang mana akan
menyebabkan search engine menurunkan
a N
rangking anda sebagai usaha
d r
mengacaukan sistem mereka. Sama dengan META Tag Description, search engine
e n
memberikan prioritas pada sejumlah kata pertama pada keterangan anda, jadi
H
By
fokuskan pada kata kunci utama anda dan yang selanjutnya merupakan sinonim
atau kata lain yang berhubungan.
Pemakaian META tag keyword
META Name: "Keywords"

General Usage: <META name="Keywords" content="first, second, third">
COPYRIGHT Ketika membuat kata kunci untuk situs web anda, jangan mencantumkan
NOTICE: merek dagang atau hak cipta perusahaan lain. Banyak perusahaan telah
memenangkan tuntutan hukum untuk usaha "mencegah" trafik ke pesaing
pada search engine.
META Tag Keyword dan Description adalah dua META tag prinsipil yang dicari oleh
search engine ketika mengindex situs web anda, keterangan dan kata kunci yang
anda tentukan adalah sama dengan kata-kata yang akan ditampilkan pada hasil, jadi
Page 194 / 197

pastikan anda menempatkan kata-kata yang berarti yang menerangkan situs web
anda.
 META Tag Language
Tag Language mendefinisikan bahasa yang digunakan pada halaman web anda
META Tag Language mendeklarasikan kepada pemakai akan bahasa yang

digunakan pada dokumen yang diindex. Search engine yang mengindex halaman
berdasarkan bahasa sering kali membaca tag ini untuk menentukan bahasa apa
yang didukung. Tag ini khususnya sangat berguna bagi situs web bukan berbahasa
english atau memiliki banyak bahasa.
Pemakaian META Tag Language
HTTP-EQUIV: "Content-Language"
Supported All RFC1766 compliant languages. A small excerpt of available languages
Languages: is found below:
BG
CS e t (Bulgarian)
(Czech)
DA
a N (Danish)
DE
d r (German)
EL
EN e n (Greek)
(English)
EN-GB H (English-Great Britain)
ES By
EN-US
ES-ES
(English-United States)
(Spanish)
(Spanish-Spain)
FI (Finnish)
HR (Croatian)
IT (Italian)
FR (French)
FR-CA (French-Quebec)
FR-FR (French-France)
IT (Italian)
JA (Japanese)
KO (Korean)
NL (Dutch)
NO (Norwegian)
PL (Polish)
RU (Russian)
SV (Swedish)
ZH (Chinese)
General Usage: <META HTTP-EQUIV="Content-Language" content="EN">
Page 195 / 197

META Tag Language tidak terlalu sering digunakan oleh search engine walaupun
halaman web anda bukan berbahasa english atau lebih dari satu bahasa, anda
mungkin ingin menggunakan META Tag ini untuk memberitahukan kepada search
engine bahwa situs anda adalah multi-lingual dan memberitahukan bahasa yang
didukung
 META Tag Revisit
Tag Revisit mendefinisikan berapa hari search engine harus mengunjungi kembali
halaman anda
META Tag Revisit mendefinisikan berapa sering suatu search engine atau spider
mengunjungi situs web anda untuk melakukan indexing ulang. Sering kali tag ini
digunakan oleh situs web yang mengubah isi halaman situs mereka dengan suatu
basis tertentu. Tag ini dapat juga digunakan untuk menaikan rangking halaman anda
jika search engine menampilkan hasil berdasarkan pengiriman yang terakhir.
Pemakaian META Tag Revisit

e t
a N
META Name: "Revisit-After"
d r
en
General Usage: <META name="Revisit-After" content="X Days">
Note: X indicates a number
H
Search Engines Usage
By
META Tag Revisit digunakan oleh search engine sebagai arti untuk memberitahukan
berapa sering suatu halaman web harus dikunjungi untuk indexing ulang. Tag ini
didukung oleh banyak search engine dan harus digunakan jika anda mengubah isi
halaman anda secara berkala.
 META Tag Robots
Tag Robots mendeklarasikan kepada search engines apa isi yang akan diindex dan
dijaring
Robots, juga dikenal sebagai suatu spider, adalah mekanisme yang secara otomatis
menjaring situs anda, atau mencari halaman anda untuk melakukan kategori
informasi yang anda kirim ke search engine. Persisnya, seorang pemilik situs web
harus mengirim halaman utama dan robot akan mengunjungi situs anda dan
Page 196 / 197

menggumpulkan semua halaman sub dan link yang berkaitan dengan halaman
utama. Bagaimanapun, tag ini memungkinkan anda mengendalikan halaman mana
saja yang akan di jaring, dan mana saja yang akan diabaikan. Sebagai contoh,
beberapa halaman web dan direktori (seperti: Script CGI) yang tidak anda ingin index
dalam search engine. Gunakan tag robots, anda dapat mendefinisikan halaman yang
diikuti, mana yang diindex dan mana yang diabaikan.
Pemakaian META Tag Robots
META Name: "Robots"

Supported Types: noindex | index | nofollow | follow
General Usage: <META name="Robots" content="index,follow">
META Tag Robots digunakan oleh search engine sebagai suatu arti untuk menentukan tingkat
dari penjaringan yang harus dilakukan oleh suatu search engine. Kebanyakan search engine
mencari META tag ini dan hanya mengindex halaman yang ingin anda index
e t
a N
d r
e n
H
By
Page 197 / 197

Adoc - Pub Modul 1 Dasar Dasar HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Adoc - Pub Modul 1 Dasar Dasar HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

http://www.hendra-jatnika.web.

Modul 1: Dasar-dasar HTML

• HTML adalah singkatan dari Hypertext Markup Language

1.2 Sejarah HTML

 Oktober tahun 1990: pertama kali doleh Berners-Lee's

1.3 Tag HTML

• Tag HTML digunakan untuk mark elemen HTML

1.4 Struktur dokumen HTML

1.5.1 Menformat Text

tag <i> dan </i> untuk membuat text italic

Tabel tag untuk Formating dan Style

Tabel tag Pengaturan Warna dan Backgrounds

1.5.3 Karakter khusus Yang di Cadangkan

• Beberapa tag mempunyai atribut untuk tambahan informasi:

Tabel tag Lists

• Untuk me link kehalaman lain: <a href="URL"> ke halaman </a>

• Untuk link e-mail <A HREF="mailto:psagala@yahoo.com">Mail!</A>

Tabel tag Links dan Gambar

<AREA SHAPE="RECT" COORDS=",,,"

Tabel tag untuk Tables

Desired Width <TD WIDTH=?>

• Frames ditempatkan dalam frameset

Menambah frames pada frameset

– : <form parameters> ...form elements... </form>

Drop-down menu or list

Tabel tag Forms

Contoh Komplit kombinasi form dan table:

Membaca, Sport, Music,

1.6 Link Absolut dan Relatif

SRC="chef.gif" berarti gambar tersebut ada

SRC="images/chef.gif" berarti gambar

SRC="../chef.gif" berarti gambar tersebut

SRC="../../chef.gif" berarti gambar

H en tersebut terletak satu folder di atas kemudian

CSS (Cascading Style Sheets)

Keuntungan Style Sheets

 Pemisahan antara content dari tampilan

Kelemahan CSS sbb:

 Browser-browser belum sepenuhnya men-support secara baik semua fitur CSS

Ada 3 cara implementasi CSS pada halaman html yaitu:

• File CSS hanya terdiri dari pasangan-pasangan selector/descriptor

• Sintaks umum adalah:

• selector adalah tag yang akan dipengaruhi

– Contoh: h1 {color: green; font-family: Verdana} artinya sesuatu yang terkandung

body { background-color: #ffffff;} hexadesimal

• Descendent selector memilih tag dengan specific ancestor:

• Memungkinkan styles yang berbeda untuk element yg sama

• Atribut id layaknya atribut class, tapi menggunakan tanda # .

div dan span

Penggunaan style sheets

– External style sheet

• Berlaku baik untuk HTML maupun XML

– Embedded style sheet

External style sheets

• Dalam HTML, ditempatkan dalam elemen <head> :

• Dalam prolog dokumen XML:

Embedded style sheets

Inline style sheets

• Atribut STYLE dapat ditambahkan pada setiap elemen HTML:

Urutan (order) Cascading

• Styles diterapkan pad HTML dalam urutan berikut:

Contoh urutan cascading:

• External style sheet: h3 { color: red;