Your SlideShare is downloading. ×

JavaScript

1,174

Published on

Introduzione a JavaScript

Introduzione a JavaScript

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

  • Be the first to like this

No Downloads
Views
Total Views
1,174
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
69
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sviluppo applicazioni web e linguaggio HTML LEZIONE 02JAVASCRIPT
  • 2. JavaScript? E’ un linguaggio discripting lato-client, interpretato da un browser web
  • 3. A cosa serve?Rende le nostre pagine interattive Rispondono alle azioni degli utenti
  • 4. CLIENT SERVER Quando l’elaborazione è a carico del server
  • 5. CLIENT SERVER Quando l’elaborazione è a carico del client
  • 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. • 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. • 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. Hello World!…<script type=‘text/javascript’> alert(‘Hello World!’);</script></head>…
  • 10. (2) Hello World!…</head><script type=‘text/javascript’> document.write(‘Hello World!’);</script>…
  • 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. 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. • 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. • 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. DOMTutto il contenuto presente in una paginaHTML è rappresentato da un document
  • 16. DOMTutto il contenuto presente in una paginaHTML è rappresentato da un document, ildocument è costituito da nodi
  • 17. DOMTutto il contenuto presente in una paginaHTML è rappresentato da un document, ildocument è costituito da nodi, ogni tag èun nodo di tipo element
  • 18. <span class=“nota”> Struttura di un nodo </span> element span textattribute Struttura di un class=“nota” nodo
  • 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. Il DOM può essere manipolato con JavaScript al fine di modificare ilcontenuto di una pagina HTML
  • 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. <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. <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. mase vogliamo fare lecose per bene …
  • 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. <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. <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. Scriviamo unafunzione cheimposti tutti i linkdella pagina affinché siaprano su una nuovafinestra ( target=‘_blank’ )
  • 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. 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. 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. 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. macome faccio a far eseguire lafunzione al caricamentodella pagina?
  • 34. window.onload = a_InBlank</script></head><body>…
  • 35. evento di caricamento della pagina window.onload = a_InBlank</script></head><body>…
  • 36. evento di caricamento della pagina window.onload = a_InBlank</script></head> funzione assegnata come handler dell’evento<body>…
  • 37. un eventoci dice che qualcosa è accaduto e noi possiamo decidere che cosa fare quando si verifica
  • 38. onresizeonload onclick onmouseover onkeyup onmouseout onblur
  • 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. HTML eJavaScript teniamoli separati
  • 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. 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. possiamo anchecontrollare il tempo e decidere esattamente quando far eseguire al browser le nostre funzioni
  • 44. http://jsfiddle.net/SnbfM/
  • 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. • 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. • 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. 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. 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. 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. jquery
  • 52. “change the way that you write JavaScript”document.getElementsByTagName(‘a’)lo possiamo scriverecosì:
  • 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. Esegui un’operazionesugli elementi trovatiManipolazione del DOM.before(), .appendTo()Attributi.addClass(), .attr(), .val()Gestione eventi.click(), .bind()Animazioni.hide(), .fadeOut(), .animate()
  • 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. • 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. 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. Thank You MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it

×