Perbedaan JavaScript dan jQuery Beserta Contoh
Artikel-artikel dalam blog ini sering menampilkan baris-baris code dalam kategori JavaScript dan jQuery. Apa sih JavaScript dan jQuery itu? Berikut ini saya akan berbagi tentang apa Perbedaan JavaScript dan jQuery tersebut.

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
[right-post]

Perbedaan JavaScript dan jQuery Beserta Contoh

Newer Post
This is the last post.

Post a Comment

Author Name

{picture#https://1.bp.blogspot.com/-pjcoLknql7Y/Vw9GwQNYh1I/AAAAAAAABF0/JOblfQgOWp0i8DbA8x2_Yl7STIu6RmGPgCKgB/s1600/Turiswan.png} " Jangan berharap sesuatu yang besar dengan tiba-tiba, mulailah dari yang terkecil dan gapailah semua harapan dengan sungguh-sungguh disertai kerjakeras dan do'a. " {facebook#http://www.facebook.com/turiswan22gtr} {twitter#http://twitter.com/turiswan2298} {google#https://plus.google.com/u/0/106442727760269580008/posts} {pinterest#http://www.pinterest.com/turiswan} {youtube#http://www.youtube.com/channel/UCJL-dLtQyZ_uQx7B3-vThjA?sub_confirmation=1} {instagram#http://instagram.com/turiswan2298}

Sevida Premium Responsive Magazine Blogger Template

Sevida Premium Responsive Magazine Blogger Template Sevida is the premium responsive blog and magazine template for Blogger fans. This template shows you how cool and flexible Blogspot magazine template can be.

Maxxiz - Responsive Magazine/News Blogger Template

Maxxiz - Responsive Magazine/News Blogger Template Maxxiz a blogger theme with responsive layout. Its High User Friendly Blogger Template. Its design simple and clean and perfect for magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Adamz Premium Responsive Blogger Template

Adamz Premium Responsive Blogger Template Adamz a blogger theme with responsive layout. This theme has a design that is perfect for magazine websites. With an attractive color combination and impressed professionals and has many features.

Ijonkz - Responsive Magazine/News Blogger Template

Ijonkz - Responsive Magazine/News Blogger Template Ijonkz a blogger theme with responsive layout and two style Boxed or Full width. Its High User Friendly Blogger Template. Its design simple and clean and perfect for News, Magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Rifqiy - Responsive Magazine/News Blogger Template

Rifqiy - Responsive Magazine/News Blogger Template Rifqiy a blogger theme with responsive layout. This theme has a design that is perfect for magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Syahira Premium Responsive Blogger Template

Syahira Premium Responsive Blogger Template Syahira a blogger theme with responsive layout. Its High User Friendly Blogger Template. Its design simple and clean and perfect for magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Contact Form

Name

Email *

Message *

Powered by Blogger.