Popis funkce v javascriptu. Použití tlačítka HTML k volání funkce JavaScriptu. Kam umístit deklarace funkcí

Článek ve vývoji!

Článek, ve kterém se zamyslíme nad tím, co je funkce, a také nad tradiční (klasickou) verzí práce s ní. Kromě toho si rozebereme, jaké jsou argumenty (parametry) funkce a návratový operátor.

Co je to funkce?

Funkce je sada instrukcí, které lze pojmenovat a pak k nim přistupovat pod tímto jménem odkudkoli v programu.

Klasický příklad použití funkce. Na webové stránce je kód JavaScript, jehož část se několikrát opakuje. Abyste tomu zabránili, můžete tento fragment navrhnout jako funkci a poté ji zavolat na správných místech

kód podle názvu této funkce. Volání této funkce bude znamenat provedení instrukcí v ní obsažených.

  • Jak organizovat provádění nějaké úlohy v JavaScriptu pomocí funkcí? Chcete-li to provést, obvykle postupujte takto:
  • rozdělit úkol na jednotlivé části (dílčí úkoly);
  • dílčí úkoly jsou formalizovány prostřednictvím funkcí;

vyvinout hlavní kód pomocí volání vytvořených funkcí. V důsledku toho se takový program stává strukturovanějším. Je jednodušší přidat různé změny

a přidat nové funkce.

Deklarace a volání funkce

  • Operace s funkcí v JavaScriptu lze rozdělit do 2 kroků:
  • deklarace (vytvoření) funkce.

zavolat (provést) tuto funkci. Deklarace funkce. Vytvoření funkce v JavaScriptu začíná zápisem

klíčové slovo

function , pak je uveden název funkce, pak jsou parametry uvedeny v závorkách x, pokud je to nutné, pak jsou uvedeny instrukce, které jsou uzavřeny ve složených závorkách.

// deklarace funkce someName function someName() ( alert("Zavolali jste funkci someName!"); ) JavaScript - Syntaxe deklarace funkce

Funkce může mít libovolný počet parametrů nebo žádné. V každém případě jsou uvedeny závorky. Pokud existuje několik parametrů, musí být odděleny čárkou. Parametry funkcí jsou přístupné jejich jménem.

Sada instrukcí uzavřená ve složených závorkách je kód funkce, který bude proveden, když je volána.

Volání funkce.

Samotná deklarovaná funkce nebude provedena. Aby bylo možné jej spustit, musí být volán. Funkce se volá zadáním jejího názvu a dvou závorek. V případě potřeby jsou argumenty uvedeny v závorkách.

// volání funkce uvedené v předchozím příkladu someName();

JavaScript - Syntaxe volání funkcí Je funkce objektem v JavaScriptu? Funkce v JavaScriptu jsou objekty.

V JavaScriptu je všechno objekt kromě šesti

primitivní typy

data. A pokud je funkce objekt, pak odkaz na něj může být uložen v proměnné.

// deklarace funkce someName function someName() ( alert("Zavolali jste funkci someName!"); ) var reference = someName;

Poté můžete funkci volat takto:

Odkaz();

Parametry a argumenty funkcí

Argumenty funkce jsou hodnoty, které jsou předány funkci při jejím volání. Argumenty jsou od sebe odděleny čárkou.

// zavolá funkci sayWelcome a předá jí dva argumenty sayWelcome("Ivan", "Ivanov"); // další volání funkce sayWelcome se dvěma argumenty sayWelcome("Peter", "Petrov");

Parametry funkcí jsou jedním ze způsobů v JavaScriptu, jak můžete přistupovat k argumentům ve funkci. Parametry funkce ve fázi její deklarace jsou popsány v závorkách.

Zavolejme například funkci z výše uvedeného příkladu, aniž bychom zadali jeden nebo dva parametry:

// volání funkce sayWelcome a předání jednoho argumentu sayWelcome("Peter"); // Vítejte, nedefinováno Petře // volá funkci sayWelcome, aniž by jí předal nějaké argumenty sayWelcome(); // Vítejte, undefined undefined

Příklad funkce, která jednoduše vypíše předané argumenty do konzole prohlížeče:

// funkce deklarace funkce outputParam(param1, param2, param3) ( console.log(param1 + "; " + param2 + "; " + param3); ) // volá funkci outputParam, která ji předá různá množství parametry outputParam("Déšť","Sníh","Mlha"); // Déšť; Sněžení; Výstup mlhyParam(17); // 17; nedefinovaný; undefined outputParam(24,33); // 24; 33; undefined outputParam(); // nedefinováno; nedefinovaný; nedefinováno

Dalším způsobem přístupu k argumentům ve funkci je použití objektu speciálních argumentů. K argumentům se přes argumenty přistupuje stejným způsobem jako k prvkům běžného pole, tzn. podle jejich sériových čísel. Takže argument - vám umožní získat první argument, argumenty - druhý argument atd.

// oznámení součtové funkce funkce sum(číslo1, číslo2) ( /* číslo1 nebo argumenty – získat hodnotu argumentu 1 číslo2 nebo argumenty – získat hodnotu argumentu 2 */ var suma1 = číslo1 + číslo2, součet2 = argumenty + argumenty; return "Získaná částka 1 způsobem je " + součet1 + "; součet získaný 2. metodou je " + součet2; ) /* vypíše výsledek funkce součtu do konzole 7 - první argument (může být přístupný buď jménem num1 nebo pomocí argumentů) 4 - druhý argument (k němu lze přistupovat buď jménem num2 nebo pomocí argumentů) */ console.log(sum(7,4));

Hlavní rozdíl mezi těmito metodami je v tom, že první z nich umožňuje přístup pouze k těm argumentům, které byly pojmenovány ve fázi deklarace funkce. Druhá metoda umožňuje získat hodnotu libovolného argumentu, i když nemá název (podle sériové číslo). Tato vlastnost jazyka JavaScript umožňuje vytvářet univerzální, flexibilní funkce.

Kromě příjmu argumentů vám objekt arguments také umožňuje znát jejich počet. To se provádí pomocí vlastnosti length.

Argumenty předané funkci můžete iterovat, například pomocí pro smyčku nebo pro...z .

// deklarace funkce součet funkce sum() ( var i = 0; console.log("Výstup všech argumentů pomocí cyklu for"); for (i; i< arguments.length; i++) { console.log(i + 1 + " аргумент равен " + arguments[i]); } console.log("Вывод всех аргументов с помощью цикла for...of"); for (arg of arguments) { console.log(arg); } } // вызов функции sum sum(7, 4, 3, 1);

Funkce, která konzoli zobrazí všechny předané argumenty a jejich počet:

// funkce deklarace funkce myFunction () ( var i; console.log("Počet předaných parametrů = " + arguments.length); // projdeme všechny parametry pomocí cyklu for for (i = 0; i< arguments.length; i++) { console.log(i + " параметр = " + arguments[i]); } } // вызовы функции myFunction myFunction(3, 7, 27, "JavaScript"); myFunction(); myFunction("Яблоки", "Груши", "Апельсины");

Funkce, která provádí sčítání všech jí předávaných argumentů (jejich počet je předem neznámý):

// deklarace funkce var myCalc = function() ( // projdeme všechny parametry pomocí cyklu for var i, sum = 0; for (i = 0; i lt; arguments.length; i++) ( suma += argumenty [i] ) // vrátí součet jako výsledek return sum ) // volání funkce (výstup do konzole) console.log(myCalc(4, 20, 17, -6));

Výsledkem je, že pomocí objektu arguments můžete v těle funkce implementovat následující:

  • kontrola počtu předaných argumentů;
  • zpracování libovolného počtu parametrů.

Kromě funkce samotné mají k argumentům, které jsou jí předány ve fázi volání, přístup i další funkce v ní umístěné.

Funkce mainF(p1, p2) ( funkce childF() ( console.log("p1 = " + p1 + "; p2 = " + p2); ) childF(); ) mainF(3, 5); // p1 = 3; p2 = 5 mainF(4, 7); // p1 = 4; p2 = 7

Výchozí nastavení

Počínaje ECMAScriptem 2015 (6) lze parametr funkce nastavit na výchozí hodnotu.

Nastavme například parametr „color“ na jeho výchozí hodnotu, rovnou „#009688“:

Funkce setBGColor(color = "#009688") ( document.body.style.backgroundColor = barva; ) setBGColor(); // barva pozadí bude #009688 setBGColor("red"); // barva pozadí bude červená

Před ECMAScript 2015 jste mohli parametr nastavit na jeho výchozí hodnotu, například takto:

Funkce setBGColor(color) ( color = color !== undefined ? color: "#009688"; // nastavení barvy na výchozí hodnotu "#009688" document.body.style.backgroundColor = color; )

Zbývající parametry

Pokud jí při volání funkce předáte více argumentů, než má parametrů, pak ty zbývající můžete získat pomocí tzv. zbývajících parametrů (ostatních patametrů). Tato příležitost se objevil v jazyce začínajícím ECMAScript 2015.

// ...nums - zbývající parametry, ke kterým lze přistupovat v tomto případě podle názvu nums function doMath(mathAction, ...nums) ( var result = 0; nums.forEach(function(value) (​switch (mathAction) ( case "sum": result += value; break; case "sumCube" ": výsledek += hodnota**3; konec; případ "součet": výsledek += hodnota**2; konec: výsledek = 0; návratový výsledek; 4, 21, -4)); // 24 (3 + 4 + 21 + (-4)) console.log(doMath("sumSquare", 1, 4)); // 17 (1^2 + 4^2) console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)

návratový výpis

Příkaz return má vrátit hodnotu nebo výsledek vyhodnocení výrazu aktuální funkce. Hodnota nebo výraz musí být oddělen od návratové hodnoty mezerou. Příkaz return navíc zastaví provádění funkce, tzn. všechny pokyny po něm nebudou provedeny.

Funkce v JavaScriptu vždy vrátí výsledek bez ohledu na to, zda je použit příkaz return nebo ne.

// funkce, která vrací funkci výsledku sayWelcome (userFirstName, userLastName) ( if ((!userFirstName) || (!userLastName)) return "Vítejte, anonymní uživatel"; else return "Welcome, " + userLastName + " " + userFirstName ; ) // deklarace proměnné osoba var osoba; // přiřadit výsledek funkce sayWelcome do proměnné person person = sayWelcome("Ivan","Ivanov"); // vypíše hodnotu proměnné do konzole console.log(person); //Instrukce, která vypíše do konzole výsledek funkce sayWelcome console.log(sayWelcome("Petr","Petrov")); //Instrukce, která vypíše do konzole výsledek funkce sayWelcome console.log(sayWelcome("Sidorov"));

JavaScript - Funkce s kontrolou parametrů

// 1. funkce, která nevrací žádnou funkci výsledku sayWelcome (userFirstName, userLastName) ( console.log("Welcome, " + userLastName + " " + userFirstName); ) // zkusme získat výsledek z funkce, která ano nevracet nic console .log(sayWelcome("Ivan", "Ivanov")); // 2. funkce obsahující příkaz return bez funkce hodnoty sayDay (den) ( den = "Dnes," + den; return; //tato instrukce nebude provedena, protože přichází po příkazu return console.log(day) ; ) // zkusme získat výsledek z funkce, která obsahuje příkaz return bez hodnoty console.log(sayDay("21. února 2016"));

JavaScript – Získejte hodnotu z funkce, která nic nevrací

Stejný výsledek bude získán, pokud příkaz return neurčuje návratovou hodnotu.

Přetížení funkcí v JavaScriptu Přetížení funkcí v programování je schopnost deklarovat několik funkcí se stejnými názvy ve stejném rozsahu. Takové funkce se od sebe liší typem a počtem argumentů. Každá funkce má svou vlastní logika programu

. Přetížení funkcí se používá k tomu, aby bylo možné provádět podobné akce pomocí jediného názvu funkce. Jazyk JavaScript nepodporuje přetěžování funkcí stejným způsobem, jako je implementováno například v C podobné jazyky

. Tito. V JavaScriptu nemůžete vytvořit více funkcí se stejnými názvy, které jsou ve stejném oboru.

  • Podobnou funkci lze implementovat v JavaScriptu pomocí následujících kroků:
  • Chcete-li zkontrolovat, zda je argument předán nebo ne, použijte podmínku, která kontroluje jeho hodnotu na undefined .
  • Chcete-li zkontrolovat počet argumentů předávaných funkci, použijte vlastnost arguments length objektu.
  • Chcete-li zjistit typ předané hodnoty argumentu, použijte operátory typeof nebo instanceof. Pracovat s variabilní číslo
  • argumenty, použijte objekt arguments.

Počínaje ECMAScript6 můžete zadat výchozí hodnoty pro argumenty.

Vytvořme například funkci, kterou lze volat s jedním nebo dvěma argumenty: //deklarace funkce, která mění barvu elementy funkce setBgColor(bgColor,elements) ( //pokud není parametr elementů zadán při volání if (elements=== undefined) ( //potom nastavte jeho hodnotu na "div" elements = "div"; ) //získat vše elementy elementy = $(elements) // iterujte všechny elementy a nastavte je na zadanou barvu pozadí elements.each(function())( $(this).css("background-color",bgColor); )) /); *Zavolejte funkci setBgColor a zadejte jeden parametr. Protože 2 není zadán, pak tato funkce změní barvu pozadí všech prvků div.*/ setBgColor("zelená"); /*Volání funkce setBgColor se zadáním 2 parametrů. Protože 2 je specifikován parametr

tuto funkci

změní pouze barvu pozadí prvků tlačítka.*/ setBgColor("#ff0000","button");

Udělejme nějaké změny ve výše uvedeném kódu. Konkrétně uvedeme výchozí hodnotu pro druhý parametr:

//deklarace funkce, která mění barvu pozadí prvků //parametr prvků má ve výchozím nastavení hodnotu "div" funkce setBgColor(bgColor,elements = "div") ( //získání všech prvků prvky = $(elements); // iterujte všechny prvky a nastavte je na zadanou barvu pozadí elements.each(function())( $(this).css("background-color",bgColor); ) ) //volání funkce setBgColor s uvedením jednoho parametru setBgColor("zelená" ); //volání funkce setBgColor s uvedením 2 parametrů setBgColor("#ff0000","button");

Příklad toho, jak můžete v JavaScriptu implementovat „přetíženou“ funkci, která počítá počet kalorií, které člověk potřebuje za den:

// popis funkce countCal(sex, height) ( // parametry: sex (pohlaví) a výška (výška) var výsledek; if ((sex === 0) || (sex === "muž") ) ( výsledek = (výška - 100) * 20; ) else if ((pohlaví === 1) || (pohlaví === "žena")) (výsledek = (výška - 105) * 19; ) if (výsledek ) ( // argumenty - úroveň aktivity if (argumenty) ( výsledek *= argumenty; ) console.log("Množství kcal pro normální život: " + výsledek) else ( console.log("Nesprávné parametry"); ) ) / * volání funkce a předání jí 2 argumenty (1 - "muž", lze k ní přistupovat pomocí jména sex a argumenty; 2 - hodnota 185, lze k ní přistupovat pomocí jména pohlaví a argumenty) */ countCal(" muž", 185); /* volání funkce a předání 3 parametrů, ačkoliv v popisu funkce jsou přítomny pouze 2 (v tomto případě můžete hodnotu 3. parametru získat pouze jako argumenty) */ countCal(0, 185, 2);

Funkce se obvykle volá v závislosti na tom, jak je deklarována jménem nebo proměnnou obsahující odkaz na funkci.

Funkce fact(n) ( if (n === 1) ( return 1; ) return fact(n-1) * n; ) console.log(fact(5)); // 120

Funkci uvnitř jejího těla můžete volat nejen jménem, ​​ale také pomocí vlastnosti callee objektu arguments. Ale tuto vlastnost Je lepší to nepoužívat, protože... je to zastaralé. Navíc v přísném režimu to vůbec nejde.

Co jsou vestavěné (standardní) funkce?

JavaScript má obrovskou sadu vestavěných (standardních) funkcí. Tyto funkce jsou již popsány v samotném enginu prohlížeče. Téměř všechny jsou metodami jednoho nebo druhého objektu.

Například, aby bylo možné zavolat výstrahu vestavěné funkce (metody), není nutné ji nejprve deklarovat. Je to již popsáno v prohlížeči. Volání způsob upozornění se provádí zadáním názvu, závorek a argumentu uvnitř nich. Tato metoda navržený pro zobrazení zprávy na obrazovce ve formě dialogového okna. Textová zpráva je převzato z hodnoty parametru této funkce.

// volání funkce upozornění alert("Nějaký text");

JavaScript - Volání funkce upozornění

Funkce je programový kód, který je definován jednou a pak může být volán k provedení libovolný počet opakování. V Funkce JavaScript

je hodnota, takže ji lze přiřadit proměnným, prvkům pole, vlastnostem objektu, předat jako argument funkcím a vrátit jako hodnotu z funkcí.

Deklarace a volání funkce

Existují tři způsoby, jak deklarovat funkci: deklarace funkce, výraz funkce a výraz pojmenované funkce.

Deklarace funkce (zkráceně FD) je „klasická“ deklarace funkce. V JavaScriptu jsou funkce deklarovány pomocí literálu funkce. Syntaxe deklarace FD:

  • Funkční literál se skládá z následujících čtyř částí:
  • Klíčové slovo je funkce.
  • Povinný identifikátor, který určuje název funkce. Jako název funkce se obvykle volí sloveso, protože funkce provádí akci.
  • Dvojice závorek kolem seznamu nula nebo více identifikátorů oddělených čárkami. Tyto identifikátory se nazývají funkční parametry.
  • Tělo funkce sestávající z páru složených závorek obsahujících instrukce. Tělo funkce může být prázdné, ale vždy musí být zahrnuty složené závorky.

    Jednoduchý příklad:

    Při setkání s klíčovým slovem function interpret vytvoří funkci a poté na ni přiřadí odkaz na proměnnou s názvem sayHi (proměnnou s tímto názvem vytvoří interpret automaticky).

    Přístupem k proměnné sayHi můžete vidět, že existuje funkce jako hodnota (ve skutečnosti odkaz na ni):

    Alert(sayHi); // funkce sayHi() ( alert("Ahoj"); )

    Funkční výraz (zkráceně FE) je deklarace funkce, která je součástí výrazu (například přiřazení). Syntaxe deklarace FE:

    Funkce (parametry) (pokyny)

    Tělo funkce sestávající z páru složených závorek obsahujících instrukce. Tělo funkce může být prázdné, ale vždy musí být zahrnuty složené závorky.

    Var sayHi = funkce () ( alert("Ahoj"); );

    Funkce FE se také nazývá "anonymní funkce".

    Výraz pojmenované funkce (zkráceně NFE) je deklarace funkce, která je součástí výrazu (například přiřazení). Syntaxe deklarace NFE:

    Identifikátor funkce (parametry) (instrukce)

    Tělo funkce sestávající z páru složených závorek obsahujících instrukce. Tělo funkce může být prázdné, ale vždy musí být zahrnuty složené závorky.

    Var sayHi = funkce foo() ( alert("Ahoj"); );

    Deklarace FE a NFE interpret zpracovává úplně stejným způsobem jako deklarace FD: interpret vytvoří funkci a uloží na ni odkaz do proměnné sayHi.

    Programový kód, umístěný v těle funkce, se nespustí v okamžiku, kdy je funkce deklarována, ale v okamžiku, kdy je volána. Chcete-li zavolat funkci, použijte operátor () (volání funkce):

    Funkce sayHi() ( alert("Ahoj"); ) var sayHi2 = function () ( alert("Ahoj2"); ); var sayHi3 = funkce foo() ( alert("Ahoj3"); ); řekni Ahoj(); // "Ahoj" sayHi2(); // "Ahoj2" sayHi3(); // "Ahoj3"

    Rozdíl mezi třemi prezentovanými deklaracemi je v tom, že funkce deklarované jako FD jsou vytvořeny interpretem před spuštěním kódu (ve fázi analýzy), takže je lze volat (v rozsahu, kde jsou deklarovány) před deklarací:

    // Volání funkce předtím, než je deklarována v kódu nejvyšší úrovně foo(); function foo() ( alert("Volání funkce foo() in globální oblast viditelnost."); // Volání funkce předtím, než je deklarována v rozsahu funkce bar(); funkční bar() ( alert("Volání funkčního panelu() v rozsahu funkce."); ) )

    Funkce deklarované jako FE nebo NFE se vytvářejí za běhu, takže je lze volat až poté, co jsou deklarovány:

    // řekni Ahoj(); // Chyba. Funkce sayHi zatím neexistuje var sayHi = function () ( alert("Ahoj!"); ); řekni Ahoj();

    Funkce deklarované uvnitř bloku jsou v rozsahu bloku:

    // foo(); // Chyba. Funkce není deklarována. ( foo(); // 1 funkce foo() ( console.log(1); ) ) foo(); // Chyba. Funkce není deklarována.

    Na rozdíl od FE má funkce deklarovaná jako NFE schopnost odkazovat se na sebe jménem, ​​když je volána rekurzivně. Název funkce je dostupný pouze v rámci samotné funkce:

    (funkce sayHi(str) ( if (str) ( return; ) sayHi("hi"); // Jméno je dostupné uvnitř funkce ))(); řekni Ahoj(); // Chyba. Funkce není deklarována

    Funkce zpětného volání

    Funkce zpětného volání je funkce, která je předána jako argument jiné funkci, která má být volána později.

    Funkce zpětného volání se často používají jako obsluha událostí.

    Níže je uveden příklad funkce, která má jako svůj argument odkaz na jinou funkci pro následné volání:

    Function foo(callback) ( return callback(); ) foo (function() ( alert("Ahoj!"); ));

    Tento příklad jasně ukazuje, jak funguje zpětné volání.

    Funkce JavaScriptu umožňují organizovat skripty a zjednodušovat je opětovné použití kód. Místo vytváření dlouhých úryvků kódu roztroušených po stránce HTML jsou skripty organizovány do logických skupin.

    Deklarace a volání funkce JavaScriptu

    Syntaxe funkce JavaScriptu je následující:

    funkce ""název"" (""argument1"", ""argument2"", ""argument3"" ...) (""operátoři"" vrátí ""hodnotu"" )

    Název určuje, co budeme funkci volat, když ji voláme. Argumenty určují hodnoty, které jsou předány funkci ke zpracování. Sekce příkazů představuje tělo funkce, která provádí zpracování. Volitelný příkaz return umožňuje vrátit hodnotu.

    Následující příklad ukazuje funkci definovanou v sekci stránky HTML a volanou v sekci:

    funkce sayHello() ( alert("Ahoj!"); ) sayHello();

    Předávání argumentů funkci

    Ve výše uvedeném příkladu (typ skriptu textový JavaScript funkce ) funkci nejsou předány žádné argumenty. Funkce je obvykle navržena tak, aby provedla nějakou akci s několika argumenty:

    Jednoduchý příklad funkce JavaScriptové funkce sayHello(den, měsíc) ( alert("Ahoj! Dnes je " + den + " " + měsíc); ) sayHello("24", "červenec"); sayHello("1", "srpen"); sayHello("24", "květen");

    V tomto Příklad JavaScriptu Funkce zpětného volání se volá vícekrát, přičemž přebírá argumenty, které se pak použijí k vytvoření řetězce zobrazeného v dialogovém okně. Chcete-li to provést bez funkce, museli byste skript v sekci opakovat třikrát. Je zřejmé, že použití funkce je efektivnější přístup.

    Vrácení hodnoty z funkce

    Příkaz return se používá k vrácení hodnoty z funkce a jejímu použití v místě, kde je funkce volána. Jako příklad deklarujeme funkci, která přidá dva argumenty a vrátí výsledek:

    Jednoduchý příklad funkce JavaScript var result = addValues(10, 20) document.write("Result = " + výsledek);

    Ve výše uvedeném příkladu předáváme hodnoty 10 a 20 funkci addValues ​​​​. Funkce addValues ​​přidá tyto dvě hodnoty a vrátí výsledek. Příkaz return přiřadí výsledek do proměnné result, která se pak použije k vytvoření řetězce, který se vytiskne na stránku HTML.

    Volání funkce JavaScript lze provést v různá místa. Například není nutné přiřadit výsledek jako hodnotu proměnné. Můžete jej použít přímo jako argument při volání document.write .

    Je důležité si uvědomit, že funkce může vrátit pouze jednu hodnotu:

    Jednoduchý příklad funkce JavaScript funkce addValues(value1, value2) ( return value1 + value2; ) document.write("Result = " + addValues(10, 20)); Funkci onclick v JavaScriptu lze také použít podmíněné výrazy< 20"); }

    . Například: Jednoduchý příklad funkce JavaScript funkce addValues(hodnota1, hodnota2) ( návratová hodnota1 + hodnota2; ) if (addValues(10, 20) > 20) ( document.write("Výsledek > 20"); ) else ( document.write ( "Výsledek

    Kam umístit deklarace funkcí Jsou dvě místa, kam se doporučuje umístit Deklarace JavaScriptu funkce return: uvnitř části dokumentu HTML nebo uvnitř externí soubor

    .js Druhá možnost je považována za nejpreferovanější umístění, protože poskytuje největší flexibilitu.

    Cílem vytváření funkcí je udělat je co nejobecnější, aby se maximalizovala znovupoužitelnost.

    Překlad článku „Porozumění funkcím JavaScriptu“ připravil přátelský projektový tým.

    Dobrý Špatný

    Myšlenky dynamického generování obsahu na webovém zdroji se staly normou. Statické stránky a vytváření šablon webových stránek konečně dokončily své poslání.

    Moderní webový zdroj však nemusí být nutně představován sadou stránek generovaných serverem a aktualizovaných prohlížečem (JS+AJAX). Když přijde návštěvník, webový zdroj se může skládat z několika hlaviček pro protokol, nějakého textu v „hlavě“, několika řádků kódu v „těle“ a je to. zbytek" přijde s nápadem

    ” v návštěvnické zkušenosti - toto je ideální místo nebo aspirující na to být.

    JavaScript je zkušenost získaná po mnoho desetiletí. Má významná historie vývoj, moderní kvalifikovaný tým tvůrců a vývojářů. Jazyk je promyšlený, spolehlivý, krásný a dává vývojářům skutečnou příležitost psát slušný kód a zlepšovat se.

    Koncept algoritmu mimo funkci zde v zásadě chybí. Vývojář samozřejmě může vložit skript kamkoli na stránku, umístit do něj kód a ten se spustí. Jaký je však smysl kódu, který se provede pouze jednou: když se stránka načte (znovu načte)? Pokud není možné nastavit počáteční hodnoty některých nedůležitých proměnných.

    Skript je místo pro popis nezbytných proměnných a funkcí, spíše než dobrý kus kódu napsaný sám pro sebe. Podstatný a významný je soubor funkcí, možná jejich vzájemný přímou komunikaci, ale častěji se to děje jinak. Místo, kde je funkce popsána, a místo, kde je aplikována, nejsou vůbec totéž.

    Není vůbec nutné, aby funkce volala jinou funkci přímo, může to dělat nepřímo prostřednictvím dynamického generování kódu. Návštěvník se v rámci tohoto kódu rozhodne a spustí se zcela jiný systém funkcí.

    Funkční dynamika

    Funkční dynamika nejsou pouze a ne tak obslužné rutiny přiřazené prvkům stránky, jsou to funkce, které tvoří prvky stránky, a přímé ovladače se mohou také měnit.

    Akce na stránce se odvíjí v závislosti na jejích prvcích a chování návštěvníka na ní. Pohyby myši, tlačítka klávesnice, kliknutí, události prvků a další okolnosti vedou ke spuštění potřebných funkcí.

    Zpočátku neexistuje žádná sekvence a není zde žádný paralelismus. Webový zdroj má adekvátní odezvu na události. Jak rychle bude JavaScript vykonávat konkrétní funkci, závisí na mnoha technických (počítač, komunikační linky) a sémantice (logika algoritmu, předmětová oblast, smysl úkolu) faktory.

    Ve skutečnosti lze říci, že něco fungovalo paralelně a něco se splní po něčem, ale v tom není žádný zvláštní význam. Je důležité, aby funkce JavaScriptu poskytovaly schopnost vytvářet adekvátní reakci na akce návštěvníků.

    Toto je nové myšlení ve vývoji: distribuované zpracování informací v útrobách jediného prohlížeče!

    Syntaxe proměnných a funkcí

    Proměnné JavaScriptu jsou umístěny jak ve značce „script“, tak v těle funkce. Funkce jsou definovány stejným způsobem. Není žádný zvláštní smysl psát do funkce další funkci, ale to může být nutné z různých a dobře podložených důvodů.

    Popis funkce v obecný případ začíná klíčovým slovem "funkce", za kterým následuje její název, seznam argumentů v závorkách oddělených čárkami a tělo funkce ve složených závorkách.

    Funkce je programový kód, který je definován jednou a pak může být volán k provedení libovolný počet opakování. v tomto příkladu jsou popsány dvě funkce, které zajišťují výměnu AJAX mezi stránkou a serverem. Proměnná scXHR je popsána výše, proto je dostupná v InitXML i uvnitř WaitReplySC.

    Název funkce a parametr "funkce".

    Bylo zde prezentováno asynchronní možnost když je funkce JavaScript ve funkci volána poté, co server odpověděl. Současně po obdržení odpovědi ze serveru WaitReplySC přistupuje ke značkám stránky, naplňuje je přijatými informacemi a volá další funkce, které mohou iniciovat další požadavek na server.

    Zde je také důležité poznamenat, že WaitReplySC je funkce. Ale v řadě scXHR.onreadystatechange = WaitReplySC je předán jako parametr. Tento obecné pravidlo předávání funkcí jiným funkcím jako parametrů. Určete hranaté závorky a předejte do nich její parametry - funkce se provede okamžitě. Dal mi jen své jméno, ale tak co. Volání funkce provede ten, kdo obdržel její jméno.

    Funkčnost implementovaná prostřednictvím AJAX vám umožňuje volat funkci JavaScript prostřednictvím dat přijatých ze serveru. Ve skutečnosti při odesílání požadavku na server určitá funkce nemusí vůbec „vědět“, ke které funkci přistupuje a s jakými informacemi.

    Ukončení funkce a jeho výsledek

    V těle funkce můžete napsat libovolné operátory jazyka, který je ve skutečnosti k tomuto účelu určen. Proměnné definované uvnitř a vně funkce jsou dostupné v rámci funkce, ale ne ty, které jsou definovány v jiných funkcích.

    Pokud chcete, aby funkce vrátila výsledek, můžete použít příkaz return v JavaScriptu: return. V těle funkce může být dostatečný počet příkazů return. Není vůbec nutné, aby všechny vracely stejný typ výsledku.

    Vývojáři obvykle tuto funkci velmi respektují a v závislosti na situaci se rozhodnou funkci co nejdříve ukončit.

    Není vůbec nutné procházet celý algoritmus funkce, když můžete skončit dříve.

    Funkční argumenty

    Argumenty funkce jsou předávány jako seznam oddělený čárkami, uzavřený v závorkách a umístěný bezprostředně za jejím názvem. Názvy proměnných se používají jako argumenty, ale hodnoty lze také předávat přímo. Chcete-li předat funkci funkci v JavaScriptu, stačí zadat její název bez závorek.

    Uvnitř funkce je k dispozici proměnná arguments, která má vlastnost length. K libovolnému argumentu funkce můžete přistupovat prostřednictvím argumentů, argumentů,... až po poslední argumenty.

    Změna argumentu funkce je platná uvnitř funkce, ale ne mimo ni. Chcete-li změnit něco mimo funkci, musíte použít JavaScriptový operátor vrátit se, kterým projít požadovaná hodnota ven.

    Po dokončení funkce bude vše spojené s jejím provedením zničeno. Během provádění může funkce měnit vnější proměnné, kromě těch, které jsou popsány v jiných funkcích, včetně interních.

    arguments má vlastnost callee, která se používá k volání funkce, což se provádí v momentálněčas. Když zavoláš sám sobě, tak Možnost JavaScriptu funkce ve funkci vám umožní implementovat rekurzi.

    Používání funkcí

    Hlavním zájmem funkcí je obsluhovat události prohlížeče. K tomu je téměř v každém tagu možné zadat název události a funkci, která ji zpracovává. Lze zadat více událostí, ale pro každou událost je určena pouze jedna funkce.

    Jedna funkce může obsluhovat více prvků stránky a více událostí. Pomocí parametru „this“ můžete předat informace funkci, odkud byla volána.

    Klasickým využitím funkcí JS jsou obslužné rutiny událostí na prvcích. V tomto příkladu bude funkce scfWecomeGo() nebo scfWelcomeCancel() volána ve formuláři pro přihlášení/odhlášení návštěvníka a scfMenuItemClick(this) při výběru provozního režimu.

    V druhém případě je předán parametr „toto“, který vám umožní zázračně zjistit, ze kterého divu volání přišlo. Obecně platí, že JavaScript je tak dobře implantován do DOM a umožňuje vám tak pohodlně procházet jeho prvky, shromažďovat potřebné informaceže dynamika stránky může být jednoduše nepředvídatelná.

    Funkce nemusí vracet řetězec znaků, číslo nebo jinou funkci. Dokáže vrátit plnohodnotný HTML element, který bude obsahovat požadovaný počet elementů, s vlastními obslužnými rutinami událostí.

    Umístěním takového prvku na stránku vytváří vývojář novou funkcionalitu, která je dobrá z hlediska řešení problému a uspokojování zájmů návštěvníků, ale poměrně náročná z hlediska implementace.

    Při spuštění plnohodnotného vývoje, jako je tento, je snadné se zmást. vlastní kód, ve volání funkcí, ve chvílích, kdy se tvoří ten či onen obsah té či oné části stránky. Než se vydáte tímto směrem vývoje, neuškodí vše pečlivě zvážit.

    O distribuovaném myšlení

    Vývojář musí myslet na úrovni všech prvků stránky, na úrovni všech událostí a mít jasnou představu o tom, jak se vlastně všechno děje. Je to náročné, ale ta práce za to stojí.

    Funkce je programový kód, který je definován jednou a pak může být volán k provedení libovolný počet opakování. Provádění JavaScriptu funkce mohou být odloženy do nějaké události a takových funkcí může být mnoho a události mají tendenci se šířit a spadat do „rozsahu viditelnosti“ různých handlerů.

    V tomto příkladu byla někde dříve volána funkce, která iniciovala vytvoření položky nabídky navigace v souboru. Předpokládá se organizace stránky, to znamená, že v okně je pouze sedm souborů, které lze smazat a zpracovat. Můžete se pohybovat buď kliknutím na řádek souboru, pomocí šipek na klávesnici, nebo v blocích po sedmi řádcích.

    Každý případ má své vlastní funkce. Jinými slovy, v takové jednoduchý příklad musíte napsat několik desítek funkcí, které budou reagovat na různé události, a některé z těchto funkcí zpracují různé možnosti a situace, které vůbec nejsou událostmi.

    Když například odstraníte řádek, spodní by se měly posunout nahoru. K tomu budete muset buď udělat nový výběr, který je triviální a náročný na zdroje, nebo přepočítat řádky, použít funkce pole v javascriptu a elegantně dosáhnout cíle.

    Funkce Argumenty a výsledky

    JavaScript vám umožňuje uvést váš kód do „plně funkčního“ stavu. Je normální, že argument funkce je funkcí. Volba je povolena, když funkce vrací funkci. JavaScript je v tomto zcela uvolněný.

    Je to dobrý mechanismus, ale poměrně složitý z hlediska implementace. Technicky je přípustné vše, pouze kvalifikovaný vývojář může sémanticky poskytnout logiku pro přenos „funkčnosti“.

    Když je v JavaScriptu funkce uvnitř funkce, všechno jde dobře, ale když funkce generuje funkci a ta generuje jinou, pak je docela obtížné dodržovat logiku. V podstatě nejde o uplatnění kvalifikace, ale o získání bezpečného a správného výsledku.

    Zájem vývojáře je jasný a jednoduchý. Vyskytl se problém, potřebujete řešení, nikoli chybu typu „Chyba JavaScriptu, operace není bezpečná“, prázdná obrazovka nebo zastavení celého enginu prohlížeče.

    Pokud je argumentem funkce, pak vývojář předává proměnnou se speciálními vlastnostmi, to znamená, že to není číslo, ani řetězec, ani objekt. Ale použití takového argumentu může vést ke změně externích proměnných a výsledku funkce, která se provádí. V závislosti na tom, co je přenášeno, budou provedeny adekvátní změny.

    Spuštění vygenerovaného kódu

    Spuštění kódu generovaného během provozu jiného kódu můžete implementovat pomocí „eval“. To se nepočítá skvělé řešení, ale často nemůžete kód komplikovat zbytečnými funkcemi, ale omezit se na banální formaci JavaScriptové řetězce kód a jednoduše jej spusťte.

    V tomto příkladu je vygenerován řádek pro vložení některých informací do aktuálního div. Číslo div a obsah informací se pro různé pozice liší, proto takové řešení v této situaci nezaručuje zajištění situace “ chyba javascriptu operace je nejistá“, ale spolehlivě poskytne požadovaný efekt.

    Nuance paradigmatu JavaScript „funkce ve funkci“.

    Pokud existuje příležitost obejít se bez ozdůbek, je lepší ji využít. Všechny uvedené možnosti jsou dobré. V mnoha případech je to samozřejmě jediné řešení.

    Klasický příklad rekurze: výpočet faktoriálu. Je docela obtížné napsat algoritmus, který jde do smyčky, ale je velmi snadné jít za hranice hodnoty. Faktorial roste příliš rychle.

    Nicméně jak rekurze, tak funkce volající jinou funkci mohou být rozumné zpětné volání- norma věcí.

    Například běžný stůl. V tabulce mohou být další tabulky. Hnízdění nelze omezit. Psát vlastní sadu funkcí pro každý stůl je příliš velký luxus.

    Takových příkladů lze uvést mnoho a všechny to budou skutečné a naléhavé úkoly, vůbec ne z oblasti programování. Proto je problém právě v tom, že vytvořený systém funkcí, respektive jeho odladění a následné spolehlivý provoz se stává problémem nikoli pro JavaScript, ale pro vývojáře.



    
    Nahoru