Programovanie

„Personalizovaný JavaScript“: Používateľom definované funkcie, objekty a metódy

Ako moderný programovací jazyk podporuje JavaScript úplnú rozšíriteľnosť tým, že vám umožňuje definovať svoje vlastné funkcie. To vám umožní vytvárať rutiny, ktoré môžete používať znova a znova. Šetríte čas opätovným použitím bežných „komponentov“ a návrhom vlastných funkcií môžete rozšíriť základný jazyk JavaScriptu tak, aby vyhovoval vašim potrebám. Predstavte si to ako „prispôsobený JavaScript“.

Pretože JavaScript je založený na objektoch, je možné z funkcie JavaScript ľahko urobiť objekt a metódu pre tento objekt. Nielenže teda môžete vytvárať objekty definované používateľom na účely ponúkania cien, ale aj svoje vlastné objekty, ktoré sa správajú presne tak, ako chcete. A môžete vytvoriť metódy, ktoré pôsobia na tieto objekty. Aj keď to znie mocne - a je to -, proces vytvárania funkcií, objektov a metód je v JavaScripte veľmi jednoduchý.

Predstavujeme funkcie

Pomocou príkazu funkcie si môžete vytvoriť svoju vlastnú funkciu JavaScriptu. Syntax holých kostí je:

funkcia názov (params) { ... funkčné veci ... } 
  • názov je jedinečný názov funkcie. Všetky názvy funkcií v skripte musia byť jedinečné.
  • params je jedna alebo viac premenných parametrov, ktoré odovzdáte funkcii.
  • funkčné veci sú pokyny vykonané funkciou. Sem môžete dať najviac čokoľvek.

Všimnite si zložené znaky {a}; tieto definujú funkčný blok, a sú absolútne nevyhnutné. Zložené zátvorky informujú JavaScript, kde sa funkcia začína a končí. Vyžadujú sa aj zátvorky okolo parametrov. Zahrňte zátvorky, aj keď funkcia nepoužíva parametre (a mnoho ďalších).

Názvy vašich užívateľom definovaných funkcií sú na vás, pokiaľ použijete iba alfanumerické znaky (znak podčiarknutia _ je tiež povolený). Názvy funkcií musia začínať znakom písmena, ale môžu obsahovať čísla inde v názve.

Stal som sa štýlom JavaScriptu, ktorý slúži na písanie veľkých písmen v názvoch funkcií - to znamená, že počiatočné malé písmená, potom veľké písmená, ak je názov funkcie zložený zo zložených slov. Napríklad, myFuncName, yourFuncNamealebo ichFuncName. Názvy funkcií rozlišujú veľké a malé písmená; nezabudnite použiť rovnaké veľké písmená, keď odkazujete na funkciu inde v skripte. JavaScript zvažuje myFunc rozdielny od Myfunc.

Aby som rozlišoval medzi funkciami a premennými, radšej dávam svojim premenným počiatočné veľké písmená, ako napr Moje veci. To ho okamžite odlíši od funkcie, ktorá by používala veľké písmená moje veci. Samozrejme, môžete prijať akúkoľvek schému kapitalizácie, ktorú chcete.

Definovanie a použitie funkcie

Najlepším spôsobom, ako opísať, ako a prečo je funkcia, je ukázať jednoduchú v akcii. Toto je základná funkcia, ktorá zobrazuje „Hello, JavaScripters!“ a je očividným štartom do programu „Hello World!“ príklad, ktorý vidíte pre nové programovacie jazyky.

function basicFunction () {alert ("Hello JavaScripters!"); } 

Toto iba definuje funkcia. JavaScript s tým neurobí nič, pokiaľ na funkciu nebude odkazovať inde v skripte. Musíš hovor túto funkciu používať. Volanie používateľom definovanej funkcie je to isté ako volanie vstavanej funkcie JavaScriptu - v skripte uvediete iba názov funkcie. Toto slúži ako volanie funkcie. Keď JavaScript narazí na volanie funkcie, prerušuje sa a dokončí všetky pokyny, ktoré sa v tejto funkcii nachádzajú. Po skončení funkcie sa JavaScript vráti do bodu ihneď po vyvolaní funkcie a spracuje zvyšok skriptu.

Ak chcete zavolať vyššie uvedenú funkciu, stačí vložiť text basicFunction () - všimnite si prázdne zátvorky, ktoré sú povinné. Tu je príklad fungovania programu Hello JavaScripters.

Základná funkcia Príklad funkcie basicFunction () {alert ("Hello JavaScripters!"); }

basicFunction ();

Stránka sa načítala.

Prehliadač spracuje obsah značky pri načítaní dokumentu. Keď narazí na basicFunction () volanie funkcie, na chvíľu sa pozastaví na spracovanie funkcie a zobrazí sa výstražné okno. Kliknite na OK a zvyšná časť stránky sa dokončí načítanie.

Volanie funkcie obslužnou rutinou udalosti

Bežným spôsobom volania funkcie je zahrnutie odkazu na ňu do tlačidla formulára alebo hypertextového odkazu. Spracovanie používateľom definovanej funkcie, keď používateľ klikne na tlačidlo formulára, je možno najjednoduchšie zo všetkých. Pomocou obslužnej rutiny udalosti onClick informujete JavaScript, že keď používateľ klikne na tlačidlo, mala by sa spracovať zadaná funkcia. Tu je revidovaná verzia predchádzajúceho príkladu, ktorá ukazuje, ako sa volá basicFunction po kliknutí na tlačidlo formulára.

Základná funkcia Príklad funkcie basicFunction () {alert ("Hello JavaScripters!"); }

Funkcia Click to call.

Všimnite si syntax onClick v značke. Udalosť, ktorú chcete spracovať po kliknutí, je výzva basicFunction. Táto udalosť je obklopená dvojitými úvodzovkami.

Odovzdanie hodnoty funkcii

Funkcie JavaScript podporujú odovzdávanie hodnôt - alebo parametre - im. Tieto hodnoty je možné použiť na spracovanie v rámci funkcie. Namiesto výstražného poľa napríklad povedzte „Ahoj JavaScripters!“ kedykoľvek to zavoláte, môžete nechať hovoriť čokoľvek, čo sa vám páči. Text, ktorý sa má zobraziť, je možné odovzdať funkcii ako parameter.

Ak chcete odovzdať parameter funkcii, zadajte názov premennej ako parameter v definícii funkcie. Tento názov premennej potom môžete použiť inde vo funkcii. Napríklad:

funkcia basicExample (Text) {alert (Text); } 

Názov premennej je Text, a je definovaný ako parameter funkcie. Táto premenná sa potom použije ako text na zobrazenie v okne výstrahy. Pri volaní funkcie uveďte text, ktorý chcete zobraziť ako parameter volania funkcie:

basicExample ("Toto hovorí všetko, čo chcem"); 

Odovzdanie viacerých hodnôt funkcii

Do funkcie môžete vložiť viac parametrov. Rovnako ako v prípade zabudovaných funkcií a metód JavaScriptu, oddeľte parametre čiarkami:

multipleParams ("jeden", "dva"); ... funkcia multipleParams (Param1, Param2) {... 

Keď definujete funkciu s viacerými parametrami, uistite sa, že sú parametre vo volaní funkcie uvedené v rovnakom poradí. V opačnom prípade môže váš kód JavaScript použiť parametre na nesprávne premenné a vaša funkcia nebude fungovať správne.

Tu je pracovný príklad funkcie s viacerými parametrami. Má dva parametre: vstupný reťazec a číselnú hodnotu. Hodnota čísla označuje, koľko znakov vľavo od reťazca chcete zobraziť v poli výstrahy. Keď spustíte nasledujúci skript, v okne výstrahy sa zobrazí „Toto je“ - prvých sedem znakov vstupného reťazca.

Príklad globálnej premennej („Toto je test“, 7);

function lefty (InString, Num) {var OutString = InString.substring (InString, Num); upozornenie (OutString); }

Vrátenie hodnoty z funkcie

Doteraz opísané funkcie nevracajú hodnotu; to znamená, že urobia všetko, čo chcete, aby skončili. Funkcia neposkytuje žiadnu „výstupnú“ hodnotu. V niektorých iných jazykoch sa také funkcie bez návratnosti nazývajú podprogramy. V JavaScripte (napríklad v C a C ++) sú však „funkcie funkciami“ bez ohľadu na to, či vracajú hodnotu.

Je ľahké vrátiť hodnotu z funkcie: použite návrat spolu s hodnotou, ktorú chcete vrátiť. To je užitočné, ak chcete, aby vaša funkcia prepĺňala niektoré údaje a vrátila spracovaný výsledok. Zhora prevezmite funkciu „ľavá strana“. Namiesto zobrazenia sekaného reťazca ho môžete vrátiť volajúcej funkcii a návratovú hodnotu môžete použiť ľubovoľným spôsobom.

Príklad globálnej premennej var Ret = lefty ("Toto je test", 7); výstraha (Ret);

function lefty (InString, Num) {var OutString = InString.substring (InString, Num); návrat (OutString); }

Tento skript je v podstate rovnaký ako v predchádzajúcom príklade, ale namiesto toho, aby vždy zobrazovala odrezaný text, funkcia iba vráti spracovanú hodnotu. Návratová hodnota je zachytená v premennej a vy môžete ľubovoľne použiť túto premennú. Vyššie uvedené ukazuje Ret premenná použitá s výstražným poľom, ale môžete ju použiť aj inak. Môžete napríklad napísať obsah premennej Ret pomocou znaku dokument.písať metóda:

document.write (Ret); 

Definovanie lokálnych premenných v rámci funkcií

V predvolenom nastavení sú všetky premenné kódu JavaScript deklarované globálne pre dokument, ktorý ich vytvoril. To znamená, že keď definujete premennú vo funkcii, je „viditeľná“ aj pre ktorúkoľvek inú časť skriptu v danom dokumente. Napríklad v nasledujúcom teste globálnych premenných je test premenných viditeľný pre showVar funkcie, aj keď je premenná definovaná v loadVar funkcia.

Príklad globálnej premennej

funkcia showVar () {alert (test)}

funkcia loadVar () {test = "6"}

loadVar ();

Funkcia Click to call.

Globálne premenné nie sú vždy to, čo chcete. Namiesto toho chcete premenné, ktoré sú pre funkciu lokálne. Tieto premenné existujú iba dovtedy, kým JavaScript nespracuje funkciu. Po ukončení funkcie sa premenné stratia. Okrem toho sa s lokálnou premennou s daným menom zaobchádza ako so samostatnou entitou od globálnej premennej s rovnakým názvom. Týmto spôsobom sa nemusíte obávať opätovného použitia názvov premenných. Lokálna premenná vo funkcii nebude mať žiadny vplyv na globálnu premennú použitú inde v skripte.

Ak chcete deklarovať lokálnu premennú, pridajte kľúčové slovo var na začiatok názvu premennej vo funkcii. Toto informuje JavaScript, že chcete premennú premeniť na lokálnu pre túto funkciu. Ako test zmeňte loadVar vyššie uvedenou funkciou a znova načítajte skript. Po kliknutí na tlačidlo vám JavaScript oznámi, že premenná neexistuje. Je to tak preto, lebo test je iba lokálny loadVar funkcie a neexistuje mimo tejto funkcie.

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

Volanie jednej funkcie z inej funkcie

Kód vo vnútri funkcie sa chová rovnako ako kód kdekoľvek inde. To znamená, že môžete volať jednu funkciu zvnútra inej funkcie. To vám umožní „vnoriť“ funkcie, aby ste mohli vytvárať samostatné funkcie, z ktorých každá vykonáva konkrétnu úlohu, a potom ich spoločne spustiť ako kompletný proces, jeden po druhom. Napríklad tu máme funkciu, ktorá volá ďalšie tri mýtické funkcie, pričom každá vracia reťazec textu, ktorý bol nejakým spôsobom zmenený.

function run () {var Ret = changeText ("Change me"); výstraha (Ret); document.write (Ret); } funkcia changeText (Text) {Text = makeBold (Text); Text = makeItalics (Text); Text = makeBig (Text); návrat (Text); } funkcia makeBold (InString) {return (InString.bold ()); } funkcia makeItalics (InString) {return (InString.italics ()); } funkcia makeBig (InString) {return (InString.big ()); } 

Vytváranie objektov s užívateľsky definovanými funkciami

JavaScript je založený na objektoch: okno je objekt, odkazy sú objekty, formy sú objekty, dokonca aj samotný Netscape (alebo iný prehľadávač) je objekt. Používanie objektov môže pomôcť uľahčiť a zjednodušiť programovanie. Používanie objektov v JavaScripte môžete rozšíriť vytvorením vlastného. Tento proces využíva funkcie mierne upraveným spôsobom. V skutočnosti budete prekvapení, aké ľahké je vytvoriť si vlastné objekty v jazyku JavaScript.

Výroba nového objektu si vyžaduje dva kroky:

  • Definujte objekt v užívateľom definovanej funkcii.
  • Použite nové kľúčové slovo na vytvorenie (alebo vytvorenie inštancie) objektu pomocou volania funkcie objektu.

Tu je príklad najjednoduchšieho používateľom definovaného objektu JavaScript na svete:

// táto časť vytvorí nový objekt ret = new makeSimpleObject ();

// táto časť definuje funkciu objektu makeSimpleObject () {}

Zavolal som nový objekt ret; použite pre nový objekt akýkoľvek platný názov premennej (pre premenné, ktoré obsahujú objekty, používam malé písmená, takže je ľahšie zistiť, že premenná obsahuje objekt).

Rovnakú funkciu objektu môžete použiť na vytvorenie ľubovoľného počtu nových objektov. Tieto riadky napríklad vytvárajú štyri nové a samostatné objekty: eenie, meenie, minie a moe:

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

V skutočnosti existuje dokonca aj skratka k vyššie uvedenému „najjednoduchšiemu objektu JavaScriptu na svete“. Ak chcete vytvoriť objekt s holými kosťami, nemusíte definovať funkciu objektu. JavaScript podporuje všeobecný objekt Object (), ktorý môžete použiť na výrobu nových objektov. Nasledujúce položky robia to isté ako vyššie uvedené, bez explicitnej funkcie objektu:

eenie = nový objekt (); 

Definovanie nových vlastností už vyrobených objektov

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