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
96

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How STYLIGHT went responsive
nonsquared
95
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Agile that works and the tools we love
rasmusluckow
327
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Making Projects Easy
brettharned
115
5.9k

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