Kā atdalīt JavaScript savā tīmekļa lapā

Pirmoreiz uzrakstot jaunu JavaScript, vienkāršākais veids, kā to iestatīt, ir iegult JavaScript kodu tieši Web lapā, lai viss būtu vienuviet, kamēr jūs to pārbaudāt, lai tas darbotos taisnība. Tāpat, ja savā vietnē ievietojat iepriekš uzrakstītu skriptu, instrukcijās var būt ieteikts iegult visas skripta daļas vai visu tajā pašā tīmekļa vietnē.

Tas ir pareizi, lai iestatītu lapu un panāktu tās pareizu darbību, taču, tiklīdz lapa darbosies tā, kā vēlaties, varēsit uzlabojiet lapu, ekstrahējot JavaScript ārējā failā, lai HTML lapas HTML saturs nebūtu tik pārblīvēts ar vienumiem, kas nav saistīti ar saturu, piemēram, JavaScript.

Ja jūs vienkārši nokopējat un izmantojat citu cilvēku rakstītus JavaScripts, tad viņu norādījumi par to, kā pievienot viņu skriptu savai lapai, iespējams, ir bijuši tādi, ka jums ir viena vai vairākas lielas sadaļas JavaScript faktiski ir iestrādāts pašā jūsu tīmekļa lapā, un to instrukcijās nav teikts, kā jūs varat pārvietot šo kodu no savas lapas atsevišķā failā un joprojām saglabāt JavaScript darbs. Neuztraucieties, jo neatkarīgi no tā, kādu kodu JavaScript izmantojat savā lapā, jūs varat viegli pārvietot JavaScript izņemiet no savas lapas un iestatiet to kā atsevišķu failu (vai failus, ja lapā ir iestrādāts vairāk nekā viens JavaScript fragments). To izdarīšanas process vienmēr ir vienāds, un to vislabāk ilustrē piemērs.

Apskatīsim, kā JavaScript fragments varētu izskatīties, kad iegults jūsu lapā. Jūsu faktiskais JavaScript kods atšķirsies no tā, kas parādīts šajos piemēros, taču process vienmēr ir vienāds.

Jūsu iegultajam JavaScript vajadzētu izskatīties kā vienam no trim iepriekšminētajiem piemēriem. Protams, jūsu faktiskais JavaScript kods atšķirsies no parādītā, bet JavaScript, iespējams, tiks iegults lapā, izmantojot kādu no trim iepriekšminētajām metodēm. Dažos gadījumos jūsu kods var izmantot novecojušu valoda = "javascript" tā vietā type = "text / javascript" tādā gadījumā jūs, iespējams, vēlēsities atjaunināt savu kodu, aizstājot valodas atribūtu ar 1. tipa.

Lai jūs varētu izgūt JavaScript savā failā, vispirms jāidentificē iegūtais kods. Visos trīs iepriekšminētajos piemēros ir jānoņem divas faktiskā JavaScript koda līnijas. Jūsu skriptam, iespējams, būs daudz vairāk rindiņu, bet to var viegli identificēt, jo tas jūsu lapā aizņems to pašu vietu kā abas JavaScript rindas, kuras mēs ir izcēluši iepriekšējos trīs piemērus (visos trijos piemēros ir vienādas divas JavaScript rindiņas, tikai konteiners ap tiem ir nedaudz savādāk).

1. Pirmā lieta, kas jums jādara, lai faktiski iegūtu JavaScript atsevišķā failā, ir atvērt teksta redaktoru un piekļūt jūsu tīmekļa lapas saturam. Pēc tam jums jāatrod iegultā Java, kuru ieskauj viens no koda variantiem, kas parādīti iepriekšējos piemēros.
2. Atrodot JavaScript kodu, jums tas jāizvēlas un jāpārkopē uz starpliktuvi. Izmantojot iepriekš minēto piemēru, tiek izcelts atlasāmais kods, jums nav jāizvēlas skriptu tagi vai izvēles komentāri, kas var parādīties ap jūsu JavaScript kodu.
3. Atveriet citu sava vienkāršā teksta redaktora eksemplāru (vai citu cilni, ja redaktors atbalsta vairāku failu atvēršanu vienlaicīgi) un apdzīvojiet JavaScript saturu tur.
4. Atlasiet aprakstošo faila nosaukumu, ko izmantot jaunajam failam, un saglabājiet jauno saturu, izmantojot šo faila nosaukumu. Izmantojot koda kodu, skripta mērķis ir izlauzties no rāmjiem, lai varētu būt piemērots nosaukums framebreak.js.
5. Tagad mums ir JavaScript atsevišķā failā, un mēs atgriežamies redaktorā, kur mums ir sākotnējais lapas saturs, lai veiktu izmaiņas tur, lai izveidotu saiti uz skripta ārējo kopiju.
6. Tā kā mums tagad ir skripts atsevišķā failā, mēs varam noņemt visu, kas atrodas starp sākotnējā satura skriptu tagiem, lai birka.
7. Pēdējais solis ir pievienot papildu atribūtu skripta tagam, norādot, kur tas var atrast ārējo JavaScript. Mēs to darām, izmantojot src = "faila nosaukums" atribūts. Izmantojot mūsu skripta piemēru, mēs norādītu src = "framebreak.js".
8. Vienīgais sarežģījums šajā gadījumā ir tad, ja mēs esam nolēmuši ārējos JavaScriptus saglabāt atsevišķā mapē no Web lapām, kuras tos izmanto. Ja to izdarīsit, jums jāpievieno ceļš no Web lapas mapes uz JavaScript mapi faila nosaukuma priekšā. Piemēram, ja JavaScripts tiek glabāti js mape tajā mapē, kurā atrodas mūsu vajadzīgās tīmekļa lapas src = "js / framebreak.js"

Kā izskatās mūsu kods pēc tam, kad JavaScript ir sadalīts atsevišķā failā? Mūsu piemēra JavaScript gadījumā (pieņemot, ka JavaScript un HTML ir vienā mapē) mūsu HTML Web vietā tagad ir šāds:

Mums ir arī atsevišķs fails ar nosaukumu framebreak.js, kurā ir:

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

Jūsu faila nosaukums un faila saturs daudz neatšķirsies no tā, jo jūs to būsit ieguvis neatkarīgi no tā, kāds JavaScript tika ievietots jūsu tīmekļa lapā, un failam tika dots aprakstošs nosaukums, pamatojoties uz to tā notiek. Faktiskais tā iegūšanas process būs vienāds, lai arī neatkarīgi no tā, kuras līnijas tas satur.

Kā ir ar šīm pārējām divām rindām katrā otrajā un trešajā piemērā? Otrā piemēra šo rindiņu mērķis ir slēpt JavaScript no Netscape 1 un interneta Explorer 2, kuru neviens vairs nelieto, un tāpēc pirmās šīs līnijas nav īsti vajadzīgas vieta. Ievietojot kodu ārējā failā, tas tiek paslēpts no pārlūkprogrammām, kuras skripta tagu nesaprot efektīvāk nekā jebkurā gadījumā ieskauj to HTML komentārā. Trešais piemērs tiek izmantots XHTML lapām, lai apstiprinātājiem pateiktu, ka JavaScript jāuztver kā lapas saturs, nevis lai to apstiprinātu. kā HTML (ja jūs izmantojat HTML, nevis XHTML, nevis atsevišķu tipu), tad validētājs to jau zina, tāpēc šie tagi nav nepieciešams). Ja JavaScript ir atsevišķā failā, tajā vairs nav JavaScript, kuru pārbaudītāji varētu izlaist, tāpēc šīs rindiņas vairs nav vajadzīgas.

Viens no visnoderīgākajiem veidiem, kā JavaScript var izmantot, lai pievienotu tīmekļa lapas funkcionalitāti, ir sava veida apstrāde, reaģējot uz jūsu apmeklētāja darbībām. Visizplatītākā darbība, uz kuru vēlaties reaģēt, būs tad, kad apmeklētājs uz kaut ko noklikšķinās. Tiek izsaukts notikumu apstrādātājs, kurš ļauj jums reaģēt uz apmeklētājiem, noklikšķinot uz kaut kā onklikā.

Kad lielākā daļa cilvēku vispirms domā par onclick notikumu apstrādātāja pievienošanu savai tīmekļa lapai, viņi tūlīt domā to pievienot birka. Tas dod kodu, kas bieži izskatās:

Tas ir nepareizi veids, kā izmantot onclick, ja vien atribūtā href nav faktiskas jēgas, lai tie, kuriem nav JavaScript, tiktu pārvietoti kaut kur, noklikšķinot uz saites. Daudzi cilvēki no šī koda arī izslēdz "atgriešanās nepatiesu" un pēc tam brīnās, kāpēc pašreizējās lapas augšdaļa vienmēr tiek ielādēta pēc skripta palaišanas (ko href = "#" liek lapai darīt, ja vien no visiem notikumu apstrādātājiem netiek atgriezta kļūda. Protams, ja jums ir kaut kas nozīmīgs kā saites galamērķis, iespējams, vēlēsities tur nokļūt pēc onclick koda palaišanas, un tad jums nevajadzēs "atgriezties nepatiesi".

Daudzi cilvēki neapzinās, ka onclick notikumu apstrādātāju var pievienot jebkura HTML tags Web lapā, lai mijiedarbotos, kad jūsu apmeklētājs noklikšķina uz šī satura. Tātad, ja vēlaties kaut ko palaist, kad cilvēki noklikšķina uz attēla, kuru varat izmantot:

Ja vēlaties kaut ko palaist, kad cilvēki noklikšķina uz kāda teksta, kuru varat izmantot:

kaut kāds teksts

Protams, tie nedod automātisku vizuālu norādi, ka būs reakcija, ja jūsu apmeklētājs uz tiem noklikšķinās Lai arī kāda saite to dara, taču šo vizuālo pavedienu varat pats sev pievienot, noformējot attēlu vai atstarpi atbilstoši.

Otra lieta, kas jāpiezīmē šiem onclick notikumu apstrādātāja piestiprināšanas veidiem, ir tāda, ka tie neprasa "atgriezt nepatiesu", jo nav noklusējuma darbību, kas notiks, kad uz elementa tiks noklikšķināts un tam jābūt invalīds.

Šie onclick piestiprināšanas veidi ir liels uzlabojums sliktajā metodē, kuru izmanto daudzi cilvēki, taču tas vēl ir tālu no tā, lai to vislabāk kodētu. Viena no problēmām, kas saistīta ar onclick pievienošanu, izmantojot kādu no iepriekšminētajām metodēm, ir tā, ka tā joprojām sajauc JavaScript jūsu HTML. onklikā ir nē HTML atribūts, tas ir JavaScript notikumu apstrādātājs. Kā tāds, lai nošķirtu JavaScript no mūsu HTML, lai lapu būtu vieglāk uzturēt, mums ir jāiegūst šī onclick atsauce no HTML faila atsevišķā JavaScript failā, kur tā pieder.

Vienkāršākais veids, kā to izdarīt, ir HTML klikšķa nomaiņa ar id kas atvieglos notikumu apstrādātāja pievienošanu attiecīgajai HTML vietai. Tātad mūsu HTML tagad varētu būt viens no šiem paziņojumiem:

 kaut kāds teksts

Pēc tam mēs varam kodēt JavaScript atsevišķā JavaScript failā, kas ir vai nu piesaistīts lapas pamatnes apakšdaļai, vai kas atrodas lapas galvā un kur mūsu kods atrodas funkcijā, kuru pats sauc par lapu pēc lapas ielādes pabeigšanas. Mūsu JavaScript, lai pievienotu notikumu apstrādātājus, tagad izskatās šādi:

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

Jāatzīmē viena lieta. Jūs ievērosiet, ka mēs vienmēr esam uzklikšķinājuši uz mazajiem burtiem. Kodējot paziņojumu HTML formātā, daži cilvēki to raksta kā onClick. Tas nav pareizi, jo JavaScript notikumu apstrādātāju nosaukumi ir visi ar mazajiem burtiem un nav tādu apstrādātāju kā onClick. Varat no tā izvairīties, ja HTML tagā tieši iekļaujat JavaScript, jo HTML nav reģistrjutīgs un pārlūks to samēros ar pareizo vārdu. Jūs pats savā JavaScript nevarat izvairīties no nepareiziem lielo burtu lietojuma, jo JavaScript ir reģistrjutīgs un JavaScript valodā nav tādas lietas kā onClick.

Šis kods ir milzīgs uzlabojums salīdzinājumā ar iepriekšējām versijām, jo ​​mēs tagad abi esam piestiprinājuši notikumu pareizam HTML koda elementam, un mums JavaScript ir pilnībā nodalīts no HTML. Tomēr mēs to varam uzlabot.

Viena no atlikušajām problēmām ir tā, ka konkrētam elementam mēs varam pievienot tikai vienu onclick notikumu apstrādātāju. Ja mums jebkurā laikā vienam un tam pašam elementam jāpievieno cits onclick notikumu apstrādātājs, iepriekš pievienotā apstrāde šim elementam vairs netiks pievienota. Kad savai tīmekļa lapai dažādiem mērķiem pievienojat daudz dažādu skriptu, ir vismaz a iespēja, ka divi vai vairāki no viņiem var vēlēties nodrošināt kādu apstrādi, kas jāveic, ja tas pats elements ir noklikšķinājis uz. Netīrs šīs problēmas risinājums ir identificēt, kur rodas šī situācija, un apvienot apstrādi, kas jāsauc kopā, ar funkciju, kas veic visu apstrādi.

Kaut arī tādas sadursmes kā onclick ir retāk sastopamas nekā ar onload, tad, ja sadursmes iepriekš jāidentificē un jāapvieno kopā, tas nav ideāls risinājums. Tas vispār nav risinājums, ja faktiskā apstrāde, kas jāpievieno elementam, laika gaitā mainās tā, ka dažreiz ir viena darāmā lieta, dažreiz cita, un dažreiz abas.

Labākais risinājums ir pilnībā pārtraukt notikumu apstrādātāja izmantošanu un tā vietā izmantot JavaScript notikumu klausītāju (kopā ar ar atbilstošo JScript AttaEvent - jo šī ir viena no tām situācijām, kad JavaScript un JScript atšķiras). Mēs to varam izdarīt visvieglāk, vispirms izveidojot funkciju addEvent, kas pievienos vai nu notikuma klausītāju, vai pielikumu atkarībā no tā, kuru no diviem darbināmā valoda atbalsta;

funkcija addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); atgriezties taisnība; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Tagad mēs varam pievienot apstrādi, kas mēs vēlamies notikt, kad uz mūsu elementa tiek noklikšķināts, izmantojot:

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

Izmantojot šo apstrādājamā koda pievienošanas metodi, kad tiek noklikšķināts uz elementa, tas nozīmē, ka cita addEvent zvana veikšana, lai pievienotu citu funkciju palaišana, kad tiek noklikšķināts uz konkrēta elementa, neaizstās iepriekšējo apstrādi ar jauno apstrādi, bet tā vietā ļaus abām funkcijām skriet. Zvanot uz addEvent, mums nav jāzina, vai mums jau ir pievienota funkcija elements, kas darbosies, kad uz tā noklikšķinās, jaunā funkcija tiks palaista kopā ar funkcijām, kas bija iepriekš pievienots.

Ja mums būtu nepieciešama spēja noņemt funkcijas no tā, kas tiek palaists, kad uz elementa tiek noklikšķināts, tad mēs varētu izveidot atbilstošā funkcija deleteEvent, kas izsauc atbilstošo notikuma klausītāja noņemšanas funkciju vai pievienota notikums?

Vienīgais šī pēdējā apstrādes pievienošanas veida trūkums ir tas, ka patiešām vecie pārlūkprogrammas neatbalsta šos samērā jaunos notikumu apstrādes pievienošanas veidus Web lapai. Tagad vajadzētu būt maz cilvēku, kas izmanto šādus senatnīgus pārlūkus, lai neņemtu vērā tos, kas J (ava) Skripts, ko mēs rakstām, izņemot koda rakstīšanu tādā veidā, ka tas neizraisa milzīgu kļūdu skaitu ziņas. Iepriekš minētā funkcija ir uzrakstīta tā, lai neko nedarītu, ja netiek atbalstīts neviens no tās izmantotajiem veidiem. Lielākā daļa šo patiešām veco pārlūku neatbalsta arī HTML atsauces metodi getElementById, un tā ir vienkārša if (! document.getElementById) atgriezt nepatiesu; jebkuras savas funkcijas augšpusē, kas veic šādus zvanus, arī būtu piemērota. Protams, daudzi cilvēki, kas raksta JavaScript, nav tik uzmanīgi pret tiem, kuri joprojām izmanto antīkās pārlūkprogrammas un tāpēc šiem lietotājiem ir jāpierod redzēt JavaScript kļūdas gandrīz katrā tīmekļa vietnē, kuru viņi tagad apmeklē.

Kuru no šiem dažādajiem veidiem jūs izmantojat, lai savai lapai pievienotu apstrādi, kas jāveic, kad jūsu apmeklētāji uz kaut ko noklikšķina? Ja tas, kā jūs to darāt, ir tuvāk piemēriem lapas augšpusē nekā tiem, kas atrodas lapas apakšā, tad varbūt tas ir laiks, kad domājāt par onclick apstrādes rakstīšanas veida uzlabošanu, lai izmantotu kādu no labākajām metodēm, kas aprakstīta zemāk lappuse.

Apskatot dažādu pārlūku notikumu klausītāja kodu, jūs ievērosit, ka ir ceturtais parametrs, kuru mēs sauca uC, kuru izmantošana nav acīmredzama no iepriekšējā apraksta.

Pārlūkprogrammām ir divas dažādas secības, kurās tās var apstrādāt notikumus, kad notikums tiek iedarbināts. Viņi var strādāt no ārpuses uz iekšu no

• uC = patiess process uztveršanas fāzē
• uC = nepatiesa, lai apstrādātu burbuļa fāzes laikā.

Tātad, ja ir vairāki citi tagi, kas apvilkti ap vienu, notikums tika aktivizēts uztveršanas fāzē, vispirms sākas ar visattālāko tagu un pārvietojas pret to, kas izraisīja notikumu, un pēc tam, kad notikums tika pievienots, ir apstrādāta burbuļa fāze, apvēršot procesu, un izejot atpakaļ atkal.

Internet Explorer un tradicionālie notikumu apstrādātāji vienmēr apstrādā burbuļa fāzi, nevis uztveršanas fāzi, tāpēc vienmēr sāk ar specifiskāko tagu un darbojas uz āru.

Tātad ar notikumu apstrādātājiem:

xx