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