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...

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, disertakan juga contohnya.

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

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.

[1]http://en.wikipedia.org/wiki/Scripting_language
[2]http://www.w3schools.com/js/js_intro.asp

COMMENTS

BLOGGER: 17
  1. Wow keren bangat kalo bisa kuasai javascript dan jquery. artikel ini sangat membantu saya mengenal istilah tersebut dan yang paling keren sudah ada contohnya langsung. thanks admin berbagi infonya. salam kenal dari saya

    ReplyDelete
  2. berarti jquery bagian dari javascript toh...

    ReplyDelete
  3. thanks buat penjelasannya....hehe

    ReplyDelete
  4. makasih atas penjelasannya, bermanfaat.

    ReplyDelete
  5. :D biasanya ditaro di dalem 1 file bersama dengan file php atau dibikin file baru?

    ReplyDelete
  6. Sangat bermanfaat sekali infonya gan.

    bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html

    ReplyDelete
  7. terimakasih infonya gan...mantapsss

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Komentar ini telah dihapus oleh pengarang yang coepoeh.

    ReplyDelete
  10. makasih ilmunya, ini membantu saya dalam belajar java script.

    My blog

    ReplyDelete
  11. Saya dulu sangat panasaran javascript vs jquerry dan javascript vs vanilla script

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Perbedaan JavaScript dan jQuery Beserta Contoh
Perbedaan JavaScript dan jQuery Beserta Contoh
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMuP2KvBPnPTaAXFhZEnX9fck4-HWAZmsDPLtMFtFwS3PPMkevShdBdQhUn3FI4kGR-u2rxJr_6YSDlWN0cch-dZTeoAsQ8hGaIxpFomiMbuev0_JM705H7msvvxkyoTcZ8SBCFKfvmzw/s1600/Javascript-vs-jquery+%25281%2529.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMuP2KvBPnPTaAXFhZEnX9fck4-HWAZmsDPLtMFtFwS3PPMkevShdBdQhUn3FI4kGR-u2rxJr_6YSDlWN0cch-dZTeoAsQ8hGaIxpFomiMbuev0_JM705H7msvvxkyoTcZ8SBCFKfvmzw/s72-c/Javascript-vs-jquery+%25281%2529.jpg
Jelas in Blog
https://jelasinblog.blogspot.com/2014/12/perbedaan-javascript-dan-jquery-beserta.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/12/perbedaan-javascript-dan-jquery-beserta.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content