{"id":670,"date":"2016-11-17T18:48:29","date_gmt":"2016-11-17T17:48:29","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/javascript-per-web-designers\/"},"modified":"2016-11-17T18:48:29","modified_gmt":"2016-11-17T17:48:29","slug":"javascript-per-web-designers","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/javascript-per-web-designers\/","title":{"rendered":"JavaScript per Web Designers: DOM scripting"},"content":{"rendered":"
\n

Nota degli editori:<\/strong> Siamo lieti di condividere un estratto dal Chapter 5 del nuovo libro di Mat Marquis, JavaScript for Web Designers<\/cite>, disponibile ora presso A Book Apart<\/a>.<\/p>\n<\/div>\n

Prima di fare qualunque cosa con una pagina, voi ed io dobbiamo parlare di qualcosa di molto importante: il Document Object Model. Ci sono due scopi per il DOM: fornire a JavaScript una mappa di tutti gli elementi sulla nostra pagina e darci un insieme di metodi per accedere a questi elementi, ai loro attributi e al loro contenuto.<\/p>\n

Tuttavia, la parte \u201cobject\u201d di Document Object Model dovrebbe avere molto pi\u00f9 senso adesso che quando \u00e8 apparso il DOM per la prima volta: il DOM \u00e8 una rappresentazione di una pagina web sotto forma di un oggetto, composto da propriet\u00e0 che rappresentano ciascuna gli elementi figlio del documento e sotto-propriet\u00e0 che rappresentano ciascuno degli elementi figlio di quegli elementi figlio, e cos\u00ec via. Sono oggetti fino in fondo.<\/p>\n

\n

window<\/code>: il Global Context<\/h2>\n

Tutto quello che facciamo con JavaScript ricade all’interno dello scope di un singolo oggetto: window<\/code>. L’oggetto window<\/code> rappresenta, in maniera piuttosto intuibile, l’intera finestra del browser. Contiene l’intero DOM, cos\u00ec come – e questa \u00e8 la parte delicata – l’intero JavaScript.<\/p>\n

Quando abbiamo parlato per la prima volta di scope delle variabili, abbiamo sfiorato il concetto dell’esistenza di uno scope \u201cglobale\u201d e di uno \u201clocale\u201d, il che significa che una variabile pu\u00f2 essere disponibile o in tutte le parti dei nostri script o solo nelle funzioni in cui sono incluse.<\/p>\n

L’oggetto window<\/code> \u00e8<\/em> quello scope globale. Tutte le funzioni e metodi creati in JavaScript sono creati a partire dall’oggetto window<\/code>. Non dobbiamo far riferimento a window<\/code> costantemente, ovviamente, o l’avreste visto spesso prima di adesso, dal momento che window<\/code> \u00e8 lo scope globale, JavaScript controlla window<\/code> per ogni variabile che non abbiamo definito noi stessi. In effetti, l’oggetto console<\/code>, che spero adesso conosciate e amiate, \u00e8 un metodo dell’oggetto window<\/code>:<\/p>\n

window.<\/span>console.<\/span>log\nfunction<\/span> log(<\/span>)<\/span> {<\/span> [<\/span>native code]<\/span> }<\/span><\/code><\/pre>\n
\u00c8 difficile visualizzare le variabili con scope globale o locale prima di conoscere window<\/code>, ma \u00e8 molto pi\u00f9 semplice dopo: quando introduciamo una variabile nello scope globale, la stiamo rendendo una propriet\u00e0 di window<\/code> e, dal momento che non dobbiamo esplicitamente referenziare window<\/code> ogni volta che accediamo ad una delle sue propriet\u00e0 o metodi, possiamo chiamare quella variabile ovunque nei nostri script usando semplicemente il suo identificatore. Quando accediamo a un identificatore, questo \u00e8 quello che stiamo in realt\u00e0 facendo:<\/p>\n
function<\/span> ourFunction(<\/span>)<\/span> {<\/span>\n    var<\/span> localVar =<\/span> \"I\u2019m local.\"<\/span>;<\/span>\n    globalVar =<\/span> \"I\u2019m global.\"<\/span>;<\/span>\n\n    return<\/span> \"I\u2019m global too!\"<\/span>;<\/span>\n}<\/span>;<\/span><\/code>\nundefined<\/samp>\n\nwindow.<\/span>ourFunction(<\/span>)<\/span>;<\/span><\/code>\nI\u2019m global too!<\/samp>\n\nwindow.<\/span>localVar;<\/span><\/code>\nundefined<\/samp>\n\nwindow.<\/span>globalVar;<\/span><\/code>\nI\u2019m global.<\/samp><\/pre>\n
L’intera rappresentazione della pagina del DOM \u00e8 una propriet\u00e0 di window<\/code>: nello specifico, window.document<\/code>. Scrivere semplicemente window.document<\/code> nella developer console ritorna tutto il markup della pagina attuale in una stringa enorme, il che non \u00e8 particolarmente utile, ma si pu\u00f2 accedere a tutto sulla pagina come sotto-propriet\u00e0 di window.document<\/code> nello stesso identico modo. Ricordatevi che non dobbiamo specificare window<\/code> per accedere alla propriet\u00e0 del document<\/code>: window<\/code> \u00e8 unico nel suo genere, dopo tutto.<\/p>\n
document.<\/span>head\n<<\/span>head><\/span>.<\/span>.<\/span>.<\/span><<\/span>\/<\/span>head><\/span>\n\ndocument.<\/span>body\n<<\/span>body><\/span>.<\/span>.<\/span>.<\/span><<\/span>\/<\/span>body><\/span><\/code><\/pre>\n
Quelle due propriet\u00e0 sono esse stesse oggetti che contengono propriet\u00e0 che sono oggetti e cos\u00ec via. (\u201cIn un certo senso, tutto \u00e8 un oggetto\u201d).<\/p>\n
Usare il DOM<\/h2>\n
Gli oggetti in window.document<\/code> costituiscono la mappa del documento di JavaScript, ma non \u00e8 molto utile per noi, perlomeno non quando stai cercando di accedere ai nodi DOM nel modo in cui accederesti ad ogni altro oggetto. Muoverci manualmente attraverso l’oggetto document<\/code> sarebbe per noi un gran mal di testa e per questo motivo i nostri script cadrebbero completamente a pezzi non appena cambia un qualsiasi pezzo nel markup.<\/p>\n
Tuttavia, window.document<\/code> non \u00e8 una semplice rappresentazione della pagina: ci fornisce anche una API pi\u00f9 smart per accedere a quelle informazioni. Per esempio, se vogliamo trovare ogni elemento p<\/code> sulla pagina, non dobbiamo scrivere una stringa di property keys, ma usare un metodo helper presente all’interno di document<\/code> che li riunisce tutti quanti per noi in un elenco simile ad un array. Aprite un qualunque sito di vostra scelta, purch\u00e9 sia probabile che abbia almeno uno o due elementi paragrafo al suo interno e provate questo nella vostra console:<\/p>\n
document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\n[<\/span><<\/span>p><\/span>.<\/span>.<\/span>.<\/span><<\/span>\/<\/span>p><\/span>,<\/span> <<\/span>p><\/span>.<\/span>.<\/span>.<\/span><<\/span>\/<\/span>p><\/span>,<\/span> <<\/span>p><\/span>.<\/span>.<\/span>.<\/span><<\/span>\/<\/span>p><\/span>,<\/span> <<\/span>p><\/span>.<\/span>.<\/span>.<\/span><<\/span>\/<\/span>p><\/span>]<\/span><\/code><\/pre>\n
Dal momento che abbiamo a che fare dei tipi di dati cos\u00ec familiari, abbiamo gi\u00e0 una mezza idea di come lavorare con loro:<\/p>\n
var<\/span> paragraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nundefined\n\nparagraphs.<\/span>length\n4<\/span>\n\nparagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n<<\/span>p><\/span>.<\/span>.<\/span>.<\/span><<\/span>\/<\/span>p><\/span><\/code><\/pre>\n
I metodi DOM per\u00f2 non ci ritornano degli array in senso stretto. Metodi come getElementsByTagName<\/code> ritornano \u201cliste di nodi\u201d che si comportano in maniera molto simile agli array. Ogni item in una nodeList<\/code> fa riferimento a un singolo nodo nel DOM, come un p<\/code> o un div<\/code> e ha un numero di metodi specifici del DOM “built-in”. Per esempio, il metodo innerHTML<\/code> ritorna qualsiasi markup contenga un nodo (elementi, testo e cos\u00ec via) come una stringa:<\/p>\n
var<\/span> paragraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>,<\/span>\n    lastIndex =<\/span> paragraphs.<\/span>length \u2013 1<\/span>,<\/span> 
<\/code>\t\t\t<\/span>\/* Use the length of the `paragraphs`
\t\t\t<\/span>node list minus 1 (because of zero-indexing)
\t\t\t<\/span>to get the last paragraph on the page *\/<\/span>\n    lastParagraph =<\/span> paragraphs[<\/span> lastIndex ]<\/span>;<\/span> \n\nlastParagraph.<\/span>innerHTML;<\/span>\nAnd that\u2019s how I spent my summer vacation.<\/span><\/code><\/pre>\n
\"Fig<\/p>\n
\u00a0<\/p>\n
Fig 5.1: Le prime bozze sono sempre difficili.<\/p>\n
\u00a0<\/p>\n
Nello stesso modo in cui questi metodi ci danno accesso alle informazioni sulla pagina resa, cos\u00ec ci permettono anche di alterare quell’informazione. Per esempio, il metodo innerHTML<\/code> fa questo nello stesso modo in cui cambieremmo il valore di un qualsiasi altro oggetto: con un semplice segno di uguale seguito dal nuovo valore.<\/p>\n
var<\/span> paragraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>,<\/span>\n    firstParagraph =<\/span> paragraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nfirstParagraph.<\/span>innerHTML =<\/span> \"Listen up, chumps:\"<\/span>;<\/span>\n\"Listen up, chumps:\"<\/span><\/code><\/pre>\n
La mappa del DOM di JavaScript funziona in entrambe le direzioni: document<\/code> viene aggiornato ogni volta che cambia il markup e il nostro markup viene aggiornato ogniqualvolta qualcosa cambia all’interno di document<\/code> (Fig 5.1).<\/p>\n
In maniera simile, la DOM API ci fornisce un certo numero di metodi per creare, aggiungere e rimuovere elementi. Sono tutti sillabati in inglese corrente, perci\u00f2, anche se possono sembrare un po’ verbosi, non sono troppo difficili da scomporre.<\/p>\n
DOM Scripting<\/h2>\n
Prima di cominciare, abbandoniamo la developer console per un attimo. Secoli fa, abbiamo costruito passo passo un template HTML molto basilare che richiama uno script remoto e adesso ne rivedremo le impostazioni. Con la conoscenza che avete acquisito finora su JavaScript e con l’introduzione al DOM, abbiamo finito di dire alla console di ripeterci le cose come un pappagallo: \u00e8 ora di creare qualcosa.<\/p>\n
Aggiungeremo un \u201ctaglio\u201d a una pagina index piena di testo: un paragrafo con un’anteprima seguito da un link per mostrare l’intero testo. Per\u00f2 non faremo navigare l’utente verso un’altra pagina, ma, al contrario, useremo JavaScript per mostrare l’intero testo sulla stessa pagina.<\/p>\n
Cominciamo con l’impostare un documento HTML che si collega ad un foglio di stile esterno e ad un file esterno dello script, nulla di che. Entrambe i files, lo stylesheet e lo script, sono per ora vuoti e hanno le estensioni .css e .js. Mi piace tenere i miei CSS in una sotto-directory \/css e i miei JavaScript in una sotto-directory \/js, ma siete liberi di fare come preferite.<\/p>\n
<!DOCTYPE html><\/span>\n<<\/span>html<\/span>><\/span><\/span>\n    <<\/span>head<\/span>><\/span><\/span>\n        <<\/span>meta<\/span> charset<\/span>=<\/span>\"<\/span>utf-8\"<\/span><\/span>><\/span><\/span>\n        <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\/css\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>css\/style.css\"<\/span><\/span>><\/span><\/span>\n    <\/<\/span>head<\/span>><\/span><\/span>\n    <<\/span>body<\/span>><\/span><\/span>\n\n        <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>js\/script.js\"<\/span><\/span>><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span><\/span>\n    <\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre>\n
Popoleremo quella pagina con svariati paragrafi di testo. Un qualunque pezzo di testo che trovate in giro va bene, incluso, con le mie scuse per i content strategist tra il pubblico, il buon vecchio lorem ipsum. Stiamo semplicemente simulando una rapida pagina per un articolo, come un blog post.<\/p>\n
<!DOCTYPE html><\/span>\n<<\/span>html<\/span>><\/span><\/span>\n    <<\/span>head<\/span>><\/span><\/span>\n        <<\/span>meta<\/span> charset<\/span>=<\/span>\"<\/span>utf-8\"<\/span><\/span>><\/span><\/span>\n        <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\/css\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>css\/style.css\"<\/span><\/span>><\/span><\/span>\n    <\/<\/span>head<\/span>><\/span><\/span>\n    <<\/span>body<\/span>><\/span><\/span>\n        <<\/span>h1<\/span>><\/span><\/span>JavaScript for Web Designers<\/<\/span>h1<\/span>><\/span><\/span>\n\n        <<\/span>p<\/span>><\/span><\/span>In all fairness, I should start this book with an
\t<\/span>apology\u2014not to you, reader, though I don\u2019t doubt that
\t<\/span>I\u2019ll owe you at least one by the time we get to the
\t<\/span>end. I owe JavaScript a number of apologies for the
\t<\/span>things I\u2019ve said to it during the early years of my
\t<\/span>career, some of which were strong enough to etch glass.<\/<\/span>p<\/span>><\/span><\/span>\n\n        <<\/span>p<\/span>><\/span><\/span>This is my not-so-subtle way of saying that JavaScript
\t<\/span> can be a tricky thing to learn.<\/<\/span>p<\/span>><\/span><\/span>\n\n        [ \u2026 ]\n\n        <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>js\/script.js\"<\/span><\/span>><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span><\/span>\n    <\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre>\n
Siete liberi di aprire lo stylesheet e giocare con la tipografia, ma non distraetevi troppo. Dovremo scrivere un po’ di CSS pi\u00f9 tardi, ma adesso abbiamo dello scripting da fare.<\/p>\n
Possiamo suddividere questo script in qualche task discreto: dobbiamo aggiungere un link \u201cRead More\u201d al primo paragrafo, dobbiamo nascondere tutti gli elementi p<\/code> tranne il primo e dobbiamo mostrare quegli elementi nascosti quando l’utente interagisce con il link \u201dRead More\u201d.<\/p>\n
Cominceremo con l’aggiungere il link \u201dRead More\u201d alla fine del primo paragrafo. Aprite il vostro file script.js ancora vuoto ed inserite quanto segue:<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span><\/code><\/pre>\n
Innanzitutto, stiamo inizializzando la variabile newLink<\/code>, che usa document.createElement( \"a\" )<\/code> per – proprio come dice sulla confezione – creare un nuovo elemento a<\/code>. Questo elemento non esiste ancora da nessuna parte: per far s\u00ec che appaia sulla pagina dovremo aggiungerlo manualmente. Ancora prima per\u00f2, <a><\/a><\/code> senza alcun attributo o contenuto non \u00e8 molto utile. Prima di aggiungerlo alla pagina, popoliamolo con tutte le informazioni di cui ha bisogno.<\/p>\n
Potremmo fare questo dopo<\/em> aver aggiunto il link al DOM, ovviamente, ma non ha senso fare molteplici aggiornamenti all’elemento sulla pagina invece che un aggiornamento che aggiunga il risultato finale: fare tutto il lavoro su quell’elemento prima di metterlo nella pagina ci aiuta a mantenere il nostro codice prevedibile.<\/p>\n
Fare un singolo viaggio nel DOM quando \u00e8 possibile \u00e8 inoltre migliore per la performance, ma \u00e8 facile essere ossessionati dalle micro-ottimizzazioni della performance. Come avete visto, JavaScript offre frequentemente pi\u00f9 modi per fare la stessa cosa e uno di questi metodi potrebbe tecnicamente<\/em> avere prestazioni migliori dell’altro. Questo porta invariabilmente a codice \u201ceccessivamente intelligente\u201d, loop complicati che richiedono spiegazioni di persona perch\u00e9 abbiano senso, semplicemente per limare dei preziosi picosecondi al tempo di caricamento. L’ho fatto, mi sorprendo ancora a farlo, ma voi non dovreste provarci. Quindi, mentre fare quanti meno andirivieni dal DOM possibili \u00e8 una buona abitudine da crearsi per il bene della performance, la ragione principale \u00e8 che mantiene il nostro codice leggibile e prevedibile. Facendo dei viaggi al DOM solo quando ne abbiamo davvero bisogno, evitiamo di ripeterci e rendiamo pi\u00f9 ovvi i nostri punti di interazione con il DOM per i futuri maintainer dei nostri script.<\/p>\n
Ok. Torniamo al nostro <a><\/a><\/code> vuoto e senza attributi che fluttua nell’etere di JavaScript, totalmente indipendente dal nostro documento.<\/p>\n
Ora possiamo usare due altre interfacce DOM per rendere quel link pi\u00f9 utile: setAttribute<\/code> per assegnargli gli attributi e innerHTML<\/code> per popolarlo con del testo. Questi hanno una sintassi leggermente differente. Possiamo semplicemente assegnare una stringa usando innerHTML<\/code>, nel modo in cui assegneremmo un valore ad ogni altro oggetto. D’altro canto, setAttribute<\/code> si aspetta due argomenti: l’attributo e<\/em> il valore che vogliamo assegnare a quell’attributo, in questo ordine. Dal momento che non pianifichiamo nessuna destinazione per il nostro link, imposteremo solo un cancelletto (hash) come href<\/code>, un link alla pagina su cui ci troviamo gi\u00e0.<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span><\/code><\/pre>\n
Avrete notato che stiamo usando queste interfacce nel nostro riferimento memorizzato all’elemento invece che a document<\/code> stesso. Tutti<\/em> i nodi del DOM hanno accesso ai metodi come quelli che stiamo usando qui, usiamo document.getElementsByTagName( \"p\" )<\/code> solamente perch\u00e9 vogliamo ottenere tutti gli elementi paragrafo nel documento. Se solo volessimo ottenere tutti gli elementi paragrafo all’interno di un certo div<\/code>, potremmo fare la stessa cosa con una reference a quel div<\/code>, qualcosa come ourSpecificDiv.getElementsByTagName( \"p\" );<\/code>. E dal momento che vogliamo impostare l’attributo href<\/code> e l’HTML interno del link che abbiamo creato, facciamo riferimento a queste propriet\u00e0 usando newLink.setAttribute<\/code> e newLink.innerHTML<\/code>.<\/p>\n
Poi: vogliamo che questo link appaia alla fine del nostro primo paragrafo, quindi il nostro script avr\u00e0 bisogno di un modo per far riferimento a quel primo paragrafo. Sappiamo gi\u00e0 che document.getElementsByTagName( \"p\" )<\/code> ci d\u00e0 una node list di tutti i paragrafi nella pagina. Dal momento che le node list si comportano come array, possiamo far riferimento al primo item nella node list uno usando l’indice 0<\/code>.<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\nvar<\/span> allParagraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nvar<\/span> firstParagraph =<\/span> allParagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span><\/code><\/pre>\n
Per mantenere il nostro codice leggibile, \u00e8 una buona idea inizializzare le nostre variabili in cima allo script, anche solo inizializzandole a undefined<\/code> (assegnandogli un identificatore ma nessun valore), se pianifichiamo di assegnarli un valore in seguito. In questo modo conosciamo tutti gli identificatori in gioco.<\/p>\n
Quindi, adesso abbiamo tutto quello che ci serve per appendere un link alla fine del primo paragrafo: l’elemento che vogliamo appendere (newLink<\/code>) e l’elemento che vogliamo appendergli (firstParagraph<\/code>).<\/p>\n
Uno dei metodi built-in su tutti i nodi del DOM \u00e8 appendChild<\/code>, che, come suggerisce il nome, ci permette di appendere un elemento figlio a quel nodo del DOM. Chiameremo quindi il metodo appendChild<\/code> sulla nostra reference salvata al primo paragrafo nel documento, passandogli newLink<\/code> come argomento.<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\nvar<\/span> allParagraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nvar<\/span> firstParagraph =<\/span> allParagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span>\n\nfirstParagraph.<\/span>appendChild(<\/span> newLink )<\/span>;<\/span><\/code><\/pre>\n
Ora, finalmente, abbiamo qualcosa a cui poter puntare quando ricarichiamo la pagina. Se tutto \u00e8 andato secondo il nostro piano, adesso dovremmo avere un link \u201dRead more\u201d alla fine del primo paragrafo sulla pagina. Se tutto non \u00e8 andato secondo i piani – a causa di un punto e virgola messo male o di parentesi non accoppiate, per esempio – la developer console vi avviser\u00e0 che qualcosa \u00e8 andato storto, quindi assicuratevi di tenerla aperta.<\/p>\n
Ci siamo quasi, ma non \u00e8 troppo bello: il nostro link \u00e8 appiccicato al paragrafo che lo precede, dal momento che il link \u00e8  display: inline<\/code> di default (Fig 5.2).<\/p>\n
\"Beh,<\/p>\n
\u00a0<\/p>\n
Fig 5.2: Beh, \u00e8 un inizio.<\/p>\n
\u00a0<\/p>\n
Abbiamo un paio di opzioni per gestire questa cosa: non entrer\u00f2 nei dettagli di tutte le varie sintassi qui, ma il DOM vi d\u00e0 anche accesso alle informazioni di stile<\/em> degli elementi, sebbene, nella sua forma pi\u00f9 basica, ci permette solo di leggere e cambiare le informazioni di stile associate all’attributo style<\/code>. Giusto per capire un attimo come funziona, cambiamo il link a display: inline-block<\/code> e aggiungiamo alcuni pixel di margine nel lato sinistro, cos\u00ec che non collida con il nostro testo. Proprio come l’impostazione degli attributi, lo faremo prima di aggiungere il link alla pagina:<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\nvar<\/span> allParagraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nvar<\/span> firstParagraph =<\/span> allParagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span>\nnewLink.<\/span>style.<\/span>display =<\/span> \"inline-block\"<\/span>;<\/span>\nnewLink.<\/span>style.<\/span>marginLeft =<\/span> \"10px\"<\/span>;<\/span>\n\nfirstParagraph.<\/span>appendChild(<\/span> newLink )<\/span>;<\/span><\/code><\/pre>\n
Bene, aggiungere quelle righe ha funzionato<\/em>, ma non senza un paio di inghippi. Per prima cosa, parliamo della sintassi (Fig 5.3).<\/p>\n
\"Adesso<\/p>\n
\u00a0<\/p>\n
Fig 5.3: Adesso si ragiona.<\/p>\n
\u00a0<\/p>\n
Ricordate che gli identificatori non possono contenere trattini e, dal momento che tutto \u00e8 una (specie) di oggetto, il DOM fa anche riferimento agli stili nel formato a oggetto. Ogni propriet\u00e0 CSS che contenga un trattino diventa invece \u201ccamel-cased\u201d: margin-left<\/code> diventa marginLeft<\/code>, border-radius-top-left<\/code> diventa borderRadiusTopLeft<\/code> e cos\u00ec via. Tuttavia, dal momento che il valore<\/em> che impostiamo per queste propriet\u00e0 \u00e8 una stringa, i trattini vanno bene. Un po’ strano e un’altra cosa da ricordare, ma \u00e8 tutto piuttosto gestibile, di sicuro non una ragione per evitare di assegnare stili in JavaScript, se la situazione lo rende assolutamente necessario.<\/p>\n
Una ragione migliore per evitare gli stili in JavaScript \u00e8 di mantenere una separazione tra comportamento e presentazione. JavaScript \u00e8 il nostro \u201cbehavioral\u201d layer nel modo in cui il CSS \u00e8 il nostro \u201cpresentational\u201d layer e spesso i due si devono incontrare. Cambiare stili su una pagina non dovrebbe significare cercare qualcosa riga dopo riga di funzioni e variabili, cos\u00ec come non vorremmo seppellire gli stili nel nostro markup. Le persone che potrebbero finire a mantenere gli stili del sito potrebbero non essere completamente a loro agio ad editare JavaScript e, dal momento che cambiare gli stili in JavaScript significa che stiamo indirettamente aggiungendo stili con l’attributo style<\/code>, qualsiasi cosa scriviamo in uno script, di default sovrascriver\u00e0 i contenuti di un foglio di stile.<\/p>\n
Possiamo mantenere questa separazione di interessi usando invece di nuovo setAttribute<\/code> per dare al nostro link una classe. Quindi, eliminiamo quelle due righe con gli stili e aggiungiamone una al loro posto che imposti la classe.<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\nvar<\/span> allParagraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nvar<\/span> firstParagraph =<\/span> allParagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>setAttribute(<\/span> \"class\"<\/span>,<\/span> \"more-link\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span>\n\nfirstParagraph.<\/span>appendChild(<\/span> newLink )<\/span>;<\/span><\/code><\/pre>\n
Adesso possiamo assegnare degli stili a .more-link<\/code> nel nostro foglio di stile come al solito:<\/p>\n
.more-link <\/span>{<\/span>\n    display<\/span>:<\/span> inline-block;<\/span>\n    margin-left<\/span>:<\/span> 10px;<\/span>\n}<\/span><\/code><\/pre>\n
Molto meglio (Fig 5.4). Conviene tenere a mente, per il futuro, che usare setAttribute<\/code> in questo modo su un nodo nel DOM significa sovrascrivere qualsiasi classe sia gi\u00e0 presente sull’elemento, ma questo non \u00e8 un problema quando si mette insieme un elemento da zero.<\/p>\n
\"Nessun<\/p>\n
\u00a0<\/p>\n
Fig 5.4: Nessun cambiamento visibile, ma questo cambiamento mantiene le decisioni di stile nel CSS e le decisioni sul comportamento in JavaScript.<\/p>\n
\u00a0<\/p>\n
Ora siamo pronti a spostarci sul secondo item della nostra to do list: nascondere tutti gli altri paragrafi.<\/p>\n
Poich\u00e9 abbiamo fatto dei cambiamenti a del codice che sappiamo che funzionava gi\u00e0, assicuratevi di ricaricare la pagina per essere sicuri che tutto funzioni ancora secondo le aspettative. Non vogliamo introdurre un bug qui e continuare a scrivere codice, o alla fine ci impantaneremo in tutti i cambiamenti che abbiamo fatto. Se tutto \u00e8 andato secondo i piani, la pagina dovrebbe risultare uguale quando adesso la ricarichiamo.<\/p>\n
Adesso abbiamo una lista di tutti i paragrafi sulla pagina e abbiamo bisogno di agire su ciascuno di essi. Abbiamo bisogno di un loop e, dal momento che stiamo iterando su una node list simile a un array, abbiamo bisogno di un ciclo for<\/code>. Giusto per essere sicuri che il loop funzioni correttamente, facciamo un log di ogni paragrafo nella console prima di procedere:<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\nvar<\/span> allParagraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nvar<\/span> firstParagraph =<\/span> allParagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>setAttribute(<\/span> \"class\"<\/span>,<\/span> \"more-link\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span>\n\nfor<\/span>(<\/span> var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> allParagraphs.<\/span>length;<\/span> i++<\/span> )<\/span> {<\/span>\n    console.<\/span>log(<\/span> allParagraphs[<\/span> i ]<\/span> )<\/span>;<\/span>\n}<\/span>\n\nfirstParagraph.<\/span>appendChild(<\/span> newLink )<\/span>;<\/span><\/code><\/pre>\n
Il vostro link Read More dovrebbe ancora essere nel primo paragrafo come al solito e la vostra console dovrebbe essere piena di testo di riempimento (Fig 5.5).<\/p>\n
\"Fig<\/p>\n
\u00a0<\/p>\n
Fig 5.5: Sembra che il nostro loop si stia comportando a dovere.<\/p>\n
\u00a0<\/p>\n
Adesso dobbiamo nascondere quei paragrafi con display: none<\/code> e abbiamo un paio di opzioni: potremmo usare una class nel modo in cui abbiamo fatto prima, ma non sarebbe un’idea terribile usare gli stili in JavaScript per questo scopo. Stiamo controllando tutto il meccanismo mostra e nascondi dal nostro script e non accadr\u00e0 mai che vorremo questo comportamento sovrascritto da qualcosa in un foglio di stile. In questo caso, ha senso usare i metodi built-in del DOM per applicare gli stili:<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\nvar<\/span> allParagraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nvar<\/span> firstParagraph =<\/span> allParagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>setAttribute(<\/span> \"class\"<\/span>,<\/span> \"more-link\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span>\n\nfor<\/span>(<\/span> var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> allParagraphs.<\/span>length;<\/span> i++<\/span> )<\/span> {<\/span>\n    allParagraphs[<\/span> i ]<\/span>.<\/span>style.<\/span>display =<\/span> \"none\"<\/span>;<\/span>\n}<\/span>\n\nfirstParagraph.<\/span>appendChild(<\/span> newLink )<\/span>;<\/span><\/code><\/pre>\n
Se adesso ricarichiamo la pagina, sar\u00e0 tutto sparito: il nostro JavaScript fa un loop in tutta la lista di paragrafi e li nasconde tutti. Dobbiamo fare un’eccezione per il primo paragrafo e questo significa logica condizionale, una dichiarazione if<\/code> e la variabile i<\/code> ci d\u00e0 un valore semplice con cui controllare:<\/p>\n
var<\/span> newLink =<\/span> document.<\/span>createElement(<\/span> \"a\"<\/span> )<\/span>;<\/span>\nvar<\/span> allParagraphs =<\/span> document.<\/span>getElementsByTagName(<\/span> \"p\"<\/span> )<\/span>;<\/span>\nvar<\/span> firstParagraph =<\/span> allParagraphs[<\/span> 0<\/span> ]<\/span>;<\/span>\n\nnewLink.<\/span>setAttribute(<\/span> \"href\"<\/span>,<\/span> \"#\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>setAttribute(<\/span> \"class\"<\/span>,<\/span> \"more-link\"<\/span> )<\/span>;<\/span>\nnewLink.<\/span>innerHTML =<\/span> \"Read more\"<\/span>;<\/span>\n\nfor<\/span>(<\/span> var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> allParagraphs.<\/span>length;<\/span> i++<\/span> )<\/span> {<\/span>\n\n    if<\/span>(<\/span> i ==<\/span>=<\/span> 0<\/span> )<\/span> {<\/span>\n            continue<\/span>;<\/span>\n    }<\/span>\n    allParagraphs[<\/span> i ]<\/span>.<\/span>style.<\/span>display =<\/span> \"none\"<\/span>;<\/span>\n}<\/span>\n\nfirstParagraph.<\/span>appendChild(<\/span> newLink )<\/span>;<\/span><\/code><\/pre>\n
Se questa \u00e8 la prima volta nel loop, la parola chiave continue<\/code> salta il resto dell’iterazione corrente e poi, a differenza di usare break<\/code>, il loop continua verso l’iterazione seguente.<\/p>\n
Se adesso ricaricate la pagina, avremo un solo paragrafo con un link \u201dRead More\u201d alla fine, ma tutti gli altri saranno nascosti. Fin qui tutto bene e, se non avete ottenuto lo stesso risultato, controllate attentamente la console per essere sicuri che non manchi nulla.<\/p>\n
Ora che avete una solida base nel DOM, andiamo davvero<\/em> a fondo per vedere dove ci porta.<\/p>\n
Vuoi saperne di pi\u00f9?<\/h2>\n
Il resto di questo capitolo (oltre a quello che avete appena letto) va ancora pi\u00f9 nel dettaglio ed \u00e8 solo un capitolo della guida pratica di Mat per aiutarvi con il vostro attuale progetto. Date un’occhiata a JavaScript for Web Designers<\/cite> su A Book Apart<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\u00c8 innegabile l’abilit\u00e0 di JavaScript nell’accedere a e nel modificare gli elementi sulla pagina e il Document Object Model \u00e8 un componente essenziale di tutto questo. In questo estratto dal nuovo libro di Mat Marquis, JavaScript for Web Designers, Mat ci mostra in che modo manovrare il DOM per ottenere risultati migliori dai nostri script.<\/p>\n","protected":false},"author":818,"featured_media":7000812,"comment_status":"open","ping_status":"open","template":"","categories":[271,160],"tags":[],"coauthors":[352],"class_list":["post-670","article","type-article","status-publish","has-post-thumbnail","hentry","category-javascript","category-numero-182-18-novembre-2016"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000812"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=670"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}