Aku merencanakan akan menulis beberapa dokumen/artikel tentang Javascript yang kubagi menurut ruang lingkup pembahasannya. Bagian 1 (bagian ini) berisi pengetahuan dasar tentang Javascript, bagian 2 berisi tentang konsep OOP di Javascript, bagian 3 berisi tentang DOM dan AJAX, serta Bagian 4 berisi tentang JQuery. Sebagian besar isi artikel ini berdasarkan pengalamanku sendiri jadi kemungkinan besar bakal ada kesalahan, nah kalau kamu menemukan sesuatu yang tidak benar maka silakan meninggalkan komentar :).
Javascript 1 (Pengetahuan Dasar)
Sebagai pembuka aku akan memberikan sedikit gambaran tentang Javascript. Javascript adalah script yang berjalan pada sisi client/user dan dijalankan oleh browser seperti Firefox, Opera, IExplorer, dsb. Untuk menuliskan Javascript sangatlah mudah karena sama seperti saat kita menuliskan kode HTML untuk halaman web yang kita buat (Javascript juga bagian dari dokumen HTML). Javascript langsung diterjemahkan dan dieksekusi begitu halaman web tersebut dimuat oleh browser sehingga hasil dari script yang kita buat langsung dapat dilihat tanpa harus melakukan proses kompilasi segala.
Ada banyak sekali kegunaan dari Javascript dari membuat halaman yang dinamis, validasi input, mendeteksi masukan dari keyboard atau mouse, membuat koneksi dibalik layar dan bahkan Aptana Jaxer membuat Javascript juga bisa menjadi "serverside scripting" atau bisa dijalankan disisi server. Karena banyaknya kegunaan dari Javascript ini maka ada baiknya kamu tahu tentang Javascript dan bagaimana cara melakukan pemrograman menggunakan Javascript. Untuk menuliskan Javascript, masih di dokumen HTML yang kamu buat, ketikkan tag pembuka: <script type="text/javascript">
, dan diakhiri dengan tag tutup:
</script>. Tag ini bisa diletakkan dibagian manapun di dokumen HTMLmu, bisa di bagian HEAD, BODY ataupun dalam elemen block lain dan langsung diterjemahkan oleh browser.
Sintaks Javascript hampir mirip dengan keluarga C (C, C++, C#) dan hampir sama dengan bahasa pemrograman Java. Jika kamu familiar dengan Java maka aku jamin semakin mudah untuk mempelajari Javascript. Ada yang bilang bahwa Javascript terlalu OO (Object Oriented) sehingga sulit dipelajari oleh pemula dalam pemrograman. Menurut pengalamanku pendapat ini ada benarnya, paradigma pemrograman strukturan dan OO sangatlah berbeda. Namun begitu kamu paham sedikit tentang OO di Javascript maka dijamin kamu akan merasa bahwa OO akan mempermudah kerjamu. Target pembaca dari artikel ini adalah programmer yang sudah punya sedikit pengalaman dalam pemrograman dan bukan yang sama sekali baru belajar (tapi untuk yang baru belajar pemrograman juga tidak dilarang kok), karena aku tidak membahas secara detil tentang Javascript tapi hanya bagian yang menurut aku perlu diketahui dan menjadi bagian penting dari pemrograman Javascript.
a. VARIABEL
Pembahasan pertama dan yang paling mudah kita mulai dari variabel. Untuk mendefinisikan sebuah variabel, di Javascript digunakan kata kunci "var" yang diikuti dengan nama variabel yang kita inginkan. Dalam Javascript kita tidak menentukan secara eksplisit tipe data dari suatu variabel namun begitu kita dapat melakukan type casting jika kita ingin mendapatkan tipe data yang sesuai. Ada sebuah fungsi yang digunakan untuk mengetahui tipe data dari suatu variabel yaitu fungsi "typeof" yang akan menghasilkan jenis data dari sebuah variabel. Berikut ini sebuah contoh simpel kode Javascript untuk type casting dan mengetahui jenis data dari suatu variabel:
<script type="Javascript">
/* <![CDATA[ */
var angka = 10; // tipe data number
angka = angka.toString(); //ubah number ke string
alert(typeof(angka));
/* ]]> */
</script>
Kode diatas akan memunculkan window yang bertuliskan "string".
Penjelasannya: awalnya variabel "angka" kita isi dengan angka 10 (tipe datanya "number") dan kemudian dilakukan casting untuk mengubahnya menjadi string menggunakan method/fungsi "toString()" sehingga sekarang variabel angka yang semula bertipe data "number" berubah menjadi "string", mudah kan? :)
-- Informasi Tambahan: tanda /* <!--[CDATA[ */ dan /* ]]--> */ pada kode diatas digunakan agar dokumen kita valid XHTML, namun kamu bisa mengacuhkannya atau tidak menggunakannya karena tidak ada efek signifikan pada browser tapi kamu bakalan sering menemukan blok CDATA pada pembuatan dokumen XML.
b. WINDOW
Window yang aku maksud disini adalah jendela dialog yang muncul pada browser yang dibangkitkan/invoked oleh kode Javascript. Jika kamu pernah melihat jendela peringatan yang muncul tiba-tiba pada browser saat kamu melakukan kesalahan maka kemungkinan window itu dibangkitkan menggunakan method "alert" di Javascript. Setahu aku ada tiga window yang bisa dimunculkan yaitu:
1. Alert. Window ini bertujuan untuk memperingatkan user akan sesuatu hal (biasanya ada gambar tanda seru berwarna kuning tapi tiap browser bisa beda-beda tampilannya). Aku kadang menggunakan window alert untuk melakukan proses debugging untuk mencari letak kesalahan kode yang kulakukan. Cara membuat window ini adalah seperti berikut:
window.alert("Selamat Datang!");
kamu bisa menghilangkan kata window didepan fungsi alert sehingga cukup dituliskan alert() saja.
2. Confirm. Window ini biasanya digunakan untuk meminta persetujuan user. Jika kamu pernah melihat window yang berisi dua tombol Ok/Cancel maka biasanya menggunakan fungsi ini. Cara pembuatannya adalah seperti berikut:
if (window.confirm("Apakah kamu yakin?")) {
//jika user mengklik OK
} else {
//jika user mengklik Cancel
}
3. Prompt. Window ini bisa meminta input dari user secara sederhana. Saat ini sangat jarang aku melihat situs yang menggunakan fungsi ini tapi ada baiknya kamu mengetahuinya. Cara pembuatannya adalah:
var nama = window.prompt("Masukkan namamu");
if (nama != null) {
//jika user mengisi inputan
alert("hai " + nama + " :) !");
} else {
//jika user menekan cancel
alert("hei anonim, namamu jelek ya?");
}
c. LARIK/ARRAY
Array adalah sekumpulan data yang diikat dalam satu nama variabel. Di Javascript juga dikenal konsep array yang pada umumnya key index yang digunakan adalah berupa angka. Pembuatan array di Javascript bisa menggunakan cara berikut:
var array = new Array(1, 2, 3); //cara 1
var array2 = [1, 2, 3]; //cara 2
array[array.length] = 4; //push satu elemen
array2.push(5); //push dengan method push pada object Array
alert(array[3]); // muncul window dengan teks 4
alert(array2[3]); // muncul window dengan teks 5
Cara pertama adalah menggunakan kata kunci "new Array()" dan cara kedua langsung menggunakan tanda kurung siku "[]". Asal kamu tahu, kedua array pada contoh diatas menggunakan key index berupa angka (dimulai dari 0). Trus, jika kamu mungkin bertanya apakah Javascript juga bisa membuat array menggunakan key index dengan string seperti PHP (misal: $data["nama"]) maka jawabannya adalah bisa. Array di Javascript sebenarnya adalah berupa object dan kita mensimulasikan penggunaan key index string seperti pada contoh berikut:
var array = {
"satu": 1,
"dua": 2
};
array["tiga"] = 3;
alert(array["satu"]);
Kode diatas akan memunculkan window alert dengan teks angka 1. Pertama kita membuat object terlebih dahulu dengan properti menjadi index key dari array. Di Javascript, panjang data dari array bersifat dinamis dan jenis data dari elemen array juga tidak harus sama. Selain itu kita juga bisa membuat array multidimensi dan juga disediakan beragam method untuk beroperasi dengan array seperti push, pop, reverse, dsb. Untuk daftar lengkap beragam method yang digunakan dalam operasi array bisa kamu cari dari sumber lain atau ke situs w3school
d. FUNGSI/FUNCTION
Fungsi adalah sekumpulan kode yang digunakan untuk melakukan sesuatu. Javascript memiliki fungsi-fungsi built-in bawaannya sendiri yang lumayan banyak tapi kita juga bisa membuat fungsi kita sendiri agar sesuai dengan keinginan kita. Untuk menuliskan fungsi digunakan kata kunci "function" yang diikuti dengan nama fungsi yang kita inginkan dimana sebaiknya nama fungsi bisa memberikan sedikit gambaran tentang apa yang akan dilakukan oleh fungsi itu. Pada umumnya nama fungsi diawali dengan kata kerja dan menggunakan huruf kecil (lowercase) seperti "cariLuas", "jumlahAngka", dsb. Berikut ini contoh pembuatan fungsi dan pemanggilan fungsi:
// -- fungsi penjumlahan
function jumlah(a, b) {
return a+b;
}
var dua = 2;
var hasil = jumlah(dua, 3); //memanggil fungsi
alert(hasil);
Saat dijalankan pada browser, kode diatas akan memunculkan window alert bertuliskan angka lima. Jika secara tidak sengaja kamu membuat dua buah fungsi dengan nama yang sama maka fungsi yang terakhir yang akan digunakan. Bila kamu memasukkan parameter yang tidak sama dengan jumlah argumen yang ada pada fungsi maka Javascript tidak akan protes dan kodemu tetap akan jalan dengan catatan jika parameternya lebih sedikit maka variabel yang tidak diisi akan memiliki nilai "undefined". Kondisi ini bisa digunakan untuk membuat fungsi dengan parameter yang bersifat opsional seperti contoh berikut:
function jumlah(bil1, bil2, bil3) {
var hasil = bil1 + bil2;
if (typeof(bil3) != 'undefined') {
hasil += bil3;
}
return hasil;
}
alert(jumlah(2, 3)); // 5
alert(jumlah(2, 3, 4)); // 9
Dua baris terakhir kode diatas memanggil fungsi jumlah tapi dengan parameter yang jumlahnya berbeda. Yang pertama cuma dua parameter (2,3) dan yang kedua menggunakan tiga parameter (2,3,4). Pada pemanggilan pertama Javascript tidak akan protes meskipun jumlah parameternya kurang satu (fungsi jumlah meminta tiga yaitu bil1, bil2 dan bil3), tapi parameter yang tidak diset yaitu "bil3" akan diisi dengan "undefined". Karena itulah didalam definisi fungsi jumlah kamu dapat melihat ada pengecekan apakah argumen "bil3" diset atau tidak menggunakan fungsi "typeof".
e. FUNGSI ANONIM/ANONYMOUS FUNCTION
Pada satu kondisi mungkin saja kita hanya ingin membuat satu fungsi khusus yang cuma digunakan sekali saja oleh program. Daripada menggunakan fungsi yang banyak dan berceceran dan tidak diperlukan lagi maka kita dapat membuat fungsi anonim (fungsi tanpa nama) yang biasanya digunakan satu kali saja dan pada umumnya digunakan pada fungsi callback. Berikut beberapa contoh pembuatan fungsi anonim:
var kata = "Selamat pagI teman!";
kata = kata.replace(/[aiueo]/gi, function(str) {
return (str.toLowerCase() == 'i' ? str : 'a');
});
alert(kata);
Pada contoh diatas aku membuat fungsi anonim sebagai callback function pada method replace di object String untuk mengubah semua huruf vokal selain huruf "i" atau "I" menjadi "a". Kode diatas jika dijalankan akan memunculkan window alert dengan teks "Salamat pagI taman!".
Di Javascript kita juga dapat melakukan assign fungsi anonim pada suatu variabel secara langsung seperti pada contoh berikut:
var say = function(text) {
alert(text);
}
say('hai');
Mungkin kamu merasa kalau cara ini terkesan lebih ribet dibandingkan dengan langsung mendeklarasikan fungsi "say" menjadi sebuah fungsi, tapi pada beberapa kondisi kamu akan merasa sangat nyaman menggunakan cara seperti ini, believe me! :) karena semakin sering kamu menggunakan Javascript maka akan semakin sering kami membuat fungsi anonim. Agar dapat menggunakan fungsi anonim secara benar maka diperlukan latihan yang cukup agar terbiasa karena untuk pemula fungsi anonim mungkin terlihat rumit dan sering menimbulkan kesalahan dalam penulisannya. Berikut ini adalah contoh lain dari penggunaan fungsi anonim:
var intv = 0;
setInterval(function() {
var body = document.getElementsByTagName('body')[0];
body.innerHTML = intv;
intv++;
}, 500);
Pada kode diatas, aku memasukkan fungsi anonim sebagai parameter untuk fungsi setInterval yang akan menuliskan nilai variabel intv ke dalam body document setiap setengah detik (500 milisecond).
f. SELF-EXECUTING ANONYMOUS FUNCTION
Berikutnya aku akan mengenalkan konsep sebuah fungsi anonim yang langsung dieksekusi oleh browser. Pada umumnya fungsi yang kita buat akan dieksekusi jika kita memanggilnya secara eksplisit pada kode yang kita buat, tapi di Javascript ada fungsi anonim yang otomatis dijalankan oleh browser begitu halaman diload. Fungsi ini bisa digunakan untuk mempersiapkan segala hal yang diperlukan pada halaman web tersebut, misalnya menyembunyikan elemen, cek koneksi database dan sebagainya. Contoh pembuatan fungsi ini adalah:
(function(){
alert('hai');
}());
Jika dijalankan pada browser, kode diatas akan memunculkan window alert dengan teks "hai". Dalam satu halaman kamu dapat memasukkan lebih dari satu fungsi anonim self-execute ini. Kamu juga bisa membuat argumen dan mem-pass parameter pada fungsi ini seperti pada contoh berikut:
(function(w){
var sapa = 'hai';
w.sapa = sapa;
}(window));
alert(sapa);
Tujuan pembuatan fungsi anonim self-executing ini sebagian besar adalah untuk menghindari pembuatan fungsi yang terlalu banyak dan berceceran yang mungkin saja akan "melibas" nama fungsi yang sudah ada. Pada umumnya pembuat program Javascript yang programnya akan dipakai orang lain akan berusaha mendefinisikan fungsi atau variabel sesedikit mungkin agar programnya tidak sampai mengganggu program yang sudah ada. Nah, salah satu caranya adalah "membungkus" kodenya dalam fungsi anomim seperti ini.
g. OBJECT
Sekarang aku hanya memberikan contoh penggunaan object pada Javascript. Object adalah suatu tipe data bentukan dalam pemrograman dimana object ini memiliki method (fungsi) dan property (variabel). Untuk membuat object pada umumnya digunakan kata kunci "new", namun ada beberapa object yang bersifat abstract ataupun memiliki method dan property yang static sehingga kita tidak harus menggunakan kata "new" untuk menggunakannya. Berikut contoh pembuatan object di Javascript:
function Objectku() {
this.bilang = function(kata) {
alert(kata);
};
}
//object dari class buatan sendiri
var obj = new ObjectKu;
obj.bilang('hai');
//contoh object Date bawaan javascript
var date = new Date();
//contoh object tanpa new
var luas = Math.PI * (4 * 4); //Math.PI untuk nilai PI
Pada contoh diatas aku berikan tiga contoh penggunaan object pada Javascript. Untuk mendefinisikan class di Javascript kita cukup membuat fungsi constructornya saja (seperti fungsi ObjectKu() diatas) dan untuk mengakses method atau properti digunakan tanda titik/dot (.) setelah nama objeknya (misalkan: "Math.floor()"). Pembuatan object di Javascript juga dapat dilakukan dengan mudah menggunakan notasi seperti berikut:
var obj = {
"bilang": function(kata) {
alert(kata);
}
};
obj.bilang('hai');
Kamu gak harus paham tentang object saat ini juga karena aku akan membahas tentang OOP di Javascript di bagian ke-2.
h. OPERATOR
Secara umum operator yang digunakan di Javascript hampir sama dengan operator di bahasa pemrograman Java ataupun C/C++. Untuk melakukan concatenation (penggabungan) string digunakan tanda plus (+) yang mana sama dengan saat kita menjumlahkan angka. Jika angka dijumlahkan dengan string (misal: var a = 10 + "th") maka akan berubah menjadi string.
i. PERNYATAAN/STATEMENT
Javascript juga mendukung banyak statement yang mirip dengan C/C++ dan Java seperti if, else, while, switch, dsb. bahkan cara penulisannya pun hampir sama dengan C atau Java. Jika kamu sudah familiar dengan C maka pasti kamu tidak perlu banyak waktu lagi untuk mempelajari berbagai statement yang ada pada Javascript. Mungkin ada blok pernyataan yang jarang kamu gunakan (tapi tidak jika kamu sering menggunakan Java) yaitu blok try { .. } catch { .. } yang digunakan bila terjadi error atau exception. Contoh penggunaannya adalah:
try {
//kode disini kemungkinan akan muncul error yang akan
//di throw
var h = new XMLHttpRequest();
} catch(e) {
//jika terjadi error
alert("Error: " + e.message);
}
Kemudian ada blok pernyataan yang berhubungan dengan operasi pada object yaitu blok "for (variable in object) { .. }" dan blok "with (object) { .. }". Blok "for in" digunakan untuk melakukan iterasi terhadap properti dari object tertentu. Contohnya seperti berikut:
var o = {
nama: "Zaitun",
umur: 27
}
for (var prop in o) {
alert(o[prop]);
}
Sedangkan blok with berguna untuk melakukan operasi pada object yang kita tentukan. Berikut ini contoh penggunaan blok pernyataan with:
var o = {
nama: "Zaitun",
umur: 27
}
with(o) {
nama = "Zainab";
}
alert(o.nama);
Pada kode diatas, kita mengubah properti nama menjadi "Zainab" pada blok pernyataan with sehingga sekarang object o memiliki properti nama dengan nilai "Zainab" dan tidak lagi "Zaitun".
Untuk sementara aku rasa pembahasan tentang Javascript awal cukup disini saja karena aku sudah tidak menemukan hal lain lagi yang perlu dibahas :). Nanti akan aku lanjutkan tentang konsep OOP di Javascript pada bagian ke-2. Thanks for your attention dan see you... :). *Jangan lupa tinggalkan komentar bila ada hal yang ingin dibahas.
