Intro to JavaScript
1 like•250 views
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.
Intro to 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
- 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)