Apa itu jQuery?

() translation by (you can also view the original English article)

Pembaca penggemar dari Envato Tuts+ berasal dari berbagai latar belakang dalam hal pengalaman, budaya, dan apa yang mereka cari untuk dipelajari. Ketika membicarakan teknologi, mudah untuk mengambil untuk diberikan mereka yang baru memulai, terutama jika Anda sudah melakukan semua jenis pengembangan untuk sejumlah waktu yang diperpanjang.

Yang katanya, salah satu hal yang menyenangkan tentang menjadi seorang pengembang adalah bahwa sekali Anda dapat menangani bahasa dan kemampuan tertentu, sangat mudah untuk menerjemahkannya ke area lain dari pengembangan.

Dalam upaya untuk memastikan bahwa kami memungkinkan mencapai audiens terluas, kami bertujuan untuk mempublikasikan konten yang langsung ditujukan untuk pemula yang ingin tahu tentang bahasa, platform atau aplikasi.

Dan dalam artikel ini, kita akan berfokus khusus pada jQuery. Secara khusus, kita akan melihat tingkat tinggi dari semuanya yang ditawarkan jQuery dan bagaimana dia dapat membantu kita, dan kami akan meninjau beberapa dari proyek yang juga telah datang ke hasil dari library awal.

Semua Tentang jQuery

Pertama kali dirilis pada tahun 2006 oleh John Resig, jQuery ditetapkan menjadi sebuah library JavaScript lintas-platform yang membuatnya lebih mudah untuk menulis solusi di sisi klien.

Pada saat dirilis, dia sangat berguna karena inkonsistensi yang ada di antara implementasi JavaScript di Internet Explorer, Firefox, dan Google Chrome (yang belum dirilis sampai 2008).

Sebagaimana Didefinisikan oleh Wikipedia:

jQuery adalah sebuah library JavaScript lintas-platform yang dirancang untuk menyederhanakan scripting HTML di sisi klien. jQuery adalah library JavaScript paling populer digunakan saat ini, dengan instalasi di 65% dari 10 juta teratas situs dengan lalu lintas tertinggi di Web. jQuery gratis, perangkat lunak open-source yang berlisensi di bawah Lisensi MIT.

Selain itu, situs web jQuery sendiri mengatakan:

jQuery adalah library JavaScript yang cepat, kecil, dan kaya fitur. Itu membuat hal-hal seperti traversal dan manipulasi dokumen HTML, penanganan event, animasi, dan Ajax jauh lebih sederhana dengan API yang mudah-untuk-digunakan yang bekerja di banyak browser. Dengan kombinasi fleksibilitas dan dapat diperpanjang, jQuery telah mengubah cara jutaan orang menulis JavaScript.

Tapi apa artinya ini bagi kita sebagai pengembang? Mungkin cara terbaik bagi kita untuk memahami apa semua library tawarkan adalah memeriksa apa diklaim untuk ditawarkan.

1. Traversal Dokumen HTML

Ketika browser me-render halaman web, representasi visualnya dari apa yang dikenal sebagai DOM (atau document object model). Model ini dapat secara konseptual dimodelkan sebagai struktur data pohon dimana terdapat node tertentu masing-masing dengan akar dan daun.

Sebagai contoh, lihat gambar ini yang diberikan oleh Buku Langkah Web:

An example of the DOM for a basic web page

Ketika Anda bekerja dengan jQuery, Anda dapat dengan mudah melintasi isi DOM untuk mencapai atau untuk menemukan node, elemen, atau nilai-nilai yang Anda tuju untuk diambil.

Ini berarti jika Anda sedang mencari teks dari elemen div yang mempunyai ID yang unik, sangat mudah untuk dilakukan.

/**
 * This code looks for a div with the ID of "my unique element"
 * and then removes it from view.
 */
$( 'div#my-unique-element' ).hide();

Jika Anda mencoba melakukan perulangan melalui semua elemen span, Anda dapat melakukannya juga:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * allow you to iterate through them.
 */
$( 'span' ).each(function() {
    // Process the span element here
});

Kami akan meninjau fungsi tertentu ini sedikit lebih di bagian berikutnya yang bertujuan untuk menunjukkan beberapa tambahan pekerjaan Anda dapat lakukan untuk memanipulasi halaman.

Memang, contoh-contoh ini sederhana, dan hal-hal lainnya bisa lebih rumit, terutama setelah kami memperkenalkan metode chaining. Sebagai contoh:

$excerpt.on( 'keydown', function( evt ) {

    if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) {

  	if ( -1 === $.inArray( evt.keyCode, keymap ) ) {
			keymap.push( evt.keyCode );
		}

	}

    }).on( 'keyup', function() {

	if ( user_has_pasted_content( keymap ) ) {

		resize_textarea( this );
		keymap = [];

	}

});

Pada titik ini, Anda tidak harus tahu apa yang terjadi dengan kode, tetapi ini dimaksudkan untuk menunjukkan kepada Anda bagaimana dapat bergunanya jQuery dalam situasi tertentu melalui penggunaan fungsi pembantu dan metode chaining.

Cukuplah mengatakan, kekuatan jQuery terletak pada kemampuannya untuk query DOM (demikian dengan nama jQuery) dan kemudian membuat penyesuaian untuknya melalui penggunaan API yang terdokumentasi dengan baik (yang penuh dengan contoh-contoh tentang bagaimana menggunakan fungsi masing-masing).

Seseorang dapat berargumentasi bahwa segala sesuatu yang lain berasal dari fitur itu sendiri. Jadi seperti yang dikatakan, mari kita lanjutkan untuk melihat beberapa dari apa yang terlihat itu.

2. Manipulasi Dokumen HTML

Ketika untuk benar-benar memanipulasi DOM, jQuery memiliki banyak fungsi yang memungkinkan kita untuk mengubah apa yang dilihat pengunjung kita.

Beberapa adalah fungsi sederhana, seperti memungkinkan kita untuk show atau hide elemen yang tidak terlihat setiap kali halaman load. Fungsi lain memungkinkan kita untuk membuat elemen baru dan append mereka ke elemen yang ada, atau prepend mereka di depan seluruh daftar.

Jika Anda mencoba melakukan loop melalui semua elemen span untuk menambahkan sebuah atribut untuk mereka, Anda dapat melakukannya juga:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * add a custom class attribute to them.
 */
$( 'span' ).each(function() {
    $( this ).addClass( 'my-custom-class' );
});

Ini hampir tidak menggesek permukaan dari fungsi manipulasi DOM yang tersedia dalam jQuery. Dengan melihat API, di bawah bagian Manipulation, Anda dapat melihat berapa banyak pilihan tersedia bagi kita (bersama dengan contoh-contoh yang bagus).

Untuk memberikan contoh lebih lanjut, kita juga dapat:

menentukan tinggi atau lebar dokumen, jendela, atau elemen apapun
mengambil nilai-nilai dari setiap elemen (dengan asumsi dia menawarkan kemampuan ini)
toggle nama class
dan banyak lagi

Ingat bahwa salah satu hal yang membuat jQuery menjadi solusi yang menarik untuk begitu banyak pengembang adalah bahwa semua fungsi dan contoh-contoh yang kami lihat di dalam artikel ini adalah kompatibel lintas-browser.

3. Penanganan Event

Jika Anda baru untuk JavaScript, maka satu hal kunci adalah untuk memahami cara kerjanya dengan halaman yang sedang ditampilkan dalam web browser adalah bagaimana ia menanggapi berbagai event.

Maksudnya, bila pengguna mengklik pada elemen, menekan tombol keyboard, atau klik mouse, maka browser menimbulkan sinyal sesuai dengan peristiwa yang terjadi. Ini adalah apa yang memungkinkan kita untuk mengambil keuntungan dari interaksi pengguna dengan browser.

Khususnya, setiap kali pengguna melakukan sesuatu ke halaman, kita dapat merespon menggunakan event kustom. Masalahnya adalah bahwa tidak setiap browser mengimplementasikan event dengan cara yang sama (inilah mengapa ada kebutuhan untuk spesifikasi, tapi itu adalah konten untuk posting lain).

Untungnya, jQuery membuat ini lebih mudah dengan mendefinisikan nama yang konsisten untuk semua event yang sedemikian rupa sehingga kita dapat menggunakan nama yang sama untuk event yang kita coba untuk merespon dan akan bekerja di semua browser utama.

4. Animasi

Ketika jQuery pertama keluar, Flash masih relatif populer, dan animasi yang umum di seluruh web tidak benar-benar mati.

Ketika kita berbicara tentang animasi dalam konteks jQuery, meskipun, kita tidak berbicara tentang efek atau perilaku sejenis yang kita terbiasa melihatnya dengan teknologi yang lebih tua. Sebaliknya, kita berbicara tentang efek yang memberikan pengguna umpan-balik bahwa sesuatu telah terjadi pada layar. Selain itu, itu kurang invasif dan dapat menambah rasa yang baik dari gaya ke halaman atau aplikasi apabila digunakan dengan benar (meskipun, apa pun dapat disalahgunakan).

Anda dapat melihat seluruh efek API pada halaman ini, tapi yang perlu dicatat bahwa efek jQuery dapat berkisar dari penanganan fading in dan fading out sederhana dari elemen atau elemen slide menjadi tampilan untuk sesuatu yang lebih kompleks seperti memanipulasi antrian efek yang terdaftar untuk dijalankan terhadap elemen.

Memang, kasus terakhir ini menganggap Anda memiliki sedikit pengalaman dengan API efek, tapi itu adalah sesuatu yang datang secara alami diberikan cukup waktu dengan library dan dokumentasi.

5. Ajax

Jika Anda tidak akrab dengan Ajax, itu pada dasarnya adalah cara halaman web membuat panggilan ke server, menangani respon dan memperbarui bagian dari sebuah halaman tanpa harus me-refresh seluruh halaman. Meskipun teknologi telah berkisar selama beberapa waktu saat ini, ini masih sesuatu yang benar-benar keren dan dapat memberikan beberapa fungsionalitas yang benar-benar rapi dalam konteks halaman atau aplikasi web ketika digunakan secara tepat dan efektif.

Meskipun dukungan untuk Ajax tidak seburuk seperti lima atau sepuluh tahun yang lalu, implementasi untuk API di browser dapat menjadi sedikit berbeda. Ini berarti bahwa kita sedang bertugas menulis kode Ajax khusus untuk browser yang disediakan Microsoft, yang Google sediakan, yang Apple sediakan, yang Chrome sediakan, dan sebagainya.

Setidaknya, itulah kasusnya jika tanpa jQuery. Berkat dukungan untuk Ajax, kita dapat memanfaatkan Ajax dalam sejumlah cara yang berbeda tanpa harus masuk ke inkonsistensi lintas-browser. Pada kenyataannya, sangat mudah untuk menangani permintaan GET dan POST sementara masih memiliki kemampuan untuk membuat panggilan yang jauh lebih maju menggunakan metode $.ajax.

Setelah Anda terbiasa untuk memiliki API yang tersedia dalam inti aplikasi Anda atau yang Anda inginkan, sulit membayangkan tidak bekerja dengannya (atau dengan sesuatu seperti itu).

Sepatah Kata Tentang Kemungkinan untuk Diperpanjang

Salah satu fitur yang banyak kerangka server-side dan library tawarkan adalah kemampuan untuk menciptakan ekstensi untuk basis kode inti. Library client-side dan kerangka modern memungkinkan ini, dan jQuery juga.

Katakanlah, misalnya, Anda bekerja dalam niche tertentu di mana Anda sedang menciptakan fungsi yang sama untuk setiap proyek. Atau misalnya Anda memiliki produk yang Anda Jual dan Anda memiliki sedikit kode kustom yang mengintegrasikan dengan jQuery, tapi mungkin membutuhkan parameter yang berbeda tergantung pada proyek.

Maka apa yang Anda lakukan kemudian?

Untungnya, jQuery mendukung plugin. Ini berarti bahwa kita, sebagai pengembang, tidak hanya memiliki kemampuan untuk memasuki plugin yang telah ditulis orang lain (beberapa di antaranya tersedia di website jQuery, yang lain-lainnya tersedia pada GitHub), tapi kita juga bisa mengembangkan plugin kita sendiri.

Kita kemudian dapat menggunakan kembali kode ini dalam proyek-proyek kita sendiri, atau membuat mereka tersedia pada situs seperti GitHub untuk orang lain untuk menawarkan kontribusi, perbaikan, fitur, dan sebagainya.

Proyek-proyek Tambahan jQuery

Sejak awal, jQuery telah berkembang menjadi lebih dari sekedar sebuah library JavaScript yang menawarkan kita kemampuan untuk melakukan operasi sederhana dan kuat di jalan kompatibel lintas-platform.

Selain library inti, jQuery telah juga menghasilkan dua proyek penting lain yang layak disebutkan sebelum kami merangkum artikel ini. Meskipun kita tidak akan melihat rincian dari apa yang setiap proyek berikan, kami akan mengambil tampilan tingkat tinggi dari setiap proyek, jika tidak ada alasan lain daripada menyadari apa saja tersedia untuk kita yang seharusnya kita membutuhkan ini untuk pekerjaan di masa depan.

jQuery UI

Dari halaman situs jQuery UI:

jQuery UI adalah kumpulan seperangkat interaksi antarmuka pengguna, efek, widget, dan tema-tema yang dibangun di atas Library JavaScript jQuery. Apakah Anda sedang membangun aplikasi web yang sangat interaktif atau Anda hanya perlu menambahkan pemetik tanggal ke kontrol form, jQuery UI adalah pilihan yang sempurna.

Library ini pertama kali diterbitkan pada tahun 2007, sekitar setahun setelah jQuery itu sendiri. Ia bekerja sebagai library pelengkap jQuery yang mempengaruhi kompatibilitas lintas-platform dari library untuk membantu menciptakan widget yang dapat digunakan di seluruh situs web.

Banyak widget termasuk potongan-potongan yang umum digunakan dari fungsionalitas. Sebagai contoh:

Ada juga fitur-fitur canggih seperti efek, utilitas dan interaksi. Segala sesuatu yang kita telah dibahas sejauh ini (serta hal-hal yang belum) termasuk berbagai callback, atribut, dan fungsi yang memungkinkan kita untuk berinteraksi dengan mereka sepenuhnya.

Semua fitur tersebut juga menawarkan berbagai tema untuk memastikan mereka cocok dengan tampilan dan nuansa situs web Anda. Akhirnya, Semua fitur yang diuraikan di sini dan dimasukkan di situs telah didokumentasikan dengan baik.

jQuery Mobile

Dari halaman situs jQuery Mobile:

jQuery Mobile adalah sistem antarmuka pengguna berbasis HTML5 yang dirancang untuk membuat situs web responsif dan aplikasi yang dapat diakses di semua perangkat smartphone, tablet dan desktop.

Library ini adalah pengenalan terbaru ke dalam keluarga library yang dirilis pada tahun 2010 (dengan rilis stabil terakhir pada tahun 2014).

Banyak seperti UI mitranya, ia menawarkan API yang terdokumentasi dengan baik dan tema kustom yang ideal untuk berbagai perangkat yang ditargetkan proyek Anda.

Sedangkan dua library sebelumnya menawarkan serangkaian fitur lintas-platform yang memungkinkan kita untuk menulis jQuery dan menyertai widget secara relatif mudah, jQuery Mobile mencakup kerangka CSS yang memungkinkan kita untuk juga mendesain antarmuka pengguna yang ideal untuk sifat proyek kita masing-masing.

Kerangka tersebut mencakup:

Dari sana, library ini menawarkan apa yang Anda harapkan dari sebuah proyek yang diarahkan membuat pengembangan web jauh lebih mudah untuk berbagai perangkat mobile. Ini termasuk hal-hal seperti:

set ikon yang konsisten
event yang bekerja pada sejumlah perangkat
properti untuk halaman aktif
beberapa widget yang ideal untuk antarmuka mobile

Akhirnya, jumlah browser yang masih tersedia dan digunakan di alam liar tinggi. Meskipun kami telah melihat penurunan penggunaan versi Internet Explorer dan adopsi Chrome yang lebih luas, kita masih memiliki pengguna masih menggunakan browser yang lebih tua untuk sejumlah alasan.

Kadang-kadang, pengguna tersebut pada browser lama karena sifat intranet perusahaan mereka. Kadang-kadang itu ada hubungannya dengan perangkat mobile dan/atau ponsel yang telah ditetapkan untuk pekerjaan mereka. Dan kadang-kadang hanya berhubungan dengan ketidakmampuan untuk meng-upgrade ke sesuatu yang lebih baik.

Meskipun, tidak penting. jQuery Mobile menawarkan dukungan untuk sebagian browser dan sistem operasi yang tersedia saat ini. Jika Anda tidak yakin jika platform yang Anda targetkan didukung oleh library, Anda selalu dapat memeriksa halaman dukungan browser.

Sumber Daya Tambahan

Kesimpulan

Memahami apa itu jQuery (dan apa yang bukan) dan bagaimana hal itu berkaitan dengan JavaScript adalah penting sehingga Anda tahu apa yang sedang dilakukan untuk Anda dan apa yang dapat Anda lakukan ketika perlu untuk bekerja dengan library.

Seperti dijelaskan sebelumnya, beberapa mungkin berpendapat bahwa Anda perlu untuk belajar JavaScript pertama kali dan kemudian belajar jQuery; orang lain mungkin berpendapat bahwa belajar jQuery adalah cara yang bagus untuk bekerja dengan cara Anda mundur untuk JavaScript.

Apapun masalahnya, jQuery adalah library yang sudah berjalan lama dalam perekonomian JavaScript dan adalah salah satu yang digunakan dalam sejumlah proyek sangat populer (seperti WordPress) jadi mempelajarinya akan memberi Anda bantuan dalam sejumlah cara yang berbeda.

JavaScript telah menjadi salah satu bahasa de-facto untuk bekerja di web. Ini bukannya tanpa kurva belajarnya, dan ada banyak kerangka kerja dan library untuk membuat Anda sibuk, juga. Jika Anda sedang mencari sumber daya tambahan untuk belajar atau menggunakannya dalam pekerjaan Anda, periksa apa yang kita miliki tersedia di Envato Marketplace.

Jika itu tidak cukup, ada banyak dokumentasi dan kode open-source tersedia bagi Anda untuk meninjau dan membaca, juga. Ada juga plugin yang tersedia secara luas dan sebuah blog aktif untuk membuat Anda tetap dalam lingkaran dengan semua berita yang terjadi dengan pengembangan library.

Bagi mereka yang tertarik dengan JavaScript (terutama dalam konteks WordPress), silakan untuk mengikuti saya di blog saya dan/atau Twitter di @tommcfarlin. Anda dapat melihat semua kursus dan tutorial saya di halaman profil saya, juga.

Jangan ragu untuk meninggalkan pertanyaan atau komentar di bawah ini, dan saya akan berusaha untuk menanggapinya masing-masing.