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

• © 2007—2024  Ilya Kantor
• riguardo il progetto
• contattaci