Belajar Javascript dengan Menggunakan Console Firebug

posted Nov 13, 2011, 12:14 AM by Editor KursusInternet   [ updated Nov 13, 2011, 5:17 AM ]

Pendahuluan

Banyak sekali rekan-rekan penulis baik yang masih pemula maupun yang sudah advanced mempelajari atau mengajarkan Javascript dengan terlebih dahulu membuat dokumen HTML. 

Walaupun tidak salah, namun "bahaya" yang mengintai adalah kita sering sekali menjadi tidak bisa membedakan antara DOM sebagai objek dokumen yang diolah dan Javascript sebagai bahasa script yang digunakan untuk mengolah atau melakukan banyak hal lainnya.

Dari kami sebagai tim editor lebih menyarankan penggunaan berbagai console / shell seperti V8 shell, Rhino Shell, Firebug Console, dan lain-lain.

Dan karena popularitas Firebug sebagai plugin browser yang sangat fenomenal di kalangan profesional javascript / web, maka penulis akan memfokuskan contoh penggunaan console di Firebug ini. Browser yang digunakan adalah Mozilla Firefox.

Contoh Penggunaan Console Firebug

  • Buka browser Mozilla Firefox Anda yang sudah terinstalasi plugin Firebug.
  • Klik icon Firebug atau melalui menu Tools | Web Developers | Firebug | Open Firebug.


  • Pada panel Firebug yang muncul - biasanya pada bagian bawah browser - klik tab Console. Tab console terdiri dari beberapa menu ("Clear", "Persist", dll), layar console di tengah, dan sebuah shell yang memiliki prompt ">>>" seperti terlihat seperti pada gambar screenshot berikut ini.


  • Pada shell ">>>" inilah kita dapat mengetikkan berbagai ekspresi maupun statement javascript untuk mengetahui behavior / perilakunya.
  • Kita akan coba mendefinisikan dan mengisi suatu nilai variable pada console ini. Ketik "var x = 5;" pada shell dan tekan tombol Enter. Perintah tersebut akan dieksekusi seperti terlihat pada layar console tanpa output berarti (undefined). 


  • Kita dapat melihat lagi nilai dari variable x yang sudah didefinisikan dengan mengetikkan "x" pada shell dan menekan tombol Enter. Terlihat pada layar console isi nilai variable "x" adalah angka 5.


  • Dan gambar berikut ini adalah hasil eksekusi rangkaian perintah untuk mendeklarasikan variable lain dan melakukan operasi matematika sederhana.


  • Selain pengolahan variable, berikut adalah contoh screenshot cara mendeklarasikan dan melihat property dari function.


  • Dan pada shell juga terdapat fasilitas auto completion sehingga kita sebagai developer tentunya semakin nyaman dan makin familiar dengan objek-objek yang kita olah di javascript.


  • Selesai.

Penutup

Demikian artikel singkat kami yang memperkenalkan penggunaan console pada Javascript sebagai alat yang bisa digunakan untuk mempelajari Javascript secara dasar sampai mendalam. 

Dengan adanya fitur shell, layar console, dan auto completion menjadikan utilitas ini memiliki fitur sederhana namun cukup lengkap dibandingkan hanya menggunakan editor teks biasa. 


~~ Semoga Bermanfaat ~~
Comments