Programiranje

'Prilagojeni JavaScript': Uporabniško določene funkcije, predmeti in metode

Kot sodoben programski jezik JavaScript podpira popolno razširljivost tako, da vam omogoča, da določite svoje funkcije. To vam omogoča ustvarjanje rutin, ki jih lahko uporabljate znova in znova. Prihranite čas pri ponovni uporabi običajnih "komponent" in z oblikovanjem lastnih funkcij lahko osnovni jezik JavaScript razširite tako, da ustreza vašim potrebam. Pomislite na to kot na "prilagojeni JavaScript".

Ker JavaScript temelji na objektih, lahko funkcijo JavaScript enostavno spremenimo v objekt in metodo za ta objekt. Torej, ne samo, da lahko ustvarite uporabniško določene predmete, ki ustrezajo vašim ponudbam, lahko ustvarite tudi lastne predmete, ki se obnašajo točno tako, kot želite. In lahko ustvarite metode, ki delujejo na te predmete. Čeprav se to sliši močno - in je - postopek ustvarjanja funkcij, predmetov in metod je v JavaScript zelo enostaven.

Predstavljamo funkcije

Uporabite stavek funkcije za ustvarjanje lastne funkcije JavaScript. Sintaksa golih kosti je:

funkcijo ime (params) { ... funkcijske stvari ... } 
  • ime je edinstveno ime funkcije. Vsa imena funkcij v skriptu morajo biti unikatna.
  • params je ena ali več spremenljivk parametrov, ki jih posredujete funkciji.
  • funkcijske stvari so navodila, ki jih izvaja funkcija. Tu lahko vstavite večino vsega.

Upoštevajte znake v oklepaju {in}; ti opredeljujejo funkcijski blok, in so nujno potrebni. Oklepaji sporočajo JavaScript, kje se funkcija začne in konča. Zahtevani so tudi oklepaji okoli parametrov. Vključite oklepaje, tudi če funkcija ne uporablja parametrov (in mnogi ne).

Imena vaših uporabniško določenih funkcij so odvisna od vas, če uporabljate samo alfanumerične znake (dovoljen je tudi podčrtaj). Imena funkcij se morajo začeti s črkovnim znakom, lahko pa vključujejo številke tudi drugje v imenu.

Zaljubil sem se v slog slova JavaScript za uporabo velikih črk v imenih funkcij - torej začetne male črke, nato velike črke, če je ime funkcije sestavljeno iz sestavljenih besed. Na primer, myFuncName, yourFuncName, ali theirFuncName. Imena funkcij razlikujejo med velikimi in malimi črkami; ne pozabite uporabiti iste velike začetnice, ko se sklicujete na funkcijo drugje v skriptu. JavaScript upošteva myFunc drugačen od Myfunc.

Za razlikovanje med funkcijami in spremenljivkami raje dam svojim spremenljivkam začetne velike črke, kot je Moje stvari. To ga takoj loči od funkcije, ki bi uporabila veliko začetnico moje stvari. Seveda lahko sprejmete katero koli shemo velikih začetnic.

Določanje in uporaba funkcije

Najboljši način, kako opisati, kako in zakaj funkcije, je prikazati preprosto delovanje. Tu je osnovna funkcija, ki prikaže "Pozdravljeni, JavaScripters!" in je očiten vzlet na "Hello World!" primer, ki ga vidite za nove programske jezike.

funkcija basicFunction () {alert ("Pozdravljeni JavaScripters!"); } 

To zgolj opredeljuje funkcijo. JavaScript z njo ne bo naredil nič, razen če se na funkcijo sklicuje drugje v skriptu. Moraš pokličite funkcijo, da jo lahko uporabite. Klicanje uporabniško določene funkcije je enako kot klicanje vgrajene funkcije JavaScript - v skriptu preprosto navedete ime funkcije. To služi kot klic funkcije. Ko JavaScript naleti na klic funkcije, se pomakne, da izpolni vsa navodila, ki so v tej funkciji. Ko je funkcija končana, se JavaScript vrne na točko takoj po klicu funkcije in obdela preostali del skripta.

Če želite poklicati zgornjo funkcijo, samo vključite besedilo basicFunction () - upoštevajte prazne oklepaje, saj so potrebni. Tu je delovni primer programa Hello JavaScripters.

Osnovna funkcija Primer funkcije basicFunction () {alert ("Pozdravljeni JavaScripters!"); }

basicFunction ();

Stran se je naložila.

Brskalnik ob nalaganju dokumenta obdela vsebino oznake. Ko naleti na basicFunction () klic funkcije, začasno ustavi obdelavo funkcije in prikaže se opozorilno polje. Kliknite V redu in preostali del strani se naloži.

Klicanje funkcije z upravljalnikom dogodkov

Običajni način klica funkcije je vključitev sklica nanjo v gumb obrazca ali hipertekstovno povezavo. Obdelava uporabniško določene funkcije, ko uporabnik klikne gumb obrazca, je morda najlažja od vseh. Upravljalnik dogodkov onClick uporabljate, da JavaScriptu sporočite, da je treba uporabnika, ko klikne gumb, obdelati določeno funkcijo. Tukaj je revidirana različica prejšnjega primera, ki prikazuje, kako se pri kliku na gumb obrazca pokliče basicFunction.

Osnovna funkcija Primer funkcije basicFunction () {alert ("Pozdravljeni JavaScripters!"); }

Kliknite funkcijo za klic.

Upoštevajte sintakso onClick v oznaki. Dogodek, ki ga želite obdelati s klikom, je klic basicFunction. Ta dogodek je obdan z dvojnimi narekovaji.

Posredovanje vrednosti funkciji

Funkcije JavaScript podpirajo posredne vrednosti - ali parametrov -- njim. Te vrednosti je mogoče uporabiti za obdelavo znotraj funkcije. Na primer, namesto da bi v okencu z opozorilom pisalo "Hello JavaScripters!" kadar koli ga pokličete, lahko rečete, kar koli želite. Besedilo, ki se prikaže, se lahko prenese kot parameter funkciji.

Če želite funkciji posredovati parameter, podajte ime spremenljivke kot parameter v definiciji funkcije. Nato ime spremenljivke uporabite drugje v funkciji. Na primer:

funkcija basicExample (Besedilo) {opozorilo (Besedilo); } 

Ime spremenljivke je Besedilo, in je opredeljen kot parameter funkcije. Ta spremenljivka se nato uporabi kot besedilo za prikaz v opozorilnem polju. Ko kličete funkcijo, vnesite besedilo, ki ga želite prikazati kot parameter klica funkcije:

basicExample ("To pove vse, kar želim"); 

Posredovanje več vrednosti funkciji

Funkciji lahko prenesete več parametrov. Tako kot pri vgrajenih funkcijah in metodah JavaScript tudi parametre ločite z vejicami:

multipleParams ("ena", "dve"); ... funkcija multipleParams (Param1, Param2) {... 

Ko definirate funkcijo z več parametri, se prepričajte, da so parametri navedeni v istem vrstnem redu v klicu funkcije. V nasprotnem primeru lahko vaša koda JavaScript uporabi parametre za napačne spremenljivke in vaša funkcija ne bo delovala pravilno.

Tu je delovni primer funkcije z več parametri. Zajema dva parametra: vhodni niz in številčno vrednost. Številčna vrednost označuje, koliko znakov na levi strani niza želite prikazati v opozorilnem polju. Ko zaženete naslednji skript, se v opozorilnem polju prikaže "To je" - prvih sedem znakov vhodnega niza.

Primer globalne spremenljivke levo ("To je test", 7);

funkcija levo (InString, Num) {var OutString = InString.substring (InString, Num); opozorilo (OutString); }

Vrnitev vrednosti iz funkcije

Doslej opisane funkcije ne vrnejo vrednosti; to pomeni, da naredijo kakršno koli magijo, ki jo želite, nato pa končajo. Funkcija ne zagotavlja nobene "izhodne" vrednosti. V nekaterih drugih jezikih se takšne funkcije brez vrnitve imenujejo podprogrami. Vendar pa so v JavaScript (tako kot v C in C ++) "funkcije funkcije", ne glede na to, ali vrnejo vrednost.

Vrniti vrednost iz funkcije je enostavno: uporabite vrnitev izjavo, skupaj z vrednostjo, ki jo želite vrniti. To je priročno, če želite, da vaša funkcija preide med nekatere podatke in vrne obdelani rezultat. Vzemite funkcijo "levi" od zgoraj. Namesto da prikažete odrezan niz, ga lahko vrnete klicni funkciji in vrnete vrednost na kakršen koli način.

Primer globalne spremenljivke var Ret = lefty ("To je test", 7); opozorilo (Ret);

funkcija levo (InString, Num) {var OutString = InString.substring (InString, Num); vrnitev (OutString); }

Ta skript je v bistvu enak tistemu iz prejšnjega primera, vendar namesto da vedno prikaže odsekano besedilo, funkcija samo vrne obdelano vrednost. Vrnjena vrednost je zajeta v spremenljivko in jo lahko uporabite na kakršen koli način. Zgornje prikazuje Ret spremenljivka, ki se uporablja z opozorilnim poljem, lahko pa jo uporabite tudi na druge načine. Vsebino spremenljivke Ret lahko na primer napišete s pomočjo document.write metoda:

document.write (Ret); 

Določanje lokalnih spremenljivk znotraj funkcij

Privzeto so vse spremenljivke JavaScript razglašene za globalne za dokument, ki jih je ustvaril. To pomeni, da ko definirate spremenljivko v funkciji, je tudi "vidna" kateremu koli drugemu delu skripta v tem dokumentu. Na primer, v naslednjem preizkusu globalne spremenljivke je test spremenljivke viden showVar funkcija, čeprav je spremenljivka definirana v loadVar funkcijo.

Primer globalne spremenljivke

funkcija showVar () {opozorilo (test)}

funkcija loadVar () {test = "6"}

loadVar ();

Kliknite funkcijo za klic.

Globalne spremenljivke niso vedno tisto, kar želite. Namesto tega želite spremenljivke, ki so lokalne za funkcijo. Te spremenljivke obstajajo le, dokler JavaScript obdeluje funkcijo. Ko izstopi iz funkcije, se spremenljivke izgubijo. Poleg tega se lokalna spremenljivka določenega imena obravnava kot ločena entiteta od globalne spremenljivke z istim imenom. Na ta način vam ni treba skrbeti za ponovno uporabo imen spremenljivk. Lokalna spremenljivka v funkciji ne bo vplivala na globalno spremenljivko, ki se uporablja drugje v skriptu.

Če želite razglasiti lokalno spremenljivko, dodajte ključno besedo var na začetek imena spremenljivke v funkciji. To pove JavaScript, da želite spremenljivko prilagoditi tej funkciji. Kot test spremenite loadVar zgoraj v naslednjo in znova naložite skript. Ko kliknete gumb, vam JavaScript sporoči, da spremenljivka ne obstaja. To je zato, ker je test samo lokalni loadVar funkcija in ne obstaja zunaj funkcije.

funkcija loadVar () {var test = "6"} 

Klicanje ene funkcije iz druge funkcije

Koda znotraj funkcije se obnaša tako kot koda drugje. To pomeni, da lahko eno funkcijo pokličete znotraj druge funkcije. To vam omogoča, da funkcije "ugnezdijo", tako da lahko ustvarite ločene funkcije, ki vsaka opravi določeno nalogo, in jih nato zaženejo kot celoten postopek, enega za drugim. Tukaj je na primer funkcija, ki pokliče tri druge mitske funkcije, pri čemer vsaka vrne niz besedila, ki je bil na nek način spremenjen.

function run () {var Ret = changeText ("Spremeni me"); opozorilo (Ret); document.write (Ret); } function changeText (Text) {Text = makeBold (Text); Text = makeItalics (Besedilo); Text = makeBig (Besedilo); vrnitev (Besedilo); } funkcija makeBold (InString) {return (InString.bold ()); } funkcija makeItalics (InString) {return (InString.italics ()); } funkcija makeBig (InString) {return (InString.big ()); } 

Ustvarjanje predmetov z uporabniško določenimi funkcijami

JavaScript temelji na predmetih: okno je predmet, povezave so predmeti, obrazci so predmeti, celo Netscape sam (ali drug brskalnik) je predmet. Uporaba predmetov lahko olajša in poenostavi programiranje. Uporabo predmetov v JavaScript lahko razširite tako, da ustvarite svoje. Proces uporablja funkcije na nekoliko spremenjen način. Pravzaprav boste presenečeni, kako enostavno je ustvariti lastne predmete JavaScript.

Izdelava novega predmeta vključuje dva koraka:

  • Določite objekt v uporabniško določeni funkciji.
  • Z novo ključno besedo ustvarite (ali ustvarite primer) objekt s klicem funkcije predmeta.

Tu je primer najpreprostejšega uporabniško definiranega predmeta JavaScript:

// ta del ustvari nov objekt ret = new makeSimpleObject ();

// ta del definira funkcijo objekta makeSimpleObject () {}

Poklical sem novi objekt ponovitev; uporabite katero koli veljavno ime spremenljivke za novi objekt (za spremenljivke, ki vsebujejo predmete, uporabljam male črke, zato je lažje ugotoviti, da spremenljivka vsebuje objekt).

Z isto funkcijo predmeta lahko ustvarite poljubno število novih predmetov. Te vrstice na primer ustvarijo štiri nove in ločene predmete: eenie, meenie, minie in moe:

eenie = nov makeSimpleObject (); meenie = nov makeSimpleObject (); minie = nov makeSimpleObject (); moe = nov makeSimpleObject (); 

Pravzaprav obstaja celo bližnjica do zgornjega "najpreprostejšega predmeta JavaScript na svetu." Za izdelavo predmeta z golimi kostmi vam ni treba definirati funkcije predmeta. JavaScript podpira generični objekt Object (), ki ga lahko uporabite za ustvarjanje novih predmetov. Naslednje deluje enako kot zgoraj, brez izrecne funkcije predmeta:

eenie = nov objekt (); 

Določanje novih lastnosti za že izdelane predmete

$config[zx-auto] not found$config[zx-overlay] not found