Javascript for beginner

of 55 /55
105 JAVASCRIPT 6.1 Pengenalan JavaScript Apa itu JavaScript? JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. JavaScript digolongkan sebagai bahasa scripting sisi klien (client side scripting) artinya bahwa script JavaScript tersebut akan dieksekusi atau dijalankan pada komputer kita sendiri saat kita membuka suatu halaman web yang berisi script JavaScript. Dengan JavaScript kita dapat dengan mudah membuat halaman web yang interaktif. 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. 6

Embed Size (px)

description

Modul penggunaan JavaScript - for beginner

Transcript of Javascript for beginner

  • 105

    JAVASCRIPT

    6.1 Pengenalan JavaScript

    Apa itu JavaScript?

    JavaScript merupakan sebuah bahasa scripting yang dikembangkan

    oleh Netscape. JavaScript digolongkan sebagai bahasa scripting sisi

    klien (client side scripting) artinya bahwa script JavaScript tersebut

    akan dieksekusi atau dijalankan pada komputer kita sendiri saat kita

    membuka suatu halaman web yang berisi script JavaScript. Dengan

    JavaScript kita dapat dengan mudah membuat halaman web yang

    interaktif.

    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.

    6

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    106

    Mencantumkan JavaScript pada halaman HTML

    Kode JavaScript dituliskan langsung pada halaman HTML. Mari kita

    lihat contoh sederhana berikut ini untuk mengerti bagaimana

    JavaScript bekerja:

    Ini halaman HTML normal.

    document.write("Yang ini akibat JavaScript!")

    Ini HTML lagi.

    Contoh sederhana di atas kelihatan seperti halaman HTML normal.

    Satu-satunya hal yang baru adalah bagian:

    document.write("Yang ini akibat JavaScript!")

    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):

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    107

    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 .

    Segala sesuatu yang berada di antara tag dan 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.

    Non-JavaScript browser

    Apa yang akan terjadi jika kita menggunakan browser yang tidak

    mengerti JavaScript? Non-JavaScript browser tidak mengenal tag

    . 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:

    Ini dokumen HTML normal

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    108

    Ini HTML lagi.

    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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    109

    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:

    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 . Inilah yang mendefinisikan apa yang akan terjadi jika tombol ditekan. Jadi

    jika terjadi event Click, komputer akan mengeksekusi alert('Ya'), yang merupakan kode JavaScript (perhatikan bahwa kita tidak

    menggunakan tag pada kasus ini).

    Fungsi alert() berfungsi untuk menampilkan window popup. Di dalam tanda kurung kita tentukan string yang akan muncul pada

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    110

    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

    dapat dilihat pada referensi JavaScript.

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    111

    document.write("Selamat datang pada homepage saya!"); document.write("Ini menggunakan JavaScript!");

    // -->

    Hasil keluarannya akan seperti:

    Selamat datang pada homepage saya!

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    112

    Pada script di atas kita definisikan sebuah function yang dilakukan

    melalui baris-baris:

    function myFunction() { document.write("Selamat datang pada homepage saya!"); document.write("Ini menggunakan JavaScript!"); }

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    113

    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.

    6.2 DOKUMEN HTML

    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 properti (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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    114

    tersebut. Untuk ini kita harus mengerti hirarki dari semua object-

    object HTML.

    Sebagai contoh kode berikut ini merupakan halaman HTML

    sederhana berikut ini.

    Name:

    e-Mail:

    My homepage

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    115

    dengan tampilan sebagai berikut:

    Gambar 6.1. Elemen-elemen dari sebuah Halaman Web

    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. Properti dari

    document-object contohnya adalah warna background halaman.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    116

    Berikut ini ilustrasi hirarki yang dibuat oleh contoh halaman HTML

    di atas:

    Gambar 6.2. Hirarki Dokumen HTML

    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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    117

    Untuk mengetahui secara lengkap properti dan method apa yang

    dimiliki oleh object kita dapat melihat referensi JavaScript. Di situ

    kita akan melihat bahwa text field memiliki properti 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 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:

    Name:

    ...

    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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    118

    kecil artinya kita tidak bisa menulis myform untuk myForm). Properti

    object-object JavaScript tidak cuma dibatasi pada operasi pembacaan

    saja. Kita dapat juga mengisi harga baru untuk properti tertentu.

    Contohnya kita dapat menulis string baru ke text field sebagai berikut.

    Sebagai contoh terakhir, ketikkan baris kode di bawah ini dan

    jalankan lalu amati apa yang terjadi.

    Objects

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    119

    function second() {

    // this function checks the state of the checkbox

    var myString= "The checkbox is ";

    // is checkbox checked or not? if (document.myForm.myCheckbox.checked) myString+= "checked"

    else myString+= "not checked";

    // output string alert(myString); }

    // -->

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    120

    6.3 WINDOW

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    121

    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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    122

    Hasilnya akan terlihat seperti ini:

    Ini halaman percobaan

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    123

    Terlihat bahwa kita menentukan properti-nya dengan

    "width=400,height=300,status=no,toolbar=no,menubar=no". Kita

    tidak boleh menggunakan spasi dalam string ini!

    Berikut ini daftar properti yang dimiliki sebuah window:

    Directories yes|no

    Height number of pixels

    Location yes|no

    Menubar yes|no

    Resizable yes|no

    Scrollbars yes|no

    Status yes|no

    Toolbar yes|no

    Width number of pixels

    Beberapa properti baru telah ditambahkan pada JavaScript 1.2

    (Netscape Navigator 4.0). Kita tidak bisa menggunakan properti 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

    properti baru tersebut:

    alwaysLowered yes|no

    AlwaysRaised yes|no

    dependent yes|no

    hotkeys yes|no

    innerWidth number of pixels (replaces width)

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    124

    innerHeight number of pixels (replaces height)

    outerWidth number of pixels

    outerHeight number of pixels

    screenX position in pixels

    screenY position in pixels

    titlebar yes|no

    z-lock yes|no

    Kita bisa memperoleh penjelasan tentang properti ini dalam

    JavaScript 1.2 Guide. Dengan properti ini kita bisa men-definisikan

    pada posisi mana window akan dibuka.

    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:

    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 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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    125

    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:

    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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    126

    harus menulis window jika kita ingin memanggil method yang ada

    padanya (khusus untuk window-object).

    6.4 STATUS BAR dan TIME OUT

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    127

    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;

    }

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    128

    link

    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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    129

    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:

    ...

    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).

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    130

    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.

    Ketikkan contoh berikut ini

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    131

    // display the text at the right position and set a timeout

    // move the position one step further

    pos++;

    // calculate the text which shall be displayed var scroller = "";

    if (pos == length) { pos = -(width + 2); }

    // if the text hasn't reached the left side yet we have to

    // add some spaces - otherwise we have to cut of the first

    // part of the text (which moved already across the left border

    if (pos < 0) { for (var i = 1; i

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    132

    // -->

    Your HTML-page goes here.

    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 . Ini

    berarti function scroll() akan dipanggil setelah halaman HTML di-load. Kita panggil function scroll() dengan properti 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.)

    6.5 PREDEFINED OBJECT

    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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    133

    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. Method-mothod 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:

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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    134

    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:

    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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    135

    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:

    Kodenya adalah sebagai berikut:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    136

    date= now.getDate(); month= now.getMonth()+1; year= now.getYear(); dateStr= "" + month;

    dateStr+= ((date < 10) ? "/0" : "/") + date; dateStr+= "/" + year; document.clock.date.value = dateStr;

    Timer= setTimeout("clock()",1000); }

    // -->

    Time:

    Date:

    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 . Pada bagian body halaman HTML kita memiliki dua text-element. Function clock()

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    137

    menulis waktu dan tanggal pada kedua text-element ini dengan

    format yang benar. Kita menggunkan dua string timeStr 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;

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    138

    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

    second element

    third element

    Baris kodenya adalah:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    139

    document.write(myArray[i] + ""); }

    // -->

    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]+""); 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] + ""); document.write(myArray[1] + ""); document.write(myArray[2] + "");

    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] }

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    140

    bisa kita gunakan untuk membentuk array dengan perintah:

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

    Tentunya array ini tidak akan memiliki method yang ada pada

    Array-object JavaScript 1.1.

    6.6 FORM

    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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    141

    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.

    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:

    Pada text-element kedua, jika kita masukkan text yang tidak sesuai

    dengan format e-mail (ada tanda @) maka text dianggap tidak valid:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    142

    Jika kita memasukkan input yang benar maka pesan valid akan

    muncul

    Bagaimana cara membuat halaman HTML yang demikian itu?

    Berikut ini adalah baris kodenya:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    143

    }

    function test2(form) { if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1) alert("No valid e-mail address!"); else alert("OK!"); } // -->

    Enter your name:

    Enter your e-mail address:

    Pertama perhatikan kode HTML pada bagian . 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.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    144

    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 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.

    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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    145

    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:

    Berikut ini baris kode untuk mengimplementasikan contoh di atas.

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    146

    for (var i = 0; i < input.length; i++) { var chr = input.charAt(i); var found = false;

    for (var j = 1; j < check.length; j++) { if (chr == check[j]) found = true; } if (!found) ok = false; } return ok;

    }

    function test(input) { if (!check(input, "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "/", "-", " ")) { alert("Input not ok."); } else { alert("Input ok!"); } }

    // -->

    Telephone:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    147

    Dengan gampang kita lihat bahwa function test() menentukan karakter-karakter yang dianggap valid.

    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 e-mail 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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    148

    Do you like this page?

    Not at all.

    Waste of time.

    Worst site of the Net.

    Properti enctype="text/plain" digunakan untuk mengirim plain text tanda bagian yang ter-encode, 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 seperti ini:

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

    if (inputOK) return true else return false;

    } ...

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    149

    ...

    Dengan kode itu, form tidak akan terkirim lewat Internet jika form

    input masih salah.

    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 meng-click 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 properti onLoad di tag seperti ini:

    Lebih lanjut kita dapat melakukan hal sebagai berikut:

    function setfocus() { document.first.text1.focus(); document.first.text1.select(); }

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    150

    yang akan mengeset focus dan juga men-select input.

    6.8 Image-object

    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 properti 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 properti yang dapat

    diakses melalui JavaScript. Kita misalnya bisa berapa ukuran yang

    dimiliki image dengan properti 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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    151

    kita akan bisa mengaksesnya melalui document.myImage atau

    document.images["myImage"].

    Me-loading image

    Berikut ini kita akan mencoba mengganti isi (file gambar) sebuah

    image pada web-page. Untuk ini kita akan menggunakan properti

    src. Properti 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:

    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.

    Preload image

    Salah satu kelemahan dari penggantian gambar seperti di atas adalah

    bahwa gambar akan di-load setelah kita mengisikan alamat baru

    pada properti 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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    152

    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 di-load 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.

    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:

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    153

    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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    154

    Urutan image yang tak terbatas - memungkinkan mengubah

    urutan images tanpa merubah kode

    Berikut ini baris kode selengkapnya

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    155

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    156

    document.images[pics[i][2]].src = pics[i][1].src; } } } }

    function off(){ if (browserOK) { for (i = 0; i < objCount; i++) { // set back all pictures if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } }

    // preload images - you have to specify which images should be preloaded

    // and which Image-object on the wep-page they belong to (this is the // first argument). Change this part if you want to use different images

    // (of course you have to change the body part of the document as well)

    preload("link1", "img1f.gif", "img1t.gif"); preload("link2", "img2f.gif", "img2t.gif"); preload("link3", "img3f.gif", "img3t.gif");

    // -->

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    157

    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

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    158

    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 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.

    Function on() dan off() dipanggil melalui event-handler onMouseOver dan onMouseOut. Karena image tidak bisa bereaksi oleh event

    onMouseOver dan MouseOut kita harus membuat 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).

  • Diktat Kuliah Internet & Web Disain Herman Tolle - UB

    159

    DAFTAR PUSTAKA

    Anonymous, Javascrip Tutorial, http://www.javascriptsource.com,

    diakses Januari 2006.

    Anonymous, Pioneers On The Net, http://www.chick.net/wizards/

    pioneers.html, diakses Januari 2006.

    Budd, Andy. CSS Mastery: Advanced Web Standards Solutions,

    Februari 2006.

    Dave Taylor, Creating Cool Web Sites with HTML, XHTML, and CSS,

    Wiley Publishing, Inc, 2004

    Martin, Dodge, An Atlas of Cyberspaces- Historical Maps, http://

    www.cybergeography.org/atlas/historical.html, diakses Januari

    2006.

    Shengili-Roberts, Keith.,Core Cascading Style Sheet, Prentice Hall,

    New Jersey, 2000.

    Tolle, Herman. Diktat Kuliah Internet & Disain Web. Teknik Elektro

    Universitas Brawijaya. 2004.

    Wibowo, Sugeng, Modul Pelatihan Dasar Disain Web. UPT Pusat

    komputer universitas brawijaya, 2003.