Programování

„Personalizovaný JavaScript“: Uživatelem definované funkce, objekty a metody

Jako moderní programovací jazyk podporuje JavaScript úplnou rozšiřitelnost tím, že vám umožňuje definovat vlastní funkce. To vám umožňuje vytvářet rutiny, které můžete používat znovu a znovu. Šetříte čas opakovaným používáním běžných „komponent“ a vytvořením vlastních funkcí můžete rozšířit základní jazyk JavaScriptu podle svých potřeb. Představte si to jako „přizpůsobený JavaScript“.

Vzhledem k tomu, že JavaScript je založen na objektech, lze funkci JavaScript snadno přeměnit na objekt a metodu pro tento objekt. Nejenže tedy můžete vytvářet uživatelsky definované objekty, abyste mohli přihazovat, ale můžete také vytvářet své vlastní objekty, které se chovají přesně tak, jak chcete. A můžete vytvořit metody, které na tyto objekty působí. I když to zní mocně - a je to -, proces vytváření funkcí, objektů a metod je v JavaScriptu velmi snadný.

Představujeme funkce

Pomocí příkazu funkce můžete vytvořit vlastní funkci JavaScriptu. Syntaxe holých kostí je:

funkce název (parametry) { ... funkční věci ... } 
  • název je jedinečný název funkce. Všechny názvy funkcí ve skriptu musí být jedinečné.
  • parametry je jedna nebo více proměnných parametrů, které předáte funkci.
  • funkční věci jsou pokyny prováděné funkcí. Sem můžete vložit cokoli.

Všimněte si {a} složených znaků; tyto definují funkční bloka jsou naprosto nezbytné. Závorky informují JavaScript, kde funkce začíná a končí. Závorky kolem parametrů jsou také povinné. Zahrňte závorky, i když funkce nepoužívá parametry (a mnoho nepoužívá).

Názvy vašich uživatelsky definovaných funkcí jsou na vás, pokud používáte pouze alfanumerické znaky (podtržítko _ je také povoleno). Názvy funkcí musí začínat znakem písmene, ale mohou zahrnovat čísla jinde v názvu.

Zachytil jsem styl JavaScriptu psaní velkých písmen v názvu funkce - to znamená počáteční malá písmena, pak velká písmena, pokud je název funkce složen ze složených slov. Například, myFuncName, yourFuncNamenebo jejichFuncName. Názvy funkcí rozlišují velká a malá písmena; nezapomeňte použít stejnou velikost písmen, když odkazujete na funkci jinde ve skriptu. JavaScript zvažuje myFunc odlišný od Myfunc.

Abychom rozlišili mezi funkcemi a proměnnými, dávám přednost svým proměnným počáteční velká písmena, jako např Moje věci. To ji okamžitě odlišuje od funkce, která by používala velká písmena moje věci. Samozřejmě si můžete zvolit jakékoli schéma kapitalizace, které si přejete.

Definování a použití funkce

Nejlepší způsob, jak popsat, jak a proč je funkce, je ukázat jednoduchou v akci. Zde je základní funkce, která zobrazuje „Hello, JavaScripters!“ a je zřejmým startem „Hello World!“ příklad, který vidíte pro nové programovací jazyky.

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

Toto jen definuje funkce. JavaScript s tím nic neudělá, pokud tato funkce není ve skriptu uvedena někde jinde. Musíš volání funkci, abyste ji mohli používat. Volání uživatelem definované funkce je stejné jako volání vestavěné funkce JavaScriptu - ve skriptu uvedete pouze název funkce. To slouží jako volání funkce. Když JavaScript narazí na volání funkce, vypne se a dokončí všechny pokyny, které jsou v této funkci. Když funkce skončí, vrátí se JavaScript do bodu bezprostředně po volání funkce a zpracuje zbytek skriptu.

Chcete-li volat výše uvedenou funkci, stačí zahrnout text basicFunction () - poznamenejte si prázdné závorky, protože jsou povinné. Zde je funkční příklad programu Hello JavaScripters.

Základní funkce Příklad funkce basicFunction () {alert ("Hello JavaScripters!"); }

basicFunction ();

Stránka byla načtena.

Prohlížeč zpracovává obsah značky při načítání dokumentu. Když narazí na basicFunction () volání funkce, na okamžik se pozastaví zpracování funkce a zobrazí se výstražné pole. Klikněte na OK a zbytek stránky dokončí načítání.

Volání funkce pomocí obslužné rutiny události

Běžným způsobem volání funkce je zahrnout odkaz na ni do tlačítka formuláře nebo hypertextového odkazu. Zpracování uživatelem definované funkce, když uživatel klikne na tlačítko formuláře, je možná nejjednodušší ze všech. Pomocí obslužné rutiny události onClick sdělíte JavaScriptu, že když uživatel klikne na tlačítko, měla by být zpracována zadaná funkce. Zde je revidovaná verze předchozího příkladu, která ukazuje, jak se volá basicFunction po kliknutí na tlačítko formuláře.

Základní funkce Příklad funkce basicFunction () {alert ("Hello JavaScripters!"); }

Funkce volání kliknutím.

Všimněte si syntaxe onClick ve značce. Událost, kterou chcete zpracovat kliknutím, je výzva základní funkce. Tato událost je obklopena uvozovkami.

Předání hodnoty funkci

Funkce JavaScriptu podporují předávání hodnot - nebo parametry -- jim. Tyto hodnoty lze použít ke zpracování v rámci funkce. Například místo výstražného pole řekněte „Hello JavaScripters!“ kdykoli to zavoláte, můžete si nechat říct cokoli chcete. Text, který se má zobrazit, lze funkci předat jako parametr.

Chcete-li předat parametr funkci, zadejte název proměnné jako parametr v definici funkce. Tento název proměnné pak použijete jinde ve funkci. Například:

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

Název proměnné je Text, a je definován jako parametr funkce. Tato proměnná se poté použije jako text k zobrazení v poli výstrahy. Při volání funkce uveďte text, který chcete zobrazit jako parametr volání funkce:

basicExample ("To říká, cokoli chci"); 

Předání více hodnot do funkce

Funkci můžete předat více parametrů. Stejně jako u vestavěných funkcí a metod JavaScriptu oddělte parametry čárkami:

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

Když definujete funkci s více parametry, ujistěte se, že jsou parametry uvedeny ve stejném pořadí ve volání funkce. Jinak může váš kód JavaScript použít parametry na nesprávné proměnné a vaše funkce nebude fungovat správně.

Zde je funkční příklad funkce s více parametry. Trvá dva parametry: vstupní řetězec a číselná hodnota. Hodnota čísla označuje, kolik znaků vlevo od řetězce chcete zobrazit v poli výstrahy. Když spustíte následující skript, zobrazí se v okně výstrahy „This is“ - prvních sedm znaků vstupního řetězce.

Příklad globální proměnné („This is a test“, 7);

function lefty (InString, Num) {var OutString = InString.substring (InString, Num); výstraha (OutString); }

Vrácení hodnoty z funkce

Dosud popsané funkce nevracejí hodnotu; to znamená, že dělají jakoukoli magii, kterou chcete, aby skončili. Funkce neposkytuje žádnou „výstupní“ hodnotu. V některých jiných jazycích se takové funkce bez návratnosti nazývají podprogramy. V JavaScriptu (jako v C a C ++) jsou však „funkce funkce“ bez ohledu na to, zda vracejí hodnotu.

Je snadné vrátit hodnotu z funkce: použijte vrátit se spolu s hodnotou, kterou chcete vrátit. To je užitečné, když chcete, aby vaše funkce chrlila některá data a vrátila zpracovaný výsledek. Vezměte funkci „levice“ shora. Místo zobrazení odříznutého řetězce jej můžete vrátit do volající funkce a použít návratovou hodnotu libovolným způsobem.

Příklad globální proměnné var Ret = lefty ("This is a test", 7); výstraha (Ret);

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

Tento skript je v podstatě stejný jako v předchozím příkladu, ale místo toho, aby vždy zobrazoval odříznutý text, funkce pouze vrátí zpracovanou hodnotu. Návratová hodnota je zachycena v proměnné a tuto proměnnou můžete libovolně použít. Výše uvedené ukazuje Ret proměnná použitá s výstražným polem, ale můžete ji použít i jinými způsoby. Například můžete napsat obsah proměnné Ret pomocí document.write metoda:

document.write (Ret); 

Definování lokálních proměnných ve funkcích

Ve výchozím nastavení jsou všechny proměnné JavaScriptu deklarovány jako globální pro dokument, který je vytvořil. To znamená, že když definujete proměnnou ve funkci, je také „viditelná“ pro jakoukoli jinou část skriptu v daném dokumentu. Například v následujícím testu globálních proměnných je test proměnných viditelný pro showVar funkce, i když je proměnná definována v loadVar funkce.

Příklad globální proměnné

funkce showVar () {alert (test)}

funkce loadVar () {test = "6"}

loadVar ();

Funkce volání kliknutím.

Globální proměnné nejsou vždy to, co chcete. Místo toho chcete proměnné, které jsou pro funkci lokální. Tyto proměnné existují, pouze pokud JavaScript tuto funkci zpracovává. Při ukončení funkce dojde ke ztrátě proměnných. Kromě toho je místní proměnná daného jména považována za samostatnou entitu od globální proměnné se stejným názvem. Tímto způsobem se nemusíte starat o opětovné použití názvů proměnných. Místní proměnná ve funkci nebude mít žádný vliv na globální proměnnou použitou jinde ve skriptu.

Chcete-li deklarovat místní proměnnou, přidejte klíčové slovo var na začátek názvu proměnné ve funkci. To říká JavaScriptu, že chcete, aby proměnná byla pro tuto funkci lokální. Jako test změňte loadVar funkce výše na následující a znovu načtěte skript. Po kliknutí na tlačítko vám JavaScript sdělí, že proměnná neexistuje. Je to proto, že test je pouze lokální loadVar funkce a mimo tuto funkci neexistuje.

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

Volání jedné funkce z jiné funkce

Kód uvnitř funkce se chová stejně jako kód kdekoli jinde. To znamená, že můžete volat jednu funkci zevnitř jiné funkce. To vám umožní „vnořit“ funkce, abyste mohli vytvářet samostatné funkce, z nichž každá provádí konkrétní úkol, a poté je společně spustit jako kompletní proces, jeden po druhém. Například zde je funkce, která volá tři další mýtické funkce, z nichž každá vrací řetězec textu, který byl nějakým způsobem změněn.

funkce run () {var Ret = changeText ("Změnit mě"); výstraha (Ret); document.write (Ret); } funkce changeText (Text) {Text = makeBold (Text); Text = makeItalics (Text); Text = makeBig (Text); návrat (text); } funkce makeBold (InString) {return (InString.bold ()); } funkce makeItalics (InString) {return (InString.italics ()); } funkce makeBig (InString) {return (InString.big ()); } 

Vytváření objektů pomocí uživatelsky definovaných funkcí

JavaScript je založen na objektech: okno je objekt, odkazy jsou objekty, formy jsou objekty, dokonce i samotný Netscape (nebo jiný prohlížeč) je objekt. Použití objektů může pomoci usnadnit a zefektivnit programování. Použití objektů v JavaScriptu můžete rozšířit vytvořením vlastních. Proces využívá funkce mírně upraveným způsobem. Ve skutečnosti budete překvapeni, jak snadné je vytvořit si vlastní objekty JavaScriptu.

Vytvoření nového objektu vyžaduje dva kroky:

  • Definujte objekt v uživatelem definované funkci.
  • Nové klíčové slovo použijte k vytvoření (nebo vytvoření instance) objektu pomocí volání funkce objektu.

Zde je příklad nejjednoduššího uživatelem definovaného objektu JavaScriptu na světě:

// tato část vytvoří nový objekt ret = new makeSimpleObject ();

// tato část definuje funkci objektu makeSimpleObject () {}

Zavolal jsem nový objekt ret; použijte jakýkoli platný název proměnné pro nový objekt (používám malá písmena pro proměnné, které obsahují objekty, takže je snazší zjistit, že proměnná obsahuje objekt).

Stejnou funkci objektu můžete použít k vytvoření libovolného počtu nových objektů. Tyto řádky například vytvoří čtyři nové a samostatné objekty: eenie, meenie, minie a moe:

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

Ve skutečnosti existuje dokonce zkratka k výše uvedenému „nejjednoduššímu objektu JavaScriptu na světě“. Abyste vytvořili objekt s holými kostmi, nemusíte definovat funkci objektu. JavaScript podporuje obecný objekt Object (), který můžete použít k vytváření nových objektů. Následující postup je stejný jako výše, bez explicitní funkce objektu:

eenie = nový objekt (); 

Definování nových vlastností již vytvořených objektů

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