Jak oddělit JavaScript na vaší webové stránce

Při prvním psaní nového JavaScriptu nejsnadnějším způsobem nastavení je vložení kódu JavaScript přímo na webovou stránku, aby bylo vše na jednom místě, zatímco to otestujete, aby fungovalo že jo. Podobně, pokud na svůj web vkládáte předem napsaný skript, mohou vás pokyny vyzvat k vložení částí nebo celého skriptu na samotnou webovou stránku.

To je v pořádku pro nastavení stránky a její správné fungování na prvním místě, ale jakmile bude stránka fungovat tak, jak chcete, budete moci vylepšit stránku extrahováním JavaScriptu do externího souboru, takže obsah vaší stránky v HTML nebude tak nepřehledný s položkami bez obsahu, jako je JavaScript.

Pokud pouze zkopírujete a používáte skripty JavaScriptu napsané jinými lidmi, jejich pokyny, jak přidat skript na vaši stránku, mohou mít za následek, že máte jednu nebo více velkých částí JavaScript skutečně vložený do samotné webové stránky a jeho pokyny vám neříká, jak můžete tento kód přesunout z vaší stránky do samostatného souboru a mít stále JavaScript práce. Nebojte se však, protože bez ohledu na to, jaký kód JavaScript používáte na své stránce, můžete JavaScript snadno přesunout z vaší stránky a nastavit jej jako samostatný soubor (nebo soubory, pokud máte na stránce vložen více než jeden kus JavaScriptu). Postup pro to je vždy stejný a nejlépe je ilustrován na příkladu.

Pojďme se podívat, jak by mohl vypadat část JavaScriptu, když je vložen na vaši stránku. Váš skutečný kód JavaScript se bude lišit od kódu uvedeného v následujících příkladech, ale postup je v každém případě stejný.

Váš vložený JavaScript by měl vypadat jako jeden ze tří výše uvedených příkladů. Váš skutečný kód JavaScript se bude samozřejmě lišit od zobrazeného kódu, ale JavaScript se pravděpodobně do stránky vloží pomocí jedné ze tří výše uvedených metod. V některých případech může váš kód používat zastaralý language = "javascript" namísto type = "text / javascript" v takovém případě můžete chtít aktualizovat svůj kód tak, že začnete nahrazováním atributu jazyka typovým.

Než budete moci extrahovat JavaScript do svého vlastního souboru, musíte nejprve identifikovat kód, který chcete extrahovat. Ve všech třech výše uvedených příkladech jsou extrahovány dva řádky skutečného kódu JavaScript. Váš skript bude pravděpodobně mít mnohem více řádků, ale lze jej snadno identifikovat, protože na vaší stránce zaujme stejné místo jako dva řádky JavaScriptu, zvýraznili výše uvedené tři příklady (všechny tři příklady obsahují stejné dva řádky JavaScriptu, je to jen kontejner kolem nich, který je mírně odlišný).

1. První věc, kterou musíte udělat, abyste skutečně extrahovali JavaScript do samostatného souboru, je otevření editoru prostého textu a přístup k obsahu vaší webové stránky. Poté musíte najít vložený JavaScript, který bude obklopen jednou z variant kódu zobrazených ve výše uvedených příkladech.
2. Po nalezení kódu JavaScript je třeba jej vybrat a zkopírovat do schránky. U výše uvedeného příkladu je zvýrazněný kód, který chcete vybrat, nemusíte vybírat značky skriptu ani volitelné poznámky, které se mohou objevit kolem vašeho kódu JavaScript.
3. Otevřete další kopii vašeho prostého textového editoru (nebo jinou záložku, pokud váš editor podporuje otevírání více než jednoho souboru najednou) a přesuňte tam obsah JavaScriptu.
4. Vyberte popisný název souboru, který chcete použít pro nový soubor, a uložte nový obsah pomocí tohoto názvu souboru. Účelem skriptu je v příkladu kódu vymanit se z rámců, aby mohl být vhodný název framebreak.js.
5. Takže nyní máme JavaScript v samostatném souboru, který se vracíme do editoru, kde máme původní obsah stránky, abychom tam provedli změny odkazující na externí kopii skriptu.
6. Protože nyní máme skript v samostatném souboru, můžeme odstranit vše mezi značkami skriptu v našem původním obsahu, takže štítek.
7. Posledním krokem je přidání dalšího atributu ke značce skriptu určující, kde může najít externí JavaScript. Děláme to pomocí a src = "filename" atribut. Pomocí našeho ukázkového skriptu bychom určili src = "framebreak.js".
8. Jedinou komplikací je, že jsme se rozhodli uložit externí JavaScripty do samostatné složky od webových stránek, které je používají. Pokud tak učiníte, musíte přidat cestu ze složky webové stránky do složky JavaScriptu před názvem souboru. Například pokud jsou JavaScripty ukládány do a js složku ve složce, která obsahuje naše webové stránky, které bychom potřebovali src = "js / framebreak.js"

Jak tedy vypadá náš kód poté, co jsme JavaScript oddělili do samostatného souboru? V případě našeho příkladu JavaScript (za předpokladu, že JavaScript a HTML jsou ve stejné složce), náš HTML na webové stránce nyní zní:

Máme také samostatný soubor s názvem framebreak.js, který obsahuje:

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

Název vašeho souboru a obsah souboru se bude hodně lišit od toho, protože jste se rozbalili bez ohledu na to, jaký JavaScript byl vložen do vaší webové stránky, a dalo souboru popisný název na základě čeho to ano. Skutečný proces jeho extrahování bude stejný, i když bez ohledu na to, jaké řádky obsahuje.

A co ty další dva řádky v každém z příkladů dva a tři? Účelem těchto řádků v příkladu 2 je skrýt JavaScript před Netscape 1 a Internetem Explorer 2, z nichž žádný už nepoužívá, a proto tyto řádky nejsou v prvním případě opravdu potřeba místo. Umístění kódu do externího souboru skryje kód z prohlížečů, které nerozumí značce skriptu efektivněji, než jej obklopují v komentáři HTML. Třetí příklad se používá pro stránky XHTML, aby ověřovatelům sdělil, že JavaScript by měl být považován za obsah stránky a ne jej ověřovat. jako HTML (pokud používáte spíše doctype HTML než XHTML, validátor to již ví a tyto značky tedy nejsou potřeboval). Při použití JavaScriptu v samostatném souboru již neexistuje žádný JavaScript na stránce, který by měl validátoři přeskočit, a proto tyto řádky již nejsou potřeba.

Jedním z nejužitečnějších způsobů, jak lze JavaScript použít k přidání funkčnosti webové stránky, je provedení jakéhokoli zpracování v reakci na akci vašeho návštěvníka. Nejběžnější akcí, na kterou chcete reagovat, bude, když návštěvník na něco klikne. Nazývá se obsluha události, která vám umožní reagovat na návštěvníky kliknutím na něco při kliknutí.

Když většina lidí nejprve přemýšlí o přidání obsluhy události onclick na svou webovou stránku, okamžitě přemýšlí o přidání do štítek. To dává kus kódu, který často vypadá takto:

To je špatně způsob, jak používat onclick, pokud nemáte skutečnou smysluplnou adresu v atributu href, takže ti, kteří nemají JavaScript, budou někde přeneseni, když kliknou na odkaz. Mnoho lidí také vynechá „návrat nepravdivý“ z tohoto kódu a pak se diví, proč se vždy načte horní část aktuální stránky po spuštění skriptu (což je to, co href = "#" říká stránce, aby udělala, pokud není vrácena nepravda ze všech obsluhovačů událostí. Samozřejmě, pokud máte něco smysluplného jako cíl odkazu, možná tam budete chtít jít po spuštění onclick kódu a pak nebudete potřebovat „návrat false“.

Mnoho lidí si neuvědomuje, že obsluha události onclick může být přidána žádný Značka HTML na webové stránce, která umožňuje interakci, když návštěvník klikne na tento obsah. Pokud tedy chcete něco spustit, když lidé kliknou na obrázek, můžete použít:

Pokud chcete něco spustit, když lidé kliknou na nějaký text, můžete použít:

nějaký text

Samozřejmě, že nedávají automatické vizuální vodítko, že tam bude odpověď, pokud váš návštěvník klikne na ně tak, jak to dělá odkaz, ale můžete přidat vizuální vodítko dostatečně snadno sami stylizací obrazu nebo rozpětí vhodně.

Další věcí, o které je třeba zmínit tyto způsoby připojení obsluhy události onclick, je to, že nevyžadují "return false", protože neexistuje žádná výchozí akce, ke které dojde po kliknutí na prvek, který musí být zakázáno.

Tyto způsoby připojení onclicku jsou velkým vylepšením špatné metody, kterou mnoho lidí používá, ale stále je to daleko od nejlepšího způsobu kódování. Jedním z problémů při přidávání onclicku pomocí některé z výše uvedených metod je to, že stále míchá váš JavaScript s HTML. při kliknutí je ne atribut HTML, jedná se o obsluhu události JavaScriptu. Abychom mohli oddělit náš JavaScript od našeho HTML, aby se stránka snáze udržovala, musíme získat onclick reference ze souboru HTML do samostatného souboru JavaScript, kam patří.

Nejjednodušší způsob, jak toho dosáhnout, je nahradit onclick v HTML znakem id to usnadní připojení obsluhy událostí na příslušné místo v HTML. Naše HTML tedy nyní může obsahovat jedno z těchto tvrzení:

 nějaký text

Potom můžeme kódovat JavaScript v samostatném souboru JavaScriptu, který je buď propojen do spodní části těla stránky, nebo který je v záhlaví stránky a kde je náš kód uvnitř funkce, která se sama volá po dokončení načítání stránky. Náš JavaScript pro připojení obsluhy událostí nyní vypadá takto:

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

Jedna věc k poznámce. Všimnete si, že jsme vždy psali onclick zcela malými písmeny. Při kódování příkazu ve svém HTML uvidíte, že někteří lidé jej píší jako onClick. To je špatné, protože názvy obsluhy událostí JavaScriptu jsou malá a neexistuje žádný obslužný program jako onClick. Můžete jej dostat pryč, když do své značky HTML vložíte JavaScript přímo, protože HTML nerozlišuje velká a malá písmena a prohlížeč jej namapuje na správné jméno. Nesprávné použití velkých písmen ve svém JavaScriptu se nemůžete zbavit, protože JavaScript rozlišuje velká a malá písmena a v JavaScriptu není nic takového jako onClick.

Tento kód je v porovnání s předchozími verzemi obrovským vylepšením, protože nyní připojujeme událost ke správnému prvku v našem HTML a JavaScript máme zcela oddělený od HTML. To však můžeme ještě vylepšit.

Jediným problémem, který zbývá, je to, že k určitému prvku můžeme připojit pouze jeden obslužný program události onclick. Pokud bychom kdykoli potřebovali připojit stejný obslužný program události onclick ke stejnému prvku, nebude již dříve připojené zpracování k tomuto prvku připojeno. Když na svou webovou stránku přidáváte různé skripty pro různé účely, existuje alespoň možnost, že dva nebo více z nich může chtít poskytnout nějaké zpracování, které má být provedeno, když je stejný prvek klikl na. Chaotickým řešením tohoto problému je zjistit, kde tato situace nastane, a kombinovat zpracování, které je třeba zavolat, do funkce, která provádí veškeré zpracování.

Zatímco střety, jako je tento, jsou s onclickem méně běžné než s onloadem, nemusí být střety identifikovány předem a kombinovat dohromady, není to ideální řešení. Není to vůbec řešení, když se skutečné zpracování, které musí být připojeno k prvku, časem mění, takže někdy je potřeba udělat jednu věc, jindy jinou a někdy obojí.

Nejlepší řešení je přestat používat obslužný program událostí úplně a místo toho používat posluchače událostí JavaScriptu (spolu s odpovídajícím attachEvent for Jscript - protože to je jedna z těch situací, kdy JavaScript a JScript lišit). To můžeme udělat nejjednodušším způsobem tak, že nejprve vytvoříme funkci addEvent, která přidá buď posluchače událostí, nebo přílohu v závislosti na tom, který ze dvou jazyků podporuje spuštěný 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); } }

Nyní můžeme připojit zpracování, které chceme dosáhnout, když klikneme na náš element pomocí:

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

Použití této metody připojení kódu, který má být zpracován, když se klikne na prvek, znamená, že provedení dalšího volání addEvent pro přidání další funkce, která má být spustit, když se klikne na konkrétní prvek, nenahradí předchozí zpracování novým zpracováním, ale místo toho umožní obě funkce běh. Když voláme addEvent, nemusíme vědět, zda již máme nějakou funkci připojenou k prvek, který se spustí, když na něj klepnete, bude spuštěna nová funkce spolu s funkcemi, které byly dříve připojený.

Pokud bychom potřebovali schopnost odstranit funkce z toho, co se spustí po kliknutí na prvek, pak bychom mohli vytvořit odpovídající funkce deleteEvent, která volá příslušnou funkci pro odstranění posluchače událostí nebo připojeného událost?

Jednou z nevýhod tohoto posledního způsobu připojení zpracování je to, že opravdu staré prohlížeče nepodporují tyto relativně nové způsoby připojení událostí zpracování k webové stránce. Nyní by mělo být tak málo lidí, kteří nyní používají zastaralé prohlížeče, aby je ignorovali v tom, co J (ava) Skript píšeme kromě psaní našeho kódu takovým způsobem, že nezpůsobuje velké množství chyb zprávy. Výše uvedená funkce je zapsána tak, aby nedělala nic, pokud není podporován žádný ze způsobů, které používá. Většina z těchto opravdu starých prohlížečů nepodporuje metodu getElementById, která odkazuje na HTML, a tak jednoduchý if (! document.getElementById) vrátí false; v horní části kterékoli z vašich funkcí, které takové hovory provádějí, by bylo rovněž vhodné. Mnoho lidí, kteří píší JavaScript, samozřejmě není tak ohleduplných k těm, kteří stále používají starožitné prohlížeče a takže tito uživatelé si musí zvykat na chyby JavaScript na téměř každé webové stránce, kterou nyní navštívili.

Který z těchto různých způsobů používáte pro připojení zpracování na vaši stránku a který se spustí, když návštěvníci kliknou na něco? Pokud je způsob, jak se to blíží příkladům v horní části stránky, než těm příkladům v dolní části stránky, pak je to pravděpodobně čas, kdy jste přemýšleli o zlepšení způsobu, jakým píšete své onclickové zpracování, abyste použili jednu z lepších metod prezentovaných níže stránka.

Při pohledu na kód pro posluchače událostí v různých prohlížečích si všimnete, že existuje čtvrtý parametr, který jsme nazvali vidíš, jejichž použití není zřejmé z předchozího popisu.

Prohlížeče mají dva různé příkazy, ve kterých mohou při spuštění události zpracovávat události. Mohou pracovat z vnějšku dovnitř z

• uC = true ke zpracování během fáze snímání
• uC = false ke zpracování během fáze bublin.

Takže pokud existuje několik dalších značek omotaných kolem jedné, kterou byla událost spuštěna ve fázi zachycení, spustí se nejprve od nejvzdálenější značky a přesune se směrem k té, která událost spustila, a poté, co byla zpracována značka, ke které byla událost připojena, bublina fáze obrátí proces a vrátí se ven znovu.

Internet Explorer a tradiční zpracovatelé událostí vždy zpracovávají bublinovou fázi a nikdy fázi snímání, a tak vždy začněte s nejkonkrétnější značkou a pracujte ven.

Takže s obsluhou událostí:

xx