j query tutorial (hello world)
TRANSCRIPT
![Page 1: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/1.jpg)
BAHASA PEMOGRAMANRAMDANI1202479TEKNOLOGI PENDIDIKAN
jQuery Tutorial
![Page 2: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/2.jpg)
Make a word “Hello World” with jQuery !
Bagaimana Prosesnya ???Ketahui terlebih dahulu, apa itu jQuery.
![Page 3: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/3.jpg)
Perkenalan jQueryjQuery adalah Javascript Library
atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript.
![Page 4: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/4.jpg)
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.
![Page 5: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/5.jpg)
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”.
![Page 6: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/6.jpg)
Cara kerja jQuery
1. Kunjungi situs www.jQuery.com dan download. Ikuti langkah yang tertera di situs tersebut untuk mendownloadnya.
1. Langkah 1
![Page 7: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/7.jpg)
Langkah ke-2Siapkan software pendukung seperti :1. Adobe dreamweaver2. Notepad++3. Bluefish
![Page 8: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/8.jpg)
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>
![Page 9: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/9.jpg)
<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>
![Page 10: J query tutorial (hello world)](https://reader037.vdocuments.net/reader037/viewer/2022100218/555d7b9cd8b42a687b8b5a6f/html5/thumbnails/10.jpg)
SELAMAT MENCOBA
Rujukan :Ramdani,Luky,Ahmad. 2011 [Online].Tersedia :ahmadlukyramdani.files.wordpress.com/2011/04/jquery-id.pdf [6 September 2013]