Tutorial Belajar jQuery Part 2: Cara Menginput File jQuery ke HTML

Posted on

Di panduan kedua dari seri belajar jQuery di Source Code Aplikasi, saya akan membahas cara menginput file jQuery ke dalam HTML.


Cara Menginput File jQuery ke HTML

Di dasarnya, jQuery hanyalah sebuah file javascript external. Agar dapat menggunakan jQuery, kita mesti unduh file jQuery, kemudian menghubungkannya menggunakan tag <script>.

Terdapat 2 cara menginput file jQuery: mengunduh dan mengakses jQuery secara lokal, atau menggunakan CDN (Content Delivery Network).


Cara Mengunduh dan Mengakses jQuery di Komputer Lokal

Untuk menggunakan jQuery secara lokal (offline), kita mesti mengunduh file jQuery, kemudian mengaksesnya lewat tag <script>.

Silahkan buka situs resmi jQuery di jquery.com. Di bagian kanan tengah, terdapat tombol “Unduh jQuery”. Klik tombol ini.

Kita akan dibawa ke halaman jquery.com/download. Di bagian ini kamu dapat melihat 2 versi dan 2 jenis file jQuery.

Di dikala panduan ini ditulis, terdapat 2 versi jQuery: jQuery 1.x dan jQuery 2.x. Apa perbedaan keduanya?

Perbedaan jQuery 1.x dengan jQuery 2.x

Perbedaan amat mendasar yakni, jQuery 2.x tak lagi mendukung Internet Explorer 6, 7 dan 8. Apabila kamu tak peduli dengan IE, silahkan unduh versi 2.x. Namun jikalau kamu akan menjalankan atau masih menggunakan IE 8, silahkan unduh versi 1.x

Sedikit catatan, IE 8 ialah versi Internet Explorer default yang terdapat di Windows 7. Dengan demikian, jikalau kamu menggunakan jQuery 2.x, pengguna yang menggunakan IE 8 tak akan dapat menjalankan kode JavaScript.

Di panduan ini saya akan menggunakan versi jQuery 2.x, atau tepatnya jQuery 2.1.4

Perbedaan versi Compressed and Uncompressed

Setelah memilih diantara versi, berikutnya kita pun mesti memilih antara versi compressed and uncompressed.

Kedua file ini sebetulnya mempunyai kode jQuery yang sama. Perbedaannya, versi compressed berukuran lebih kecil karena seluruh karakter yang tak perlu, telah di hapus (seperti spasi dan baris komentar). Hasilnya, ukuran file jQuery versi compressed menjadi lebih kecil, tapi tak dapat dibaca.

Apabila kamu ingin mempelajari kode program yang terdapat di di jQuery (atau ingin mengembangkannya), pilih versi uncompressed. Kamu dapat mengunduh sendiri kedua versi ini untuk melihat perbedaannya.

Cara mengunduh jQuery

Untuk panduan ini saya akan mengunakan jQuery versi 2.1.4 uncompressed. Silahkan klik kanan link “Unduh the uncompressed, development jQuery 2.1.4”, lalu pilih Save As. Simpanlah file jquery-2.1.4.js di tempat yang gampang diakses.

Saya telah mempersiapkan sebuah folder belajar_jquery di drive D. Dengan demikian saya akan menyimpannya di D:belajar_jquery.

Apabila kamu seketika men-klik link unduh jQuery, di beberapa web browser, tak akan muncul fitur unduh, tapi isi file jQuery-lah yang akan tampil.

Menghubungkan File jQuery dengan HTML

Untuk menghubungkan file jQuery dengan HTML, kita lumayan menambahkan tag <script> dengan tempat tinggal file jquery-2.1.4.js, seperti berikut ini:

Kode HTML diatas mesti ditempatkan di di 1 folder dengan file jquery-2.1.4.js. Apabila kamu telah mempelajari HTML dan CSS, tentu tak asing dengan maksud penempatan file ini.


Cara Menginput File jQuery menggunakan CDN

Cara lain untuk dapat menggunakan jQuery yakni mengakses file jQuery yang ditempatkan di CDN (Content Delivery Network). Secara sederhana, CDN yakni sejenis harddisk global yang dapat diakses oleh siapa saja. Terdapat banyak alternatif CDN, kali ini saya akan menggunakan Google CDN, dengan demikian kode HTMLnya menjadi seperti berikut:

D
engan menggunakan CDN, kita tak perlu repot-repot mengunduh file jQuery. Namun agar dapat berjalan, mesti selalu online (terhubung ke internet).


Di panduan kali ini kita telah mendownload file jQuery dan menghubungkannya dengan HTML. Namun kode diatas belum menjalankan apapun. Berikutnya, saya akan mengajak kamu untuk mulai menulis kode jQuery: Cara Menjalankan Kode jQuery.


Sumber https://www.duniailkom.com/