Tips dan Trik Java Script 2

imagesVariabel & Fungsi

Judulnya memang berbau matematika banget. Tapi jangan takut, kita disini tidak sedang belajar matematika sama keluarganya yang suka bikin mumet. Kita langsung masuk ke scriptnya aja ya, biar lebih gampang ngertiinya.

<script language=”javascript”>
/*
Script ini menanyakan kepada pengunjung namanya
kemudian menampilkan sapaan kepada pengunjung tersebut
*/
var pengunjung = prompt (“Tulis nama anda di bawah”,”Yup, di sini !!”);
document.write(“<font color=’000099′><h2> Hai ” + pengunjung + “. Gimana kabarnya ?</font></h2>”);
</script>

Hai Yup, di sini. Gimana kabarnya ?
lihat, anda disapa. Menarik kan? Nah sekarang kita bahas satu persatu.

Tanda /* dan */ berfungsi memberi komentar. berbeda dengan tanda // yang akan mengabaikan tulisan di sebelah kanannya (dalam satu baris), di sini semua tulisan yang berada di antara tanda /* dan */ akan diabaikan, walaupun tidak berada pada baris yang sama.

Var pengunjung gunanya mendefinisikan variabel yang diberi nama pengunjung. Variabel pengunjung ini nantinya akan kita isi nilainya dengan perintah prompt. Nama variabel harus terdiri dari satu kata tanpa spasi, di mana huruf besar dan huruf kecil dibedakan.

prompt (“Tulis nama anda di bawah”,”Yup, di sini”) berguna untuk memunculkan kotak pertanyaan saat halaman ini dipanggil (diload). Kata yang berada di antara tanda petik, yang pertama (“tulis nama anda di bawah”) akan dimunculkan di atas kotak teks yang harus diisi, sedangkan yang kedua (“Yup, di sini”) akan dimunculkan di dalam kotak teks.

dokument.write berfungsi untuk menuliskan sesuatu di halaman ini. Di sini salah satu yang akan dituliskan adalah variabel pengunjung yang nilainya sesuai dengan apa yang kita isi saat masuk ke halaman ini. Semua perintah kemudian ditutup dengan tanda titik koma (;).

Saya berikan satu contoh lagi penggunaan variabel yang benar-benar untuk pengerjaan matematik. Lihat script berikut :

<script language=”javascript”>
var jumlah = 12 + 24
alert(” 12 + 24 sama dengan ” + jumlah)
var x = 10
alert(“Sepuluh itu ” + x)
var y = 12
var z = 24
alert(“12 gabung 24 menjadi ” + y + z)
</script>

Pada script di atas kita mendefinisikan beberapa jenis variabel. Yang pertama variabel “jumlah” dan variabel “x” yang diisi dengan numerik (angka). Kemudian variabel “y” dan variabel “z” diisi dengan string (karakter). Nah di sini akan terlihat bahwa penjumlah “+” pada angka benar-benar menjumlahkannya, tetapi pada karakter berarti menggabungkan. Nggak susah kan. Juga perlu diperhatikan bahwa pada fungsi alert() setiap tulisan (karakter) selalu diapit oleh tanda petik (“), sedangkan variabel tidak perlu.

Sekarang kita langsung ke fungsi. Fungsi adalah sekelompok (satu juga boleh) perintah yang dikumpulkan terus diberi nama. Jadi sewaktu-waktu diperlukan tinggal dipanggil nama fungsinya, dan seluruh perintah yang dirangkum dalam fungsi itu akan dijalankan. Gampangnya coba kita lihat contoh fungsi di bawah.

<script language=”javascript”>
<!–Hide from browsers that do not understand javascript

function tanggal()
{
var d = new Date();

var y =d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();

var t = m + ‘/’ + d + ‘/’ + y;
defaultStatus=”Anda datang pada tanggal ” + t + “.”;
}
//end hiding–>

</script>

dan karena kita sekarang sudah punya fungsi, maka kita coba jalankan menggunakan event handler onLoad pada tag <body>, dengan perintah berikut :

<body onLoad=”tanggal()”>

Nah anda bisa melihat efeknya langsung, karena begitu anda membuka halaman ini, maka fungsi tanggal() ini langsung dipanggil dengan menggunakan event handler onLoad pada tag <bopdy> di atas. Loh trus, fungsi ini kerjanya ngapain ? OK, kita bahas deh satu persatu, baris demi baris….

Pertama
<!– Hide from browsers that do not understand Javascript dan – lihat baris sebelum script ditutup. // end hiding–> Tanda <!– dan –> gunanya untuk mengantisifasi kemungkinan adanya browser yang tidak mensupport pemakaian javascript. Artinya javascript-nya nggak bisa jalan di browser itu. sebenarnya sih kalau ngelihat statistik, hampir 100% pengguna internet sekarang memakai browser yang support javascript, jadi sebenarnya nggak perlu khawatir masalah itu. Tapi..in case.

btw kelihatannya belum saya jelaskan. Java script ini termasuk client side script, bukan server side script. Hahaha… mudah-mudahan anda pernah mendengar istilah itu. Gampangnya gini, kalau client side script, berarti jalaqn enggaknya script ini tergantung client, atau tergantung browser (misalnya Internet Explorer, Netscape, dll) yang dipaka pengguna. Apakah browsernya support apa enggak. Sedangkan server side script, tergantung pada servernya (mmm… tempat anda naruh halaman home page). Ada host server yang support script tertentu dan ada juga yang enggak. Contoh server side script ini misalnya php, asp, cgi.Untuk jenis script ini (server side) kita enggak perlu pusing memikirkan browser yang dipakai pengguna , karena sama sekali nggak ada masalah. Tapi kita bakalan pusing nyari host server yang men-support script-script tersebut, apalagi yang gratisan. Geocities dan yang semacamnya udah jelas enggak support. Tapi kita lupakan aja hal ini, sekarang pokoknya kita lagi make java script, sehingga kita bisa naruh home page kita di mana saja, termasuk di geocities. Asyik kan enggak usah pusing nyari host server khusus.

kembali ke perintah di atas. Tanda <– dan –> akan menyebabkan browser yang enggak support java script mengabaikan semua perintah yang ada di antaranya.Sedangkan browser yang support java script nggak mempermasalahkannya. Untuk perintah <!–, kita dapat menulis apapun di sebelah kanannya dan hanya akan dianggap sebagai komentar. Sedangkan perintah –> harus didahului dengan perintah // agar dianggap sebagai komentar oleh browser yang support java script. mmm….singkatnya tulis <!–, setelah tag <script> dan tulis –> sebelum tag </script> dan anda bisa tidur dengan nyenyak.🙂

Kedua
function tanggal()
di sini kita mendefinisikan sebuah fungsi, dan memberinya nama tanggal(). Anda perlu memperhatikan bahwa nama fungsi di atas diakhiri dengan tanda (). Ikuti saja dulu, setiap anda membuat fungsi.🙂
Fungsi berawal dengan tanda { (bisa anda lihat pada baris berikutnya) dan ditutup dengan tanda } (lihat agak ke bawah).

Ketiga
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();
var t = m + ‘/’ + d + ‘/’ + y + ‘ ‘;
di sini kita hanya mendefinisikan beberapa variabel, berturut-turut variabel d, kemudian variabel y, m, kemudian variabel d kita beri harga baru, dan terakhir variabel t. Perintah-perintah di sebelah kanan tiap variabel mestinya telah anda pahami di luar kepala. Ia kan ?😉

Terakhir
defaultStatus = “Anda datang pada tanggal ” + t + “.”;
di sini kita mengubah defaultStatus menjadi berisi “Anda datang Pada….” Default status tuh yang mana sih ? Nah lihat di bagian bawah kiri browser anda… keliatan kan tulisannya “Anda datang pada…”eits, jangan protes dulu. defaultStatus ini sama dengan window. Status hanya bisa anda gunakan pada event handler seperti pada tutorial sebelumnya. Untuk kasus sekarang anda hanya dapat menggunakan defaultStatus.

Sekarang pertanyaan terakhir…dimana sebaiknya saya tuliskan script ini? Anda dapat meletakkannya dimana saja. Hanya jika anda letakkan diantara tag <head> dan </head> atau di atas tag <body onLoad=….>, maka script ini akan dijalankan sebelum halaman ini ditampilkan. Sedang jika anda letakkan setelah tag <body onLoad=…>, maka script ini akan dijalankan setelah halaman ditampilkan. It’s up to you, tapi jangan takut it won’t bite.😀

Ok, sebenarnya penjelasan tentang fungsi dan variabel sudah cukup dengan keterangan di atas. Tapi saya kira saya masih berhutang dari tutorial sebelumnya, yaitu tentang event handler yang belum terbahas. Event handler onLoad sudah dibahas datas. Sekarang saya akan tampilkan event handler onMouseOut yaitu yang akan bekerja saat mouse meninggalkan link. Perhatikan link berikut, gerakkan mouse anda ke atas link kemudian tinggalkan link. Perhatikkan windows status di bawah saat anda menggerakkan mouse anda ke atas link, dan saat anda meninggalkan link akan muncul peringatan.

link di atas dibuat dengan menggunakan script berikut. Enggak ada yang baru kecuali tambahan event handler onMouseOut.

<a href=”http://tpundiksha.wordpress.com&#8221;
onMouseOver=”window.status=’Oh, jangan deket-deket…..’; return true”
onMouseOut=”alert(‘Nah gitu dong….’); return true”> Klik disini
</a>

Terakhir event handler onUnLoad. Event handler ini akan bekerja saat anda meninggalkan halaman ini. Nanti kalau anda menutup halaman ini atau berpindah ke halaman lain, anda akan mendapatkan peringatan, karena pada tag <body> saya tuliskan event handler seperti di bawah ini.

<body onUnload=”alert(‘BTW udah ngerti blom???’)”>

Tutorial ketiga cukup sampai di sini ya saya maw bo2 dulu… siap-siap masuk ke tutorial keempat. Tentang apa hayo?!?😉

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