Hogyan lehet elválasztani a JavaScriptet a weboldalán

Amikor először ír egy új JavaScriptet, a beállítás legegyszerűbb módja a JavaScript kód beágyazása közvetlenül a weboldalra, hogy minden egy helyen legyen, amíg teszteled, hogy működjön jobb. Hasonlóképpen, ha egy előre megírt szkriptet szúr be a webhelyére, akkor az utasítások előírhatják, hogy a szkript részeit vagy egészét beágyazza maga a weboldal.

Ez rendben van az oldal beállításával és annak megfelelő működésével, de miután az oldal a kívánt módon működik, képes lesz arra, hogy javítsa az oldalt úgy, hogy kibontja a JavaScriptet egy külső fájlba, hogy az HTML-oldal tartalma ne legyen olyan zsúfolt a nem tartalmi elemekkel, mint például JavaScript.

Ha csak másokat írt és használ más emberek által írt JavaScripteket, akkor a szkriptüknek az Ön oldalára történő felvételére vonatkozó utasítások azt eredményezhetik, hogy van egy vagy több nagy része a A JavaScript valójában beágyazódott az Ön weboldalába, és az utasításuk nem mondja meg, hogyan lehet ezt a kódot az oldaláról külön fájlba helyezni, és miként lehet a JavaScript munka. Ne aggódjon, mert függetlenül attól, hogy milyen kódot használ a JavaScript az oldalon, könnyen áthelyezheti a JavaScriptet lépjen ki az oldaláról, és állítsa be különálló fájlként (vagy fájlokat, ha az oldalon egynél több JavaScript-elem van beágyazva). Ennek elvégzésének folyamata mindig azonos, és a legjobban egy példával szemléltetjük.

Nézzük meg, hogy hogyan nézhet ki egy JavaScript elem, ha beágyazódik az oldalába. A tényleges JavaScript-kód különbözik a következő példákban bemutatottól, de a folyamat minden esetben azonos.

A beágyazott JavaScriptnek úgy kell kinéznie, mint a fenti három példa egyikének. Természetesen a tényleges JavaScript-kód különbözik a bemutatottól, de a JavaScript valószínűleg beágyazódik az oldalba a fenti három módszer egyikével. Bizonyos esetekben a kódja elavult lehet language = "javascript" ahelyett type = "text / javascript" ebben az esetben érdemes korszerűsíteni a kódot, kezdve azzal, hogy a nyelvi attribútumot az egyikre cseréled.

Mielőtt kibontja a JavaScriptet a saját fájljába, először meg kell határoznia a kibontandó kódot. A fenti három példában mindössze két sort kell kibontani a tényleges JavaScript-kódból. A szkriptnek valószínűleg sokkal több sora van, de könnyen azonosítható, mert az ugyanazon a helyen fog elfoglalni az Ön oldalán, mint a JavaScript két sora, amelyet mi kiemelte a fenti három példában (mindhárom példa ugyanazt a két JavaScript sort sorolja fel, csak a körülöttük lévő tároló van kissé különböző).

1. Az első lépés, amelyet a JavaScript különálló fájlba való kibontásához kell tennie, egy egyszerű szövegszerkesztő megnyitása és a weboldal tartalmának elérése. Ezután meg kell találnia a beágyazott JavaScriptet, amelyet a fenti példákban bemutatott kódváltozatok valamelyike ​​vesz körül.
2. Miután megtalálta a JavaScript-kódot, ki kell választania azt, és át kell másolnia a vágólapra. A fenti példával a kiválasztandó kód kiemelésre kerül, nem kell kiválasztania a szkriptcímkéket vagy az opcionális megjegyzéseket, amelyek megjelenhetnek a JavaScript-kód körül.
3. Nyissa meg a sima szövegszerkesztő egy másik példányát (vagy egy másik lapot, ha a szerkesztő támogatja egyszerre egynél több fájl megnyitását), és hagyja ott a JavaScript-tartalmat.
4. Válasszon leíró fájlnevet, amelyet használni kíván az új fájlhoz, és mentse az új tartalmat az adott fájlnév használatával. A példakóddal a szkript célja a keretek kitörése, hogy megfelelő név lehessen framebreak.js.
5. Tehát most a JavaScript külön fájlban van, és visszatérünk a szerkesztőhöz, ahol megvan az eredeti oldal tartalma, hogy elvégezzük a módosításokat a szkript külső példányához való hivatkozáshoz.
6. Mivel a szkript külön fájlban van, eltávolíthatunk mindent az eredeti tartalomban található szkriptcímkék között, így a címke.
7. Az utolsó lépés egy kiegészítő attribútum hozzáadása a szkriptcímkéhez, amely meghatározza, hogy hol található a külső JavaScript. Ezt a a segítségével végezzük el src = "fájlnév" tulajdonság. A példa szkriptünkkel az src = "framebreak.js" -et adjuk meg.
8. Az egyetlen bonyodalom az, ha úgy döntöttünk, hogy a külső JavaScripteket külön mappába tároljuk az őket használó weblapoktól. Ha ezt megteszi, akkor hozzá kell adnia az elérési utat a weboldal mappájából a JavaScript mappához a fájlnév elé. Például, ha a JavaScripteket a js mappát azon a mappán belül, amelyben weblapjaink vannak, amelyekre szükségünk lenne src = "js / framebreak.js"

Tehát hogyan néz ki a kódunk, miután elkülönítettük a JavaScriptet külön fájlba? A példa JavaScript esetén (ha feltételezzük, hogy a JavaScript és a HTML ugyanabban a mappában található), a weboldal HTML-je így szól:

Van egy külön fájlunk, a framebreak.js nevű fájlt, amely a következőket tartalmazza:

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

A fájlnév és a tartalom sokkal különbözik attól, mert kibontottad bármilyen JavaScript be volt ágyazva az Ön weboldalába, és mi alapján adta a fájlnak leíró nevet igen. A kibontás tényleges folyamata ugyanaz lesz, függetlenül attól, hogy mely sorokat tartalmazza.

Mi lenne a másik két sorral a második és a harmadik példában? Nos, a 2. példában szereplő sorok célja a JavaScript elrejtése a Netscape 1 és az Internet ellen Explorer 2, amelyet senki sem használ többé, így az elsőre ezekre a sorokra nincs igazán szükség hely. A kód külsõ fájlba helyezése elrejti a kódot azon böngészõkbõl, amelyek a szkriptcímkét nem értik hatékonyabban, mint a HTML-megjegyzésben. A harmadik példát az XHTML oldalakhoz használják, hogy elmondják az érvényesítőknek, hogy a JavaScriptet oldaltartalomként kell kezelni, és nem érvényesíteni. HTML-ként (ha egy HTML-tetőtípust használ, nem pedig az XHTML-t, akkor az érvényesítő ezt már tudja, tehát ezek a címkék nem szükséges). Ha a JavaScript külön fájlban van, akkor az oldalon már nincs olyan JavaScript, amelyet az érvényesítők átugorhatnak, így ezekre a sorokra már nincs szükség.

Az egyik leghasznosabb módszer, amellyel a JavaScript felhasználható egy weboldal funkcionalitásának hozzáadásához, valamilyen feldolgozás végrehajtása a látogató cselekedete alapján. A leggyakoribb művelet, amelyre reagálni szeretne, az lesz, amikor a látogató valamit kattint. Felhívjuk az eseménykezelőt, amely lehetővé teszi, hogy válaszoljon a látogatókra valamelyik kattintással kattintásra.

Amikor a legtöbb ember először gondolkodik egy onclick eseménykezelő weboldalra történő felvételéről, azonnal gondolkodik arról, hogy hozzáadják egy weboldalhoz címke. Ez olyan kóddarabot ad, amely gyakran néz ki:

Ez a rossz az onclick használatának módja, hacsak nincs tényleges értelmező címe a href attribútumban, így azok, akik JavaScript nélkül kerülnek át valahova, amikor a linkre kattintanak. Nagyon sokan hagyják el a „hamis visszatérést” ebből a kódból, és azon gondolkodnak, miért kerülnek mindig az aktuális oldal teteje betöltésre a szkript futtatása után (ezt a href = "#" mondja az oldalnak, hacsak az összes eseménykezelőből nem állítják be a hamis értéket). Természetesen, ha van valami értelmes a link rendeltetési helyén, akkor érdemes odakeresnie az onclick kód futtatása után, és akkor nem lesz szüksége a „visszatérés hamis” elemre.

Amit sokan nem veszik észre, hogy hozzá lehet adni az onclick eseménykezelőt Bármi HTML-címke a weboldalon annak érdekében, hogy kölcsönhatásba lépjen, amikor a látogató rákattint az adott tartalomra. Tehát ha azt szeretné, hogy futjon valami, amikor az emberek egy képre kattintanak, akkor használhatja:

Ha futtatni akar valamit, amikor az emberek valamilyen szövegre kattintanak:

néhány szöveget

Természetesen ezek nem adják meg az automatikus vizuális nyomot, hogy válasz lesz, ha a látogató rájuk kattint úgy, mint egy link, de ezt a vizuális nyomot önmagához elég könnyen hozzáfűzheti a kép vagy a span formázásával megfelelően.

A másik dolog, amelyet meg kell említeni az onclick eseménykezelő csatlakoztatásának ezen módjain, az az, hogy nem igényelnek "return false", mert nincs alapértelmezett művelet, amely akkor történik, amikor az elemre kattintanak Tiltva.

Az onclick rögzítésének ezen módjai nagy előrelépést jelentenek a sok ember által alkalmazott rossz módszernél, de még mindig távol van a kódolás legjobb módjától. Az onclick hozzáadása az egyik probléma a fenti módszerek bármelyikével az, hogy továbbra is keveri a JavaScript-et a HTML-kóddal. kattintásra jelentése nem HTML attribútum, ez egy JavaScript eseménykezelő. Mint ilyen, hogy elkülönítsük a JavaScript-et a HTML-től az oldal könnyebb karbantartása érdekében, el kell juttatnunk az onclick hivatkozást a HTML fájlból egy különálló JavaScript fájlba, ahol tartozik.

Ennek legegyszerűbb módja az, ha a HTML onclick-jét lecseréli egy-re id ez megkönnyíti az eseménykezelő csatolását a HTML megfelelő helyére. Tehát a HTML-kód tartalmazhatja a következő állítások egyikét:

 néhány szöveget

Ezután kódolhatjuk a JavaScript-t egy különálló JavaScript fájlban, amelyet vagy az oldal tetejének aljára kapcsolunk, vagy amely az oldal fejében található, és ahol a kódunk egy olyan funkción belül található, amelyet maga hív, miután az oldal befejeződött. Az eseménykezelők csatolására szolgáló JavaScript-kódunk most így néz ki:

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

Egy dolog, amit meg kell jegyezni. Észre fogja venni, hogy mindig onclick-et írtunk teljes egészében kisbetűkkel. Amikor az utasítás HTML-jébe kódolja, láthatja, hogy néhányan onClick-ként írják. Ez nem megfelelő, mivel a JavaScript eseménykezelők neve mind kisbetűs, és nincs olyan kezelő, mint az onClick. Megszabadulhat tőle, ha közvetlenül a HTML-címkébe beilleszti a JavaScript-et, mivel a HTML nem érzékeny a kis- és nagybetűkre, és a böngésző hozzá fogja igazítani a megfelelő nevet. Nem szabadulhat meg a hibás nagybetűk használatával maga a JavaScript-ben, mivel a JavaScript kis- és nagybetűk között érzékeny, és a JavaScriptben nincs olyan dolog, mint az onClick.

Ez a kód óriási javulást jelent a korábbi verziókhoz képest, mivel mindkettőt az eseményt a HTML elemünkben a megfelelő elemhez csatoljuk, és a JavaScript teljesen külön van a HTML-től. Ennek ellenére még tovább javíthatunk.

A fennmaradó probléma az, hogy csak egy onclick eseménykezelőt tudunk csatolni egy adott elemhez. Ha bármikor más onclick eseménykezelőt kell csatolnunk ugyanahhoz az elemhez, akkor az előzőleg csatolt feldolgozás már nem lesz csatolva ehhez az elemhez. Ha különféle szkripteket ad hozzá a weboldalához különböző célokra, akkor legalább egy annak lehetősége, hogy közülük kettő vagy több olyan feldolgozást kíván biztosítani, amelyet végre kell hajtani, amikor ugyanaz az elem rákattintott. A probléma rendetlen megoldása az, hogy azonosítsák, hol merül fel ez a helyzet, és össze kell hívni a meghívandó feldolgozást egy olyan funkcióval, amely az összes feldolgozást elvégzi.

Noha az ilyen összecsapások ritkábban fordulnak elő az onclicknél, mint a terhelésnél, az ideális összecsapások előzetes azonosítása és összekapcsolása nem ideális megoldás. Ez egyáltalán nem megoldás, amikor az elemhez csatolni kívánt tényleges feldolgozás idővel megváltozik, így néha egy dolgot kell tennie, néha egy, és néha mindkettőt.

A legjobb megoldás az, ha az eseménykezelő használatát teljesen leállítják, és ehelyett a JavaScripti eseményfigyelőt használja (együtt a megfelelő JScript AttaEvent programmal - mivel ez egyike azoknak a helyzeteknek, ahol a JavaScript és a JScript különbözik). Ezt a legkönnyebben megtehetjük úgy, hogy először létrehozunk egy addEvent funkciót, amely vagy eseményfigyelőt, vagy csatolmányt ad hozzá, attól függően, hogy melyik kettőt támogatja a futtatott nyelv;

függvény addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); visszatér igaz; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Most csatolhatjuk azt a feldolgozást, amelyre meg akarunk kerülni, amikor elemre kattintunk:

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

Ennek az eljárásnak a használata a feldolgozásra kerülő kód csatolására, amikor egy elemre kattintanak, azt jelenti, hogy újabb addEvent hívást kezdeményez egy másik funkció hozzáadásához. egy adott elemre kattintva történő futtatás nem helyettesíti az előző feldolgozást az új feldolgozással, hanem lehetővé teszi mindkét funkció fuss. AddEvent hívásakor nem kell tudnunk, hogy van-e valamilyen funkciónk a elemre, amikor rákattint, az új funkció a korábban használt funkciókkal együtt fut csatolt.

Ha szükségünk lesz arra, hogy eltávolítsuk a függvényeket attól, ami fut, amikor egy elemre kattintunk, akkor létrehozhatunk egy megfelelő deleteEvent funkció, amely meghívja a megfelelő funkciót az eseményfigyelő eltávolításához vagy csatolásához esemény?

A feldolgozás ezen utolsó csatolásának egyik hátránya, hogy az igazán régi böngészők nem támogatják az eseményfeldolgozás weboldalhoz történő csatolásának ezeket a viszonylag új módszereit. Mostanra kevés embernek kell lennie ilyen régebbi böngészőknek, hogy ne vegye figyelembe őket J (ava) A szkriptet úgy írjuk, hogy nem írjuk be a kódot oly módon, hogy az ne okozzon sok hibát üzenetek. A fenti funkció úgy lett megírva, hogy semmit nem csinál, ha a felhasznált egyik mód sem támogatott. Ezen igazán régi böngészők többsége sem támogatja a HTML hivatkozásának getElementById módszerét, és így is egyszerű if (! document.getElementById) return false; az olyan funkciók tetején, amelyek ilyen hívásokat kezdenek, szintén helyénvaló. Természetesen sok JavaScript-t író ember nem olyan figyelmes azokra, akik továbbra is antik böngészőket használnak és tehát ezeknek a felhasználóknak szokásosan minden szokott weblapon megszokniuk a JavaScript-hibákat.

Ezek közül a különféle módok közül melyikkel csatolja a feldolgozást az oldalához, amelyet futtatni kell, amikor a látogatók valamelyikre kattintanak? Ha az Ön által végzett módszer közelebb van az oldal tetején található példákhoz, mint az oldal alján található példákhoz, akkor talán az amikor arra gondolt, hogy javítsa az onclick feldolgozása írásának módját az alábbiakban bemutatott jobb módszerek egyikének használatához oldalt.

A böngészőn keresztüli eseményfigyelő kódját megfigyelve észreveszi, hogy van egy negyedik paraméter, amelyet hívtunk uC, amelynek felhasználása nem egyértelmű az előző leírásból.

A böngészőknek két különböző sorrendük van, amelyekben feldolgozhatják az eseményeket, amikor az esemény beindul. Kívülről befelé tudnak dolgozni

• uC = igaz a feldolgozási folyamat során
• uC = hamis a buborékfázis során történő feldolgozáshoz.

Tehát ahol több más címke is köré van csomagolva, az esemény a rögzítési szakaszban kiváltódott, az első a legkülső címkével kezdődik, és mozog az esemény kiváltója felé, majd az esemény címkéjének feldolgozása után a buborékfázis megfordítja a folyamatot, és visszamegy újra.

Az Internet Explorer és a hagyományos eseménykezelők mindig feldolgozzák a buborékfázist, a rögzítési fázist soha, és így mindig a legkonkrétabb címkével kezdik, és kifelé dolgoznak.

Tehát az eseménykezelőkkel:

xx