Sviluppo Web
Due tecniche segrete per permettere ai tuoi script JavaScript di girare correttamente in ogni situazione.
Due tecniche segrete per permettere ai tuoi script Javascript di girare correttamente in ogni situazione
Ricorda sempre questo punto fondamentale nella programmazione Web lato client: per funzionare correttamente, uno script Javascript non necessita solamente di essere scritto in maniera impeccabile! La sua collocazione all'interno della struttura HTML della tua pagina è un parametro altrettanto fondamentale.
Questa particolarità ha messo e mette in difficoltà moltissimi sviluppatori, che nonostante abbiano prodotto un codice tecnicamente privo di errori, si trovano a fronteggiare una situazione alquanto insolita: il programma non produce risultati. La domanda sorge spontanea: per quale motivo un codice corretto non produce concretamente il risultato per cui è stato realizzato? Questo quesito irrisolto ha spinto molti tecnici front-end a credere che il loro livello di programmazione non fosse abbastanza elevato per fronteggiare l'ostacolo, ma non sempre questo pensiero corrisponde alla verità.
Se anche tu sei incappato in questa fastidiosa situazione (ogni sviluppatore che ha calcato questa Terra ci è passato, anche più volte, nel corso della sua carriera), devi sapere che sei ad un passo dallo scoprire una rivelazione illuminante.
In questo articolo ti sveliamo infatti 2 importanti tecniche che ti permettono di risolvere definitivamente questa problematica, e ti lanciano di fatto nell'élite di sviluppatori che, comprendendo alla perfezione la relazione tra Javascript e struttura HTML, producono script funzionanti in ogni condizione.
Per arrivare a questo punto, devi prima sapere con certezza che uno degli scopi fondamentali del Javascript è proprio quello di collegarsi alla struttura HTML (e quindi ai suoi elementi). Uno script si produce tramite il tag HTML "script" che può essere collocato sia all'interno del tag "head" sia all'interno del tag "body".
Questa caratteristica lo rende unico nel panorama dei tag HTML: l'head ed il body, infatti, hanno compiti tecnicamente differenti. Il primo gestisce i cosiddetti "meta-dati", ovvero le informazioni relative alla pagina, come il titolo, le parole chiave relative al suo contenuto, e la codifica dei caratteri utilizzata. Il secondo, come indica il suo nome, contiene tutto il corpo della pagina, che si traduce nella struttura di elementi HTML.
Sei pronto alla rivelazione? Eccola: uno script "vede" un elemento HTML solo se viene posizionato cronologicamente DOPO quest'ultimo, all'interno del body.
Se ad esempio il nostro script lavora con un elemento avente ID "box", e noi scrivessimo:
<script>
document.getElementByID("box").style.color = "red";
</script>
<div id="box"></div>
per quanto sintatticamente e tecnicamente corretto il contenuto del nostro Javascript, questo non funzionerà, perché l'elemento "box" viene interpretato dal browser dopo lo script, che quindi non può "vederlo". Per risolvere il problema, basta invertire l'ordine degli elementi:
<div id="box"></div>
<script>
document.getElementByID("box").style.color = "red";
</script>
In questo modo al momento dell'esecuzione del Javascript, il motore avrà in memoria l'elemento "box" e potrà quindi manipolarlo correttamente.
Proprio per questo motivo molti sviluppatori scelgono di posizionare tutti i loro script come ultimi elementi del body.
Ma non è finita qui. C'è infatti un'altra modalità, ancora più elegante, con cui puoi bypassare l'ordine cronologico di esecuzione degli script. Come abbiamo detto in precedenza, gli script possono anche essere posizionati nell'head. Ma come può un codice Javascript collocato nell'head "vedere" gli elementi HTML se questi sono nel body?
Il seguente codice infatti, non funzionerà, perché il body viene eseguito successivamente rispetto all'head:
<head>
<script>
document.getElementByID("box").style.color = "red";
</script>
</head>
<body>
<div id="box"></div>
</body>
Ecco dunque in arrivo la seconda tecnica segreta per risolvere il suddetto problema: sistema TUTTO il tuo Javascript all'interno del metodo "onload" dell'oggetto "window":
<head>
<script>
window.onload = function() {
document.getElementByID("box").style.color = "red";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
In questo modo, non ti dovrai più preoccupare di collocare i tuoi script dopo gli elementi HTML da manipolare oppure alla fine del body. La funzione svolta dal codice "window.onload" viene eseguita al caricamento dell'intera pagina: in quel momento tutti i tuoi elementi saranno visibili al tuo Javascript, che funzionerà correttamente.
Ora che possiedi le chiavi per lavorare con gli elementi HTML tramite Javascript senza incappare in problemi di "visibilità", non ci saranno più limiti nelle tue elaborazioni.
