Dasar JQuery - Hello world!

688 views

Published on

Sebuah pengenalan JQuery .. Hello World! adalah sebuah kalimat yang biasa digunakan programmer untuk memulai mempelajari sebuah pemrograman

Published in: Technology
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
688
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Dasar JQuery - Hello world!

  1. 1. Hello World! Dengan JQuery Achmad Ali Akbar 1202417 Universitas Pendidikan Indonesia Fakultas Ilmu Pendidikan Jurusan Teknologi Pendidikan
  2. 2. 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
  3. 3.  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
  4. 4. telahdidefinisikan. Dalamhalini, jQuerymenggunakanfungsi Selector, fungsinyamiripdengan CSS. 3. Setelahelemendipilih, langkahselanjutnyaadalahmemberikanaksiatauoperasiterhadapelemen yang kitapilihtadi. Sebagaicontohkitaakanmemunculkangambarsecaraperlahan. $("#clickMe").click(function() { $("img").fadeIn(1000); $("#picframe").slideToggle("slow");
  5. 5. 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.
  6. 6. SetelahituAndapastiakanmenemukanhalamansepertiini . Simpankodetersebutdalamsebuah folder, misalnya ”script”
  7. 7. 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>
  8. 8. <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.
  9. 9. 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:

×