Embed Size (px)
Citation preview
Introduzione a JavaScript
Disclaimer
In questa presentazioni ci sono informazioniparziali, JavaScript è molto di più di ciò chesi legge in queste slides.L’intenzione è di “capire” di cosa stiamoparlando, senza essere dogmatici.
• 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
• Modificare le pagine.• Creare nuovi elementi.• Gestire interazioni complesse.• Chiamare servizi esterni.• Aggiornare porzioni di pagina.• E molto altro…
Per cosa si usa JavaScript?
• Server (node.js)• Database• Applicazioni
(tradotte al volo in HTML)• Arduino, Raspberry (node.js)
Altri usi di JavaScript
Getting started
I file JavaScript vengono richiamati con un tag specifico
JavaScript Engine
• Ogni browser interpreta JS• Diversi engine per interpretare JS:
Chrome ha V8 Firefox ha SpiderMonkeyEdge ha ChakraCore
• Operazioni svolte a velocità diverse• Browser più vecchi hanno bisogno di
istruzioni specifiche.
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
Parliamo del DOM
DOM
Document Object Model
DOM
Quando una pagina viene caricata da un browser, questo costruisce una sorta di “mappa” della paginain cui ogni “nodo” é modificabile
da JavaScript
DOM
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
Selezionare elementi del DOM
Console.log()
Utilizzeremo console.log per stamparedei valori nella console del browser
Variabili
Le variabili sono utilizzate per tenere inmemoria dei valori.
Per esempio:
Tipi di Valori
• Numeri ( 1, 5, 0, -10, etc )• Stringhe ( “Una stringa” )• Boolean ( true, false )
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
Operazioni di comparazione
Quando si comparano valori si ha comerisultato un valore booleano, true o false.
• console.log( 5 > 3 )• console.log( “this” != “that” )• console.log( true == false )
Funzioni
Una funzione è un insieme di istruzioni,raggruppate con un nome comune.
Funzioni - Returning Values
Quando una funzione produce un valore,si dice che “ritorna” un valore. Un valore vieneritornato usando “return”.
Funzioni - Argomenti
E’ possibile passare uno o più valori (argomenti)ad una funzione per fare in modo che vengano utilizzati all’interno della funzione.
If … else
Utilizzando una sintassi if … else possiamofare in modo che il programma scelga duestrade a seconda di alcune condizioni
While Loop
For Loop
Function Scopes
L’ambito in cui sono disponibili le variabili è relativo alla funzione dentro cui vengono create.Una variabile creata all’interno di una funzionenon sarà disponibile all’esterno.
Variabili Globali
Se tutte le variabili fossero condivise da tuttoil programma, si avrebbe con facilità un problema di conflitto di variabili in programmianche non troppo complessi.
Le variabili condivise in tutto il programmasono chiamate globali
Variabili Globali e Locali
Unicità delle variabili locali
Le variabili create all’interno di una funzione,“vivono” al suo interno e vengono createogni volta che la funzione viene chiamata.Ognuna di queste variabili viene detta “istanza”.
Avranno lo stesso nome, ma in realtà avrannodegli identificativi diversi.
Funzioni come valori
Le funzioni possono essere “passate” in giroper il nostro programma come se fosserovalori.
Ritornare Funzioni
Le funzioni possono anche essere “ritornate”all’interno di altre funzioni.
Array e Oggetti
Mentre numeri, booleani e stringhe sonocome dei Lego, abbiamo strutture piùcomplesse (data structures) che ci aiutano acostruire cose più complesse.
Array
Nota: il primo numero di un array è 0, non 1!
Metodi per Array
Ci sono vari metodi (che sono delle funzioni)che possono essere usati con gli array senzache vengano programmati:
Oggetti
Gli oggetti sono delle strutture più complesserispetto agli array, e sono utilizzabili con il“chaining” (il punto).
Oggetti
Usando il chaining possiamo aggiungere elementi a un oggetto…
Oggetti
E possiamo rimuoverli con delete.
Eventi
Gli eventi sono interazioni che avvengonocon gli elementi HTML:
Click, hover, tap, swipe, scroll, keypress,submit, load… soon tutti event a cut possiamocollegare del codice da eseguire.
Eventi
Per semplicità, andremo ad utilizzarejQuery, che semplifica di molto l’uso degli eventi.
https://api.jquery.com/category/events/
jQuery - selezionare elementi
Quando vogliamo andare a selezionare unelemento per poi modificarlo o eseguire delleazioni, lo andiamo a prendere in questo modo:
jQuery - chaining
Una volta selezionato un elemento, possiamomanipolarlo attraverso il chaining.
jQuery - Eventi
Una volta selezionato un elemento, possiamoeseguire delle funzioni quando avviene un evento
jQuery API
jQuery offre tantissime possibilità pronte da usare.
Sul sito di jQuery tutto è ben documentato.
https://api.jquery.com/
Risorse
• Eloquent Javascript• Let’s learn ES6 (videos)• jQuery API• Learn jQuery (videos)
