Předvánoční slevová akce PHP týden
Další šance dokončit svůj projekt a získat ceny v hodnotě 10.000 Kč! Pokračování úspěšné letní soutěže - ITnetwork winter
Využij předvánočních slev a získej od nás 20 % bodů navíc zdarma! Zároveň také probíhá PHP týden se slevou na e-learning až 80 %

Lekce 7 - Funkce v JavaScriptu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Pole v JavaScriptu, jsme se naučili používat pole. Dnešní JavaScript tutoriál je věnován velmi důležitému tématu, kterým je využívání funkcí. Díky funkcím budeme příště schopni reagovat na různé události jako je např. kliknutí na tlačítko a naprogramujeme tak první opravdovou webovou aplikaci.

Tvorba funkcí

Nejprve si nějak jednoduše vysvětleme, co je to funkce. Jedná se o blok kódu, který jednou napíšeme a potom ho můžeme libovolně volat bez toho, abychom ho psali znovu a opakovali se. Funkci deklarujeme pomocí klíčového slova function a obsahuje blok kódu ve složených závorkách. Funkce, která vypíše do dokumentu "Ahoj, vřele tě tu vítám!", by vypadala následovně:

function pozdrav() {
    document.write("Ahoj, vřele tě tu vítám!");
}

Funkci nyní musíme zavolat. Můžeme to samozřejmě udělat až potom, co ji deklarujeme, jinak by ji prohlížeč neznal:

function pozdrav() {
    document.write("Ahoj, vřele tě tu vítám!");
}

pozdrav(); // zavolání funkce

Výsledek:

Funkce v JavaScriptu
localhost

Funkce s parametry

Funkce může mít také libovolný počet vstupních parametrů, které píšeme do závorky v její definici a podle nich ovlivňujeme její chování. Mějte situaci, kdy chceme pozdravit našeho návštěvníka podle jména. Rozšíříme tedy stávající funkci o parametr jmeno a ten potom přidáme s konkrétní hodnotou do volání funkce:

function pozdrav(jmeno) {
    document.write("Ahoj, vřele tě tu vítám " + jmeno + "!<br />");
}

pozdrav("Karle"); // zavolání funkce

Kdybychom nyní chtěli pozdravit několik lidí, nemusíme otrocky psát znovu a znovu document.write("Ahoj, vřele...");, stačí nám pouze vícekrát zavolat naší funkci:

pozdrav("Karle");
pozdrav("Davide");
pozdrav("Mařenko");
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Výsledek:

Funkce v JavaScriptu
localhost

Návratová hodnota funkce

Funkce může dále vracet nějakou hodnotu. V našem případě bychom nemuseli do dokumentu rovnou zapisovat (například proto, že budeme chtít s textem ještě dále pracovat a ne ho rovnou vypsat). Slouží k tomu příkaz return:

function pozdrav(jmeno) {
    return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

let text = pozdrav("Karle");
document.write(text);

Vzpomeňme si na minulé příklady, které vypisovaly den v týdnu a kdo má svátek. Můžete si je zkusit přepsat tak, abyste volali funkci. V rámci návrhu by všechen kód měl být rozdělen do funkcí (nebo do objektů, viz další navazující kurz) a to zejména kvůli přehlednosti. My jsme to ze začátku díky jednoduchost zanedbali, nyní to prosím berte na vědomí :)

Výhoda funkcí je tedy v přehlednosti a úspornosti (můžeme napsat nějakou věc jednou a volat ji třeba stokrát na různých místech skriptu). Když se rozhodneme funkci změnit, provedeme změnu jen na jednom místě a tato změna se projeví všude, což značně snižuje riziko chyb. V příkladě, kde zdravíme Karla, Davida a Mařenku, nám stačí změnit text pozdravu ve funkci a změní se ve všech třech voláních. Nemít kód ve funkci, museli bychom přepisovat 3 věty a v nějaké bychom mohli udělat chybu.

Uložení funkce do proměnné

Posuňme se dále. JavaScript se liší od jiných jazyků tím, jak pracuje s funkcemi. Funkce zde umí ještě více, než jsme si ukázali. Pokud si vzpomínáme, v úvodní lekci do JavaScriptu jsme mluvili o tzv. funkcionálním paradigmatu. Jedná se o specifický styl programování a myšlení pomocí funkcí. Funkci můžeme totiž uložit do běžné proměnné a z této proměnné ji později volat.

function pozdrav(jmeno) {
    return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

let promenna_s_funkci = pozdrav; // nyní máme v proměnné uloženou funkci pozdrav
let text = promenna_s_funkci("Karle"); // zavoláme funkci z proměnné
document.write(text);

Ve skutečnosti jsou všechny funkce v JavaScriptu vnitřně proměnné.

Anonymní funkce

Funkci můžeme definovat přímo v přiřazení do proměnné, hovoříme potom o tzv. anonymní funkci:

let promenna_s_funkci = function(jmeno) {
    return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

let text = promenna_s_funkci("Karle");
document.write(text);

Možná vás napadlo, zda jde předat funkci, uloženou v proměnné, jako parametr jiné funkci. Ano, jde! A to je přesně to, kam jsme směřovali. Takovéto předané funkci se říká callback a stojí na něm v podstatě celý model událostí JavaScriptu. Vyzkoušíme si to na jednoduchém příkladu:

let promenna_s_funkci = function(jmeno) {
    document.write("Ahoj, vřele tě tu vítám " + jmeno + "!");
}

function zavolej_funkci(funkce, jmeno) {
    document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné.<br />");
    document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr.<br />");
    funkce(jmeno);
}

zavolej_funkci(promenna_s_funkci, "Karle");

Výsledek:

Funkce v JavaScriptu
localhost

Udělali jsme si funkci k volání jiné funkce. Ta jako parametry bere funkci, kterou budeme volat a dále parametr jmeno, který volané funkci předáme. Kdybychom nyní chtěli zdravit jinak, mohli bychom si udělat další proměnnou s jinou funkcí, např. promenna_s_funkci2 a tu dát volací funkci do parametru místo té předchozí. Zejména v knihovně jQuery (viz další kurzy) budeme událostem takto předávat funkce, které se mají vykonat, když událost nastane.

K funkcím bych ještě dodal, že pokud chceme více vstupních parametrů, oddělíme je čárkami. Při volání funkce dokonce můžeme některé parametry vynechat a překladač nám nevynadá, jen uvnitř funkce budou mít potom hodnotu undefined.

function f(a, b) {
    document.write("a=" + a);
    document.write("b=" + b);
}

f(5);
f(1, 2);

Pokud bychom chtěli dosadit nějakou výchozí hodnotu parametru v případě, že není zadán, stačí si opodmínkovat jeho hodnotu pro undefined a dosadit hodnotu výchozí. Jak vidíte, používání funkcí má v JavaScriptu obrovské možnosti. V příští lekci, Základy práce s DOM a události v JavaScriptu, si ukážeme jak pomocí nich řešit události a konečně vytvoříme nějakou interaktivnější aplikaci :)


 

Stáhnout

Staženo 275x (2.58 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
35 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Pole v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Cvičení k 7. lekci JavaScriptu
Aktivity (9)

 

 

Komentáře

Avatar
Michal Kučera:1.12.2015 19:08

Super článek, mám ale jeden dotaz. Používám NetBeans IDE (8.0.2) a když jsem si napsal podle vzoru kód, hlásilo mi to pořád chybu, že na místech kde je v kódu okomentováno zde, chybí napsat středník.

var promena_s_funkci = function(jmeno)
 {
       document.write("Ahoj " + jmeno + ", jsem rád že tě zas vidím.");
 } // ZDE
function zavolani_funkce(funkce, jmeno)
 {
      document.write("Volám funkci! <br>");
      document.write("Používám dva parametry - druhou funkci a jméno. <br>");
      funkce(jmeno);
  } // ZDE
zavolani_funkce(promena_s_funkci, "Karle");

Kdo má pravdu? Vy, nebo Netbeans? Předem děkuji za odpověď.

Odpovědět
1.12.2015 19:08
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Jurajs
Člen
Avatar
Odpovídá na Michal Kučera
Jurajs:1.12.2015 20:21
function zavolani_funkce(jmeno)
{
   document.write("Moje jmeno je: "+ jmeno);
}
zavolani_funkce("Jurajs");

Takhle ne spis? co? :D :D

Editováno 1.12.2015 20:23
 
Odpovědět
1.12.2015 20:21
Avatar
Odpovídá na Jurajs
Michal Kučera:1.12.2015 20:26

Je to podle článku :-D :-D :-D Nejde o ten obsah, ptal jsem se jenom na ty středníky..

Odpovědět
1.12.2015 20:26
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Jurajs
Člen
Avatar
Odpovídá na Michal Kučera
Jurajs:1.12.2015 20:29

Ja kdyz jsem si ten kod prekopiroval z clanku ke me tak zadna chyba :D

 
Odpovědět
1.12.2015 20:29
Avatar
Petr Stastny
Redaktor
Avatar
Petr Stastny:10.12.2015 16:36

Ahoj, potřebuju pomoct :-)

Teď dělám takový projekt, jehož součástí je asi 10 webových stránek :-)

Potřebuju udělat, že dejme tomu stránka A vytvoří soubor cookie a stránka B ho načte. Jde to vůbec udělat?

A jestli ne, je nějaká jiná možnost, jak udělat více stránek, které by spolu sdílely data, jako např. ty cookies? (třeba na 1. uživatel napíše své jméno a ostatní stránky ho pod tím jménem budou zdravit...)

A jestli ne, jak udělám třeba to, jak:
itnetwork.cz je zákl stránka
itnetwork.cz/ja­vascript/zakla­dy/tutorial-javascript-funkce má úplně jiný obsah než ta 1., ale cookies využívají všechny jedny, ne?

Ukázka vytvoření souboru cookie

<script>
function souhlas(){
    var cookie = document.cookie

    if (confirm("Stisknutím tlačítka OK  potvrzuješ, že souhlasíš, aby tento web ukládal soubory COOKIE do tvého počítače. Stisknutím tlačítka COOKIES (dole na stránce) se ti zobrazí informace o COOKIES.") == true) {
       document.cookie="cookiesouhlas=yes; expires=Thu, 1 Dec 2020 12:00:00 UTC";
    }
}
</script>

Ukázka kódu, který potřebuje načíst soubory cookie z 1. stránky

...
    <p><strong>Zde jsou zapsány všechny soubory cookies, které jsme do vašeho počítače uložili.</strong></p>
    <script>
       var x = document.cookie;
       document.write(x);

    </script
Editováno 10.12.2015 16:37
 
Odpovědět
10.12.2015 16:36
Avatar
Tomáš Brůna
Redaktor
Avatar
Odpovídá na Petr Stastny
Tomáš Brůna:10.12.2015 16:44

Myslím že tohle obstarává php

Odpovědět
10.12.2015 16:44
Vi veri universum vivus vici
Avatar
Petr Stastny
Redaktor
Avatar
 
Odpovědět
10.12.2015 17:53
Avatar
Petr Stastny
Redaktor
Avatar
Petr Stastny:13.12.2015 14:59

Ahoj, mám problém.

Napsal jsem funkci do externího souboru

function Boj(Sance,Zceho,tt,tf)/*Např. 1,10==1:10  tt = co udelas, kdyz prezijes  tf = co udelas, kdyz umres */
    {
           var Random = Math.floor(Math.random() * (Zceho - 1 + 1)) + 1;

    if(Random<=Sance){
       tt

     }else{
       tf

       }
  }

a volám ji pomocí tlačítka

<button type="button" onclick="function boj(1,2,location.href='a5.html',location.href='hrob.html')">Bojovat s ghúlem mečem</button>

Když si stránku načtu a na tlačítko kliknu, nic se nestane. Kde mám chybu?

 
Odpovědět
13.12.2015 14:59
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Petr Stastny
Taskkill:13.12.2015 15:29

Nepis tam onclick="function boj(params)"

ma tam byt jen onclick="boj(pa­rams);"

 
Odpovědět
13.12.2015 15:29
Avatar
Petr Stastny
Redaktor
Avatar
Petr Stastny:18.12.2015 15:05

A ještě něco :-)

Mám tady funkci, která by měla náhodně vytvořit hádanku a předložit ji uživateli, ten napíše odpověď a podle odpovědi ho to přesměruje.

Nefunguje to, vždy se zobrazí jedna, kterou vybralo náhodné číslo a poté se objeví všechny ostatní.

function Hadanka(t,f)
    {
      var Random = Math.floor(Math.random() * 7) + 1      // 8 HADANEK

      switch (Random){
        case 1:
            var odpoved = prompt("Nemá plíce, přece dýcha, studená a věčně tichá, věčne pije na své zdraví, v brnění, co nerezaví");
              switch (odpoved) {
                case "ryba":
                case "RYBA":
                case "Ryba":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

              }
        break;
        case 2:
            var odpoved = prompt("Oko v tváři blankytné se točí, v tváři zelené zas jiné oči. První oko na to vece, tyhle podobné mi jsou přece. Jenže jsou to oči nižší, než já oko v této výši.", "Odpoveď 1 Odpoveď 2");
              switch (odpoved) {
                case "slunce pampelisky":
                case "Slunce pampelisky":
                case "SLUNCE PAMPELISKY":
                case "slunce pampelišky":
                case "Slunce pampelišky":
                case "SLUNCE PAMPELIŠKY":
                case "slunce Pampelisky":
                case "slunce Pampelišky":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
        case 3:
            var odpoved = prompt("Vše žere, všechno se v něm ztrácí, květy, stromy, zvířata i ptáci. Hryže kov, i pláty z ocele, tvrdý kámen na prach semele. Města rozvalí a krále skolí, vysokánské hory svrhne do údolí.");
              switch (odpoved) {
                case "čas":
                case "ČAS":
                case "Čas":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
          case 4:
            var odpoved = prompt("Kořeny má skryté v zemi, vypíná se na jedlemi. Stoupá pořád výš a výš, ale růst ji nevidíš.");
              switch (odpoved) {
                case "Hora":
                case "hora":
                case "HORA":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
          case 5:
            var odpoved = prompt("Bez klíče a víka schránka pokladní, a přece je zlatý poklad v ní.");
              switch (odpoved) {
                case "vajíčko":
                case "VAJIČKO":
                case "Vajíčko":
                case "vajíško":
                case "Vajíško":
                case "VAJÍŠKO":
                case "vajicko":
                case "Vajicko":
                case "VAJICKO":
                case "vajisko":
                case "Vajisko":
                case "VAJISKO":
                case "vejce":
                case "Vejce":
                case "VEJCE":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
        case 6:
            var odpoved = prompt("Třicet běloušů na růdé líše, napřed žvýkají, potom dupají a pak stojí tiše");
              switch (odpoved) {
                case "zuby":
                case "Zuby":
                case "ZUBY":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
        case 7:
            var odpoved = prompt("Není ji vidět, nejde ji cítit, nejde ji slyšet, nejde ji chytit. Je za horami a pod horami a vyplňuje prázdné jámy. Byla tu předtím a přijde pak a nakonec ti vytře zrak.");
              switch (odpoved) {
                case "tma":
                case "Tma":
                case "TMA":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
        case 8:
            var odpoved = prompt("Obalenou kůžičkou bílou jako mléko, skryto v mramoru, leží mé zlato žluté jablko. Nevede ke mě cesta, ale někdo přesto může ukrást mé zlato.");
              switch (odpoved) {
                case "vajíčko":
                case "VAJIČKO":
                case "Vajíčko":
                case "vajíško":
                case "Vajíško":
                case "VAJÍŠKO":
                case "vajicko":
                case "Vajicko":
                case "VAJICKO":
                case "vajisko":
                case "Vajisko":
                case "VAJISKO":
                case "vejce":
                case "Vejce":
                case "VEJCE":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
        case 9:
            var odpoved = prompt("Nemá plíce, přece dýcha, studená a věčně tichá, věčne pije na své zdraví, v brnění, co nerezaví");
              switch (odpoved) {
                case "ryba":
                case "RYBA":
                case "Ryba":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);

                }
          case 10:
            var odpoved = prompt("Nemá plíce, přece dýcha, studená a věčně tichá, věčne pije na své zdraví, v brnění, co nerezaví");
              switch (odpoved) {
                case "ryba":
                case "RYBA":
                case "Ryba":
                  window.location.replace(t);
                break;
                default:
                  window.location.replace(f);


              }






        }




    }

Volání funkce:

<button type="button" onclick="Hadanka('a5.html','bojSFINGA.html')">Hádat</button>
 
Odpovědět
18.12.2015 15:05
Avatar
Cyborg
Člen
Avatar
Odpovídá na Petr Stastny
Cyborg:27.2.2016 21:58

Zdravím :)
Hned na úvod musím říct, že tvůj způsob vyřešení programu za pomocí přepínače (switche) je velice špatná cesta, která směřuje rovnou do pekel :D. Osobně si myslím, že by to ani za pomocí přepínače udělat nešlo, neboť tohle už je trochu složitější program a je potřeba využít více než přepínač. Pokud o to máš pořád zájem, přikládám zde mé řešení :)

http://www.itnetwork.cz/dev-lighter/680

PS: Hádanka se změní jen při opětovném načtení. To je věc, která by chtěla vylepšit, ale jinak by to mělo fungovat :)

Editováno 27.2.2016 21:59
 
Odpovědět
27.2.2016 21:58
Avatar
Pluhtík
Člen
Avatar
Pluhtík:15.7.2016 0:48

Zdravím :) opět já, tak jako každou lekci poslední hodiny. A překvapivě mám další "pitomý" dotaz :D

Trošku jsem si mám problémy s callbackem, tedy s jeho pochopením. Nejdříve jsem měl tohle (většinou okopírované z webu).

var promena_s_funkci = function gutentag(dername)
{
  document.write("Vítám Tě na svém JavaScript webu, " + dername +"! <br />");
}

function zavolej_funkci(funkce, dername)
{
document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné. <br />");
document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr. <br />");
funkce(dername);
}
zavolej_funkci(promena_s_funkci, "Pluhtíku");

Nechápal jsem ale, k čemu slouží řádek funkce(dername);. Jelikož už dvakrát jsem napsal dotaz a během patnácti minut přemýšlení jsem sám přišel na odpověď, tak jsem nad tím zkoušel přemýšlet a zkoušet to jinak. Potom mě napadlo, že vlastně na posledním řádku by promena_s_funkci a následné "Pluhtíku" mělo být v závorce, a že možná ten řádek funkce(dername); to nějakým způsobem zajišťuje, aby to tak být nemuselo. Tak jsem to zkusil odstranit a udělat s tou závorkou (viz níže).

var promena_s_funkci = function gutentag(dername)
{
  document.write("Vítám Tě na svém JavaScript webu, " + dername +"! <br />");
}

function zavolej_funkci(funkce, dername)
{
document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné. <br />");
document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr. <br />");

}
zavolej_funkci(promena_s_funkci("Pluhtíku"));

To mi sice fungovalo, ovšem slova "Vítám Tě na svém JavaScript webu, Pluhtíku!" se dala úplně na začátek ještě před

document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné. <br />");
document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr. <br />");

Může mi tedy někdo vysvětlit, k čemu tedy řádek funkce(dername); slouží a co přesně dělá? Díky moc :)

 
Odpovědět
15.7.2016 0:48
Avatar
Odpovídá na Pluhtík
Libor Šimo (libcosenior):15.7.2016 6:04

Mam dojem, ze necitas lekcie poriadne, ale len skusas kod.
Precitaj si lekciu aj viac krat, su tam odpovede na tvoje otazky.

Odpovědět
15.7.2016 6:04
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
00
Člen
Avatar
Odpovídá na Pluhtík
00:15.7.2016 7:34

Ten 1. tvůj kód ukládá funkci gutentag do proměnné a volá ji, 2. bez smazaneho funkce(dername); ji zavolá a snaží se zavolat její návratovou hodnotu. A bez něj? Nesmyslně a zbytečně předává návratovou hodnotu jako parametr.

 
Odpovědět
15.7.2016 7:34
Avatar
Odpovídá na Pluhtík
Libor Šimo (libcosenior):15.7.2016 8:05

Pokúsim sa ti to vysvetliť prakticky.
Čo je to funkcia v JS je napísané v prvom odseku článku.
Funkciu v normálnom živote má napríklad elektrická rúra na pečenie.
Nazveme ju pecenie.

// JavaScript
var pecenie = function() {
    document.write("Pečiem...");
}

(volanie funkcie je popísané v lekcii)
Každý, ktomá doma elektrickú rúru na pečenie môže použiť funkciu pecenie().
Lenže to nie je všetko.

  • čo idem piecť?
  • na akej teplote?
  • aký dlhý čas?
  • len zhora?
  • len zdola?
  • zhora aj zdola?
  • teplovzduchom?

To všetko sú meniteľné premenné pečenia.
Upravme si funkciu.
(pridal som aj popis funkcie, kde @param je vstupný parameter a @return výstupný parameter funkcie)

/**
 * Funkcia demonštruje pečenie v elektrickej rúre
 * @param produkt (čo pečieme)
 * @param teplota (teplota pečenia)
 * @param trvanie (čas pečenia)
 * @param sposob (zhora, zdola, zhora aj zdola, teplovzduchom)
 * @return výpis činnosti pečenia
 */
var pecenie = function(produkt, teplota, trvanie, sposob) {
    document.write("Pečiem " + produkt + " na " + teplota + "°C " + trvanie + " minút " + sposob + ".");
}

Zavoláme funkciu

document.write(pecenie("bábovku", 200, 45, "teplovzduchom"));

Výsledok
Pečiem bábovku na 200°C 45 minút teplovzduchom.

Dúfam, že si to pochopil.

Odpovědět
15.7.2016 8:05
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):15.7.2016 8:09

Malá oprava, v popise mám @return a vo funkcii nie.

var pecenie = function(produkt, teplota, trvanie, sposob) {
    return "Pečiem " + produkt + " na " + teplota + "°C " + trvanie + " minút " + sposob + ".";
}

Volanie

document.write(pecenie("bábovku", 200, 45, "teplovzduchom"));
Odpovědět
15.7.2016 8:09
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Pluhtík
Člen
Avatar
Pluhtík:15.7.2016 11:59

Chápu všechno, co jsi napsal. Přesto pořád nevím, k čemu slouží ten řádek v mém kódu.

funkce(dername);

Jediné, co mě napadá je, že nějakým způsobem v podstatě přemisťuje parametr dername, který je obsažen v obou mých funkcích, do té druhé, aby se jméno nemuselo psát ještě do dalších kulatých závorek.
Druhý tip je, že funkce vypíšu funkci (tím myslím parametr nazvaný "funkce"), ke kterému přiřadíme jen jméno.

 
Odpovědět
15.7.2016 11:59
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Pluhtík
Taskkill:15.7.2016 13:14

Víš o tom, že v JS je možný vzít funkci a poslat jí do jiné funkce jako parametr?

Považ něco jako:

function pozdrav(jmenoCloveka) {
        alert("nazdar " + jmenoCloveka);
}

function sezerFunkciAZavolejJi(funkceNaZavolani, dataNaPoslani) {
        funkceNaZavolani(dataNaPoslani);
}

// a ted se to cele spusti
sezerFunkciAZavolejJi(pozdrav, "Karle!");

O co jde? Pošleš funkci pozdrav nějaké jiné funkci, ta jí obdrží a obdrží také data, no a pak už jen připojením kulatých závorek onu funkci zavoláš. Tohle je velká síla JS, stojí to za to pořádně probádat a porozumět tomu.

Kdyžtak se ptej.

 
Odpovědět
15.7.2016 13:14
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Taskkill
Pluhtík:15.7.2016 13:39

Děkuji :) nevěděl jsem to, ale je to logické, takže nemůžu říct, že by mě to překvapilo. Ze všech odpovědí mi ta tvá zatím pomohla nejvíce.
Takže

funkceNaZavolani(dataNaPoslani);

znamená, že funkceNaZavolani, tedy funkce, kterou si "zavoláš", obsahuje parametr dataNaPoslani. V tomto případě funkce pozdrav obsahuje parametr jmenoCloveka, které, abys nemusel vypisovat v následném spuštění (viz níže) dvakrát, v podstatě přeměníš na dataNaPoslani. Kdyby tam ten řádek (viz výše nebyl), tak poslední řádek by musel být takto:

sezerFunkciAZavolejJi(pozdrav("Karle!"), "Karle!");

Mám pravdu?

Odpověď na mou otázku, proč je nezbytné mít napsané v kódu také

funkce(dername);

je ta, že kdybych to neměl, tak by celá má funkce musela vypadat takto?

var promena_s_funkci = function gutentag(dername)
{
  document.write("Vítám Tě na svém JavaScript webu, " + dername +"! <br />");
}

function zavolej_funkci(funkce, dername)
{
document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné. <br />");
document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr. <br />");
}
zavolej_funkci(promena_s_funkci("Pluhtíku!"), "Pluhtíku");

edit. vyzkošoušeno, funkce, kterou jsem napsal úplně dole tady funguje, ovšem s tím rozdílem, že výsledek je tento:
Vítám Tě na svém JavaScript webu, Pluhtíku!!
Jsem funkce a volám funkci, která mi přišla do parametru v proměnné.
Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr.
Tzn., že to, co měl být poslední řádek je první.

Editováno 15.7.2016 13:41
 
Odpovědět
15.7.2016 13:39
Avatar
Odpovídá na Pluhtík
Libor Šimo (libcosenior):16.7.2016 8:20

S tym rozdielom, ze druhy vstupny parameter je zbytocny ako vo funkcii zavolej_funkci(), tak aj pri volani tej funkcie. Ziadna cast kodu ho nepouziva.

Odpovědět
16.7.2016 8:20
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Jirka
Člen
Avatar
Jirka:10.11.2016 15:30

Jak udělám podmínku, když není zadána "undefined"?

if (b == undefined)
       {
               document.write("1");
       }

toto mi bohužel nefunguje.

Díky

J

 
Odpovědět
10.11.2016 15:30
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jirka
Jurajs:12.11.2016 18:34

takhle? Nevim jak to myslíš

var b;
if (b == undefined)
       {
               document.write(b);
       }
Editováno 12.11.2016 18:36
 
Odpovědět
12.11.2016 18:34
Avatar
Jirka
Člen
Avatar
Odpovídá na Jurajs
Jirka:14.11.2016 9:59

spíš se mi jednalo o ten případ ve cvičení:

function f(a, b)
{
        document.write("a=" + a);
        document.write("b=" + b);
}

f(5);
f(1, 2);

a jak udělat podmínku, když b není definováno, aby byl defaultně nastaveno např číslo "1"?

Děkuji

J

 
Odpovědět
14.11.2016 9:59
Avatar
Odpovídá na Jirka
Libor Šimo (libcosenior):14.11.2016 13:20

Presne ako písal Jurajs

function f(a, b) {
    if (b == undefined)
       b = 1;
    document.write("a=" + a + "<br>");
    document.write("b=" + b + "<br>");
}
Odpovědět
14.11.2016 13:20
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Matej
Člen
Avatar
Odpovídá na Jirka
Matej:14.11.2016 14:44

Od ES6 js podporuje defaultne argumenty e.g

function f(a, b = 1 ) {
    document.write("a=" + a + "<br>");
    document.write("b=" + b + "<br>");
}
f(5)
 
Odpovědět
14.11.2016 14:44
Avatar
Jirka
Člen
Avatar
Jirka:15.11.2016 9:51

Děkuji za vyčerpávající odpovědi :) Jako rád bych někdo js ovládal, avšak čím dále se dostávám (momentálně lekce 10), tím více mne to utvrzuje v tom, že na to nemám :) Každopádně ještě jednou díky :)

 
Odpovědět
15.11.2016 9:51
Avatar
Kejmou
Člen
Avatar
Kejmou:26.4.2017 19:39

Ahoj,

zeptám se uplně blbě, ale..

       var promena_s_funkci = function(jmeno){
               document.write("Ahoj, jsem druhá funkce."+jmeno);
       }

       var pocet = function(pocet){
           document.write("1+3");
       }

       function zavolej_funkci(funkce,jmeno){
                  document.write("Jsem funkce a volám funkci, která mi přišla do parametru");
                  document.write("Jako parametr jí dám jméno, které mi přišlo jako druhý parametr");
                  funkce(jmeno);

}
       zavolej_funkci(promena_s_funkci,"karle");

Jak vím, že promena_s_funkci = funkce(jmeno).

To si mohlu v parametru tu funkci uplně pojmenovat nově?

DÍky za vysvětlení

Editováno 26.4.2017 19:42
 
Odpovědět
26.4.2017 19:39
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kejmou
David Čápka:26.4.2017 19:44

Ne, jmeno je vstupní parametr té funkce. A ten si můžeš pojmenovat jak chceš. Když si funkci uložíš do proměnné, tak se nijak nejmenuje, přistupuješ k ní pomocí názvu té proměnné.

Odpovědět
26.4.2017 19:44
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Kejmou
Člen
Avatar
Odpovídá na David Čápka
Kejmou:26.4.2017 20:02

Jasně to chápu. Asi jsem se špatně vyjádřil.
Myslím to tak, že bych chápal, kdybych volal funkci promena_s_fun­kci(jmeno), že se mi vypíše text + moje jméno, které zadám jako parametr.
Ale, abych se vyjádřil k problému, co nechápu. Nechápu proč mohu volat funkci promena_s_fun­kci(jmeno) takto.

funkce(jmeno);

Nebo se vše odvíjí od parametru?

Děkuju za odpověd

 
Odpovědět
26.4.2017 20:02
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kejmou
David Čápka:26.4.2017 20:12

To nemůžeš, v článku to jde jen proto, že funkce je vstupní parametr jiné funkce a je do něj předána funkce. Jinak řečeno, funkce je proměnná obsahující funkci a proto s ní tak můžeme pracovat.

Editováno 26.4.2017 20:13
Odpovědět
26.4.2017 20:12
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Kejmou
Člen
Avatar
Odpovídá na David Čápka
Kejmou:26.4.2017 20:18

Díky za vysvětlení.

 
Odpovědět
26.4.2017 20:18
Avatar
Jan Jedlička:26. května 22:28

ahoj mam dotaz. Zkousel jsem dnesni lekci s fukci, ktera obsahuje promennou jine funkce. ulozil jsem soubor jako volam_funkci.js a do index.html jsem pridal v hlavicce cestu k souboru. Kdyz v casti <body><script> vlozim volani funkce s parametry, vse se mi vypise na webu spravne. Pokud dale ve scriptu stranky pisi jinou funkci(posledni cast vyuky zde na strance) tak se mi nevypise ten predchozi ukol. musim v html nejak jinak napsat dalsi funkce, aby se vse ukazalo?

<!DOCTYPE html>
    <head>
      <meta charset="utf-8" />
      <title>cvičení v JavaScriptu</title>
      <script src="callback_funkce.js"></script>
   </head>

<body>


<script>


zavolej_funkci(promenna_s_funkci, "Karle");
document.write("<br>");

function f(a, b) {
        document.write("a=" + a + "<br>");
        document.write("b=" + b + "<br>");
};

f(5);
f(1, 2);
</script>


</body>
</html>

v callback_funkce.js je toto:

let prvni_funkce = function(vlastnost) {
    document.write("Jsem vysavač a sloužím k " + vlastnost + ".");
}


function druha_funkce(funkce, hodnota) {
    funkce(hodnota);
}
 
Odpovědět
26. května 22:28
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jan Jedlička
Jurajs:27. května 15:54

Cau, kde mas vytvořenou funkci - >zavolej_funkci() ??
Koukni na tu lekci pořádně ;) .....

Editováno 27. května 15:55
 
Odpovědět
27. května 15:54
Avatar
Odpovídá na Jurajs
Jan Jedlička:27. května 16:07

ahoj dikes, ted to vidim. ja si zkousel nekolik prikladu a moc jsem to asi prekombinoval.ted to vse funguje jak ma. hold blbe jsem koukal. diky

 
Odpovědět
27. května 16:07
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jan Jedlička
Jurajs:27. května 19:44

Super, to jsem rád...to se stává, že to někdy člověk překombinuje ;)

 
Odpovědět
27. května 19:44
Avatar
Odpovídá na Jurajs
Jan Jedlička:27. května 19:46

Jsem tam mel jinou funkci a zapomnel to zmenit

 
Odpovědět
27. května 19:46
Avatar
Tadeáš Burda :28. května 23:12

Je možnosť u funkcie napevno určiť aký parameter požadujem? Sem zvyknutý na C# a dosť mi vadí, že bez dobrého popisu, alebo toho že sa podívam na kód funkcie neviem čo tam ma byt :/ VS mi ani nevyhadzuje menu z funkciami, lebo neviem čo tam ma byť...Toto dynamické typovanie sa mi moc nepáči :-`

Odpovědět
28. května 23:12
Nerozmýšlaj, ako ušetriť peniaze. Rozmýšlaj, ako ich zarobiť viac!
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Tadeáš Burda
Jindřich Máca:29. května 11:39

Ahoj, v čistém JS ne. Tady se dají brát parametry funkcí dokonce jako čistě návodné, protože jak i ukazuje poslední příklad v článku, můžeš funkci deklarovanou se dvěma parametry volat jenom s jedním nebo klidně se třemi. Kromě toho, že to asi nebude dělat to co má, tak to není chyba. :D

Takže pokud chceš striktnější kontroly a nějaké ty typy, tak se musíš poohlédnout po nějaké "nadstavbě" JS jakou je např. TypeScript. ;)

 
Odpovědět
29. května 11:39
Avatar
Odpovídá na Jindřich Máca
Tadeáš Burda :29. května 17:23

Dik.. Až dokončím tutoriál, určite sa nato pozriem.

Odpovědět
29. května 17:23
Nerozmýšlaj, ako ušetriť peniaze. Rozmýšlaj, ako ich zarobiť viac!
Avatar
Jan Tesař
Člen
Avatar
Jan Tesař:19. července 8:53

Ahoj, lze udělat callback funkce s dvěma parametry? Mě to nefunguje.:
let promenna_s_funkci = function(jmeno,prij­meni) {
document.write("A­hoj, vřele tě tu vítám " + jmeno + prijmení + "!");
}

let zavolej_funkci = function (funkce, jmeno, prijmeni) {

document.write("Ja­ko parametr jí dám jmeno, které mi přišlo jako 2. a 3 parametr.
");
funkce(jmeno,prij­meni);
}

zavolej_funkci(pro­menna_s_funkci, "Karle", "Nováku");
diky za odpověď

 
Odpovědět
19. července 8:53
Avatar
Odpovídá na Jan Tesař
Reaktivní uživatel:19. července 11:05

Řekl bych že problém bude v tom í na řádku

document.write("Ahoj, vřele tě tu vítám " + jmeno + prijmení + "!");
Odpovědět
19. července 11:05
Kdo je připraven, toho zaskočí něco jiného
Avatar
Jan Tesař
Člen
Avatar
Odpovídá na Reaktivní uživatel
Jan Tesař:19. července 13:08

no jasně, díky, :-)

 
Odpovědět
19. července 13:08
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 42 zpráv z 42.