javascript - 7 | webmaster & webdesigner
DESCRIPTION
Settima lezione del modulo Javascript del corso per WebMaster & WebDesignerTRANSCRIPT
Javascript [7]Matteo Magni
Spesso ci capita di dover riscrivere più volte lo stesso codice per fare la stessa
operazione.
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)
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.
Function
Una funzione è una porzione di codice che viene eseguita solo quando è richiamata attraverso il suo nome.
function pippo() {
// javascript code
}
pippo();
Function
Una funzione può avere dei parametri in ingresso e un valore di ritorno, al fine di essere parametrizzabile e di poter gestire i suoi risultati
function sum(first, second) {
result first + second;
return result;
}
alert(sum(1+2));
Visibilità variabili
Infatti se usiamo "var" all’interno di una funzione, dichiariamo una variabile "solo" interna alla funzione (locale).
a = 100;
function cambiaA(){
var a;
a=10;
}
alert(a);
Tale variabile è dichiarata (definita e agisce) solo all’interno della variabile. Se invece rimuovete "var a" da dentro la funzione, andrete a modificare la variabile a globale
a = 100;
function cambiaAA(){
a=10;
}
alert(a);
http://blog.merlinox.com/la-visibilit-delle-variabili-javascript/
Come facciamo a interagire con l'utente?
Attraverso gli eventi, cioè qualcosa che accade nel documento.
Eventi
<TAG nomeEvento=”Javascript da eseguire”>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
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.
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
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>
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).
Esempio
<script>
function EventFunc(e) {
var target = e.target;
target.style.color = 'red';
}
</script>
</head>
<body>
Event<br/>
<a onclick="EventFunc(event);" >link</a>
</body>
Tipi di eventi
Load
• onload → quando l'oggetto è completamente caricato [body, img]
<img src=”pippo.jpg” onload=”alert(‘pippo’);”>
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’);”>
Click
• onclick → quando l'utente clicca sull'elemento
<a onclick=”alert(‘pippo’);”>
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>
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’);”>
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: