Som et moderne programmeringssprog understøtter JavaScript fuld udvidelighed ved at lade dig definere dine egne funktioner. Dette giver dig mulighed for at oprette rutiner, du kan bruge igen og igen. Du sparer tid ved at genbruge almindelige "komponenter", og ved at designe dine egne funktioner kan du udvide JavaScript's basissprog, så det passer til dine behov. Tænk på det som "personlig JavaScript."
Da JavaScript er baseret på objekter, kan en JavaScript-funktion let omdannes til et objekt og en metode til det objekt. Så ikke kun kan du oprette brugerdefinerede objekter til din budgivning, du kan også oprette dine egne objekter, der opfører sig nøjagtigt som du vil. Og du kan oprette metoder, der virker på disse objekter. Selvom dette lyder kraftigt - og det er det - er processen med at oprette funktioner, objekter og metoder meget let i JavaScript.
Introduktion til funktioner
Brug funktionserklæringen til at oprette din egen JavaScript-funktion. Syntaksen med bare knogler er:
fungere navn (params) { ... funktion ting ... } - navn er funktionens unikke navn. Alle funktionsnavne i et script skal være unikke.
- params er en eller flere parametervariabler, du overfører til funktionen.
- funktion ting er instruktionerne udført af funktionen. Du kan lægge mest alt her.
Bemærk {og} afstivningstegnene; disse definerer funktionsblokog er absolut nødvendige. Bøjlerne fortæller JavaScript, hvor en funktion begynder og slutter. Parenteserne omkring parametrene er også påkrævet. Inkluder parenteser, selvom funktionen ikke bruger parametre (og mange ikke).
Navne på dine brugerdefinerede funktioner er op til dig, så længe du kun bruger alfanumeriske tegn (understregningstegnet _ er også tilladt). Funktionsnavne skal starte med et bogstavtegn, men kan indeholde tal andre steder i navnet.
Jeg har holdt fast i JavaScript-stilen med funktionsnavne-store bogstaver - det vil sige indledende små bogstaver og derefter store bogstaver, hvis funktionsnavnet er sammensat af sammensatte ord. For eksempel, myFuncName, dit funktionsnavn, eller deresFunknavn. Funktionsnavne er store og små bogstaver Sørg for at bruge den samme store bogstav, når du henviser til funktionen andetsteds i scriptet. JavaScript overvejer myFunc forskellig fra Myfunc.
Mine ting. Dette adskiller straks det fra en funktion, der bruger en kapitalisering mine ting. Selvfølgelig er du fri til at vedtage enhver kapitaliseringsordning, du ønsker.Definition og brug af en funktion
Den bedste måde at beskrive hvordan og hvorfor en funktion er at vise en enkel i handling. Her er en grundlæggende funktion, der viser "Hej, JavaScripters!" og er en åbenlys start på "Hello World!" eksempel, du ser for nye programmeringssprog.
funktion basicFunction () {alarm ("Hej JavaScripters!"); } Dette blot definerer funktionen. JavaScript gør intet med det, medmindre funktionen henvises til et andet sted i scriptet. Du skal opkald funktionen for at bruge den. Opkald til en brugerdefineret funktion er det samme som at kalde en indbygget JavaScript-funktion - du angiver blot navnet på funktionen i dit script. Dette fungerer som funktionsopkald. Når JavaScript møder funktionsopkaldet, slår det af for at udføre de instruktioner, der findes i denne funktion. Når funktionen er overstået, vender JavaScript tilbage til punktet umiddelbart efter funktionsopkaldet og behandler resten af scriptet.
For at ringe til funktionen ovenfor skal du blot inkludere teksten basicFunction () - bemærk de tomme parenteser, efterhånden som de kræves. Her er et fungerende eksempel på Hello JavaScripters-programmet.
Grundlæggende funktion Eksempel på funktion basicFunction () {alarm ("Hej JavaScripters!"); }
basicFunction ();
Siden er indlæst.
Browseren behandler indholdet af koden, når dokumentet indlæses. Når det møder basicFunction () funktionskald, stopper det kortvarigt for at behandle funktionen, og en advarselsboks vises. Klik på OK, og resten af siden indlæses.
Opkald til en funktion med en begivenhedshåndterer
En almindelig måde at kalde en funktion på er at inkludere en henvisning til den i en formknap eller hypertekstlink. Behandling af en brugerdefineret funktion, når brugeren klikker på en formknap, er måske den nemmeste af alle. Du bruger onClick begivenhedshåndterer til at fortælle JavaScript, at når brugeren klikker på knappen, skal den angivne funktion behandles. Her er en revideret version af det foregående eksempel, der viser, hvordan basicFunction kaldes, når der klikkes på form-knappen.
Grundlæggende funktion Eksempel på funktion basicFunction () {alarm ("Hej JavaScripters!"); }
Klik for at ringe til funktionen.
Læg mærke til onClick-syntaksen i koden. Den begivenhed, du vil behandle med et klik, er et opkald til basicFunction. Denne begivenhed er omgivet af dobbelt citater.
Videregive en værdi til en funktion
JavaScript-funktioner understøtter overførte værdier - eller parametre -- til dem. Disse værdier kan bruges til behandling inden for funktionen. For eksempel i stedet for at have advarselsfeltet sige "Hej JavaScripters!" når du kalder det, kan du få det til at sige alt, hvad du kan lide. Teksten, der skal vises, kan sendes som en parameter til funktionen.
For at overføre en parameter til en funktion skal du angive et variabelnavn som parameter i funktionsdefinitionen. Du bruger derefter det variable navn andetsteds i funktionen. For eksempel:
funktion basicExample (tekst) {alarm (tekst); } Variabelnavnet er Tekst, og er defineret som parameteren for funktionen. Variablen bruges derefter som teksten, der skal vises i advarselsboksen. Når du ringer til funktionen, skal du angive den tekst, du vil vise, som en parameter for funktionsopkaldet:
basicExample ("Dette siger alt hvad jeg vil"); Videregivelse af flere værdier til en funktion
Du kan videregive flere parametre til en funktion. Som med indbyggede JavaScript-funktioner og metoder skal du adskille parametrene med kommaer:
multipleParams ("en", "to"); ... funktion multipleParams (Param1, Param2) {... Når du definerer en funktion med flere parametre, skal du sørge for, at parametrene er angivet i samme rækkefølge i funktionsopkaldet. Ellers kan din JavaScript-kode muligvis anvende parametrene på de forkerte variabler, og din funktion fungerer ikke korrekt.
Her er et fungerende eksempel på en funktion med flere parametre. Det tager to parametre: en inputstreng og en talværdi. Talværdien angiver, hvor mange tegn til venstre for den streng, du vil have vist i advarselsfeltet. Når du kører følgende script, viser advarselsboksen "Dette er" - de første syv tegn i inputstrengen.
Globalt variabelt eksempel lefty ("Dette er en test", 7);
funktion lefty (InString, Num) {var OutString = InString.substring (InString, Num); alarm (OutString); }
Returnering af en værdi fra en funktion
De hidtil beskrevne funktioner returnerer ikke en værdi; det vil sige, de gør den magi, du vil have dem til, og slutter derefter. Ingen "output" -værdi leveres af funktionen. På nogle andre sprog kaldes sådanne returløse funktioner underrutiner. I JavaScript (som i C og C ++) er "funktioner imidlertid funktioner" uanset om de returnerer en værdi eller ej.
Det er let at returnere en værdi fra en funktion: brug Vend tilbage erklæring sammen med den værdi, du ønsker at returnere. Dette er praktisk, når du vil have din funktion til at churn gennem nogle data og returnere det behandlede resultat. Tag funktionen "lefty" ovenfra. I stedet for at vise den afskårne streng kan du returnere den til opkaldsfunktionen og bruge returværdien, som du vil.
Global variabel Eksempel var Ret = lefty ("Dette er en test", 7); alarm (Ret);
funktion lefty (InString, Num) {var OutString = InString.substring (InString, Num); return (OutString); }
Dette script gør stort set det samme som det foregående eksempel, men i stedet for altid at vise den afskårne tekst returnerer funktionen blot den behandlede værdi. Returværdien registreres i en variabel, og du kan frit bruge den variabel, som du ønsker. Ovenstående viser Ret variabel brugt med en advarselsboks, men du kan også bruge den på andre måder. For eksempel kan du skrive indholdet af Ret-variablen ved hjælp af document.write metode:
document.write (Ret);
Definition af lokale variabler inden for funktioner
Som standard erklæres alle JavaScript-variabler globalt for det dokument, der oprettede dem. Det betyder, at når du definerer en variabel i en funktion, er den også "synlig" for enhver anden del af scriptet på dette dokument. For eksempel i den følgende globale variabeltest er variabeltesten synlig for showVar funktion, selvom variablen er defineret i loadVar fungere.
Globalt variabelt eksempel
funktion showVar () {alarm (test)}
funktion loadVar () {test = "6"}
loadVar ();
Klik for at ringe til funktionen.
Globale variabler er ikke altid, hvad du vil have. I stedet ønsker du variabler, der er lokale for funktionen. Disse variabler findes kun, så længe JavaScript behandler funktionen. Når den afslutter funktionen, går variablerne tabt. Derudover behandles en lokal variabel med et givet navn som en separat enhed fra en global variabel med samme navn. På denne måde behøver du ikke bekymre dig om genbrug af variabelnavne. Den lokale variabel i funktionen vil ikke have nogen effekt på den globale variabel, der bruges andetsteds i scriptet.
For at erklære en lokal variabel skal du tilføje var-nøgleordet til begyndelsen af variabelnavnet i funktionen. Dette fortæller JavaScript om, at du vil gøre variablen lokal til den funktion. Skift som en test loadVar funktion ovenfor til følgende, og genindlæs scriptet. Når du klikker på knappen, fortæller JavaScript dig, at variablen ikke findes. Dette skyldes, at testen kun er lokal for loadVar funktion og findes ikke uden for funktionen.
funktion loadVar () {var test = "6"} Opkald til en funktion fra en anden funktion
Kode inde i en funktion opfører sig ligesom kode andre steder. Dette betyder, at du kan ringe til en funktion fra en anden funktion. Dette giver dig mulighed for at "rede" funktioner, så du kan oprette separate funktioner, som hver udfører en bestemt opgave, og derefter køre dem sammen som en komplet proces, den ene efter den anden. For eksempel er her en funktion, der kalder tre andre mytiske funktioner, der hver returnerer en tekststreng, der er blevet ændret på en eller anden måde.
funktionskørsel () {var Ret = changeText ("Skift mig"); alarm (Ret); document.write (Ret); } funktion changeText (Text) {Text = makeBold (Text); Tekst = makeItalics (tekst); Tekst = makeBig (tekst); returnere (tekst); } funktion makeBold (InString) {return (InString.bold ()); } funktion makeItalics (InString) {return (InString.italics ()); } funktion makeBig (InString) {return (InString.big ()); } Oprettelse af objekter med brugerdefinerede funktioner
JavaScript er baseret på objekter: vinduet er et objekt, links er objekter, former er objekter, selv Netscape selv (eller en anden browser) er et objekt. Brug af objekter kan hjælpe med at gøre programmeringen nemmere og mere strømlinet. Du kan udvide brugen af objekter i JavaScript ved at lave dine egne. Processen bruger funktioner på en let modificeret måde. Faktisk vil du blive overrasket over, hvor let det er at lave dine egne JavaScript-objekter.
Oprettelse af et nyt objekt indebærer to trin:
- Definer objektet i en brugerdefineret funktion.
- Brug det nye nøgleord til at oprette (eller instantere) objektet med et opkald til objektfunktionen.
Her er et eksempel på verdens enkleste brugerdefinerede JavaScript-objekt:
// denne del opretter et nyt objekt ret = new makeSimpleObject ();
// denne del definerer objektfunktionen makeSimpleObject () {}
Jeg har ringet til det nye objekt ret; brug ethvert gyldigt variabelnavn til det nye objekt (jeg bruger små bogstaver til variabler, der indeholder objekter, så det er lettere at fortælle, at variablen indeholder et objekt).
Du kan bruge den samme objektfunktion til at oprette et vilkårligt antal nye objekter. For eksempel opretter disse linjer fire nye og separate objekter: eenie, meenie, minie og moe:
eenie = ny makeSimpleObject (); meenie = nyt makeSimpleObject (); minie = nyt makeSimpleObject (); moe = ny makeSimpleObject ();
Faktisk er der endda en genvej til ovenstående "verdens enkleste JavaScript-objekt." Du behøver ikke at definere en objektfunktion for at lave et objekt med bare knogler. JavaScript understøtter et generisk Object () -objekt, som du kan bruge til at oprette nye objekter. Følgende gør det samme som ovenstående uden en eksplicit objektfunktion:
eenie = nyt objekt ();
Definere nye egenskaber til allerede fremstillede objekter
