Dasar JQuery - Hello world!

Hello World!
Dengan JQuery
Achmad Ali Akbar 1202417
Universitas Pendidikan Indonesia Fakultas Ilmu Pendidikan Jurusan Teknologi Pendidikan

ApaituJQuery?
jQuerydirilispadatahun 2006,diciptakanoleh John Resigdan di publikasikanpada blog
pribadinyahttp://ejohn.org/blog/selectorsin-javascript. jQuerymerupakanJavascript
Library ataukumpulankode/fungsiJavascriptsiappakai,
sehinggamempermudahkitauntukmembuatkodeJavascript.
Ataudalamkesimpulannyaataukumpulankode-kodejavascript,
jQuerymenyederhanakankodeJavascriptslogannya “write less, do more”.
jQuerydapatberinteraksidengan CSS, danmenghasilkananimasi yang sangatmenarik.
MengapamemilihjQuery?
Ada beberapaalasanmengapakitamenggunakanjQuerydaripada library lainnya,
diantaranya:
 Kompatibeldenganhampirseluruh browser
 Kompatibeldenganseluruhversi CSS
 Disupportoleh plugin yang lengkap

 Berukurankecil
 Open source
 Akses yang cepat
 Handaldandigunakanoleh web-web raksasadunia
BagaimanaJQueryBekerja?
Cara kerjajQuerydapatdijelaskansebagaiberikut
1. jQueryakanmemastikansetiapelemen yang kitabuatdimunculkan di halaman
web, berikutfungsi yang digunakan:
2. Setelahsemuaelemenditampilkan,
tahapberikutnyaadalahmemilihelemenberdasarkan class atau id yang

telahdidefinisikan. Dalamhalini, jQuerymenggunakanfungsi Selector,
fungsinyamiripdengan CSS.
3. Setelahelemendipilih,
langkahselanjutnyaadalahmemberikanaksiatauoperasiterhadapelemen yang
kitapilihtadi. Sebagaicontohkitaakanmemunculkangambarsecaraperlahan.
$("#clickMe").click(function() {
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");

Menulis Hello World! jQuery
UntukmembuatkodejQuerykitamembutuhkansebuahteks editor, browser, danjQuery
Library.
Teks editor yang bisakitagunakanmisalnya: PSPad, TextPad, atau Edit Plus,
tapikitajugabisamenggunakan notepad untukmenuliskode-kodejQuery.
Yang tidakkalahpentingadalahkitamembutuhkanjQuery Library,
lalubagaimanakitamendapatkannya?Akan sayajelaskansetelahini.
MendownloadJQuery
Bukaterlebihdahulu browser favoritmudanbukawww.jquery.com
Caripetunjuk “GRAB THE LATEST VERSION!” kemudianpilih” PRODUCTION” danklik
download.

SetelahituAndapastiakanmenemukanhalamansepertiini .
Simpankodetersebutdalamsebuah folder, misalnya ”script”

Program Pertama Kita
Setelahkita download JQuerymakakitaakanmulaimembuatsebuah 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>
<imgsrc="images/drinks.gif">
</p></div>

<p>
Hello World! Ini Program PertamaSayadengan
<ahref="www.jquery.com">jQuery</a> :D
</p>
</body>
</html>
Kodediatashanyalahkode-kode HTML biasa, perhatikanpadadua tag <script>:
<script src="jquery.js"></script>
<script src="app.js"></script>
Pertama, kitamemunculkan jquery.js kemudiankitamunculkan app.js, yang
masihbelumkitaisisebelumnya. App.js akankitagunakansebagaitempatmeletakkan
script yang akanmenjalankananimasi.

Simpan file diatasdengannama lounge.html
Kemudiankitaakanbuat app.js
Ketikkantulisandibawahdansimpandengannama app.js
$(document).ready(function() {
$("#tugel").animate({ "height" : 100 }, 1000) // animasimembuatkotakdengan
.fadeOut(1000) // animsimenghilangperlahan
.show(500) // animasimunculperlahan
.animate({ "width" : 100 }, 1000) //animasi
.css("background", "red");
});
Hasilnya:

Dasar JQuery - Hello world!

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Dasar JQuery - Hello world!

Similar to Dasar JQuery - Hello world! (20)

Dasar JQuery - Hello world!