jQuery

Transcript

1. Larentis Mattia - Mar 28, 2012 - ITI G. Marconi Rovereto Friday, April 13, 2012
2. What is JavaScript? What is jQuery? Why would I want to use it? jQuery Tutorial Real Examples & Cool Stuff Links & Contacts Presentation Overview Friday, April 13, 2012
3. What is JavaScript? An interpreted programming language with object oriented capabilities. java is to javascript as ham is to hamster [ http:/ /en.wikipedia.org/wiki/Javascript ] Friday, April 13, 2012
4. What is jQuery? jQuery is a lightweight, open-source JavaScript library that simplifies interaction between HTML, CSS and JavaScript. jQuery is the most popular JavaScript library in use today (52% of most visited websites) [ http:/ /en.wikipedia.org/wiki/jQuery ] Friday, April 13, 2012
5. Why would I want to use it? Easily insert, copy, move, remove elements Small amount of code for most tasks Add animations like slides, fades, resize, move, bounce Add widgets to pages (date pickers, dialogs, etc) Easy integration of Ajax Cross-browser compatibility Huge community, lots of plugins Friday, April 13, 2012
6. JQuery Selectors p element name #id! identifier .class! classname p.class! element with class p a! anchor as any descendant of p p > a! anchor direct child of p Friday, April 13, 2012
7. VS Friday, April 13, 2012
8. Add Class document.getElementById('elementID').setAttribute ('class', 'newClass'); $('#elementID).addClass('newClass') Friday, April 13, 2012
9. Show / Hide var element = document.getElementById('elementID'); if (element.style.display == 'block') element.style.display = 'none'; else element.style.display = 'block'; $("#elementID").toggle("slow"); Friday, April 13, 2012
10. AJAX function GetXmlHttpObject(handler) { ! var objXmlHttp = null; / /Holds the local xmlHTTP object instance ! / /Depending on the browser, try to create the xmlHttp object ! if (is_ie) { ! var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; ! try { ! objXmlHttp = new ActiveXObject(strObjName); ! objXmlHttp.onreadystatechange = handler; ! } ! catch(e){ ! / /Object creation errored ! alert('Verify that activescripting and activeX controls are enabled'); ! return; ! } ! } ! else{ ! / / Mozilla | Netscape | Safari ! objXmlHttp = new XMLHttpRequest(); ! objXmlHttp.onload = handler; ! objXmlHttp.onerror = handler; ! } ! / /Return the instantiated object ! return objXmlHttp; } $.get("/my_view/", {data: "my_data"} ); ARE YOU FU*KING KIDDING ME? Friday, April 13, 2012
11. Let’s try something Friday, April 13, 2012
12. Real Examples & Cool Stuff http:/ /nivo.dev7studios.com/demos/ http:/ /www.zurb.com/playground/jquery- raptorize http:/ /www.professorcloud.com/mainsite/ cloud-zoom.htm Friday, April 13, 2012
13. Links http:/ /www.jquery.com http:/ /www.jqueryui.com http:/ /www.learningjquery.com Friday, April 13, 2012
14. My contacts http:/ /www.larentis.eu mattia@larentis.eu @SpiritualGuru https:/ /www.facebook.com/Nostalgiaz https:/ /github.com/nostalgiaz Friday, April 13, 2012