Come separare JavaScript nella tua pagina Web

Quando scrivi per la prima volta un nuovo JavaScript, il modo più semplice per configurarlo è incorporare il codice JavaScript direttamente nella pagina Web in modo che tutto sia nello stesso posto mentre lo testate per farlo funzionare giusto. Allo stesso modo, se si sta inserendo uno script pre-scritto nel proprio sito Web, le istruzioni potrebbero indicare di incorporare parti o tutto lo script nella pagina Web stessa.

Questo va bene per impostare la pagina e farla funzionare correttamente in primo luogo, ma una volta che la tua pagina funziona nel modo desiderato, sarai in grado di migliorare la pagina estraendo JavaScript in un file esterno in modo che il contenuto della pagina in HTML non sia così ingombro di elementi non di contenuto come JavaScript.

Se copi e utilizzi solo script Java scritti da altre persone, le loro istruzioni su come aggiungere il loro script alla tua pagina potrebbero aver portato ad avere una o più grandi sezioni di JavaScript effettivamente incorporato nella tua stessa pagina web e le loro istruzioni non ti dicono come puoi spostare questo codice dalla tua pagina in un file separato e avere ancora il JavaScript opera. Non preoccuparti perché, indipendentemente dal codice JavaScript che stai utilizzando nella tua pagina, puoi facilmente spostare JavaScript fuori dalla tua pagina e impostalo come file separato (o file se hai più di un pezzo di JavaScript incorporato nella pagina). Il processo per farlo è sempre lo stesso ed è meglio illustrato con un esempio.

Diamo un'occhiata a come potrebbe apparire un pezzo di JavaScript quando incorporato nella tua pagina. Il tuo codice JavaScript effettivo sarà diverso da quello mostrato negli esempi seguenti, ma il processo è lo stesso in ogni caso.

Il tuo JavaScript incorporato dovrebbe assomigliare a uno dei tre esempi precedenti. Ovviamente, il tuo codice JavaScript effettivo sarà diverso da quello mostrato, ma probabilmente JavaScript verrà incorporato nella pagina utilizzando uno dei tre metodi sopra indicati. In alcuni casi, il codice potrebbe utilizzare il obsoleto language = "javascript" invece di type = "text / javascript" nel qual caso potresti voler aggiornare il tuo codice con un nuovo inizio, sostituendo l'attributo language con quello di tipo uno.

Prima di poter estrarre JavaScript nel suo file, devi prima identificare il codice da estrarre. In tutti e tre gli esempi precedenti, ci sono due righe di codice JavaScript effettivo da estrarre. Il tuo script probabilmente avrà molte più righe ma può essere facilmente identificato perché occuperà lo stesso posto all'interno della tua pagina delle due righe di JavaScript che noi sono stati evidenziati nei tre esempi precedenti (tutti e tre gli esempi contengono le stesse due righe di JavaScript, è solo il contenitore attorno a loro che è leggermente diverso).

1. La prima cosa che devi fare per estrarre effettivamente JavaScript in un file separato è aprire un semplice editor di testo e accedere al contenuto della tua pagina web. È quindi necessario individuare il JavaScript incorporato che sarà circondato da una delle varianti di codice mostrate negli esempi precedenti.
2. Dopo aver individuato il codice JavaScript, è necessario selezionarlo e copiarlo negli Appunti. Con l'esempio sopra, il codice da selezionare è evidenziato, non è necessario selezionare i tag di script o i commenti opzionali che possono apparire attorno al codice JavaScript.
3. Apri un'altra copia del tuo semplice editor di testo (o un'altra scheda se il tuo editor supporta l'apertura di più di un file alla volta) e passa lì il contenuto JavaScript.
4. Seleziona un nome file descrittivo da utilizzare per il tuo nuovo file e salva il nuovo contenuto usando quel nome file. Con il codice di esempio, lo scopo dello script è quello di uscire dai frame in modo che possa essere un nome appropriato framebreak.js.
5. Quindi ora abbiamo JavaScript in un file separato, torniamo all'editor dove abbiamo il contenuto della pagina originale per apportare le modifiche lì per collegarci alla copia esterna dello script.
6. Dato che ora abbiamo lo script in un file separato, possiamo rimuovere tutto tra i tag di script nel nostro contenuto originale in modo che il etichetta.
7. Il passaggio finale consiste nell'aggiungere un attributo aggiuntivo al tag dello script che identifichi dove può trovare il JavaScript esterno. Lo facciamo usando a src = "nome del file" attributo. Con il nostro script di esempio, dovremmo specificare src = "framebreak.js".
8. L'unica complicazione è se abbiamo deciso di archiviare gli script Java esterni in una cartella separata dalle pagine Web che li utilizzano. In tal caso, è necessario aggiungere il percorso dalla cartella della pagina Web alla cartella JavaScript davanti al nome del file. Ad esempio, se gli script Java vengono archiviati in a js cartella all'interno della cartella che contiene le nostre pagine Web di cui avremmo bisogno src = "js / framebreak.js"

Che aspetto ha il nostro codice dopo aver separato JavaScript in un file separato? Nel caso del nostro esempio JavaScript (supponendo che JavaScript e HTML siano nella stessa cartella) il nostro HTML nella pagina Web ora legge:

Abbiamo anche un file separato chiamato framebreak.js che contiene:

if (top.location! = self.location) top.location = self.location;

Il tuo nome file e il contenuto del file saranno molto diversi da quello perché avrai estratto qualunque JavaScript sia stato incorporato nella tua pagina web e abbia dato al file un nome descrittivo in base a cosa lo fa. Il processo effettivo di estrazione sarà lo stesso, indipendentemente da quali righe contenga.

Che dire di quelle altre due righe in ciascuno degli esempi due e tre? Bene, lo scopo di quelle righe nell'esempio due è nascondere JavaScript da Netscape 1 e Internet Explorer 2, nessuno dei quali nessuno utilizza più e quindi quelle linee non sono realmente necessarie nella prima posto. Posizionare il codice in un file esterno nasconde il codice dai browser che non capiscono il tag di script in modo più efficace rispetto a circondarlo in un commento HTML comunque. Il terzo esempio viene utilizzato per le pagine XHTML per indicare ai validatori che JavaScript deve essere trattato come contenuto della pagina e non per convalidarlo come HTML (se stai usando un doctype HTML piuttosto che uno XHTML, il validatore lo sa già e quindi quei tag non lo sono necessario). Con JavaScript in un file separato non c'è più JavaScript nella pagina che deve essere ignorato dai validatori e quindi quelle linee non sono più necessarie.

Uno dei modi più utili in cui JavaScript può essere utilizzato per aggiungere funzionalità a una pagina Web è eseguire una sorta di elaborazione in risposta a un'azione del visitatore. L'azione più comune a cui vuoi rispondere sarà quando quel visitatore fa clic su qualcosa. Viene chiamato il gestore dell'evento che ti consente di rispondere ai visitatori facendo clic su qualcosa al clic.

Quando la maggior parte delle persone pensa di aggiungere un gestore di eventi onclick alla propria pagina Web, pensa immediatamente di aggiungerlo a un etichetta. Questo dà un pezzo di codice che spesso assomiglia a:

Questo è il sbagliato modo di usare onclick a meno che tu non abbia un indirizzo effettivo effettivo nell'attributo href in modo che quelli senza JavaScript vengano trasferiti da qualche parte quando fanno clic sul collegamento. Molte persone tralasciano anche il "return false" da questo codice e quindi si chiedono perché la parte superiore della pagina corrente venga sempre caricata dopo l'esecuzione dello script (che è ciò che href = "#" sta dicendo alla pagina di fare a meno che non venga restituito falso da tutti i gestori di eventi. Naturalmente, se hai qualcosa di significativo come destinazione del link, potresti voler andare lì dopo aver eseguito il codice onclick e quindi non avrai bisogno di "return false".

Ciò che molte persone non capiscono è che è possibile aggiungere il gestore eventi onclick qualunque Tag HTML nella pagina Web per interagire quando il visitatore fa clic su quel contenuto. Quindi, se vuoi eseguire qualcosa quando le persone fanno clic su un'immagine, puoi usare:

Se vuoi eseguire qualcosa quando le persone fanno clic su del testo, puoi utilizzare:

del testo

Naturalmente, questi non danno l'idea visiva automatica che ci sarà una risposta se il visitatore fa clic su di essi come fa un collegamento, ma puoi aggiungere quell'indizio visivo abbastanza facilmente te stesso disegnando l'immagine o l'intervallo appropriatamente.

L'altra cosa da notare su questi modi di collegare il gestore di eventi onclick è che non richiedono il "return false" perché non vi è alcuna azione predefinita che accadrà quando si fa clic sull'elemento che deve essere Disabilitato.

Questi modi di collegare onclick sono un grande miglioramento del metodo scadente che molte persone usano ma è ancora molto lontano dall'essere il modo migliore per codificarlo. Un problema con l'aggiunta di onclick utilizzando uno dei metodi di cui sopra è che sta ancora mescolando il tuo JavaScript con il tuo HTML. al clic è non un attributo HTML, è un gestore di eventi JavaScript. Come tale per separare il nostro JavaScript dal nostro HTML per rendere la pagina più facile da mantenere, dobbiamo ottenere quel riferimento onclick dal file HTML in un file JavaScript separato a cui appartiene.

Il modo più semplice per farlo è sostituire l'onclick nell'HTML con un id ciò semplifica il collegamento del gestore eventi al punto appropriato nell'HTML. Quindi il nostro HTML potrebbe ora contenere una di queste affermazioni:

 del testo

Possiamo quindi codificare JavaScript in un file JavaScript separato collegato o nella parte inferiore del corpo della pagina o che si trova nella parte superiore della pagina e in cui il nostro codice si trova all'interno di una funzione che viene chiamata stessa al termine del caricamento della pagina. Il nostro JavaScript per collegare i gestori di eventi ora è simile al seguente:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Una cosa da notare. Noterai che abbiamo sempre scritto onclick interamente in minuscolo. Durante la codifica dell'istruzione nel loro codice HTML vedrai alcune persone scriverlo come onClick. Ciò è errato poiché i nomi dei gestori di eventi JavaScript sono tutti in minuscolo e non esiste un gestore come onClick. Puoi evitarlo quando includi direttamente JavaScript nel tuo tag HTML poiché HTML non fa distinzione tra maiuscole e minuscole e il browser lo mapperà sul nome corretto per te. Non puoi cavartela con la maiuscola sbagliata nel tuo JavaScript stesso poiché JavaScript fa distinzione tra maiuscole e minuscole e in JavaScript non esiste nulla come onClick.

Questo codice è un enorme miglioramento rispetto alle versioni precedenti perché ora stiamo entrambi collegando l'evento all'elemento corretto all'interno del nostro HTML e abbiamo JavaScript completamente separato dall'HTML. Tuttavia, possiamo migliorare ulteriormente questo aspetto.

L'unico problema che rimane è che possiamo collegare un solo gestore di eventi onclick a un elemento specifico. Se dovessimo in qualsiasi momento collegare un gestore di eventi onclick diverso allo stesso elemento, l'elaborazione precedentemente collegata non sarà più collegata a quell'elemento. Quando aggiungi una varietà di script diversi alla tua pagina web per scopi diversi, c'è almeno un possibilità che due o più di essi possano voler fornire alcune elaborazioni da eseguire quando lo stesso elemento è cliccato su. La soluzione disordinata a questo problema è identificare dove si trova questa situazione e combinare l'elaborazione che deve essere chiamata insieme a una funzione che esegue tutta l'elaborazione.

Mentre scontri come questo sono meno comuni con onclick che con onload, dover identificare gli scontri in anticipo e combinarli insieme non è la soluzione ideale. Non è affatto una soluzione quando l'elaborazione effettiva che deve essere collegata all'elemento cambia nel tempo, cosicché a volte c'è una cosa da fare, a volte un'altra, a volte entrambe.

La soluzione migliore è smettere di usare completamente un gestore di eventi e utilizzare invece un listener di eventi JavaScript (insieme con il corrispondente attachEvent per Jscript, poiché questa è una di quelle situazioni in cui JavaScript e JScript differire). Possiamo farlo più facilmente creando prima una funzione addEvent che aggiungerà un listener di eventi o un allegato a seconda di quale dei due supporta la lingua in esecuzione;

funzione addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); ritorno vero; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Ora possiamo allegare l'elaborazione che vogliamo che avvenga quando si fa clic sul nostro elemento usando:

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

L'uso di questo metodo per collegare il codice da elaborare quando si fa clic su un elemento significa che effettuare un'altra chiamata addEvent per aggiungere un'altra funzione l'esecuzione quando si fa clic su un elemento specifico non sostituirà l'elaborazione precedente con la nuova elaborazione, ma consentirà invece che entrambe le funzioni siano correre. Non è necessario sapere quando si chiama un addEvent se abbiamo già una funzione collegata a elemento da eseguire quando si fa clic su, la nuova funzione verrà eseguita insieme e le funzioni che erano in precedenza allegato.

Dovremmo avere la necessità di rimuovere le funzioni da ciò che viene eseguito quando si fa clic su un elemento, allora potremmo creare un corrispondente funzione deleteEvent che chiama la funzione appropriata per la rimozione di un listener di eventi o in allegato evento?

L'unico svantaggio di quest'ultimo modo di collegare l'elaborazione è che i browser veramente vecchi non supportano questi modi relativamente nuovi di collegare l'elaborazione degli eventi a una pagina Web. Ormai dovrebbero esserci poche persone che usano browser così antiquati per ignorarli in ciò che J (ava) Script che scriviamo oltre a scrivere il nostro codice in modo tale da non causare un numero enorme di errori messaggi. La funzione sopra è scritta in modo da non fare nulla se non è supportato nessuno dei due modi in cui utilizza. La maggior parte di questi browser molto vecchi non supporta neanche il metodo getElementById di riferimento HTML e quindi un semplice if (! document.getElementById) restituisce false; nella parte superiore di una qualsiasi delle tue funzioni che fanno tali chiamate sarebbe anche appropriato. Certo, molte persone che scrivono JavaScript non sono così premurose di chi utilizza ancora browser antichi e quindi quegli utenti devono abituarsi a vedere errori JavaScript su quasi tutte le pagine web che visitano ormai.

Quale di questi diversi modi usi per allegare l'elaborazione nella tua pagina da eseguire quando i tuoi visitatori fanno clic su qualcosa? Se il modo in cui lo fai è più vicino agli esempi nella parte superiore della pagina che a quegli esempi nella parte inferiore della pagina, allora forse lo è tempo in cui hai pensato di migliorare il modo in cui scrivi la tua elaborazione onclick per utilizzare uno dei metodi migliori presentati in basso pagina.

Guardando il codice per il listener di eventi cross-browser noterai che esiste un quarto parametro che abbiamo chiamato uC, il cui utilizzo non è ovvio dalla descrizione precedente.

I browser hanno due diversi ordini in cui possono elaborare gli eventi quando l'evento viene attivato. Possono lavorare dall'esterno verso l'interno dal

• uC = true per l'elaborazione durante la fase di acquisizione
• uC = false da elaborare durante la fase di bolla.

Quindi, dove ci sono molti altri tag racchiusi attorno a quello in cui l'evento è stato attivato nella fase di acquisizione, viene eseguito prima iniziando con il tag più esterno e spostandosi verso quello che ha attivato l'evento e quindi, una volta che il tag a cui è stato attaccato l'evento è stato elaborato, la fase a bolle inverte il processo e torna indietro ancora.

Internet Explorer e i gestori di eventi tradizionali elaborano sempre la fase a bolle e mai la fase di acquisizione, quindi iniziano sempre con il tag più specifico e procedono verso l'esterno.

Quindi con i gestori di eventi:

xx