Cara Memasukkan File jQuery ke HTML

belajar javascript

Pada hakikatnya, jQuery cuma sebuah file javascript external. Supaya bisa memakai jQuery, kita perlu download file jQuery, kemudian menghubungkannya memakai tag <script>.

Terdapat 2 cara memasukkan file jQuery: mendownload dan mengakses jQuery secara lokal, atau memakai CDN (Content Delivery Network).

Cara Mendownload dan Mengakses jQuery di Komputer Lokal

Untuk memakai jQuery secara lokal (offline), kita perlu mendownload file jQuery, kemudian mengaksesnya melalui tag <script>.

Silahkan buka website resmi jQuery di jquery.com. Di bagian kanan tengah, terdapat tombol “Download jQuery”. Tekan tombol ini.

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

Di saat tutorial 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 paling mendasar ialah, jQuery 2.x tidak lagi mendukung Internet Explorer 6, 7 dan 8. Bila kamu tidak peduli dengan IE, silahkan download versi 2.x. Tetapi bila kamu akan menjalankan atau masih memakai IE 8, silahkan download versi 1.x

Sedikit catatan, IE 8 merupakan versi Internet Explorer default yang ada di Windows 7. Dengan begitu, bila kamu memakai jQuery 2.x, pemakai yang memakai IE 8 tidak akan dapat menjalankan kode JavaScript.

Dalam tutorial ini saya akan memakai versi jQuery 2.x, atau tepatnya jQuery 2.1.4

Perbedaan versi Compressed and Uncompressed

Sesudah memilih salah satu versi, selanjutnya kita juga perlu memilih antara versi compressed and uncompressed.

Kedua file ini sebetulnya mempunyai kode jQuery yang sama. Perbedaannya, versi compressed berukuran lebih kecil sebab semua karakter yang tidak harus, sudah di hapus (seperti spasi dan baris komentar). Hasilnya, ukuran file jQuery versi compressed jadi lebih kecil, namun tidak dapat dibaca.

Bila kamu mau mempelajari kode program yang terdapat di dalam jQuery (atau mau mengembangkannya), pilih versi uncompressed. Kamu bisa mendownload sendiri kedua versi ini untuk melihat perbedaannya.

Cara mendownload jQuery

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

Saya sudah menyiapkan sebuah folder belajar_jquery di drive D. Dengan begitu saya akan menyimpannya di D:belajar_jquery.

Bila kamu langsung men-klik link download jQuery, di beberapa web browser, tak akan muncul menu download, namun isi file jQuery-lah yang akan tampil.

Menghubungkan File jQuery dengan HTML

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar jQuery Infanthree</title>
  <script src="jquery-2.1.4.js"></script>
</head>
<body>
</body>
</html>

Kode HTML diatas harus ditempatkan di dalam 1 folder dengan file jquery-2.1.4.js. Jika kamu telah mempelajari HTML dan CSS, tentu tidak asing dengan tujuan penempatan file ini.

Cara Memasukkan File jQuery memakai CDN

Cara lain untuk dapat memakai jQuery ialah mengakses file jQuery yang ditempatkan di CDN (Content Delivery Network). Secara simpel, CDN ialah sejenis harddisk global yang dapat diakses oleh siapa saja. Terdapat banyak opsi CDN, saat ini saya akan memakai Google CDN, dengan begitu kode HTMLnya jadi semacam berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>Belajar jQuery Infanthree</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
  </script>
</head>
<body>
</body>
</html>

Dengan memakai CDN, kita tidak harus repot-repot mendownload file jQuery. Namun agar dapat berjalan, harus selalu online (terhubung ke internet).


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat