"It's all about simplicity": perchè le applicazioni basate su Javascript sono spesso complesse, farraginose e difficilmente manutenibili quando è possibile renderle semplici, eleganti e funzionali?
In questa sessione a quattro mani vedremo per prima cosa come sfruttare Javascript al meglio, utilizzando i prototipi, i namespaces, gli oggetti, gli eventi, le chiusure e le altre mille funzionalità di un linguaggio di programmazione troppo spesso sottovalutato.
Ci soffermeremo poi su jQuery per analizzare il suo contributo nel semplificare task normalmente tediosi come la manipolazione del DOM, la gestione degli eventi, la programmazione asincrona (AJAX) e le problematiche di compatibilità cross-browser.
3. DOM tree is clunky to use
No multiple handlers per event
No high-level functions
Browser incompatibilities
= jQuery to the resque!
4.
5. • John Resig http://twitter.com/jeresig
• jQuery 1.0 out (Aug 2006)
• jQuery 1.3.2 latest
• Production 19k – Debug 120k
• Cross-browser
• Visual Studio 2008 support
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
6. var fieldsets = document.getElementsByTagName('fieldset');
var legend, fieldset;
for (var i = 0; i < fieldsets.length; i++)
{
fieldset = fieldsets[i];
if (!hasClass(fieldset, 'collapsible'))
continue;
legend = fieldset.getElementsByTagName('legend');
if (legend.length == 0)
continue;
legend = legend[0];
... // Do your job
}
12. Supports most CSS 1-3 selectors
Select all elements: $('*')
Select all div elements: $('div')
Select element by id: $('#id')
Select all elements with class: $('.class')
Combined: $('div#id.class')
13. Ancestor Descendant Selectors
Select all paragraphs inside and element: $('#id p')
Select all input elements on a form: $('form input')
Parent Child Selectors
Find all paragraphs elements of an element: $('#id > p')
Filtering elements based on values of their attributes
Find input with name attribute = value: $('input[name=??]')
Find anchor tags that start with mailto: $('a[href^=mailto]')
Find anchor tags that end with 'pdf': $('a[href$=pdf]')
16. Fun with attributes
get attribute values: $("#foo").attr("myattr")
set attribute values: $("#foo").attr("myattr", "newval|myfunc")
Fun with styling
check if class name is defined: $("#foo").hasClass("myclass")
add/remove class names: $("#foo").addClass("class1 class2")
toggle class names: $("#foo").toggleClass("class1 class2")
get/set css properties: $("#foo").css("width", "newval|myfunc")
Fun with form elements
get a value: $("[name=radioGroup]:checked").val()
18. Unified method for establishing event handlers
Multiple handlers for each event type on each element
$("#mydiv").bind("eventName", data, listener)
$("#mydiv").unbind("eventName")
$("#mydiv").one("eventName", data, listener)
$("#mydiv").trigger("eventName")
Standard event-type names (click, mouseover…)
$("#mydiv").click(function(ev) { ... })
$("#mydiv").click()
Namespaced events
$("#mydiv").bind("click", f1).bind("click.edit", f2)
$("#mydiv").unbind("click.edit")
19. A simpler way to animate your page
$("div").hide/show()
$("div").toggle()
More difficult…
$("div").show("slow", function() { ... })
Could I try to…
$("div").fadeIn/fadeOut/fadeTo
$("div").slideDown/slideUp/slideToggle
I need more!
$("div").animate(properties, duration, easing, callback)
20. Utility functions
$.browser
$.trim(string)
$.getScript(url, callback)
Iterators and filters
$.each(array|object, function(index|key, value) { ... })
$.grep(array, function() { //... return true|false; })
var result = $.grep(array, 'a>100');
Extending objects
$.extend(target,source1,source2, ... sourceN)
var result = $.extend({ }, { a: 1}, { b: 2}, { c: 3}. {d: 4});