CONTENUTI DEL CORSO

Il corso si compone di 171 video lezioni, 17 dispense e 4 esercizi da scaricare al termine di ogni capitolo.

Indice dettagliato del corso:

INTRODUZIONE AL CORSO
• Requisiti del corso
• TEXT Indice del corso
• Domande, Recensioni e Aggiornamento del corso
• JavaScript ed Ecmascript

HTML
• Introduzione al linguaggio HTML
• Visual Studio Code e gli altri…
• Configurazione di Visual Studio Code
• !DOCTYPE, html e body + Anteprima
• Paragrafi, Intestazioni e Line Breaks
• Grassetto, corsivo e sottolineato
• Citazioni
• Tabelle
• Liste
• Immagini
• Collegamenti ipertestuali (Link)
• Introduzione al tag Head
• Title
• Meta description
• Meta keywords
• Meta robots
• Altri tag Meta
• Base, Link, Script e Style
• Introduzione allo standard HTML5
• Div
• Header
• Nav
• Section
• Article
• Footer
• Aside
• Figure

CSS3
• Introduzione ai fogli di stile (CSS)
• Sintassi dei fogli di stile
• EXTRA HTML: Span
• Struttura di un foglio di stile con selettori di tipo
• Selettori di class e ID
• Selettori di pseudo-classe e pseudo-elemento
• Selettori di gerarchia e attributo
• CSS in una pagina HTML
• Colorazione del testo
• Sfondo della pagina
• Bordi nella pagina
• Margini esterni ad un elemento
• Margini interni ad un elemento
• Caratteri del testo
• Commenti al foglio di stile
• Altezza e Larghezza
• Proprietà Display
• Posizionamento nella pagina
• Eccedenza e Indice di profondità

CSS3 AVANZATI
• Colorazione esadecimale e RGB
• Proprietà avanzate dello sfondo
• Immagini nel bordo
• Bordi arrotondati e ombreggiatura
• EXTRA HTML: Gestione dei caratteri del testo con Google Font
• Gestione avanzata delle proprietà testuali
• BONUS: Animazioni con CSS3
• Responsive Design: Media Queries

PRIMI PASSI CON JAVASCRIPT
• Impostazione iniziale di JavaScript
• Variabili locali e globali
• Tipi di Dati e Accenni al DOM
• Data e Ora
• Eventi
• ESERCIZIO #1
• SOLUZIONE ESERCIZIO #1

APPROFONDIAMO GLI OPERATORI DI JAVASCRIPT
• Introduzione agli Operatori
• Operatori di Assegnazione
• Lista degli operatori di assegnazione principali
• Operatori di Confronto
• Lista degli operatori di confronto principali
• Operatori Matematici
• Lista degli operatori matematici principali
• Math e metodi di arrotondamento (ES6)
• ESERCIZIO #2
• SOLUZIONE ESERCIZIO #2
• Operatori Stringa
• Lista degli operatori stringa principali
• Operatori Logici / Booleani
• Lista degli operatori logici / booleani principali
• Ordine di priorità nell’utilizzo di un operatore
• ESERCIZIO #3
• SOLUZIONE ESERCIZIO #3

CREIAMO UNA FUNZIONE CON JAVASCRIPT
• Introduzione alle Funzioni
• EXTRA: Let e Const (ES6) vs Var
• Come “funziona” una funzione
• Funzioni annidate
• Creazione di un oggetto tramite funzione con “this”
• Console.log + Yield
• Funzioni Arrow (ES6)
• Funzioni predefinite
• Lista delle funzioni predefinite principali

CICLI E ISTRUZIONI CONDIZIONALI IN JAVASCRIPT
• Introduzione alle Istruzioni condizionali e Iterazioni
• Istruzione IF
• Istruzione SWITCH
• Istruzione ciclica DO WHILE
• Istruzione ciclica WHILE
• Istruzione ciclica FOR
• EXTRA: Throw, Try, Catch e la gestione degli errori
• Label, Break e Continue
• ESERCIZIO #4
• SOLUZIONE ESERCIZIO #4

PROGETTO DRINK BUT NOT DRUNK
• Introduzione al progetto
• Impostazione del documento HTML
• Impostazione del foglio CSS
• Impostazione della funzione JavaScript

APPROFONDIAMO GLI OGGETTI JAVASCRIPT
• Introduzione agli Oggetti
• Proprietà e Metodi di Oggetti
• Lista dei metodi di oggetti stringa principali
• Gestione dei Numeri con l’oggetto Number
• Lista dei metodi di oggetti numerici e matematici principali
• Metodi statici: Assign e non solo…
• Lista dei metodi statici principali
• Costruttori, Prototipi ed Ereditarietà
• EXTRA: Object Create (Metodo statico)
• Le classi, Getter e Setter (ES6)
• Riconoscimento e conversione tipi di dati
• Metodi per conversioni da stringa a numero e viceversa
• ESERCIZIO #5
• SOLUZIONE ESERCIZIO #5

OGGETTO ARRAY E ESPRESSIONI REGOLARI (REGEXP) IN JAVASCRIPT
• Creazione di un Array
• Metodi inclusi negli Array (ES5)
• Concatenare, Ordinare e Convertire un Array
• Metodo ForEach (ES5)
• Lista dei metodi di array principali
• ESERCIZIO #6
• SOLUZIONE ESERCIZIO #6
• Array multidimensionali
• Ricerca negli Array
• Creazione di una espressione regolare
• Pattern (modelli) di espressioni regolari
• Lista di elementi dei pattern nelle espressioni regolari
• Associazione tra espressioni regolari e metodi
• Due metodi delle espressioni regolari
• Lista di esempi classici di utilizzo delle espressioni regolari
• Istruzioni cicliche e Array: FOR … IN e FOR … OF (ES6)
• ESERCIZIO #7
• SOLUZIONE ESERCIZIO #7

MANIPOLIAMO IL DOM CON JAVASCRIPT
• Introduzione al DOM
• document e le proprietà degli elementi
• Lista delle proprietà di document
• document e i metodi di manipolazione
• Oggetto HTMLCollection
• document e I metodi per creare ed eliminare
• document per i fogli di stile
• Lista dei metodi di document
• ESERCIZIO #8
• SOLUZIONE ESERCIZIO #8
• EventListener: Add e Remove
• Nodi e gestione della navigazione
• Creazione ed eliminazione di un elemento
• queryselector e querySelectorAll (Oggetto NodeList)
• ESERCIZIO #9
• SOLUZIONE ESERCIZIO #9

JAVASCRIPT ASINCRONO E JAVASCRIPT OBJECT NOTATION
• Introduzione a JavaScript asincrono
• Introduzione a Json e sintassi
• Tipi di dati di Json
• Json.Parse (ES5): elaboriamo il file Json
• Json.Stringify (ES5)
• Cicli di Array e Oggetti di Json
• Json Validator
• Fetch API e Promise
• Callback e SetTimeout
• Approfondimento Promise + Async e Await (ES8)
• EXTRA: GeoLocation API

PROGETTO ROCK-PAPER-SCISSOR (Morra Cinese)
• Introduzione al progetto
• Impostazione del documento HTML
• Impostazione del foglio CSS
• querySelector e classList: Introduzione al gioco
• Funzione playvs
• Comparazione delle scelte di gioco
• Aggiornamento del risultato e Restart
• Fine del gioco
• Giochiamo!

JAVASCRIPT ECMASCRIPT 2015 TO 2020
• Filter, Map e Reduce
• String Padding
• Object Entries e Values
• Array Includes
• ESERCIZIO #10
• SOLUZIONE ESERCIZIO #10

PROGETTO CLOCK WIDGET
• Introduzione al progetto
• Introduzione a Moment.js
• Orologio con il tuo fuso orario: HTML
• Orologio con il tuo fuso orario: CSS
• Orologio con il tuo fuso orario: Script JS
• Orologi di diversi fusi orari: HTML
• Orologi di diversi fusi orari: CSS
• Orologi di diversi fusi orari: Script JS

CONTENUTI AGGIUNTIVI
• L’utilizzo di Google e Stack Overflow