Ako oddeliť JavaScript na vašej webovej stránke

Pri prvom písaní nového JavaScriptu je najjednoduchším spôsobom nastavenia vložiť kód JavaScript priamo na webovú stránku, takže počas testovania je všetko na jednom mieste, aby sa zabezpečilo funkčnosť správny. Podobne, ak vkladáte vopred napísaný skript na svoju webovú stránku, pokyny vám môžu povedať, aby ste vložili časti alebo celý skript na samotnú webovú stránku.

Toto je v poriadku pre nastavenie stránky a jej správne fungovanie na prvom mieste, ale akonáhle vaša stránka pracuje tak, ako chcete, budete môcť vylepšite stránku extrahovaním JavaScriptu do externého súboru, aby obsah vašej stránky v HTML nebol tak neprehľadný s položkami, ktoré nie sú obsahom, ako napríklad JavaScript.

Ak iba kopírujete a používate skripty JavaScripty napísané inými ľuďmi, ich pokyny na pridanie skriptu na vašu stránku mohli viesť k tomu, že máte jednu alebo viac veľkých častí JavaScript je skutočne vložený do vašej webovej stránky a jej pokyny vám nepovedia, ako môžete tento kód presunúť zo svojej stránky do samostatného súboru a mať stále kód JavaScript. práca. Nerobte si starosti, pretože bez ohľadu na to, aký kód JavaScript na svojej stránke používate, môžete JavaScript ľahko presunúť z vašej stránky a nastavte ho ako samostatný súbor (alebo súbory, ak máte na stránke vložených viac ako jeden JavaScript). Postup na to je vždy rovnaký a je najlepšie ilustrovaný príkladom.

Pozrime sa, ako môže vyzerať časť JavaScriptu, keď je vložený na vašu stránku. Váš skutočný kód JavaScript sa bude líšiť od kódu uvedeného v nasledujúcich príkladoch, ale postup je v každom prípade rovnaký.

Váš vložený JavaScript by mal vyzerať ako jeden z troch vyššie uvedených príkladov. Váš skutočný kód JavaScript sa samozrejme bude líšiť od zobrazeného kódu, ale JavaScript sa pravdepodobne vloží na stránku pomocou jednej z vyššie uvedených troch metód. V niektorých prípadoch môže váš kód používať zastarané language = "javascript" namiesto type = "text / javascript" v takom prípade možno budete chcieť aktualizovať svoj kód tak, že začnete nahradením atribútu jazyka typovým.

Predtým, ako môžete extrahovať JavaScript do svojho vlastného súboru, musíte najskôr identifikovať kód, ktorý sa má extrahovať. Vo všetkých troch vyššie uvedených príkladoch sa extrahujú dva riadky skutočného kódu JavaScript. Váš skript bude pravdepodobne obsahovať omnoho viac riadkov, ale dá sa ľahko identifikovať, pretože zaberá rovnaké miesto na vašej stránke ako dva riadky skriptu JavaScript, ktoré sme zvýraznili v uvedených troch príkladoch (všetky tri príklady obsahujú rovnaké dva riadky JavaScriptu, je to len kontajner okolo nich, ktorý je mierne odlišné).

1. Prvú vec, ktorú musíte urobiť, aby ste skutočne extrahovali JavaScript do samostatného súboru, je otvorenie obyčajného textového editora a prístup k obsahu vašej webovej stránky. Potom musíte nájsť vložený JavaScript, ktorý bude obklopený jednou z variácií kódu uvedených vo vyššie uvedených príkladoch.
2. Po nájdení kódu JavaScript ho musíte vybrať a skopírovať do svojej schránky. V príklade vyššie je zvýraznený kód, ktorý sa má vybrať, nemusíte vyberať značky skriptov ani voliteľné komentáre, ktoré sa môžu objaviť okolo kódu JavaScript.
3. Otvorte ďalšiu kópiu vášho prostého textového editora (alebo inú kartu, ak váš editor podporuje otváranie viac ako jedného súboru naraz) a za ním umiestnite obsah JavaScript.
4. Vyberte popisný názov súboru, ktorý chcete použiť pre nový súbor, a uložte nový obsah pomocou tohto názvu súboru. Účelom skriptu je pomocou príkladu kódu vymaniť sa z rámcov, aby mohol byť vhodný názov framebreak.js.
5. Takže teraz máme JavaScript v samostatnom súbore, ktorý sa vraciame do editora, kde máme pôvodný obsah stránky, aby sme tam vykonali zmeny tak, aby odkazovali na externú kópiu skriptu.
6. Keďže teraz máme skript v samostatnom súbore, môžeme z nášho pôvodného obsahu odstrániť všetko medzi značkami skriptov, takže tag.
7. Posledným krokom je pridanie ďalšieho atribútu k značke skriptu určujúcej, kde môže nájsť externý JavaScript. Robíme to pomocou a src = "súboru" atribút. Pomocou nášho vzorového skriptu by sme špecifikovali src = "framebreak.js".
8. Jedinou komplikáciou je, že sme sa rozhodli uložiť externé JavaScripty do samostatného priečinka od webových stránok, ktoré ich používajú. Ak tak urobíte, musíte pridať cestu zo zložky webovej stránky do zložky JavaScript pred názov súboru. Napríklad, ak sa JavaScripty ukladajú do a js priečinok v priečinku, ktorý obsahuje naše webové stránky, ktoré by sme potrebovali src = "js / framebreak.js"

Ako teda vyzerá náš kód po oddelení kódu JavaScript do samostatného súboru? V prípade nášho príkladu JavaScript (za predpokladu, že JavaScript a HTML sú v rovnakom priečinku), teraz náš HTML na webovej stránke znie:

Máme tiež samostatný súbor s názvom framebreak.js, ktorý obsahuje:

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

Váš názov súboru a obsah súboru sa bude značne líšiť od obsahu súboru, pretože ho budete extrahovať čokoľvek bolo na vašu webovú stránku vložené čokoľvek JavaScript a podľa tohto názvu bol súboru uvedený popisný názov robí. Skutočný proces jeho extrahovania bude rovnaký, hoci bez ohľadu na to, ktoré riadky obsahuje.

A čo tie ďalšie dva riadky v každom z príkladov dva a tri? Účelom týchto riadkov v príklade 2 je skryť JavaScript pred Netscape 1 a internetom Prieskumník 2, z ktorých ani jeden nepoužíva, a preto tieto riadky nie sú v prvom rade potrebné miesto. Umiestnením kódu do externého súboru sa skryje kód z prehľadávačov, ktoré nerozumejú značke skriptu efektívnejšie, ako ho obklopujú v komentári HTML. Tretí príklad sa používa pre stránky XHTML na overenie pravosti validátorov, že JavaScript by sa mal považovať za obsah stránky a nie na jeho overenie. ako HTML (ak používate skôr doctype HTML ako XHTML, validátor to už vie, a preto tieto značky nie sú nutná). Pri použití JavaScriptu v samostatnom súbore už neexistuje žiadny JavaScript na stránke, ktorý by mal validátor preskočiť, a preto tieto riadky už nie sú potrebné.

Jedným z najužitočnejších spôsobov, ako sa dá JavaScript použiť na pridanie funkcií na webovú stránku, je vykonanie nejakého spracovania v reakcii na akciu vášho návštevníka. Najbežnejšou činnosťou, na ktorú chcete reagovať, je kliknutie návštevníka na niečo. Nazýva sa obsluha udalosti, ktorá vám umožní reagovať na návštevníkov kliknutím na niečo po kliknutí.

Keď väčšina ľudí prvýkrát premýšľa o pridaní obsluhy udalosti onclick na svoju webovú stránku, okamžite premýšľa o jej pridaní do tag. Takto získate kúsok kódu, ktorý často vyzerá takto:

To je zle spôsob, ako používať onclick, pokiaľ nemáte skutočnú zmysluplnú adresu v atribúte href, takže tí, ktorí nemajú JavaScript, sa niekde po kliknutí na odkaz prenesú. Mnoho ľudí tiež vynecháva „návrat nepravdivý“ z tohto kódu a potom sa pýta, prečo sa vždy načíta horná časť aktuálnej stránky po spustení skriptu (čo je to, čo href = "#" hovorí stránke, aby urobila, pokiaľ zo všetkých obsluhy udalostí nevráti false. Samozrejme, ak máte ako cieľ odkazu niečo zmysluplné, možno tam budete chcieť ísť po spustení kódu onclick a potom nebudete potrebovať „return false“.

Mnoho ľudí si neuvedomuje, že obsluha udalosti onclick môže byť pridaná akýkoľvek Značka HTML na webovej stránke s cieľom interakcie, keď návštevník klikne na tento obsah. Ak teda chcete niečo spustiť, keď ľudia kliknú na obrázok, môžete použiť:

Ak chcete niečo spustiť, keď ľudia kliknú na nejaký text, môžete použiť:

nejaký text

Samozrejme, že nedávajú automatické vizuálne vodítko, že tam bude odpoveď, ak váš návštevník na ne klikne tak, ako to robí odkaz, ale môžete vizuálny kľúč ľahko pridať sami štylizáciou obrázka alebo rozsahu zodpovedajúcim spôsobom.

Ďalšia vec, ktorú si treba všimnúť o týchto spôsoboch pripojenia obsluhy udalosti onclick, je, že nevyžadujú „return false“, pretože pri kliknutí na prvok, ktorý musí byť, sa nestane žiadna predvolená akcia zakázaná.

Tieto spôsoby pripevnenia onclicku sú veľkým zlepšením zlej metódy, ktorú používajú mnohí ľudia, ale ešte stále nie je ani zďaleka najlepším spôsobom jej kódovania. Jedným z problémov pri pridávaní onclicku pomocou niektorej z vyššie uvedených metód je to, že stále mieša váš JavaScript s HTML. po kliknutí je nie Atribút HTML, je to obsluha udalosti JavaScript. Aby sme oddelili náš JavaScript od nášho HTML, aby sa stránka ľahšie udržiavala, musíme tento onclick referenciu získať zo súboru HTML do samostatného súboru JavaScript, do ktorého patrí.

Najjednoduchší spôsob, ako to urobiť, je nahradiť onclick v HTML za id to uľahčí pripojenie obsluhy udalostí na príslušné miesto v HTML. Náš kód HTML preto teraz môže obsahovať jedno z týchto tvrdení:

 nejaký text

Potom môžeme kódovať kód JavaScript v samostatnom súbore JavaScript, ktorý je prepojený buď s dolnou časťou tela stránky alebo ktorý sa nachádza v hlave stránky a kde je náš kód vnútri funkcie, ktorá sa volá po dokončení načítania stránky. Náš JavaScript na pripojenie obsluhy udalostí teraz vyzerá takto:

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

Jedna vec na vedomie. Všimnite si, že vždy sme písali vždy len malými písmenami. Keď kódujete vyhlásenie vo svojom HTML, uvidíte, že niektorí ľudia ho napíšu ako onClick. Toto je nesprávne, pretože názvy obsluhy udalostí jazyka JavaScript sú malé a neexistuje žiadny taký obslužný program ako onClick. Môžete ho dostať preč, keď do svojej značky HTML priamo vložíte skript JavaScript, pretože jazyk HTML nerozlišuje malé a veľké písmená a prehliadač ho namapuje na správne meno. Nesprávne použitie veľkých písmen v samotnom skripte JavaScript vám nemôže pomôcť, pretože v skripte JavaScript sa nerozlišujú malé a veľké písmená a v skripte JavaScript nie je nič také ako onClick.

Tento kód je v porovnaní s predchádzajúcimi verziami obrovským zlepšením, pretože teraz pripájame udalosť k správnemu prvku v našom HTML a JavaScript máme úplne oddelený od HTML. Môžeme to však ešte vylepšiť.

Jediným problémom, ktorý zostáva, je to, že ku konkrétnemu prvku môžeme pripojiť iba jeden obslužný program udalosti onclick. Ak by sme kedykoľvek potrebovali k rovnakému prvku pripojiť iný obslužný program udalosti onclick, k tomuto prvku už nebude pripojené predchádzajúce spracovanie. Ak na svoju webovú stránku pridávate rôzne skripty na rôzne účely, existuje minimálne možnosť, že dvaja alebo viacerí z nich budú chcieť poskytnúť určité spracovanie, ktoré sa má vykonať, keď je rovnaký prvok klikol na. Chaotickým riešením tohto problému je zistiť, kde táto situácia nastane, a skombinovať spracovanie, ktoré sa musí nazvať, do funkcie, ktorá vykonáva celé spracovanie.

Aj keď sú takéto zrážky s onclickom menej bežné ako s onloadom, nemusíte ich vopred identifikovať a kombinovať nie je ideálnym riešením. Nie je to vôbec riešenie, keď sa skutočné spracovanie, ktoré je potrebné pripojiť k prvku, časom zmení, takže niekedy je potrebné urobiť jednu vec, niekedy inú a niekedy oboje.

Najlepším riešením je prestať úplne obsluhovať udalosti a namiesto toho používať poslucháč udalostí JavaScript (spolu so zodpovedajúcim attachEvent for Jscript - pretože toto je jedna z situácií, keď JavaScript a JScript sa líšia). Môžeme to urobiť najjednoduchšie tak, že najprv vytvoríme funkciu addEvent, ktorá pridá buď poslucháča udalostí, alebo prílohu v závislosti od toho, ktorý z dvoch jazykov podporuje spustený jazyk;

function addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); návrat true; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Teraz môžeme pripojiť spracovanie, ktoré sa má stať, keď klikneme na náš element pomocou:

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

Použitie tejto metódy priraďovania kódu, ktorý sa má spracovať po kliknutí na prvok, znamená, že uskutočnenie ďalšieho hovoru addEvent na pridanie ďalšej funkcie spustenie po kliknutí na konkrétny prvok nenahradí predchádzajúce spracovanie novým spracovaním, ale namiesto toho umožní obom funkciám spustiť. Nemusíme vedieť, keď voláme addEvent, či už máme funkciu pripojenú k Ak sa po kliknutí na prvok spustí, nová funkcia sa spustí spolu s funkciami, ktoré boli predtým pripojený.

Ak by sme potrebovali schopnosť odstrániť funkcie z toho, čo sa spustí po kliknutí na prvok, potom by sme mohli vytvoriť zodpovedajúca funkcia deleteEvent, ktorá volá príslušnú funkciu na odstránenie poslucháča udalostí alebo pripojeného event?

Jednou z nevýhod tohto posledného spôsobu pripájania spracovania sú tie skutočne staré prehliadače, ktoré nepodporujú tieto relatívne nové spôsoby pripájania udalostí k webovej stránke. Mal by ich už dosť ľudí, ktorí používajú zastarané prehliadače, aby ich ignorovali v tom, čo J (ava) Skript píšeme okrem písania nášho kódu takým spôsobom, že nespôsobuje veľké množstvo chýb správ. Vyššie uvedená funkcia je napísaná tak, aby nerobila nič, pokiaľ nie je podporovaný žiadny z jej spôsobov použitia. Väčšina z týchto skutočne starých prehliadačov nepodporuje metódu getElementById, ktorá odkazuje na HTML, a tak jednoduchý if (! document.getElementById) return false; v hornej časti ktorejkoľvek z vašich funkcií, ktoré takéto hovory vykonávajú, by bolo tiež vhodné. Mnoho ľudí, ktorí píšu JavaScript, samozrejme nie je ohľaduplných k tým, ktorí stále používajú starožitné prehliadače a takže títo používatelia si musia zvykať na chyby JavaScript na takmer každej webovej stránke, ktorú teraz navštívia.

Ktoré z týchto rôznych spôsobov používate na priloženie spracovania na svoju stránku, aby sa spustilo, keď vaši návštevníci kliknú na niečo? Ak je spôsob, ako to robíte, bližšie k príkladom v hornej časti stránky ako k príkladom v dolnej časti stránky, možno je to tak čas, kedy ste premýšľali o zlepšení spôsobu, ktorým píšete svoje spracovanie onclick, aby ste použili jednu z lepších metód prezentovaných nižšie na internete str.

Pri pohľade na kód pre poslucháča udalostí v prehliadači si všimnete, že existuje štvrtý parameter, ktorý sme zavolali uC, ktorých použitie nie je zrejmé z predchádzajúceho opisu.

Prehliadače majú dva rôzne poradia, v ktorých môžu spracovávať udalosti pri spustení udalosti. Môžu pracovať zvonka dovnútra z

• uC = pravdivé spracovanie počas fázy zachytávania
• uC = nesprávne spracovanie počas bublinovej fázy.

Takže tam, kde je okolo jednej, o ktorú bola udalosť spustená, vo fáze snímania, je omotaných niekoľko ďalších značiek, najprv sa spustí od vonkajšej značky a presunie sa smerom k tomu, ktorý spustil udalosť, a potom, ako sa spracuje značka, ku ktorej bola udalosť pripojená, bublinová fáza obráti proces a vráti sa späť znova.

Program Internet Explorer a spracovatelia tradičných udalostí vždy spracúvajú bublinovú fázu a nikdy fázu snímania, a preto vždy začínajte od najšpecifickejšej značky a pokračujte ďalej.

Takže s obsluhou udalostí:

xx