Vorrei, di tanto in tanto, entrare meglio e più in dettaglio sul discorso jQuery. Le potenzialità di questo framework JS son tante e tali da doverle evidenziarle con un pò di teoria e molti esempi.
DOM
Se mi seguite, avrete visto come ogni tanto vi segnalo qualche plugin jQuery utile per il vostro blog, ma ora intendo approfondire l’argomento anche e soprattutto con qualche articolo step by step che segua un discorso logico e meglio articolato un pò come fatto per i fogli di stile css a suo tempo.
Prima di partire, però, credo sia necessario parlare di DOM ovvero di Document Object Model. Senza troppi giri di parole, citando Wikipedia :
DOM è lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma. DOM è inoltre la base per una vasta gamma delle interfacce di programmazione delle applicazioni; alcune di esse sono standardizzate dal W3C.
Il concetto é chiaro e cioè il DOM descrive in tutto e per tutto un modello gerarchico ad oggetti (tipo ad “albero”, tanto per semplificare la cosa) di quello che appare in una pagina HTML. Lo scopo é rendere facilmente accessibile ogni elemento della pagina e fornire metodi e attributi per operare su gli oggetti stessi.
Vediamo un esempio. Prendiamo il seguente semplice codice html :
<html>
<head>
<title>Il Mio primo Documento</title>
</head>
<body>
<h1>Header</h1>
<p>
Paragrafo
</p>
</body>
</html>
Quale sarebbe l’albero DOM del codice suddetto. Molto semplice :
Come vedete, si tratta di una rappresentazione gerarchica a tutti gli effetti che, logicamente, si complica con il crescere degli oggetto nella pagina html.
In sostanza, le possibilità messe a disposizione dal DOM son tante e tali che non solo si riesce a gestire ogni nodo, ma é possibile anche aggiungerne di nuovi oppure eliminarne alcuni già presenti.
È, inoltre, importante sottolineare un fatto : il DOM è indipendente dalla piattaforma e dal tipo di browser trattandosi di un’interfaccia definita direttamente dal W3C ed é lo strumento universale per tutti gli sviluppatori di pagine Web.
Document, element, node
Non volevo scendere troppo in dettaglio per non annoiarvi, ma lasciatemi concludere con i tre pilastri basilari del DOM : document, element e node
Come avrete intuito, il document è molto importante, perché è l’elemento che contiene tutti gli altri elementi del DOM. I metodi principali legati all’oggetto document si preoccupano di recuperare elementi nella pagina (getElementById() o getElementsByTagName()) e di creare nuovi elementi (createElement() o createTextNode())
Un elemento (element) si riferisce ad un elemento contraddistinto da un tag. Con tale definizione si intendono anche elementi che contengono altri elementi (ad esempio il tag TABLE, che può contenere tr e td ecc).
Il nodo (node), invece, include nella sua definizione tutti gli elementi, ma anche un testo o un semplice attributo. Quest’ultimo, quindi, non può avere altri attributi e non può contenere altri nodi.
Conclusioni
Ora che avete preso un minimo di dimestichezza e familiarità con il DOM, avrete meno difficoltà ad approcciare jQuery che, essendo Javascript, si basa fortemente sui conetti appena esposti.
Alla prossima, con i primi esempi jQuery!
