Premik JavaScripta s spletne strani
Iskanje vsebine skripta za premik
Getty Images/ermingut
Ko prvič napišete nov JavaScript, ga najlažje nastavite tako, da kodo JavaScript vdelate neposredno v spletno stran, tako da je vse na enem mestu, medtem ko ga preizkušate, da pravilno deluje. Podobno, če na svoje spletno mesto vstavljate vnaprej napisan skript, vam lahko navodila povedo, da v samo spletno stran vdelate dele ali celoten skript.
To je v redu za nastavitev strani in njeno pravilno delovanje, toda ko bo vaša stran delovala tako, kot želite, jo boste lahko izboljšali tako, da ekstrahirate JavaScript v zunanjo datoteko, tako da bo vaša stran vsebina v HTML-ju ni tako natrpana z nevsebinskimi elementi, kot je JavaScript.
Če preprosto kopirate in uporabljate JavaScripte, ki so jih napisali drugi ljudje, potem so njihova navodila o tem, kako dodati njihov skript na vašo stran, morda povzročila, da ste enega ali več velikih delov JavaScripta dejansko vdelali v svojo spletno stran, njihova navodila pa tega ne povedo kako lahko to kodo premaknete s svoje strani v ločeno datoteko in JavaScript še vedno deluje. Ne skrbite, ker ne glede na to, katero kodo JavaScript uporabljate na svoji strani, lahko preprosto premaknete JavaScript s svoje strani in ga nastavite kot ločeno datoteko (ali datoteke, če imate več kot en del JavaScripta vdelanega v stran). Postopek za to je vedno enak in ga najbolje ponazorimo s primerom.
Poglejmo, kako bi lahko izgledal del JavaScripta, ko je vdelan v vašo stran. Vaša dejanska koda JavaScript se bo razlikovala od tiste, prikazane v naslednjih primerih, vendar je postopek v vsakem primeru enak.
Prvi primer
|_+_|Primer dva
|_+_|Primer tri
|_+_|Vaš vdelani JavaScript bi moral izgledati nekako tako kot eden od zgornjih treh primerov. Seveda bo vaša dejanska koda JavaScript drugačna od prikazane, vendar bo JavaScript verjetno vdelan v stran z enim od zgornjih treh načinov. V nekaterih primerih lahko vaša koda uporablja zastarelo language='javascript' namesto type='text/javascript' v tem primeru boste morda želeli svojo kodo za začetek bolj posodobiti tako, da atribut jezika zamenjate z atributom type one.
Preden lahko izvlečete JavaScript v lastno datoteko, morate najprej identificirati kodo, ki jo želite izvleči. V vseh treh zgornjih primerih je treba ekstrahirati dve vrstici dejanske kode JavaScript. Vaš skript bo verjetno imel veliko več vrstic, vendar ga je mogoče zlahka prepoznati, ker bo zasedel isto mesto na vaši strani kot dve vrstici JavaScripta, ki smo ju izpostavili v zgornjih treh primerih (vsi trije primeri vsebujejo isti dve vrstici JavaScripta, je le vsebnik okoli njih nekoliko drugačen).
- Prva stvar, ki jo morate storiti, da dejansko izvlečete JavaScript v ločeno datoteko, je, da odprete urejevalnik navadnega besedila in dostopate do vsebine vaše spletne strani. Nato morate poiskati vdelan JavaScript, ki bo obdan z eno od različic kode, prikazane v zgornjih primerih.
- Ko najdete kodo JavaScript, jo morate izbrati in kopirati v odložišče. V zgornjem primeru je koda, ki jo želite izbrati, označena, ni vam treba izbrati oznak skripta ali neobveznih komentarjev, ki se lahko pojavijo okoli vaše kode JavaScript.
- Odprite drugo kopijo urejevalnika navadnega besedila (ali drug zavihek, če vaš urejevalnik podpira odpiranje več kot ene datoteke hkrati) in tam prilepite vsebino JavaScript.
- Izberite opisno ime datoteke, ki ga želite uporabiti za svojo novo datoteko, in s tem imenom datoteke shranite novo vsebino. S primerno kodo je namen skripta izstopiti iz okvirjev, da bi lahko bilo ustrezno ime framebreak.js .
- Zdaj imamo JavaScript v ločeni datoteki, ki jo vrnemo v urejevalnik, kjer imamo izvirno vsebino strani, da tam naredimo spremembe za povezavo do zunanje kopije skripta.
- Ker imamo zdaj skript v ločeni datoteki, lahko odstranimo vse med oznakami skripta v naši izvirni vsebini, tako da
- Zadnji korak je dodajanje dodatnega atributa oznaki skripta, ki določa, kje lahko najde zunanji JavaScript. To naredimo z uporabo a src='ime datoteke' atribut. Z našim primerom skripta bi podali src='framebreak.js'.
- Edini zaplet pri tem je, če smo se odločili shraniti zunanje JavaScripte v ločeno mapo od spletnih strani, ki jih uporabljajo. Če to storite, morate pred imenom datoteke dodati pot iz mape spletne strani v mapo JavaScript. Na primer, če so JavaScripti shranjeni v a js mapo v mapi, ki vsebuje naše spletne strani, ki jih potrebujemo src='js/framebreak.js'
Kako torej 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 zdaj glasi:
|_+_|Imamo tudi ločeno datoteko, imenovano framebreak.js, ki vsebuje:
|_+_|
Vaše ime datoteke in vsebina datoteke se bosta precej razlikovala od tega, ker boste izvlekli kateri koli JavaScript, ki je bil vdelan v vašo spletno stran, in datoteki dali opisno ime glede na to, kaj počne. Dejanski postopek ekstrahiranja bo enak, ne glede na to, katere vrstice vsebuje.
Kaj pa tisti drugi dve vrstici v vsakem od dveh in treh primerov? No, namen teh vrstic v drugem primeru je skriti JavaScript pred Netscape 1 in Internet Explorerjem 2, ki ju nihče ne uporablja več, zato te vrstice sploh niso potrebne. Namestitev kode v zunanjo datoteko skrije kodo pred brskalniki, ki ne razumejo oznake skripta tako ali tako učinkoviteje kot obdajo v komentar HTML. Tretji primer se uporablja za strani XHTML, da potrditvenikom sporoči, da je treba JavaScript obravnavati kot vsebino strani in ne za preverjanje veljavnosti kot HTML (če uporabljate dokument HTML in ne XHTML, potem validator to že ve in zato te oznake niso potrebni). Z JavaScriptom v ločeni datoteki na strani ni več JavaScripta, ki bi ga preskočili validatorji, zato te vrstice niso več potrebne.
Eden najbolj uporabnih načinov uporabe JavaScripta za dodajanje funkcionalnosti spletni strani je izvajanje neke vrste obdelave kot odgovor na dejanje vašega obiskovalca. Najpogostejše dejanje, na katerega se želite odzvati, bo, ko ta obiskovalec nekaj klikne. Imenuje se upravljalnik dogodkov, ki vam omogoča, da se odzovete na klike obiskovalcev onclick .
Ko večina ljudi najprej pomisli na dodajanje obdelovalnika dogodkov onclick na svojo spletno stran, takoj pomislijo, da bi ga dodali na oznaka. To daje del kode, ki je pogosto videti takole:
|_+_|
To je narobe način uporabe onclick, razen če imate dejanski smiseln naslov v atributu href, tako da bodo tisti brez JavaScripta nekam preneseni, ko bodo kliknili povezavo. Veliko ljudi tudi iz te kode izpusti 'return false' in se potem sprašuje, zakaj se vrh trenutne strani vedno naloži po zagonu skripta (kar je tisto, kar href='#' sporoča strani, da stori, razen če false vrnejo vsi obdelovalci dogodkov. Seveda, če imate nekaj pomembnega kot cilj povezave, boste morda želeli iti tja po zagonu kode onclick in potem ne boste potrebovali 'return false'.
Mnogi ljudje se ne zavedajo, da je mogoče dodati obravnavo dogodkov onclick kaj Oznaka HTML na spletni strani za interakcijo, ko obiskovalec klikne to vsebino. Torej, če želite, da se nekaj zažene, ko ljudje kliknejo sliko, lahko uporabite:
|_+_|
Če želite nekaj zagnati, ko ljudje kliknejo neko besedilo, lahko uporabite:
|_+_|Seveda ti ne dajejo samodejnega vizualnega namiga, da bo prišlo do odziva, če vaš obiskovalec klikne nanje, kot to stori povezava, vendar lahko ta vizualni namig preprosto dodate sami, tako da ustrezno oblikujete sliko ali razpon.
Druga stvar, ki jo je treba upoštevati pri teh načinih pripenjanja obdelovalnika dogodkov onclick, je, da ne zahtevajo 'vrni napačno', ker ni nobenega privzetega dejanja, ki se bo zgodilo, ko kliknemo element, ki ga je treba onemogočiti.
Ti načini pritrjevanja onclick so velik napredek v primerjavi s slabo metodo, ki jo uporablja veliko ljudi, vendar je še daleč od najboljšega načina kodiranja. Ena od težav pri dodajanju onclick s katero koli od zgornjih metod je ta, da še vedno meša vaš JavaScript z vašim HTML. onclick je ne atribut HTML, je program za obravnavo dogodkov JavaScript. Če želimo torej ločiti naš JavaScript od našega HTML-ja, da bo stran enostavnejša za vzdrževanje, moramo to referenco onclick prenesti iz datoteke HTML v ločeno datoteko JavaScript, kamor sodi.
Najlažji način za to je, da zamenjate onclick v HTML-ju z an id ki bo olajšal pripenjanje obdelovalca dogodkov na ustrezno mesto v HTML. Naš HTML lahko zdaj vsebuje enega od teh stavkov:
|_+_|Nato lahko kodiramo JavaScript v ločeni datoteki JavaScript, ki je bodisi povezana na dno telesa strani ali ki je v glavi strani in kjer je naša koda znotraj funkcije, ki se sama pokliče, ko se stran konča z nalaganjem. . Naš JavaScript za pripenjanje obdelovalcev dogodkov je zdaj videti takole:
|_+_|Ena stvar, ki jo je treba opozoriti. Opazili boste, da smo onclick vedno pisali v celoti z malimi črkami. Ko kodirajo izjavo v svoj HTML, boste videli, da jo nekateri ljudje pišejo kot onClick. To je napačno, saj so vsa imena obdelovalcev dogodkov JavaScript napisana z malimi črkami in ni takega obdelovalca, kot je onClick. Temu se lahko izognete, če JavaScript vključite neposredno v svojo oznako HTML, saj HTML ne razlikuje med velikimi in malimi črkami in ga bo brskalnik preslikal v pravilno ime za vas. Ne morete se izogniti napačni uporabi velikih začetnic v samem JavaScriptu, saj JavaScript razlikuje med velikimi in malimi črkami in v JavaScriptu ni takega, kot je onClick.
Ta koda je velika izboljšava v primerjavi s prejšnjimi različicami, ker zdaj pripenjamo dogodek pravilnemu elementu v našem HTML-ju in imamo JavaScript popolnoma ločen od HTML-ja. Lahko pa to še izboljšamo.
Edina težava, ki ostaja, je ta, da lahko določenemu elementu pripnemo le en obravnavo dogodka onclick. Če bi morali istemu elementu kadar koli pripeti drug obravnavalec dogodka onclick, prej priložena obdelava ne bo več pripeta temu elementu. Ko svoji spletni strani dodajate več različnih skriptov za različne namene, obstaja vsaj možnost, da bosta dva ali več izmed njih želela zagotoviti neko obdelavo, ki se izvede, ko kliknete isti element. Neurejena rešitev te težave je ugotoviti, kje se ta situacija pojavi, in združiti obdelavo, ki jo je treba priklicati, v funkcijo, ki izvaja celotno obdelavo.
Medtem ko so spopadi, kot je ta, manj pogosti pri onclick kot pri onload, vnaprejšnja identifikacija spopadov in njihovo združevanje ni idealna rešitev. Sploh ni rešitev, ko se dejanska obdelava, ki jo je treba priključiti elementu, sčasoma spreminja, tako da je včasih treba narediti eno, včasih drugo, včasih pa oboje.
Najboljša rešitev je, da popolnoma prenehate uporabljati obdelovalnik dogodkov in namesto tega uporabite poslušalca dogodkov JavaScript (skupaj z ustreznim attachEventom za Jscript – ker je to ena tistih situacij, kjer se JavaScript in JScript razlikujeta). To lahko najlažje storimo tako, da najprej ustvarimo funkcijo addEvent, ki bo dodala poslušalec dogodkov ali prilogo, odvisno od tega, katerega od obeh podpira jezik, ki se izvaja;
|_+_|Zdaj lahko priložimo obdelavo, za katero želimo, da se zgodi, ko kliknemo naš element, z uporabo:
|_+_|Uporaba te metode pripenjanja kode, ki bo obdelana ob kliku elementa, pomeni, da še en klic addEvent za dodajanje druge funkcije, ki se bo izvajala ob kliku določenega elementa, ne bo nadomestil prejšnje obdelave z novo obdelavo, temveč bo omogočil obe funkciji, ki ju je treba izvajati. Ko kličemo addEvent, nam ni treba vedeti, ali že imamo elementu pritrjeno funkcijo, ki naj se zažene, ko nanj kliknemo, nova funkcija se bo izvajala skupaj s funkcijami, ki so bile prej priložene.
Če potrebujemo možnost odstranitve funkcij iz tega, kar se zažene, ko kliknemo element, potem lahko ustvarimo ustrezno funkcijo deleteEvent, ki pokliče ustrezno funkcijo za odstranitev poslušalca dogodka ali priloženega dogodka?
Edina pomanjkljivost tega zadnjega načina pripenjanja obdelave je ta, da tisti zelo stari brskalniki ne podpirajo teh relativno novih načinov pripenjanja obdelave dogodkov na spletno stran. Doslej bi moralo biti dovolj ljudi, ki uporabljajo tako zastarele brskalnike, da bi jih zanemarili v tem, kakšen J(ava)Script pišemo, razen tega, da našo kodo pišemo tako, da ne povzroča ogromnega števila sporočil o napakah. Zgornja funkcija je napisana tako, da ne naredi ničesar, če ni podprt noben od načinov, ki jih uporablja. Večina teh zelo starih brskalnikov ne podpira niti metode getElementById za sklicevanje na HTML, zato je preprost if (!document.getElementById) vrne false; na vrhu katere koli od vaših funkcij, ki opravljajo takšne klice, bi bilo prav tako primerno. Seveda veliko ljudi, ki pišejo JavaScript, niso tako obzirni do tistih, ki še vedno uporabljajo starodavne brskalnike, zato so se ti uporabniki verjetno navadili, da vidijo napake JavaScript na skoraj vsaki spletni strani, ki jo obiščejo.
Katerega od teh različnih načinov uporabljate za pripenjanje obdelave na svojo stran, ki se izvaja, ko vaši obiskovalci nekaj kliknejo? Če je način, kako to počnete, bližje primerom na vrhu strani kot tistim primerom na dnu strani, potem je morda čas, da razmislite o izboljšanju načina pisanja obdelave onclick in uporabite eno od boljših metod predstavljeni spodaj na strani.
Če pogledate kodo za poslušalca dogodkov med brskalniki, boste opazili, da obstaja četrti parameter, ki smo ga poimenovali uC , katerega uporaba ni očitna iz predhodnega opisa.
Brskalniki imajo dva različna vrstna reda, v katerih lahko obdelujejo dogodke, ko se dogodek sproži. Delujejo lahko od zunaj navznoter od oznake navznoter proti oznaki, ki je sprožila dogodek, ali pa od znotraj navzven, začenši pri najbolj specifični oznaki. Ta dva se imenujeta zajemanje in mehurček in večina brskalnikov vam omogoča, da z nastavitvijo tega dodatnega parametra izberete, v katerem vrstnem redu naj se izvede več obdelav.
- uC = velja za proces med fazo zajemanja
- uC = false za obdelavo med fazo mehurčkov.
Torej, kjer je več drugih oznak, ovitih okoli tiste, pri kateri je bil dogodek sprožen v fazi zajemanja, se najprej začne z najbolj oddaljeno oznako in se pomika proti tisti, ki je sprožila dogodek, nato pa, ko je oznaka, ki ji je bil dogodek pripet, obdelana faza mehurčkov obrne proces in se spet vrne ven.
Internet Explorer in tradicionalni obdelovalci dogodkov vedno obdelajo fazo oblačka in nikoli faze zajemanja, zato vedno začnejo z najbolj specifično oznako in nadaljujejo navzven.
Torej z obdelovalci dogodkov:
|_+_|s klikom na xx bi izbruhnil in najprej sprožil opozorilo ('b'), nato pa opozorilo ('a').
Če bi bila ta opozorila priložena s poslušalci dogodkov z uC true, bi vsi sodobni brskalniki razen Internet Explorerja najprej obdelali opozorilo ('a') in nato opozorilo ('b').