Kako odvojiti JavaScript na svojoj web stranici

Kada prvi put napišete novi JavaScript, najlakši način za postavljanje je ugraditi JavaScript kôd izravno na web stranicu tako da je sve na jednom mjestu dok ga testirate da biste mogli raditi pravo. Slično tome, ako na svoju web stranicu umetate unaprijed napisanu skriptu, upute mogu vam uputiti ugrađivanje dijelova ili čitave skripte u samu web stranicu.

To je u redu za postavljanje stranice i za uspostavljanje ispravnog rada, ali kad stranica radi onako kako vi želite, moći ćete poboljšajte stranicu ekstrahiranjem JavaScripta u vanjsku datoteku tako da sadržaj vaše stranice u HTML-u nije toliko prepun ne sadržajnih stavki kao što su JavaScript.

Ako samo kopirate i koristite JavaScripts napisane od drugih ljudi, tada su njihove upute o dodavanju skripte na vašu stranicu mogle rezultirati time da imate jedan ili više velikih odjeljaka JavaScript je zapravo ugrađen u vašu web stranicu i njihove upute ne govore kako možete ovaj kôd premjestiti sa stranice u zasebnu datoteku i dalje imati JavaScript raditi. Ne brinite se, jer bez obzira na to koji kod JavaScript koristite na svojoj stranici, jednostavno možete premjestiti JavaScript s vaše stranice i postavite je kao zasebnu datoteku (ili datoteke ako na stranicu imate ugrađen više komada JavaScripta). Postupak za to uvijek je isti i najbolje je ilustriran primjerom.

Pogledajmo kako dio JavaScript može izgledati kad je ugrađen u vašu stranicu. Vaš stvarni JavaScript kôd bit će različit od onoga prikazanog u sljedećim primjerima, ali postupak je u svakom slučaju isti.

Vaš ugrađeni JavaScript trebao bi izgledati kao jedan od gore navedena tri primjera. Naravno, vaš stvarni JavaScript kôd bit će drugačiji od prikazanog, ali JavaScript će vjerojatno biti ugrađen u stranicu pomoću jedne od gore navedene tri metode. U nekim slučajevima vaš kôd može koristiti zastarjeli language = "javascript" umjesto type = "text / javascript" u tom slučaju možda želite ažurirati svoj kôd za početak zamjenom jezičnog atributa s tipom tipa.

Prije nego što izvadite JavaScript u vlastitu datoteku, prvo morate identificirati kôd koji treba izdvojiti. U sva tri gore navedena primjera potrebno je izdvojiti dva retka stvarnog JavaScript koda. Vaša će skripta vjerojatno imati puno više redaka, ali može se lako prepoznati jer će zauzimati isto mjesto unutar vaše stranice kao i dva retka JavaScripta su istaknuta u gornja tri primjera (sva tri primjera sadrže ista dva retka JavaScripta, samo je spremnik oko njih malo različit).

1. Prvo što trebate učiniti kako biste ustvari izdvojili JavaScript u zasebnu datoteku je otvaranje običnog uređivača teksta i pristup sadržaju vaše web stranice. Tada morate pronaći ugrađeni JavaScript koji će biti okružen jednom od varijacija koda prikazanim u gornjim primjerima.
2. Smjestivši JavaScript kôd morate ga odabrati i kopirati u međuspremnik. Gore navedenim primjerom označava se kôd koji trebate odabrati, ne morate odabrati oznake skripte ili neobavezne komentare koji se mogu pojaviti oko vašeg JavaScript koda.
3. Otvorite drugu kopiju običnog uređivača teksta (ili drugu karticu ako vaš uređivač podržava otvaranje više od jedne datoteke istodobno) i tamo zalijepite JavaScript sadržaj.
4. Odaberite opisno ime datoteke za korištenje nove datoteke i spremite novi sadržaj pomoću tog naziva datoteke. S primjerom koda, svrha skripte je probiti se iz okvira kako bi bilo odgovarajuće ime framebreak.js.
5. Dakle, sada imamo JavaScript u zasebnoj datoteci, vraćamo se u urednik gdje imamo izvorni sadržaj stranice kako bismo tamo napravili promjene i povezali se s vanjskom kopijom skripte.
6. Kako sada imamo skriptu u zasebnoj datoteci, možemo ukloniti sve između oznaka skripte u izvornom sadržaju tako da označiti.
7. Završni korak je dodavanje dodatnog atributa oznaci skripte identificirajući gdje može pronaći vanjski JavaScript. To radimo pomoću a src = "filename" atribut. S našim primjerom skripte odredili bismo src = "framebreak.js".
8. Jedina komplikacija u tome je ako smo odlučili pohraniti vanjske JavaScripte u zasebnu mapu s web stranica koje ih koriste. Ako to učinite, tada trebate dodati naziv iz mape web stranica u mapu JavaScript ispred naziva datoteke. Na primjer, ako su JavaSkripti pohranjeni u js mapu u mapi koja sadrži naše web stranice koje bismo trebali src = "js / framebreak.js"

Pa kako izgleda naš kôd nakon što smo JavaScript odvojili u zasebnu datoteku? U slučaju našeg primjera JavaScript (pod pretpostavkom da su JavaScript i HTML u istoj mapi) naš HTML na web stranici glasi:

Također imamo zasebnu datoteku koja se zove framebreak.js koja sadrži:

ako (top.location! = samo.lokacija) top.location = self.location;

Vaše će ime i sadržaj datoteke biti puno drugačije od onoga jer ćete ih izdvojiti što god da je JavaScript ugrađen u vašu web stranicu i datosti je dao opisno ime na temelju čega to radi. Stvarni postupak vađenja bit će isti iako bez obzira na to koje retke sadrži.

Što je s ta dva dva retka u svakom od primjera dva i tri? Pa, svrha ovih redaka u primjeru dva je sakriti JavaScript od Netscapea 1 i Interneta Explorer 2, od kojih nijedan više ne koristi pa ti prvi nisu baš potrebni mjesto. Ako kôd postavite u vanjsku datoteku, on skriva kod preglednika koji oznaku skripte ne razumiju učinkovitije nego je okružuju u komentaru HTML-a. Treći se primjer koristi za XHTML stranice kako bi se potvrđivačima moglo reći da JavaScript treba tretirati kao sadržaj stranice, a ne da ga potvrđuju. kao HTML (ako koristite HTML doctype umjesto XHTML, onda validator to već zna i stoga te oznake nisu potrebno). S JavaScript-om u zasebnoj datoteci više nema JavaScript-a na stranici koji bi preskočili validatori, pa ti redovi više nisu potrebni.

Jedan od najkorisnijih načina na koji se JavaScript može koristiti za dodavanje funkcionalnosti web stranici je izvođenje neke vrste obrade kao odgovor na radnju vašeg posjetitelja. Najčešća radnja na koju želite odgovoriti je kada posjetitelj na nešto klikne. Poziva se organizator događaja koji vam omogućuje da reagirate na posjetitelje koji nešto kliknu na klik.

Kada većina ljudi prvo pomisli na dodavanje alata za obradu događaja onclick svojoj web stranici, odmah pomisle da ga dodaju u an označiti. To daje dio koda koji često izgleda ovako:

Ovo je pogrešno način korištenja onclick-a osim ako u atributu href nemate stvarnu smislenu adresu tako da se oni bez JavaScript prebace negdje kada kliknu na vezu. Puno ljudi također izostavlja "return false" s ovog koda i pitaju se zašto se uvijek učita vrh trenutne stranice nakon što se skripta pokrene (što je ono što href = "#" poručuje stranici da učini, osim ako se ne vrati false iz svih postupaka za obradu događaja. Naravno, ako imate nešto smisleno kao odredište veze, možda želite krenuti tamo nakon što pokrenete onclick kôd i tada vam neće trebati "vrati lažno".

Ono što mnogi ljudi ne shvaćaju je to što se onclick događaj za obradu događaja može dodati bilo koji HTML oznaka na web stranici kako bi komunicirala kada posjetitelj klikne na taj sadržaj. Dakle, ako želite da se nešto pokrene kada ljudi kliknu na sliku koju možete koristiti:

Ako želite pokrenuti nešto kad ljudi kliknu na neki tekst, možete koristiti:

neki tekst

Naravno, oni ne daju automatski vizualni znak da će doći do odgovora ako vaš posjetitelj klikne na njih na način na koji to čini, ali vizualni trag možete dovoljno jednostavno dodati sami stiliziranjem slike ili raspona na odgovarajući način.

Druga stvar koja se mora napomenuti o ovim načinima pričvršćivanja onclick manipulatora događaja je da oni ne zahtijevaju "return false" jer ne postoji zadana radnja koja će se dogoditi kad se na to klikne element onemogućeno.

Ovi su načini pričvršćivanja onclick-a veliko poboljšanje za lošu metodu koju mnogi koriste, ali još je daleko od toga da je to najbolji način kodiranja. Jedan problem s dodavanjem onclick-a primjenom bilo koje od gore navedenih metoda je taj što on i dalje miješa vaš JavaScript s vašim HTML-om. na klik je ne HTML atribut, to je JavaScript obradnik događaja. Kao takav da razdvojimo naš JavaScript od našeg HTML-a da bi stranica bila lakša za održavanje, potrebno je da se onclick referenca iz HTML datoteke odvoji u zasebnu JavaScript datoteku tamo gdje i pripada.

Najlakši način za to je zamijeniti onclick u HTML-u s an iskaznica što će olakšati dodavanje alata za obradu događaja na odgovarajuće mjesto u HTML-u. Tako bi sada naš HTML mogao sadržavati jednu od sljedećih izjava:

 neki tekst

Zatim možemo kodirati JavaScript u zasebnu JavaScript datoteku koja je ili povezana na dnu tijela stranice ili koja se nalazi u glavi stranice i gdje se naš kôd nalazi unutar funkcije koja se sama zove nakon što se stranica završi s učitavanjem. Naš JavaScript za priključivanje obrađivača događaja sada izgleda ovako:

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

Jedna stvar koju treba napomenuti. Primijetit ćete da smo onclick u cijelosti pisali malim slovima. Kad kodirate izjavu u svom HTML-u, vidjet ćete da je neki ljudi pišu kao onClick. To nije u redu jer su imena JavaScript obrađivača događaja mala slova i ne postoji onClick. Možete se izvući s njom kada izravno uključite JavaScript u svoju HTML oznaku jer HTML ne razlikuje velika i mala slova, a preglednik će ga preslikati u točno ime za vas. Ne možete izbjeći pogrešnu upotrebu velikih slova u samom JavaScriptu jer je JavaScript osjetljiv na velika i mala slova, a ne postoji u JavaScriptu kao onClick.

Ovaj kôd predstavlja veliko poboljšanje u odnosu na prethodne verzije, jer sada obje vežemo događaj s ispravnim elementom unutar našeg HTML-a i JavaScript je potpuno odvojen od HTML-a. Ipak, možemo još poboljšati ovo.

Jedan od preostalih problema je taj što možemo samo jedan specifični element pričvrstiti onclick obrađivač događaja. Ako u bilo kojem trenutku trebamo na isti element pričvrstiti drugačiji onclick manipulator događaja, tada već priložena obrada više neće biti pričvršćena na taj element. Kada svojoj web stranici dodate različite skripte u različite svrhe, postoji barem jedan mogućnost da dvije ili više njih možda žele osigurati neku obradu koja se izvodi kad je isti element kliknuli. Neuredno rješenje ovog problema je prepoznati odakle dolazi ova situacija i kombinirati obradu koju je potrebno zvati zajedno s funkcijom koja obavlja svu obradu.

Iako su sukobi s onclickom rjeđi nego kod onloada, njihovo prepoznavanje unaprijed i kombiniranje nije idealno rješenje. To uopće nije rješenje kada se stvarna obrada koja mora biti pričvršćena za element mijenja s vremenom, tako da ponekad treba napraviti jednu stvar, ponekad drugu, a ponekad i oboje.

Najbolje je rješenje prestati s korištenjem alata za obradu događaja i umjesto toga koristiti JavaScript slušatelja događaja (zajedno uz odgovarajući attachEvent za Jscript - jer je to jedna od onih situacija u kojima su JavaScript i JScript razlikuju). To najlakše možemo učiniti tako što ćemo prvo stvoriti addEvent funkciju koja će dodati ili slušatelja događaja ili privitak, ovisno o tome koji od dva podržava jezik koji se pokreće;

funkcija addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); povratak istinit; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Sada možemo priložiti obradu za koju želimo da se dogodi kada kliknemo na naš element pomoću:

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

Korištenje ove metode dodavanja koda koji se obrađuje kada se element klikne znači da upućivanje drugog addEvent poziva za dodavanje druge funkcije biti pokrenuti kada se klikne na određeni element, neće zamijeniti prethodnu obradu s novom obradom, već će omogućiti da obje funkcije budu trčanje. Pri pozivanju addEventa ne moramo znati imamo li već priključenu funkciju na elementa koji će se pokrenuti kad se na njega klikne nova funkcija će se pokrenuti zajedno s i prethodno funkcioniranim funkcijama u prilogu.

Ako nam treba sposobnost uklanjanja funkcija iz onog što se pokrene kad se element klikne, tada bismo mogli stvoriti odgovarajuća deleteEvent funkcija koja poziva odgovarajuću funkciju za uklanjanje slušatelja događaja ili u prilogu događaj?

Jedan nedostatak ovog posljednjeg načina dodavanja obrade su oni stvarno stari preglednici koji ne podržavaju ove relativno nove načine pridruživanja obrade događaja na web stranici. Do sada bi trebalo biti dovoljno malo ljudi koji koriste tako starinske preglednike da ih ne zanemaruju u onome što J (ava) Skripta koju pišemo osim pisanja našeg koda na takav način da ne uzrokuje ogroman broj pogrešaka poruke. Gornja funkcija napisana je tako da ne radi ništa ako nije podržan nijedan od načina koje koristi. Većina ovih stvarno starih preglednika ne podržava ni getElementById metodu referenciranja HTML-a, pa je tako jednostavno ako (! document.getElementById) vrati false; na vrhu bilo koje od vaših funkcija koje upućuju takve pozive bi također bio prikladan. Naravno, mnogi ljudi koji pišu JavaScript nisu toliko obzirni od onih koji i dalje koriste antičke preglednike i pa se ti korisnici moraju naviknuti vidjeti pogreške JavaScripta na gotovo svim web stranicama koje do sada posjećuju.

Koji od ovih različitih načina koristite za povezivanje obrade na stranici kako bi se pokrenula kada posjetitelji kliknu na nešto? Ako je način na koji to činite bliži primjerima na vrhu stranice nego onima primjerima na dnu stranice, možda je to tako vrijeme kada ste razmišljali o poboljšanju načina na koji pišete onclick obradu da biste iskoristili jednu od boljih metoda predstavljenih niže na stranica.

Gledajući kôd za slušatelja događaja više pretraživača primijetit ćete da postoji četvrti parametar koji smo pozvali UCčija upotreba nije očita iz prethodnog opisa.

Preglednici imaju dva različita naloga u kojima mogu obrađivati ​​događaje kada je događaj pokrenut. Mogu djelovati izvana prema unutra

• uC = istina za obradu tijekom faze snimanja
• uC = netočno za obradu tijekom faze mjehurića.

Dakle, tamo gdje se nalazi nekoliko drugih oznaka omotanih oko one da je događaj pokrenut u fazi hvatanja, pokreće se prvo počevši od najudaljenije oznake i krećući se unutra prema onome koji je pokrenuo događaj, a nakon što se obradi oznaka za koju je događaj povezan, faza mjehurića preokreće proces i vraća se van opet.

Internet Explorer i tradicionalni alati za obradu događaja uvijek obrađuju fazu mjehurića, a nikada fazu hvatanja, pa uvijek započinju s najkonkretnijom oznakom i rade prema van.

Pa s alatima za obradu događaja:

xx