06 Javascript

Dasar-dasar Pemrograman Javascript
Pada bagian ini akan dipelajari tentang dasar-dasar pemrograman aplikasi internet dan intranet dengan bahasa Javascript.
Javascript
Bagian 1. Pengenalan JavaScript

1.1 Apakah JavaScript?
JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. Dengan JavaScript kita dapat dengan mudah membuat halaman web yang interaktif.
1.2 JavaScript tidak sama dengan Java!

tabel
1.3 Menjalankan JavaScript

Apa yang diperlukan untuk menjalankan script yang ditulis dengan JavaScript? Kita perlu JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript misalnya Netscape Navigator (versi 2.0 ke atas ) atau Microsoft Internet Explorer (MSIE - versi 3.0 ke atas). Mengingat kedua browser di atas telah banyak beredar dan digunakan, pemilihan JavaScript sebagai untuk meningkatkan kemampuan halaman web menjadi sangat baik. Untuk menggunakan JavaScript kita harus telah mengenal baik HTML.
1.4 Mencantumkan JavaScript pada halaman HTML

Kode JavaScript dituliskan langsung pada halaman HTML. Mari kita lihat contoh sederhana berikut ini untuk mengerti bagaimana JavaScript bekerja:
<html> <body> <br> Ini halaman HTML normal. <br> <script language="JavaScript"> document.write("Yang ini akibat JavaScript!") </script> <br> Ini HTML lagi. </body> </html>
Contoh sederhana di atas kelihatan seperti halaman HTML normal. Satu-satunya hal yang baru adalah bagian:
Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
<script language="JavaScript"> document.write("Yang ini akibat JavaScript!") </script>
Bagian di atas adalah contoh penggunaan JavaScript. Untuk melihat hasilnya simpan file di atas sebagai file HTML normal dan buka dari JavaScript-enabled browser. Hasilnya akan terlihat seperti berikut ini: (jika kita menggunakan JavaScript-enabled browser akan terlihat 3 baris):
Ini halaman HTML normal. Yang ini akibat JavaScript! Ini HTML lagi.
Sebenarnya script di atas tidaklah begitu berguna, namun bisa memberikan gambaran bagaimana cara menggunakan tag <script>. Segala sesuatu yang berada di antara tag
<script> dan </script> di-interpretasi-kan sebagai kode JavaScript. Di situ kita bisa melihat
penggunaan document.write() salah satu perintah yang penting dalam pemrograman dengan JavaScript. document.write() digunakan untuk menulis sesuatu pada dokumen (dalam hal ini adalah dokumen HTML). Jadi program JavaScript sederhana kita di atas berfungsi untuk menuliskan text Yang ini akibat JavaScript! ke dokumen HTML.
1.5 Non-JavaScript browser

Apa yang akan terjadi jika kita menggunakan browser yang tidak mengerti JavaScript? NonJavaScript browser tidak mengenal tag <script>. Dia akan mengabaikan tag itu dan mengeluarkan seluruh kode selayaknya text biasa . Ini berarti bahwa user akan melihat kode JavaScript program kita yang ada di dokumen HTML. Ini tentunya bukan hal yang kita harapkan. Ada cara untuk menyembunyikan baris kode dari browser yang seperti itu, yaitu dengan menggunakan HTML-comments . Baris kode kita yang baru akan terlihat seperti ini:
<html> <body> <br> Ini dokumen HTML normal <br> <script language="JavaScript">  </script> <br> Ini HTML lagi. </body> </html>
Javascript Tampilan pada non-JavaScript browser akan terlihat seperti ini:

Ini dokumen HTML normal Ini HTML lagi
Tanpa HTML-comment tampilan pada non-JavaScript browser akan seperti:

Ini dokumen HTML normal document.write("Ini akibat JavaScript!") Ini HTML lagi
Harap diingat bahwa kita tidak bisa menyembunyikan baris kode JavaScript secara keseluruhan. Apa yang kita lakukan di atas adalah upaya untuk menyembunyikan kode dari browser-browser tua yang tidak mengerti JavaScript. Melalui menu 'View document source' tetap saja baris kode JavaScript yang ada akan kelihatan.
1.6 Event
Event dan event handler merupakan hal yang sangat penting dalam pemrograman JavaScript. Event adalah sesuatu yang terjadi karena aksi user. Contohnya jika user men-click tombol mouse terjadilah event Click. Jika mousepointer bergerak melewati sebuah link terjadilah event MouseOver. Ada banyak event yang terdapat dalam JavaScript yang selengkapnya bisa di lihat pada JavaScript Reference. Tentunya kita ingin program JavaScript kita bereaksi jika terjadi suatu event tertentu. Ini bisa dilakukan dengan bantuan event-handlers. Sebagai contoh kita memiliki sebuah tombol yang akan mengeluarkan sebuah popup window jika di-tekan. Ini berarti bahwa sebuah window popup harus muncul sebagai reaksi dari event Click. Event-handler yang harus kita gunakan adalah onClick, yang memberitahukan apa yang harus dikerjakan oleh komputer jika event ini terjadi. Contoh di bawah ini menunjukkan bagaimana mudahnya menggunakan event-handler
onClick:
<form> <input type="button" value="Click me" onClick="alert('Ya')"> </form>
Ada beberapa hal baru dalam kode di atas, mari kita lihat satu per satu. Kita telah membuat form dan sebuah tombol (ini merupakan bahasa HTML standard) . Bagian yang baru adalah
onClick="alert('Ya')" yang berada di dalam tag <input>. Inilah yang mendefinisikan apa
yang akan terjadi jika tombol ditekan. Jadi jika terjadi event Click, komputer akan Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript mengeksekusi alert('Ya'), yang merupakan kode JavaScript (perhatikan bahwa kita tidak menggunakan tag <script> pada kasus ini).
alert() berfungsi untuk menampilkan window popup. Di dalam tanda kurung kita tentukan
string yang akan muncul pada window yang dimaksud. Jadi script kita di atas menampilkan window dengan tulisan 'Ya' saat user men-click tombol. Satu hal yang mungkin membingungkan: pada perintah document.write() kita menggunakan double quotes (") dan pada alert() kita menggunakan juga single quotes ('), mengapa? Pada contoh ini kita menuliskan onClick="alert('Yo')" kita gunakan keduanya (double dan single quote) . Jika kita tulis onClick="alert("Yo")" maka komputer akan bingung mana yang menjadi bagian event-handler onClick dan mana yang bukan. Urutan penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan onClick='alert("Yo")'. Ada banyak event-handler lain yang bisa kita gunakan. Selengkapnya lihat pada referensi JavaScript.
1.7 Function
Pada dasarnya function merupakan cara untuk menyatukan beberapa perintah. Mari kita tulis sebuah script yang mengeluarkan teks tertentu sebanyak tiga kali. Perhatikan contoh berikut ini:
<html> <script language="JavaScript">  </script> </html>
Hasil keluarannya akan seperti:

Selamat datang pada homepage saya!
Javascript
Ini menggunakan JavaScript!
sebanyak tiga kali. Perhatikan baris kode menuliskan kode sebanyak tiga kali akan memberikan hasil yang diinginkan. Tapi apakah ini efisien? Tidak, kita dapat mebuatnya lebih baik lagi seperti pada kode di bawah ini:
<html> <script language="JavaScript">  </script> </html>
Pada script di atas kita definisikan sebuah function yang dilakukan melalui baris-baris:
function myFunction() { document.write("Selamat datang pada homepage saya!<br>"); document.write("Ini menggunakan JavaScript!<br>"); }
Perintah-perintah di dalam tanda {} merupakan milik function myFunction(). Ini berarti ada dua perintah document.write() yang dijadikan satu dan dapat dieksekusi melalui pemanggilan function yang dimaskud. Pada contoh kita memanggil function ini sebanyak tiga kali dan berarti bahwa function akan dieksekusi sebanyak tiga kali. Functions dapat pula dikombinasikan dengan event-handler seperti pada contoh berikut ini:
<html> <head> <script language="JavaScript">  </script> </head> <body> <form> <input type="button" value="Calculate" onClick="calculation()"> </form> </body> </html>
Tombol akan memanggil function calculation() jika di-click. Kita lihat bahwa function melakukan perhitungan tertentu sehingga kita perlu menggunakan variabel x, y dan result. Kita mendefinisikan variabel dengan keyword var. Variables dapat digunakan untuk menyimpan harga-harga yang berbeda- seperti angka, text, strings dan lainnya. Baris var result= x + y; memberitahu browser untuk membuat variabel result dan menyimpan harga x + y (5 + 12) dalam variabel result. Setelah operasi ini isi variabel result adalah 17. Perintah
alert(result) artinya sama dengan alert(17), yaitu popup window akan muncul dengan isi
angka 17.
Javascript
Bagian 2. Dokumen HTML

2.1 Hirarki JavaScript
Dalam sebuah halaman web terdapat bermacam-macam elemen seperti gambar (image), link, form, tombol, input text, dan sebagainya. JavaScript menyusun semua elemen halaman web dalam satu susunan hirarki. Setiap elemen dilihat sebagai object. Setiap object dapat memiliki beberapa property (yang menentukan sifat dan tampilannya) dan method (yang menentukan apa yang bisa dikerjakan oleh object yang bersangkutan). Dengan bantuan JavaScript kita dapat dengan mudah memanipulasi object-object tersebut. Untuk ini kita harus mengerti hirarki dari semua object-object HTML. Sebagai contoh kode berikut ini merupakan halaman HTML sederhana berikut ini.
<html> <head> </head> <body bgcolor=#ffffff> <center> <img src="home.gif" name="pic1" width=200 height=100> </center> <p> <form name="myForm"> Name: <input type="text" name="name" value=""><br> e-Mail: <input type="text" name="email" value=""><br><br> <input type="button" value="Push me" name="myButton" onClick="alert('Yo')"> </form> <p> <center> <img src="ruler.gif" name="pic4" width=300 height=15> <p> <a href="http://www.wahid.com/~daniel/">My homepage</a> </center> </body> </html>
dengan tampilan sebagai berikut: Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
Kita lihat ada dua image, satu link dan sebuah form dengan dua text field dan sebuah tombol. Dari pandangan JavaScript window browser adalah sebuah window-object. Window-object ini berisi elemen-elemen seperti statusbar. Di dalam window kita dapat me-load dokumen HTML (atau file bertipe lain - kita batasi dulu pada file HTML). Halaman ini merupakan sebuah document-object. Artinya document-object mewakili dokumen HTML yang di-load pada saat itu. Document-object merupakan object yang sangat penting dalam JavaScript kita akan sering menggunakannya. Property dari document-object contohnya adalah warna background halaman. Berikut ini ilustrasi hirarki yang dibuat oleh contoh halaman HTML di atas:
Javascript
10
Untuk bisa memperoleh informasi tentang suatu object tertentu dan memanipulasinya kita harus tahu bagaimana mengaksesnya. Kita dapat mengetahui nama object-object yang ada berdasarkan pada hirarki di atas. Misalnya untuk mengakses image pertama kita harus melihat pada hirarki dimulai dari atas. Object pertama disebut document. Image pertama dalam halaman itu diwakili oleh images[0]. Ini artinya kita dapat mengakasesnya melalui JavaScript dengan nama document.images[0]. Demikian juga jika misalnya kita ingin mengetahui apa yang di masukkan user pada elemen pertama dari form, kita harus terlebih dahulu tahu bagaimana mengakses object yang dimaksud. Kita mulai lagi dari atas hirarki. Ikuti terus jalurnya sampai menemukan object bernama elements[0] satukan semua nama object yang terlewati, sehingga kita menemukan nama text field pertama yaitu: document.forms[0].elements[0] Sekarang bagaimana kita bisa mengetahui isi dari text yang dimaksukkan user? Kita harus mengakses proprty atau method-nya. Untuk mengetahui secara lengkap property dan method apa yang dimiliki oleh object kita dapat melihat referensi JavaScript. Di situ kita akan melihat bahwa text field memiliki property value yang berisi text yang dimasukkan kedalamnya oleh user. Sekarang kita dapat membaca apa yang dimasukkan user misalnya dengan baris berikut ini:
name = document.forms[0].elements[0].value;
Isinya akan disimpan dalam variabel name sehingga sekarang kita dapat bekerja dengan variabel ini. Misalnya kita dapat membuat window popup dengan alert("Hi " + name). Jika input Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
11
adalah 'Yulia perintah alert("Hi " + name) akan mengeluarkan window popup dengan text
'Hi Yulia'.
Jika kita memiliki halaman HTML yang besar, akan sangat merepotkan mengakses object-object yang ada dengan angka-angka - contohnya apakah document.forms[3].elements[17] ataukah
document.forms[2].elements[18]? Untuk menghindari kesulitan ini kita dapat memberi nama
yang unik untuk setiap object. Sekarang kita tulis lagi kode HTML di atas sebagai berikut:
<form name="myForm"> Name: <input type="text" name="name" value=""><br> ...
Dengan cara seperti ini, kita dapat mengakses forms[0] dengan myForm, dan elements[0] dengan name Jadi selain menuliskan
name= document.forms[0].elements[0].value;
kita dapat juga menuliskan

name= document.myForm.name.value;
yang menjadikan pekerjaan jauh lebih mudah terutama untuk halaman yang besar dengan object-object yang banyak. (Harap diingat bahwa kita harus mempertahankan huruf besar dan huruf kecil artinya kita tidak bisa menulis myform untuk myForm). Property object-object JavaScript tidak cuma dibatasi pada operasi pembacaan saja. Kita dapat juga mengisi harga baru untuk property tertentu. Contohnya kita dapat menulis string baru ke text field sebagai berikut.
<form name="myForm"> <input type="text" name="input" value="bla bla bla"> <input type="button" value="Write" onClick="document.myForm.input.value= 'Ya ya ya!'; ">
Sebagai contoh terakhir, ketikkan baris kode di bawah ini dan jalankan lalu amati apa yang terjadi.
<html> <head> <title>Objects</title> <script language="JavaScript">  </script> </head> <body bgcolor=lightblue> <form name="myForm"> <input type="text" name="myText" value="bla bla bla"> <input type="button" name="button1" value="Button 1" onClick="first()"> <br> <input type="checkbox" name="myCheckbox" CHECKED> <input type="button" name="button2" value="Button 2" onClick="second()"> </form> <p><br><br> <script language="JavaScript">  </script> </body> </html>
2.2 Location-object
Selain window- dan document-object ada object penting lainnya yaitu: location-object. Object ini mewakili alamat dari dokumen HTML yang di-load. Jadi jika kita me-load halaman Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
13
http://www.xyz.com/page.html maka object location.href berisi sama dengan alamat ini.
Yang penting dengan object ini adalah kita dapat mengisi alamat baru untuknya. Sebagai contoh, tombol berikut ini jika di click akan me-load halaman baru kedalam window:
<form> <input type=button value="Wahid" onClick="location.href='http://www.wahid.com'; "> </form>
Javascript
14
Bagian 3. Frame
3.1 Membuat frame
Bagaimana frame dan JavaScript bekerjasama? Sebelumnya mari kita lihat apa itu frame dan apa yang bisa kita lakukan terhadapnya. Setelah itu baru kita lihat bagaimana menggunakan JavaScript dikombinasikan dengan frame. Window browser dapat dibagi menjadi beberapa frame. Artinya sebuah frame adalah daerah segiempat yang berada di dalam window browser. Setiap frame menampilkan isi dokumennya masing-masing (umumnya dokumen HTML). Sekarang kita coba untuk membuat dua frame. Frame pertama me-load suatu halaman dan frame kedua me-load halaman lain. Sebenarnya membuat frame merupakan permasalahan HTML tapi di sini kita coba jelaskan hal-hal dasar tentangnya. Untuk membuat frame kita perlu dua tag: <frameset> dan <frame>. Halaman HTML untuk membuat dua frame bisa seperti di bawah ini:
<html> <frameset rows="50%,50%"> <frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html>
Kode di atas akan menghasilkan dua frame. Perhatikan bahwa kita gunakan property rows pada tag <frameset>. Artinya kedua frame akan tersusun dalam susunan atas-bawah. Frame atas me-load halaman HTML page1.htm dan frame bawah menampilkan halaman page2.htm. Hasilnya akan terlihat seperti ini:
Javascript
15
Jika hendak menyusun frame pada susunan kolom kita dapat tuliskan cols sebagai pengganti
rows pada tag <frameset>. Bagian "50%,50%" menentukan seberapa besar ukuran kedua
frame. Kita dapat juga tuliskan "50%,*" jika tidak mau menghitung berapa besar frame kedua (dengan ukuran total keduanya 100%). Kita juga dapat tentukan ukuran dalam satuan pixel dengan menghilangkan tanda %. Setiap frame harus memiliki nama yang unik melalui property
name pada tag <frame>. Nama ini akan memudahkan kita mengakses setiap frame melalui
JavaScript. Kita dapat juga membuat tag <frameset> yang berlapis. Berikut ini contohnya:
<frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> <frameset rows="33%,33%,33%"> <frame src="cell.htm"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> </frameset>
Hasilnya akan seperti berikut:
Javascript
16
Kita dapat menentukan ukuran border melalui property border pada tag <frameset>. Jika
border=0 berarti kita tidak menggunakan border di antara frame (tidak berlaku pada Netscape
2.x).
3.2 Frame dan JavaScript

Sekarang kita akan melihat bagaimana JavaScript melihat' frame pada window browser. Untuk ini kita akan membuat dua frame seperti pada contoh pertama di atas. Kita juga telah mengetahui bahwa JavaScript menyusun semua elemen pada halaman web dalam susunan hirarki. Hal ini berlaku sama dengan frame. Gambar berikut ini memperlihatkan hirarki contoh pertama di atas:
Puncak hirarki adalah window browser. Window ini terbagi menjadi dua frame. Window browser disebut parent pada hirarki ini dan kedua frame disebut children. Kita berikan kedua Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript frame nama yang unik frame1 dan frame2. Dengan bantuan nama ini kita akan dapat saling mempertukarkan informasi diantaranya. Kita akan coba membuat script yang dapat menyelesaikan permasalahan berikut: user menclick link pada frame pertama tapi halaman yang muncul akan di-load di frame kedua dan bukan pada frame pertama. Contohnya nanti bisa digunakan untuk menubar (atau navigationbar) dimana satu frame selalu tampil sama dan menampilkan beberapa link untuk navigasi sepanjang homepage. Dalam mempertukarkan informasi antar frame kita lihat tiga kasus berikut ini: parent window/frame mengakes child frame child frame mengakes parent window/frame child frame mengakes child frame lain
17
Dari sudut pandang window kedua frame disebut frame1 dan frame2. Kita dapat melihat pada gambar di atas bahwa ada hubungan langsung dari parent window ke setiap frame. Jadi jika kita memiliki script pada parent window artinya pada halaman yang membuat frame dan kita ingin mengakses salah satu frame, kita dapat menggunakan nama frame yang dimaksud. Sebagai contoh:
frame2.document.write("Pesan ini dari parent window.");
Kadang kita perlu juga mengakses parent window dari suatu frame. Ini diperlukan misalnya untuk menghapus frame. Menghapus frame sebenarnya cuma me-load halaman baru sebagai pengganti halaman yang menghasilkan frame. Pada kasus ini halaman yang dimaksud adalah yang berada di parent window. Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript Kita dapat mengakses parent window (atau parent frame) dari child frame dengan parent.
18
Untuk me-load sebuah dokumen baru kita harus menentukan URL baru ke location.href pada parent window sehingga kita bisa me-load halaman baru pada parent window dengan perintah:
parent.location.href= "http://...";
Seringkali kita ingin mengakses suatu child frame dari child frame yang lain. Pada gambar di atas tidak terlihat adanya hubungan langsung antara kedua frames. Artinya kita tidak bisa langsung memanggil frame2 dari frame frame1 karena frame ini tidak mengetahui keberadaan frame kedua. Tetapi dari sudut pandang parent window, frame kedua disebut frame2 dan parent window disebut parent dilihat dari frame pertama. Jadi kita harus menulis kode berikut agar bisa mengakses document-object pada frame kedua dari frame pertama:
parent.frame2.document.write("Hi, ini panggilan dari frame1.");
3.3 Navigationbar
Berikut ini kita akan membuat navigationbar yang berupakan contoh menggunakan frame dan Javascript. Dalam membuat navigationbar, kita akan memiliki beberapa link pada satu frame.
Javascript Jika user men-click pada link-link ini halaman baru tidak akan muncul pada frame yang sama tetapi di-load pada frame kedua. Berikut ini contohnya:
19
Pertama-tama kita perlu script yang membuat frame. Dokumen ini mirip seperti contoh kita di atas: frames3.htm
<html> <frameset rows="80%,20%"> <frame src="start.htm" name="main"> <frame src="menu.htm" name="menu"> </frameset> </html>
Halaman start.htm merupakan halaman pembuka yang akan ditampikan pada frame utama yang bernama main. Tidak ada hal khusus pada halaman ini. Halaman berikutnya di-load kedalam frame yang bernama menu: menu.htm
<html> <head> <script language="JavaScript">  </script> </head> <body> <a href="javascript:load('first.htm')">first</a> <a href="second.htm" target="main">second</a> <a href="third.htm" target="_top">third</a> </body> </html>
Di sini kita dapat melihat ada beberapa cara untuk me-load halaman baru ke dalam frame
main. Link pertama menggunakan function load(). Perhatikan bagaimana function ini
dipanggil:
<a href="javascript:load('first.htm')">first</a>
Kita lihat bahwa kita bisa memerintahkan browser mengeksekusi kode JavaScript dan bukan me-load halaman lain kita hanya menggunakan javascript: pada property href dan kita menulis 'first.htm' di dalam tanda kurung. String ini di berikan ke function load() yang didefinisikan melalui:
function load(url) { parent.main.location.href = url; }
Kita menuliskan url di dalam tanda kurung, artinya string 'first1.htm' di simpan dalam variabel url. Di dalam function load() kita dapat menggunakan variabel ini, yang dijadikan alamat baru bagi parent.main.location.href. Link kedua menggunakan property target. Sebenarnya ini bukan JavaScript, melainkan feature HTML. Terlihat bahwa kita hanya perlu menentukan nama frame tujuan. Link ketiga memperlihatkan bagaimana menghapus frame dengan property target yang juga merupakan feature HTML. Jadi mana yang sebaiknya dipilih? Tergantung dari script dan apa yang hendak kita lakukan. Property target merupakan cara yang paling sederhana. Kita menggunakannya jika kita hanya ingin me-load halaman baru pada frame lain. Solusi JavaScript (yaitu link pertama) biasanya Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript digunakan jika kita ingin melakukan beberapa hal sekaligus sebagai reaksi pada saat link diclick. Misalnya me-load dua halaman sekaligus pada dua frame yang berbeda. Meskipun menggunakan property target dapat dilakukan, namun lebih baik menggunakan JavaScript. Misalnya kita memiliki tiga frame yang bernama frame1,frame2 dan frame3. User men-click pada suatu link pada frame1. Kemudian jika kita ingin me-load dua halaman yang berbeda dalam dua frame lainnya, kita bisa menggunakan function ini:
function loadtwo() { parent.frame1.location.href= "first.htm"; parent.frame2.location.href= "second.htm"; }
21
Jika diinginkan function lebih fleksibel kita bisa menggunakan passing variabel sehingga kodenya menjadi:
function loadtwo(url1, url2) { parent.frame1.location.href = url1; parent.frame2.location.href = url2; }
Function ini kemudian bisa dipanggil dengan loadtwo("first.htm", "second.htm") atau

loadtwo("third.htm", "forth.htm").
Javascript
22
Bagian 4. Window dan dokumen on-thefly

4.1 Membuat window
Kemampuan membuka window browser baru merupakan salah satu keunggulan JavaScript. Kita bisa me-load dokumen (misalnya dokumen HTML) ke window yang baru itu atau bahkan membuat dokumen baru (on-the-fly). Pertama mari kita lihat bagaimana cara membuka window baru, me-load halaman HTML kedalam window ini dan kemudian menutupnya. Script berikut ini membuka browser window baru dan me-load sebuah halaman page:
<html> <head> <script language="JavaScript">  </script> </head> <body> <form> <input type="button" value="Open new window" onClick="openWin()"> </form> </body> </html>
Halaman bla.htm di-load kedalam window yang baru melalui method open() jika tombol ditekan. Kita dengan gampang bisa mengatur tampilan window baru itu. Misalnya menentukan apakah window akan memiliki statusbar, toolbar atau menubar serta menentukan ukuran window. Script berikut ini membuka window baru yang berukuran 400x300, tidak memiliki statusbar, toolbar atau menubar.
<html> <head> <script language="JavaScript">
Javascript
23
 </script> </head> <body> <form> <input type="button" value="Open new window" onClick="openWin2()"> </form> </body> </html>
Hasilnya akan terlihat seperti ini:
Ini halaman percobaan
Terlihat bahwa kita menentukan property-nya dengan

"width=400,height=300,status=no,toolbar=no,menubar=no". Kita tidak boleh
menggunakan spasi dalam string ini! Berikut ini daftar property yang dimiliki sebuah window: Directories yes|no
Javascript Height Location Menubar Resizable Scrollbars Status Toolbar Width number of pixels yes|no yes|no yes|no yes|no yes|no yes|no number of pixels
24
Beberapa property baru telah ditambahkan pada JavaScript 1.2 (Netscape Navigator 4.0). Kita tidak bisa menggunakan property ini dalam Netscape 2.x atau 3.x serta Microsoft Internet Explorer 3.x karena browser-browser ini tidak mengerti JavaScript 1.2. Berikut ini property baru tersebut: alwaysLowered AlwaysRaised dependent hotkeys innerWidth innerHeight outerWidth outerHeight screenX screenY titlebar z-lock yes|no yes|no yes|no yes|no number of pixels (replaces width) number of pixels (replaces height) number of pixels number of pixels position in pixels position in pixels yes|no yes|no
Kita bisa memperoleh penjelasan tentang property ini dalam JavaScript 1.2 Guide. Dengan property ini kita bisa men-definisikan pada posisi mana window akan dibuka.
4.2 Nama window

Kita menggunakan tiga argumen untuk membuka sebuah window:
myWin = open("bla.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no");
Apa guna dari argumen kedua? Ini adalah nama window. Jika kita tahu nama dari window kita bisa me-load halaman baru kedalamnya dengan:
<a href="bla.html" target="displayWindow">
Di sini kita perlu nama window (jika windownya tidak ada, window baru akan dibuat secara otomatis). Perhatikan bahwa myWin bukan nama window walaupun kita bisa mengakses window Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript melalui variabel ini. Variabel ini merupakan variabel lokal yang hanya berlaku di dalam script tempat ia di-definisikan. Nama window yang global (displayWindow) merupakan nama yang unik yang dapat digunakan oleh seluruh window browser yang sedang terbuka.
25
4.3 Menutup window

Kita dapat menutup suatu window melalui JavaScript dengan method close(). Mari kita buka window baru seperti sebelumnya. Pada window ini kita me-load halaman berikut:
<html> <script language="JavaScript">  </script> <center> <form> <input type=button value="Close it" onClick="closeIt()"> </form> </center> </html>
Jika kita menekan tombol "Close it" pada window yang baru itu, window-nya akan tertutup. Method open() dan close() merupakan method dari window-object. Seharusnya kita menuliskannya sebagai window.open() dan window.close() dan bukan open() dan close() saja. Tetapi ini dibolehkan karena pada window-object kita tidak harus menulis window jika kita ingin memanggil method yang ada padanya (khusus untuk window-object).
4.4 Membuat dokumen on-the-fly

Kita akan segera melihat keunggulan lain dari JavaScript membuat dokumen on-the-fly yang artinya kita bisa memerintahkan JavaScript untuk membuat satu halaman HTML baru dan bukan me-load file dokumen yang telah tersimpan. Kita bisa membuat dokumen lain selain HTML seperti VRML dan sebagainya. Kita dapat mengeluarkan dokumen ini dalam window yang terpisah maupun dalam frame. Pertama-tama kita buat sebuah dokumen HTML sederhana yang akan ditampilkan pada sebuah window baru pada script seperti ini: Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
26
<html> <head> <script language="JavaScript">  </script> </head> <b> <form> <input type=button value="On-the-fly" onClick="openWin3()"> </form> </body> </html>
Jika tombol "On-the-fly" ditekan akan muncul window baru seperti berikut:
Javascript
27
Halaman ini dibuat dengan bantuan Javascript
Lihat pada function winOpen3(). Kita membuka sebuah window browser baru. Karena argumen pertama merupakan string kosong "" maka kita tidak menentukan URL untuk window yang baru sehingga browser tidak membuka dokumen yang ada. Nanti JavaScript akan membuatkan dokumen baru. Kita definisikan variabel myWin. Dengan bantuan variabel ini kita bisa mengakses window yang baru itu. Perhatikan bahwa kita tidak bisa menggunakan nama window (displayWindow) untuk hal ini. Setelah membuka window kita harus membuka dokumen. Ini dilakukan melalui:
// open document for further output myWin.document.open();
Kita memanggil method open() dari document-object berbeda dengan method open() dari window-object! Perintah ini tidak membuka window baru tetapi meyiapkan dokumen untuk output selanjutnya. Kita harus meletakkan myWin sebelum document.open() untuk mengakses window yang baru itu. Baris berikut ini menulisi dokumen dengan document.write(): Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
28
// create document myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=+3>"); myWin.document.write("Halaman ini dibuat dengan "); myWin.document.write("bantuan Javascript"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>");
Terlihat bahwa kita menulis tag HTML normal pada dokumen dan kita bisa menulis sembarang tag HTML di sini. Setelah selesai menulisi, kita harus menutup dokumen yang dilakukan oleh perintah berikut:
// close the document - (not the window!) myWin.document.close();
Kita bisa juga membuat dokumen on-the-fly dan menampilkannya pada frame. Jika kita misalnya memiliki dua frame dengan nama frame1 dan frame2 dan ingin membuat dokumen baru di frame2 kita bisa menulis baris berikut ini pada frame1:
parent.frame2.document.open(); parent.frame2.document.write("Here goes your HTML-code"); parent.frame2.document.close();
Javascript
29
Bagian 5. Statusbar dan timeout

5.1 Statusbar
Program JavaScript dapat menulisi statusbar satu baris yang terdapat pada bagian bawah window browser - dengan mengisikan string kepada window.status. Contoh berikut ini menunjukkan dua tombol yang bisa digunakan untuk menulis statusbar dan menghapusnya:
<html> <head> <script language="JavaScript">  </script> </head> <body> <form> <input type="button" name="look" value="Write!" onClick="statbar('Hi! This is the statusbar!');"> <input type="button" name="erase" value="Erase!" onClick="statbar('');"> </form> </body> </html>
Pada contoh di atas, kita membuat sebuah form dengan dua buah tombol. Kedua tombol itu memanggil function statbar(). Lihat bahwa pemanggilan function yang dilakukan oleh tombol Write! adalah seperti berikut:
statbar('Hi! This is the statusbar!');
Di dalam tanda kurung kita tentukan string 'Hi! This is the statusbar!'. String ini diberikan kepada function statbar(). Kita definisikan function statbar() seperti ini:
function statbar(txt) { window.status = txt; }
Javascript String txt ditampilkan pada Statusbar melalui window.status = txt. Menghapus text pada Statusbar dilakukan dengan memberikan string kosong pada window.status. Jika kita menggerakkan mouse pointer pada sebuah link, maka biasanya statusbar akan menampilkan URL link yang bersangkutan. Dengan bantuan JavaScript kita bisa menampilkan keterangan yang lebih informatif daripada URL yang berupa kalimat. Contoh link berikut ini memperlihatkan hal di atas gerakkan mousepointer pada link:
<a href="dontclck.htm" onMouseOver="window.status='Don\'t click me!'; return true;" onMouseOut="window.status='';">link</a>
30
Di sini kita menggunakan event onMouseOver dan onMouseOut untuk mendeteksi apakah mousepointer bergerak sepanjang link. Mengapa kita harus menulis return true di dalam properti onMouseOver? Ini ditulis agar browser tidak mengeksekusi kodenya sendiri sebagai reaksi dari event MouseOver. Biasanya browser akan menampilkan URL dari link pada statusbar jika ada event ini. Jika kita tidak mengunakan return true, browser akan menulis statusbar sesaat setelah kode kita dieksekusi artinya browser akan menimpa text yang kita inginkan dan user tidak akan pernah sempat membacanya. Secara umum kita bisa menekan aksi-aksi browser dengan menggunakan return true dengan cara yang sama. Event onMouseOut tidak terdapat pada JavaScript 1.0, jadi jika kita menggunakan Netscape Navigator 2.x mungkin akan mendapatkan hasil yang berbeda untuk berbagai platforms. Pada platform Unix misalnya, text akan menghilang walaupun browser tidak mengenal onMouseOut. Pada Windows text tidak menghilang. Jika diinginkan script kompatibel dengan Netscape 2.x pada Windows kita mungkin menulis function yang menulis text ke statusbar dan menghapus text ini setelah sekian waktu tertentu. Ini diprogram melalui timeout. Kita akan mempelajari tentang timeouts pada bagian selanjutnya. Pada contoh script di atas, ada hal yang perlu kita perhatikan yaitu kita mengeluarkan tanda petik. Kita ingin mengeluarkan string Don't click me - karena kita meletakkan string ini di dalam onMouseOver event-handler kita harus menggunakan single quote. Tapi kata Don't juga menggunakan single quote! Browser akan bingung jika kita hanya menulis 'Don't ...'. Untuk mengatasi hal ini kita harus menggunakan backslash \ sebelum quote, yang akan memerintahkan browser bahwa tanda setelahnya merupakan bagian dari string yang akan dikeluarkan. Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
31
5.2 Timeout
Dengan timeout (atau timer) kita bisa memerintahkan komputer menjalankan kode setelah sekian waktu tertentu. Sebagain contoh, pada kode berikut ini jika tombol ditekan maka setelah 3 detik akan muncul window pop-up:
<script language="JavaScript">  </script> ... <form> <input type="button" value="Timer" onClick="timer()"> </form>
method setTimeout() adalah method dari window-object yang mengeset waktu timeout. Argumen pertama adalah kode JavaScript yang akan dijalankan setelah suatu waktu tertentu. Pada contoh di atas argumennya adalah "alert('Time is up!')". Perhatikan bahwa kode JavaScript berada di dalam tanda petik dua (double quote). Argumen kedua menentukan berapa lama komputer harus mengunggu sebelum kode dijalankan. Besarnya adalah dalam satu per seribu detik (3000 millisecond = 3 detik).
5.3 Scroller
Dengan mengetahui bagaimana menulis ke statusbar dan bagaimana timeout bekerja sekarang kita coba membuat scrollers. Scroller merupakan text yang bergerak pada statusbar. Kita akan coba membuat program scroller dasar. Kita bisa mengembangkannya lebih lanjut jika diperlukan. Scrollers sebenarnya tidak terlalu sulit diimplementasikan, karena sebenarnya hanya menulisi text pada statusbar. Setelah sekian waktu yang tertentu kita tulisi lagi text yang sama tapi pada posisi yang sedikit lebih ke kiri. Lalu kita ulangi proses ini terus menerus sehingga kita mendapatkan efek seakan-akan text bergerak dari kanan ke kiri. Yang harus dipikirkan adalah menentukan bagian mana dari text yang harus ditampilkan karena keseluruhan text biasanya lebih panjang daripada statusbar. Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
32
Ketikkan contoh berikut ini

<html> <head> <script language="JavaScript">  </script> </head> <body onLoad="scroll()"> Your HTML-page goes here. </body> </html>
Javascript
33
Bagian utama dari function scroll() diperlukan untuk menghitung bagian mana dari text yang akan ditampilkan. Untuk memulai scroller kita gunakan event-handler onLoad dari tag <body>. Ini berarti function scroll() akan dipanggil setelah halaman HTML di-load. Kita panggil function scroll() dengan property onLoad. Langkah pertama scroller dihitung dan ditampikan. Pada akhir function scroll() kita tentukan timeout. Ini menyebabkan function scroll() dijalankan lagi setelah 100 millisecond. Text dipindahkan satu langkah kedepan dan timeout yang lain di-set lagi. Hal ini terjadi selamanya. (Ada beberapa masalah menjalankan scroller ini dengan Netscape Navigator 2.x. Kadang-kadang keluar error 'Out of memory'. Ini terjadi karena strings tidak bisa sebenarnya diubah dalam JavaScript. Jika kita coba melakukan hal ini JavaScript akan membuat object baru tanpa menghapus yang lama. Ini akan menyebabkan memory overflow.)
Javascript
34
Bagian 6. Predefined object

6.1 Date-object
JavaScript telah menyediakan predefined objects yaitu object-object yang telah terdefinisi dan siap dipakai seperti Date-object, Array-object atau Math-object. Selengkapnya lihat pada referensi JavaScript. Pertama-tama mari kita lihat Date-object. Object ini menyediakan fasilitas penentuan tanggal dan waktu. Misalnya dengan gampang kita bisa menghitung berapa hari lagi hari lebaran sejak hari ini, atau kita juga bisa menampilkan jam pada halaman HTML. Mari kita mulai dengan menampilkan waktu. Kita harus membuat Date-object yang baru dengan menggunakan operator new. Lihat pada baris kode berikut:
today= new Date()
Kode ini akan membuat sebuah Date-object baru bernama today. Jika kita tidak menentukan hari dan waktu tertentu sebagai argumennya berarti tanggal dan waktu sekarang yang akan digunakan. Artinya setelah mengeksekusi today= new Date(), today akan mewakili tanggal dan waktu sekarang. Date-object menyediakan method yang bisa kita gunakan melalui object today. Methodmothod ini contohnya adalah getHours(), setHours(), getMinutes(), setMinutes(),
getMonth(), setMonth() dan seterusnya (lihat pada dokumentasi Netscapes JavaScript).
Perhatikan bahwa Date-object hanya mewakili tanggal dan waktu tertentu dan bukan seperti jam yang berubah setiap detik secara otomatis. Untuk memperoleh tanggal dan waktu yang lain selain tanggal sekarang, kita bisa menggunakan kode berikut ini:
today= new Date(1997, 0, 1, 17, 35, 23)
Ini akan membuat Date-object baru yang berisi tanggal 1 January 1997 pada jam 17:35 dan 23 detik. Jadi kita bisa menentukan tanggal dan hari dengan format berikut: Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
35
Date(year, month, day, hours, minutes, seconds)
Perhatikan bahwa kita menggunakan angka 0 untuk January. Angka 1 untuk February dan seterusnya. Sekarang kita akan membuat script yang mengeluarkan tanggal dan waktu sekarang dengan hasil seperti ini:
Time: 10:8 Date: 1/24/1998
Baris kodenya adalah sebagai berikut:

<script language="JavaScript">  </script>
Di sini kita gunakan method-method seperti getHours() untuk menampilkan waktu dan tanggal yang terdapat pada Date-object now. Perhatikan bahwa kita menambahkan 1900 pada tahun, karena method getYear() mengeluarkan angka tahun sejak 1900. Artinya untuk tahun 1997 hasilnya akan berupa angka 97 dan jika tahun 2010 hasilnya akan 110 bukan 10! Jika kita menambahkan 1900 kita tidak akan mendapatkan permasalahan utnuk tahun 2000-an. Perhatikan juga bahwa kita harus menambahkan satu pada angka yang diperoleh dari
getMonth() karena alasan yang sama seperti sebelumnya. Script ini tidak mengecek apakah
angka menit kurang dari 10 artinya kita mungkin akan meperoleh waktu dengan tampilan seperti ini: 14:3 yang sebenarnya adalah 14:03. Kita selesaikan masalah ini pada script berikutnya. Sekarang kita akan membuat script yang menampilkan sebuah jam yang benar-benar bekerja:
Javascript
36
Kodenya adalah sebagai berikut:

<html> <head> <script Language="JavaScript">  </script> </head> <body onLoad="clock()"> <form name="clock"> Time: <input type="text" name="time" size="8" value=""><br> Date: <input type="text" name="date" size="8" value=""> </form> </body> </html>
Di sini kita menggunakan method setTimeout() untuk men-set waktu dan tanggal setiap detiknya, jadi kita harus membuat Date-object baru setiap detik. Perhatikan bahwa kita memanggil function clock() pada event-handler onLoad di tag <body> . Pada bagian body Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript halaman HTML kita memiliki dua text-element. Function clock() menulis waktu dan tanggal pada kedua text-element ini dengan format yang benar. Kita menggunkan dua string timeStr
37
dan dateStr untuk keperluan ini. Permasalahan menit yang kurang dari 10 kita selesaikan pada script di atas melalui baris kode berikut:
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
Di sini angka menit ditambahkan dengan string timeStr. Jika menit kurang dari 10 kita harus menambah angka 0. Kode di atas sebenarnya sama maksudnya dengan :
if (minutes < 10) timeStr+= ":0" + minutes else timeStr+= ":" + minutes;
6.2 Array-object
Array merupakan suatu hal yang sangat penting diketahui. Misalkan kita ingin menyimpan 100 nama yang berbeda. Bagaimana melakukannya dengan JavaScript? Kita bisa saja mendefinisikan 100 variabel dan mengisinya dengan sederetan nama-nama. Cara ini cukup rumit dan tidak efisien. Array bisa dilihat sebagai banyak variabel yang disatukan. Kita bisa mengaksesnya melalui satu nama dan penomoran. Misalnya array kita berinama names. Maka kita dapat mengakses nama pertama melalui names[0], nama kedua dengan names[1] dan seterusnya. Setelah JavaScript 1.1 (Netscape Navigator 3.0) kita bisa menggunakan Array-object. Kita membuat array baru dengan perintah myArray = new Array(). Kita kemudian bisa mengisi harganya dengan:
myArray[0]= 17; myArray[1]= "Stefan"; myArray[2]= "Koch";
Array JavaScript sangat flexible. Kita tidak harus menentukan ukuran array karena ukurannya akan ditentukan secara dinamis. Jika kita tulis myArray[99]= "xyz" ukuran array akan menjadi 100 elemen (array JavaScript hanya bisa bertambah bukan berkurang, jadi buat array sekecil mungkin.). Tidak jadi masalah apakah kita menyimpan angka, string atau object lain dalam array. Mari kita beranjak melihat contoh dibawah ini. Keluaran dari yang diinginkan adalah seperti:
first element
Javascript
38
second element third element
Baris kodenya adalah:

<script language="JavaScript">  </script>
Pada kode di atas, pertama kali kita buat array dengan nama myArray. Lalu kita isi dengan tiga harga yang berbeda. Setelah itu kita mulai sebuah loop. Loop ini menjalankan perintah
document.write(myArray[i]+"<br>"); sebanyak tiga kali. Variabel i menghitung dari 0
sampai 2 dengan for-loop. Kita lihat kita menggunakan myArray[i] di dalam for-loop. Karena i menghitung dari 0 sampai 2 kita memperoleh tiga kali pemanggilan
document.write(). Kita bisa menulis loop di atas seperti ini:
document.write(myArray[0] + "<br>"); document.write(myArray[1] + "<br>"); document.write(myArray[2] + "<br>");
6.3 Array dalam JavaScript 1.0

Array-object tidak terdapat di JavaScript 1.0 (Netscape Navigator 2.x dan Microsoft Internet Explorer 3.x), sehingga kita harus membuatnya secara manual seperti pada kode berikut ini yang terdapat pada Netscape documentation:
function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] }
bisa kita gunakan untuk membentuk array dengan perintah: Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
39
myArray= new initArray(17, 3, 5);
Tentunya array ini tidak akan memiliki method yang ada pada Array-object JavaScript 1.1.
6.4 Math-object
Untuk kalkulasi matematis kita bisa menggunakan method-method pada Math-object. Contohnya adalah method sinus sin(). Untuk lengkapnya lihat pada Netscape documentation. Berikut ini contoh menggunakan method random() yang berfungsi untuk mengeluarkan angka acak. Jika kita menuliskan Math.random() kita akan memperoleh angka acak berkisar antara 0 dan 1. Jika kita menuliskan document.write(Math.random()) maka kita akan memperoleh angka acak yang muncul pada dokumen HTML yang nilainya berganti-ganti setiap kali dokumen di-load atau di-reload.
Javascript
40
Bagian 7. Form
7.1 Validasi input form
Form banyak sekali digunakan di Internet maupun intranet. Masukan form biasanya dikirimkan lagi ke server atau via mail ke e-mail account tertentu. Bagaimana kita bisa memastikan bahwa data yang dimasukkan user valid atau tidak? Dengan bantuan JavaScript form input dapat dengan mudah di-cek sebelum dikirimkan lewat Internet. Pertama mari kita lihat contoh bagaimana input dari user di-validasi, lalu kita lihat bagaimana mengirimkan informasi melalui Internet. Mari kita buat script sederhana yang berupa halaman HTML yang berisi dua text-element. User harus memasukkan namanya pada text-element pertama dan e-mail address-nya pada elemen kedua. Sebagai contoh masukkan sembarang text pada input yang disediakan. Jika input tidak valid maka akan muncul window peringatan yang mengatakan bahwa input tidak valid. Berikut ini kira-kira tampilan contoh yang akan kita buat.
Jika kita masukkan suatu text (misalnya Daniel) pada input-elemen pertama lalu menekan tombol "Test Input", akan muncul window popup yang memberitahu kita apakah input valid atau tidak.
Javascript Jika kita tidak memasukkan apapun pada text-element lalu menekan tombol "Test Input", maka akan muncul window peringatan yang menyatakan bahwa kita harus memasukkan sesuatu:
41
Pada text-element kedua, jika kita masukkan text yang tidak sesuai dengan format e-mail (ada tanda @) maka text dianggap tidak valid:
Jika kita memasukkan input yang benar maka pesan valid akan muncul
Bagaimana cara membuat halaman HTML yang demikian itu? Berikut ini adalah baris kodenya:
<html> <head> <script language="JavaScript">  </script> </head> <body> <form name="first"> Enter your name:<br> <input type="text" name="text1"> <input type="button" name="button1" value="Test Input" onClick="test1(this.form)"> <P> Enter your e-mail address:<br> <input type="text" name="text2"> <input type="button" name="button2" value="Test Input" onClick="test2(this.form)"> </body> </html>
Pertama perhatikan kode HTML pada bagian <body>. Kita membuat dua text-element dan dua tombol. Tombol akan memanggil function test1(...) atau test2(...) tergantung dari tombol mana yang ditekan. Kita melakukan passing this.form ke function untuk bisa menentukan elemen yang benar pada function-nya nanti. Function test1(form) melakukan tes apakah string kosong atau tidak. Ini dilakukan melalui
if (form.text1.value == "")... . Variabel 'form' adalah variabel yang menerima harga 'this.form' pada pemanggilan function. Kita memperoleh harga dari elemen input dengan
menggunakan 'value' dikombinasikan dengan form.text1. Untuk mengetahui apakah string kosong kita bandingkan dengan "". Jika input string sama dengan "" berarti user belum memasukkan sesuatu. User akan mendapatkan pesan error. Jika dimasukkan sesuatu, user akan mendapat pesan Ok. Permasalahannya adalah user mungkin saja memasukkan spasi kosong yang juga akan dianggap input yang valid! Script ini belum mengakomodasi hal tersebut, jadi masih harus dimodifikasi lagi. Sekarang lihat function test2(form). Function ini lagi-lagi membandingkan input string dengan string kosong "" untuk memastikan bahwa sesuatu telah diketikkan oleh user. Tetapi kita telah menambahkan baris tambahan pada perintah if. Tanda || disebut OR-operator. Kita telah mempelajarinya pada bagian 6. Perintah if ini megecek apakah salah satu di antara dua perbandingan bernilai benar (true). Jika minimal salah satu di antaranya true maka perintah if bernilai true dan perintah berikutnya akan dijalankan. Artinya kita akan Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript mendapatkan pesan error jika string yang kita masukkan kosong atau tidak ada tanda @ di dalam string yang berada pada operasi kedua di dalam perintah if.
43
7.2 Mengecek karakter khusus

Kadang kita ingin membatasi input form dengan karakter atau angka khusus. Misalnya saja nomor telephone - input harus hanya terdiri dari angka (dengan asumsi nomor telephone tidak mengandung karakter). Kita dapat mengecek apakah yang dimasukkan user itu berupa angkat atau bukan. Kebanyakan orang menggunakan simbol yang berbeda-beda untuk nomor telephone-nya seperti: 01234-56789, 01234/56789 atau 01234 56789 (dengan spasi di antaranya). User hendaknya tidak dilarang untuk memasukkan simbol yang dia ingini. Jadi kita harus mengubah script kita agar mampu mengecek angka dan beberapa simbol. Perhatikan contoh berikut ini:
Jika kita masukkan angka-angka dan simbol-simbol "/", "-", dan " ", maka ketika kita tekan tombol check, akan keluar pesan OK.
Namun jika kita masukkan sembarang karakter di samping karakter-karakter di atas, maka akan keluar pesan error:
Javascript Berikut ini baris kode untuk mengimplementasikan contoh di atas.

<html> <head> <script language="JavaScript">  </script> </head> <body> <form> Telephone: <input type="text" name="telephone" value=""> <input type="button" value="Check" onClick="test(this.form.telephone.value)"> </form> </body> </html>
44
Dengan gampang kita lihat bahwa function test() menentukan karakter-karakter yang dianggap valid.
Javascript
45
7.3 Mengirimkan masukan form

Ada beberapa cara yang dapat dilakukan untuk mengirimkan input form. Cara yang paling sederhana adalah menggunakan e-mail. Cara ini yang akan kita pakai sebagai contoh. Jika input form ingin ditangani oleh server kita perlu menambahkan CGI (Common Gateway Interface) yang memungkinkan kita memproses form input secara otomatis. Server bisa berupa database yang menyimpan input dari pelanggan. Cara lain lagi menggunakan index-pages seperti Yahoo yang biasanya memiliki form search yang akan mencari data pada database. User akan mendapat respon yang cepat setelah menekan tombol submit karena prosesnya dilakukan server secara otomatis. JavaScript tidak bisa melakukan hal seperti ini. Kita juga tidak bisa membuat sistem guestbook dengan JavaScript karena JavaScript tidak bisa menulis file pada server. Tapi jika proses pengiriman data guestbook cukup menggunakan email Javascript masih mampu menanganinya, tetapi kita harus melakukan feedback secara manual. Hal ini masih bisa ditolerir jika data yang diterima setiap hari masih sedikit. Contoh berikut ini sebenarnya merupakan HTML biasa, jadi JavaScript tidak diperlukan di sini! Hanya saja, jika kita hendak melakukan validasi input sebelum dikirim tentunya kita perlu JavaScript. Berikut ini contoh cara mengirimkan data form ke server melalui e-mail:
<form method=post action="mailto:your.address@goes.here" enctype="text/plain"> Do you like this page? <input name="choice" type="radio" value="1">Not at all.<br> <input name="choice" type="radio" value="2" CHECKED>Waste of time.<br> <input name="choice" type="radio" value="3">Worst site of the Net.<br> <input name="submit" type="submit" value="Send"> </form>
Property enctype="text/plain" digunakan untuk mengirim plain text tanda bagian yang terencode, yang akan memudahkan pembacaan mail nantinya. Jika kita hendak melakukan validasi sebelum dikirimkan, kita bisa menggunakan event-handler
onSubmit. Kita harus meletakkan event-handler ini dalam tag <form> seperti ini:
function validate() { // check if input ok // ...
Javascript
46
if (inputOK) return true else return false; } ... <form ... onSubmit="return validate()"> ...
Dengan kode itu, form tidak akan terkirim lewat Internet jika form input masih salah.
7.4 Membuat focus form-elemen tertentu

Dengan bantuan method focus() kita bisa membuat form sedikit lebih user-friendly. Kita bisa membuat elemen mana yang difokuskan pada saat pertama atau yang input-nya salah. Fokus itu artinya mengeset kursor pada form-elemen tertentu sehingga user tidak harus lagi menclick elemen yang bersangkutan sebelum memasukkan sesuatu. Kita bisa melakukan hal ini dengan script yang sederhana berikut ini:
function setfocus() { document.first.text1.focus(); }
Script di atas akan mengeset focus ke text-elemen pertama pada script sebelumnya. Kita harus menentukan dengan lengkap nama form - dalam hal ini first - dan nama form element text1. Jika hendak membuat focus pada element ini saat halaman di-load kita bisa
menambahkan pada property onLoad di tag <body> seperti ini:

<body onLoad="setfocus()">
Lebih lanjut kita dapat melakukan hal sebagai berikut:

function setfocus() { document.first.text1.focus(); document.first.text1.select(); }
yang akan mengeset focus dan juga men-select input.
Javascript
47
Bagian 8. Image-object
8.1 Image pada halaman web
Sekarang kita akan melihat Image-object yang tersedia dalam JavaScript 1.1 (Netscape Navigator 3.0 ke atas). Dengan banutan Image-object kita bisa mengganti gambar pada image pada suatu halaman web, sehingga memungkinkan kita mambuat animasi, misalnya. Pertama mari kita lihat bagaimana image dalam halaman web dapat diakses melalui JavaScript. Semua image diwakili melalui array. Array ini disebut images yang merupakan property dari document-object. Setiap image dalam halaman web memiliki nomor. Image pertama bernomor 0, image kedua bernomor 1 dan seterusnya. Jadi kita bisa mengakses image pertama melalui document.images[0]. Setiap image dalam dokumen HTML dianggap sebagai sebuah Image-object. Image-object tentunya memiliki property yang dapat diakses melalui JavaScript. Kita misalnya bisa berapa ukuran yang dimiliki image dengan property width dan height. Jadi
document.images[0].width akan memberi kita lebar (dalam pixel) image pertama dalam
halaman web yang kita miliki. Jika kita memiliki banyak image dalam satu halaman akan sulit untuk menomori seluruh image yang ada. Dengan memberikan nama untuk setiap image akan jauh mempermudah hal ini. Jika kita menyatakan image dengan tag berikut
<img src="img.gif" name="myImage" width=100 height=100>
kita akan bisa mengaksesnya melalui document.myImage atau document.images["myImage"].
8.2 Me-loading image

Berikut ini kita akan mencoba mengganti isi (file gambar) sebuah image pada web-page. Untuk ini kita akan menggunakan property src. Property src mewakili alamat dari file gambar yang ditampilkan. Dengan JavaScript 1.1 kita bisa mengisi alamat file gambar yang baru ke image yang telah di-load pada web-page. Hasilnya adalah gambar pada lokasi yang baru akan di-load. Gambar baru ini akan menggantikan gambar lama. Mari kita lihat contoh berikut ini: Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
48
<img src="img1.gif" name="myImage" width=100 height=100>
Image dengan file gambar img1.gif akan di-load dan bernama myImage. Baris kode berikut akan menggantikan gambar lama img1.gif dengan gambar baru img2.gif:
document.myImage.src= "img2.src";
Gambar yang baru akan berukutan sama dengan gambar lama. Kita tidak bisa merubah ukuran tempat gambar ditampilkan.
8.3 Preload image

Salah satu kelemahan dari penggantian gambar seperti di atas adalah bahwa gambar akan diload setelah kita mengisikan alamat baru pada property src. Karena gambar itu tidak di-load terlebih dahulu, maka akan membutuhkan waktu yang lumayan lama untuk menampilkan gambar yang baru karena harus diambil dahulu melalui Internet. Apa yang dapat kita perbuat untuk memperbaiki hal ini? Solusinya adalah preloading image yaitu me-load gambar telebih dahulu sebelum ditampilkan. Untuk ini kita harus membuat Image-object tambahan. Lihat baris kode berikut ini:
hiddenImg= new Image(); hiddenImg.src= "img3.gif";
Baris pertama membuat sebuah Image-Object dengan nama hiddenImg. Baris kedua mendefinisikan alamat gambar yang akan diwakili melalui object hiddenImg. Kita telah mencoba bahwa mengisi alamat baru pada attribute src akan membuat browser me-load file gambar dari alamat yang ditetapkan pada atribut src-nya. Jadi file gambar img2.gif akan diload ketika baris kedua dieksekusi. Gambar akan tetap disimpan di memory (lebih tepatnya di cache) untuk digunakan kemudian. Untuk menampilkan gambar yang baru ini kita gunakan baris berikut:
document.myImage.src= hiddenImg.src;
Sekarang gambar diambil dari cache dan akan ditampilkan dengan jauh lebih cepat. Inilah yang disebut preloading image. Tentu saja browser harus terlebih dahulu menyelesaikan pengambilan gambar yang dimaksud. Jadi jika kita melakukan preloading banyak gambar, mungkin masih akan terdapat delay karena browser akan berusaha men-download seluruh gambar yang digunakan. Kita harus tetap memperhatikan kecepatan Internet. Herman Tolle, ST., MT. Teknik Elektro Universitas Brawijaya Malang http://elektro.brawijaya.ac.id/kuliah/tke356.html
Javascript
49
8.4 Mengganti image berdasarkan event

Dengan JavaScript kita bisa membuat efek yang bagus dengan mengganti gambar sebagai reaksi dari event tertentu. Misalnya kita bisa mengganti gambar saat mousecursor digerakkan di atas suatu area. Coba ketikkan baris kode berikut ini:
<a href="#" onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>
Kode sederhana di atas sudah menampakkan hasil yang kita inginkan, yaitu gambar akan berganti menjadi gambar lain jika kita gerakkan mouse di atas gambar (akibat baris
onMouseOver="document.myImage2.src='img2.gif'"). Kemudian jika kita keluarkan mouse
dari gambar tersebut, gambar akan berganti menjadi gambar awal (onMouseOut="document.myImage2.src='img1.gif'"). Namun kode di atas masih memiliki kekurangan seperti: Browser yang digunakan tidak mengenal JavaScript 1.1. Gambar kedua tidak di-preload. Untuk setiap image kita harus menuliskan kode yang sama Kita ingin memiliki script yang dapat digunakan untuk banyak halaman web berulang-ulang tanpa perlu banyak perubahan. Kita sekarang lihat script yang lengkap yang mengatasi permasalahan di atas. Script menjadi lebih panjang tapi kita cukup menuliskannya sekali saja. Ada dua hal yang diperlukan untuk membuat script ini fleksibel: Jumlah image yang tak terbatas - tidak jadi masalah apakah itu 10 atau 100 images Urutan image yang tak terbatas - memungkinkan mengubah urutan images tanpa merubah kode Berikut ini baris kode selengkapnya
<html> <head> <script language="JavaScript">  </script> <script language="JavaScript1.1">  </script> <script language="JavaScript">  </script> <head>
<body> <a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()"> <img name="link1" src="link1f.gif" width="140" height="50" border="0"></a> <a href="link2.htm" onMouseOver="on('link2')" onMouseOut="off()"> <img name="link2" src="link2f.gif" width="140" height="50" border="0"></a> <a href="link3.htm" onMouseOver="on('link3')" onMouseOut="off()"> <img name="link3" src="link3f.gif" width="140" height="50" border="0"></a> </body> </html>
Script di atas meletakkan seluruh file gambar dalam array pics. Function preload() yang dipanggil di awal akan membuat array ini. Kita memanggil function preload() seperti berikut:
preload("link1", "img1f.gif", "img1t.gif");
Artinya script akan me-load kedua file gambar img1f.gif dan img1t.gif. File gambar pertama adalah yang akan ditampilkan saat mouse cursor tidak berada di daerah image. Saat user menggerakkan mouse cursor melewati daerah image, file gambar kedua akan ditampilkan. Dengan argumen pertama "link1" pada pemanggilan function preload() kita tentukan kedua preloaded image itu milik Image-object yang mana. Jika kita lihat pada bagian <body> pada contoh, kita lihat ada image dengan nama img1. Kita gunakan nama dari image (bukan nomornya) untuk bisa mengubah urutan gambar tanpa merubah script-nya.
Javascript Function on() dan off() dipanggil melalui event-handler onMouseOver dan onMouseOut. Karena image tidak bisa bereaksi oleh event onMouseOver dan MouseOut kita harus membuat
52
link pada image. Kita lihat function on() men-set image lainnya. Ini diperlukan karena bisa saja terjadi bahwa beberapa images terlewati sekaligus (event MouseOut tidak terjadi ketika user menggerakkan cursor dari sebuah image langsung keluar window).

06 Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

06 Javascript

Uploaded by

Copyright:

Available Formats

Dasar-dasar Pemrograman Javascript

Bagian 1. Pengenalan JavaScript

1.2 JavaScript tidak sama dengan Java!

1.3 Menjalankan JavaScript

1.4 Mencantumkan JavaScript pada halaman HTML

<script language="JavaScript"> document.write("Yang ini akibat JavaScript!") </script>

1.5 Non-JavaScript browser

Javascript Tampilan pada non-JavaScript browser akan terlihat seperti ini:

Tanpa HTML-comment tampilan pada non-JavaScript browser akan seperti:

<form> <input type="button" value="Click me" onClick="alert('Ya')"> </form>

Hasil keluarannya akan seperti:

Ini menggunakan JavaScript!

Bagian 2. Dokumen HTML

kita dapat juga menuliskan

http://www.xyz.com/page.html maka object location.href berisi sama dengan alamat ini.

Hasilnya akan seperti berikut:

3.2 Frame dan JavaScript

Function ini kemudian bisa dipanggil dengan loadtwo("first.htm", "second.htm") atau

Bagian 4. Window dan dokumen on-thefly

Hasilnya akan terlihat seperti ini:

Ini halaman percobaan

Terlihat bahwa kita menentukan property-nya dengan

4.2 Nama window

4.3 Menutup window

4.4 Membuat dokumen on-the-fly

Halaman ini dibuat dengan bantuan Javascript

Bagian 5. Statusbar dan timeout

Ketikkan contoh berikut ini

Bagian 6. Predefined object

Date(year, month, day, hours, minutes, seconds)

Baris kodenya adalah sebagai berikut:

Kodenya adalah sebagai berikut:

second element third element

Baris kodenya adalah:

document.write(myArray[0] + "<br>"); document.write(myArray[1] + "<br>"); document.write(myArray[2] + "<br>");

6.3 Array dalam JavaScript 1.0

myArray= new initArray(17, 3, 5);

7.2 Mengecek karakter khusus

Javascript Berikut ini baris kode untuk mengimplementasikan contoh di atas.

7.3 Mengirimkan masukan form

function validate() { // check if input ok // ...

7.4 Membuat focus form-elemen tertentu

menambahkan pada property onLoad di tag <body> seperti ini:

Lebih lanjut kita dapat melakukan hal sebagai berikut:

yang akan mengeset focus dan juga men-select input.

kita akan bisa mengaksesnya melalui document.myImage atau document.images["myImage"].

8.2 Me-loading image

<img src="img1.gif" name="myImage" width=100 height=100>

8.3 Preload image

8.4 Mengganti image berdasarkan event

You might also like