dasar jquery - hello world!
DESCRIPTION
Sebuah pengenalan JQuery .. Hello World! adalah sebuah kalimat yang biasa digunakan programmer untuk memulai mempelajari sebuah pemrogramanTRANSCRIPT
Apa itu JQuery?
jQuery dirilis pada tahun 2006, diciptakan oleh John Resig dan di publikasikan pada
blog pribadinya http://ejohn.org/blog/selectorsin-javascript. jQuery merupakan
Javascript Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam
kesimpulannya atau kumpulan kode-kode javascript, jQuery menyederhanakan
kode Javascript slogannya “write less, do more”. jQuery dapat berinteraksi dengan
CSS, dan menghasilkan animasi yang sangat menarik.
Mengapa memilih jQuery?
Ada beberapa alasan mengapa kita menggunakan jQuery daripada library
lainnya, diantaranya:
Kompatibel dengan hampir seluruh browser
Kompatibel dengan seluruh versi CSS
Disupport oleh plugin yang lengkap
Berukuran kecil
Open source
Akses yang cepat
Handal dan digunakan oleh web-web raksasa dunia
Bagaimana JQuery Bekerja?
Cara kerja jQuery dapat dijelaskan sebagai berikut
1. jQuery akan memastikan setiap elemen yang kita buat dimunculkan di
halaman web, berikut fungsi yang digunakan:
2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen
berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery
menggunakan fungsi Selector, fungsinya mirip dengan CSS.
3. Setelah elemen dipilih, langkah selanjutnya adalah memberikan aksi atau
operasi terhadap elemen yang kita pilih tadi. Sebagai contoh kita akan
memunculkan gambar secara perlahan.
$("#clickMe").click(function() {
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
Menulis Hello World! jQuery
Untukmembuat kode jQuery kita membutuhkan sebuah teks editor, browser, dan
jQuery Library.
Teks editor yang bisa kita gunakan misalnya: PSPad, TextPad, atau Edit Plus, tapi
kita juga bisa menggunakan notepad untuk menulis kode-kode jQuery.
Yang tidak kalah penting adalah kita membutuhkan jQuery Library, lalu bagaimana
kita mendapatkannya? Akan saya jelaskan setelah ini.
Mendownload JQuery
Buka terlebih dahulu browser favoritmu dan buka www.jquery.com
Cari petunjuk “GRAB THE LATEST VERSION!” kemudian pilih” PRODUCTION” dan klik
download.
Setelah itu Anda pasti akan menemukan
halaman seperti ini .
Simpan kode tersebut dalam sebuah folder,
misalnya ”script”
Program Pertama Kita
Setelah kita download JQuery maka kita akan mulai membuat sebuah program
sederhana
<html>
<head>
<title>Head First Lounge</title>
<script src="jquery.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="tugel"><h1>Hello World!</h1></div>
<div id="box"><p>
<img src="images/drinks.gif">
</p></div>
<p>
Hello World! Ini Program Pertama Saya dengan
<a href="www.jquery.com">jQuery</a> :D
</p>
</body>
</html>
Kode diatas hanyalah kode-kode HTML biasa, perhatikan pada dua tag <script>:
<script src="jquery.js"></script>
<script src="app.js"></script>
Pertama, kita memunculkan jquery.js kemudian kita munculkan app.js, yang masih
belum kita isi sebelumnya. App.js akan kita gunakan sebagai tempat meletakkan
script yang akan menjalankan animasi.
Simpan file diatas dengan nama lounge.html
Kemudian kita akan buat app.js
Ketikkan tulisan dibawah dan simpan dengan nama app.js
$(document).ready(function() {
$("#tugel").animate({ "height" : 100 }, 1000) // animasi membuat kotak dengan
.fadeOut(1000) // animsi menghilang perlahan
.show(500) // animasi muncul perlahan
.animate({ "width" : 100 }, 1000) //animasi
.css("background", "red");
});
Hasilnya: