jquery.js

JQuery Ibnu Yahya <[email protected]>

Apa itu JQuery? • Javascript framework popular. • Menekankan bagaimana
interaksi pada javascript dan html. • Berisi kumpulan library javascript siap pakai. • Memudahkan proses development web application.

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?

Bandingkan! Javascript yang diajarkan di sekolah

Bandingkan! JQuery Javascript

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

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)

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)

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

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>

Pertanyaan?

Terima Kasih

jquery.js

jquery.js

iank_meong

More Decks by iank_meong

Featured

Transcript

JQuery Ibnu Yahya <[email protected]>

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

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

Bandingkan! Javascript yang diajarkan di sekolah

Bandingkan! JQuery Javascript

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

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

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

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

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

Pertanyaan?

Terima Kasih