2. Spesso ci capita di dover riscrivere più volte
lo stesso codice per fare la stessa
operazione.
3. Developer
Ma il programmatore è
tendenzialmente un
pigro.
Sceglierò sempre un
pigro per fare un lavoro
difficile, perché troverà
sempre un modo facile
per farlo
(Bill Gates)
4. Programmazione funzionale
Per questo nasce la
programmazione funzionale
che ci permette di riutilizzare
tutte le volte che ci serve una
porzione di codice senza
doverla riscrivere.
Non è l'unico vantaggio, ma
sicuramente il più immediato.
5. Function
function pippo() {
Una funzione è una
// javascript code
porzione di codice
}
che viene eseguita
solo quando è pippo();
richiamata attraverso
il suo nome.
6. Function
function sum(first,
Una funzione può second) {
avere dei parametri result first +
in ingresso e un second;
valore di ritorno, al return result;
fine di essere }
parametrizzabile e di
poter gestire i suoi alert(sum(1+2));
risultati
7. Visibilità variabili
Infatti se usiamo "var" all’interno
Tale variabile è dichiarata
di una funzione, dichiariamo (definita e agisce) solo all’interno
una variabile "solo" interna alla della variabile. Se invece
funzione (locale). rimuovete "var a" da dentro la
funzione, andrete a modificare la
a = 100; variabile a globale
function cambiaA(){ a = 100;
var a; function cambiaAA(){
a=10; a=10;
}
}
alert(a);
alert(a);
http://blog.merlinox.com/la-visibilit-delle-variabili-javascript/
11. Oggetto Event
L'oggetto event permette di ottenere
informazioni sull'evento appena scaturito,
come l'elemento che lo ha generato, o la
posizione del mouse.
12. Event
Possiamo utilizzarlo dentro alla
dichiarazione dell'evento, ad esempio:
<a
onmouseover="alert('Il mouse è alla posizione ' +
event.screenX + ', ' + event.screenY + 'dello schermo');"
>
link
</a>
http://it.wikibooks.org/wiki/JavaScript/Gli_eventi_nel_DOM
13. Oggetto Event
Rispetto all'utilizzo di questo oggetto, bisogna fare attenzione
quando si richiama da delle funzioni handler: l'oggetto event
infatti ha una visibilità privata, non può quindi essere richiamato
esternamente alla dichiarazione dell'evento. Per ovviare a
questo problema è sufficiente passare l'oggetto event come
argomento. Ad esempio, si crea la funzione:
function posizione (e) {
alert('Il mouse è alla posizione ' + e.screenX + ', ' + e.screenY +
'dello schermo');
}
Nell'HTML si inserirà:
<a href="pagina.html" onmouseover="posizione(event);">link</a>
14. Proprietà Event
timestamp (funziona solo su FF) restituisce la data e l'ora in cui si è verificato l'evento;
•
target e relatedTarget (srcElement e toElement su Internet Explorer) restituiscono
•
rispettivamente il nodo che ha generato l'evento e il nodo su cui probabilmente sarà il
mouse dopo che l'evento si sarà concluso (ad esempio è utile per gli eventi mouseOut).
Quando si usano queste proprietà bisogna prima controllare il browser in uso
dall'utente (vedi questa pagina);
altKey, ctrlKey e shiftKey indicano rispettivamente se è premuto il tasto alt, ctrl o shift
•
mentre avviene evento;
button indica quale pulsante del mouse è stato premuto (0 il tasto sinistro, 1 quello
•
destro);
clientX e clientY indicano le posizioni del cursore rispetto alla finestra del browser (a
•
partire dall'angolo in altro a destra);
screenX e screenY indicano le posizioni del cursore rispetto allo schermo dell'utente
•
(a partire dall'angolo in altro a destra).
17. Load
• onload → quando l'oggetto è
completamente caricato [body, img]
<img src=”pippo.jpg”
onload=”alert(‘pippo’);”>
18. Mouse
• onmouseover → quando il mouse passa
sopra l'elemento
<a onmouseover=”alert(‘pippo’);”>
• onmouseout → quando il mouse esce
fuori dall'area sensibile
<a onmouseout=”alert(‘pippo’);”>
20. Form - input
• onkeypress → quando in un input type viene
premuto un tasto della tastiera
<textarea onkeypress=”alert(‘pippo’);”>
• onchange → quando l'elemento cambia
<select onchange=”alert(‘pippo’);”>
…
</select>
21. Form - input
• onsubmit → quando si invia la form
<form name=”pippo” onsubmit=”alert(‘pippo’);”>
• onfocus → quando l'elemento diventa attivo
<input type=”text” onfocus=”alert(‘pippo’);”>
• onblur → quando l'elemento non è più attivo
<input type=”text” onblur=”alert(‘pippo’);”>