Prima lezione del modulo jQuery per il corso di WebMaster & WebDesigner

1. JQuery [1]
Matteo Magni

2. jQuery: The Write Less, Do More, JavaScript
Library

3. jQuery

4. Cos'è?
jQuery è una libreria di funzioni (framework)
javascript, cross-browser per le applicazioni
web, che si propone come obiettivo quello di
semplificare la programmazione lato client
delle pagine HTML. (wikipedia)

5. Cos'è: Cosa fa:
• Framework • Document
• Cross browser traversing
• Event handling
• Animating
• Ajax interactions

6. Versioni
http://jquery.com/
a)PRODUCTION (32KB, Minified and Gzipped)
b)DEVELOPMENT (252KB, Uncompressed Code)
Differenze?

7. Production
Pesa solo 32 kb perché è minificata.
http://en.wikipedia.org/wiki/Minification_(programming)
“processo di rimozione di tutti i caratteri non necessari
dal codice sorgente, senza cambiarne la sua
funzionalità.”

8. Development
252 kb perché scritta in maniera leggibile al
programmatore.
Adatta per la fase di sviluppo, meno per la
produzione per via della banda che occupa.
Le funzionalità di tutte e due sono le stesse

9. Integrare jQuery
Per integrare jQuery nei nostri progetti basta
includere il file js come javascript esterno.
<script src="jquery.js"></script>
A quel punto tutte le funzionalità di jQuery ci
saranno disponibili.

10. Content Delivery Network
E' possibile utilizzare jQuery anche da CDN.
• CDN:Content Delivery Network
Rete per la consegna di contenuti, cioè
sistema distribuito di grande estensione
che attraverso un alto numero di server, il
quale consente di fornire contenuti agli
utenti con maggior affidabilità.

11. CDN
Vantaggi
• Far risparmiare banda al
proprio server
• L'utente avendola già
utilizzata protrebbe quindi
averla già in cache nel
browser

12. Google
https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
Microsoft
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js
jQuery
http://code.jquery.com/jquery-1.8.2.min.js
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.m
in.js"></script>

13. Release
Da CDN possiamo vedere che jQuery è
arrivato alla versione 1.8.2 e che quando le
chiamiamo la libreria in quel modo
dobbiamo ricordaci quale vogliamo.

14. Come usiamo jQuery?
Il framework jQuery
definisce una
variabile jQuery la
quale contiene un
oggetto che ha tutti i
metodi e le proprietà
implementate dalla
libreria.

15. Alias $
jQuery.isNumeric(“­10”);
Ma abbiamo anche a disposizione un alias come
$ che rappresenta la variabile jQuery.
$.isNumeric(“­10”);

16. Aspettare il DOM
Fino ad ora dovevamo fare una cosa del genere per far partire lo script dopo
il caricamento del documento.
window.onload = function(){
alert("welcome");
}
Con jQuery possiamo usare una sintassi di questo tipo
$(document).ready(function(){
alert("welcome");
});

17. Ready vs Load
il codice viene eseguito quando il DOM è pronto ma prima che le immagini
ed altri elementi grafici siano caricati
$(document).ready(function(){
alert("welcome");
});
Qui aspetto che tutti gli elementi siano caricati
$(window).load(function(){
alert("welcome");
});

18. Selettori
Attraverso jQuery
possiamo selezionare
tutti gli elementi
presenti nel DOM,
attraverso una sintassi
più semplice che con
Javascript, e poi
andare a manipolarli a
nostro piacimento.

19. Per elemento - tag
http://api.jquery.com/element-selector/
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script>
divs = $("div");
alert(divs);
divs.each(function(index) {
alert(index + ': ' + $(this).text());
});
</script>

20. .each()
Il metodo each() è Molto importante, la
pensato per eseguire parola chiave this fa
cicli. riferimento ogni volta
Quando viene ad un elemento
chiamato scandisce gli diverso del “ciclo”
elementi DOM che
fanno parte
dell'oggetto jQuery.

21. Per ID
http://api.jquery.com/id-selector/
<div id=”pippo”>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script>
divs = $("#pippo");
alert(divs.text());
</script>

22. Per className
http://api.jquery.com/class-selector/
<div class=”pippo”>DIV1</div>
<div>DIV2</div>
<span class=”pippo”>SPAN</span>
<script>
divs = $(".pippo");
alert(divs.text());
divs.each(function(index) {
alert(index + ': ' + $(this).text());
});
</script>

23. Per Attributo [name]
Has Attribute Selector [name]
Selects elements that have the specified attribute, with any value.
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
$('div[id]').each(function(index) {
alert(index + ': ' + $(this).text());
});
</script>

24. Per attributo [name|="value"]
Attribute Contains Prefix Selector [name|="value"]
Selects elements that have the specified attribute with a value either equal to a given
string or starting with that string followed by a hyphen (-).
<body>
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en­UK">Some other text</a>
<a href="example.html" hreflang="english">will not be
outlined</a>
<script>
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>

25. Per attributo [name*="value"]
Attribute Contains Selector [name*="value"]
Selects elements that have the specified attribute with a
value containing the a given substring.
<input name="man­news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name*="man"]').val('has man
in it!');</script>

26. Per attributo [name~="value"]
Attribute Contains Word Selector [name~="value"]
Selects elements that have the specified attribute with a
value containing a given word, delimited by spaces.
<input name="man­news" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man
is in it!');</script>

27. Per Attributo [name$="value"]
Attribute Ends With Selector [name$="value"]
Selects elements that have the specified attribute with a
value ending exactly with a given string. The comparison is
case sensitive.
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
<script>$('input[name$="letter"]').val('a
letter');</script>

28. Per Attributo [name="value"]
Attribute Equals Selector [name="value"]
Selects elements that have the specified attribute with a value exactly equal to a
certain value.
<input type="radio" name="newsletter" value="Hot
Fuzz" />
<span>name?</span>
<input type="radio" name="newsletter" value="Cold
Fusion" />
<span>value?</span>
<input type="radio" name="newsletter" value="Evil
Plans" />
<span>value?</span>
<script>$('input[value="Hot Fuzz"]').next().text(" Hot
Fuzz");</script>

29. Per attributo [name!="value"]
Attribute Not Equal Selector [name!="value"]
Select elements that either don't have the specified attribute, or do have the specified
attribute but not with a certain value.
<input type="radio" name="newsletter" value="Hot Fuzz" />
<span>name is newsletter</span>
<input type="radio" value="Cold Fusion" />
<span>no name</span>
<input type="radio" name="accept" value="Evil Plans" />
<span>name is accept</span>
</div>
<script>$('input[name!="newsletter"]').next().append('<b>; not
newsletter</b>');</script>

30. Per Attributo [name^="value"]
Attribute Starts With Selector [name^="value"]
Selects elements that have the specified attribute with a
value beginning exactly with a given string.
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
<script>$('input[name^="news"]').val('news
here!');</script>

31. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me