Som et moderne programmeringsspråk støtter JavaScript full utvidbarhet ved å la deg definere dine egne funksjoner. Dette lar deg lage rutiner du kan bruke om og om igjen. Du sparer tid ved å bruke vanlige "komponenter", og ved å designe dine egne funksjoner kan du utvide JavaScript-basisspråket for å dekke dine behov. Tenk på det som "personlig JavaScript."
Siden JavaScript er basert på objekter, kan en JavaScript-funksjon enkelt gjøres om til et objekt, og en metode for det objektet. Så ikke bare kan du lage brukerdefinerte objekter for å gjøre budet ditt, du kan også lage dine egne objekter som oppfører seg akkurat slik du vil. Og du kan lage metoder som virker på disse objektene. Selv om dette høres kraftig ut - og det er det - er prosessen med å lage funksjoner, objekter og metoder veldig enkel i JavaScript.
Vi presenterer funksjoner
Bruk funksjonserklæringen til å lage din egen JavaScript-funksjon. Bare-syntaks er:
funksjon Navn (params) { ... funksjon ting ... } - Navn er det unike navnet på funksjonen. Alle funksjonsnavn i et skript må være unike.
- params er en eller flere parametervariabler du overfører til funksjonen.
- funksjon ting er instruksjonene som utføres av funksjonen. Du kan sette mest hva som helst her.
Legg merke til {og} avstivningstegnene; disse definerer funksjonsblokk, og er helt nødvendige. Bøylene forteller JavaScript hvor en funksjon begynner og slutter. Parentesene rundt parameterne er også påkrevd. Inkluder parenteser selv om funksjonen ikke bruker parametere (og mange ikke).
Navn på dine brukerdefinerte funksjoner er opp til deg, så lenge du bare bruker alfanumeriske tegn (understrekingstegnet _ er også tillatt). Funksjonsnavn må starte med et bokstavtegn, men kan inneholde tall andre steder i navnet.
Jeg har holdt fast i JavaScript-stilen med funksjonalitet med store bokstaver - det vil si innledende små bokstaver, deretter store bokstaver hvis funksjonsnavnet er sammensatt av sammensatte ord. For eksempel, myFuncName, yourFuncName, eller deresFunkNavn. Funksjonsnavn er store og små bokstaver; Husk å bruke samme store bokstaver når du refererer til funksjonen andre steder i skriptet. JavaScript vurderer myFunc annerledes enn Myfunc.
Mine ting. Dette skiller det umiddelbart fra en funksjon som bruker en kapitalisering mine ting. Selvfølgelig står du fritt til å vedta enhver kapitaliseringsordning du ønsker.Definere og bruke en funksjon
Den beste måten å beskrive hvordan og hvorfor en funksjon er å vise en enkel i handling. Her er en grunnleggende funksjon som viser "Hei, JavaScripters!" og er en åpenbar start på "Hello World!" eksempel du ser for nye programmeringsspråk.
function basicFunction () {alert ("Hei JavaScripters!"); } Dette bare definerer funksjonen. JavaScript vil ikke gjøre noe med det med mindre funksjonen er referert til et annet sted i skriptet. Du må anrop funksjonen for å kunne bruke den. Å ringe til en brukerdefinert funksjon er det samme som å ringe en innebygd JavaScript-funksjon - du oppgir bare navnet på funksjonen i skriptet ditt. Dette fungerer som funksjonsanropet. Når JavaScript møter funksjonsanropet, streker det seg for å fullføre instruksjonene i den funksjonen. Når funksjonen er over, returnerer JavaScript til punktet umiddelbart etter funksjonsanropet, og behandler resten av skriptet.
For å ringe til funksjonen ovenfor, bare ta med teksten basicFunction () - merk de tomme parentesene etter behov. Her er et fungerende eksempel på Hello JavaScripters-programmet.
Grunnleggende funksjon Eksempel funksjon basicFunction () {alert ("Hei JavaScripters!"); }
basicFunction ();
Siden er lastet inn.
Nettleseren behandler innholdet i koden når dokumentet lastes inn. Når den møter basicFunction () funksjonssamtale, stopper den midlertidig for å behandle funksjonen, og en varselboks vises. Klikk OK og resten av siden lastes inn.
Ringer til en funksjon med en hendelsesbehandler
En vanlig måte å ringe en funksjon på er å inkludere en referanse til den i en skjemaknapp eller hypertekstlenke. Å behandle en brukerdefinert funksjon når brukeren klikker på en skjemaknapp er kanskje den enkleste av alt. Du bruker onClick hendelsesbehandler for å fortelle JavaScript at når brukeren klikker på knappen, skal den spesifiserte funksjonen behandles. Her er en revidert versjon av forrige eksempel, som viser hvordan basicFunction kalles når du klikker på skjema-knappen.
Grunnleggende funksjon Eksempel funksjon basicFunction () {alert ("Hei JavaScripters!"); }
Klikk for å ringe funksjonen.
Legg merke til onClick-syntaksen i koden. Arrangementet du vil behandle med et klikk, er et kall til basicFunction. Denne hendelsen er omgitt av doble sitater.
Overføring av en verdi til en funksjon
JavaScript-funksjoner støtter overføringsverdier - eller parametere -- til dem. Disse verdiene kan brukes til behandling i funksjonen. For eksempel i stedet for å ha varselboksen si "Hei JavaScripters!" når du kaller det, kan du få det til å si hva du vil. Teksten som skal vises, kan sendes som en parameter til funksjonen.
For å overføre en parameter til en funksjon, oppgi et variabelnavn som parameter i funksjonsdefinisjonen. Du bruker deretter variabelnavnet andre steder i funksjonen. For eksempel:
function basicExample (Text) {alert (Text); } Variabelnavnet er Tekst, og er definert som parameteren for funksjonen. Denne variabelen brukes deretter som teksten som skal vises i varselboksen. Når du ringer til funksjonen, oppgi teksten du vil vise som en parameter for funksjonsanropet:
basicExample ("Dette sier alt jeg vil"); Overføring av flere verdier til en funksjon
Du kan overføre flere parametere til en funksjon. Som med innebygde JavaScript-funksjoner og metoder, skiller du parametrene med komma:
multipleParams ("en", "to"); ... funksjon multipleParams (Param1, Param2) {... Når du definerer en funksjon med flere parametere, må du være sikker på at parameterne er oppført i samme rekkefølge i funksjonsanropet. Ellers kan JavaScript-koden din bruke parametrene på feil variabler, og funksjonen din fungerer ikke riktig.
Her er et fungerende eksempel på en funksjon med flere parametere. Det tar to parametere: en inngangsstreng og en tallverdi. Tallverdien angir hvor mange tegn til venstre for strengen du vil vise i varselboksen. Når du kjører følgende skript, viser varselboksen "Dette er" - de første syv tegnene i inngangsstrengen.
Globalt variabelt eksempel lefty ("Dette er en test", 7);
function lefty (InString, Num) {var OutString = InString.substring (InString, Num); varsel (OutString); }
Returnerer en verdi fra en funksjon
Funksjonene som er beskrevet hittil gir ikke noen verdi; det vil si at de gjør den magien du vil at de skal gjøre, og avslutter. Ingen "output" -verdi er gitt av funksjonen. På noen andre språk kalles slike returløse funksjoner subrutiner. I JavaScript (som i C og C ++) er "funksjoner funksjoner" uansett om de returnerer en verdi eller ikke.
Det er enkelt å returnere en verdi fra en funksjon: bruk komme tilbake uttalelse, sammen med verdien du ønsker å returnere. Dette er praktisk når du vil at funksjonen din skal kjøre gjennom noen data og returnere det behandlede resultatet. Ta "lefty" -funksjonen ovenfra. I stedet for å vise den avhakkede strengen, kan du returnere den til anropsfunksjonen, og bruke returverdien slik du vil.
Globalt variabelt eksempel var Ret = lefty ("Dette er en test", 7); varsel (Ret);
function lefty (InString, Num) {var OutString = InString.substring (InString, Num); retur (OutString); }
Dette skriptet gjør i det vesentlige det samme som forrige eksempel, men i stedet for alltid å vise den avhakkede teksten, returnerer funksjonen bare den bearbeidede verdien. Returverdien fanges opp i en variabel, og du kan bruke den variabelen på den måten du ønsker. Ovenstående viser Ret variabel brukt med en varslingsboks, men du kan også bruke den på andre måter. For eksempel kan du skrive innholdet i Ret-variabelen ved hjelp av document.write metode:
document.write (Ret);
Definere lokale variabler innen funksjoner
Som standard er alle JavaScript-variabler erklært globale for dokumentet som opprettet dem. Det betyr at når du definerer en variabel i en funksjon, er den også "synlig" for hvilken som helst annen del av skriptet i det dokumentet. For eksempel, i den følgende globale variabeltesten, er variabeltesten synlig for showVar funksjon, selv om variabelen er definert i loadVar funksjon.
Globalt variabelt eksempel
funksjon showVar () {alarm (test)}
funksjon loadVar () {test = "6"}
loadVar ();
Klikk for å ringe funksjonen.
Globale variabler er ikke alltid det du vil ha. I stedet vil du ha variabler som er lokale for funksjonen. Disse variablene eksisterer bare så lenge JavaScript behandler funksjonen. Når den går ut av funksjonen, går variablene tapt. I tillegg behandles en lokal variabel med et gitt navn som en separat enhet fra en global variabel med samme navn. På denne måten trenger du ikke å bekymre deg for gjenbruk av variabelnavn. Den lokale variabelen i funksjonen vil ikke ha noen innvirkning på den globale variabelen som brukes andre steder i skriptet.
For å erklære en lokal variabel, legg til var nøkkelordet til begynnelsen av variabelnavnet i funksjonen. Dette forteller JavaScript om at du vil gjøre variabelen lokal for den funksjonen. Som en test, endre loadVar funksjon over til følgende, og last inn skriptet på nytt. Når du klikker på knappen, forteller JavaScript at variabelen ikke eksisterer. Dette er fordi testen bare er lokal for loadVar funksjon, og eksisterer ikke utenfor funksjonen.
funksjon loadVar () {var test = "6"} Ringe en funksjon fra en annen funksjon
Kode i en funksjon oppfører seg akkurat som kode andre steder. Dette betyr at du kan ringe en funksjon fra en annen funksjon. Dette lar deg "rede" funksjoner slik at du kan opprette separate funksjoner, som hver utfører en bestemt oppgave, og deretter kjøre dem sammen som en komplett prosess, den ene rett etter den andre. For eksempel, her er en funksjon som kaller tre andre mytiske funksjoner, hver og en returnerer en tekststreng som er endret på en eller annen måte.
funksjonskjøring () {var Ret = changeText ("Change me"); varsel (Ret); document.write (Ret); } funksjon changeText (Text) {Text = makeBold (Text); Tekst = makeItalics (tekst); Tekst = makeBig (Tekst); retur (Tekst); } funksjon makeBold (InString) {return (InString.bold ()); } funksjon makeItalics (InString) {return (InString.italics ()); } funksjon makeBig (InString) {return (InString.big ()); } Opprette objekter med brukerdefinerte funksjoner
JavaScript er basert på objekter: vinduet er et objekt, koblinger er objekter, skjemaer er objekter, til og med Netscape selv (eller en annen nettleser) er et objekt. Bruk av objekter kan bidra til å gjøre programmeringen enklere og mer strømlinjeformet. Du kan utvide bruken av objekter i JavaScript ved å lage dine egne. Prosessen bruker funksjoner på en litt modifisert måte. Faktisk vil du bli overrasket over hvor enkelt det er å lage dine egne JavaScript-objekter.
Å lage et nytt objekt innebærer to trinn:
- Definer objektet i en brukerdefinert funksjon.
- Bruk det nye nøkkelordet til å opprette (eller øyeblikkeliggjøre) objektet med et kall til objektfunksjonen.
Her er et eksempel på verdens enkleste brukerdefinerte JavaScript-objekt:
// denne delen oppretter et nytt objekt ret = new makeSimpleObject ();
// denne delen definerer objektfunksjonen makeSimpleObject () {}
Jeg har ringt det nye objektet ret; bruk et hvilket som helst gyldig variabelnavn for det nye objektet (jeg bruker små bokstaver for variabler som inneholder objekter, så det er lettere å fortelle at variabelen inneholder et objekt).
Du kan bruke den samme objektfunksjonen til å lage et hvilket som helst antall nye objekter. For eksempel oppretter disse linjene fire nye og separate objekter: eenie, meenie, minie og moe:
eenie = new makeSimpleObject (); meenie = ny makeSimpleObject (); minie = ny makeSimpleObject (); moe = new makeSimpleObject ();
Egentlig er det til og med en snarvei til ovennevnte "verdens enkleste JavaScript-objekt." Du trenger ikke å definere en objektfunksjon for å lage et objekt med bare bein. JavaScript støtter et generisk Object () -objekt, som du kan bruke til å lage nye objekter. Følgende gjør det samme som ovenfor, uten en eksplisitt objektfunksjon:
eenie = nytt Objekt ();
Definere nye egenskaper til allerede laget objekter
