Jquery

Apa itu Jquery?

JQuery adalah sebuah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

Sebenernya, JQuery akan terasa asing kalau kita belum mengenal HTML dan JavaScript (JS). Jadi akan lebih baik kalau sebelum memulai belajar JQuery, kalian matangkan dulu konsep HTML dan Javascript (JS) sebelum memulai belajar JQuery. JQuery dikembangkan pertama kali oleh John Resig pada tahun 2005 yang terinspirasi dari kode Behavior. Saat itu, John merasa hasil dari kode Behavior tidak elegan, bahkan jelek. Maka dikembangkan JQuery, dimana penulisan kode jadi lebih simple dengan hasil yang menyenangkan. 

JQuery sendiri pertama kali rilis tanggal 14 Januari 2006. Dan sampai saat ini sudah rilis hingga versi 1.8.2 JQuery merupakan salah satu library Javascript. Kalo di PHP kita mengenal framework, maka JQuery bisa dianggap salah satu "framework" nya Javascript. Pada kenyataannya jarang sekali sebuah situs dibuat murni JQuery. Biasanya JQuery diposisikan seperti sebuah 'function' atau class untuk ditempelkan pada sebuah web atau aplikasi berbasis web, yaitu HTML atau PHP. 

Dengan semakin berkembangnya JQuery, semakin memudahkan pula untuk para web programmer membuat website yang cantik dan dinamis. Nah, kenapa JQuery banyak digunakan, salah satunya adalah JQuery mampu menampilkan animasi-animasi semisal slideshow, datepicker, autocomplete, dan masih banyak lagi tapi tanpa membuat suatu website itu terlihat berat atau memakan waktu lama untuk diload. 

Nah, sedikit informasi mengenai contoh sintaks JQuery, jika dengan javascript, kita ingin mengambil nilai suatu 

textbox dengan cara sebagai berikut:

var nilai = document.getElementById("id_teksbox").value; 

Nah, dengan Jquery kita dapat mempersingkat penulisan kode tersebut

var nilai = $("id_teksbox").val();

Lebih singkat dan mudah bukan? Tapi sebelumnya kalian harus meng-include file Jquery terlebih dahulu agar sintaks diatas berfungsi. JQuery itu punya beberapa keunggulan diantaranya pluginable, artinya JQuery bisa ditambahi berbagai plugin. Untuk belajar JQuery, paling tidak kita harus tahu DOM, javascript dan konsep Object Oriented Programming (OOP) atau pemrograman berorientasi objek.

Berikut adalah fungsi JQuery: 

1. Mengakses bagian halaman tertentu dengan mudah 

2. Mengubah tampilan bagian halaman tertentu

3. Mengubah isi dari halaman 

4. Menambah animasi tanpa harus memakai flash yang lebih berat

5. Melalukan load data/halaman tanpa merefresh seluruh halaman

6. Menyederhanakan/mempersingkat penulisan sintaks javascript biasa 

Sekarang langsung saja ke pokok materinya.

Supaya Temen" bisa langsung menggunakan jquery, Silahkan Download di link berikut ( Saat ini versi Jquery terakhir adalah v3.1.1) Klik disini!!! 

Lalu simpan file jquery-3.1.1 yang udah didownload ke folder javascript web punya kita..

Sekarang kita Langsung saja mulai praktek yang pertama...

siapkan beberapa alat dan bahan.nya.

-notepad/ notepad ++ lebih bagus

-xampp buat server

-file jquery

dahh, itu ajh alat dan bahan.nya 
untuk download xampp sama notepad ++ nya klik disini untuk notepad.nya
klik disini untuk xampp.nya 

lalu langkah berikutnya...

Silahkan siapkan folder untuk project Jquery kita.

1.Siapkan beberapa folder sperti berikut.

  - Buat folder dengan nama jq, lalu didalam folder jq buatlah folder dengan nama image.
    Perhatikan susunan folder dibawah.

    folder image digunakan untuk menyimpan file gambar.

2.Siapkan foto, lalu masukan foto tsb kedalam folder image.

   disini saya menggunakan foto saya sendiri dengan nama file a.jpg perhatikan gambar dibawah
    ini

Lalu Buatlah script seperti berikut, 

Lalu Simpan dengan nama file. pertama.html

Untuk Melihat hasilnya, Klik dua kali file pertama.html

hasil.nya akan seperti ini.

ketika kita klik tampilkan maka foto akan tampil...

ketika kita klik sembunyikan maka foto akan disembunyikan.

dan berikut adalah penjelasan fungsi fungsinya.

<script src="jquery-3.1.1.js"></script>  //Script disamping berfunsi untuk memanggil file jquery

//Sedangkan yang dibawah ini berfungsi untuk membuat class/fungsi button

<script type="text/javascript"> 
            $(document).ready(function() {
            $(".sembunyi").click(function(){
            $("#foto").hide("slow");
            });
           
            $(".tampil").click(function() {
            $("#foto").show("slow");
            });
            });
        </script>

//dan yang terakhir berfungsi sebagai tampilan/layout button dan beberapa kalimat untuk memanggil class button.

<body>
       

        <button class="sembunyi">Sembunyikan</button>
        <button class="tampil">Tampilkan</button>
        <p><img id="foto" src="image/a.jpg" /></p>
</body>

Lebih jelasnya simak video berikut...

Sekian dari saya, apa bila ada kesalahan mohon dimaafkan...

Assalamu'alaikum wr.wb...

Semoga Bermanfaat...!!! :)