By HendraNet - Hendra Jatnika
advertisement
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 Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet Juni 1993: draft yang mendefenisikan HTML di rilis Juli 1994: draft untuk HTML 2.0 di rilis Februari 1995: draft HTML 2.0 hasil perbaikan diusulkan sebagai suatu RFC (Request For Comments) September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866) 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 t e N a r d By n e H 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 t e N tag <TITLE> dan </TITLE>, Tulisan yang berada diantara tag ini akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser. a r d tag <HEAD> </HEAD> , Berisi keterangan informasi halaman, seperti title dan jenis dokumen dll tag <BODY> </BODY> , menandai awal dan akhir dari badan dokumen HTML yang ditampilkan pada browser n e H y 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 <H1>Heading <H2>Heading <H3>Heading <H4>Heading <H5>Heading <H6>Heading Hasil 1</H1> 2</H2> 3</H3> 4</H4> 5</H5> 6</H6> Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Page 2 / 197 http://www.hendra-jatnika.web.id 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 <B></B> Center <CENTER></CENTER> Change Font Size <FONT SIZE=+|-?></FONT> Font Color <FONT COLOR="#$$$$$$"></FONT> Font Size <FONT SIZE=?></FONT> Italic <I></I> Preformatted Strikeout t e N a r d By n e H <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 http://www.hendra-jatnika.web.id 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. t e N Tabel Karakter khusus a r d Entitas Keterangan n e H Contoh &copy; copyright symbol © &reg; registered trademark symbol ® &#153; trademark symbol ™ &nbsp; nonbreaking space &lt; less-than symbol < &gt; greater-than symbol > &amp; ampersand & &quot; quotation mark " By Contoh : Kode Hasil 2 &lt; 3, adalah benar<br> 3 &gt; 4, adalah salah 2 < 3, adalah benar 3 > 4, adalah salah Page 4 / 197 http://www.hendra-jatnika.web.id 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 <ul> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li> </ul> Hasil Sugar Chips Caffeine Chocolate Attributes • Beberapa tag mempunyai atribut untuk tambahan informasi: Bentuk: nama attribut="nilai atribut" t e N Contoh: ordered list dapat diganti menjadi A, B, C, ... dengan memberi atribut sbb: Kode <ol> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li> </ol> <ol type="A"> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li> </ol> By a r d en H Hasil 1. 2. 3. 4. Sugar Chips Caffeine Chocolate A. B. C. D. Sugar Chips Caffeine Chocolate Tabel tag Lists Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE><LI 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 http://www.hendra-jatnika.web.id 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:[email protected]">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"> t e N • • • • Atribut src attribute yang diperlukan sedang lainnya optional The URL alamat dan nama image seperti:.gif, .jpg, atau .png Atribut alt memberi text sebagai representasi jika image gagal ditampilkan Atribut height and width jika disertakan memperbaiki tampilan image (jika ukuran salah maka tampilan gambar akan terganggu) • Tidak ada tag akhir </img> karena tag <img> bukan container a r d By n e H Tabel tag Links dan Gambar Alignment <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE> Alignment <IMG SRC="URL"ALIGN=LEFT|RIGHT| TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> Alternate <IMG SRC="URL" ALT="***"> Border <IMG SRC="URL" BORDER=?> Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; 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> Link to Target <A HREF="URL#***"> </A><A HREF="#***"> </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 http://www.hendra-jatnika.web.id Section <AREA SHAPE="RECT" COORDS=",,," 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 <table border="1"> <tr> <th>Name</th> <th>Phone</th> </tr> <tr> <td>Dick</td> <td>555-1234</td> </tr> <tr> <td>Jane</td> <td>555-2345</td> </tr> <tr> <td>Sally</td> <td>555-3456</td> </tr> </table> By Hasil t e N a r d n e H 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> Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> No Line Breaks <TD > Columns to Span <TD COLSPAN=?> Rows to Span <TD ROWSPAN=?> Page 7 / 197 http://www.hendra-jatnika.web.id 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 – <frame> bukan container maka tidak ada tag akhir </frame> • Setiap <frame> mempunyai atribut seperti ini: src=”URL “ Dan beberapa tag e optional: – scrolling="yes|no|auto" (default is "auto") – noresize t e N a r d By n e H 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 http://www.hendra-jatnika.web.id Hasil t e N a r d Tabel tag Frames Column Widths Column Widths Define Frame By n e H <FRAMESET COLS=,,,> </FRAMESET> <FRAMESET COLS=*> </FRAMESET> <FRAME> Display Document <FRAME SRC="URL"> Frame Document <FRAMESET> </FRAMESET> Frame Name <FRAME 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 http://www.hendra-jatnika.web.id – : <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 – disabled: user tak dapat melakukan apa pun pada elemen ini – t e N Contoh-contoh Text input: a r d n e H A text field: <input type="text" name="textfield" value="with an initial value"> By 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 http://www.hendra-jatnika.web.id 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: t e N Keterangan: • Submit : kirim data • Reset : restore semua lemen form ke keadaan semula • Button : ada aksi dari java script a r d Checkboxes By n e H Kode A checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked> Hasil 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 http://www.hendra-jatnika.web.id Drop-down menu or list Kode A menu or list: <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select> Hasil Contoh lengkap: Kode <html> <head> <title>Get Identity</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <p><b>Who are you?</b></p> <form method="post" action=""> <p>Name: <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> By Hasil t e N a r d n e H Tabel tag Forms Checked <INPUT CHECKED> Default Option <OPTION SELECTED> Define Form <FORM ACTION="URL" METHOD=GET|POST> </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 http://www.hendra-jatnika.web.id 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> Wrap Text <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </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 </th> </tr> <tr> <td width="106">Nama</td> <td width="471"><input type="text" name="Nama" size="20"></td> </tr> <tr> <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> t e N a r d By n e H Page 13 / 197 http://www.hendra-jatnika.web.id <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 Hobby Pria Membaca, Sport, Memasak, Tamasya Music, t e N a r d Komentar Jurusan Wanita By Komputer n e H 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 http://www.hendra-jatnika.web.id SRC="chef.gif" berarti gambar tersebut ada di folder yang sama dengan dokumen html berarti gambar tersebut terletak satu folder di bawah (sub folder) dokumen html. SRC="images/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. SRC="../../chef.gif" t e N a r d en By H SRC="../images/chef.gif" berarti gambar tersebut terletak satu folder di atas kemudian satu folder ke bawah di direktori images. 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 http://www.hendra-jatnika.web.id 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. t e N Perkembangan CSS: a r d - Mei 1995 - Draft awal CSS - November 1995 – Drat kerja CSS1 oleh W3C (World Wide Web Consortium) - 17 Desember 1996 - CSS1 direkomendasi oleh W3C - 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 By n e H 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 http://www.hendra-jatnika.web.id 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: t e N selector {property: value} – atau selector, ..., selector { property: value; ... property: value } By a r d n e H – 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 */ h1,h2,h3 {font-family: Arial, sans-serif;} p, table, li, address { font-family: "Courier New";margin-left: 15pt; } p, li, th, td {font-size: 80%;} th {background-color:#FAEBD7} Page 17 / 197 Komentar Prioritas adalah font pertama Font dan margin diberlakukan untuk semua tag (p, table, address) Ukuran 80% untuk elemen dari tag Warna dpt dpt ditulis dalam http://www.hendra-jatnika.web.id body { background-color: #ffffff;} a:link {color:darkred} a:visited {color:darkred} a:active {color:red} a:hover {color:red} hexadesimal an unvisited link a link that has been visited a link now being visited 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 t e N a r d By n e H • 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 http://www.hendra-jatnika.web.id • 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 # . t e N – Style sheet: p#important {font-style: italic} atau # important {font-style: italic} – Pada HTML: <p id="important"> • class dan id keduanya dapat digunakan, dan tidak mesti mempunyai nama yang berbeda: <p class="important" id="important"> a r d By n e H 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 http://www.hendra-jatnika.web.id • • 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 • Dalam HTML, pada elemen <head> : <style TYPE="text/css"> <!-CSS Style Sheet --> </style> By t e N a r d n e H 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 http://www.hendra-jatnika.web.id 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: • Internal style sheet: • Hasil pada attributes: h3 { color: red; text-align: left; font-size: 8pt h3 { text-align: right; font-size: 20pt color: red; text-align: right; font-size: 20pt } } t e N a r d Beberapa properties and values dari font n e H • font-family: – inherit (same as parent) – Verdana, "Courier New", ... (if the font is on the client computer) – serif | sans-serif | cursive | fantasy | monospace By • 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 http://www.hendra-jatnika.web.id 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) | Browserspecific 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) white-space: – normal | pre | nowrap a r d Pseudo-classes • t e N By n e H Pseudo-classes adalah elemen yang keadaan (dan tampilan) dapat berobah terhadap waktu: 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 http://www.hendra-jatnika.web.id Tabel Sintaks CSS Kaitannya dengan Versi Browser CSS Sintak Sintak Spesifik Browser 1.0 2.0 IExplorer Netscape Opera X X External Style Sheets X Embedded Style Sheets X Inline Style Sheets X @Rules -@charset X @import @media --@namespace @page --@fontdef @font-face -X Rule Set Syntax Selector Grouping X X Declaration Grouping Declaration Shorthands X X Selectors Element - Namespace --Element - Universal Element - Simple X X Element - Descendent -Element - Child -Element - Adjacent -Attribute - Simple -Attribute - Value -Attribute - Begin Value -Attribute - End Value Attribute - Substring Value --Attribute - One-Of-Many -Attribute - Hyphen -Attribute - Namespace X HTML - Class X HTML - ID X Pseudo-Classes X :link X :visited X :active Inclusion Methods X X X X X X X X -X -X X X X X X -X X X X X X X ---X X -X X X X X X t e N a r d By n e H Page 23 / 197 3.0 3.0 3.0 3.0 4.0 5.5 4.0 4.0 -5.5 -4.0 3.0 3.0 3.0 3.0 3.0 -5.0 3.0 3.0 ----------3.0 3.0 3.0 3.0 3.0 4.0 4.0B2 4.0B2 4.0B2 4.0B3 4.0 6.0 6.0 6.0 6.0 -4.0-4.x -4.0 4.0 4.0 4.0 4.0 6.0 6.0 4.0 4.0 6.0 6.0 6.0 6.0 6.0 6.0 6.0 6.0 -6.0 4.0 4.0 4.0 4.0 4.0 6.0 3.5 3.5 3.5 3.5 3.5 ?? 3.5 3.5 -4.0 --3.5 3.5 3.5 3.5 3.5 -4.0 3.5 3.5 3.5 5.0 4.0 4.0 ---4.0 --3.5 3.5 3.5 3.5 3.5 5.0 http://www.hendra-jatnika.web.id -----------------X --X X X -X X :hover :focus :root :empty :not :first-child :first-node :last-node :last-child :lang :viewport :viewport-scroll :canvas :scrolled-content :first :left :right Pseudo-Elements :before X X ---X ---X ----X X X X X X X X X X X X t e N a r d :after :first-letter :first-line Miscellaneous Syntax By n e H Unicode Escapes Comments !important 4.0 ----------------5.5B1 --5.5B1 5.5B1 3.0 6.0 3.0 4.0 6.0 6.0 6.0 6.0 6.0 6.0 6.0 6.0 6.0 -6.0 6.0 6.0 6.0 ---6.0 6.0 6.0 6.0 6.0 4.0 6.0 4.0 6.0 4.0 7.0 ---7.0 --------?? ?? ?? 3.5 4.0 4.0 3.5 3.5 3.5 6.0 3.5 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" </head> type="text/css" href="eksternal1.css" /> Page 24 / 197 http://www.hendra-jatnika.web.id <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"/> </head> t e N a r d <body> n e H <h1>This is a header 1</h1> <hr> By <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 http://www.hendra-jatnika.web.id <p>This is a paragraph</p> </body> </html> Contoh 4 (embedded css) <html> <head> <style type="text/css"> 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) <html> <head> <style type="text/css"> ul {float:left; width:100%; padding:0; margin:0; 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> t e N a r d By n e H </head> <body> <ul> <li><a <li><a <li><a <li><a </ul> href="#">Link href="#">Link href="#">Link href="#">Link one</a></li> two</a></li> three</a></li> four</a></li> <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 http://www.hendra-jatnika.web.id 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> <style type="text/css"> ul { list-style-type:square; list-style-position:inside; list-styleimage: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> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> By t e N a r d n e H Contoh 7 (embeded css) <html> <head> <style type="text/css"> 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 http://www.hendra-jatnika.web.id <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" link changes color</a></b></p> <p><b><a class="two" href="default.asp.htm" tppabs="http://www.w3schools.com/css/default.asp" link changes font-size</a></b></p> <p><b><a class="three" href="default.asp.htm" tppabs="http://www.w3schools.com/css/default.asp" link changes background-color</a></b></p> <p><b><a class="four" href="default.asp.htm" tppabs="http://www.w3schools.com/css/default.asp" link changes font-family</a></b></p> <p><b><a class="five" href="default.asp.htm" tppabs="http://www.w3schools.com/css/default.asp" link changes text-decoration</a></b></p> </body> target="_blank">This target="_blank">This target="_blank">This target="_blank">This target="_blank">This </html> References t e N • Some of the examples in this presentation were taken from the W3Schools online tutorial at http://www.w3schools.com/css/css_syntax.asp • Dave Raggett’s Adding a Touch of Style is a very nice online tutorial at http://www.w3.org/MarkUp/Guide/Style • Index DOT Css has also been a great source of information about CSS: 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 a r d By n e H Page 28 / 197 http://www.hendra-jatnika.web.id t e N a r d By n e H Page 29 / 197 http://www.hendra-jatnika.web.id 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? t e N Tidak. Ada banyak perbedaan antar Java and JavaScript. JavaScript Object based language By a r d n e H Java Object oriented language Diinterpretasi (bukan compiled) oleh client. Di Compile pd server sebelum dieksekusi pada client. Kodenya berintegrasi dalam dokumen HTML Hasilnya berupa Applet, diakses dari halaman HTML Terbatas pada fungsi browser Bisa sebagai aplikasi mandiri Jenis data variable tidak dideklarasi (loose typing). Jenis data Variable harus dideklarasi (strong typing). Dynamic binding Static binding 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 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 http://www.hendra-jatnika.web.id 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> <FORM> <INPUT TYPE=BUTTON VALUE="Klik disni" onClick="alert('Terimakasih')"> </FORM> </BODY> </HTML> t e N a r d By n e H 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> <BODY> <form method="post" action=""> <input type="button" name="myButton" value="Click me" onclick="alert('You clicked the button!');"> </form> </BODY> <HTML> * 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!');" Page 31 / 197 http://www.hendra-jatnika.web.id 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"> <!-some statements //--> </script> t e N a r d 6. Komentar JavaScript mendukung dua bentuk format untuk komentar: • Komentar satu baris yang diawali dengan suatu double slash (//) • Komentar banyak baris yang diawali dengan suatu /* dan diakhiri dengan suatu */ By n e H 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 http://www.hendra-jatnika.web.id Tabel Events dan event handlers I Event Diterapkan pada Load Document body Unload Error Document body Images, window Abort Images KeyDown MouseDown Documents, images, links, text areas Documents, images, links, text areas Documents, images, links, text areas Text fields, text areas, select lists Documents, buttons, links MouseUp Documents, buttons, links Click Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links KeyUp KeyPress Change MouseOver MouseOut Move Handler User me-load halaman dalam browser User exits dari halaman Error pada saat load image atau window User meng-abort saat load image User menekan suatu key onLoad User melepas tekanan pada key User menekan dan menahan key User mengganti nilai elemen User menekan tombol mouse User melepas tekanan tombol mouse User meng-click pada elemen form atau link OnKeyUp a r d OnMouseOver Links t e N User menggerakkan kursor stas link Areas, links User menggerakkan kursosr menjauhi image map atau link Text fields, text areas User memilih field dari elemen form input Windows User atu script mengerakkan window Lihat Modul untuk selengkapnya By Select Terjadi jika n e H onUnload onError onAbort OnKeyDown onKeyPress onChange OnMouseDown OnMouseUp onClick OnMouseOut onSelect OnMove 2. Menggunakan Tag <SCRIPT> • Kebanyakan kode JavaScript ditempatkan didalam tag <script> Contoh: <html> <body> <script type="text/javascript"> 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 http://www.hendra-jatnika.web.id 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> <script type="text/javascript"> 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> <script type="text/javascript"> document.write("This message is written when the page loads") </script> </body> </html> t e N a r d n e H Contoh: Script External Buat file javascript yang disimpan dengan ekstensi .js dan kemudian dipanggil melalui file html By <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 http://www.hendra-jatnika.web.id Syntax: alert("sometext") Contoh: <html> <head> <script type="text/javascript"> 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") t e N Contoh: a r d <html> <head> <script type="text/javascript"> function disp_confirm() { 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> By n e H <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 http://www.hendra-jatnika.web.id Contoh: <html> <head> <script type="text/javascript"> 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 t e N JavaScript memiliki beberapa tipe dari nilai sebagai berikut : a r d 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 Null, yang mana adalah keyword khusus yang mengawali nilai kosong. By n e H 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 http://www.hendra-jatnika.web.id 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: t e N variabel Global variabel Local a r d Variabel lokal digunakan didalam suatu fungsi dan ruang linkupnya terbatas pada fungsi tersebut. Jika keluar dari fungsi maka variabel jadi hilang. Variabel lokal dapa mempunyai nama yang sama dalam funsi berbeda. Untuk mendeklarasikan suatu variabel lokal, harus diawali dengan var, seperti contoh berikut ini: By n e H var MaxValue=0 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> <script type="text/javascript"> var name = "Budi Santosa" document.write(name) document.write("<h1>"+name+"</h1>") </script> Page 37 / 197 http://www.hendra-jatnika.web.id <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 + Addition - Subtraction * Multiplication / Division % Modulus (division remainder) ++ -- x=2 x+2 4 x=2 5-x 3 x=4 x*5 20 15/5 5/2 3 2.5 5%2 10%8 10%2 1 2 0 Increment x=5 x++ x=6 Decrement x=5 x-- x=4 By t e N a r d n e H 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 Hasil Deskripsi Contoh == is equal to 5==8 returns false != is not equal 5!=8 returns true Page 38 / 197 http://www.hendra-jatnika.web.id > 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 Operator Deskripsi Contoh && and Logical Operators 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 +. txt1="What a very" txt2="nice day!" txt3=txt1+txt2 By t e N a r d n e H 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 http://www.hendra-jatnika.web.id 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: t e N 1. Memanggil suatu function. a r d <html> <head> <script type="text/javascript"> function myfunction() { alert("HELLO") } </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> By n e H 2. Function dengan arguments Melewatkan variable ke function, dan menggunakan nilai variable dalam function. <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> Page 40 / 197 http://www.hendra-jatnika.web.id <body> <form> <input type="button" 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> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('Selamat Pagi!')" value="Pada pagi hari"> t e N a r d <input type="button" onclick="myfunction('Selamat Malam!')" value="Pada malam hari"> </form> By n e H <p> 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> <script type="text/javascript"> function myFunction() { return ("Hallo, apa khabar ?") } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()) </script> <p>Script pada body memanggil function.</p> <p>Dan function mengembalikan (returns) suatu text.</p> </body> </html> Page 41 / 197 http://www.hendra-jatnika.web.id 5 . Function dengan arguments dan returns suatu nilai Function untuk menghitung jumlah 2 arguments dan return hasilnya. <html> <head> <script type="text/javascript"> function total(numberA,numberB) { return numberA + numberB } </script> </head> <body> <script type="text/javascript"> document.write(total(2,3)) </script> <p>Script pada body memanggil function dengan dua arguments, 2 dan 3.</p> <p>Function mengembalikan hasil penjumlahan kedua arguments.</p> </body> </html> Conditional Statements t e N Conditional statements dalam JavaScript digunakan untuk melaksanakan aksi berbeda berdasarkan kondisi yang berbeda a r d Dalam JavaScript ada tiga conditional statements: n e H if statement – digunakan jika ingin mengeksekusi suatu kode ketika kondisi/persyaratan adalah benar (true) if...else statement – digunakan jika ingin memilih satu atau dua baris kode untuk dieksekusi switch statement – digunakan jika ingin memilih satu dari banyak baris untuk dieksekusi By Contoh-contoh: 1. If statement (jika kondisi tertentu adalah “true”) <html> <body> <script type="text/javascript"> 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 http://www.hendra-jatnika.web.id <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> <script type="text/javascript"> 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> t e N a r d 3. Random link Link ke W3Schools.com atau ke RefsnesData.no akan mempunyai kesempatan sebesar 50%. n e H <html> <body> <script type="text/javascript"> 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> By 4. Switch statement Jika ingin memilih satu dari banyak blok kode untuk dieksekusi. <html> <body> <script type="text/javascript"> var d = new Date() theDay=d.getDay() switch (theDay) { Page 43 / 197 http://www.hendra-jatnika.web.id 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 belajar") break case 1: document.write("Senin hari awal kerja") break default: document.write("Hari Minggu, Selamat bersantai!") } </script> giat <p>Contoh ini memperagakan pernyataan switch.</p> <p>Dalam hal ini, Sunday=0, Monday=1, Tuesday=2,dst.</p> </body> </html> t e N JavaScript Looping a r d Looping statements dalam JavaScript digunakan untuk eksekusi satu blok kode yang sama untuk beberapakali. n e H Dalam JavaScript beberapa looping statement sbb: By while – Perintah while terus mengulangi loop selama kondisi memiliki nilai true. 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> <script type="text/javascript"> 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 http://www.hendra-jatnika.web.id </body> </html> 2. Looping through HTML headers For loop untuk menulis HTML headers. <html> <body> <script type="text/javascript"> 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> <script type="text/javascript"> i = 0 while (i <= 5) { document.write("Ini adalah Bilangan " + i) document.write("<br>") i++ } </script> t e N a r d By n e H <p>Explanation:</p> <p><b>i</b> equal to 0.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body> </html> 4. Do while loop Catatan: Loop akan selalu di eksekusi sekali meski kondisi false, karena penyataan executed berada sebelum condisi di uji <html> <body> <script type="text/javascript"> i=0 do { document.write("Ini adalah Bilangan " + i) document.write("<br>") i++ } while (i <= 5) </script> <p>Explanation:</p> Page 45 / 197 http://www.hendra-jatnika.web.id <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" t e N a r d Dan data dapat di ambil (retrieved) dengan munggunakan nomor index number dari elemen array yang diinginkan seperti berikut: mother=family_names[0] father=family_names[1] By n e H Contoh-contoh 1. Membuat array dengan parameter numeric dan memberi data padanya . <html> <body> <script type="text/javascript"> var famname = new Array(6) famname[0] = "Jan Egil" famname[1] = "Tove" famname[2] = "Hege" famname[3] = "Stale" famname[4] = "Kai Jim" famname[5] = "Borge" for (i=0; i<6; i++) { document.write(famname[i] + "<br>") } </script> </body> Page 46 / 197 http://www.hendra-jatnika.web.id </html> 2. Create a literal array Metoda length digunakan untuk berapa banyak elemen dalam array. <html> <body> <script type="text/javascript"> var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai Jim","Borge") for (i=0; i<famname.length; i++) { document.write(famname[i] + "<br>") } </script> </body> </html> 3. Array – beberapa sifat dan metoda Beberapa sifat dan metoda yang digunakan dengan object array. <html> <body> <script type="text/javascript"> var famname = new Array(3) famname[0] = "Jani" famname[1] = "Tove" famname[2] = "Hege" t e N a r d n e H document.write(famname.length + "<br>") document.write(famname.join(".") + "<br>") document.write(famname.reverse() + "<br>") document.write(famname.push("Ola","Jon") + "<br>") document.write(famname.pop() + "<br>") document.write(famname.shift() + "<br>") </script> By </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> <script type="text/javascript"> 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 http://www.hendra-jatnika.web.id 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)) document.write("<br /><br />") document.write("Sorted without compareNum: " + array3.sort()) document.write("<br />") document.write("Sorted with compareNum: " + array3.sort(compareNum)) document.write("<br /><br />") document.write("Sorted without compareNum: " + array4.sort()) document.write("<br />") document.write("Sorted with compareNum: " + array4.sort(compareNum)) </script> </body> </html> 5. Array - concat() and slice() t e N Cara penggunaan concat() dan slice(). <html> <body> n e H <script type="text/javascript"> var famname = new Array(3) famname[0] = "Jani" famname[1] = "Tove" famname[2] = "Hege" By a r d 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> <script type="text/javascript"> myCars=["BMW","Volvo","Saab","Ford"] document.write("myCars: " + myCars) Page 48 / 197 http://www.hendra-jatnika.web.id document.write("<br /><br />") removed=myCars.splice(2,0,"Volkswagen") document.write("After adding 1: " + myCars) document.write("<br /><br />") removed=myCars.splice(3,1) document.write("After removing 1: " + myCars) document.write("<br /><br />") removed=myCars.splice(2,1,"Seat") document.write("After replacing 1: " + myCars) document.write("<br /><br />") 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 t e N Syntax: object.property_name a r d Property constructor Description Contains the function that created an object's prototype 4 4 length Returns the number of elements in the array 3 4 3 4 By n e H Allows you to add properties to an array prototype NN IE Methods Syntax: object.method_name() Method concat() Description Joins two or more arrays and returns a new array NN IE 4 4 4 reverse() Puts all the elements of an array into a string separated 3 by a specified delimiter (comma is default) Removes and returns the last element of an array 4 Adds one or more elements to the end of an array and 4 returns the new length Reverses the order of the elements in an array 3 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 existing array Sorts the elements of an array 4 4 join(delimiter) pop() push("element1","element2") sort() 3 Adds and/or removes elements of an array splice(index,howmany[,el1,el2]) 4 Returns a string that represents the source code of the 4.06 toSource() array Returns a string that represents the specified array and 3 toString() Page 49 / 197 5.5 5.5 4 4 5.5 4 4 http://www.hendra-jatnika.web.id its elements unshift("element1","element2") Adds one or more elements to the beginning of an array and returns the new length Returns the primitive value of an array valueOf() 4 5.5 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]) t e N Beberapa contoh pembuatan objek Date: var var var var var d=new d=new d=new d=new d=new a r d Date("October 12, 1988 13:14:00") Date("October 12, 1988") Date(88,09,12,13,14,00) Date(88,09,12) Date(500) By n e H 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> <script type="text/javascript"> var d = new Date() document.write(d.getDate()) document.write(".") document.write(d.getMonth() + 1) document.write(".") document.write(d.getFullYear()) </script> </body> </html> 2. Time Mengemablikan waktu lokal: Jam, minit, dan detik. Untuk waktu GMT time gunakan getUTCHours, getUTCMinutes dst. Page 50 / 197 http://www.hendra-jatnika.web.id <html> <body> <script type="text/javascript"> var d = new Date() document.write(d.getHours()) document.write(".") document.write(d.getMinutes()) document.write(".") document.write(d.getSeconds()) </script> </body> </html> 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> <script type="text/javascript"> var d = new Date() d.setFullYear("1990") document.write(d) </script> </body> </html> t e N a r d n e H 4. UTC time getUTCDate method (Universal Coordinated Time ) yaitu waktu yang ditetapakan oleh World Time Standard. <html> <body> By <script type="text/javascript"> 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> <script type="text/javascript"> 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 http://www.hendra-jatnika.web.id <html> <body> <script type="text/javascript"> 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> <script type="text/javascript"> var timer = null function stop() { clearTimeout(timer) } t e N a r d function start() { var time = new Date() var hours = time.getHours() 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> By n e H Tabel lengkap yang berkaitan dengan objek waktu Properties: NN: Netscape, IE: Internet Explorer Syntax: object.property_name Property NN IE constructor Description Contains the function that created an object's prototype 4 4 prototype Allows addition of properties to a date 3 4 Page 52 / 197 http://www.hendra-jatnika.web.id Methods Syntax: object.method_name() Method Description Date() Returns a Date object getDate() Returns the date of a Date object (from 1-31) NN IE 2 3 3 getHours() 2 Returns the day of a Date object (from 0-6. 0=Sunday, 1=Monday, 2 etc.) Returns the month of a Date object (from 0-11. 0=January, 2 1=February, etc.) Returns the year of a Date object (four digits) 4 Returns the year of a Date object (from 0-99). Use getFullYear 2 instead !! Returns the hour of a Date object (from 0-23) 2 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 3 getUTCDate() 2 Returns the time difference between the user's computer and GMT 2 Returns the date of a Date object in universal (UTC) time 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() Returns the four-digit year of a Date object in universal time 4 4 getUTCHours() Returns the hour of a Date object in universal time 4 4 getUTCMinutes() Returns the minutes of a Date object in universal time 4 4 getUTCSeconds() Returns the seconds of a Date object in universal time 4 4 getUTCMilliseconds() Returns the milliseconds of a Date object in universal time getDay() getMonth() getFullYear() getYear() getTimezoneOffset() et aN r d n He 3 3 4 3 3 3 4 4 4 Returns a string date value that holds the number of milliseconds since January 01 1970 00:00:00 Sets the date of the month in the Date object (from 1-31) 2 3 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() 2 3 setSeconds() Sets the month in the Date object (from 0-11. 0=January, 1=February) 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() 4 4 4 4 setUTCFullYear() Sets the day in the Date object, in universal time (from 0-6. Sunday=0, Monday=1, etc.) Sets the month in the Date object, in universal time (from 0-11. 0=January, 1=February) 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 Sets the milliseconds in the Date object, in universal time (from 0- 4 999) 4 parse() setDate() setUTCMonth() setUTCMilliseconds() By Page 53 / 197 4 http://www.hendra-jatnika.web.id 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 t e N a r d By n e H Page 54 / 197 http://www.hendra-jatnika.web.id 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 Apakah Java sama dengan JavaScript? Tidak. Ada banyak perbedaan antar Java and JavaScript. t e N Java a r d JavaScript Object based language n e H Object oriented language Diinterpretasi (bukan compiled) oleh client. Di Compile pd server sebelum dieksekusi pada client. Kodenya berintegrasi dalam dokumen HTML Hasilnya berupa Applet, diakses dari halaman HTML Terbatas pada fungsi browser Bisa sebagai aplikasi mandiri By Jenis data variable tidak dideklarasi (loose Jenis data Variable harus dideklarasi typing). (strong typing). Dynamic binding Static binding 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 Page 55 / 197 1 http://www.hendra-jatnika.web.id 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 : Menggunakan tag HTML yang menangani event. 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. t e N a r d <HTML> <BODY> <FORM> <INPUT TYPE=BUTTON VALUE="Klik disni" onClick="alert('Terimakasih')"> </FORM> </BODY> </HTML> By n e H 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=""> <input type="button" 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!');" Page 56 / 197 2 http://www.hendra-jatnika.web.id Kapitalisasi 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 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 onMouseOut -- mouse digerakkan menjauh elemen form onMouseUp -- tekanan tombol mouse dilepas sementra berada diatas elemen form – onMouseMove -- mouse digerakkan – – – – – – t e N a r d Contoh 3a: Rollover By n e H <h1 onMouseOver="style.color='red';" onMouseOut="style.color='blue';">Hello </h1> 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';"> Page 57 / 197 3 http://www.hendra-jatnika.web.id Tabel Events dan event handlers I Event Diterapkan pada Load Document body Unload Document body Error Images, window Abort Images KeyDown MouseDown Documents, images, links, text areas Documents, images, links, text areas Documents, images, links, text areas Text fields, text areas, select lists Documents, buttons, links MouseUp Documents, buttons, links Click MouseOver Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links Links MouseOut Areas, links Select Text fields, text areas Move Windows Resize Windows DragDrop Windows Focus Reset Windows dan semua elemen form Windows dan semua elemen form Forms Submit Forms KeyUp KeyPress Change Blur Terjadi jika User me-load halaman dalam browser User exits dari halaman onLoad Error pada saat load image atau window User meng-abort saat load image User menekan suatu key onError User melepas tekanan pada key User menekan dan menahan key User mengganti nilai elemen User menekan tombol mouse User melepas tekanan tombol mouse User meng-click pada elemen form atau link OnKeyUp User menggerakkan kursor stas link User menggerakkan kursosr menjauhi image map atau link User memilih field dari elemen form input User atu script mengerakkan window User atau script meresize window User men-drop suatu object pada browser window User memberi fokus elemen input User mengerakkan focus ke elemen lain User meng-click Reset button User meng-click Submit button OnMouseOver t e N ra d n e By H Handler Page 58 / 197 onUnload onAbort OnKeyDown onKeyPress onChange OnMouseDown OnMouseUp onClick OnMouseOut onSelect OnMove OnResize onDragDrop OnFocus OnBlur onReset onSubmit 4 http://www.hendra-jatnika.web.id 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 dipanggil (eksekusi) pada bagian body. <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> By <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written when the page loads") </script> t e N a r d n e H <body onload="message()"> </body> </html> Script Bagian Body dan dikesekusi begitu halaman di load </body> </html> Script External <html> <head> </head> <body> <script src="xxx.js"> </script> <p> The actual script is in an external script file called "xxx.js". </p> </body> </html> Page 59 / 197 5 http://www.hendra-jatnika.web.id 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 type="text/javascript"> <!-some statements //--> </script> 3. Komentar JavaScript mendukung dua bentuk format untuk komentar: Komentar satu baris yang diawali dengan suatu double slash (//) Komentar banyak baris yang diawali dengan suatu /* dan diakhiri dengan suatu */ t e N a r d By n e H Page 60 / 197 6 http://www.hendra-jatnika.web.id 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 t e N a r d By n e H Page 61 / 197 7 http://www.hendra-jatnika.web.id Menggunakan Tag <SCRIPT> 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"> <!-- Menyembunyikan script terhadap browser non-JavaScript document.write("Hello world.") // akhir dari penyembunyian --> </SCRIPT> </HEAD> </HTML> Hasil: t e N a r d By n e H 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: <!-- Menyembunyikan script terhadap browser non-JavaScript // akhir dari penyembunyian --> Catatan Ingat, selalu mengetik JavaScript diantara baris komentar sehingga browser non Java dapat mengabaikannya. Variabel dan Literal Page 62 / 197 8 http://www.hendra-jatnika.web.id JavaScript memiliki beberapa tipe dari nilai sebagai berikut : 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 Null, yang mana adalah keyword khusus yang mengawali nilai kosong. 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 programmer sebaiknya menggunakan spelling yang benar untuk memudahkan proses pembacaan dan pencarian kesalahan. t e N a r d Batasan lainnya dalam pemberian nama variabel adalah tidak boleh sama dengan cadangan kata pada JavaScript. Tabel 1 adalah daftar dari cadangan kata pada JavaScript. n e H Table 1. Cadangan kata pada JavaScript. abstract By 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 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 Page 63 / 197 9 http://www.hendra-jatnika.web.id 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. Jangkauan dari Variabel JavaScript memiliki dua jangkauan untuk variabel: 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 t e N 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. a r d TIP n e H Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu variabel global, deklarasikan semua variabel global tersebut pada awal dari script. By 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: Page 64 / 197 10 http://www.hendra-jatnika.web.id "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. t e N a r d Ekspresi dan Operator n e H 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. By Operator JavaScript dapat dibagi menjadi beberapa kategori berikut: Assignment operator Arithmetic operator Bitwise operator Logical operator Comparison 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++. Page 65 / 197 11 http://www.hendra-jatnika.web.id 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 perbedaan antara assignment operator (=) dan comparison operator (==) t e N a r d Arithmetic Operator n e H 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 (-). By 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. Page 66 / 197 12 http://www.hendra-jatnika.web.id 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 t e N 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: a r d Equal (==) Not equal (!=) Greater than (>) Greater than or equal to (>=) Less than (<) Less than or equal to (<=) By n e H 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" Page 67 / 197 13 http://www.hendra-jatnika.web.id 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 ^ Bitwise AND & Equality == != Relational < <= > >= Bitwise shift << >> >>> By t e N a r d n e H Addition/subtraction +- Multiply/divide */% Negation/increment ! ~ - ++ - Call, member () [] Struktur Kendali dan Fungsi Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan perintahperintah 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) { Page 68 / 197 14 http://www.hendra-jatnika.web.id 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. t e N Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan. Contoh berikut adalah perintah yang benar: a r d if (a==b) j=0 else j=1 Perintah Perulangan By n e H 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. Page 69 / 197 15 http://www.hendra-jatnika.web.id 2. 3. 4. Kemudian interpreter memeriksa condition. Jika true, kendali dilanjutkan ke langkah selanjutnya. Jika false, kendali diarahkan ke perintah setelah perulangan. Kemudian interpreter menjalankan increment-expression, yang mana melakukan update terhadap variabel-variabel yang digunakan untuk kendali perulangan. Kemudian statement dijalankan dan, jika ditemukan suatu break atau continue, kendali kembali ke langkah 2. Contoh : <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan script for (i=1; i<=10; i++) { sq=i*i document.write("number: " + i + " square: " + sq + "<BR>") } // akhor dari penyembunyiang --> t e N </SCRIPT> a r d </HEAD> <BODY> </BODY> </HTML> Hasil : By n e H number: 1 square: 1 number: 2 square: 4 number: 3 square: 9 number: 4 square: 16 number: 5 square: 25 number: 6 square: 36 number: 7 square: 49 number: 8 square: 64 number: 9 square: 81 number: 10 square: 100 Perintah while Perintah while terus mengulangi loop selama kondisi memiliki nilai true. Syntax untuk perintah while adalah sebagai berikut : while (condition) { statements } Page 70 / 197 16 http://www.hendra-jatnika.web.id 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> <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan script i=1 while (i<=10) { sq=i*i document.write("number: " + i + "square: " + sq + "<BR>") i++ } // end script hiding --> t e N </SCRIPT> a r d </HEAD> <BODY> </BODY> </HTML> By Hasil: n e H number: 1 square: 1 number: 2 square: 4 number: 3 square: 9 number: 4 square: 16 number: 5 square: 25 number: 6 square: 36 number: 7 square: 49 number: 8 square: 64 number: 9 square: 81 number: 10 square: 100 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++ Page 71 / 197 17 http://www.hendra-jatnika.web.id } 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++ } t e N Perintah function a r d 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: By n e H function FunctionName(argument list) { statements } Contoh: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" <!-- hide the script function DisplayIt(LineToDisplay) { document.write(LineToDisplay + "<BR>") } // end hiding --> </SCRIPT> </HEAD> <BODY> Page 72 / 197 18 http://www.hendra-jatnika.web.id <SCRIPT LANGUAGE="JavaScript" <!-- hide it LineToDisplay("Hello World") // end hiding --> </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> t e N <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan By UnorderList="UL" a r d n e H function DisplayList(ListType) { variabel list // menampilkan if (ListType="OL" || ListType="UL") { jenis list // validasi document.write("<" + ListType + ">" jenis list // menampilkan for (var i=1; i<DisplayList.arguments.length; i++) document.write("LI" + DisplayList.arguments[i]) document.write("</" + ListType + ">") // End list return true } else return false } // akhir dari penyembunyian --> </SCRIPT> Page 73 / 197 19 http://www.hendra-jatnika.web.id </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" <!-- menyembunyikan if (DisplayList(UnorderList, "Bullet 1 text", "Bullet 2 text")) document.write("<P>List Display</P>") else document.write("<P>Invalid List Type<p>") // unhide it --> </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: function RetExam(a, b) { var x=0 x = a+b return x By t e N a r d n e H } TestResult=RetExam(5, 7) Komentar JavaScript mendukung dua bentuk format untuk komentar: Komentar satu baris yang diawali dengan suatu double slash (//) 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 74 / 197 20 http://www.hendra-jatnika.web.id 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 e N Objek juga dapat menggunakan acuan array dengan menggunakan nama propertinya sebagai index: a r d mydog["breed"]="small mut" mydog["age"]=5 By mydog["weight"]=25 n e H 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 75 / 197 21 http://www.hendra-jatnika.web.id 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) { t e N result += obj_name + "." + i " = " + obj[i] + "<BR>" } return result By a r d n e H 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 i Objek math berikut merupakan contoh pemakaian dari perintah with: var r = var x = with (Math) { Page 76 / 197 22 http://www.hendra-jatnika.web.id 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 mengacu pada objek yang sekarang. Pada bagian selanjutnya akan ditunjukkan bagaimana pemakaian kata kunci ini dalam penulisan function dan metode. this 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: t e N a r d 1. Mendefinisikan jenis objek dengan membuat suatu fungsi. 2. Membuat instances dari objek tersebut dengan menggunakan operand new. n e 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) { Page 77 / 197 23 http://www.hendra-jatnika.web.id 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; this.license = license; } t e N mydog = new dog("mixed mut", 5, 25, AZ123); a r d n e H Untuk mengacu pada pemilik mydog, syntax berikut diperlukan By 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 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) { Page 78 / 197 24 http://www.hendra-jatnika.web.id 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" Objek dan Fungsi Built-In t e N a r d n e H 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: By 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; Page 79 / 197 25 http://www.hendra-jatnika.web.id 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>. 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. 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. t e N a r d By n e H Objek Math Object Math menyediakan suatu himpunan dari nilai-nilai standar matematika dan metodemetode yang argumennya berupa himpunan dari operator matematika yang disediakan dengan JavaScript. Tidak seperti object lainnya, object Math tidak membutuhkan suatu Page 80 / 197 26 http://www.hendra-jatnika.web.id 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 LOG10E Base 10 logarithm of e 0.434 PI Ratio of circumference to diameter 3.14159 SQRT1_2 Square root of one-half 0.707 SQRT2 Square root of two Metode Objek Math By ra t e N nd 1.414 He 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. Page 81 / 197 27 http://www.hendra-jatnika.web.id 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 hours:minutes:seconds") t e N a r d dateObjectName=new Date(year, month, day) n e H dateObjectName=new Date(year, month, date, hours, minutes, seconds) 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 Page 82 / 197 28 http://www.hendra-jatnika.web.id 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 t e N 0-11 setMonth(monthValue) ra setSeconds(secondsValue) d n e setTime(timeValue) setYear(yearValue) By H 0-59 >=0 >=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. 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: Page 83 / 197 29 http://www.hendra-jatnika.web.id 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 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. Objek Netscape t e N a r d By n e H 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. Page 84 / 197 30 http://www.hendra-jatnika.web.id 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. t e N 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. a r d By n e H 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 Page 85 / 197 31 http://www.hendra-jatnika.web.id 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 e N Objek location dan properti location dari objek dokumen (document.location) memiliki tujuan yang berbeda. Objek location dapat berubah, tetapi properti location tidak dapat berubah. a r d n e H Properti dari objek location adalah sebagai berikut: By protocol. protocol hostname. hostname menentukan metode access dari URL. 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. Page 86 / 197 32 http://www.hendra-jatnika.web.id 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>. t e N Properti color untuk object a r d document adalah sebagai berikut: n e H bgColor. Property ini menentukan warna latarbelakang dari dokumen. Property bgColor secara langsung mengupdate tampilan. fgColor. Property ini menentukan warna text dari dokumen. Setelah browser By 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 Page 87 / 197 33 http://www.hendra-jatnika.web.id </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: t e N <SCRIPT LANGUAGE="JavaScript"> <!-document.write("Update terakhir :"); document.write(document.lastModified); // --> </SCRIPT> a r d By Hasil: n e H 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 Page 88 / 197 34 http://www.hendra-jatnika.web.id 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 array adalah suatu array read-only. Entries tambahan ditambahkan dengan tag <A></A>. Metode link melakukan modifikasi terhadap isi dalam array link 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. t e N The document Object Metodes a r d Object document mengandung lima metode: document.write() document.writeln() document.open() document.close() document.clear() By n e H 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 Page 89 / 197 35 http://www.hendra-jatnika.web.id 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. t e N a r d <INPUT TYPE="button" VALUE="Submit" onClick="validate(this.form)"> n e H 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. By 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. Page 90 / 197 36 http://www.hendra-jatnika.web.id 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 reset onClick select onBlur, onChange, onFocus submit onClick text onBlur, onChange, onFocus, onSelect textarea window By t e N a r d n e H onBlur, onChange, onFocus, onSelect onLoad, onUnload Contoh: <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan kode dari browser non-js function periksa() { formObj = document.contoh; if ((formObj.nama.value == "") || (formObj.umur.value == "") || (formObj.lahir.value == "")) { alert("Anda tidak mengisi seluruh field."); return false; } else return true; } // akhir dari penyembunyian --> </SCRIPT> <FORM NAME="contoh" METODE=GET ACTION="" onSubmit="return periksa()"> <PRE> Page 91 / 197 37 http://www.hendra-jatnika.web.id Nama Anda : <INPUT TYPE=TEXT NAME="nama" SIZE=30 MAXLENGTH=30> Umur : <INPUT TYPE=TEXT NAME="umur" SIZE=3 MAXLENGTH=3> Tgl. Lahir: <INPUT TYPE=TEXT NAME="lahir" SIZE=10 MAXLENGTH=10> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </PRE> </FORM> Hasil: Nama Anda : Umur : Tgl. Lahir: Submit Query Reset FORM>. Untuk JavaScript, hal tersebut adalah suatu read-only array yang membentuk properti berikut : action. property ini mengandung nilai dari atribut ACTION. element. ini adalah suatu array dari elemen object yang didefinsikan untuk encoding. property ini mengandung nilai dair atribut ENCTYPE. length. property ini mengandung jumlah dari isian didalam element array. metode. property ini mengandung nilai dari atribut METODE. target. property ini mengandung nilai dari atribut TARGET . t e N form. a r d n e H Berikut ini adalah arti yang sah dari pengalamatan bentuk object :: By formName.propertyName formName.metodeName(parameters) forms[index].propertyName forms[index].metodeName(parameters) Metode Objek Form Object form hanya memiliki satu metode-submit. Metode submit melakukan aksi yang sama seperti tombol submit pada HTML form dan memiliki tata cara penulisan sebagai berikut: document.formName.submit() Objek element Objek elemen berpengaruh pada isi elemen dalam tag <FORM></FORM>. Tabel 9 menperlihatkan elemen objek dan properti-nya. Tabeel 9. Properti dari objek element. Page 92 / 197 38 http://www.hendra-jatnika.web.id Element object Properti button name, value checkbox name, value, checked, defaultChecked hidden name, value password name, value, defaultValue radio name, value, checked, defaultChecked, length reset name, value select name, length, options submit name, value text name, value, defaultValue textarea name, value, defaultValue array, selectedIndex Properti adalah mengunakan pengalamatan seperti document.elementName.property, atau document.formName. elements[index].propertyName, dimana elementName adalah nilai dari nama property untuk objek elemen. Metode element Metode element melakukan emulasi dari sepupu mereka, yaitu penanganan event: t e N blur(). Metode ini memindahkan fokus dari object yang ditentukan, tetap tidak membuat fokus pada objek lain. click(). Metode ini melakukan suatu simulasi klik mouse pada suatu objek yang ditentukan. Ketika mengacu pada element radio, bentuknya adalah document.radioName[index].click(). focus(). Metode ini memberikan fokus pada objek tertentu. select(). Metode ini men-select seluruh text area. a r d By n e H Kecuali objek radio, metode dialamatkan sebagai document.elementName.metodename(). Tabel 10 mendaftarkan element objek-objek dan metode yang bersesuaian Table 10. Metode-metode dari elemen objek-objek. Elemen objek Metode button click checkbox click hidden (tidak ada metode) password blur, focus, select radio click reset click select blur, focus submit click text blur, focus, select textarea blur, focus, select Page 93 / 197 39 http://www.hendra-jatnika.web.id Window dan Frame Window dan frame membuat bingung banyak pengembang halaman Web dari pada aspekaspek browser lainnya. Ketika Netscape Navigator berjalan, suatu window akan dibuka, dan tergantung bagaimana pengaturan optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika anda memilih menu option File | New Web Browser, suatu window baru akan di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup jendela yang baru tersebut. Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika dokumen frame ditutup, frame menghilang karena keberadaannya tergantung pada dokumen tersebut. Properti Objek Window Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada menampilkan pesan, tetapi sangat tergantung pada parameter yang diberikan. berikut ini adalah properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela browser: defaultStatus. defaultStatus adalah pesan yang dimunculkan pada status bar ketika tidak ada tulisan yang ditampilkan disana. Jika diset dari onMouseOver event handler, event handler harus mengembalikan true untuk perubahan status. frames. Property ini adalah suatu array yang mengandung object frame. Frame mewarisi semua properti dan metode dari objek window. length. nilai dari properti ini adalah jumlah frame dalam frame array. parent. Dari suatu acuan frame, ini adalah window yang mana frameset berada. Suatu frame diantara frameset tersebut dapat mengacu pada frame lain dalam frameset dengan menggunakan parent.frames[index] tanpa memiliki acuan ke nama window. self. Ini adalah sama dengan window atau frame yang sekarang. status. Ini adalah pesan transient yang mana diset dengan onMouseOver event handler. top. Property ini digunakan sebagai acuan window yang laing atas. Dapat digunakan oleh child windows atau embedded filesets untuk mengacu pada window original. window. Property ini adalah sama dengan window sekarang. t e N a r d By n e H Contoh: <A HREF="http://www.indoprog.f2s.com" onMouseOver="window.status='Klik disini untuk keterangan lebih lengkap'; return true;" onMouseOut="window.status=''; ">Klik disini</A> Hasil: Klik disini Page 94 / 197 40 http://www.hendra-jatnika.web.id Bentuk untuk mengacu properti window adalah window.propertyName self.propertyName top.propertyName parent.propertyName windowVar.propertyName propertyName Metode Objek Window Berikut ini adalah metode dari objek window atau frame: alert("message"). Metode ini membuat suatu kotak dialog peringatan dengan suatu tombol OK tunggal. Digunakan untuk menampilkan pesan yang tidak membutuhkan keputusan pemakai. close(). Metode ini menutup window acuan. Harus mengandung window acuan seperti window.close dan close() tanpa acuan adalah sama dengan document.close. confirm("message"). Metode confirm menampilkan suatu dialog box konfirmasi dengan tombol OK dan Cancel. OK mengembalikan nilai true, dan Cancel mengembalikan nilai false. [windowVar = ][window.]open("URL", "windowName" ["windowFeatures"]. Metode ini membuka suatu Jendela browser yang baru. Nama object windowVar adalah nama dari jendela baru dan digunakan sebagai acuan untuk properti dan metodes-nya.URL menentukan URL yang akan dibuka ke jendela baru. Jika optionnya null, suatu window kosong akan dibuka. Variabel windowName adalah nama yang digunakan pada atribut TARGET dari <FORM> dan <A> tag. Variabel windowFeatures adalah suatu comma-separated list dari option berikut: t e N a r d By n e H toolbar=yes|no location=yes|no directories=yes|no status=yes|no menubar=yes|no scrollbars=yes|no resizable=yes|no width=pixels height=pixels Jika tidak ada yang ditentukan, maka semuanya bernilai true. Jika salah satu ditentukan, maka semua yang lain menjadi false. Jika salah satu di tentukan tanpa nilai, maka nilainya adalah true. Page 95 / 197 41 http://www.hendra-jatnika.web.id NOTE Setelah terbuat, window adalah tidak terikat pada parent window, jika parent window di tutup, window yang dibuat tersebut tetap buka.Event onUnLoad menangani penutupan window yang dibuat prompt("message" [, inputDefault]). metode prompt menampilkan suatu prompt dialog box dengan suatu message, suatu input field, dan tombol OK, dan sebuah tombol Cancel. inputDefault adalah suatu string, integer, atau property dari suatu object yang mana mewakili nilai default untuk inout field. Jika inputDefault tidka ditentukan, input fied menampilkan nilai <undefined>. timeoutID=setTimeout(expression, msec). Dengan metode ini, evaluasi dari ekspresi adalah jumlah delay dalam milidetik. timeoutID adalah hanya digunakan oleh metode clearTimeout. clearTimeout(timeoutID). Metode ini membatalkan time-out yang ditentukan oleh metode setTimeout. Metode sebelumnya menggunakan acuan berikut: window.metodeName(parameters) self.metodeName(parameters) t e N top.metodeName(parameters) a r d parent.metodeName(parameters) windowVar.metodeName(parameters) metodeName(parameters) PERHATIAN By n e H Metode open() dan close() perlu mengunakan acuan window.open() dan window.close() untuk menghindari scope dengan document.open() dan document.close() Membagi Window kedalam Frame Frames membagi suatu window secara multiple, memiliki scrollbar masing-masing. Frame dibuat dengan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Masing-masing dokumen membuat suatu frame array untuk dokumen. Jika suatu dokumen dibuka pada salah satu frame memiliki suatu <FRAMESET> tag, frame akan terbagi lagi menjadi frame oleh dokumen tersebut. Hirarki dari frameset adalah penting sebagai acuan properti dan metode dari frame. CATATAN Frames memiliki semua properti dari suatu window. Seluruh hirarki untuk struktur frame adalah sama dengan struktur window. Struktur dibawah setiap window atau frame dapat menjadi acuan. Selanjutnya, properti pada suatu window atau frame dapat mengubah properti object pada jendela atau frame lain. Page 96 / 197 42 http://www.hendra-jatnika.web.id CATATAN Dokumen HTML yang menggunakan <FRAMESET></FRAMESET> mengandung hanya perintah frame. Setelah frame terbuka, dokumen tersebut menjadi tidak visible. Dokumen HTML adalah suatu frame dapat mengendalikan frame lain. Selanjutnya kemungkinan untuk pengaturan layar memberikan kebebasan bagi pengembang untuk suatu dokumen web yang interaktif Contoh : <html> <head> <script language="JavaScript"> if (top.location != this.location) top.location = this.location tidak berada //membuat html //dalam frame lain </script> <title>Tutorial JavaScript</title> t e N <frameset cols=175,*> a r d <frame src="daftar.html" name="kiri"> <frame src="topik1.html" name="kanan"> </frameset> By n e H </head> </html> file daftar.html <html> <head> <script language="JavaScript"> function buka(x) { top.frames[1].location=x; return false } </script> </head> <body> <h1>Daftar Isi</h1> <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr> <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr> <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr> <a href="" onclick="return buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr> Page 97 / 197 43 http://www.hendra-jatnika.web.id <a href="" onclick="return Objek</a><hr> <a href="" onclick="return Fungsi built-in</a><hr> <a href="" onclick="return netscape</a><hr> <a href="" onclick="return form</a><hr> <a href="" onclick="return Frame</a><hr> buka('topik5.html')">Dasar dari buka('topik6.html')">Objek dan buka('topik7.html')">Objek buka('topik8.html')">Objek buka('topik9.html')">Window dan </body> </html> Klik untuk melihat hasil dari contoh diatas Summary JavaScript adalah lebih dari pada suatu bahasa script yang sederhana dan kurang dari suatu object-oriented programming language. Hal tersebut merupakan perekat yang mana mengikat banyak elemen yang berbeda ke suatu lingkungan dinamis dan interaktif. t e N a r d By n e H Page 98 / 197 44 http://www.hendra-jatnika.web.id Pertanyaan yang sering ditanya Saya memiliki dua frame, dan saya ingin klik pada pilihan diframe kiri akan mengupdate isi frame kanan. Bagaimana hal tersebut dilakukan ? Bagaimana saya membuat suatu link yang dapat menutup jendela browser ? Bagaimana saya membuat pesan pada status bar ketika pemakai meletakkan pointer pada suatu link ? Bagaimana membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list ? Saya memiliki dua frame, dan saya ingin klik pada pilihan diframe kiri akan mengupdate isi frame kanan. Bagaimana hal tersebut dilakukan ? Anda dapat melakukan hal tersebut dengan JavaScript, dan perhatikan contoh berikut : Misalnya halaman html untuk membuat frame kiri dan kanan adalah sebagai berikut : Contohy.html <html> <head> <title>Tutorial JavaScript</title> <frameset cols=175,*> t e N <frame src="menu.html" name="kiri"> a r d <frame src="topik1.html" name="kanan"> </frameset> </head> </html> By n e H Pada contoh diatas, pada frame kiri akan dibuka suatu html dengan nama menu.html, dan sebelah kanan akan diaktifkan topik1.html, dan isi dari menu.html adalah sebagai berikut : menu.html <html> <head> <script language="JavaScript"> function buka(x) { top.kanan.location=x; // membuka halaman x pada frame kanan return false } </script> </head> <body> <h1>Daftar Isi</h1> <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr> <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr> <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr> Page 99 / 197 45 http://www.hendra-jatnika.web.id <a href="" onclick="return Kendali dan Fungsi</a><hr> <a href="" onclick="return Objek</a><hr> <a href="" onclick="return Fungsi built-in</a><hr> <a href="" onclick="return netscape</a><hr> <a href="" onclick="return form</a><hr> <a href="" onclick="return Frame</a><hr> buka('topik4.html')">Struktur buka('topik5.html')">Dasar dari buka('topik6.html')">Objek dan buka('topik7.html')">Objek buka('topik8.html')">Objek buka('topik9.html')">Window dan </body> </html> Pada menu.html diatas, kita menggunakan event onclick pada masing-masing link yang akan memanggil suatu fungsi buka yang diikuti dengan suatu parameter yang berupa nama dokumen html target. Pada fungsi buka, kita menggunakan properti location untuk frame kanan membuka halaman bersangkutan. Catatan : kanan dalam hal ini adalah nama frame. Klik untuk melihat hasil dari contoh diatas Bagaimana saya membuat suatu link yang dapat menutup jendela browser ? t e N Untuk menutup jendela browser yang sedang aktif anda dapat menggunakan metode close pada objek window. a r d Contoh : By n e H <A HREF="javascript:window.close()">tutup</A> Coba klik tutup untuk menutup jendela ini. Bagaimana saya membuat pesan pada status bar ketika pemakai meletakkan pointer pada suatu link ? Anda dapat menggunakan properti window.status, dan event onMouseOver dan onMouseOut. Perhatikan contoh berikut ini : <SCRIPT LANGUAGE="JavaScript"> function message(text){ window.status = text; } </SCRIPT> <A HREF="http://www.indoprog.f2s.com" onMouseOver="message('Homepage indoporg');return true" onMouseOut="message('');return true"><B>(Homepage baru)</B></A> Coba letakkan mouse pointer pada linik Ayo ke (Homepage baru) Indoprog, dan perhatikan status bar browser anda. Bagaimana membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list ? Page 100 / 197 46 http://www.hendra-jatnika.web.id Anda dapat membuat suatu fungsi yang mengambil nilai item yang dipilih pemakai, dan membuka halam yang diinginkan Pilih tutorial yang diinginkan Adapun kode untuk Contoh diatas: <SCRIPT LANGUAGE='JavaScript'> <!-function BuatArray() { var jlhargumen = BuatArray.arguments.length; for ( i = 0 ; i < jlhargumen; i++ ) { this[i]=BuatArray.arguments[i] } } function buka() { var pilih = eval(document.dropdown.site.selectedIndex); if( (pilih > 0) && (pilih < 7) ) { var bagian=new BuatArray( '', 'http://indoprog.terrashare.com/tutor/html/index.html', 'http://indoprog.terrashare.com/tutor/javascript/index.html', 'http://indoprog.terrashare.com/tutor/asp/index.html', 'http://indoprog.terrashare.com/tutor/php/index.html', 'http://indoprog.terrashare.com/tutor/perl/index.html'); this.location=buka[pilih]; } } //--> </SCRIPT> t e N <FORM NAME="dropdown"> <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> a r d By n e H Page 101 / 197 47 http://www.hendra-jatnika.web.id 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 e N JavaScript adalah bahasa script untuk client-side (sisi-client) yang dapat digunakan untuk membuat 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. a r d n e H Ringkasan apa dan untuk apa JavaScript: • • 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 membaca dan menulis elemen-elemen HTML • 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 Apakah Java sama dengan JavaScript? Tidak. Ada banyak perbedaan antar Java and JavaScript. Java adalah object-oriented language (bahasa berorientasi objek) sedangkan JavaScript adalah objectbased 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 http://www.hendra-jatnika.web.id 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 Terbatas pada fungsi browser Bisa sebagai aplikasi mandiri Jenis data variable tidak dideklarasi (loose typing). Jenis data Variable harus dideklarasi (strong typing). Dynamic binding Static binding 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. a r d Ada dua cara memasukkan JavaScript dalam dokumen HTML : t e N n e H Menggunakan tag HTML yang menangani event. 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> <INPUT TYPE=BUTTON VALUE="Klik disni" onClick="alert('Terimakasih')"> </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 http://www.hendra-jatnika.web.id Contoh 2 Event handler : <form method="post" action=""> <input type="button" 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) 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 hurufr bersar menjadi onClick untuk memudahkan dibaca Catatan: Karena ada tanda petik didalam tanda petik maka diperlukan tanda petik tunggal dan dobel t e N a r d Event-event Umum n e H • 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 By Contoh 3: Rollover sederhana • Kode berikut akan mebuat teks Hello berwarna merah jika mouse dikenakan padanya dan berwarna biru jika mouse dijauhkan <h1 onMouseOver="style.color='red';" onMouseOut="style.color='blue';">Hello </h1> • Rollover dengan menggunkan Image: <img src="../Images/duke.gif" width="55" height="68" onMouseOver="src='../Images/duke_wave.gif';" onMouseOut="src='../Images/duke.gif';"> Tabel Events dan event handlers I Page 104 / 197 http://www.hendra-jatnika.web.id Event Diterapkan pada Load Document body Unload Document body Error Images, window Abort Images KeyDown KeyUp KeyPress Change MouseDown MouseUp Click Terjadi jika Handler Documents, images, links, text areas Documents, images, links, text areas Documents, images, links, text areas Text fields, text areas, select lists Documents, buttons, links Documents, buttons, links MouseOver Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links Links MouseOut Areas, links User meng-abort saat load image User menekan suatu key User melepas tekanan pad key User menekan dan menahan key User mengganti nilai elemen User menekan tombol mouse User melepas tekanan tombol mouse User meng-click pada elemen form atau link H Select Text fields, text areas Move Windows Resize Windows DragDrop Windows Focus Blur Reset Submit Windows dan semua elemen form Windows dan semua elemen form Forms Forms onUnload onError onAbort OnKeyDown OnKeyUp onKeyPress onChange OnMouseDown OnMouseUp et N a r d n e By onLoad User me-load halaman dalam browser User exits dari halaman Error pada saat load image atau window User menggerakkan kursor stas link User menggerakkan kursosr menjauhi image map atau link User memilih field dari elemen form input User atu script mengerakkan window User atau script meresize window User men-drop suatu object pada browser window User memberi fokus elemen input User mengerakkan focus ke elemen lain User meng-click Reset button User meng-click Submit button <html> Page 105 / 197 onClick OnMouseOver OnMouseOut onSelect OnMove OnResize onDragDrop OnFocus OnBlur onReset onSubmit http://www.hendra-jatnika.web.id <head> </head> <body> <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 </SELECT> </FORM> <br> <form method="post" action=""> <input type="button" name="myButton" value="Click me" onClick="alert('You clicked the button!');"> </form> <h1 onMouseOver="style.color='red';" onMouseOut="style.color='blue';">Hello </h1> </body> </html> a r d t e N By n e H Page 106 / 197 http://www.hendra-jatnika.web.id Menggunakan Tag <SCRIPT> Kebanyakan kode JavaScript dipmapat didalam tag <script> seperti diperlihatkan contoh dibawah ini: Contoh: Menulis teks pada halaman <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> Car penulisan lain dari tag script dan atributnya adalah sbb: <SCRIPT LANGUAGE="javaScript"> document.write("Hello World!") </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"> • t e N Perintah untuk menuliskan sesuatu pada halaman adalah: document.write a r d document.write("Hello World!") • n e H Kemudian tutup dengan tag <script> </script> 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 Script berupa fungsi (message) ditempatkan di bagian head, kemudian fungsi dipanggil dipanggil (eksekusi) pada bagian body. <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> Bagian Body Scipt dikesekusi begitu halaman di load <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written when the page loads") </script> </body> </html> </body> Page 107 / 197 http://www.hendra-jatnika.web.id </html> Script External Script juga dapat ditempatkan sebagai file tersendiri (file dengan ekstensi .js) seperti berikut: <html> <head> </head> <body> <script src="xxx.js"> </script> <p> The actual script is in an external script file called "xxx.js". </p> </body> </html> Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga untuk menghindari kesalahan pada browser tersebut, anda perlu mengetikkan script diantara tag komentar HTML: t e N <!-- Menyembunyikan script terhadap browser non-JavaScript // akhir dari penyembunyian --> a r d Catatan Ingat, selalu mengetik JavaScript diantara baris komentar sehingga browser non Java dapat mengabaikannya. By 3. Variabel dan Literal n e H JavaScript memiliki beberapa tipe dari nilai sebagai berikut : 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 Null, yang mana adalah keyword khusus yang mengawali nilai kosong. 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 http://www.hendra-jatnika.web.id 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. 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 double instanceof static else a r d t e N while with n e 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. Jangkauan dari Variabel JavaScript memiliki dua jangkauan untuk variabel: 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 http://www.hendra-jatnika.web.id 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 oktal (seperti 04, 065, atau 0145). Suatu bilangan dinyatakan dalam basis hexadesimal diawali dengan 0x atau 0X (seperti 0xff, 0X44, atau 0xAE). t e N a r d 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. By n e H 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 http://www.hendra-jatnika.web.id 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. Operator JavaScript dapat dibagi menjadi beberapa kategori berikut: Assignment operator Arithmetic operator Bitwise operator Logical operator Comparison operator String operator JavaScript memiliki operator binari maupun unari. Suatu operator binari memiliki format. operand1 operator operand2 t e N a r d Sebagai contoh , 9 * 7 atau temp = 24 adalah ekspresi dengan operator binari. Operator unari memiliki dua format: By n e H operand operator 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 http://www.hendra-jatnika.web.id 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 operator dibelakang(x++ or x--), nilai x dikembalikan sebelum ditambah atau dikurang. t e N a r d 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 By n e H 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 http://www.hendra-jatnika.web.id 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. (condition) ? true_value : false_value t e N a r d n e H 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 : 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 http://www.hendra-jatnika.web.id 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 () [] t e N a r d n e H 5. Struktur Kendali dan Fungsi Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan perintahperintah 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. By 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 http://www.hendra-jatnika.web.id 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 t e N JavaScript mendukung dua struktur loop; perintah for dan perintah while. Untuk control pada struktur loop, JavaScript menyediakan perintah break dan continue. a r d Perintah for n e H 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 : By for ([initial-expression;] [condition;] [increment-expression]) { statements } Urutan proses untuk perintah for adalah sebagai berikut: 1. 2. 3. 4. Interpreter menjalankan initial-expression. Ekspresi ini mementukan nilai yang diperlukan untuk kendali perulangan. Kemudian interpreter memeriksa condition. Jika true, kendali dilanjutkan ke langkah selanjutnya. Jika false, kendali diarahkan ke perintah setelah perulangan. Kemudian interpreter menjalankan increment-expression, yang mana melakukan update terhadap variabel-variabel yang digunakan untuk kendali perulangan. Kemudian statement dijalankan dan, jika ditemukan suatu break atau continue, kendali kembali ke langkah 2. Contoh : <HTML> Page 115 / 197 http://www.hendra-jatnika.web.id <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan script 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 number: 3 square: 9 number: 4 square: 16 number: 5 square: 25 number: 6 square: 36 number: 7 square: 49 number: 8 square: 64 number: 9 square: 81 number: 10 square: 100 By t e N a r d n e H 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 http://www.hendra-jatnika.web.id <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan script i=1 while (i<=10) { sq=i*i document.write("number: " + i + "square: " + sq + "<BR>") i++ } // end script hiding --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> t e N Hasil: number: 1 square: 1 number: 2 square: 4 number: 3 square: 9 number: 4 square: 16 number: 5 square: 25 number: 6 square: 36 number: 7 square: 49 number: 8 square: 64 number: 9 square: 81 number: 10 square: 100 By a r d n e H 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 http://www.hendra-jatnika.web.id 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: t e N a r d function FunctionName(argument list) { statements } Contoh: <HTML> By n e H <HEAD> <SCRIPT LANGUAGE="JavaScript" <!-- hide the script function DisplayIt(LineToDisplay) { document.write(LineToDisplay + "<BR>") } // end hiding --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" <!-- hide it Page 118 / 197 http://www.hendra-jatnika.web.id LineToDisplay("Hello World") // end hiding --> </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> t e N <SCRIPT LANGUAGE="JavaScript"> a r d <!-- menyembunyikan UnorderList="UL" n e H function DisplayList(ListType) { variabel list // menampilkan if (ListType="OL" || ListType="UL") { jenis list // validasi document.write("<" + ListType + ">" jenis list // menampilkan By for (var i=1; i<DisplayList.arguments.length; i++) document.write("LI" + DisplayList.arguments[i]) document.write("</" + ListType + ">") return true } else return false } // akhir dari penyembunyian --> </SCRIPT> </HEAD> <BODY> Page 119 / 197 // End list http://www.hendra-jatnika.web.id <SCRIPT LANGUAGE="JavaScript" <!-- menyembunyikan if (DisplayList(UnorderList, "Bullet 1 text", "Bullet 2 text")) document.write("<P>List Display</P>") else document.write("<P>Invalid List Type<p>") // unhide it --> </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: t e N a r d function RetExam(a, b) { var x=0 x = a+b return x By n e H } TestResult=RetExam(5, 7) Komentar JavaScript mendukung dua bentuk format untuk komentar: Komentar satu baris yang diawali dengan suatu double slash (//) 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 http://www.hendra-jatnika.web.id 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 t e N Objek juga dapat menggunakan acuan array dengan menggunakan nama propertinya sebagai index: n e H mydog["breed"]="small mut" mydog["age"]=5 By a r d 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); Page 121 / 197 http://www.hendra-jatnika.web.id 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) { t e N var result = "" a r d for (var i in obj) { n e H result += obj_name + "." + i " = " + obj[i] + "<BR>" } By return result 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 i Objek math berikut merupakan contoh pemakaian dari perintah with: var r = Page 122 / 197 http://www.hendra-jatnika.web.id 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 mengacu pada objek yang sekarang. Pada bagian selanjutnya akan ditunjukkan bagaimana pemakaian kata kunci ini dalam penulisan function dan metode. this t e N Membuat Objek baru a r d Walaupun JavaScript memiliki sejumlah besar objek yang telah didefinisikan, developer dapat membuat objeknya sendiri. Untuk membuat suatu objek baru diperlukan dua langkah yaitu: By n e H 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; 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); Page 123 / 197 http://www.hendra-jatnika.web.id 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; a r d this.license = license; } By t e N n e H 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 http://www.hendra-jatnika.web.id 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 nilai pada suatu type data array. Perbedaannya adalah array ini dimulai dari satu dan bukan nol, karena nol mendefinisikan panjang dari array: t e N ExmpArray[1] = "test1" By a r d n e H 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 http://www.hendra-jatnika.web.id 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: t e N document.write("Other Links".anchor("other_links")); a r d 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 By n e H 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 http://www.hendra-jatnika.web.id 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 metodemetode 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 e N Table 5. Properti-properti objek Math dan nilainya. a r d Property Description E Euler's constant LN2 Natural logarithm of 2 0.693 LN10 Natural logarithm of 10 2.302 LOG2E Base 2 logarithm of e 1.442 LOG10E Base 10 logarithm of e 0.434 PI Ratio of circumference to diameter 3.14159 SQRT1_2 Square root of one-half 0.707 SQRT2 Square root of two 1.414 By n e H Approx. value 2.718 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 http://www.hendra-jatnika.web.id exp(number). Euler's. Mengembalikan pangkat e dari number, dimana e adalah konstanta 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. t e N Objek Date a r d 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. By n e H 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 http://www.hendra-jatnika.web.id 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 Offset between local time and GMT getYear The year t e N a r d n e H Selain dapat menerima berbagai informasi dari object Date, metode pada Tabel 7 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 http://www.hendra-jatnika.web.id 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);" t e N a r d document.write(eval("x + y / 4"), "<BR>") n e H document.write(eval(z), "<BR>") 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 http://www.hendra-jatnika.web.id 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. t e N Hal yang penting dari HTML Layout a r d n e H 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. By 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 http://www.hendra-jatnika.web.id 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 t e N Objek location mengandung informasi tentang URL sekarang. Acuannya ke objek tersebut adalah sebagai berikut: a r d n e 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 hostname. hostname menentukan metode access dari URL. 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 http://www.hendra-jatnika.web.id 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 t e N a r d 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 By n e H 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 http://www.hendra-jatnika.web.id 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 </SELECT> </FORM> Hasil : t e N White a r d n e H Object document juga mengandung properti berikut yang tidak berkaitan dengan warna: lastModified. By 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: <SCRIPT LANGUAGE="JavaScript"> <!-document.write("Update terakhir :"); document.write(document.lastModified); // --> </SCRIPT> Hasil: Update terakhir :01/31/2001 10:57:42 Page 134 / 197 http://www.hendra-jatnika.web.id 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 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. t e N a r d CATATAN n e H array adalah suatu array read-only. Entries tambahan ditambahkan dengan tag <A></A>. Metode link melakukan modifikasi terhadap isi dalam array link link By 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 http://www.hendra-jatnika.web.id 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 t e N Stream tersebut tetap terbuka sampai browser menemukan metode document.close(). document.close() memaksakan isi dari stream ditampilkan. Metode document.clear()membersihkan isi dari window. a r d 9. Objek Form By n e H 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 http://www.hendra-jatnika.web.id 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.. 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. t e N a r d By n e H 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 http://www.hendra-jatnika.web.id Contoh: <SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan kode dari browser non-js function periksa() { formObj = document.contoh; if ((formObj.nama.value == "") || (formObj.umur.value == "") || (formObj.lahir.value == "")) { alert("Anda tidak mengisi seluruh field."); return false; } else return true; } // akhir dari penyembunyian --> </SCRIPT> <FORM NAME="contoh" METODE=GET ACTION="" onSubmit="return periksa()"> <PRE> Nama Anda : <INPUT TYPE=TEXT NAME="nama" SIZE=30 MAXLENGTH=30> Umur : <INPUT TYPE=TEXT NAME="umur" SIZE=3 MAXLENGTH=3> Tgl. Lahir: <INPUT TYPE=TEXT NAME="lahir" SIZE=10 MAXLENGTH=10> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </PRE> </FORM> t e N a r d Hasil: Nama Anda : By n e H Umur : Tgl. Lahir: Submit Query Reset FORM>. Untuk JavaScript, hal tersebut adalah suatu read-only array yang membentuk properti berikut : action. property ini mengandung nilai dari atribut ACTION. element. ini adalah suatu array dari elemen object yang didefinsikan untuk encoding. property ini mengandung nilai dair atribut ENCTYPE. length. property ini mengandung jumlah dari isian didalam element array. metode. property ini mengandung nilai dari atribut METODE. target. property ini mengandung nilai dari atribut TARGET . Berikut ini adalah arti yang sah dari pengalamatan bentuk object :: formName.propertyName formName.metodeName(parameters) Page 138 / 197 form. http://www.hendra-jatnika.web.id forms[index].propertyName forms[index].metodeName(parameters) Metode Objek Form Object form hanya memiliki satu metode-submit. Metode submit melakukan aksi yang sama seperti tombol submit pada HTML form dan memiliki tata cara penulisan sebagai berikut: document.formName.submit() Objek element Objek elemen berpengaruh pada isi elemen dalam tag <FORM></FORM>. Tabel 9 menperlihatkan elemen objek dan properti-nya. Tabeel 9. Properti dari objek element. Element object Properti button name, value checkbox name, value, checked, defaultChecked hidden name, value password name, value, defaultValue radio name, value, checked, defaultChecked, length reset name, value t e N a r d n e H select By submit name, value text name, value, defaultValue textarea name, value, defaultValue name, length, options array, selectedIndex Properti adalah mengunakan pengalamatan seperti document.elementName.property, atau document.formName. elements[index].propertyName, dimana elementName adalah nilai dari nama property untuk objek elemen. Metode element Metode element melakukan emulasi dari sepupu mereka, yaitu penanganan event: blur(). Metode ini memindahkan fokus dari object yang ditentukan, tetap tidak membuat fokus pada objek lain. click(). Metode ini melakukan suatu simulasi klik mouse pada suatu objek yang ditentukan. Ketika mengacu pada element radio, bentuknya adalah document.radioName[index].click(). focus(). Metode ini memberikan fokus pada objek tertentu. select(). Metode ini men-select seluruh text area. Page 139 / 197 http://www.hendra-jatnika.web.id Kecuali objek radio, metode dialamatkan sebagai document.elementName.metodename(). Tabel 10 mendaftarkan element objek-objek dan metode yang bersesuaian Table 10. Metode-metode dari elemen objek-objek. Elemen objek Metode button click checkbox click hidden (tidak ada metode) password blur, focus, select radio click reset click select blur, focus submit click text blur, focus, select textarea blur, focus, select 10. Window dan Frame t e N Window dan frame membuat bingung banyak pengembang halaman Web dari pada aspekaspek browser lainnya. Ketika Netscape Navigator berjalan, suatu window akan dibuka, dan tergantung bagaimana pengaturan optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika anda memilih menu option File | New Web Browser, suatu window baru akan di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup jendela yang baru tersebut. a r d By n e H Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika dokumen frame ditutup, frame menghilang karena keberadaannya tergantung pada dokumen tersebut. Properti Objek Window Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada menampilkan pesan, tetapi sangat tergantung pada parameter yang diberikan. berikut ini adalah properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela browser: defaultStatus. defaultStatus adalah pesan yang dimunculkan pada status bar ketika tidak ada tulisan yang ditampilkan disana. Jika diset dari onMouseOver event handler, event handler harus mengembalikan true untuk perubahan status. frames. Property ini adalah suatu array yang mengandung object frame. Frame mewarisi semua properti dan metode dari objek window. length. nilai dari properti ini adalah jumlah frame dalam frame array. parent. Dari suatu acuan frame, ini adalah window yang mana frameset berada. Suatu frame diantara frameset tersebut dapat mengacu pada frame lain dalam frameset Page 140 / 197 http://www.hendra-jatnika.web.id dengan menggunakan parent.frames[index] tanpa memiliki acuan ke nama window. self. Ini adalah sama dengan window atau frame yang sekarang. status. Ini adalah pesan transient yang mana diset dengan onMouseOver event handler. top. Property ini digunakan sebagai acuan window yang laing atas. Dapat digunakan oleh child windows atau embedded filesets untuk mengacu pada window original. window. Property ini adalah sama dengan window sekarang. Contoh: <A HREF="http://www.indoprog.f2s.com" onMouseOver="window.status='Klik disini untuk keterangan lebih lengkap'; return true;" onMouseOut="window.status=''; ">Klik disini</A> Hasil: Klik disini Bentuk untuk mengacu properti window adalah window.propertyName self.propertyName By top.propertyName t e N a r d n e H parent.propertyName windowVar.propertyName propertyName Metode Objek Window Berikut ini adalah metode dari objek window atau frame: alert("message"). Metode ini membuat suatu kotak dialog peringatan dengan suatu tombol OK tunggal. Digunakan untuk menampilkan pesan yang tidak membutuhkan keputusan pemakai. close(). Metode ini menutup window acuan. Harus mengandung window acuan seperti window.close dan close() tanpa acuan adalah sama dengan document.close. confirm("message"). Metode confirm menampilkan suatu dialog box konfirmasi dengan tombol OK dan Cancel. OK mengembalikan nilai true, dan Cancel mengembalikan nilai false. [windowVar = ][window.]open("URL", "windowName" ["windowFeatures"]. Metode ini membuka suatu Jendela browser yang baru. Nama object windowVar Page 141 / 197 http://www.hendra-jatnika.web.id adalah nama dari jendela baru dan digunakan sebagai acuan untuk properti dan metodes-nya.URL menentukan URL yang akan dibuka ke jendela baru. Jika optionnya null, suatu window kosong akan dibuka. Variabel windowName adalah nama yang digunakan pada atribut TARGET dari <FORM> dan <A> tag. Variabel windowFeatures adalah suatu comma-separated list dari option berikut: toolbar=yes|no location=yes|no directories=yes|no status=yes|no menubar=yes|no scrollbars=yes|no resizable=yes|no width=pixels height=pixels Jika tidak ada yang ditentukan, maka semuanya bernilai true. Jika salah satu ditentukan, maka semua yang lain menjadi false. Jika salah satu di tentukan tanpa nilai, maka nilainya adalah true. t e N a r d NOTE n e H Setelah terbuat, window adalah tidak terikat pada parent window, jika parent window di tutup, window yang dibuat tersebut tetap buka.Event onUnLoad menangani penutupan window yang dibuat By prompt("message" [, inputDefault]). metode prompt menampilkan suatu prompt dialog box dengan suatu message, suatu input field, dan tombol OK, dan sebuah tombol Cancel. inputDefault adalah suatu string, integer, atau property dari suatu object yang mana mewakili nilai default untuk inout field. Jika inputDefault tidka ditentukan, input fied menampilkan nilai <undefined>. timeoutID=setTimeout(expression, msec). Dengan metode ini, evaluasi dari ekspresi adalah jumlah delay dalam milidetik. timeoutID adalah hanya digunakan oleh metode clearTimeout. clearTimeout(timeoutID). Metode ini membatalkan time-out yang ditentukan oleh metode setTimeout. Metode sebelumnya menggunakan acuan berikut: window.metodeName(parameters) self.metodeName(parameters) top.metodeName(parameters) parent.metodeName(parameters) Page 142 / 197 http://www.hendra-jatnika.web.id windowVar.metodeName(parameters) metodeName(parameters) PERHATIAN Metode open() dan close() perlu mengunakan acuan window.open() dan window.close() untuk menghindari scope dengan document.open() dan document.close() Membagi Window kedalam Frame Frames membagi suatu window secara multiple, memiliki scrollbar masing-masing. Frame dibuat dengan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Masing-masing dokumen membuat suatu frame array untuk dokumen. Jika suatu dokumen dibuka pada salah satu frame memiliki suatu <FRAMESET> tag, frame akan terbagi lagi menjadi frame oleh dokumen tersebut. Hirarki dari frameset adalah penting sebagai acuan properti dan metode dari frame. CATATAN Frames memiliki semua properti dari suatu window. Seluruh hirarki untuk struktur frame adalah sama dengan struktur window. t e N a r d Struktur dibawah setiap window atau frame dapat menjadi acuan. Selanjutnya, properti pada suatu window atau frame dapat mengubah properti object pada jendela atau frame lain. By n e H CATATAN Dokumen HTML yang menggunakan <FRAMESET></FRAMESET> mengandung hanya perintah frame. Setelah frame terbuka, dokumen tersebut menjadi tidak visible. Dokumen HTML adalah suatu frame dapat mengendalikan frame lain. Selanjutnya kemungkinan untuk pengaturan layar memberikan kebebasan bagi pengembang untuk suatu dokumen web yang interaktif Contoh : <html> <head> <script language="JavaScript"> if (top.location != this.location) top.location = this.location tidak berada </script> <title>Tutorial JavaScript</title> <frameset cols=175,*> Page 143 / 197 //membuat html //dalam frame lain http://www.hendra-jatnika.web.id <frame src="daftar.html" name="kiri"> <frame src="topik1.html" name="kanan"> </frameset> </head> </html> file daftar.html <html> <head> <script language="JavaScript"> function buka(x) { top.frames[1].location=x; return false } </script> </head> <body> <h1>Daftar Isi</h1> <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr> <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr> <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr> <a href="" onclick="return buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr> <a href="" onclick="return buka('topik5.html')">Dasar dari Objek</a><hr> <a href="" onclick="return buka('topik6.html')">Objek dan Fungsi built-in</a><hr> <a href="" onclick="return buka('topik7.html')">Objek netscape</a><hr> <a href="" onclick="return buka('topik8.html')">Objek form</a><hr> <a href="" onclick="return buka('topik9.html')">Window dan Frame</a><hr> t e N a r d By n e H </body> </html> Klik untuk melihat hasil dari contoh diatas 12. Summary JavaScript adalah lebih dari pada suatu bahasa script yang sederhana dan kurang dari suatu object-oriented programming language. Hal tersebut merupakan perekat yang mana mengikat banyak elemen yang berbeda ke suatu lingkungan dinamis dan interaktif. Page 144 / 197 http://www.hendra-jatnika.web.id Pertanyaan yang sering ditanya Saya memiliki dua frame, dan saya ingin klik pada pilihan diframe kiri akan mengupdate isi frame kanan. Bagaimana hal tersebut dilakukan ? Bagaimana saya membuat suatu link yang dapat menutup jendela browser ? Bagaimana saya membuat pesan pada status bar ketika pemakai meletakkan pointer pada suatu link ? Bagaimana membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list ? Saya memiliki dua frame, dan saya ingin klik pada pilihan diframe kiri akan mengupdate isi frame kanan. Bagaimana hal tersebut dilakukan ? Anda dapat melakukan hal tersebut dengan JavaScript, dan perhatikan contoh berikut : Misalnya halaman html untuk membuat frame kiri dan kanan adalah sebagai berikut : Contohy.html <html> <head> <title>Tutorial JavaScript</title> t e N <frameset cols=175,*> a r d <frame src="menu.html" name="kiri"> n e H <frame src="topik1.html" name="kanan"> </frameset> </head> </html> By Pada contoh diatas, pada frame kiri akan dibuka suatu html dengan nama menu.html, dan sebelah kanan akan diaktifkan topik1.html, dan isi dari menu.html adalah sebagai berikut : menu.html <html> <head> <script language="JavaScript"> function buka(x) { top.kanan.location=x; // membuka halaman x pada frame kanan return false } </script> </head> <body> <h1>Daftar Isi</h1> <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr> <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr> <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr> Page 145 / 197 http://www.hendra-jatnika.web.id <a href="" onclick="return Kendali dan Fungsi</a><hr> <a href="" onclick="return Objek</a><hr> <a href="" onclick="return Fungsi built-in</a><hr> <a href="" onclick="return netscape</a><hr> <a href="" onclick="return form</a><hr> <a href="" onclick="return Frame</a><hr> buka('topik4.html')">Struktur buka('topik5.html')">Dasar dari buka('topik6.html')">Objek dan buka('topik7.html')">Objek buka('topik8.html')">Objek buka('topik9.html')">Window dan </body> </html> Pada menu.html diatas, kita menggunakan event onclick pada masing-masing link yang akan memanggil suatu fungsi buka yang diikuti dengan suatu parameter yang berupa nama dokumen html target. Pada fungsi buka, kita menggunakan properti location untuk frame kanan membuka halaman bersangkutan. Catatan : kanan dalam hal ini adalah nama frame. Klik untuk melihat hasil dari contoh diatas t e N Bagaimana saya membuat suatu link yang dapat menutup jendela browser ? a r d Untuk menutup jendela browser yang sedang aktif anda dapat menggunakan metode close pada objek window. Contoh : By n e H <A HREF="javascript:window.close()">tutup</A> Coba klik tutup untuk menutup jendela ini. Bagaimana saya membuat pesan pada status bar ketika pemakai meletakkan pointer pada suatu link ? Anda dapat menggunakan properti window.status, dan event onMouseOver dan onMouseOut. Perhatikan contoh berikut ini : <SCRIPT LANGUAGE="JavaScript"> function message(text){ window.status = text; } </SCRIPT> <A HREF="http://www.indoprog.f2s.com" onMouseOver="message('Homepage indoporg');return true" onMouseOut="message('');return true"><B>(Homepage baru)</B></A> Coba letakkan mouse pointer pada linik Ayo ke (Homepage baru) Indoprog, dan perhatikan status bar browser anda. Page 146 / 197 http://www.hendra-jatnika.web.id Bagaimana membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list ? Anda dapat membuat suatu fungsi yang mengambil nilai item yang dipilih pemakai, dan membuka halam yang diinginkan Pilih tutorial yang diinginkan Adapun kode untuk Contoh diatas: <SCRIPT LANGUAGE='JavaScript'> <!-function BuatArray() { var jlhargumen = BuatArray.arguments.length; for ( i = 0 ; i < jlhargumen; i++ ) { this[i]=BuatArray.arguments[i] } } function buka() { var pilih = eval(document.dropdown.site.selectedIndex); if( (pilih > 0) && (pilih < 7) ) { var bagian=new BuatArray( '', 'http://indoprog.terrashare.com/tutor/html/index.html', 'http://indoprog.terrashare.com/tutor/javascript/index.html', 'http://indoprog.terrashare.com/tutor/asp/index.html', 'http://indoprog.terrashare.com/tutor/php/index.html', 'http://indoprog.terrashare.com/tutor/perl/index.html'); this.location=buka[pilih]; } } //--> </SCRIPT> t e N a r d n e H <FORM NAME="dropdown"> <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> By Page 147 / 197 http://www.hendra-jatnika.web.id 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. t e N HTML vs. XML a r d n e H y B XML kelihatan seperti HTML, tapi HTML menggunakan sekumpulan tag yang telah tetap (fixed) HTML dirancang untuk menampilkan data pada manusia Browsers sangat toleran pada kesalahan dalam HTML Semua browsers dapat menampilkan HTML Tag pada XML bebas dibuat (dan mendefenisikan arti) XML dirancanga untuk menjelaskan data pada komputers Dokumen XML haruslah wellformed (syntaknya betul) Hanya browsers dengan versi terbaru dapat menampilkan XML Contoh file Xml <?xml version="1.0" encoding="ISO-8859-1"?> <!-- Edited with XML Spy v4.2 --> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> Page 148 / 197 http://www.hendra-jatnika.web.id <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: <?xml version="1.0" encoding="ISO-8859-1"?> <!-- Edited with XML Spy v4.2 --> t e N • Baris pertama adalah deklarasikan XML, yang menyatakan bahwa dokumen tersebut merupakan dokumen XML versi 1.0. dengan encoding=”ISO-88859-1. • Baris kedua merupakan baris komentar. Penambahan komentar digunakan untuk membantu mengingatkan atau sebagai catatan bagi developer. Komentar diawali dengan karakter <!-- dan diakhiri 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. a r d By n e H 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 http://www.hendra-jatnika.web.id 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 e N Misal, jika anda mencari seorang bernama “chip”, anda akan menemukan halaman tentang Chocolate Chip, Computer Chip, binatang chipmunk dan orang yang a r d bernama Chip. Tapi jika sudah ada DTD untuk records name dan address, pencarian n e H orang yang bernama Chip dapat menghasilkan hasil yg lebih akurat dan berguna. 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 http://www.hendra-jatnika.web.id <?xml version="1.0" encoding="ISO-8859-1"?> <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 oleh browser versi yang lama perlu terlebih dahulu dikonversi ke HTML (dapat dilakukan di server). Seperti dijelaskan diatas salah satu tujuan diperkenalkannya xml adalah untuk komunikasi data yang dapat dimengerti oleh komputer. Sehingga tampilan dari dokumen XML kurang menrik unuk konsumsi mata manusia. 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: t e N a r d By n e H 1. XSLT (eXtensible Stylesheet Language Transformation) 2. CSS (Cascading Style Sheet) Page 151 / 197 http://www.hendra-jatnika.web.id 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) • XPath digunakan untuk menetapkan template yang match dengan bagian-bagian dari source tree • Selanjutnya XSLT digunakan untuk transform bagian yang match dan meletakkannya kedalam hasil tree dan merupakan out-put dari dokumen t e N a r d XPath XML document: By n e H <?xml version="1.0"?> <library> <book> <title>XML</title> <author>Gregory Brill</author> </book> <book> <title>Java and XML</title> <author>Brett McLaughlin</author> </book> </library > XPath layaknya seperti paths dalam sistim file komputer / menunjukkan dokumen itu sendiri (tidak ada elemen specific) /library selects the root element /library/book selects setiap elemen book //author selects setiap elemen author, dimanapun terdapat Page 152 / 197 http://www.hendra-jatnika.web.id 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: <author>Gregory Brill</author> • Gregory Brill </book> • Brett McLaughlin <book> <title>Java and XML</title> <author>Brett McLaughlin</author> </book> </library > t e N a r d Langkah: By n e H • 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> <author>Gregory Brill</author> </book> <book> Page 153 / 197 http://www.hendra-jatnika.web.id <title>Java and XML</title> <author>Brett McLaughlin</author> </book> </library > Tip transformasi xml ke html dengan xsl HTML yang diinginkan Outline XSL <html> <head> <title>Book Titles and Authors</title> </head> <body> <h2>Book titles:</h2> <ul> <li>XML</li> <li>Java and XML</li> </ul> <h2>Book authors:</h2> <ul> <li>Gregory Brill</li> <li>Brett McLaughlin</li> </ul> </body> </html> <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/199 9/XSL/Transform"> <xsl:template match="/"> <html> ... </html> </xsl:template> </xsl:stylesheet> t e N a r d n e Pemilihan titles dan authorsH y B < h2>Book titles:</h2> <ul> <xsl:for-each select="//book"> <li> <xsl:value-of select="title"/> </li> </xsl:for-each> </ul> <h2>Book authors:</h2> ...dengan cara yang sama dapat dilanjutkan dengan mengganti title dengan author Page 154 / 197 http://www.hendra-jatnika.web.id book.xsl <?xml version="1.0" encoding="ISO-8859-1"?> <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> <xsl:for-each select="//book"> <li> <xsl:value-of select="title"/> </li> </xsl:for-each> </ul> <h2>Book authors:</h2> <ul> <xsl:for-each select="//book"> <li> <xsl:value-of select="author"/> </li> </xsl:for-each> </ul> </body> </html> </xsl:template> </xsl:stylesheet> t e N a r d By n e H 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 http://www.hendra-jatnika.web.id 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'?> <!--File Name: rental.xml--> <?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> <RENTAL_MOBIL Stok="yes"> <JENIS_MOBIL>Van</JENIS_MOBIL> <MERK>Kia Carnival</MERK> <HARGA_RENTAL>Rp. 200.000/hari</HARGA_RENTAL> </RENTAL_MOBIL> <RENTAL_MOBIL Stok="yes"> <JENIS_MOBIL>Mini bus</JENIS_MOBIL> <MERK>Mazda E300</MERK> <HARGA_RENTAL>Rp. 300.000/hari</HARGA_RENTAL> </RENTAL_MOBIL> <RENTAL_MOBIL Stok="yes"> <JENIS_MOBIL>Truck</JENIS_MOBIL> <MERK>Mitsubishi</MERK> <HARGA_RENTAL>Rp. 400.000/hari</HARGA_RENTAL> </RENTAL_MOBIL> <RENTAL_MOBIL Stok="yes"> <JENIS_MOBIL>Bus</JENIS_MOBIL> <MERK>Mercedes</MERK> <HARGA_RENTAL>Rp. 800.000/hari</HARGA_RENTAL> </RENTAL_MOBIL> </INVENTARIS> t e N a r d By n e H 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 http://www.hendra-jatnika.web.id 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 version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> <catalog> t e N a r d By n e H Page 157 / 197 http://www.hendra-jatnika.web.id 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 t e N a r d • Parser XML adalah API (Application Programming Interface) yang membaca content dari dokumen XML – API yang popular adalah DOM (Document Object Model) dan SAX (Simple API for XML) By n e H • 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> http://www.hendra-jatnika.web.id 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) + satu atau lebih * zero atau lebih • Separators , keduanya, dalam urutan | atau • Grouping ( ) grouping foreword? chapter+ appendix* foreword?, chapter+ section|chapter (section|chapter)+ Elements whitout children (Eelemen tanpa anak) t e N a r d • Sintaks <!ELEMENT name category> – name adalah nama elemen yang digunakan dalam tag start dan tag akhir – category boleh EMPTY (kosong): n e 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 http://www.hendra-jatnika.web.id • 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 • DTD tidak mengenal namespaces—DTD menganggap suatu colon sebagai bagian dari nama – Contoh berikut adalah berbeda (dan keduanya legal): t e N a r d n e H •<!ELEMENT chapter (paragraph+)> •<!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 http://www.hendra-jatnika.web.id –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) –ID t e N Nilainya adalah character data Nilainya adalah salah satu dari daftar ini Nilainya adalah suatu identifier unik a r d • Nilai ID haruslah nama XML legal dan harus unuik dalam dokumen –NMTOKEN n e H Nilainya adalah nama XML legal • Kadang ini digunakan untuk mencegah whitespace dalam nama • Juga untuk mencegah angka, karena nama XML tidak adapat dimulai dengan angka y B Jenis attribute yang kurang penting • • • • • • • IDREF IDREFS NMTOKENS ENTITY ENTITIES NOTATION xml: ID dari element lain Daftar dari ID lain Daftar darai nama XML yang valid Suatu entitas Daftar adari entitas Suatu notasi 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 http://www.hendra-jatnika.web.id –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: &lt;, &gt;, &amp;, &quot;, and &apos; 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 t e N <?xml version="1.0"?> <!DOCTYPE myXmlDoc SYSTEM "http://www.mysite.com/mydoc.dtd"> <weatherReport> <date>05/29/2002</date> <location> <city>Philadelphia</city>, <state>PA</state> <country>USA</country> </location> <temperature-range> <high scale="F">84</high> <low scale="F">51</low> </temperature-range> </weatherReport> a r d By n e H 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 http://www.hendra-jatnika.web.id • Jika suatu DTD digunakan hanya satu dokumen XML, dapat diletakkan langsung dalam dokumen: <?xml version="1.0"> <!DOCTYPE myRootElement [ <!-- DTD content goes here --> ]> <myRootElement> <!-- XML content goes here --> </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 t e N a r d • DTDs merupakan bahasa spesifikasi yang sangat lemah – Kita tidak dapat meletakkan pembatasan pada konten elemen – Sulit untuk spesifikasi: n e H Semua children harus muncul, tapi dapat dalam urutan sembarang This element must occur a certain number of times –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 • • By 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 http://www.hendra-jatnika.web.id 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. Sebagai kesimpulan: untuk membangun situs dapat diacu melalui gambaran piramida berikut. t e N Kegunaan/Purpose (Ekonomi) By a r d n e H Content User Bentuk /Form (Visual) Content merupakan batu bata yang digunakan membangun piramida. Untuk itu perlu fondasi yang kuat yaitu yang digambarkan oleh visual dan teknologi. Sedangkan penekanan ekonomi menjadikan projek mempunyai nilai. Disainer Fungsi (Teknologi) Model Proses Pengembangan Web Dalam membangun situs web dapat didekati sebagai proses Top-Down seperti diperlihatkan oleh diagram berikut: Page 164 / 197 http://www.hendra-jatnika.web.id 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). Langkah selanjutnya memulai pembangunan situs termasuk prototipe secara teknik dan visual Selanjutnya tahap implementasi hasil dari disain dan melakukan pengujian (Integrasi dan Pengujian). Terakhir adalah Rilis (Release) atau Publikasi situs. Kadang-kadang masih diperlukan modifikasi berdasarkan umpan balik dari user. t e N a r d By n e H 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 http://www.hendra-jatnika.web.id 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. Secara 1. 2. 3. umum, persiapan membuat WebSite, sebagai berikut: Merumuskan tujuan pembuatan WebSite. Menentukan Isi. 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 Personal, dst) Berfungsi sebagai media Presentasi, informasi, publikasi, Promosi, dan Pemasaran. Web ini harus memiliki daya tarik bagi pengunjung untuk menyimak isi web sehingga faktor desain menjadi paling utama. 2. Informasi/Berita, Media Informasi dan Berita adalah yang terutama (Majalah/Koran online). Keakuratan dan kelengkapan informasi dari web semacam ini sangat penting. 3. Services, Media untuk pelayanan, seperti Free Email, Search Engine, SMS via Internet, E-Commerce (Media Transaksi Online), dst. t e N a r d By n e H 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 http://www.hendra-jatnika.web.id 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 AboutUs.html Product.htm Clients.htm ContactUs.htm News.htm By Sebagai Halaman Cover / halaman Pertama, Nama yang telah standard secara internasional, adalah: Index.html atau Default.html t e N a r d n e H 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 http://www.hendra-jatnika.web.id 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. t e N Contoh: memiliki kesamaan tema dalam halaman-halaman webnya. a r d Keterpaduan Desain, dapat dilihat seperti: Kesamaan Jenis Font, Warna, Tombol Navigasi (Menu), Letak Menu, Komposisi, dst. By n e H 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 http://www.hendra-jatnika.web.id 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) Ukuran PIXEL Gunakan PIXEL Sebagai satuan ukuran. t e N a r d n e H Resolusi Monitor Saat ini sangat umum Web berpatokan pada ukuran Resolusi Monitor 800 x 600 (Sudah jarang Web yang berpatokan dibawah resolusi tersebut) By 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 http://www.hendra-jatnika.web.id 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. 3. 4. 5. t e N Adobe Photoshop : Desain berbasis titik (bitmap/Pixel) Adobe Image Ready : Memotong gambar-gambar ke dalam format html Adobe Illustrator : Desain berbasis vector CorelDraw : Desain berbasis vector Macromedia Freehand : Desain berbasis vector a r d n e H Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah efek cahaya, textur dan manipulasi teks. By 1. 2. 3. 4. 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. Macromedia Firework : Efek teks Painter : Memberikan efek lukisan Ulead Photo Impact : Efek frame dan merancangan icon yang cantik. Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup. 1. 2. 3. 4. 5. 6. 7. Macromedia Flash : Membuat animasi dan Efek-efek SWF (Software serupa: Adobe Live Motion, Corel RAVE, SWiSH) SWiSH : Membuat berbagai macam efek text dengan format file FLASH. Gif Construction Set : Membuat animasi file gif Microsoft Gif Animator : Membuat animasi file gif 3D Studio Max : Untuk membuat objek dan animasi 3D Swift 3D : Merancang animasi 3D dengan format file FLASH. 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 http://www.hendra-jatnika.web.id 1. 2. 3. 4. 5. 6. 7. Macromedia Dreamweaver Microsoft Frontpage Alaire Homesite Adobe Go Live Corel WebDesigner Cold Fusion 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. 2. 3. 4. 5. ASP (Active Server Page) Borland Delphy CGI (Common Gateway Interface) PHP 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. 2. 3. 4. 5. t e N Bullet FTP Cute FTP WS-FTP Macromedia Dreamweaver : dengan fasilitas Site FTP Microsoft Frontpage : dengan fasilitas Publish a r d n e H Sound Editor : Untuk mengedit file midi atau wav, perlu alat khusus untuk itu. 1. 2. By Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav. 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 http://www.hendra-jatnika.web.id 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. t e N a r d By n e H Page 172 / 197 http://www.hendra-jatnika.web.id 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: t e N a r d n e H Button Sub Menu, Contoh: By Navigasi, Contoh: Back (Back to Top) Page 173 / 197 Next http://www.hendra-jatnika.web.id Button Lain-lain, Contoh: Download SIGN IN SKIP Isi ! Home Batal ! Menurut Bentuknya: Icon Menu : Tombol Menu yang disertai Simbol/Grafis yang unik. Location Tarif & Package Schedule NEWS t e N a r d By n e H 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 http://www.hendra-jatnika.web.id 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 t e N a r d Memo Box By n e H Page 175 / 197 Check Box http://www.hendra-jatnika.web.id 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 : t e N Please send comments, feedback, and suggestions to [email protected] About Webmaster - Last update on 5 July 2002 Copyright ©1999 - Siloam Gleneagles a r d n e H 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. 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 http://www.hendra-jatnika.web.id 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. t e N a r d Namun ada banyak situs yang menyediakan fasilitas tersebut secara Cuma-Cuma (Gratis) namun tentunya hal yang kita dapatkan secara gratis akan diimbangi dengan sesuatu yang harus kita terima. Biasanya mereka menampilkan banner [iklan] di homepage kita dan ini sebenarnya sangat menganggu, tapi tetap saja kita harus menerima bila ingin menggunakan fasilitas gratis tersebut. Web Hosting By n e H 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 http://www.hendra-jatnika.web.id Apa sih bedanya yang signifikan? Silahkan Anda baca tabel dibawah ini: Fasilitas Kapasitas Keamanan Banner Iklan Penggunaan Script Manajemen Informasi Up to date Gratis Bayar Terbatas Sesuai yang disediakan Banyak Tidak ada - Terbatas Agak bikin repot Tidak terbatas Tergantung yang Anda bayar Lebih baik dari yang gratis Tidak ada Sesuai yang Anda bayar Mudah 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. Optimalnya adalah sekitar 100 - 150 situs untuk sebuah server dengan prosesor Pentium 1 GHz dan RAM 512 MB. Tanyakan pada web hosting yang Anda pilih, apakah perusahaannya membuat backup secara teratur. Seandainya tidak, lekas-lekaslah Anda angkat kaki dan mengucapkan selamat tinggal. Cari perusahaan yang lain! Keamanan. Bagian ini amat penting. sebab data Anda yang tersimpan harus aman 'lahir-batin'. Syukur-syukur ada asuransi yang bisa Anda klaim, kalau server perusahaan tersebut mengalami kerusakan yang cukup lama. t e N a r d By n e H 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 http://www.hendra-jatnika.web.id Camera! Anda dapat menambahkan semua fasilitas yang tersedia secara cumacuma. 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. Untuk itu jangan pernah melupakan “Sketsa” dalam memulai setiap rancangan… karena perencanaan yang baik adalah Sketsa. (sketsa adalah “Senjata utama” seorang desainer). Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan software seperti Adobe Photoshop /Adobe Illustrator /Macromedia Fireworks /Macromedia Freehand, dan banyak lagi (sesuai selera) untuk memperhalus sketsa desain. 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. Membuat Animasi : Animasi diperlukan untuk menghidupkan web/homepage kita agar menarik pengunjung. Macromedia Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut. 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). 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. 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 t e N 2. 3. 4. 5. 6. 7. a r d By n e H Page 179 / 197 http://www.hendra-jatnika.web.id 8. Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP. Homepage Pribadi : Untuk homepage pribadi atau yang sekedar ingin coba-coba biasanya setelah file html sudah jadi dapat hosting di tempattempat 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). t e N Yang pertama, pada saat Anda mendaftar pada suatu search engine Anda harus memasukkan keyword dan deskripsi singkat tentang web site Anda. Contohnya Search Indonesia, Catcha, Google dll. a r d n e H Yang kedua, pada saat mendaftar Anda cukup menunjukkan URL website 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. By 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 masingmasing situs milik masing-masing. Kebutuhan seperti ini menimbulkan banyak profesiprofesi baru didalam dunia internet, diantarnya : Page 180 / 197 http://www.hendra-jatnika.web.id - 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 t e N Web Administrator Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi Server, baik itu mulai dari instalasi sampai kepada masalah (troubleshooting), biasanya seorang Web Administrator harus menguasai : - OS Unix (LInux, FreeBSD, dll) - OS NT - Jaringan (LAN, WAN, Intranet) - Keamanan Server a r d By n e H Web Master 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 http://www.hendra-jatnika.web.id t e N a r d By n e H Page 182 / 197 http://www.hendra-jatnika.web.id 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 t e N Search Engine vs Directory a r d Keuntungan promosi melalui search engine dapat dilihat dari kenyataan bahwa lebih dari 80% pemakai internet mengandalkan search engine sebagai alat pencari informasi (berdasarkan research dari Georgia Tech's GVU Center). Jumlah ini akan terus bertambah mengingat search engine merupakan cara yang termudah dan tercepat dalam mencari 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 alamatalamat 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 By n e H Page 183 / 197 http://www.hendra-jatnika.web.id 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 menentukan rangking sebuah website. Tetapi beberapa poin dibawah ini sudah umum dipakai tolok ukur oleh sebagian besar search engine, dan pastikan kalau web site Anda memakainya. Keyword pada domain name, jika suatu website yang berisi koleksi lagu-lagu mp3 misalnya, akan sangat baik kalau digunakan domain www.mp3.com. Ini adalah cara kuno, tetapi sampai saat ini masih tetap dipakai oleh search engine. Keyword pada nama file, misalnya Anda memiliki halaman web yang berisi informasi 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. t e N a r d By n e H Page 184 / 197 http://www.hendra-jatnika.web.id 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... t e N Meta Tag Keyword Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag keyword adalah sebagai berikut : <meta name="keywords" content="keyword1 keyword2 keyword3 ..."> atau ada juga yang menulis dengan pemisah tanda koma : <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> a r d By n e H 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 keywordkeyword 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 http://www.hendra-jatnika.web.id <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 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 tetap spesifik. Sebuah halaman web yang baik hanya berisi dua sampai tiga fokus bahasan. Tip-tiperikutmerupakan langkah selanjutnya untuk mengoptimalkan halaman web: . Perhatikan penggunaan gambar. Hindari penggunaan gambar/image yang terlalu berat pada web Anda. Usahakan agar ukuran halaman web + gambar tetap dibawah 64 kb. Gunakan software-software seperti Adobe Photoshop (menu file - save for web) untuk mengoptimalkan 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 apaapa. 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. t e N a r d By n e H Page 186 / 197 http://www.hendra-jatnika.web.id 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. Mulailah membuat content yang panjangnya minimal 3 paragraf. Jangan membuat halaman yang terlalu pendek, karena beberapa search engine seperti Altavista dan Northern Light akan memprioritaskan halaman yang kaya akan content. Usahakan agar keyword-keyword yang 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. 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. t e N a r d By n e H 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 http://www.hendra-jatnika.web.id 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 terupdate lebih cepat. t e N a r d 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. By n e H 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 News Search Engines Metacrawlers Multimedia Search Engines Search Utilities Paid Listings Search Engines Specialty Search Engines Kids Search Engines Regional Search Engines Beberapa layanan search engine: Seach Engine AOL Search AltaVista Ask Jeeves Direct Hit Alamat Site http://search.aol.com/ http://www.altavista.com http://www.askjeeves.com http://www.directhit.com Page 188 / 197 Keterangan Salah satu yang tertua. Memberi pelayanan secara personal. Menampilkan alamat site dan juga http://www.hendra-jatnika.web.id Excite FAST Search Google HotBot IWon Inktomi LookSmart Lycos MSN Search Netscape Search's Northern Light Open Directory RealNames Yahoo rangkingnya Selain memakai index juga memakai human-powered. http://www.alltheweb.com/ Salah satu dengan jumlah index terbanyak yang dijalankan oleh Terra Lycos. http://www.google.com Pilihan terbaik dari layanan search engine yang menawarkan banyak web site dan pencarian images. http://hotbot.lycos.com/ Pilihan favorit bagi peneliti. http://home.iwon.com/index_gen.html Didukung oleh Televisi Network CBS dan selalu memberikan hadiah-hadiah secara teratur. http://www.inktomi.com/ Aslinya Inktomi berada di UC Berkeley kemudian penciptanya membuka usaha sendiri dengan nama yang sama dan mengisi index baru. http://www.looksmart.com/ Index untuk pencarian dilakukan secara bertahap, bekerja sama dengan MSN Search, Excite, dll. http://www.lycos.com/sitemap.asp Lycos memulainya dengan pendataan berdasarkan web yang masuk dan masih membutuhkan data dari search engine lain, namun sekarang sudah dapat berdiri sendiri. http://search.msn.com/ Bekerja sama dengan LookSmart dengan hasil kedua berasal dari Inktomi, juga dari RealNames, dan Direct Hit. http://search.netscape.com/ Hasil pencarian berasal dari Open Directory dan data Netscape. Hasil kedua datang dari Google, dll. http://www.northernlight.com/ Pilihan favorit lainnya bagi peneliti yang menampilkan index yang banyak, selain itu juga ditampilkan beberapa dokumen yang tidak dapat dibuka tanpa bayar. http://dmoz.org/ http://www.realnames.com Sistem yang digunakan lebih sederhana dengan hanya mencantumkan kata kunci yang sederhana. Merupakan search engine yang berhasil. http://www.yahoo.com/ Yang paling pupolar yang memiliki reputasi baik dalam membantu dalam pencarian informasi dengan mudah. http://www.excite.com t e N a r d By n e H Page 189 / 197 http://www.hendra-jatnika.web.id 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. t e N Pada umumnya META Tag Abstract berupa satu baris kalimat yang memberikan a r d gambaran seluruh halaman. Walaupun search engine jarang menggunakan tag ini, n e H tetapi merupakan pelengkap yang berguna bagi search engine yang hanya membaca sejumlah baris pertama dari halaman web anda. By Penulisan META Tag Abstract META Name: General Usage: "Abstract" <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 http://www.hendra-jatnika.web.id 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 ([email protected]) Penulisan META Tag Author META Name: General Usage: "Author" <META name="Author" content="Author Information"> Pemakaian oleh Search Engine 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. t e N a r d META Tag Copyright n e H Tag Copyright mendefinisikan informasi tentang hak cipta dokumen tersebut 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: General Usage: "Copyright" <META name="Copyright" content="Copyright Statement"> Pemakaian oleh Search Engine Walaupun tidak banyak search engine yang secara khusus mencari META Tag Copyright, hal tersebut secara jelas menunjukkan peryataan dari pemilik atau Page 191 / 197 http://www.hendra-jatnika.web.id 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. t e N a r d Pemakaian META Tag Description META Name: General Usage: n e H "Description" <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 http://www.hendra-jatnika.web.id 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: Supported Distributions: General Usage: "Distribution" Global | Local | IU <META name="Distribution" Note: Only use one of the above content="Global"> 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 t e N lebih baik. Expires META Tag a r d n e 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: General Usage: "Expires" <META name="Expires" content="Tue, 01 Jun 1999 19:58:02 GMT"> Note: Requires RFC1123 date as shown above Page 193 / 197 http://www.hendra-jatnika.web.id Pemakaian oleh search engine 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 t e N kata kunci yang sesuai untuk situs anda dan hindari perulangan yang mana akan menyebabkan search engine a r d menurunkan rangking anda sebagai usaha mengacaukan sistem mereka. Sama dengan META Tag Description, search engine n e H memberikan prioritas pada sejumlah kata pertama pada keterangan anda, jadi By fokuskan pada kata kunci utama anda dan yang selanjutnya merupakan sinonim atau kata lain yang berhubungan. Pemakaian META tag keyword META Name: General Usage: COPYRIGHT NOTICE: "Keywords" <META name="Keywords" content="first, second, third"> Ketika membuat kata kunci untuk situs web anda, jangan mencantumkan merek dagang atau hak cipta perusahaan lain. Banyak perusahaan telah memenangkan tuntutan hukum untuk usaha "mencegah" trafik ke pesaing pada search engine. Pemakaian oleh 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 http://www.hendra-jatnika.web.id 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: Supported Languages: "Content-Language" All RFC1766 compliant languages. A small excerpt of available languages is found below: BG (Bulgarian) CS (Czech) DA (Danish) DE (German) EL (Greek) EN (English) EN-GB (English-Great Britain) EN-US (English-United States) ES (Spanish) ES-ES (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) <META HTTP-EQUIV="Content-Language" content="EN"> t e N a r d By General Usage: n e H Pemakaian oleh search engine Page 195 / 197 http://www.hendra-jatnika.web.id 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. t e N Pemakaian META Tag Revisit META Name: General Usage: a r d "Revisit-After" <META name="Revisit-After" Note: X indicates a number en By content="X Days"> H Search Engines Usage 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 http://www.hendra-jatnika.web.id 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: Supported Types: General Usage: "Robots" noindex | index | nofollow | follow <META name="Robots" content="index,follow"> Pemakaian oleh search engine 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 t e N a r d By n e H Page 197 / 197
