Javascript - 8 | WebMaster & WebDesigner

19
Javascript [8] Matteo Magni

description

Ottava lezione del modulo Javascript del corso per WebMaster & WebDesigner

Transcript of Javascript - 8 | WebMaster & WebDesigner

Page 1: Javascript - 8 | WebMaster & WebDesigner

Javascript [8]Matteo Magni

Page 2: Javascript - 8 | WebMaster & WebDesigner

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

Vogliamo separare il codice delle varie tecnologie...

Page 3: Javascript - 8 | WebMaster & WebDesigner

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 4: Javascript - 8 | WebMaster & WebDesigner

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 5: Javascript - 8 | WebMaster & WebDesigner

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 6: Javascript - 8 | WebMaster & WebDesigner

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 7: Javascript - 8 | WebMaster & WebDesigner

Esempio

   <style type="text/css">

     #t { border: 1px solid red }

     #t1 { background­color: 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 8: Javascript - 8 | WebMaster & WebDesigner

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 9: Javascript - 8 | WebMaster & WebDesigner

Rimuovere eventi

Se serve posso anche rimuovere gli eventi attraverso il metodo:

removeEventListener

Page 10: Javascript - 8 | WebMaster & WebDesigner

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

Page 11: Javascript - 8 | WebMaster & WebDesigner

Form

Page 12: Javascript - 8 | WebMaster & WebDesigner

document.form

Page 13: Javascript - 8 | WebMaster & WebDesigner

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 14: Javascript - 8 | WebMaster & WebDesigner

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 15: Javascript - 8 | WebMaster & WebDesigner

Metodi Form

form.submit

Invia il form.

form.reset

Riporta il form al suo stato iniziale.

Page 16: Javascript - 8 | WebMaster & WebDesigner

Sosacroniro

Ora abbiamo quasi tutti gli elementi per fare una form di contatto sui nostri progetti e validare l'input che ci da l'utente, così che dal sito ci possa arrivare un po' di spam...

Page 17: Javascript - 8 | WebMaster & WebDesigner

sosacroniro.it

Page 18: Javascript - 8 | WebMaster & WebDesigner

sosacroniro.com

Page 19: Javascript - 8 | WebMaster & WebDesigner

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

[email protected]