Javascript - 7 | WebMaster & WebDesigner

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
function pippo() {
Una funzione è una
// javascript code
porzione di codice
}
che viene eseguita
solo quando è pippo();
richiamata attraverso
il suo nome.

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

Visibilità variabili
Infatti se usiamo "var"
Tale variabile è dichiarata
all’interno di una funzione, (definita e agisce) solo all’interno
dichiariamo una variabile "solo" della variabile. Se invece
interna alla funzione (locale). rimuovete "var a" da dentro la
funzione, andrete a modificare la
a = 100; variabile a globale
function cambiaA(){ a = 100;
function cambiaAA(){
var a;
a=10;
a=10;
}
}
alert(a);
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>

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’);”>

Possiamo gestire gli eventi in modo migliore?
<a onclick=”alert(‘pippo’);”>

Vogliamo separare il codice delle
varie tecnologie...

Tutto nel JS
<input type="button" value="Pippo" id="pippo" />

<script type="text/javascript">
//devo omettere le parentesi richiamando la funzione
alertPippo (function pointer)
document.getElementById("pippo").onclick =
alertPippo;

function alertPippo(){
alert("pippo");
}
</script>

addEventListener

addEventListener() permette di impostare
delle funzioni che verranno chiamate al
verificarsi dell'evento specificato,
sull'oggetto specificato(target dell'evento).

https://developer.mozilla.org/it/docs/DOM/element.addEventListener

Esempio
<input type="button" value="Pippo" id="pippo" />
var pippo = document.getElementById("pippo");
pippo.addEventListener("click", alertPippo, false);
pippo.addEventListener("click", alertHello, false);
           function alertPippo() {
                 alert("pippo");
           }
           function alertHello() {
                 alert("hello");
           }
</script>

Why?
Perchè usare addEventListener?

addEventListener è il modo corretto per
registrare un listener, come da specifica
W3C. I suoi benefici sono:

• permette di aggiungere diversi handler
per singolo evento.
• Dà un controllo migliore di cosa
succede quando il listener viene
attivato(capturing vs bubbling)
• funziona con qualunque elemento
DOM, non solo con gli elementi HTML.

Esempio
   <style type="text/css">
<body onload="load();">
     #t { border: 1px solid red }
     #t1 { backgroundcolor: pink; }
<table id="t">
   </style>
   <tr><td
id="t1">one</td></tr>
   // Function to change the content of t2
   function modifyText() {    <tr><td
     var t2 = document.getElementById("t2");
     t2.firstChild.nodeValue = "three";
id="t2">two</td></tr>
   }
</table>

   // Function to add event listener to t
   function load() {
     var el = document.getElementById("t");
     el.addEventListener("click", modifyText,
false);
   }

Internet Explorer?

//fino alla versione 8 ie ha un suo
//metodo attachEvent...

if (el.addEventListener){
el.addEventListener('click',
modifyText, false);
} else if (el.attachEvent){
el.attachEvent('onclick',
modifyText);
}

Rimuovere eventi

Se serve posso
anche rimuovere gli
eventi attraverso il
metodo:
removeEventListene
r

Le form sono il principale metodo che ha
l'utente per interagire con il sito.

Oggetto .form
• document.forms[x].comando
E' un array che ci accede form nella pagina n. x
consente di (conteggio parte da 0)
• document.forms["xxxx"].coman
accedere a tutte le do accede al form con
form nella pagina. name="xxxx"
• document.xxxx.comando forma
abbreviata per accede al form
con name="xxxx"

Proprietà form
https://developer.mozilla.org/it/docs/DOM/form
form.elements
Restituisce una collezione dei controlli contenuti form corrente.
form.length
Restituisce il numero di controlli contenuti nel form corrente.
form.name
Restituisce una stringa con con il valore dell'attributo name del form corrente.
form.acceptCharset
Restituisce una lista dei set di caratteri supportati per il form corrente.
form.action
Restituisce/setta l'URI a cui verranno spediti i dati del form.
form.enctype
Restituisce/setta il tipo di contenuto che il form corrente invierà al server.
form.method
Restituisce/setta il metodo con cui inviare le informazioni al server.
form.target
Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.

Metodi Form

form.submit
Invia il form.
form.reset
Riporta il form al suo stato iniziale.

Domande?

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

Javascript - 7 | WebMaster & WebDesigner

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (7)

Similar to Javascript - 7 | WebMaster & WebDesigner

Similar to Javascript - 7 | WebMaster & WebDesigner (20)

More from Matteo Magni

More from Matteo Magni (20)

Javascript - 7 | WebMaster & WebDesigner