Blogroll

Sunday, October 14, 2012

Pengenalan Jquery

JQuery  adalah sebuah library yang ditulis dengan kode - kode JavaScript. Library ini memungkinkan untuk membuat kode menjadi lebih simple dan efisien. Jika JavaScript biasa membutuhkan baris - baris kode yang banyak untuk membuat tampilan visual di browser, JQuery menawarkan kode yang lebih ringkas namun powerfull.Untuk menggunakan Jquery, yang pertama harus dilakukan adalah mendownload script nya di www.jquery.com atau menyertakan lokasi scriptnya via url http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js lalu sertakan di tag di halaman .html Anda seperti contoh berikut : 



Salah satu contoh sederhana yang akan saya lakukan disini adalah mengubah tampilan web sederhana dengan menggunakan JQuery.
Pertama, buka editor kesukaan Anda, lalu ketikkan kode dibawah dan simpan dengan ekstensi .html. Agar lebih mudah simpan dalam sebuah folder dengan file scripting jquery yang telah Anda download sebelumnya.

index.html :



<html>
    <head>
        <title>Event</title>
        <link rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="control">
            <h3>CONTROLLER HALAMAN</h3>
            <ul>
                <li><button id="changeBG" >Change BG</button></li>
                <li><button id="changeFC" >Change Font Color</button></li>
                <li><button id="changeFS" >Change Font Size</button></li>
            </ul>
        </div>   
        <div id="content">
            <h1>Title 1</h1>
            <p>Lorem ipsum dolor sit amet, rheni sedes collocavit at eius ad nomine Stranguillio eam sed haec puella mihi. Zurziaca in fuerat eum istam provoces Athenagora eius in modo cavendum es est Apollonius non dum. Pentapolim </p>
            <ul>
                <li><a href="#">Cara patrem</a></li>
                <li><a href="#">Suave canere</a></li>
                <li><a href="#">Iussit sed</a></li>
            </ul>
        </div>
    </body>
</html>


Langkah kedua adalah yaitu membuat file style.css. Ketikkan kode di spoiler berikut lalu simpan d`lam folder yang sama dengan file index.html.

style.css :



#control {
    background: pink;
    border : 1px solid white;
    width : 400px;
    float : left;
    margin-bottom : 30px;
}

#control h3 {
    color : red;
}

#control li {
    list-style : none;
    float : left;
}

#content {
    clear : both;
    width : 960px;
    margin: auto;
    background: brown;
    border : 2px solid black;
    font-family : sans-serif;
    font-size : 1em;
    color : yellow;
}

Yang terakhir, buat sebuah file dengan nama script.js. File ini berisi fungsi untuk melakukan 'sesuatu' pada halaman web index.html. Ketik kode dibawah lalu simpan dalam satu folder dengan style.css dan index.html.

script.js :



$(document).ready(function()
{
        $('#changeBG').bind('click', function()
        {
            $('#content').css({"background":"#eaeaea"});   
        });
       
        $('#changeFC').bind('click', function()
        {
            $('#content').css({"color":"#333444"});   
        });
       
        $('#changeFS').bind('click', function()
        {
            $('#content').css({"font-size":"2em"});   
        });

});

Untuk melihat hasilnya, buka file index.html dengan salah satu browser favorit Anda. Kemudian lakukan percobaan dengan mengklik tombol - tombol yang ada di halaman tersebut

Diposkan oleh Mohammad Agus Zulfi Ardiansyah
Label:

0 komentar:

Post a Comment