Kaip atskirti „JavaScript“ savo tinklalapyje

Kai pirmą kartą rašote naują „JavaScript“, lengviausias būdas jį nustatyti yra įterpti „JavaScript“ kodą tiesiai į tinklalapį, kad viskas būtų vienoje vietoje, kol jūs jį išbandysite, kad jis veiktų teisingai. Panašiai, jei į savo svetainę įdedate iš anksto parašytą scenarijų, instrukcijose gali būti liepta įterpti visas ar visas scenarijaus dalis į patį tinklalapį.

Tai tinka, jei pirmiausia nustatote puslapį ir norite, kad jis tinkamai veiktų, tačiau kai jūsų puslapis veiks taip, kaip norite, galėsite. patobulinkite puslapį ištraukdami „JavaScript“ į išorinį failą, kad HTML puslapio turinys nebūtų taip apkrautas, kad nėra turinio elementų, tokių kaip „JavaScript“.

Jei tiesiog nukopijavote ir naudojate „JavaScripts“, parašytus kitų žmonių, tada jų instrukcijos, kaip pridėti scenarijų prie jūsų puslapio, galėjo sukelti vieną ar daugiau didelių „JavaScript“ iš tikrųjų įdėta į patį jūsų tinklalapį, o jų instrukcijos nenurodo, kaip galite perkelti šį kodą iš savo puslapio į atskirą failą ir vis tiek turėti „JavaScript“ darbas. Nesijaudinkite, nes, nepaisant to, kokį kodą naudojate „JavaScript“ jūsų puslapyje, galite lengvai perkelti „JavaScript“ iš savo puslapio ir nustatykite jį kaip atskirą failą (arba failus, jei puslapyje yra daugiau nei vienas „JavaScript“ fragmentas). Tai visuomet atliekamas tas pats procesas, kurį geriausiai iliustruoja pavyzdys.

Pažvelkime, kaip „JavaScript“ gabalas gali atrodyti įterptas į jūsų puslapį. Jūsų tikrasis „JavaScript“ kodas skirsis nuo pateikto pavyzdžiuose, tačiau visais atvejais procesas yra tas pats.

Jūsų įterptas „JavaScript“ turėtų atrodyti kaip vienas iš aukščiau paminėtų trijų pavyzdžių. Žinoma, tikrasis „JavaScript“ kodas skirsis nuo pavaizduotojo, tačiau „JavaScript“ turbūt bus įterptas į puslapį naudojant vieną iš aukščiau paminėtų trijų būdų. Kai kuriais atvejais jūsų kodas gali būti pasenęs kalba = "javascript" vietoj type = "text / javascript" tokiu atveju galbūt norėsite atnaujinti savo kodą, pakeisdami kalbos atributą vieno tipo.

Kad galėtumėte išskleisti „JavaScript“ į savo failą, pirmiausia turite nustatyti, kokį kodą norite išskleisti. Visuose trijuose aukščiau išvardytuose pavyzdžiuose yra dvi eilutės, kurias reikia išskleisti „JavaScript“ kodą. Jūsų scenarijuje tikriausiai bus daug daugiau eilučių, tačiau jį bus galima lengvai atpažinti, nes jis užims tą pačią vietą jūsų puslapyje kaip dvi „JavaScript“ eilutės, kurias mes išryškino aukščiau esančiuose trijuose pavyzdžiuose (visuose trijuose pavyzdžiuose yra tos pačios dvi „JavaScript“ eilutės, tik aplink juos esantis konteineris yra šiek tiek skirtinga).

1. Pirmasis dalykas, kurį turite padaryti, kad iš tikrųjų ištrauktumėte „JavaScript“ į atskirą failą, turite atidaryti paprasto teksto rengyklę ir pasiekti savo tinklalapio turinį. Tuomet turite surasti įterptą „JavaScript“, kurį supa vienas iš aukščiau pateiktuose pavyzdžiuose pateiktų kodo variantų.
2. Suradę „JavaScript“ kodą turite jį pasirinkti ir nukopijuoti į mainų sritį. Pateiktame pavyzdyje pažymimas pasirinktas kodas, jums nereikia pasirinkti scenarijaus žymų ar pasirenkamų komentarų, kurie gali būti rodomi aplink „JavaScript“ kodą.
3. Atidarykite kitą paprasto teksto rengyklės kopiją (arba kitą skirtuką, jei redaktorius palaiko atidaryti daugiau nei vieną failą vienu metu) ir praleiskite ten „JavaScript“ turinį.
4. Pasirinkite aprašomąjį failo vardą, kurį norite naudoti naujam failui, ir išsaugokite naują turinį naudodami tą failo vardą. Naudojant pavyzdžio kodą, scenarijaus tikslas yra išbristi iš rėmelių, kad galėtų būti tinkamas vardas framebreak.js.
5. Taigi dabar mes turime „JavaScript“ atskirame faile, mes grįžtame į redaktorių, kur turime pradinį puslapio turinį, kad galėtume ten pakeisti pakeitimus, kad būtų nuoroda į išorinę scenarijaus kopiją.
6. Kadangi scenarijų turime atskirame faile, mes galime pašalinti viską, kas yra scenarijaus žymų originaliame turinyje, kad žyma.
7. Paskutinis žingsnis yra pridėti papildomą atributą prie scenarijaus žymų, nurodantį, kur jis gali rasti išorinį „JavaScript“. Mes tai darome naudodami src = "failo vardas" atributas. Savo scenarijaus pavyzdyje nurodytume src = "framebreak.js".
8. Vienintelė komplikacija yra tai, jei nusprendėme išorinius „JavaScripts“ laikyti atskirame aplanke nuo juos naudojančių tinklalapių. Jei tai padarysite, turite pridėti kelią iš tinklalapio aplanko į „JavaScript“ aplanką priešais failo vardą. Pvz., Jei „JavaScripts“ yra saugomi js aplanke, esančiame aplanke, kuriame yra mūsų reikalingi tinklalapiai src = "js / framebreak.js"

Taigi, kaip atrodo mūsų kodas, atskyrę „JavaScript“ į atskirą failą? Mūsų „JavaScript“ pavyzdžio atveju (darant prielaidą, kad „JavaScript“ ir HTML yra tame pačiame aplanke), mūsų tinklalapio HTML dabar yra toks:

Mes taip pat turime atskirą failą, vadinamą framebreak.js, kuriame yra:

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

Jūsų failo vardas ir failo turinys daug kuo skirsis, nes būsite išgauti kad ir koks „JavaScript“ buvo įdėtas į jūsų tinklalapį ir suteiktas failui aprašomasis vardas pagal tai, kuo ji. Faktinis jo gavimo procesas bus vienodas, nepaisant to, kokias linijas jis sudaro.

Ką apie tas kitas dvi eilutes kiekviename antrame ir trečiame pavyzdžiuose? Antra, šių eilučių tikslas yra paslėpti „JavaScript“ nuo „Netscape 1“ ir interneto „Explorer 2“ - nė vienas iš jų daugiau nenaudojamas, todėl pirmosios šios eilutės nėra tikrai reikalingos vieta. Įdėdami kodą į išorinį failą, jis paslepiamas iš naršyklių, kurios scenarijaus žymės nesupranta efektyviau, nei vis tiek supa HTML komentarą. Trečiasis pavyzdys yra naudojamas XHTML puslapiams, kad patvirtintojams būtų pasakyta, kad „JavaScript“ turėtų būti traktuojama kaip puslapio turinys, o ne jo patvirtinti. kaip HTML (jei naudojate HTML, o ne XHTML, tipą, tada patvirtintojas tai jau žino, taigi šios žymės nėra reikia). Kai „JavaScript“ yra atskirame faile, „JavaScript“ puslapyje nebėra, kurį galėtų praleisti tikrintojai, todėl tos eilutės nebereikia.

Vienas naudingiausių būdų, kaip „JavaScript“ gali būti naudojamas norint pridėti tinklalapio funkcionalumą, yra tam tikras apdorojimas, atsižvelgiant į jūsų lankytojo veiksmus. Dažniausias veiksmas, į kurį norite reaguoti, bus tada, kai lankytojas ką nors spustelės. Kviečiamas įvykių tvarkytojas, kuris leidžia jums atsiliepti lankytojams paspaudus ką nors paspaudus.

Kai dauguma žmonių pirmą kartą galvoja apie „onclick“ įvykių tvarkyklės įtraukimą į savo tinklalapį, jie iškart pagalvoja apie tai, kaip ją įtraukti žyma. Tai suteikia kodą, kuris dažnai atrodo taip:

Tai yra neteisinga būdas naudoti „onclick“, nebent „href“ atribute turite faktinį reikšmingą adresą, kad tie, kurie neturi „JavaScript“, būtų perkelti kažkur, kai spustelės nuorodą. Daugelis žmonių iš šio kodo taip pat neįtraukia „grąžinti klaidingą“ ir tada stebisi, kodėl visada įkeliamas dabartinio puslapio viršuje po scenarijaus paleidimo (tai yra, ką href = "#" liepia puslapiui daryti, nebent iš visų įvykių tvarkytojų būtų pateikiama klaidinga informacija. Žinoma, jei turite ką nors reikšmingo kaip nuorodos paskirties, tada galbūt norėsite ten nuvykti paleidę „onclick“ kodą ir tada jums nereikės „grąžinti klaidingo“.

Daugelis žmonių nesuvokia, kad prie jos galima pridėti „onclick“ įvykių tvarkyklę bet kokia HTML žyma tinklalapyje, kad būtų galima sąveikauti, kai lankytojas spustelėja tą turinį. Taigi, jei norite, kad kažkas vyktų, kai žmonės spustelėja vaizdą, galite naudoti:

Jei norite ką nors paleisti, kai žmonės spustelėja tekstą, kurį galite naudoti:

šiek tiek teksto

Žinoma, tai nesuteikia automatinio vaizdinio, kad bus atsakymas, jei lankytojas spustelės juos Taip, kaip nurodo nuoroda, bet jūs galite lengvai pridėti tą vaizdinį užuominą patys, suformuodami atvaizdą arba tarpatramį tinkamai.

Kitas dalykas, kurį reikia atkreipti į šiuos „onclick“ įvykių apdorojimo priemonės pritvirtinimo būdus, yra tas, kad jiems nereikia „grąžinti klaidingą“, nes nėra numatytųjų veiksmų, kurie įvyks spustelėjus elementą, kuris turi būti neįgalus.

Šie „onclick“ pritvirtinimo būdai yra didelis patobulinimas prastą metodą, kurį naudoja daugelis žmonių, tačiau dar nėra labai gerai, kad būtų galima jį užkoduoti. Viena iš problemų, susijusių su „onclick“ pridėjimu naudojant bet kurį iš aukščiau pateiktų metodų, yra ta, kad ji vis dar maišo „JavaScript“ su HTML. paspaudus yra ne HTML atributas, jis yra „JavaScript“ įvykių tvarkytojas. Norėdami atskirti „JavaScript“ nuo mūsų HTML, kad būtų lengviau prižiūrėti puslapį, turime tą nuorodą spustelėti iš HTML failo į atskirą „JavaScript“ failą, kur jis priklauso.

Lengviausias būdas tai padaryti yra HTML paspaudimo pakeitimas ID tai leis lengvai pritvirtinti įvykių tvarkytuvą prie atitinkamos HTML vietos. Taigi mūsų HTML dabar gali būti vienas iš šių teiginių:

 šiek tiek teksto

Tada „JavaScript“ galime koduoti atskirame „JavaScript“ faile, kuris yra susietas su puslapio turiniu arba kuri yra puslapio galvoje ir kurioje yra mūsų kodas funkcijos, kuri pati vadinama pasibaigus puslapio įkėlimui, viduje. Mūsų „JavaScript“, kad būtų galima prisegti renginių tvarkytojus, dabar atrodo taip:

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

Reikia atkreipti dėmesį į vieną dalyką. Pastebėsite, kad visada rašėme „onclick“ tik mažosiomis raidėmis. Kai koduosite pareiškimą jų HTML formate, pamatysite, kad kai kurie žmonės jį rašo kaip „onClick“. Tai neteisinga, nes visi „JavaScript“ įvykių tvarkytojų pavadinimai yra mažosiomis raidėmis ir nėra tokio tvarkytojo kaip „onClick“. Galite atsikratyti to, kai į savo HTML žymą tiesiogiai įtraukiate „JavaScript“, nes HTML nėra didžiųjų ir mažųjų raidžių, o naršyklė jį paskirs teisingu jūsų vardu. Negalite atsisakyti netinkamos didžiosios raidės rašymo pačioje „JavaScript“, nes „JavaScript“ yra jautriosios ir mažosios raidės, o „JavaScript“ nėra tokio dalyko kaip „onClick“.

Šis kodas yra didžiulis patobulinimas, palyginti su ankstesnėmis versijomis, nes mes abu dabar įvykį pridedame prie tinkamo HTML elemento ir „JavaScript“ yra visiškai atskirti nuo HTML. Vis dėlto galime tai patobulinti.

Viena likusi problema yra ta, kad prie konkretaus elemento galime pridėti tik vieną „onclick“ įvykių tvarkyklę. Jei mums bet kada reikia prie to paties elemento pridėti kitą „onclick“ įvykių tvarkyklę, tada anksčiau pridėtas apdorojimas prie to elemento nebebus pridedamas. Kai į savo tinklalapį pridedate daugybę skirtingų scenarijų įvairiems tikslams, yra bent jau galimybė, kad du ar daugiau iš jų gali norėti atlikti tam tikrą apdorojimą, kai tas pats elementas yra spustelėjo. Nepatogus šios problemos sprendimas yra nustatyti, kur iškyla tokia situacija, ir sujungti apdorojimą, kurį reikia sušaukti, į funkciją, kuri atlieka visą apdorojimą.

Nors tokie susidūrimai yra rečiau pasitaikantys „onclick“ atveju nei pasikartojantys, „susidūrimai“ iš anksto nustatyti ir sujungti kartu nėra idealus sprendimas. Tai nėra sprendimas, kai realus apdorojimas, kurį reikia pridėti prie elemento, laikui bėgant keičiasi taip, kad kartais reikia padaryti vieną, kartais kitą, o kartais abu.

Geriausias sprendimas yra visiškai nustoti naudoti renginių tvarkyklę ir vietoje to naudoti „JavaScript“ įvykių klausytoją (kartu su su atitinkamu Jscript AttaEvent - nes tai yra viena iš tų situacijų, kai „JavaScript“ ir „JScript“ skiriasi). Tai galime padaryti lengviausiai iš pradžių sukūrę funkciją „addEvent“, kuri pridės arba įvykio klausytoją, arba priedą, atsižvelgiant į tai, kurį iš dviejų palaikoma ta kalba;

funkcija addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); grįžti tiesa; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Dabar galime pridėti apdorojimą, kurį norime atlikti, kai spustelėjame elementą, naudodami:

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

Naudojant šį apdorojamo kodo pridėjimo metodą, kai paspaudžiamas elementas, reiškia, kad paskambinus kitam „addEvent“ skambučiui, norint pridėti kitą funkciją Vykdyti, kai paspaudžiamas konkretus elementas, nepakeis ankstesnio apdorojimo nauju apdorojimu, bet leis abiem funkcijomis naudotis: bėgti. Mums nereikia žinoti, kai skambiname į „addEvent“, ar jau turime prie jo prijungtą funkciją elementas, kuris bus paleistas spustelėjus, nauja funkcija bus paleista kartu su funkcijomis, kurios buvo anksčiau pridedamas.

Jei mums reikia sugebėjimo pašalinti funkcijas iš to, kas paleidžiama spustelėjus elementą, tada galime sukurti atitinkama „deleteEvent“ funkcija, iškviečianti atitinkamą įvykio klausytojo pašalinimo funkciją arba pridedama įvykis?

Vienintelis šio paskutinio apdorojimo prijungimo būdo trūkumas yra tas, kad tikrai senos naršyklės nepalaiko šių palyginti naujų būdų, kaip įvykių apdorojimą pritvirtinti prie tinklalapio. Dabar turėtų būti mažai žmonių, naudojančių tokias senovines naršykles, kad nekreiptų į juos dėmesio J (ava) Scenarijus, kurį rašome ne tik rašydami kodą, kad jis nesukeltų daugybės klaidų žinutes. Aukščiau pateikta funkcija parašyta taip, kad nieko nedarytų, jei nepalaikomas nė vienas iš jos naudojamų būdų. Dauguma šių tikrai senų naršyklių nepalaiko ir „getElementById“ nuorodų į HTML metodą, taigi ir paprastas if (! document.getElementById) grąžinti klaidingą; taip pat būtų tinkama bet kurios iš jūsų funkcijų, kurios atlieka tokius skambučius, viršuje. Žinoma, daugelis žmonių, rašančių „JavaScript“, nėra tokie dėmesingi tiems, kurie vis dar naudojasi senovinėmis naršyklėmis ir todėl tie vartotojai turi būti įpratę matyti „JavaScript“ klaidas beveik kiekviename jų lankomame tinklalapyje.

Kurį iš šių skirtingų būdų naudojate norėdami pridėti tvarkymą prie savo puslapio, kad jis būtų vykdomas, kai lankytojai ką nors spustelėja? Jei tai, ką darote, yra arčiau pavyzdžių puslapio viršuje nei tų pavyzdžių puslapio apačioje, tada galbūt taip yra laikas, kai pagalvojote, kaip patobulinti „onclick“ apdorojimo būdą, kad galėtumėte naudoti vieną iš geresnių metodų, pateiktų žemiau puslapis.

Pažvelgę ​​į kelių naršyklių įvykių klausytojo kodą pastebėsite, kad yra ketvirtasis parametras, kurį mes vadinome uC, kurio naudojimas nėra akivaizdus iš ankstesnio aprašymo.

Naršyklės turi dvi skirtingas tvarkas, kuriomis jos gali apdoroti įvykius suaktyvinus įvykį. Jie gali dirbti iš išorės į vidų nuo

• uC = tikra, kad procesas vyktų fiksavimo etape
• uC = klaidinga apdoroti burbulo fazės metu.

Taigi ten, kur yra keletas kitų žymų, apvyniotų aplink vieną, įvykis buvo suaktyvintas fiksavimo etape, pirmiausia pradedant nuo tolimiausios žymos ir judant link to, kuris suaktyvino įvykį, o tada, kai buvo prisegta žyma, prie kurios buvo prisegtas įvykis, burbulo fazė apverčia procesą ir išeina atgal vėl.

„Internet Explorer“ ir tradiciniai renginių tvarkytojai visada apdoroja burbulo fazę, o ne fiksavimo fazę, todėl visada pradėkite nuo konkrečiausios žymos ir dirbkite išorėje.

Taigi su renginių vedėjais:

xx