◐ Shell
Open
reader mode
source ↗
Show tasks
Il linguaggio JavaScript
Introduzione
Introduzione a JavaScript
Manuali e Specifiche
Code editor
Developer console
Le basi JavaScript
Hello, world!
Mostra un alert
Mostra un alert con uno script esterno
Struttura del codice
Le tecniche moderne, "use strict"
Variabili
Lavorare con le variabili
Scegliere il giusto nome
Costanti maiuscole?
Tipi di dato
Gli apici nelle stringhe
Interazioni: alert, prompt, confirm
Una semplice pagina
Conversione di tipi
Operatori di base
La forma post-fissa e pre-fissa
Risultato dell'assegnazione
Conversioni di tipo
Sistema l'addizione
Confronti
Confronti
Operatori condizionali: if, '?'
if (una stringa con zero)
Il nome di JavaScript
Mostra il segno
Riscrivi 'if' con '?'
Riscrivi 'if..else' con '?'
Operatori logici
Qual è il risultato dell'OR?
Qual è il risultato dell'alert con l'OR?
Qual è il risultato dell'AND?
Qual è il risultato degli alert?
Il risultato di OR AND OR
Controlla l'intervallo
Controlla l'intervallo fuori
Un indovinello con "if"
Controlla il login
Nullish coalescing operator '??'
Cicli: while e for
Valore all'ultimo ciclo
Quali valori mostrerà il ciclo while?
Quali valori verranno mostrati dal ciclo "for"?
Mostra i numeri pari con un ciclo 'for'
Sostituisci "for" con "while"
Ripeti fino a quando l'input è corretto
Mostra i numeri primi
L'istruzione "switch"
Riscrivi il costrutto "switch" come un "if"
Riscrivi "if" utilizzando "switch"
Funzioni
E' richiesto "else"?
Riscrivi la funzione utilizzando '?' o '||'
Funzione min(a, b)
Funzione pow(x,n)
Function expression
Arrow functions, le basi
Riscrivi usando le arrow functions
Specialità di JavaScript
Qualità del codice
Debugging in the browser
Stile di programmazione
Pessimo stile
Commenti
Codice ninja
Test automatici con Mocha
Cosa c'è di sbagliato in questo test?
Polyfills e transpilers
Oggetti: le basi
Oggetti
Hello, object
Controlla se è vuoto
Oggetti costanti?
Somma le proprietà dell'oggetto
Moltiplica le proprietà numeriche per 2
Oggetti: riferimento e copia
Garbage collection ("Spazzatura")
Metodi degli oggetti,"this"
Utilizzare "this" in un oggetto letterale
Create una calcolatrice
Concatenazione
Costruttore, operatore "new"
Due funzioni – un oggetto
Create una nuova Calculator
Create un nuovo Accumulator
Concatenamento opzionale '?.'
Il tipo Symbol
Conversione da oggetto a primitivi
Tipi di dato
Metodi dei tipi primitivi
Posso aggiungere una proprietà ad una stringa?
Numeri
Sommate i numeri forniti dall'utente
Perchè 6.35.toFixed(1) == 6.3?
Ripeti finché non viene inserito un numero
Un ciclo infinito occasionale
Un numero random fra min e max
Un intero casuale tra min e max
Stringhe
Prima lettera maiuscola
Controllo spam
Troncate il testo
Estraete il denaro
Array
L'array è stato copiato?
Operazioni sugli array.
Chiamata di funzione
Somma dei numeri inseriti
Il sub-array massimo
Metodi per gli array
Traducete border-left-width in borderLeftWidth
Filtri
Filtrare un range "sul post"
Riordinare in ordine decrescente
Copiare e ordinare un array
Create una calcolatrice estensibile
Map di nomi
Map di oggetti
Riordinare oggetti per età
Rimescolare un array
Ottenere l'età media+
Filtrare un array per ottenere elementi unici
Create un oggetto da un array
Iteratori
Map e Set
Filtrare gli elementi dell'array unici
Filtrare anagrammi
Chiavi iterabili
WeakMap e WeakSet
Memorizzare le bandiere non visualizzate
Memorizzare le date di lettura
Object.keys, values, entries
Sommare le proprietà
Conteggio proprietà
Assegnamento di destrutturazione
Assegnamento di destrutturazione
Il salario massimo
Date e time
Creare un oggetto date
Mostrare il giorno della settimana
Giorno della settimana Europeo
Quale giorno del mese era qualche giorno fa?
Ultimo giorno del mese?
Quanti giorni sono passati oggi?
Quanti secondi mancano a domani?
Formattare la data
Metodi JSON, toJSON
Trasformare l'oggetto in JSON e vice versa
Escludere contro-referenze
Gestione avanzata delle funzioni
Ricorsione e pila
Sommare tutti i numeri fino a quello dato
Calcolare il fattoriale
Successione di Fibonacci
Stampare una single-linked list
Stampare una single-linked list in ordine inverso
Parametri resto e operatore di espansione
Variable scope, closure
Does a function pickup latest changes?
Which variables are available?
Sono indipendenti i contatori?
Oggetto contatore
Funzionie interna ad if
Somma con le closure
Is variable visible?
Filter su funzioni
Ordinare per campo
Funzione crea eserciti
Il vecchio "var"
Oggetto globale
Oggetto funzione, NFE
Impostare e decrementare il contatore
Sommare con un numero arbitrario di parentesi
La sintassi "new Function"
Pianificazione: setTimeout e setInterval
Output ogni secondo
Cosa mostrerà setTimeout?
*Decorators* e forwarding, call/apply
decorator spia
decorator ritardante
Debounce decorator
Throttle decorator
Function binding
Funzione associata come metodo
Secondo bind
Proprietà della funzione dopo il bind
Correggi una funzione che ha perso "this"
Applicazione parziale per login
Arrow functions rivisitate
Configurazione delle proprietà dell'oggetto
Attributi e descrittori di proprietà
Proprietà getters e setters
Prototypes, inheritance
Prototypal inheritance
Lavorare con prototype
Algoritmo di ricerca
Dove andrà a scrivere?
Perché entrambi i criceti sono sazi?
F.prototype
Cambiare "prototype"
Crea un oggetto con lo stesso costruttore
Native prototypes
Aggiungi il metodo "f.defer(ms)" alle funzioni
Aggiungi il decorator "defer()" alle funzioni
Metodi di prototype, objects senza __proto__
Aggiungi toString al dizionario
La differenza tra chiamate
Classi
Sintassi base delle classi
Rewrite to class
Ereditarietà delle classi
Error creating an instance
Extended clock
Proprietà e metodi statici
Class extends Object?
Proprietà e metodi privati e protetti
Estendere le classi built-in
Verifica delle classi: "instanceof"
Uno strano instanceof
Mixins
Gestione degli errori
Gestione degli errori, "try...catch"
Finally o solamente il codice?
Errori personalizzati, estendere la classe Error
Eredita da SyntaxError
Promises, async/await
Introduzione: callbacks
Promise
Ri-risolvere (re-resolve) una promise?
Delay with a promise
Animated circle with promise
Concatenamento di promise (promise chaining)
Promise: then versus catch
Gestione degli errori con le promise
Error in setTimeout
Promise API
Promisification
Microtasks
Async/await
Rewrite using async/await
Riscrivere "rethrow" con async/await
Call async from non-async
Generators, iterazioni avanzate
I generatori
Pseudo-random generator
Iteratori e generatori asincroni
Moduli
Moduli, introduzione
Export e Import
Dynamic imports
Miscellaneous
Proxy e Reflect
Errore in lettura di una proprietà non esistente
Accesso ad un array[-1]
Observable
Eval: eseguire una stringa di codice
Eval-calculator
Currying
Il tipo Reference
Controllo di sintassi
Spiegate il valore di "this"
BigInt
Browser: Document, Eventi, Interfacce
Document
Il Browser come ambiente, specifiche
Alberatura DOM
Percorrere il DOM
Figli nel DOM
La questione dei fratelli
Seleziona tutte le celle sulla diagonale
Ricerca: getElement*, querySelector*
Ricerca degli elementi
Le proprietà del nodo: tipo, tag e contenuto
Contate i discendenti
Cosa contiene nodeType?
Tag nel commento
In che punto della gerarchia DOM si trova "document"?
Attributi e proprietà
Trova l'attributo
Rendi tutti i link esterni arancioni
Modificare il documento
createTextNode vs innerHTML vs textContent
Ripulisci l'elemento
Perché rimane "aaa"?
Crea una lista
Crea un albero da un oggetto
Mostra i discendenti dentro a un albero
Crea un calendario
Orologio colorato con setInterval
Inserisci l'HTML nella lista
Ordina la tabella
Stili e classi
Create un messaggio di notifica
Dimensioni dell'elemento e barra di scorrimento
Qual è la misura dello scorrimento verso il basso?
Qual è la larghezza della barra di scorrimento?
Posiziona la palla al centro del campo
Indica le differenze tra la proprietà width CSS e clientWidth
Dimensioni e scorrimento della finestra del browser
Coordinate
Trovate le coordinate del campo relative alla finestra
Mostrate una nota vicino l'elemento
Mostrate una nota vicino l'elemento (position:absolute)
Posizionate la nota all'interno (position:absolute)
Introduzione agli Eventi
Introduzione agli eventi del browser
Nascondere al click
Nascondere sé stesso
Quale gestore verrà eseguito?
Sposta la palla sul campo
Create un menù a scorrimento
Aggiungete un pulsante di chiusura
Carosello
Bubbling e capturing
Event delegation
Nascondere messaggi traminte delegation
Menù ad albero
Tabella ordinabile
Comportamento tooltip
Azioni predefinite del browser
Perché "return false" non funziona?
Catturare i links nell'elemento
Galleria di immagini
Dispatching di eventi personalizzati
Eventi UI
Eventi del mouse
Lista selezionabile
Movimenti del mouse: mouseover/out, mouseenter/leave
Comportamento del tooltip migliorato
"Smart" tooltip
Drag'n'Drop con gli eventi del mouse
Slider
Trascina i supereroi nel campo
Eventi del puntatore
Tastiera: keydown e keyup
Tasti di scelta rapida estesi
Scrolling
Pagina senza fine
Up/down button
Caricare immagini visibili
Forms, controls
Proprietà dei form e metodi
Aggiungi un opzione di select
Focusing: focus/blur
Div modificabile
Modificare un TD al click
Topo guidato dalla tastiera
Eventi: change, input, cut, copy, paste
Calcolo del deposito
Form: eventi e metodi di submit
Modal form
Document e caricamento delle risorse
Page: DOMContentLoaded, load, beforeunload, unload
Scripts: async, defer
Caricamento delle risorse: onload e onerror
Caricare immagini con una callback
Miscellaneous
Mutation observer
Selection e Range
Event loop: microtasks e macrotasks
Articoli aggiuntivi
Frames and windows
Metodi di popups e window
Comunicazione cross-window
L'attacco clickjacking
Binary data, files
ArrayBuffer, array binari
Concatenate TypedArrays
TextDecoder e TextEncoder
Blob
File e FileReader
Network requests
Fetch
Ricevi utenti da GitHub con Fetch
FormData
Fetch: Download progress
Fetch: Abort
Fetch: Cross-Origin Requests
Perchè è necessario Origin?
API Fetch
URL objects
XMLHttpRequest
Upload del file ripristinabile
Long polling
WebSocket
Server Sent Events
Memorizzare dati nel browser
Cookies, document.cookie
LocalStorage, sessionStorage
Autosave di un campo di un form
IndexedDB
Animazioni
Curve di Bezier
Animazioni CSS
Animate un aereo (CSS)
Animate il volo dell'aereo (CSS)
Animate il cerchio
Animate il cerchio con callback
Animazioni JavaScript
Fate rimbalzare la palla
Fate rimbalzare la palla verso destra
Web components
In alto, nell'orbita terrestre
Elementi personalizzati
Elemento live timer
Shadow DOM
Elemento Template
Shadow DOM slots, composition
Shadow DOM styling
Shadow DOM and events
Regular expressions
Pattern e flag
Classi di caratteri
Unicode: flag "u"
Inizio stringa ^ e fine $
Regexp ^$
Modo multilinea, flag "m"
Confine di parola: \b
Trovate l'orario
Escaping, caratteri speciali
Insiemi e intervalli [...]
Java[^script]
Trova l'orario come hh:mm o hh-mm
Quantificatori +, *, ? and {n}
Come trovare i puntini di sospensione "..." ?
Regexp per la ricerca di colori espressi in formato HTML
Modalità greedy e lazy dei quantificatori
Individuate la corrispondenza per /d+? d+?/
Trovate i commenti HTML
Trovate i tag HTML
I gruppi di acquisizione (capturing group)
Verificate il MAC-address
Trovate un colore nel formato #abc o #abcdef
Trovate tutti i numeri
Analizzate un'espressione
Riferimenti all'indietro (backreference) nei pattern: \N e \k<name>
Alternanza (OR) |
Trovate il nome dei linguaggi di programmazione
Trovate le coppie di bbtag
Trovate le stringhe tra doppi apici
Trovate l'intero tag
Lookahead e lookbehind
Trovate gli interi non negativi
Inserimento dopo la sezione head
Backtracking catastrofico
Sticky flag "y", ricerca della posizione
Metodi di RegExp e String