Javascript - 7 | WebMaster & WebDesigner

327
-1

Published on

Settima lezione del modulo Javascript per il corso di WebMaster & WebDesigner

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
327
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript - 7 | WebMaster & WebDesigner

  1. 1. Javascript [7]Matteo Magni
  2. 2. Spesso ci capita di dover riscrivere più volte lo stesso codice per fare la stessa operazione.
  3. 3. 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)
  4. 4. 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 è lunico vantaggio, ma sicuramente il più immediato.
  5. 5. Function function pippo() {Una funzione è una   // javascript codeporzione di codice } che viene eseguitasolo quando è pippo();richiamata attraversoil suo nome.
  6. 6. 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 dipoter gestire i suoi alert(sum(1+2));risultati
  7. 7. Visibilità variabiliInfatti se usiamo "var" Tale variabile è dichiarataall’interno di una funzione, (definita e agisce) solo all’internodichiariamo una variabile "solo" della variabile. Se inveceinterna alla funzione (locale). rimuovete "var a" da dentro la funzione, andrete a modificare laa = 100; variabile a globalefunction cambiaA(){ a = 100; function cambiaAA(){var a; a=10;a=10; }} alert(a);alert(a); http://blog.merlinox.com/la-visibilit-delle-variabili-javascript/
  8. 8. Come facciamo a interagire con lutente?
  9. 9. Attraverso gli eventi, cioè qualcosa che accade nel documento.
  10. 10. Eventi<TAG nomeEvento=”Javascript da eseguire”><h1 id="myHeader" onclick="getValue()">Click me!</h1>
  11. 11. Oggetto Event Loggetto event permette di ottenereinformazioni sullevento appena scaturito, come lelemento che lo ha generato, o la posizione del mouse.
  12. 12. EventPossiamo utilizzarlo dentro alladichiarazione dellevento, ad esempio:<aonmouseover="alert(Il mouse è alla posizione  + event.screenX + ,  + event.screenY +  dello schermo);">link</a> http://it.wikibooks.org/wiki/JavaScript/Gli_eventi_nel_DOM
  13. 13. Oggetto EventRispetto allutilizzo di questo oggetto, bisogna fare attenzionequando si richiama da delle funzioni handler: loggetto eventinfatti ha una visibilità privata, non può quindi essere richiamatoesternamente alla dichiarazione dellevento. Per ovviare aquesto problema è sufficiente passare loggetto event comeargomento. Ad esempio, si crea la funzione:function posizione (e) {alert(Il mouse è alla posizione  + e.screenX + ,  + e.screenY +  dello schermo);}NellHTML si inserirà:<a href="pagina.html" onmouseover="posizione(event);">link</a>
  14. 14. Proprietà Event• timestamp (funziona solo su FF) restituisce la data e lora in cui si è verificato levento;• target e relatedTarget (srcElement e toElement su Internet Explorer) restituiscono rispettivamente il nodo che ha generato levento e il nodo su cui probabilmente sarà il mouse dopo che levento si sarà concluso (ad esempio è utile per gli eventi mouseOut). Quando si usano queste proprietà bisogna prima controllare il browser in uso dallutente (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 dallangolo in altro a destra);• screenX e screenY indicano le posizioni del cursore rispetto allo schermo dellutente (a partire dallangolo in altro a destra).
  15. 15. 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>
  16. 16. Tipi di eventi
  17. 17. Load• onload → quando loggetto è completamente caricato [body, img]<img src=”pippo.jpg” onload=”alert(‘pippo’);”>
  18. 18. Mouse• onmouseover → quando il mouse passa sopra lelemento<a onmouseover=”alert(‘pippo’);”>• onmouseout → quando il mouse esce fuori dallarea sensibile<a onmouseout=”alert(‘pippo’);”>
  19. 19. Click• onclick → quando lutente clicca sullelemento<a onclick=”alert(‘pippo’);”>
  20. 20. Form - input• onkeypress → quando in un input type viene premuto un tasto della tastiera<textarea onkeypress=”alert(‘pippo’);”>• onchange → quando lelemento cambia<select onchange=”alert(‘pippo’);”>…</select>
  21. 21. Form - input• onsubmit → quando si invia la form<form name=”pippo” onsubmit=”alert(‘pippo’);”>• onfocus → quando lelemento diventa attivo<input type=”text” onfocus=”alert(‘pippo’);”>• onblur → quando lelemento non è più attivo<input type=”text” onblur=”alert(‘pippo’);”>
  22. 22. Possiamo gestire gli eventi in modo migliore? <a onclick=”alert(‘pippo’);”>Vogliamo separare il codice dellevarie tecnologie...
  23. 23. 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>
  24. 24. addEventListeneraddEventListener() permette di impostaredelle funzioni che verranno chiamate alverificarsi dellevento specificato,sulloggetto specificato(target dellevento).https://developer.mozilla.org/it/docs/DOM/element.addEventListener
  25. 25. 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>
  26. 26. 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.
  27. 27. 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);    } 
  28. 28. 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);}
  29. 29. Rimuovere eventiSe serve possoanche rimuovere glieventi attraverso ilmetodo:removeEventListener
  30. 30. Le form sono il principale metodo che ha lutente per interagire con il sito.
  31. 31. Form
  32. 32. document.form
  33. 33. 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"
  34. 34. 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.
  35. 35. Metodi Formform.submitInvia il form.form.resetRiporta il form al suo stato iniziale.
  36. 36. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me

×