Kuidas lahutada JavaScripti oma veebilehel

Uue JavaScripti esmakordsel kirjutamisel on lihtsaim viis selle seadistamiseks JavaScripti koodi manustamine otse veebilehele, nii et kõik on ühes kohas, kui te seda katsetate, et see tööle hakkaks eks. Samamoodi, kui sisestate oma veebisaidile eelnevalt kirjutatud skripti, võivad juhised käskida teil manustada skripti osad või kogu veebilehele.

See on lehe seadistamise ja selle korralikult töötamise jaoks sobilik, kuid kui teie leht töötab soovitud viisil, saate seda teha täiustage lehte, ekstraheerides JavaScripti välisesse faili, nii et teie HTML-i HTML-i sisu poleks nii suure sisuga üksuste nagu näiteks JavaScript.

Kui kopeerite ja kasutate lihtsalt teiste inimeste kirjutatud JavaScripti, siis võisid nende juhised skripti lisamiseks oma lehele põhjustada selle, et teil on üks või mitu suurt jaotist Teie veebilehele tegelikult on manustatud JavaScripti ja nende juhised ei ütle teile, kuidas saate selle koodi oma lehelt eraldi faili teisaldada ja ikkagi JavaScripti kasutada töö. Ärge muretsege, sest hoolimata sellest, millist koodi JavaScripti oma lehel kasutate, saate JavaScripti hõlpsalt teisaldada oma lehe alt välja ja seadistage see eraldi failina (või failideks, kui teil on lehele manustatud rohkem kui üks JavaScripti tükk). Selle tegemise protsess on alati sama ja seda illustreerib kõige paremini näide.

Vaatame, kuidas JavaScripti tükk teie lehele manustatuna välja võiks näha. Teie tegelik JavaScripti kood erineb järgmistes näidetes toodud koodist, kuid protsess on igal juhul sama.

Teie manustatud JavaScript peaks välja nägema umbes üks kolmest ülaltoodud näitest. Muidugi, teie tegelik JavaScripti kood erineb kuvatud koodist, kuid JavaScripti manustatakse JavaScripti tõenäoliselt ühele kolmest ülaltoodud meetodist. Mõnel juhul võib teie kood kasutada aegunud keel = "javascript" selle asemel type = "tekst / javascript" sel juhul võiksite alustuseks oma koodi värskendada, asendades keele atribuudi tüübiga.

Enne JavaScripti ekstraheerimist oma faili peate esmalt tuvastama ekstraheeritava koodi. Kõigis kolmes ülaltoodud näites on tegelikust JavaScripti koodist kaevandatav rida kahel real. Teie skriptil on tõenäoliselt palju rohkem ridu, kuid seda saab hõlpsasti tuvastada, kuna see võtab teie lehel sama koha kui kaks JavaScripti rida, mida me on ülaltoodud kolmes näites esiletõstetud (kõik kolm näidet sisaldavad samu JavaScripti ridu, just nende ümber olev konteiner on pisut erinevad).

1. Esimene asi, mida peate JavaScripti eraldiseisvasse faili ekstraheerimiseks tegema, on avada lihttekstiredaktor ja pääseda juurde oma veebilehe sisule. Seejärel peate leidma manustatud JavaScripti, mida ümbritseb üks ülaltoodud näidetes näidatud koodivariatsioonidest.
2. Kui olete JavaScripti koodi leidnud, peate selle valima ja lõikelauale kopeerima. Ülaltoodud näites tõstetakse esile valitud kood, te ei pea valima skriptisilte ega valikulisi kommentaare, mis võivad teie JavaScripti koodi ümber ilmuda.
3. Avage oma tavalise tekstiredaktori teine ​​koopia (või muu vahekaart, kui redigeerija toetab korraga mitme faili avamist) ja mööda seal asuvat JavaScripti sisu.
4. Valige uue faili jaoks kasutatav kirjeldav failinimi ja salvestage uus fail selle failinime abil. Näitekoodi abil on skripti eesmärk raamidest välja murda, nii et sobiv nimi võiks olla framebreak.js.
5. Nüüd on meil JavaScripti eraldi failina, mille juurde naaseme redigeerijasse, kus meil on algne lehe sisu, et seal muudatused skripti välise koopiaga linkimiseks teha.
6. Kuna skript on nüüd eraldi failina, saame kõik algse sisu skriptimärkide vahelt eemaldada nii, et silt.
7. Viimane samm on lisada skripti sildile täiendav atribuut, mis tuvastab välise JavaScripti leidmise koha. Teeme seda kasutades a src = "failinimi" atribuut. Meie näiteskripti abil täpsustaksime src = "framebreak.js".
8. Ainus komplikatsioon on see, kui oleme otsustanud salvestada välised JavaScriptid neid kasutavatel veebilehtedel eraldi kausta. Kui teete seda, peate lisama tee veebilehe kaustast JavaScripti kausta failinime ette. Näiteks kui JavaScripti salvestatakse a js kaust, mis asub meie vajalike veebilehtede kaustas src = "js / framebreak.js"

Kuidas meie kood välja näeb, kui oleme JavaScripti eraldanud eraldi failiks? Meie JavaScripti näite korral (eeldusel, et JavaScript ja HTML asuvad samas kaustas) on meie veebilehe HTML nüüd järgmine:

Meil on ka eraldi fail nimega framebreak.js, mis sisaldab:

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

Teie failinimi ja sisu erinevad palju sellest, kuna olete välja kaevanud olenemata sellest, kas JavaScripti teie veebisaidile manustati, ja sellele anti failile kirjeldav nimi, mis sellel põhineb see teeb. Tegelik kaevandamise protsess on sama, ehkki sõltumata sellest, milliseid jooni see sisaldab.

Mis saab neist kahest teisest joonest mõlemas teises ja kolmandas? Kahe näite nende ridade eesmärk on JavaScripti peitmine Netscape 1 ja Interneti eest Explorer 2, millest kumbagi enam ei kasutata ja seega pole neid ridu esimeses tegelikult vaja koht. Koodi välisesse faili paigutamine peidab koodi brauseritelt, kes ei saa skripti märgendist tõhusamalt aru, kui seda ikkagi HTML-kommentaaris ümbritseda. Kolmandat näidet kasutatakse XHTML-lehtede puhul valideerijatele, et JavaScripti tuleks käsitleda lehe sisuna, mitte selle kinnitamiseks. HTML-vormingus (kui kasutate mitte XHTML-i, vaid HTML-i dotüüpi, siis valideerija juba teab seda ja seega pole need sildid vaja). Kui JavaScripti kasutatakse eraldi failina, pole enam JavaScripti sellel lehel, mille valideerijad saaksid vahele jätta, ja seetõttu pole neid ridu enam vaja.

Üks JavaScripti kõige kasulikumaid viise funktsioonide lisamiseks veebilehele on töötlemine vastusena külastaja toimingule. Kõige tavalisem toiming, millele soovite reageerida, on see, kui külastaja klõpsab midagi. Kutsutakse sündmuste käitlejat, mis võimaldab teil reageerida külastajatele millelegi klõpsates klõps.

Kui enamik inimesi mõtleb esmakordselt onclicki sündmuste töötleja lisamisele oma veebilehele, mõtlevad nad kohe selle lisamisele silt. See annab kooditüki, mis sageli välja näeb:

See on vale viis onclicki kasutamiseks, kui atribuudil href pole tegelikult sisulist aadressi, nii et ilma JavaScriptita kantakse lingile klõpsates kuhugi. Paljud inimesed jätavad selle koodi alt välja ka vale tagastamise ja siis imestavad, miks praeguse lehe ülaosa alati laaditakse pärast skripti käivitamist (mida href = "#" käsib lehel teha, kui kõik sündmustekäitlejad ei tagasta vale andmeid). Muidugi, kui teil on lingi sihtkohana midagi tähenduslikku, võiksite sinna minna pärast onclick-koodi käivitamist ja siis ei vaja te „tagasi vale”.

Paljud inimesed ei taipa, et onclicki sündmuste käitlejale saab lisada mis tahes Veebilehe HTML-märgend, et suhelda, kui külastaja klõpsab sellel sisul. Nii et kui soovite, et midagi käivitataks, kui inimesed klõpsavad pildil, mida saate kasutada:

Kui soovite midagi käivitada, kui inimesed klõpsavad mõnel tekstil, mida saate kasutada:

mingi tekst

Muidugi ei anna need automaatset visuaalset aimugi, et vastus saab siis, kui teie külastaja klõpsab sellel lingi moodi, kuid pildi või vahemiku kujundamisel saate selle visuaalse vihje ise piisavalt hõlpsasti lisada sobivalt.

Teine asi, mida nende onclicki sündmuste käitleja kinnitamise viiside kohta märkida, on see, et need ei vaja "return false", sest kui üksusele klõpsatakse, siis vaiketoiminguid tegema ei pea puudega.

Need onclicki kinnitamisviisid on suureks edusammuks halva meetodi osas, mida paljud inimesed kasutavad, kuid selle kodeerimise parim viis on veel kaugel. Üks onclicki lisamise probleem ülaltoodud meetodite kasutamisel on see, et JavaScripti segatakse endiselt teie HTML-iga. klõps on mitte HTML-atribuut, see on JavaScripti sündmuste käitleja. Sellisena, et eraldada meie JavaScripti meie HTML-ist, et lehte oleks hõlpsam hooldada, peame selle klõpsamise viite HTML-failist eraldama eraldi JavaScripti faili, kus see kuulub.

Lihtsaim viis selleks on HTML-i klõpsamise asendamine HTML-iga id mis hõlbustab sündmuste töötleja manustamist HTML-i vastavasse kohta. Nii et meie HTML võib nüüd sisaldada ühte neist avaldustest:

 mingi tekst

Seejärel saame JavaScripti kodeerida eraldi JavaScripti failis, mis on kas lingitud lehe põhjale või mis asub lehe peas ja kus meie kood asub funktsioonis, mida ise kutsutakse pärast lehe laadimise lõpetamist. Meie JavaScript sündmuste käitlejate lisamiseks näeb nüüd välja järgmine:

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

Üks asi, mida märkida. Võite märgata, et oleme klõpsamise alati kirjutanud täielikult väiketähtedega. Väljavõtet nende HTML-i kodeerides näete, et mõned inimesed kirjutavad selle onClicki kujul. See on vale, kuna JavaScripti sündmuste käitlejate nimed on kõik väiketähed ja sellist käitlejat nagu onClick pole. Võite sellest vabaneda, kui lisate JavaScripti otse oma HTML-i sildisse, kuna HTML ei ole tõstutundlik ja brauser kaardistab selle teie jaoks õige nimega. Vale suurtähtede kasutamist oma JavaScriptis ise ei saa, kuna JavaScript on tõstutundlik ja JavaScriptis pole sellist asja nagu onClick.

See kood on varasemate versioonidega võrreldes tohutu edasiminek, kuna kinnitame nüüd mõlemad sündmuse oma HTML-i õigele elemendile ja meil on JavaScript HTML-ist täiesti eraldi. Saame seda veelgi paremaks muuta.

Üks allesjäänud probleem on see, et me saame kindlale elemendile kinnitada ainult ühe klõpsuürituse käitleja. Kui peaksime mingil ajal sama elemendi külge kinnitama erineva onclicki sündmuste käitleja, siis varem lisatud töötlemist sellele elemendile enam ei kinnitata. Kui lisate oma veebilehele erinevatel eesmärkidel erinevaid skripte, on vähemalt a võimalus, et kaks või enam neist soovivad pakkuda töötlemist, mida teostatakse, kui sama element on klõpsanud. Selle probleemi räpane lahendus on tuvastada, kus selline olukord tekib, ja ühendada kutsumiseks vajalik töötlemine funktsiooniks, mis täidab kogu töötlemise.

Sellised kokkupõrked on onclicki puhul vähem levinud kui pealelaadimisel, kuid kokkupõrgete eelnevalt tuvastamine ja nende ühendamine pole ideaalne lahendus. See pole üldse lahendus, kui tegelik töötlemine, mis tuleb elemendi külge kinnitada, aja jooksul muutub, nii et mõnikord on üks asi teha, mõnikord teine ​​ja mõnikord mõlemad.

Parim lahendus on lõpetada sündmuste käitleja kasutamine täielikult ja kasutada selle asemel JavaScripti sündmuste kuulajat (koos koos JScripti vastava AttaEvent'iga - kuna see on üks neist olukordadest, kus JavaScripti ja Jcripti erinevad). Me saame seda kõige hõlpsamini teha, luues esmalt funktsiooni addEvent, mis lisab sündmuse kuulaja või manuse sõltuvalt sellest, kumba kahest käitatav keel toetab;

funktsioon addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); tagasi tõsi; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Nüüd saame manustada töötlemise, mis me tahame toimuda, kui meie elemendil klõpsatakse, kasutades:

addEvent (document.getElementById ('spn1'), 'klõps', dosomething, false);

Selle elemendi klõpsamisel töödeldava koodi kinnitamise meetodi kasutamine tähendab, et uue addEvent-kõne tegemine uue funktsiooni lisamiseks käivitamine konkreetse elemendi klõpsamisel ei asenda eelnevat töötlemist uue töötlemisega, vaid lubab selle asemel mõlemat funktsiooni jooksma. Me ei pea addEvent'ile helistades teadma, kas meil on juba funktsioon lisatud kui klõpsatakse, käivitatakse uus funktsioon koos varem funktsioonidega lisatud.

Kui me vajame võimalust funktsioonide eemaldamiseks sellest, mis käivitatakse, kui elemendil klõpsatakse, siis võiksime luua a vastav deleteEvent funktsioon, mis kutsub sündmuse kuulaja eemaldamiseks või manustamiseks vajaliku funktsiooni välja sündmus?

Selle töötlemise manustamise viimase viisi miinuseks on see, et tõesti vanad brauserid ei toeta neid suhteliselt uusi viise sündmuste töötlemise veebisaidile kinnitamiseks. Selliseid vananenud brausereid peaks praeguseks olema piisavalt vähe, et jätta neid tähelepanuta J (ava) Skript, mille kirjutame lisaks oma koodi kirjutamisele nii, et see ei põhjustaks tohutult palju vigu sõnumid. Ülaltoodud funktsioon on kirjutatud nii, et mitte midagi teha, kui kumbki selle kasutatav viis pole toetatud. Enamik neist tõesti vanadest brauseritest ei toeta ka HTML-ile viitamise meetodit getElementById ja see on nii lihtne if (! document.getElementById) return false; mis tahes funktsiooni ülaosas, mis selliseid kõnesid teeb, oleks samuti asjakohane. Muidugi, paljud JavaScripti kirjutavad inimesed pole nii arvestavad nende suhtes, kes endiselt kasutavad antiikseid brausereid ja seega peavad kasutajad olema harjunud nägema JavaScripti vigu peaaegu igal nüüd külastataval veebilehel.

Millist neist erinevatest viisidest kasutate töötlemiseks oma lehele manustamiseks, mida käitatakse, kui külastajad millelegi klõpsavad? Kui see, kuidas te seda teete, on lehe ülaosas olevatele näidetele lähemal kui lehe allosas olevatele näidetele, siis võib-olla on kui olete mõelnud, kuidas täiustada oma klõpsamisega töötlemise kirjutamisviisi, et kasutada üht paremat meetodit, mis on esitatud allpool lehel.

Vaadates brauseriülese sündmuste kuulaja koodi, näete, et seal on neljas parameeter, mida me kutsusime uC, mille kasutamine pole eelnevast kirjeldusest ilmne.

Brauseritel on kaks erinevat järjestust, milles nad saavad sündmuse käivitamisel sündmusi töödelda. Nad võivad töötada väljastpoolt sissepoole

• uC = tõene töötlemise ajal
• uC = vale töötlemiseks mullifaasis.

Nii et kui ümber on veel mitu silti, siis käivitatakse sündmus käivitusfaasis kõigepealt välimise sildiga ja liigutakse sisse sündmuse käivitanud poole ja siis, kui sündmuse kinnitatav silt on töödeldud, pöörab mullfaas protsessi ümber ja läheb tagasi jälle.

Internet Explorer ja traditsioonilised sündmuste käitlejad töötlevad mullifaasi ja mitte kunagi hõivamisetappi ning alustavad seega alati kõige spetsiifilisema sildiga ja töötavad väljapoole.

Nii ka ürituste käitlejatega:

xx