Slik skiller du JavaScript på websiden din

Når du først skriver et nytt JavaScript, er den enkleste måten å sette den opp på, å legge inn JavaScript-koden direkte inn på websiden slik at alt er på ett sted mens du tester det for å få det til å fungere Ikke sant. På samme måte, hvis du setter inn et forhåndsskrevet script på nettstedet ditt, kan instruksjonene fortelle deg å legge inn deler eller hele skriptet på selve websiden.

Dette er greit å sette opp siden og få den til å fungere ordentlig i utgangspunktet, men når siden din fungerer slik du vil ha den, vil du kunne forbedre siden ved å trekke ut JavaScript i en ekstern fil slik at sideinnholdet ditt i HTML ikke er så rotete med ikke-innholdsartikler som Javascript.

Hvis du bare kopierer og bruker JavaScripts skrevet av andre mennesker, kan instruksjonene deres for hvordan du legger til skriptet til siden din ha resultert i at du har en eller flere store deler av JavaScript er faktisk innebygd i selve websiden din, og instruksjonene deres forteller deg ikke hvordan du kan flytte denne koden ut av siden din til en egen fil og fremdeles ha JavaScript arbeid. Ikke bekymre deg, for uansett hvilken kode JavaScript du bruker på siden din, kan du enkelt flytte JavaScript ut av siden din og sett den opp som en egen fil (eller filer hvis du har mer enn ett stykke JavaScript innebygd på siden). Prosessen for å gjøre dette er alltid den samme og illustreres best med et eksempel.

La oss se på hvordan et stykke JavaScript kan se ut når det er innebygd på siden din. Den faktiske JavaScript-koden din vil være forskjellig fra den som vises i følgende eksempler, men prosessen er den samme i alle tilfeller.

Det innebygde JavaScriptet ditt skal se ut som et av de tre eksemplene ovenfor. Selvfølgelig vil din faktiske JavaScript-kode være forskjellig fra den som vises, men JavaScript vil sannsynligvis være innebygd på siden ved hjelp av en av de tre metodene ovenfor. I noen tilfeller kan koden din bruke den utdaterte language = "javascript" i stedet for type = "text / javascript" i så fall kan det være lurt å bringe koden mer oppdatert til å begynne med ved å bytte ut språkattributten med typen.

Før du kan trekke ut JavaScript i sin egen fil, må du først identifisere koden som skal pakkes ut. I alle de tre eksemplene ovenfor er det to linjer med den faktiske JavaScript-koden som skal trekkes ut. Skriptet ditt vil sannsynligvis ha mye flere linjer, men kan lett identifiseres fordi det vil innta samme sted på siden din som de to linjene i JavaScript som vi har fremhevet i de tre eksemplene ovenfor (alle tre eksemplene inneholder de samme to linjene med JavaScript, det er bare beholderen rundt dem som er litt annerledes).

1. Det første du trenger å gjøre for å faktisk trekke JavaScript ut i en egen fil, er å åpne en ren tekstredigerer og få tilgang til innholdet på websiden din. Du må deretter finne det innebygde JavaScript som vil være omgitt av en av variantene av koden vist i eksemplene ovenfor.
2. Når du har funnet JavaScript-koden, må du velge den og kopiere den til utklippstavlen. Med eksemplet ovenfor blir koden som skal velges markert, du trenger ikke å velge skriptkoder eller valgfrie kommentarer som kan vises rundt JavaScript-koden.
3. Åpne en annen kopi av ren tekstredigerer (eller en annen fane hvis redaktøren støtter å åpne mer enn én fil om gangen) og pass JavaScript-innholdet der.
4. Velg et beskrivende filnavn som skal brukes for den nye filen, og lagre det nye innholdet ved å bruke det filnavnet. Med eksempelkoden er formålet med skriptet å bryte ut av rammer slik at et passende navn kan være framebreak.js.
5. Så nå har vi JavaScript i en egen fil vi returnerer til redaktøren der vi har det originale sideinnholdet for å gjøre endringene der for å koble til den eksterne kopien av skriptet.
6. Ettersom vi nå har skriptet i en egen fil, kan vi fjerne alt mellom skriptkodene i vårt originale innhold, slik at stikkord.
7. Det siste trinnet er å legge til en ekstra attributt til skriptkoden som identifiserer hvor den kan finne den eksterne JavaScript. Vi gjør dette ved å bruke en src = "filnavn" Egenskap. Med vårt eksempelskript, vil vi spesifisere src = "framebreak.js".
8. Den eneste komplikasjonen til dette er hvis vi har bestemt oss for å lagre de eksterne JavaScripts i en egen mappe fra websidene som bruker dem. Hvis du gjør dette, må du legge til banen fra webside-mappen til JavaScript-mappen foran filnavnet. For eksempel hvis JavaScripts lagres i en js mappen i mappen som inneholder websidene vi trenger src = "JS / framebreak.js"

Så hvordan ser koden vår ut etter at vi har skilt JavaScript ut i en egen fil? Når det gjelder vårt eksempel JavaScript (forutsatt at JavaScript og HTML er i samme mappe), leser nå HTML på websiden:

Vi har også en egen fil som heter framebreak.js som inneholder:

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

Filnavn og filinnhold vil være mye forskjellig fra det fordi du vil ha trukket ut uansett hva JavaScript var innebygd i websiden din og gitt filen et beskrivende navn basert på hva det gjør det. Selve prosessen med å trekke den ut vil være den samme, uavhengig av hvilke linjer den inneholder.

Hva med de to andre linjene i hvert av eksemplene to og tre? Hensikten med linjene i eksempel to er å skjule JavaScript for Netscape 1 og Internet Utforsker 2, som ingen bruker mer av, og derfor er de linjene egentlig ikke nødvendige i det første plass. Å plassere koden i en ekstern fil skjuler koden fra nettlesere som ikke forstår skriptkoden mer effektivt enn å omgi den i en HTML-kommentar likevel. Det tredje eksemplet brukes for XHTML-sider for å fortelle validatorer at JavaScript skal behandles som sideinnhold og ikke for å validere det som HTML (hvis du bruker en HTML-doktype i stedet for en XHTML, så vet validatoren allerede dette, og derfor er ikke disse kodene behov for). Med JavaScript i en egen fil er det ikke lenger noe JavaScript på siden som skal hoppes over av validatorer, og derfor er det ikke lenger behov for disse linjene.

En av de mest nyttige måtene JavaScript kan brukes til å legge til funksjonalitet på en webside, er å utføre en slags behandling som svar på en handling fra besøkende. Den vanligste handlingen du vil svare på, vil være når den besøkende klikker på noe. Arrangementsbehandleren som lar deg svare på besøkende som klikker på noe, heter ved trykk.

Når de fleste først tenker på å legge til en onclick-hendelseshåndterer til websiden deres, tenker de umiddelbart å legge den til en stikkord. Dette gir et stykke kode som ofte ser ut som:

Dette er feil måte å bruke onclick med mindre du har en faktisk meningsfull adresse i href-attributtet slik at de uten JavaScript blir overført et sted når de klikker på lenken. Mange mennesker utelater også "return falsk" fra denne koden og lurer på hvorfor toppen av denne siden alltid blir lastet inn etter at skriptet har kjørt (som href = "#" ber siden om å gjøre med mindre falsk returneres fra alle hendelseshåndterere. Selvfølgelig, hvis du har noe meningsfylt som destinasjonen for lenken, kan det være lurt å dra dit etter å ha kjørt onclick-koden, og da trenger du ikke "return falsk".

Det mange ikke er klar over er at onclick-hendelseshåndtereren kan legges til noen HTML-kode på websiden for å samhandle når den besøkende klikker på innholdet. Så hvis du vil at noe skal løpe når folk klikker på et bilde, kan du bruke:

Hvis du vil kjøre noe når folk klikker på tekst, kan du bruke:

litt tekst

Disse gir selvfølgelig ikke den automatiske visuelle anelse om at det vil komme et svar hvis den besøkende klikker på dem slik en lenke gjør, men du kan legge til den visuelle ledetråden lett nok selv ved å style bildet eller spennet på riktig måte.

Den andre tingen å merke seg om disse måtene å feste onclick-hendelseshåndtereren på er at de ikke krever "return falsk" fordi det ikke er noen standardhandling som vil skje når det klikkes på elementet som må være funksjonshemmet.

Disse måtene å feste onclick på er en stor forbedring av den dårlige metoden som mange bruker, men det er fremdeles langt fra å være den beste måten å kode den på. Et problem med å legge til onclick ved å bruke en av metodene ovenfor, er at den fremdeles blander JavaScript inn med HTML-koden. ved trykk er ikke et HTML-attributt, er det en JavaScript-hendelsesbehandler. For å skille JavaScript fra HTML for å gjøre siden enklere å vedlikeholde, må vi få den onclick-referansen fra HTML-filen til en egen JavaScript-fil der den hører hjemme.

Den enkleste måten å gjøre dette på er å erstatte onklicken i HTML med en id som vil gjøre det enkelt å knytte hendelsesbehandleren til riktig sted i HTML. Så HTML-en vår kan nå inneholde en av disse påstandene:

 litt tekst

Vi kan deretter kode JavaScript i en egen JavaScript-fil som enten er koblet til bunnen av siden av siden eller som er i toppen av siden og hvor koden vår er inne i en funksjon som i seg selv kalles etter at siden er lastet ferdig. Vår JavaScript for å knytte arrangementshåndtererne ser nå ut slik:

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

En ting å merke seg. Du vil merke at vi alltid har skrevet onclick helt med små bokstaver. Når du koder utsagnet i HTML-koden, vil du se at noen skriver det som onClick. Dette er feil, ettersom JavaScript-hendelsesbehandlerens navn er små bokstaver, og det er ingen behandler som onClick. Du kan slippe unna med det når du inkluderer JavaScript i HTML-koden din direkte, siden HTML ikke er små og små bokstaver, og nettleseren vil kartlegge det til riktig navn for deg. Du kan ikke slippe unna med store bokstaver i JavaScript selv, fordi JavaScript er små og små bokstaver, og det er ikke noe i JavaScript som onClick.

Denne koden er en enorm forbedring i forhold til de tidligere versjonene fordi vi nå begge knytter hendelsen til riktig element i HTML-en, og vi har JavaScript helt adskilt fra HTML. Vi kan forbedre dette enda mer.

Det eneste problemet som gjenstår er at vi bare kan knytte én hendelsesbehandler onclick til et bestemt element. Skulle vi når som helst trenge å knytte en annen onclick-hendelseshåndterer til det samme elementet, vil den tidligere festede behandlingen ikke lenger være knyttet til det elementet. Når du legger til en rekke forskjellige skript til websiden din for forskjellige formål, er det minst en muligheten for at to eller flere av dem kan være lurt å gi en viss behandling som skal utføres når det samme elementet er klikket på. Den rotete løsningen på dette problemet er å identifisere hvor denne situasjonen oppstår og å kombinere behandlingen som må kalles sammen til en funksjon som utfører all behandlingen.

Selv om sammenstøt som dette er mindre vanlig med onclick enn med belastning, er det ikke den ideelle løsningen å identifisere sammenstøtene på forhånd og kombinere dem sammen. Det er ikke en løsning i det hele tatt når den faktiske behandlingen som må festes til elementet endres over tid slik at noen ganger er det en ting å gjøre, noen ganger en annen, og noen ganger begge deler.

Den beste løsningen er å slutte å bruke en hendelseshåndterer fullstendig og i stedet bruke en JavaScript-lytter (sammen med tilhørende attachEvent for Jscript- siden dette er en av de situasjonene der JavaScript og JScript forskjellig). Vi kan gjøre dette enklest ved først å opprette en addEvent-funksjon som vil legge til en begivenhetslytter eller vedlegg, avhengig av hvilken av de to språket som kjøres støtter;

funksjon addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); return true; } annet hvis (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Vi kan nå legge ved behandlingen som vi ønsker skal skje når elementet vårt blir klikket på ved å bruke:

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

Ved å bruke denne metoden for å knytte koden som skal behandles når et element blir klikket på, betyr det at det blir et nytt addEvent-anrop for å legge til en annen funksjon kjøres når det klikkes på et bestemt element, vil ikke erstatte den forrige behandlingen med den nye behandlingen, men vil i stedet tillate begge funksjonene å være løpe. Vi har ingen grunn til å vite når vi ringer et addEvent om vi ikke allerede har en funksjon knyttet til element som skal kjøres når det blir klikket på, kjøres den nye funksjonen sammen med og funksjoner som tidligere var vedlagte.

Skulle vi trenge evnen til å fjerne funksjoner fra det som blir kjørt når et element klikkes på, kan vi lage en tilsvarende deleteEvent-funksjon som kaller passende funksjon for å fjerne en hendelseslytter eller vedlagt begivenhet?

En ulempe med denne siste måten å knytte behandlingen på er de virkelig gamle nettleserne som ikke støtter disse relativt nye måtene å knytte hendelsesbehandling til en webside. Det burde være få mennesker som bruker slike antikviterte nettlesere nå til å se bort fra dem i det J (ava) Manus skriver vi bortsett fra å skrive koden vår på en slik måte at den ikke forårsaker store feilfeil meldinger. Ovennevnte funksjon er skrevet slik at den ikke gjør noe hvis ingen av måtene den bruker støttes. De fleste av disse virkelig gamle nettleserne støtter ikke getElementById metoden for å referere til HTML heller, og det er så enkelt hvis (! document.getElementById) returnerer falsk; på toppen av noen av funksjonene dine som gjør slike anrop, vil det også være passende. Selvfølgelig er mange som skriver JavaScript ikke så hensynsfull av de som fortsatt bruker antikke nettlesere og så brukerne må bli vant til å se JavaScript-feil på nesten hver webside de besøker nå.

Hvilke av disse forskjellige måtene bruker du for å legge ved behandling på siden din som skal kjøres når de besøkende klikker på noe? Hvis måten du gjør det på er nærmere eksemplene øverst på siden enn eksemplene nederst på siden, er det kanskje tiden du tenkte på å forbedre måten du skriver onclick-behandlingen din på, for å bruke en av de bedre metodene presentert nede på side.

Når du ser på koden for tvers av nettleser-hendelseslytteren, vil du merke at det er en fjerde parameter som vi kalte UC, bruken av disse er ikke åpenbar fra den forrige beskrivelsen.

Nettlesere har to forskjellige ordrer der de kan behandle hendelser når hendelsen utløses. De kan jobbe utenfra og inn fra

• uC = sant å behandle i fangstfasen
• uC = falsk å behandle i boblefasen.

Så der det er flere andre tagger pakket rundt den som hendelsen ble utløst på fangstfasen kjøres først med den ytterste taggen og flytter inn mot den som utløste hendelsen, og så når en gang taggen hendelsen ble festet til har blitt behandlet, reverserer boblefasen prosessen og går ut igjen en gang til.

Internet Explorer og tradisjonelle hendelsesbehandlere behandler alltid boblefasen og aldri fangstfasen, og starter derfor alltid med den mest spesifikke taggen og jobber utover.

Så med hendelseshåndterere:

xx