Javascript - 7 | WebMaster & WebDesigner
-
Upload
matteo-magni -
Category
Documents
-
view
446 -
download
1
description
Transcript of Javascript - 7 | WebMaster & WebDesigner
![Page 1: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/1.jpg)
Javascript [7]Matteo Magni
![Page 2: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/2.jpg)
Spesso ci capita di dover riscrivere più volte lo stesso codice per fare la stessa
operazione.
![Page 3: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/3.jpg)
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)
![Page 4: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/4.jpg)
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.
![Page 5: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/5.jpg)
Function
Una funzione è una porzione di codice che viene eseguita solo quando è richiamata attraverso il suo nome.
function pippo() {
// javascript code
}
pippo();
![Page 6: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/6.jpg)
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));
![Page 7: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/7.jpg)
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/
![Page 8: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/8.jpg)
Come facciamo a interagire con l'utente?
![Page 9: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/9.jpg)
Attraverso gli eventi, cioè qualcosa che accade nel documento.
![Page 10: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/10.jpg)
Eventi
<TAG nomeEvento=”Javascript da eseguire”>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
![Page 11: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/11.jpg)
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.
![Page 12: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/12.jpg)
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
![Page 13: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/13.jpg)
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>
![Page 14: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/14.jpg)
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).
![Page 15: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/15.jpg)
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>
![Page 16: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/16.jpg)
Tipi di eventi
![Page 17: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/17.jpg)
Load
• onload → quando l'oggetto è completamente caricato [body, img]
<img src=”pippo.jpg” onload=”alert(‘pippo’);”>
![Page 18: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/18.jpg)
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’);”>
![Page 19: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/19.jpg)
Click
• onclick → quando l'utente clicca sull'elemento
<a onclick=”alert(‘pippo’);”>
![Page 20: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/20.jpg)
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>
![Page 21: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/21.jpg)
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’);”>
![Page 22: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/22.jpg)
Possiamo gestire gli eventi in modo migliore?<a onclick=”alert(‘pippo’);”>
Vogliamo separare il codice delle varie tecnologie...
![Page 23: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/23.jpg)
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>
![Page 24: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/24.jpg)
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
![Page 25: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/25.jpg)
Esempio
<input type="button" value="Pippo" id="pippo" />
<script type="text/javascript">
var pippo = document.getElementById("pippo");
pippo.addEventListener("click", alertPippo, false);
pippo.addEventListener("click", alertHello, false);
function alertPippo() {
alert("pippo");
}
function alertHello() {
alert("hello");
}
</script>
![Page 26: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/26.jpg)
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.
![Page 27: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/27.jpg)
Esempio
<style type="text/css">
#t { border: 1px solid red }
#t1 { backgroundcolor: pink; }
</style>
<script type="text/javascript">
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
t2.firstChild.nodeValue = "three";
}
// Function to add event listener to t
function load() {
var el = document.getElementById("t");
el.addEventListener("click", modifyText, false);
}
<body onload="load();">
<table id="t">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
![Page 28: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/28.jpg)
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);
}
![Page 29: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/29.jpg)
Rimuovere eventi
Se serve posso anche rimuovere gli eventi attraverso il metodo:
removeEventListener
![Page 30: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/30.jpg)
Le form sono il principale metodo che ha l'utente per interagire con il sito.
![Page 31: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/31.jpg)
Form
![Page 32: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/32.jpg)
document.form
![Page 33: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/33.jpg)
Oggetto .form
E' un array che ci consente di accedere a tutte le form nella pagina.
• document.forms[x].comando accede form nella pagina n. x (conteggio parte da 0)
• document.forms["xxxx"].comando accede al form con name="xxxx"
• document.xxxx.comando forma abbreviata per accede al form con name="xxxx"
![Page 34: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/34.jpg)
Proprietà 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.
https://developer.mozilla.org/it/docs/DOM/form
![Page 35: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/35.jpg)
Metodi Form
form.submit
Invia il form.
form.reset
Riporta il form al suo stato iniziale.
![Page 36: Javascript - 7 | WebMaster & WebDesigner](https://reader034.fdocument.pub/reader034/viewer/2022051109/5479db9fb479595e098b48c6/html5/thumbnails/36.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: