PROGRAM JAVASCRIPT

Posted: February 6, 2008 in Uncategorized

JavaScript

Dokumen HTML yang Anda buat, sampai sejauh ini masih merupakan dokumen statis. Anda mungkin menginginkan halaman web Anda lebih interaktif. Menggunakan JavaScript yang merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape, akan lebih memudahkan Anda untuk bisa mewujudkannya. JavaScript bersifat Object Oriented, menggunakan banyak karakteristik seperti pada pemrograman C++ dan tentu saja bahasa Java itu sendiri

Java

Java yang juga berbasis Object Oriented programming, diciptakan setelah C++ dan didesain sedemikian sehingga memiliki ukuran yang kecil, sederhana dan portable. Keunggulan Java adalah tidak tergantung pada sistem operasi dan platform tertentu baik source program maupun hasil kompilasinya. Source program diterjemahkan oleh Java compiler ke dalam bytecode. Hasil kompilasinya yaitu program Java, akan dijalankan dengan bantuan Java interpreter langsung dari command prompt maupun dari program applet viewer atau web browser. Program yang dihasilkan dengan bahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser) maupun berupa aplikasi mandiri yang dijalankan dengan program Java Interpreter.

Perbedaan JavaScript dengan Java

 

JavaScript

Java

Diinterpretasikan oleh client

Dikompilasi oleh pemrogram, dijalankan oleh client

Kodenya berintegrasi dalam dokumen HTML

Hasilnya berupa Applet, dipanggil salam dokumen HTML

Loose typing of data type

Strong typing of data type

Dynamic binding

Static binding

Terbatas pada fungsi browser

Bisa sebagai aplikasi mandiri

Bekerja sebatas pada elemen HTML

Lebih dari sekedar elemen dokumen HTML (misalnya multimedia)

Mampu mengakses objek dan fungsionalitas browser

Tidak mampu mengakses objek dan fungsionalitas browser

 

JavaScript programming

Menjalankan JavaScript

Untuk bisa menjalankan script yang ditulis dengan JavaScript, Anda memerlukan 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.

Kode JavaScript dituliskan langsung pada halaman HTML dengan menggunakan tag <script>. Sesuatu yang berada diantara tag <script> dan </script> diinterpretasikan sebagai kode JavaScript. Perintah lain yang penting dalam pemrograman dengan JavaScript adalah document.write(), digunakan untuk menuliskan sesuatu dalam dokumen HTML. Untuk memberikan contoh bagaimana JavaScript bekerja, buatlah file berikut dan simpan sebagai file HTML normal. Kemudian buka file dari JavaScript enabled browser.

 

<HTML>

<BODY>

<br>

My HTML Document

<br>

<script language=”javaScript”>

document.write(“It’s JavaScript!”)

</script>

<br>

My HTML Document too

 
 


</BODY>

 

Gambar 3.1. Halaman JavaScript

Event dan Event Handler

Ada banyak event dan event handler dalam JavaScript yang bisa dilihat pada JavaScript Reference. Contohnya event click terjadi jika user mengklik tombol mouse. Event MouseOver terjadi jika mousepointer bergerak melewati sebuah link.

Event handler digunakan jika kita menginginkan program JavaScript yang kita buat bereaksi terhadap suatu event tertentu, contohnya adalah onClick :

 

<form>

<input type=button”value=”Click me” onClick=”alert(‘Ya’)”>

</form>

 

Pada contoh onClick=”alert(‘Ya’)” yang berada pada tag <input> akan mendefinisikan apa yang akan terjadi jika tombol ditekan. Jadi jika terjadi event Click, komputer akan mengeksekusi alert(‘Ya’). Alert() berfungsi untuk menampilkan window popup. Didalam kurung tentukan string yang akan muncul pada window yang dimaksud.

Function

Function merupakan cara untuk menyatukan beberapa perintah

<HTML>

<script language=”javaScript”>

function myHomepage(){

document.write(“This is My Homepage<br>”)

document.write(“Use JavaScript<br>”)

}

myHomepage();

</script>

</HTML>

 

Perintah-perintah didalam tanda {} merupakan milik function myHomepage(). Ini berarti ada dua buah document.write() yang dijadikan satu dan dapat dieksekusi melalui panggilan function yang dimaksud.

Hirarki

JavaScript menyusun semua elemen halaman web dalam suatu susunan hirarki. Setiap elemen dilihat sebagai object. Setiap objek terdapat memiliki beberapa property (yang menentukan sifat dan tampilannya) dan method (yang menentukan apa yang bisa dikerjakan oleh objek yang bersangkutan).

Dari pandangan JavaScript window browser adalah sebuah window-object ini berisi elemen-elemen seperti statusbar. Di dalam window kita dapat me-load dokumen HTML. Halaman ini merupakan sebuah document-object.

Location–Object

Object ini mewakili alamat dari dokumen HTML yang di – load. Jadi jika Anda me-load halaman http://www.abc.com/page.html maka object location.href berisi sama dengan alamat ini.

Frame

Sekarang kita mencoba mengkombinasikan frame yang telah dibuat pada dokumen HTML sebelumnya dengan JavaScript. Sebagai contoh dua frame yang diperlihatkan dalam susunan hirarki berikut :

 
 

Browser

window

parent

 

       
 

Frame1

Page1.htm

 

Frame2

Page2.htm

 

children

 

 

Window browser disebut parent pada hirarki ini dan kedua frame disebut children. Misalkan nama kedua tersebut adalah frame1 dan frame2. Dalam mempertukarkan informasi antar frame, ada tiga kasus sebagai berikut ini:

· parent window/frame mengakses childframe
Script pada parent window –yaitu pada halaman yang membuat frame- dan akan mengakses salah satu frame, sebagai contoh:

 

frame2.document.write(“It’s parent window”);

 

· childframe mengakses window/frame
Diperlukan misalnya untuk menghapus frame. Yang sebenarnya hanya meload halaman baru sebagai pengganti halaman yang menghasilkan frame. Mengakses parent window dari child frame dengan menggunakan parent . Untuk meload sebuah dokumen baru tentukan URL baru location.href pada parent window dengan perintah:

parent.location.href=”http://abc.com

· child frame mengakses child frame lain
Kode yang harus dituliskan agar bisa mengakses document-object pada frame kedua dari frame pertama adalah :

parent.frame2.document.write(“It’s frame1”);

Window

Kemampuan membuat window browser baru merupakan salah satu keunggulan JavaScript . Kita bisa meload dokumen, misalnya dokumen HTML , ke window yang baru tersebut atau bahkan membuat dokumen baru (on-the-fly).

Membuka Window

Script berikut membuka sebuah window baru berukuran 400×300,tidak memiliki statusbar, toolbar atau menubar.

<HTML>

<HEAD>

<script language=”javaScript”>

function openWin(){

myWin=open(“abc.htm”,”displayWindow”,

“width=400,height=300,status=no,toolbar=no,menubar=no”);

}

</script>

</HEAD>

<BODY>

<FORM>

<input type=”button”value=”open new window”

onClick=”openWin()”>

</FORM>

</BODY>

</HTML>

Halaman abc.htm diload ke dalam window yang baru melalui method open().

Propertynya“width=400,height=300,status=no,toolbar=no,menubar=no”. Tidak boleh menggunakan spasi dalam string ini!

Anda bisa me-load halaman baru jika tahu nama dari window. Jika window yang dibuka tidak ada, window baru akan dibuat secara otomatis. Perhatikan bahwa myWin bukan nama window walaupun window bisa diakses melalui variabel. Variabel ini merupakan variabel lokal yang hanya berlaku di dalam script tempat variabel tersebut didefinisikan. Nama window yang global (displayWindow) merupakan nama lengkap yang unik dapat digunakan seluruh window browser yang sedang terbuka.

Menutup Window

Menutup suatu window melalui JavaScript adalah dengan method close().Method open() dan close() merupakan methot dari dari window-object. Seharusnya dituliskan sebagai window.open() dan window.close() dan bukan open() dan close() saja Tetapi khusus pada window–object kita dibolehkan tidak menulis window jika ingin memanggil method yang ada padanya.

Predefined Objet

JavaScript telah menyediakan predefined objects, yaitu objek-objek yang telah terdefinisi dan siap dipakai seperti Date-object, Array-object atau Math-object. Selengkapnya lihat pada referensi JavaScript .

Date-Object

Objek ini menyediakan fasilitas penentuan tanggal dan waktu. Untuk menampilkan waktu Anda 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 tidak ditentukan hari dan waktu tertentu sebagai argumennya berarti tanggal dan waktu sekarang yang akan digunakan. Date-object menyediakan method yang bisa digunakan melalui object today. Contoh method-method ini adalah getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() dan seterusnya.

Untuk memperoleh tanggal dan waktu yang lain selain tanggal sekarang, gunakan format berikut:

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

Array-object

Array bisa dilihat sebagai banyak variabel yang disatukan. Anda bisa mengaksesnya melalui satu nama dan penomoran. Misalnya array diberi nama names, maka mengakses nama pertama dapat melalui names[0], nama kedua dengan names[1] dan seterusnya. Setelah JavaScript 1.1 (Netscape Navigator 3.0) Anda dapat menggunakan Array-object. Array baru dibuat dengan perintah myArray =newArray(). Harganya diisi dengan kode berikut:

myArray[0]=17;

myArray[1]=”Stefan”

myArray[2]=”Koch”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s