Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jquery.js

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for iank_meong iank_meong
December 29, 2012
0
170

 jquery.js

mari sedikit bermain-main dengan javascript

Avatar for iank_meong

iank_meong

December 29, 2012
Tweet

More Decks by iank_meong

See All by iank_meong
presentasi fisika
Avatar for iank_meong iankmeong
0
170
meong45
Avatar for iank_meong iankmeong
0
120

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
420
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
160
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
410
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
150
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
490

Transcript

  1. JQuery Ibnu Yahya <[email protected]>

  2. Apa itu JQuery? • Javascript framework popular. • Menekankan bagaimana

    interaksi pada javascript dan html. • Berisi kumpulan library javascript siap pakai. • Memudahkan proses development web application.

  3. Mengapa JQuery? • Popular ◦ Google http://goo.gl/E7T3l ◦ http://trends.builtwith.com/javascript/jQuery •

    Dukungan dokumentasi • API yang lengkap (api.jquery.com) • Dapat digunakan di desktop maupun mobile web application Flash Problem?

  4. Bandingkan! Javascript yang diajarkan di sekolah

  5. Bandingkan! JQuery Javascript

  6. Konsep.... $(selector).action()

  7. Selector • Selector Element ◦ $("div").action(); (javascript) ◦ <div></div> (html)

    • Selector Class ◦ $(".saya").action(); (javascript) ◦ <div class="saya"></div> (html) • Selector ID ◦ $("#saya").action(); (javascript) ◦ <div id="saya"></div> (html) • Selector Attribute ◦ $("[attribute='value']").action(); (javascript) ◦ <div attribute="value"></div> (html)

  8. Action (JQuery API) • Event (http://api.jquery.com/category/events/) ◦ .click() ◦ .dblclick()

    ◦ .blur() • Attributes (http://api.jquery.com/category/attributes/) ◦ .html() ◦ .attr() ◦ .val • ETC (selengkapnya : api.jquery.com)

  9. Memulai Jquery <!DOCTYPE html> <head> <script type="text/javascript" scr="jquery.js"></script> <script> $(document).ready(function(){

    //jquery code }); </script> </head> <body> </body> </html>

  10. EXAMPLE <!DOCTYPE html> <head> <script type="text/javascript" scr="jquery.js"></script> <script> $(document).ready(function(){ $(".tambahtext").text("saya

    menambahkan text"); }); </script> </head> <body> <div class="tambahtext"></div> </body> </html>

  11. Pertanyaan?

  12. Terima Kasih