Tag: conoscenza
Introduzione DOM e Javascript
La sinergia DOM e Javascript, tecnologie alla base di AJAX (Asynchronous JavaScript and XML), insieme ai fogli di stile permette la creazione di interfacce utente Web interattive e accattivanti, vediamo quindi di introdurne i principi fondamentali.
DOM
Il Document Object Model (DOM) è un insieme di interfacce di programmazione (API) che forniscono un modello strutturato per documenti XML e dialetti derivati, come XHTML (ovviamente anche HTML), nata dal lavoro del World Wide Web Consortium (W3C).
Prendiamo una pagina HTML può essere vista in un browser o il rispettivo codice sorgente in un editor di testo, in entrambi i casi è un documento a cui il DOM fornisce una rappresentazione equivalente fatta di nodi e oggetti ai quali attribuisce proprietà e metodi.
Consideriamo un paragrafo di una ipotetica pagina HTML:
può essere rappresentato con il seguente albero DOM:
Esistono element nodes, text nodes and attribute nodes e altri ancora ( comment nodes per esempio ), da notare che tra i nodi ci sono precise relazioni di parentela, nell'esempio riportato il nodo P è padre del nodo STRONG e del nodo di testo, questi ultimi quindi sono fratelli.
Per approfondire i dettagli delle specifiche DOM niente di meglio che leggerle direttamente sul documento ufficiale W3C.
Javascript
Ora passiamo al lato puramente programmativo, Javascript implementa nativamente le API DOM. Incorpora nell'oggetto document appunto l'albero DOM della pagina HTML corrente. Quindi di seguito un po' di codice Javascript esemplificativo.
Navigare l'abero DOM
JavaScript:
-
/*ottenere il nodo <strong>*/
-
var strong = document.getElementsByTagName('STRONG')[0];
-
-
/*raggiunre il nodo <strong>*/
-
var p = strong.parentNode;
-
-
/*infine il text node*/
-
var nodeList = p.childNodes;
-
var testo_semplice = nodeList[1];
NB: nel caso delle liste di nodi, sconsiglio di usare gli indici per raggiungere il nodo desiderato, poichè gli a capo vengono codificati come text node e potremmo quindi sbagliare i conti.
Modificare l'albero DOM
e quindi il relativo documento HTML.
JavaScript:
-
/*modificare il nodo <strong>*/
-
strong.firstChild.nodeValue='ModLorem';
-
-
/*eliminare il nodo <strong>*/
-
p.removeChild(strong);
-
-
/*creare un nuovo nodo <u>Lorem</u>*/
-
var u = document.createElement('U');
-
var testo = document.createTextNode('Lorem');
-
u.appendChild(testo);
Per avere i dettagli completi vi consiglio di visionare la Gecko DOM Reference.
In questo articolo ho voluto introdurre le basi concettuali che sostengono le applicazioni che prossimamente vi mostrerò! ;)
laboratorio caffeina - le origini
Perchè la caffeina è uno stimolante e la comunicazione deve essere stimolante, perchè la caffeina può migliorare la memoria e il ragionamento logico e memoria e ragionamento logico sono fondamentali per comunicare concretamente, perchè la caffeina crea una blanda dipendenza e noi ne siamo affetti.
Dal 1998, di fatto, Diego e io lavoriamo su progetti web.
Eravamo 2 ragazzini e abbiamo cominciato per passione.
Abbiamo creato i nostri progetti e li abbiamo portati avanti da autodidatti.
Con i limiti che ne conseguivano.
Poi gli anni sono passati e ora per entrambi è diventata una professione (seppure in città e ambiti diversi).
Il progetto di aprire un laboratorio di comunicazione web insieme è rimasto un sogno nel cassetto e quindi ci siamo ritagliati questo luogo virtuale in cui portiamo avanti i nostri progetti e condividiamo le conoscenze acquisite.
Un po' perchè scambiarsi 20 mail al giorno con "hai visto questo script?", "hai letto quell'articolo?", "cosa ne dici di questo?" alla lunga è pedante, un po' perchè crescendo professionalmente è cresciuta anche la cerchia di conoscenti, collaboratori, colleghi e amici che del web fanno un mestiere (o un hobby d'alto bordo).
Quindi abbiamo pensato di confrontarci e condividere.
La partecipazione è aperta a chiunque voglia collaborare.
