Kami telah mengenal JavaScript dan JQuery selama beberapa tahun. JavaScript ditemukan lebih awal dari jQuery. Keduanya kuat dan digunakan dalam pengembangan web dan digunakan untuk tujuan yang sama yaitu untuk membuat halaman web interaktif dan dinamis. Dengan kata lain, mereka menghidupkan halaman web. Orang mungkin bertanya-tanya jika mereka digunakan untuk tujuan yang sama lalu mengapa dua konsep ini terpisah? Dalam artikel JavaScript vs jQuery ini, kita akan mencari tahu mana yang lebih baik dari yang lain dalam urutan berikut:
- JavaScript: Bahasa yang kuat dalam pengembangan web
- JQuery: Perpustakaan yang dikembangkan dari JavaScript
- Mengapa JQuery dibuat dan apa kemampuan khusus JQuery
- Perbedaan antara JavaScript dan JQuery dengan contoh
JavaScript: Bahasa yang kuat dalam pengembangan web
JavaScript adalah bahasa skrip yang digunakan untuk menambahkan interaktivitas ke halaman web kita. Ini adalah salah satu dari tiga teknologi inti selain HTML dan CSS yang digunakan untuk membuat halaman web. Sementara HTML dan CSS menentukan struktur halaman web dan tampilan / gaya halaman web, JavaScript digunakan untuk membuat halaman web dinamis dengan menambahkan interaktivitas padanya yang berarti dengan JavaScript kita dapat menambahkan beberapa kode untuk klik mouse, mouse over dan lainnya acara di halaman web dan banyak lagi.
JavaScript didukung oleh semua browser web dan browser web memiliki mesin JavaScript built-in untuk mengidentifikasi kode JavaScript dan bekerja dengannya. Jadi, JavaScript pada dasarnya adalah bahasa sisi klien. Ini adalah salah satu bahasa yang dapat digunakan sebagai bahasa prosedural serta bahasa berorientasi objek berbasis prototipe. Saat kami menggunakan JavaScript utama, kami bekerja dengan bahasa prosedural sedangkan JavaScript tingkat lanjut menggunakan konsep berorientasi objek.
Mari kita lanjutkan dengan JavaScript vs jQuery dan pahami pustaka yang dikembangkan dari JavaScript.
jQuery: Perpustakaan yang dikembangkan dari JavaScript
Selama bertahun-tahun JavaScript telah menjadi bahasa yang ampuh untuk pengembangan web. Ada banyak perpustakaan dan kerangka kerja yang dibangun di atas JavaScript. Pustaka dan kerangka kerja ini dikembangkan untuk memperluas kemampuan JavaScript, melakukan banyak hal dengannya dan juga untuk mempermudah pekerjaan pengembang.
jQuery adalah salah satu pustaka JavaScript yang dibangun darinya. Ini adalah pustaka JavaScript paling populer yang ditemukan oleh John Resign dan dirilis pada Januari 2006 di BarCamp NYC. jQuery gratis, perpustakaan sumber terbuka, berlisensi di bawah Lisensi MIT. Ini memiliki fitur kompatibilitas lintas-browser yang kuat. Itu dapat dengan mudah menangani masalah lintas-browser yang dapat kita hadapi dengan JavaScript. Jadi banyak pengembang menggunakan jQuery untuk menghindari masalah kompatibilitas lintas browser.
Sekarang mari kita lanjutkan dengan blog JavaScript vs jQuery dan lihat mengapa jQuery dibuat.
Mengapa jQuery dibuat dan apa kemampuan khusus jQuery?
Di JavaScript, kita harus menulis banyak kode untuk operasi dasar sementara dengan jQuery, operasi yang sama dapat dilakukan dengan satu baris kode. Oleh karena itu, pengembang merasa lebih mudah untuk bekerja dengan jQuery daripada dengan JavaScript.
- Meskipun JavaScript adalah bahasa dasar tempat jQuery berevolusi, jQuery membuat penanganan acara, manipulasi DOM, panggilan Ajax jauh lebih mudah daripada JavaScript. jQuery juga memungkinkan kita menambahkan efek animasi pada halaman web kita yang membutuhkan banyak rasa sakit dan baris kode dengan JavaScript.
- jQuery memiliki plugin bawaan untuk melakukan operasi pada halaman web. Kami hanya perlu memasukkan atau mengimpor plugin di halaman web kami untuk menggunakannya. Dengan demikian plugin memungkinkan kita membuat abstraksi animasi dan interaksi atau efek.
- Kami juga dapat membuat plugin khusus kami dengan jQuery. Jika kita membutuhkan animasi untuk dilakukan pada halaman web dengan cara tertentu, kita dapat mengembangkan plugin sesuai dengan kebutuhan dan menggunakannya di halaman web kita.
- jQuery juga memiliki pustaka widget UI tingkat tinggi. Pustaka widget ini memiliki berbagai macam plugin yang dapat kita impor di halaman web kita dan menggunakannya untuk membuat halaman web yang ramah pengguna.
Mari kita pahami perbedaannya.
JavaScript vs jQuery
| fitur | JavaScript | jQuery |
| Adanya | JavaScript adalah bahasa independen dan dapat berdiri sendiri. | jQuery adalah pustaka JavaScript. Itu tidak akan ditemukan seandainya JavaScript tidak ada di sana. jQuery masih bergantung pada JavaScript karena harus dikonversi ke JavaScript agar mesin JavaScript yang ada di browser dapat menafsirkan dan menjalankannya. |
| Bahasa | Ini adalah bahasa skrip sisi klien yang ditafsirkan tingkat tinggi. Ini adalah kombinasi dari skrip ECMA dan DOM (Model Objek Dokumen) | Ini adalah pustaka JavaScript yang ringan. Ini hanya DOM |
| Pengodean | JavaScript menggunakan lebih banyak baris kode karena kita harus menulis kode kita sendiri | jQuery menggunakan lebih sedikit baris kode daripada JavaScript untuk fungsionalitas yang sama seperti kode yang sudah ditulis di perpustakaannya, kita hanya perlu mengimpor perpustakaan dan menggunakan fungsi / metode perpustakaan yang relevan dalam kode kita. |
| Pemakaian | Kode JavaScript ditulis di dalam tag script di halaman HTML | Kita perlu mengimpor jQuery dari CDN atau dari lokasi tempat perpustakaan jQuery diunduh untuk menggunakannya. Kode jQuery juga ditulis di dalam tag script pada halaman HTML. |
| Animasi | Kita bisa membuat animasi dalam JavaScript dengan banyak baris kode. Animasi terutama dilakukan dengan memanipulasi gaya halaman Html. | Di jQuery, kita dapat menambahkan efek animasi dengan mudah dengan lebih sedikit baris kode. |
| Ramah pengguna | JavaScript bisa jadi merepotkan bagi pengembang karena membutuhkan beberapa baris kode untuk mencapai suatu fungsionalitas | jQuery lebih ramah pengguna daripada JavaScript dengan beberapa baris kode |
| Kompatibilitas lintas browser | Di JavaScript, kami mungkin harus berurusan dengan kompatibilitas lintas-browser dengan menulis kode tambahan atau solusi. | jQuery kompatibel lintas-browser. Kami tidak perlu khawatir tentang menulis solusi atau kode tambahan apa pun untuk membuat kode kami kompatibel dengan browser. |
| Performa | JavaScript murni bisa lebih cepat untuk pemilihan / manipulasi DOM daripada jQuery karena JavaScript diproses langsung oleh browser. | jQuery harus diubah menjadi JavaScript agar dapat berjalan di browser. |
| Penanganan peristiwa, Interaktivitas, dan panggilan Ajax | Semua ini dapat dilakukan dalam JavaScript tetapi kita mungkin harus menulis banyak baris kode. | Semua ini dapat dilakukan dengan mudah dengan jQuery dengan lebih sedikit baris kode. Lebih mudah di jQuery untuk menambahkan interaktivitas, animasi, dan juga membuat panggilan ajax karena fungsinya sudah ditentukan sebelumnya di perpustakaan. Kami hanya menggunakan fungsi tersebut dalam kode kami di tempat yang diperlukan. |
| Verbositas | JavaScript adalah verbose karena seseorang harus menulis banyak baris kode untuk suatu fungsionalitas | jQuery ringkas dan menggunakan lebih sedikit baris kode, terkadang hanya satu baris kode. |
| Ukuran dan Berat | Menjadi bahasa, ini lebih berat dari jQuery | Menjadi perpustakaan, itu ringan. Ini memiliki versi kodenya yang diperkecil yang membuatnya ringan. |
| Dapat digunakan kembali dan dipelihara | Kode JavaScript bisa bertele-tele dan oleh karena itu bisa sulit untuk dipertahankan dan digunakan kembali. | Dengan lebih sedikit baris kode, jQuery lebih mudah dirawat karena kita hanya perlu memanggil fungsi yang telah ditentukan di pustaka jQuery dalam kode kita. Ini juga membuat kita dengan mudah menggunakan kembali fungsi jQuery di berbagai tempat dalam kode. |
Pindah dengan perbedaan antara JavaScript dan jQuery dengan Contoh.
JavaScript vs jQuery dengan contoh
Mari kita lihat contohnya.
Menambahkan JavaScript dan jQuery di dokumen HTML kita
JavaScript ditambahkan langsung di dokumen HTML di dalam tag atau file JavaScript eksternal dapat ditambahkan di dokumen HTML menggunakan atribut src.
Ditulis langsung di dalam tag skrip:
alert ('Kotak peringatan ini dipanggil dengan event onload')Untuk menggunakan jQuery, kami mengunduh file dari situs webnya dan merujuk jalur file jQuery yang diunduh di atribut src dari tag SCRIPT atau kami bisa mendapatkannya langsung dari CDN (Jaringan pengiriman konten).
Menggunakan CDN :
Mari kita pahami Penjelajahan dan Manipulasi DOM
Traversal dan Manipulasi DOM
Dalam JavaScript:
Kita bisa memilih elemen DOM dalam JavaScript menggunakan metode document.getElementById () atau dengan menggunakan metode document.querySelector ().
var mydiv = document.querySelector (“# div1”)
atau
document.getElementById (“# div1”)
Di jQuery:
Di sini, kita hanya perlu menggunakan simbol $ dengan selektor dalam tanda kurung.
$ (selector) $ ('# div1') - Selektornya adalah id 'div1' $ ('. div1') - Selektornya adalah kelas 'div1' $ ('p') - Selektor adalah paragraf di Halaman htmlDalam pernyataan di atas, $ adalah tanda yang digunakan untuk mengakses jQuery, selektornya adalah elemen HTML.
Menambahkan gaya di JavaScript:
document.getElementById ('myDiv'). style.backgroundColor = '# FFF'Menambahkan gaya di jQuery:
$ ('# myDiv'). css ('background-color', '# FFF')Pemilih #myDiv mengacu pada pengenal 'myDiv'
Pemilihan dan manipulasi elemen DOM jauh lebih ringkas di jQuery daripada di JavaScript.
Pindah dengan penanganan acara.
Penanganan Acara
Di JavaScript, kami memilih elemen HTML:
document.getElementById ('# button1'). addEventListener ('click ”, myCallback) function myCallback () {console (“ di dalam fungsi myCallback ”)}Di sini metode getElementById () digunakan untuk memilih elemen berdasarkan id-nya, lalu kita menggunakan metode addEventListener () untuk menambahkan pendengar Peristiwa ke acara tersebut. Dalam contoh ini, kami menambahkan fungsi myCallback sebagai pendengar ke acara 'click'.
java apa itu sebuah instance
Kami juga dapat menggunakan fungsi anonim dalam contoh di atas:
document.getElementById ('# button1'). addEventListener ('click ”, function () {console.log (“ inside the function ”)})EventListener bisa dihapus dengan menggunakan metode removeEventListener ()
document.getElementById ('# button1'). removeEventListener ('click', myCallback)
Di jQuery
jQuery memiliki acara yang telah ditentukan untuk hampir semua tindakan DOM. Kita dapat menggunakan acara jQuery tertentu untuk suatu tindakan.
$ ('P'). Click (function () {// click action})Contoh lainnya adalah:
$ (“# Button1”). Dblclick (function () {// action untuk event double click pada elemen html dengan id ‘button1’}Metode JQuery 'on' digunakan untuk menambahkan satu atau lebih kejadian ke elemen DOM.
$ ('# Button1'). On ('click', function () {// action here})Kita dapat menambahkan beberapa event dan beberapa event handler dengan metode on.
$ (“Button1”). On ({click: function () {// action here}, dblclick: function () {// action here}})Dua atau lebih acara dapat memiliki penangan yang sama seperti di bawah ini:
$ (“# Button1”). On (“click dblclick”, function () {// action here})Jadi kita melihat bahwa dengan kode yang lebih kecil dan ringkas, penanganan event lebih mudah di jQuery daripada di JavaScript.
Pindah dengan Panggilan Ajax.
Panggilan Ajax
Dalam JavaScript
JavaScript menggunakan objek XMLHttpRequest untuk mengirim permintaan Ajax ke server. XMLHttpRequest memiliki beberapa metode untuk melakukan panggilan Ajax. Dua metode umum adalah open (method, URL, async, user, PSW), send () dan send (string).
Mari buat XMLHttpRequest dulu:
var xhttp = new XMLHttpRequest () Kemudian gunakan objek ini untuk memanggil metode terbuka: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()Metode terbuka membuat permintaan get ke server / lokasi, true menentukan bahwa permintaan itu asynchronous. Jika nilainya salah, itu berarti permintaan tersebut sinkron.
Membuat permintaan posting:
var xhttp = new XMLHttpRequest () Kemudian gunakan objek ini untuk memanggil metode terbuka dan membuat permintaan posting: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()Untuk memposting data dengan permintaan, kami menggunakan metode setRequestHeader xhttp untuk menentukan jenis data yang akan dikirim dan metode kirim mengirimkan data dalam pasangan kunci / nilai:
xhttp.setRequestHeader ('Jenis konten', 'aplikasi / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')Di jQuery
jQuery memiliki beberapa metode bawaan untuk melakukan panggilan Ajax. Dengan metode ini, kami dapat memanggil data apa pun dari server dan memperbarui sebagian halaman web dengan data tersebut. Metode jQuery membuat panggilan Ajax mudah.
Metode jQuery load (): Metode ini mengambil data dari URL dan memuat data ke pemilih HTML.
$ ('P'). Load (URL, data, callback)
URL adalah lokasi yang dipanggil untuk data, parameter data opsional adalah data (pasangan kunci / nilai) yang ingin kita kirim bersama dengan panggilan dan parameter opsional 'callback' adalah metode yang ingin kita jalankan setelah pemuatan selesai.
Metode jQuery $ .get () dan $ .post (): Metode ini mengambil data dari URL dan memuat data ke pemilih HTML.
$ .get (URL, panggilan balik)
URL adalah lokasi yang dipanggil untuk data dan callback adalah metode yang ingin kita jalankan setelah pemuatan selesai.
$ .post (URL, data, callback)
URL adalah lokasi yang dipanggil untuk data, datanya adalah pasangan kunci / nilai yang ingin kita kirim dengan panggilan dan callback adalah metode yang ingin kita jalankan setelah pemuatan selesai. Di sini parameter data dan panggilan balik bersifat opsional.
Panggilan jQuery Ajax lebih ringkas daripada JavaScript. Di JavaScript, kami menggunakan objek XMLHTTPRequest, di jQuery kami tidak harus menggunakan objek seperti itu.
Pindah dengan Animasi.
Animasi
Dalam JavaScript
JavaScript tidak memiliki fungsi animasi khusus seperti fungsi jQuery animate (). Dalam efek animasi JavaScript terutama dicapai dengan memanipulasi gaya elemen atau dengan menggunakan transformasi CSS, menerjemahkan atau menganimasikan properti. JavaScript juga menggunakan metode setInterval (), clearInterval (), setTimeout () dan clearTimeout () untuk efek animasi.
setInterval (myAnimation, 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20 derajat) '}Animasi dalam JavaScript terutama tentang memanipulasi properti CSS.
Di jQuery
jQuery memiliki banyak metode bawaan untuk menambahkan animasi atau efek pada elemen HTML. Mari kita periksa beberapa di antaranya.
Metode animate (): Metode ini digunakan untuk menambahkan animasi pada elemen.
$ ('# button1'). click (function () {$ ('# div1') .animate ({height: '300px'})})Metode show (): Metode ini digunakan untuk membuat elemen terlihat dari keadaan tersembunyi.
$ ('# button1'). klik (function () {$ ('# div1'). show ()})Metode hide (): Metode ini digunakan untuk menyembunyikan elemen dari keadaan terlihat.
$ ('# button1'). klik (function () {$ ('# div1'). hide ()})jQuery memiliki metode sendiri untuk menghasilkan animasi dan efek di halaman web.
Singkatnya, JavaScript adalah bahasa untuk pengembangan web, jQuery adalah pustaka yang berasal dari JavaScript. JavaScript dan jQuery memiliki kepentingannya sendiri dalam pengembangan web.
Sekarang setelah Anda mengetahui tentang JavaScript Loops, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'JavaScript vs jQuery' dan kami akan menghubungi Anda kembali.