Conoscere

• conoscere le funzionalità base del DOM
• conoscere e comprendere l’importanza ed il funzionamento del Unobtrusive JavaScript
• conoscere e saper utilizzare jQuery nelle sue funzionalità base

window e document

Tra le variabili disponibili nello spazio globale Javascript in un pagina web ci sono ‘window’, che rappresenta la finestra/tab contenente la pagina, e ‘document’, che rappresenta il documento stesso.

window E’ lo spazio globale:

• window contiene un riferimento a se stesso
• window contiene un riferimento a document

window e document

DOM Navigation

DOM Navigation

DOM Navigation

nodeType può corrispondere al valore di una delle seguenti costanti:

DOM Navigation

DOM Traversing

DOM Traversing

DOM Attribute and Style Modify

DOM Element Creation, Inserting and Removing

DOM Element Creation, Inserting and Removing

DOM Event Handling

DOM Event Handling

DOM Event Handling

Tipi di eventi:

• MouseEvents (click, mousedown, mouseup, mouseover, mousemove, mouseout)

• MutationEvents (DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified)

• HTMLEvents (load, unload, abort, error, reset, select, focus, blur, resize, scroll)

jQuery

• Perchè usare un framework javascript?
• jQuery: come, quando e perchè?
• Unobtrusive JavaScript
• jQuery by Examples

Perchè usare un framework javascript?

• appianare le differenze/incompatibilità tra le implementazioni di ECMAScript / DOM / CSS tra i vari browser
• aggiunta di nuovi costrutti al linguaggio, funzioni di utilità
• semplificazione di procedure macchinose
• implementazione di design pattern e best pratices

jQuery: come, quando e perchè? (1/3)

• Dual licensed: GPL / MIT

• leggero e piuttosto veloce

• semplice e documentato

  • Documentazione e Manuali
  • API reference

• discreto ed estendibile

• sviluppatori

  • John Resig
  • Very active forum

jQuery: come, quando e perchè? (2/3)

• real world usecases:

  • Google, Dell, Digg, Technorati
  • mozilla.org, Drupal, Wordpress
  • BBC, Newsweek

jQuery: come, quando e perchè? (3/3)

jQuery semplifica i patterni più comuni delle applicazioni javascript client-side:

• selezione degli elementi
• aggiornamento degli attributi e manipolazione dei CSS
• creazione e copia degli elementi della pagina
• visualizzare, nascondere ed animare gli elementi

Il tutto implementato mediante metaprogrammazione Javascript, completamente multibrowser e sotto le sembianze di un maneggevole DSL.

Unobtrusive Javascript

Inizialmente era l’HTML…

semplici pagine di testo statiche, con la possibilità di includere delle immagini e link ipertestuali tra le pagine HTML

nelle pagine HTML venivano a mescolarsi contenuto e stile…

Unobtrusive Javascript

poi arrivarono i CSS allo scopo di separare lo stile (CSS) dal contenuto (HTML) e i tag e gli attributi che applicavano lo stile all’interno dell’HTML entrarono in deprecazione…

Unobtrusive Javascript

Ma con l’ingresso di Javascript l’HTML ne è risultato nuovamente contaminato… questa volta era il comportamento (behaviour) a mescolarsi con il contenuto:

Unobtrusive Javascript

I benefici ottenibili separando il compartamento (behaviour) dal contenuto sono paragonabili se non superiori a quelli ottenuti separandone lo stile con i CSS.

ex0. jquery minimal page

Ogni release di jQuery viene rilasciata in due formati:

• PRODUCTION (Minified)
• DEVELOPMENT (Uncompressed)

La release corrente è la versione 1.4.2

ex0. jquery minimal page

ex1. jquery wrapper

Il centro dell’API di jQuery è il factory pattern costituito dal jQuery wrapper:

jQuery e il suo alias abbreviato $

ex2. document ready handler

• molte delle operazioni che eseguiremo in javascript necessitano che il DOM sia stato completamente caricato
• window.onload è un handler standard presente a questo scopo, ma attende il caricamento di tutte le risorse (comprese immagini) e gli si può associare una sola callback
• jQuery().ready al contrario controlla la sola completezza del DOM e può essere usato ripetutamente senza rischi

ex3. select elements from page

• gli elementi posso essere selezionati mediante i comuni CSS selectors (sino a supportare caratteristiche relative a CSS3), espressioni XPATH e altri selector avanzati
• la selezione avviene mediante il solito jquery wrapper
• l’oggetto ritornato è un oggetto jquery wrapped contenente una notevole quantità di metodi di utilità oltre che gli oggetti DOM standard
• i metodi di utilità sono in grado di agire sia su singoli elementi selezionati che su liste di elementi in modo trasparente
• gli elementi selezionati possono essere ulteriormente filtrati

ex3. select elements from page

ex4. change attributes of selected elements

• aggiungere/rimuovere una class CSS
• manipolare lo stile CSS di una selezione
• cambiare il contenuto html di una selezione

ex5. create/copy new elements in the page

• creare nuovi elementi
• clonare elementi selezionati
• inserire elementi nella pagina
• eliminare elementi dalla pagina

ex6. event handling

ex7. animation effects

ex8. ajax query

Bibliografia

• Learning jQuery (Packt)
• jQuery Reference (Packt)
• jQuery in Action (Manning)

Link-ografia

1. DOM Level 2 Core Specification
2. DOM Level 3 Core Specification
3. DOM) Level 2 Events Specification
4. Traversing an HTML table with JavaScript and DOM Interfaces
5. http://docs.jquery.com/Main_Page
6. http://api.jquery.com/