Kako ločiti JavaScript na svoji spletni strani

Ko prvič napišete nov JavaScript, ga je najlažji način vdelati v kodo JavaScript neposredno na spletno stran, tako da je vse na enem mestu, medtem ko ga preizkušate, da deluje prav. Podobno, če na svoje spletno mesto vstavljate že vnaprej napisan skript, vam lahko navodila vdelajo dele ali celoten skript na samo spletno stran.

To je v redu, če stran najprej nastavite in pravilno deluje, ko bo vaša stran delovala tako, kot želite, boste lahko stran izboljšajte tako, da izvlečete JavaScript v zunanjo datoteko, tako da vsebina vaše strani v HTML-ju ne bo tako natrpana z ne-vsebinskimi elementi, kot je JavaScript.

Če samo kopirate in uporabljate JavaScripts, ki so jih napisali drugi ljudje, so lahko zaradi njihovih navodil, kako dodati skript na svojo stran, prišlo do enega ali več velikih odsekov JavaScript je sam vgrajen v vašo spletno stran in njihova navodila ne povedo, kako lahko to kodo premaknete iz svoje strani v ločeno datoteko in še vedno imate JavaScript delati. Brez skrbi, ker ne glede na to, katero kodo JavaScript uporabljate na svoji strani, lahko preprosto premaknete JavaScript iz vaše strani in jo nastavite kot ločeno datoteko (ali datoteke, če imate na strani več kot en del JavaScript). Postopek za to je vedno enak in je najbolje ponazoriti s primerom.

Poglejmo, kako lahko izgleda kos JavaScript, ko je vgrajen na vaši strani. Vaša dejanska koda JavaScript se bo razlikovala od tiste, prikazane v naslednjih primerih, vendar je postopek v vsakem primeru enak.

Vaš vgrajeni JavaScript mora izgledati kot eden od zgornjih treh primerov. Seveda bo vaša dejanska koda JavaScript drugačna od prikazane, vendar bo JavaScript verjetno vstavljen v stran z enim od zgornjih treh načinov. V nekaterih primerih lahko vaša koda uporablja zastarelo jezik = "javascript" namesto type = "besedilo / javascript" v tem primeru boste morda želeli svojo kodo posodobiti za začetek z zamenjavo jezikovnega atributa s tipom.

Preden lahko izvlečete JavaScript v lastno datoteko, morate najprej določiti kodo, ki jo želite ekstrahirati. V vseh treh zgornjih primerih je treba izvleči dve vrstici dejanske kode JavaScript. Vaš scenarij bo verjetno imel veliko več vrstic, vendar ga je mogoče zlahka prepoznati, ker bo na vaši strani zasedel isto mesto kot dve vrstici JavaScript, ki ju so poudarili v zgornjih treh primerih (vsi trije primeri vsebujejo enaki dve vrstici JavaScript, rahlo je samo vsebnik okoli njih drugačen).

1. Prva stvar, ki jo morate narediti, da dejansko izvlečete JavaScript v ločeno datoteko, je, da odprete navaden urejevalnik besedil in dostopate do vsebine vaše spletne strani. Nato morate poiskati vdelani JavaScript, ki ga bo obkrožila ena od različic kode, prikazane v zgornjih primerih.
2. Ko najdete kodo JavaScript, jo morate izbrati in kopirati v odložišče. Z zgornjim primerom je označena koda označena, ni vam treba izbrati oznak skripta ali izbirnih komentarjev, ki se lahko pojavijo okoli vaše kode JavaScript.
3. Odprite drugo kopijo urejevalnika navadnega besedila (ali drugega zavihka, če vaš urejevalnik podpira odpiranje več datotek hkrati) in tam držite vsebino JavaScript.
4. Izberite opisno ime datoteke, ki jo želite uporabiti za novo datoteko, in shranite novo vsebino s tem imenom datoteke. S primerom kode je namen skripta razbiti okvirje, da bi lahko bilo ustrezno ime framebreak.js.
5. Zdaj imamo JavaScript v ločeni datoteki, vrnemo se v urejevalnik, kjer imamo izvirno vsebino strani, da tam spremenimo povezavo z zunanjo kopijo skripta.
6. Ker imamo zdaj skript v ločeni datoteki, lahko odstranimo vse med oznakami skripta v originalni vsebini, tako da oznaka.
7. Zadnji korak je dodavanje dodatnega atributa oznaki skripta, ki določa, kje lahko najde zunanji JavaScript. To naredimo s pomočjo src = "ime datoteke" atribut. Z našim skriptom bi določili src = "framebreak.js".
8. Edini zaplet pri tem je, če smo se odločili, da bomo zunanje JavaScripte shranili v ločeno mapo s spletnih strani, ki jih uporabljajo. Če to storite, morate pot dodati iz mape spletne strani v mapo JavaScript pred imenom datoteke. Na primer, če so JavaScripti shranjeni v js mapo v mapi, ki vsebuje naše spletne strani, ki bi jih potrebovali src = "js / framebreak.js"

Kako izgleda naša koda, potem ko smo JavaScript ločili v ločeno datoteko? V primeru našega primera JavaScript (ob predpostavki, da sta JavaScript in HTML v isti mapi) se naš HTML na spletni strani glasi:

Imamo tudi ločeno datoteko z imenom framebreak.js, ki vsebuje:

če (top.lokacija! = samo.lokacija) top.location = self.location;

Vaše ime in vsebina datoteke se bosta precej razlikovali od imena, ker ga boste izlupili karkoli je bil JavaScript vgrajen v vašo spletno stran in je datoteki dalo opisno ime glede na to to naredi. Dejanski postopek pridobivanja bo enak, čeprav ne glede na to, katere vrstice vsebuje.

Kaj pa ti drugi dve vrstici v vsakem od primerov dva in tri? No, namen teh vrstic v primeru dva je skriti JavaScript pred Netscape 1 in Internetom Explorer 2, od katerih nihče več ne uporablja, zato te vrstice v prvi vrsti res niso potrebne kraj. Če kodo postavite v zunanjo datoteko, jo skrivate pred brskalniki, ki oznake skripta ne razumejo bolj učinkovito, kot jo obdajajo v komentarju HTML. Tretji primer je uporabljen za strani XHTML, da valiatorjem povedo, da je treba JavaScript obravnavati kot vsebino strani, ne pa da bi jo preverjali. kot HTML (če uporabljate doctype HTML in ne XHTML, potem validator to že ve, zato te oznake niso potrebno). Z JavaScript v ločeni datoteki ni več JavaScript na strani, ki bi ga preskočili preverjalniki, zato te vrstice niso več potrebne.

Eden od najbolj uporabnih načinov, kako JavaScript uporabiti za dodajanje funkcionalnosti na spletno stran, je izvajanje neke vrste obdelave kot odgovor na dejanje vašega obiskovalca. Najpogostejša dejanja, na katera se želite odzvati, bodo, ko obiskovalec nekaj klikne. Pokliče se prirejevalec dogodkov, ki omogoča odzivanje na obiskovalce, ki kliknejo na nekaj onclick.

Ko večina ljudi prvič pomisli, kako bi na svojo spletno stran dodala uporabnika dogodkov onclick, takoj pomislijo, da bi ga dodali v oznaka. To daje del kode, ki je pogosto videti:

To je narobe način uporabe onclick-a, razen če imate v atributu href dejanski pomenljiv naslov, tako da bodo tisti brez JavaScript prešli nekam, ko kliknejo na povezavo. Veliko ljudi tudi iz te kode izpusti »false false« in se potem vpraša, zakaj se vedno naloži vrh trenutne strani po zagonu skripta (kar href = "#" navaja strani, naj stori, razen če se vrne false iz vseh upravljavcev dogodkov. Seveda, če imate kot pomen povezave nekaj smiselnega, boste morda želeli iti tja po zagonu kode onclick in potem ne bo potreben "return false".

Česar se mnogi ne zavedajo, je, da je mogoče dodati upravljavca dogodkov onclick kaj Oznaka HTML na spletni strani, da bi lahko komunicirali, ko obiskovalec klikne na to vsebino. Če želite, da se nekaj zažene, ko ljudje kliknejo sliko, ki jo lahko uporabite:

Če želite nekaj zagnati, ko ljudje kliknejo na neko besedilo, ki ga lahko uporabite:

nekaj besedila

Seveda ti ne dajejo samodejnega vizualnega mnenja, da bo odziv, če vaš obiskovalec klikne na njih tako, kot je povezava, vendar lahko vizualni namig sami preprosto dodate s stiliranjem slike ali razpona ustrezno.

Pri teh načinih pritrditve upravljavca dogodkov onclick je treba opozoriti še, da ne potrebujejo "return false", ker ni nobenega privzetega dejanja, ki se bo zgodilo, ko na to kliknemo element onemogočeno.

Ti načini pritrditve onclick-a so velik napredek pri slabi metodi, ki jo mnogi uporabljajo, vendar je še vedno daleč od najboljšega načina kodiranja. Ena težava pri dodajanju onclick-a s katero koli od zgornjih metod je ta, da vaš JavaScript še vedno meša s svojim HTML-jem. onclick je ne atribut HTML, je obdelovalec dogodkov v JavaScript. Kot tak, da ločimo naš JavaScript od našega HTML-ja, da stran olajšamo vzdrževanje, moramo to onclick referenco iz datoteke HTML pretvoriti v ločeno datoteko JavaScript, kamor spada.

Najlažji način za to je, da onclick v HTML zamenjate z id to bo olajšalo pritrditev upravljalnika dogodkov na ustrezno mesto v HTML-ju. Torej lahko naš HTML zdaj vsebuje eno od teh trditev:

 nekaj besedila

Nato lahko kodiramo JavaScript v ločeni datoteki JavaScript, ki je bodisi povezana na dnu telesa ali ki je v glavi strani in kjer je naša koda znotraj funkcije, ki se sama pokliče po zaključku nalaganja strani. Naš JavaScript za priključitev upravljavcev dogodkov zdaj izgleda tako:

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

Treba je opozoriti eno stvar. Opazili boste, da smo vedno onclick v celoti pisali z malimi črkami. Ko kodiranje izjave v njihovem HTML-ju boste videli, da jo nekateri zapišejo kot onClick. To je narobe, ker so imena obdelovalcev dogodkov JavaScript mala in mala, kot je onClick. Z njim se lahko umaknete, ko v svojo oznako HTML neposredno vstavite JavaScript, saj HTML ne razlikuje velikih in malih črk, brskalnik pa ga bo preslikal v pravilno ime za vas. Ne morete se izogniti napačni uporabi velikih začetnic v samem JavaScriptu, saj je JavaScript občutljiv z velikimi in malimi črkami, v JavaScript pa ne obstaja onClick.

Ta koda je v primerjavi s prejšnjimi različicami zelo izboljšana, ker zdaj obe pripisujemo pravilen element v našem HTML-ju in imamo JavaScript popolnoma ločen od HTML-ja. Vendar lahko na tem področju še izboljšamo.

Ostala je še ena težava, da lahko na določen element pritrdimo samo en onclick obdelovalec dogodkov. Če moramo kadar koli na isti element pritrditi drugačen obdelovalec dogodkov onclick, prej priložena obdelava na ta element ne bo več pritrjena. Ko na spletno stran dodajate različne skripte za različne namene, obstaja vsaj a možnost, da bi dva ali več od njih želela zagotoviti določeno obdelavo, ki se izvede, če je isti element kliknili. Napačna rešitev tega problema je določiti, kje nastane to stanje, in združiti obdelavo, ki jo je treba poklicati skupaj, v funkcijo, ki izvaja vso obdelavo.

Medtem ko so takšni spopadi z onclickom manj pogosti kot pri onloadu, pa spopadanje vnaprej prepoznati in združiti, ni idealna rešitev. To sploh ni rešitev, ko se dejanska obdelava, ki jo je treba pritrditi elementu, sčasoma spremeni, tako da je včasih treba storiti eno, včasih drugo in včasih oboje.

Najboljša rešitev je, da popolnoma ne uporabljate orodja za obdelavo dogodkov in namesto tega uporabite poslušalca dogodkov JavaScript (skupaj z ustreznim attachEvent za Jscript - saj je to ena tistih situacij, kjer sta JavaScript in JScript razlikujejo). To lahko najlažje naredimo tako, da najprej ustvarimo funkcijo addEvent, ki bo dodala poslušalca dogodka ali prilogo, odvisno od tega, kateri od teh dveh jezikov podpira jezik;

funkcija addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); vrnitev resnična; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Zdaj lahko pripnemo obdelavo, za katero želimo, da se zgodi, ko na naš element kliknemo z uporabo:

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

Uporaba te metode pripenjanja kode, ki jo je treba obdelati, ko kliknete element, pomeni, da klicanje dodatnega klica addEvent doda še eno funkcijo, ki se teči, ko kliknete določen element, ne bo nadomestil predhodne obdelave z novo obdelavo, temveč bo omogočil, da sta obe funkciji teči. Pri klicanju addEvent nam ni treba vedeti, ali imamo že dodano funkcijo na element, ki se bo zagnal ob kliku, se bo zagnala tudi nova funkcija in funkcije, ki so bile prej priloženo.

Če bi potrebovali sposobnost, da odstranimo funkcije iz tistega, kar se zažene, ko kliknemo na element, bi lahko ustvarili ustrezna funkcija deleteEvent, ki pokliče ustrezno funkcijo za odstranitev poslušalca ali priloženega dogodka dogodek?

Edina pomanjkljivost tega zadnjega načina pripenjanja obdelave je, da resnično stari brskalniki ne podpirajo teh relativno novih načinov pripenjanja obdelave dogodkov na spletno stran. Do zdaj bi morali imeti dovolj ljudi, ki uporabljajo tovrstne brskalnike, da jih ne upoštevajo v J (ava) Skript, ki ga pišemo ločeno od tega, da kodo napišemo tako, da ne povzroča ogromnih napak sporočila. Zgornja funkcija je napisana tako, da ne naredi ničesar, če ne podpira nobenega od načinov, ki jih uporablja. Večina teh res starih brskalnikov ne podpira metode getElementById sklicevanja na HTML niti tako preprosto če (! document.getElementById) vrne false; na vrhu katere koli od vaših funkcij, ki opravljajo takšne klice, bi bilo prav tako primerno. Seveda mnogi ljudje, ki pišejo JavaScript, niso tako pozorni do tistih, ki še vedno uporabljajo starinske brskalnike in zato se morajo ti uporabniki navaditi, da na skoraj vsaki spletni strani, ki jo obiščejo, vidijo napake v JavaScript.

Kateri od teh različnih načinov uporabljate za pripenjanje obdelave na svojo stran, ki jo želite zagnati, ko obiskovalci na kaj kliknejo? Če je način, kako to storite, bližje primerom na vrhu strani kot tistim primerom na dnu strani, potem morda čas, ko ste pomislili, da bi izboljšali način pisanja obdelave onclick, da bi uporabili enega od boljših metod, predstavljenih spodaj na stran.

Če pogledate kodo poslušalca dogodkov med brskalniki, boste opazili, da obstaja četrti parameter, ki smo ga poklicali uCkaterih uporaba ni očitna iz predhodnega opisa.

Brskalniki imajo dva različna naročila, v katerih lahko obdelujejo dogodke, ko se dogodek sproži. Delujejo lahko od zunaj navznoter od

• uC = resnično za obdelavo med fazo zajema
• uC = napačno obdelati med fazo mehurčkov.

Torej, kjer je več drugih oznak, ovitih okoli tistega, ki je bil dogodek sprožen v fazi zajema, se začne najprej z najbolj skrajno oznako in se premakne proti tistemu, ki je sprožil dogodek in nato, ko je obdelana oznaka, na katero je bil dogodek, obdelana, faza mehurčkov obrne postopek in se vrne ven ponovno.

Internet Explorer in tradicionalni upravljavci dogodkov vedno obdelujejo fazo mehurčkov in nikoli fazo zajema, zato vedno začnejo z najbolj specifično oznako in delujejo navzven.

Torej z upravljavci dogodkov:

xx