j query tutorial (hello world)
Post on 21-May-2015
296 Views
Preview:
TRANSCRIPT
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
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]
top related