JavaScript

1,672 views

Published on

Introduzione a JavaScript

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,672
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
93
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaScript

  1. 1. Sviluppo applicazioni web e linguaggio HTML LEZIONE 02JAVASCRIPT
  2. 2. JavaScript? E’ un linguaggio discripting lato-client, interpretato da un browser web
  3. 3. A cosa serve?Rende le nostre pagine interattive Rispondono alle azioni degli utenti
  4. 4. CLIENT SERVER Quando l’elaborazione è a carico del server
  5. 5. CLIENT SERVER Quando l’elaborazione è a carico del client
  6. 6. • Come standard nasce alla fine degli anni 90 Standardizzazione del Microsoft linguaggio da parte Sun Microsystem e propone 2 dell’ECMA(1) Java linguaggi Nasce ECMAScript Sviluppatori di alternativi Mosaic: primo Mosaic VBScript e Adozione e browser a fondano Netscape Jscript in riconoscimento dello interfaccia Netscape Navigator 2.0 e Internet standard da parte grafica Communicatio JavaScript 1.0 Explorer 3.0 dell’ISO(2) n Corporation 1992 1994 1995 1996 1997/1998 (1) ECMA – European Computer Manufacturers Association (2) ISO – Internation Organization for Standardization Quando è nato?
  7. 7. • Nella pagina HTML dentro un tag <script>: <script type=‘text/javascript’> … </script> 1 Da preferire per mantenere la separazione tra codice 2 HTML e codice di scriptingSe JavaScript ècoinvolto nellacostruzione dellayout dellapagina Dove scrivo il codice JavaScript?
  8. 8. • In file esterni (file di testo con estensione .js) – Per alleggerire la pagina HTML – Per utilizzare il codice in più pagine – Per ottimizzare il caricamento delle pagine con lo stesso codice (il file viene salvato nella cache del browser – se attiva)• Il codice viene reso disponibile nella pagina attraverso la seguente sintassi prima della fine del tag <head> <script type="text/javascript" src=“my_first_jsfile.js"></script> Dove scrivo il codice javascript???
  9. 9. Hello World!…<script type=‘text/javascript’> alert(‘Hello World!’);</script></head>…
  10. 10. (2) Hello World!…</head><script type=‘text/javascript’> document.write(‘Hello World!’);</script>…
  11. 11. un po’ di codice ……<script type=‘text/javascript’> var d = new Date(); var time = d.getHours(); if (time < 18) { document.write(‘<h1>Buongiorno</h1>’); } else { document.write(‘<h1>Buonasera</h1>’); }</script>…
  12. 12. meglio se in una funzione:…function greetings() { var d = new Date(); var time = d.getHours(); if (time < 18) { document.write(‘<h1>Buongiorno</h1>’); } else { document.write(‘<h1>Buonasera</h1>’); }}…
  13. 13. • Una variabile dichiarata all’interno di una funzione ha validità locale per quella funzione• Se dichiaro una variabile esternamente questa ha validità globale• Se non dichiaro la variabile non viene fatta distinzione tra locale e globale e assume validità su tutta la pagina Ambito delle variabili
  14. 14. • Il DOM descrive come i diversi oggetti di una pagina sono collegati tra loro <html> <head> <body> <title> <meta> <ul> <h1> <li> <li> Document Object Model
  15. 15. DOMTutto il contenuto presente in una paginaHTML è rappresentato da un document
  16. 16. DOMTutto il contenuto presente in una paginaHTML è rappresentato da un document, ildocument è costituito da nodi
  17. 17. DOMTutto il contenuto presente in una paginaHTML è rappresentato da un document, ildocument è costituito da nodi, ogni tag èun nodo di tipo element
  18. 18. <span class=“nota”> Struttura di un nodo </span> element span textattribute Struttura di un class=“nota” nodo
  19. 19. proprietà di un nodonodeValue childNodesIl valore salvato nel Insieme dei nodi figlinodo (eccetto per il del nodo correntetipo element) firstChild Primo nodo figlio delnodeType nodo correnteIl tipo di nodo, ovveroTEXT, ELEMENT oATTRIBUTE espresso in lastChildnumero Ultimo nodo figlio del nodo corrente
  20. 20. Il DOM può essere manipolato con JavaScript al fine di modificare ilcontenuto di una pagina HTML
  21. 21. <p id=‘ora’>Ore 17:33</p>1• Recupero l’elemento tramite l’id: var d = new Date(); var el = document.getElementById(‘ora’); var text = el.firstChild; text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes(); Modificare il testo di un elemento
  22. 22. <p id=‘ora’>Ore 17:33</p>2• Passo al primo nodo figlio per avere il testo var d = new Date(); var el = document.getElementById(‘ora’); var text = el.firstChild; text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes(); Modificare il testo di un elemento
  23. 23. <p id=‘ora’>Ore 17:33</p>3• Assegno tramite la proprietà nodeValue il nuovo valore: var d = new Date(); var el = document.getElementById(‘ora’); var text = el.firstChild; text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes(); Modificare il testo di un elemento
  24. 24. mase vogliamo fare lecose per bene …
  25. 25. <p id=‘ora’>Ore 17:33</p>2• Rimuovo tutti gli elementi figli del nodo corrente var d = new Date(); var el = document.getElementById(‘ora’); while(el.firstChild){ el.removeChild(el.firstChild); } … Modificare il testo di un elemento
  26. 26. <p id=‘ora’>Ore 17:33</p>3• Creo un nuovo nodo di tipo testo var d = new Date(); var el = document.getElementById(‘ora’); while(el.firstChild){ el.removeChild(el.firstChild); } var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes(); var textNode = document.createTextNode(text); Modificare il testo di un elemento
  27. 27. <p id=‘ora’>Ore 17:33</p>4• Aggiungo il nuovo nodo al nodo principale var d = new Date(); var el = document.getElementById(‘ora’); while(el.firstChild){ el.removeChild(el.firstChild); } var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes(); var textNode = document.createTextNode(text); el.appendChild(textNode); Modificare il testo di un elemento
  28. 28. Scriviamo unafunzione cheimposti tutti i linkdella pagina affinché siaprano su una nuovafinestra ( target=‘_blank’ )
  29. 29. 1• Recupero tutti gli elementi <a>: function a_InBlank() { var links = document.getElementsByTagName(‘a’); for(var i=0;i<links.length;i++){ var a = links[i]; if(!a.getAttribute(‘target’)){ a.setAttribute(‘target’, ‘_blank’); } } } Modificare il testo di un elemento
  30. 30. 2• Per ogni elemento verifico se l’attributo target è già definito function a_InBlank() { var links = document.getElementsByTagName(‘a’); for(var i=0;i<links.length;i++){ var a = links[i]; if(!a.getAttribute(‘target’)){ a.setAttribute(‘target’, ‘_blank’); } } } Modificare il testo di un elemento
  31. 31. 3• Se non è già stato definito, imposto il valore a _blank function a_InBlank() { var links = document.getElementsByTagName(‘a’); for(var i=0;i<links.length;i++){ var a = links[i]; if(!a.getAttribute(‘target’)){ a.setAttribute(‘target’, ‘_blank’); } } } Modificare il testo di un elemento
  32. 32. 3• Se non è già stato definito, imposto il valore a _blank function a_InBlank() { var links = document.getElementsByTagName(‘a’); for(var i=0;i<links.length;i++){ var a = links[i]; if(!a.getAttribute(‘target’)){ a.setAttribute(‘target’, ‘_blank’); } } Posso scriverlo anche così: a.target = ‘_blank’; } Modificare il testo di un elemento
  33. 33. macome faccio a far eseguire lafunzione al caricamentodella pagina?
  34. 34. window.onload = a_InBlank</script></head><body>…
  35. 35. evento di caricamento della pagina window.onload = a_InBlank</script></head><body>…
  36. 36. evento di caricamento della pagina window.onload = a_InBlank</script></head> funzione assegnata come handler dell’evento<body>…
  37. 37. un eventoci dice che qualcosa è accaduto e noi possiamo decidere che cosa fare quando si verifica
  38. 38. onresizeonload onclick onmouseover onkeyup onmouseout onblur
  39. 39. • Prova a cliccare il pulsante … function trick() { var btn= document.getElementById(‘btn’); var y = Math.floor(Math.random() * 100); btn.style.position = ‘absolute’; btn.style.top = y + ‘px’; }; Questo è un event handler … <input type=‘button’ id=‘btn’ value=‘Clicca qui’ onmouseover=‘trick()’ onclick=‘alert(“Hai vinto!”)’ /> Giocare un po’ con gli eventi
  40. 40. HTML eJavaScript teniamoli separati
  41. 41. function trick() { var btn= document.getElementById(‘btn’); var y = Math.floor(Math.random() * 100); btn.style.position = ‘absolute’; btn.style.top = y + ‘px’; };…<input type=‘button’ id=‘btn’ value=‘Clicca qui’ onmouseover=‘trick()’ onclick=‘alert(“Hai vinto!”)’ />
  42. 42. function trickyButton() { var inputs = document.getElementsByTagName(‘input’); for(var i=0; i < inputs.length; i++){ var el = inputs[i]; if(el.className == ‘tricky’ && el.type == ‘button’) el.onmouseover = trick; }} Sovrascrive qualsiasi altro event handlerwindow.onload = trickyButtons; ! definito in precedenza
  43. 43. possiamo anchecontrollare il tempo e decidere esattamente quando far eseguire al browser le nostre funzioni
  44. 44. http://jsfiddle.net/SnbfM/
  45. 45. • Proviamo a simulare il funzionamento di un semaforo con JavaScript: – premendo il tasto V far scattare il verde – premendo il tasto R far arrivare il rosso – aggiungere il giallo tra il verde e il rosso con una attesa di 4 secondi Controllare il tempo con JavaScript
  46. 46. • Tutto l’HTML che ci serve: <h1>Semaforo</h1> <table id=‘semaphore’> <tr> <td id=‘red’ class=‘on’>&nbsp;</td> </tr> <tr> <td id=‘yellow’>&nbsp;</td> </tr> <tr> <td id=‘green’>&nbsp;</td> </tr> </table> Controllare il tempo con JavaScript
  47. 47. • Tutti i CSS che ci servono: #semaphore { #red.on { background-color:#000; background-color: red; margin:20px; } border-spacing:5px; } #yellow.on { background-color: #ffAE00; #semaphore td { } width:30px; height:30px; #green.on { background-color:#333; background-color: green; } } Controllare il tempo con JavaScript
  48. 48. 1• Adesso, intercettiamo con JavaScript la pressione di un tasto: function keyDown(e) { var key = String.fromCharCode(event.keyCode); if(key == V) { go(); } else if(key == R) { decelerate(); setTimeout(stop(),4000); } } document.onkeydown = keyDown; Controllare il tempo con JavaScript
  49. 49. 2• Scriviamo una funzione che spenga tutte le luci del semaforo: function clear() { var lights = document.getElementsByTagName(td); for(var i=0; i < lights.length; i++) { lights[i].className = ; } } Controllare il tempo con JavaScript
  50. 50. 3• Per concludere scriviamo le funzioni per cambiare gli stati del semaforo: function stop() { clear(); document.getElementById(red).className = on; } function decelerate() { clear(); document.getElementById(yellow).className = on; } function go() { if(!document.getElementById(yellow).className) { clear(); document.getElementById(green).className = on; } } Controllare il tempo con JavaScript
  51. 51. jquery
  52. 52. “change the way that you write JavaScript”document.getElementsByTagName(‘a’)lo possiamo scriverecosì:
  53. 53. Trova gli elementiusando i selettori CSSSeleziona per Id$(‘#semaphore’)Seleziona per class$(‘.on’)Seleziona per tipo di tag$(‘a’)Come con i CSS$(‘#semaphore td’)
  54. 54. Esegui un’operazionesugli elementi trovatiManipolazione del DOM.before(), .appendTo()Attributi.addClass(), .attr(), .val()Gestione eventi.click(), .bind()Animazioni.hide(), .fadeOut(), .animate()
  55. 55. function clear() { var lights = document.getElementsByTagName(td); for(var i=0; i < lights.length; i++) { lights[i].className = ; }} Rimuovo la classe specificafunction clear() { $(‘td’).removeClass(‘on’);}
  56. 56. • Vi ricordate il problema di assegnare un event handler all’evento onload senza sovrascriverne i precedenti? document.onload = a_InBlank;• Con jQuery diventa: $(document).ready(a_InBlank); oppure $(a_InBlank); Questo è unobtrusive JavaScript al 100% Eseguire codice al caricamento della pagina
  57. 57. CreditsLe immagini contenute in questa presentazionehanno licenza Creative CommonsSlide 7: http://www.flickr.com/photos/pisosantacruz/414375220/Slide 20: http://www.flickr.com/photos/32347177@N02/5438832695/Slide 37: http://www.flickr.com/photos/59951793@N00/2035571848/in/photostream/Slide 38: http://www.flickr.com/photos/gato-gato-gato/4166319893/in/photostream/Slide 40: http://www.flickr.com/photos/50251125@N08/6303643943/Slide 43: http://www.flickr.com/photos/28481088@N00/2641260615/in/photostream/Slide 44: http://www.flickr.com/photos/darko_pevec/2221561604/
  58. 58. Thank You MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it

×