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

Dalam tutorial kedua dari seri belajar jQuery di duniailkom, saya akan membahas cara menginput file jQuery ke dalam HTML.


Cara Menginput File jQuery ke HTML

Pada dasarnya, jQuery hanyalah sebuah file javascript external. Agar bisa menggunakan jQuery, kita harus download file jQuery, kemudian menghubungkannya menggunakan tag <script>.

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


Cara Mendownload dan Mengakses jQuery di Komputer Lokal

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

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

Halaman Home jquery.com

Kita akan dibawa ke halaman jquery.com/download. Pada bagian ini anda bisa melihat 2 versi dan 2 jenis file jQuery.

Pada 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 adalah, jQuery 2.x tidak lagi mendukung Internet Explorer 6, 7 dan 8. Jika anda tidak peduli dengan IE, silahkan download versi 2.x. Namun jika anda akan menjalankan atau masih menggunakan IE 8, silahkan download versi 1.x

Sedikit catatan, IE 8 merupakan versi Internet Explorer default yang ada pada Windows 7. Dengan demikian, jika anda menggunakan jQuery 2.x, pengguna yang menggunakan IE 8 tidak akan bisa menjalankan kode JavaScript.

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

Perbedaan versi Compressed and Uncompressed

Setelah memilih salah satu versi, berikutnya kita juga harus memilih antara versi compressed and uncompressed.

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

Jika anda ingin mempelajari kode program yang ada di dalam jQuery (atau ingin mengembangkannya), pilih versi uncompressed. Anda 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 mudah diakses.

Cara Download File jquery 2.1.4

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

Folder belajar_jquery

Jika anda langsung men-klik link download jQuery, pada beberapa web browser, tidak akan muncul menu download, tapi 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 Duniailkom</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. Apabila anda sudah mempelajari HTML dan CSS, tentu tidak asing dengan maksud penempatan file ini.


Cara Menginput File jQuery menggunakan CDN

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

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

Dengan menggunakan CDN, kita tidak perlu repot-repot mendownload file jQuery. Tapi agar bisa berjalan, harus selalu online (terhubung ke internet).


Dalam tutorial kali ini kita telah mendownload file jQuery dan menghubungkannya dengan HTML. Tapi kode diatas belum melakukan apapun. Selanjutnya, saya akan mengajak anda untuk mulai menulis kode jQuery: Cara Menjalankan Kode jQuery.


Tutorial Terkait:

15 Comments

  1. sariyanto
    17 Dec 15
    • Andre
      19 Dec 15
  2. Penyimak
    19 Dec 15
  3. Apriatna23
    19 Dec 15
    • Andre
      20 Dec 15
  4. aldo
    22 Dec 15
    • Andre
      23 Dec 15
      • Madyan Eka
        26 Dec 15
        • Andre
          26 Dec 15
  5. Toto Purnoto
    24 Feb 16
    • Andre
      24 Feb 16
  6. Apin
    28 May 16
    • Andre
      29 May 16
  7. tryco
    13 Oct 16
    • Andre
      13 Oct 16

Add Comment