Progettare la tua pagina web usando JavaScript richiede attenzione all'ordine in cui appare il tuo codice e sia che si incapsuli il codice in funzioni o oggetti, tutti fattori che incidono sull'ordine in cui il codice corre.
La posizione di JavaScript nella tua pagina Web
Poiché il JavaScript nella tua pagina viene eseguito in base a determinati fattori, consideriamo dove e come aggiungere JavaScript a una pagina web.
Esistono sostanzialmente tre posizioni in cui è possibile allegare JavaScript:
- Direttamente nella parte superiore della pagina
- Direttamente nel corpo della pagina
- Da un gestore / ascoltatore di eventi
Non fa alcuna differenza se JavaScript è all'interno della pagina web stesso o in file esterni collegati alla pagina. Inoltre, non importa se i gestori di eventi sono codificati nella pagina o aggiunti dallo stesso JavaScript (tranne che non possono essere attivati prima di essere aggiunti).
Codice direttamente sulla pagina
Cosa significa che JavaScript è direttamente nella testa o nel corpo della pagina? Se il codice non è racchiuso in una funzione o in un oggetto, è direttamente nella pagina. In questo caso, il codice viene eseguito in sequenza non appena il file contenente il codice è stato caricato sufficientemente per consentire l'accesso a quel codice.
Il codice che si trova all'interno di una funzione o oggetto viene eseguito solo quando viene chiamata quella funzione o oggetto.
Fondamentalmente, questo significa che qualsiasi codice all'interno della testa e del corpo della tua pagina che non si trova all'interno di una funzione o oggetto verrà eseguito mentre la pagina viene caricata, non appena la pagina ha caricato sufficientemente per accedere a quel codice.
Quest'ultimo bit è importante e influisce sull'ordine in cui si inserisce il codice nella pagina: deve apparire qualsiasi codice inserito direttamente nella pagina che deve interagire con gli elementi all'interno della pagina dopo gli elementi nella pagina da cui dipende.
In generale, ciò significa che se si utilizza il codice diretto per interagire con il contenuto della pagina, tale codice dovrebbe essere posizionato nella parte inferiore del corpo.
Codice all'interno di funzioni e oggetti
Un codice all'interno di funzioni o oggetti viene eseguito ogni volta che viene chiamata quella funzione o oggetto. Se viene chiamato dal codice che si trova direttamente nella testa o nel corpo della pagina, allora il suo posto nel l'ordine di esecuzione è effettivamente il punto in cui la funzione o l'oggetto viene chiamato dal diretto codice.
Codice assegnato ai gestori e ai listener di eventi
L'assegnazione di una funzione a un gestore di eventi o a un listener non comporta l'esecuzione della funzione nel punto in cui è assegnata, a condizione che l'utente sia effettivamente assegnazione la funzione stessa e non correndo la funzione e l'assegnazione del valore restituito. (Questo è il motivo per cui generalmente non vedi il () alla fine del nome della funzione quando viene assegnato a un evento dopo l'aggiunta di le parentesi eseguono la funzione e assegnano il valore restituito anziché assegnare la funzione si.)
Le funzioni associate ai gestori e ai listener di eventi vengono eseguite quando viene attivato l'evento a cui sono collegati. La maggior parte degli eventi viene attivata dai visitatori che interagiscono con la tua pagina. Esistono tuttavia alcune eccezioni come la caricare evento sulla finestra stessa, che viene attivato al termine del caricamento della pagina.
Funzioni associate agli eventi sugli elementi della pagina
Qualsiasi funzione associata agli eventi sugli elementi all'interno della pagina stessa verrà eseguita in base alle azioni di ogni singolo visitatore: questo codice viene eseguito solo quando si verifica un evento specifico per attivarlo. Per questo motivo, non importa se il codice non viene mai eseguito per un determinato visitatore, dal momento che quel visitatore ovviamente non ha eseguito l'interazione che lo richiede.
Tutto questo, ovviamente, presuppone che il tuo visitatore abbia avuto accesso alla tua pagina con un browser che ha JavaScript abilitato.
Script utente visitatori personalizzati
Alcuni utenti hanno installato script speciali che potrebbero interagire con la tua pagina web. Questi script vengono eseguiti dopo tutto il codice diretto, ma prima qualsiasi codice associato al gestore dell'evento load.
Poiché la tua pagina non è a conoscenza di questi script utente, non hai modo di sapere cosa potrebbero fare questi script esterni: potrebbero sovrascrivere tutto o parte del codice che hai allegato ai vari eventi a cui hai assegnato in lavorazione. Se questo codice sostituisce i gestori o i listener di eventi, la risposta ai trigger di eventi eseguirà il codice definito dall'utente anziché o in aggiunta al codice.
Il punto da portare a casa qui è che non puoi presumere che il codice progettato per essere eseguito dopo che la pagina è stata caricata sarà autorizzato a funzionare nel modo in cui lo hai progettato. Inoltre, tieni presente che alcuni browser dispongono di opzioni che consentono la disabilitazione di alcuni gestori di eventi all'interno di browser, nel qual caso un trigger di evento rilevante non avvierà il gestore / listener di eventi corrispondente nel tuo codice.