Senin, 31 Oktober 2016

jQuery: Cara memasang jQuery!

Halo kawan-kawan pintarcoding... kali ini kita akan membahas tentang jQuery... bagi pecinta web developer ini merupakan bahasa pemrograman / scripting language yang wajib untuk dipelajari. Menurut Website resmi dari jQuery, jQuery itu adalah:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.


Jadi jQuery adalah javascript library, javascript library itu berarti memuat segala macam perintah javascript yang telah disederhanakan objek-objek dan fungsi-fungsi, sehingga penulisan script menjadi lebih mudah. Seperti jargon dari jQuery itu sendiri, "Write less, do more".

Oke sekarang bagaimana cara memasang jQuery di website yang sedang kita kembangkan? ada 2 cara pada dasarnya, kita download file .js dari jQuery atau kita gunakan dari hostingan-hostingan yang menyediakan file .js dari jQuery, baik itu dari server google atau server jQuery itu sendiri.

oke sekarang kita akan coba dengan CARA PERTAMA. untuk cara ini kita meletakan file jQuery pada komputer atau server kita sendiri.
  1. download dulu file js dari jQuery, letakan pada alamat localhost dari komputer kawan-kawan sekalian, dan pastikan bahwa file yang teman-teman download merupakan file compressed karena ini akan lebih meringankan load halaman web yang teman-teman kerjakan,
  2. ketik tag html berikut untuk memasang jQuery agar berfungsi di halaman web kalian, dalam hal ini buka file index.html seperti pada gambar diatas.
  3. <script type="text/javascript" src="js/jquery-3.1.1.min.js"> </script>
  4. letakan tag html tersebut pada bagian bawah dari halaman, hal ini bertujuan jika koneksi sedang kurang baik, maka halaman web sudah tampil dulu baru script ini di download, jika tidak halaman web akan cukup berat untuk tampil kalau koneksi sedang kurang baik. sehingga script html nya menjadi seperti berikut:
  5. <html>
    <head>
        <title>jQuery Pintarcoding.com</title>
    </head>
    
    <body>
        <h1>Belajar jQuery di Pintarcoding.com</h1>
    
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"> </script>
    </body>
    </html>
    
Nah dengan demikian script jQuery sudah terpasang

Untuk CARA KEDUA menggunakan CDN dari jQuery itu sendiri (fyi aja CDN itu adalah Content Delivery Network). dengan cara ini kita tidak perlu melakukan download file javascript dari jQuery, kita juga tidak perlu meletakan file tersebut di komputer atau server kita. Melainkan kita langsung mengakses file jQuery tersebut langsung dari server resmi jQuery, berikut contoh dari file html yang menggunakan CDN dari jQuery:

<html>
<head>
    <title>jQuery Pintarcoding.com</title>
</head>

<body>
    <h1>Belajar jQuery di Pintarcoding.com</h1>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
</body>
</html>

Tapi ingat teman-teman, kalau kita sedang dalam keadaan offline, atau kita tidak selamanya berada pada lokasi yang ada koneksi internet, cara kedua ini bukanlah pilihan yang tepat, karena dengan tidak adanya koneksi internet maka file javascript dari jQuery tidak dapat diakses dan tentunya script jQuery kita tidak dapat berjalan.

Oleh pertimbangan tersebut tutorial-tutorial yang akan ditulis nanti akan menggunakan cara pertama... nah jika jQuery sudah terpasang pada file html (index.html) seperti pada gambar diatas mari kita pastikan bahwa jQuery tersebut sudah aktif dihalaman web kita. Untuk memastikan bahwa jQuery sudah berfungsi dengan baik kita akan menggunakan developer tool dari chrome atau firefox, caranya ada pada artikel berikutnya ya. "jQuery: Web Console untuk debugging"

Oke sekian dulu untuk artikel ini... Semoga bermanfaat.

Tidak ada komentar:

Posting Komentar