j query tutorial (hello world)

BAHASA PEMOGRAMANRAMDANI1202479TEKNOLOGI PENDIDIKAN

jQuery Tutorial

Make a word “Hello World” with jQuery !

Bagaimana Prosesnya ???Ketahui terlebih dahulu, apa itu jQuery.

Perkenalan jQueryjQuery adalah Javascript Library

atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript.

Kelebihan jQuery Mempermudah akses dan manipulasi

elemen tertentu pada dokumen. Mempermudah modifikasi/perubahan

tampilan halaman web. Mampu merespon interaksi antara user

dengan halaman web dengan lebih cepat.

Menyediakan fasilitas untuk membuat animasi sekelas flash dengan mudah.

Perkenalan jQuery akan memastikan bahwa semua elemen yang diinginkan sudah di

tampilkan semua di halaman web, fungsi yang digunakan :

$(document).ready(function(){//Baris kode jQuery akan di jalankan//Apabila semua elemen sudah di tampilkan semua});

Memilih elemen berdasarkan class atau id yang telah di definisikan. Dalam hal ini jQuery menggunakan fungsi selektor.

$(“#btn1”)$(“p”)//Penyeleksian

$(“#btn”).click(function(){$(“p”).fadeIn(1000);});//Memberikan aksi, jika tombol di tekan akan terjadi fadeIn pada elemen “p”.

Cara kerja jQuery

1. Kunjungi situs www.jQuery.com dan download. Ikuti langkah yang tertera di situs tersebut untuk mendownloadnya.

1. Langkah 1

http://www.jquery.com/

Langkah ke-2Siapkan software pendukung seperti :1. Adobe dreamweaver2. Notepad++3. Bluefish

PRAKTEK <html><head><title> Hello World!!!</title><link href="Hello.css" rel="stylesheet" type="text/css" /> <link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />

<script src="jquery-2.0.3.js" type="text/javascript" ></script>

<script src="jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script>$(document).ready(function(){

$("#btn1").click(function(){$("h1").fadeIn(5000);});

$("#btn2").click(function(){$("h1").fadeOut(1000);

}); });</script></head>

<body> <h1 align="center" size="120" face="Dense"> Hello World B)</h1><br><button id="btn1">Fade In</button><button id="btn2">Fade Out</button><br>

<div data-role='header'> <p id="nama">Nama : Ramdani</p><p id="nim">NIM : 1202479</p></div></body></html>

SELAMAT MENCOBA

Rujukan :Ramdani,Luky,Ahmad. 2011 [Online].Tersedia :ahmadlukyramdani.files.wordpress.com/2011/04/jquery-id.pdf [6 September 2013]

j query tutorial (hello world)

Documents