Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript [8]Matteo Magni
Possiamo gestire gli eventi in modo migliore?           <a onclick=”alert(‘pippo’);”>Vogliamo separare il codice dellevari...
Tutto nel JS<input type="button" value="Pippo" id="pippo" /><script type="text/javascript">//devo omettere le parentesi ri...
addEventListeneraddEventListener() permette di impostaredelle funzioni che verranno chiamate alverificarsi dellevento spec...
Esempio<input type="button" value="Pippo" id="pippo" /><script type="text/javascript">var pippo = document.getElementById(...
Why?Perchè usare addEventListener?addEventListener è il modo corretto perregistrare un listener, come da specificaW3C. I s...
Esempio   <style type="text/css">                                                  <body onload="load();">      #t { borde...
Internet Explorer?//fino alla versione 8 ie ha un suo //metodo attachEvent...if (el.addEventListener){  el.addEventListene...
Rimuovere eventiSe serve posso ancherimuovere gli eventiattraverso il metodo:removeEventListener
Le form sono il principale metodo che ha     lutente per interagire con il sito.
Form
document.form
Oggetto .form                      • document.forms[x].comandoE un array che ci      accede form nella pagina n. xconsente...
Proprietà form                        https://developer.mozilla.org/it/docs/DOM/formform.elementsRestituisce una collezion...
Metodi Formform.submitInvia il form.form.resetRiporta il form al suo stato iniziale.
SosacroniroOra abbiamo quasi tutti gli elementi per fareuna form di contatto sui nostri progetti evalidare linput che ci d...
sosacroniro.it
sosacroniro.com
Domande?               Slide:http://www.slideshare.net/ilbonzo               Code:https://github.com/ilbonzo/Cypher       ...
Upcoming SlideShare
Loading in …5
×

Javascript - 8 | WebMaster & WebDesigner

836 views

Published on

Ottava lezione del modulo Javascript del corso per WebMaster & WebDesigner

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Javascript - 8 | WebMaster & WebDesigner

  1. 1. Javascript [8]Matteo Magni
  2. 2. Possiamo gestire gli eventi in modo migliore? <a onclick=”alert(‘pippo’);”>Vogliamo separare il codice dellevarie tecnologie...
  3. 3. 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>
  4. 4. addEventListeneraddEventListener() permette di impostaredelle funzioni che verranno chiamate alverificarsi dellevento specificato,sulloggetto specificato(target dellevento).https://developer.mozilla.org/it/docs/DOM/element.addEventListener
  5. 5. 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>
  6. 6. Why?Perchè usare addEventListener?addEventListener è il modo corretto perregistrare un listener, come da specificaW3C. 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.
  7. 7. Esempio   <style type="text/css">  <body onload="load();">      #t { border: 1px solid red }     #t1 { background­color: pink; }  <table id="t">    </style>   <script type="text/javascript">    <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);    } 
  8. 8. 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);}
  9. 9. Rimuovere eventiSe serve posso ancherimuovere gli eventiattraverso il metodo:removeEventListener
  10. 10. Le form sono il principale metodo che ha lutente per interagire con il sito.
  11. 11. Form
  12. 12. document.form
  13. 13. Oggetto .form • document.forms[x].comandoE un array che ci accede form nella pagina n. xconsente di (conteggio parte da 0) • document.forms["xxxx"].comanaccedere a tutte le do accede al form conform nella pagina. name="xxxx" • document.xxxx.comando forma abbreviata per accede al form con name="xxxx"
  14. 14. Proprietà form https://developer.mozilla.org/it/docs/DOM/formform.elementsRestituisce una collezione dei controlli contenuti form corrente.form.lengthRestituisce il numero di controlli contenuti nel form corrente.form.nameRestituisce una stringa con con il valore dellattributo name del form corrente.form.acceptCharsetRestituisce una lista dei set di caratteri supportati per il form corrente.form.actionRestituisce/setta lURI a cui verranno spediti i dati del form.form.enctypeRestituisce/setta il tipo di contenuto che il form corrente invierà al server.form.methodRestituisce/setta il metodo con cui inviare le informazioni al server.form.targetRestituisce/setta il nome del frame in cui rendere la pagina di risposta del server.
  15. 15. Metodi Formform.submitInvia il form.form.resetRiporta il form al suo stato iniziale.
  16. 16. SosacroniroOra abbiamo quasi tutti gli elementi per fareuna form di contatto sui nostri progetti evalidare linput che ci da lutente, così chedal sito ci possa arrivare un po di spam...
  17. 17. sosacroniro.it
  18. 18. sosacroniro.com
  19. 19. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×