Il documento fornisce un'introduzione a JavaScript, delineando la sua storia, utilizzi e funzionalità principali, come la manipolazione del DOM e l'uso di librerie come jQuery. Viene spiegato come JavaScript interagisca con le pagine web e si affrontano concetti fondamentali come variabili, funzioni, e strutture dati. Infine, il documento accenna all'importanza di gestire eventi e fornisce risorse per ulteriori approfondimenti.

1. Introduzione a JavaScript

2. Disclaimer
In questa presentazioni ci sono informazioni
parziali, JavaScript è molto di più di ciò che
si legge in queste slides.
L’intenzione è di “capire” di cosa stiamo
parlando, senza essere dogmatici.

3. • Non ha a che fare con Java
• Sviluppato inizialmente nel 1995
• Ora sviluppato dall’ente ECMA
• Super diffuso (é in tutti i browser e oltre)
• Ne esistono varie versioni, stiamo iniziando
ad usare la versione 6.
(ES6 o ECMAScript 2015)
Qualche informazione di base

4. • Modificare le pagine.
• Creare nuovi elementi.
• Gestire interazioni complesse.
• Chiamare servizi esterni.
• Aggiornare porzioni di pagina.
• E molto altro…
Per cosa si usa JavaScript?

5. • Server (node.js)
• Database
• Applicazioni
(tradotte al volo in HTML)
• Arduino, Raspberry (node.js)
Altri usi di JavaScript

6. Getting started
I file JavaScript vengono richiamati con un tag specifico

7. JavaScript Engine
• Ogni browser interpreta JS
• Diversi engine per interpretare JS:
Chrome ha V8
Firefox ha SpiderMonkey
Edge ha ChakraCore
• Operazioni svolte a velocità diverse
• Browser più vecchi hanno bisogno di
istruzioni specifiche.

8. jQuery
• jQuery é una “libreria” JS
• jQuery fornisce un linguaggio unico più
semplice e compatibile con browser vecchi
• Comodo per chi già conosce CSS.
• jQuery viene “tradotto” in (vanilla) JS
• jQuery é piú lento di JS e pesa
80/100 Kb

9. You might not need jQuery…
youmightnotneedjquery.com

10. Parliamo del DOM

11. DOM
Document
Object
Model

12. DOM
Quando una pagina viene caricata
da un browser, questo costruisce
una sorta di “mappa” della pagina
in cui ogni “nodo” é modificabile
da JavaScript

13. DOM

14. DOM?
• Il DOM si compone di nodi e oggetti
• Il DOM non é JavaScript
• JavaScript usa il DOM per sapere come é
fatta la pagina
• JavaScript accede al DOM per modificarlo,
copiarlo, estenderlo

15. Selezionare elementi del DOM

16. Console.log()
Utilizzeremo console.log per stampare
dei valori nella console del browser

17. Variabili
Le variabili sono utilizzate per tenere in
memoria dei valori.
Per esempio:

18. Tipi di Valori
• Numeri ( 1, 5, 0, -10, etc )
• Stringhe ( “Una stringa” )
• Boolean ( true, false )

19. Operazioni di comparazione
Per comparare due valori, si usano questi
operatori, e il risultato è “vero” o “falso”:
• 5 > 3 // maggiore di
• 5 < 6 // minore di
• 5 <= 10 // minore o uguale
• 4 >= 10 // maggiore o uguale
• “ale” == “ale” // uguale a
• “ale” != “ale” // diverse da

20. Operazioni di comparazione
Quando si comparano valori si ha come
risultato un valore booleano, true o false.
• console.log( 5 > 3 )
• console.log( “this” != “that” )
• console.log( true == false )

21. Funzioni
Una funzione è un insieme di istruzioni,
raggruppate con un nome comune.

22. Funzioni - Returning Values
Quando una funzione produce un valore,
si dice che “ritorna” un valore. Un valore viene
ritornato usando “return”.

23. Funzioni - Argomenti
E’ possibile passare uno o più valori (argomenti)
ad una funzione per fare in modo che vengano
utilizzati all’interno della funzione.

24. If … else
Utilizzando una sintassi if … else possiamo
fare in modo che il programma scelga due
strade a seconda di alcune condizioni

25. While Loop

26. For Loop

27. Function Scopes
L’ambito in cui sono disponibili le variabili è
relativo alla funzione dentro cui vengono create.
Una variabile creata all’interno di una funzione
non sarà disponibile all’esterno.

28. Variabili Globali
Se tutte le variabili fossero condivise da tutto
il programma, si avrebbe con facilità un
problema di conflitto di variabili in programmi
anche non troppo complessi.
Le variabili condivise in tutto il programma
sono chiamate globali

29. Variabili Globali e Locali

30. Unicità delle variabili locali
Le variabili create all’interno di una funzione,
“vivono” al suo interno e vengono create
ogni volta che la funzione viene chiamata.
Ognuna di queste variabili viene detta
“istanza”.
Avranno lo stesso nome, ma in realtà avranno
degli identificativi diversi.

31. Funzioni come valori
Le funzioni possono essere “passate” in giro
per il nostro programma come se fossero
valori.

32. Ritornare Funzioni
Le funzioni possono anche essere “ritornate”
all’interno di altre funzioni.

33. Array e Oggetti
Mentre numeri, booleani e stringhe sono
come dei Lego, abbiamo strutture più
complesse (data structures) che ci aiutano a
costruire cose più complesse.

34. Array
Nota: il primo numero di un array è 0, non 1!

35. Metodi per Array
Ci sono vari metodi (che sono delle funzioni)
che possono essere usati con gli array senza
che vengano programmati:

36. Oggetti
Gli oggetti sono delle strutture più complesse
rispetto agli array, e sono utilizzabili con il
“chaining” (il punto).

37. Oggetti
Usando il chaining possiamo aggiungere
elementi a un oggetto…

38. Oggetti
E possiamo rimuoverli con delete.

39. Eventi
Gli eventi sono interazioni che avvengono
con gli elementi HTML:
Click, hover, tap, swipe, scroll, keypress,
submit, load… soon tutti event a cut possiamo
collegare del codice da eseguire.

40. Eventi
Per semplicità, andremo ad utilizzare
jQuery, che semplifica di molto l’uso degli
eventi.
https://api.jquery.com/category/events/

41. jQuery - selezionare elementi
Quando vogliamo andare a selezionare un
elemento per poi modificarlo o eseguire delle
azioni, lo andiamo a prendere in questo modo:

42. jQuery - chaining
Una volta selezionato un elemento, possiamo
manipolarlo attraverso il chaining.

43. jQuery - Eventi
Una volta selezionato un elemento, possiamo
eseguire delle funzioni quando avviene un evento

44. jQuery API
jQuery offre tantissime possibilità
pronte da usare.
Sul sito di jQuery tutto è ben documentato.
https://api.jquery.com/

45. Risorse
• Eloquent Javascript
• Let’s learn ES6 (videos)
• jQuery API
• Learn jQuery (videos)