jQuery

Approccio didattico

Durante il corso verranno presentati gli argomenti sotto riportati mediante un approccio “evolutivo” basato sui seguenti passaggi:

  • Esposizione del problema da risolvere (semplice e focalizzato sul concetto);
  • Risoluzione del problema grazie all’introduzione di un nuovo concetto;
  • Discussione dei vantaggi e degli svantaggi della soluzione proposta;
  • Utilizzo degli svantaggi della soluzione come nuovo problema da risolvere.

Programma:

  1. Introduzione a jQuery
    • jQuery motto: "Write less, do more"
    • Concetti base: trova qualcosa, fai qualcosa
    • Compatibilità cross-browser
    • Unobtrusive Javascript
    • Come integrare jQuery
    • Versioni di jQuery
    • Versioni minified e non compressa
    • Concetti base 2: crea qualcosa, selezionalo, fai qualcosa
    • Lavorare in modalità standard o in modalità quasi-standard
  2. Core jQuery
    • Attendere che il DOM (Document Object Model) sia pronto
    • Eseguire codice jQuery quando la pagina è completamente caricata
    • Includere tutti i file Css prima di includere jQuery
    • Eseguire codice jQuery quando il DOM è interpretato senza usare ready()
    • Creare un alias per rinominare l’oggetto jQuery
    • Wrapper set, collection jQuery, oggetto jQuery o jQuery set
    • Concatenamento (chaining) in jQuery
  3. Selezione di oggetti
    • Selettori base
    • Selettori combinati
    • Selettore Wildcard
    • Selettore per gli attributi
    • Filtri
    • Miglioramento delle performance tramite il context
  4. Lavorare con il wrapper set
    • Determinare la dimensione di un set
    • Ottenere gli elementi di un set
    • Ottenere dei set per mezzo di relazioni
    • Frammentare un set
    • Filtrare gli elementi di un set
    • Scorrere gli elementi di un set
    • Interrompere il concatenamento (chaining) con metodi distruttivi
    • Operatore end() per uscire dalla "distruzione"
  5. CSS e stili
    • Aggiungere e rimuovere classi
    • Usare le proprietà degli stili Css
    • Leggere e modificare le dimensioni di un elemento
  6. Manipolare il DOM (modello della pagina)
    • Leggere e modificare l’html o il contenuto testuale
    • Leggere e modificare il valore dei controlli
    • Creare o spostare elementi all’inizio del contenuto
    • Creare o spostare elementi alla fine del contenuto
    • Creare o spostare elementi prima o dopo un elemento
    • Altri metodi per creare o spostare elementi
  7. Eventi
    • Storia: il modello ad eventi del DOM a Livello 0
    • Storia: il modello ad eventi del DOM a Livello 2
    • Il modello ad eventi di jQuery
    • Associare gestori di evento
    • Interrompere il bubbling e prevenire le azioni semantiche standard
    • Delegare eventi
    • Gestori di evento eseguiti una volta sola
    • Rimuovere i gestori di evento
    • Ispezionare l’istanza di un evento
    • Avviare gestori di evento
    • Metodi "scorciatoia"
    • Eventi personalizzati
  8. Animazioni ed effetti
    • Mostrare e nascondere elementi
    • Animare elementi
    • Mostrare e nascondere elementi gradualmente
    • Sfumare elementi
    • Far scorrere elementi in alto e in basso
    • Animazioni personalizzate
    • Animazioni e accodamento
    • Animazioni, codice "generale" e accodamento
    • Fermare le animazioni
  9. Ajax
    • Richieste XHR native rispetto al supporto ajax di jQuery
    • Caricare contenuto negli elementi
    • Serializzare i dati delle form
    • Richieste GET e POST
    • Ottenere dati JSON
    • Richieste AJAX con pieno controllo
    • Impostazioni standard
    • Eventi AJAX