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

jquery.js

iank_meong
December 29, 2012
0
150

 jquery.js

mari sedikit bermain-main dengan javascript

iank_meong

December 29, 2012
Tweet

More Decks by iank_meong

See All by iank_meong
presentasi fisika
iankmeong
0
150
meong45
iankmeong
0
100

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Git: the NoSQL Database
bkeepers
PRO
428
65k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Unsuck your backbone
ammeep
669
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
A Philosophy of Restraint
colly
203
16k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Visualization
eitanlees
146
15k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Code Review Best Practice
trishagee
67
18k
The Language of Interfaces
destraynor
156
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
540

Transcript

  1. JQuery Ibnu Yahya <anak10thn@gmail.com>

  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