perbedaan JavaScript dan jQuery Beserta Contoh

Nama JavaScript agak menyesatkan karena mirip dengan platform untuk software Java milik Oracle. Padahal tidak berhubungan sama sekali, dan juga JavaScript bukan scripting language*.

Secara umum JavaScript dipergunakan untuk memanipulasi “Document Object Model” (DOM), yang meliputi elemen-elemen pada sebuah laman web. Jadi, sebuah bahasa pemrograman yang dirancang untuk penggunaan pada browser (peramban) web.

JavaScript dieksekusi pada client side (sisi pengguna = komputer pengguna): Sebuah server website mengirim JavaScript ke peramban milik pengguna, dan peramban tersebut menginterpretasikan dan menjalankan kodenya. Semua ini terjadi dalam sebuah sandbox, yang menjaga agar JavaScript tidak menyentuh internal sistem dan mencegah malicious code (kode jahat) menginfeksi komputer pengguna.

Contoh program JavaScript paling simpel adalah alert ("hello world!");, yang kemungkinan diletakkan pada sebuah laman HTML di dalam tag <script> untuk memerintahkan browser menginterpretasikannya sebagai JavaScript, misalnya: <script> alert("hello world!"); </script> Kode ini menampilkan sebuah munculan (pop up) kotak alert pada peramban web. Lebih mudah bila Anda melihat contoh berikut ini.

JavaScript dapat mengubah isi HTML.

Fungsi JavaScript diatas ditulis seperti ini:

<button onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'" type="button">
Klik Saya!</button>

JavaScript dapat mengubah gambar!

Klik gambar bola lampu untuk on/off (ubah gambar).

Kesimpulannya, Javascript adalah bahasa pemrograman yang dirancang untuk berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript dijalankan dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser dan memanipulasi dokumen web atau materi web saat ditampilkan serta beberapa validasi data.

Sedangkan jQuery adalah sebuah komponen/librari/framework (kamus atau perpustakaan) yang dibuat dari JavaScript dengan tujuan memudahkan seorang programmer dalam menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang programmer bisa lebih leluasa dan mudah melakukan kontrol, manipulasi, automasi halaman web. Oleh karena kemudahan tersebut jQuery memiliki semboyan "write less, do more" yang bisa kita artikan dengan sedikit menulis kode tapi dapat melakukan banyak hal.

Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki kemampuan yang lebih luas untuk menciptakan serta memanipulasi halaman web. Karena berorientasi pada objek maka jQuery lebih berkaitan dengan tampilan halaman web.

Meskipun ada banyak library lain semacamnya, namun jQuery jauh lebih populer karena kemampuannya untuk menjalankan perintah pada peramban lama. jQuery berjalan pada browser bersamaan dengan JavaScript biasa. Ia terutama dipergunakan untuk animasi dan AJAX, yang cukup sulit untuk diprogramkan dengan vanilla JavaScript, namun bisa diketik dalam beberapa baris singkat dengan jQuery.

jQuery dimasukkan dalam sebuah laman web diantara tag <script> dan tag </script>; contohnya: <script src=".../ajax/libs/jquery/1.11.1/jquery.min.j"></script>.

Contoh panggilan jQuery, kotak kecil akan disembunyikan saat diklik:

Contoh jQuery:

Klik saya maka saya akan pergi!

Penulisan kode untuk fungsi jQuery di atas adalah:

<script>
    $("#box").click(function(){$("#box").slideUp()});
</script>

Mari kita lihat contoh lainnya. Bagaimana penulisan JavaScript dan jQuery untuk melakukan sebuah manipulasi background dokumen html berikut :

Javascript

<script language="javascript">
function changeBackground(color)
{
  document.body.style.background = color;
}
onload="changeBackground('red');"
</script>

Jquery

<script>
  $('body').css('background', '#ccc');
</script>

Keduanya sama-sama memerintahkan web browser untuk menampilkan background (latar belakang) "body" berwarna merah.

jQuery itu library-nya, JavaScript bahasanya

jQuery juga memiliki banyak sekali plugin yang memperluas fungsionalitasnya melalui berbagai metode.

*http://en.wikipedia.org/wiki/Scripting_language
*http://www.w3schools.com/js/js_intro.asp