Funkcie v JS sú podobné ako v céčku.
Nebudeme sa zdržiavať teórioiu a prejdeme hneď k praxi.
Vytvorme si html súbor funkcie.html
Kód:
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/funkcie.js"></script>
<title>Funkcie v JS</title>
</head>
<body>
<h2>Aký to je deň v týždni?</h2>
<a>Zadaj dátum (napr. 1.2.1967): </a>
<input type="text" id="datum" size="5" />
<br><br>
<h2 id="vysledok"></h2>
</body>
</html>
Ďalej súbor style.css
Kód:
p {
font-size: 1.3em;
}
input {
width: 100px;
text-align: center;
}
.modry {
color: blue;
}
Takže funkcie sú ako v céčku, ale predsa sa len niečím líšia.
Funkcia môže môže vyzerať takto:
Kód:
function nazovFunkcie(vstupnyParameter1, vstupnyParameter2, vstupnyParameter3, ...) {
vykonávací kód;
// ak chceme niečo vrátiť
return vysledok;
}
Ako vidíte, v JS sa nepíšu typy premenných, ani vstupné ani výstupný.
Prečo to je tak by ste už mali vedieť z predchádzajúcich lekcií.
Ďalším rozdielom oproti céčku je to, že aj keď je definovaných viac vstupných parametrov, pri použití funkcie ich môžete zadať menej, alebo žiadny. Ak je nejaký zadaný, berie sa v poradí ako vstupný parameter zľava.
Príklad:
Kód:
function pokus(a, b, c) {
var vys1 = a + 2;
var vys2 = b + 7;
var vys3 = c + 3;
console.log(vys1);
console.log(vys2);
console.log(vys3);
}
$(function() {
pokus(5, 6);
});
Výpis:
7
13
NaN // not a number (nie je číslo)
Ak náhodou ešte niekto nepoužíva konzolu (výpis console.log()), stlačte klávesu F12.
Mimochodom toto sa najčastejšie používa na ladenie scriptov v JS. Keď niečo nefunguje, konzola väčšinou vypíše, kde je problém.
Ďalším rozdielom je, že môžeme použiť tzv. anonymnú funkciu. To znamená, že funkciu uložíme do premennej.
Napríklad takto:
Kód:
var pokus = function (a, b, c) {
var vys1 = a + 2;
var vys2 = b + 7;
var vys3 = c + 3;
console.log(vys1);
console.log(vys2);
console.log(vys3);
}
Používa sa a pracuje úplne rovnako ako predchádzajúca.
Aký to má teda zmysel?
Je to na vytváranie tzv. callback-u.
Ide o vloženie parametra (funkcie) do druhej funkcie.
Príklad:
Kód:
function zavolajFunkciu(funkcia, a, b, c) {
console.log("Som funkcia a volám funkciu, ktorá mi prišla do parametru v premennej.");
console.log("Ako parameter jej dám premenné a, b, c, ktoré mi prišli ako 2., 3. a 4. parameter");
funkcia(a, b, c, d);
}
Zavolanie funkcie:
Kód:
zavolajFunkciu(pokus, 5, 6);
Výpis:
7
13
NaN
Fajn.
Teraz si napíšeme nejakú reálnu funkciu, ktorá má aj nejaký význam.
Povedzme, že chceme zistiť aký bol deň v týždni, keď sme sa narodili.
Vytvoríme si funkciu s jediným vstupným parametrom, a to dátum.
Kód:
function vratDenTyzdna(datum) {
return ...;
}
Objekt Date() má na vrátenie dňa v týždni metódu getDay(), ktorá vráti číslo 0 – 6, teda nedeľa až sobota.
Na to aby sa vypisovali názvy dní a nie len čísla, vytvoríme pole.
Kód:
var dni = new Array("Nedeľa", "Pondelok", "Utorok", "Streda", "Štvrtok", "Piatok", "Sobota");
Teraz potrebujeme nastaviť zadaný dátum.
Robí sa to takto:
Kód:
var d = new Date(rok, mesiac, deň, hodín, mimút, sekúnd, millisekúnd);
s tým, že nemusíme zadať všetky atribúty.
Nám bude stačiť len rok, mesiac a deň.
V html máme požiadavku, aby bol dátum zadaný vo formáte napr. 1.2.1955, čiže čísla sú oddelené botkami.
Z lekcie o premenných vieme, že reťazec vieme rozdeliť do poľa metódou split(), tak ju tu použijeme.
Kód:
var d = datum.split("."); // rozdelí na (d[0] => 1, d[1] => 2, d[2] => 1955
Teraz vytvoríme nevý objekt Date() so zadanými hodnotami.
Kód:
var date = new Date(d[2], (d[1] - 1), d[0]); // (d[1] - 1) preto, že mesiace sú od 0
Nakoniec použijeme metódu getDay(), ale tak, aby sme hneď číslo previedli na názov dňa a toto vrátime.
Kód:
return dni[date.getDay()];
Celá funkcia bude teda vyzerať takto:
Kód:
function vratDenTyzdna(datum) {
var dni = new Array("Nedeľa", "Pondelok", "Utorok", "Streda", "Štvrtok", "Piatok", "Sobota");
var d = datum.split(".");
var date = new Date(d[2], (d[1] - 1), d[0]);
return dni[date.getDay()];
}
Hlavnú (spúšťaciu) funkciu napíšeme takto:
Kód:
$(function() {
$("#datum").change(function(){ // pri zmene obsahu políčka (enter, klik)
var dat = $('#datum').val(); // do premennej sa uloží obsah políčka
$('#vysledok').text(vratDenTyzdna(dat)); // do podnadpisu <h2> sa vloží návratová hodnota funkcie vratDenTyzdna()
});
});
Keď otvoríme stránku, zadáme dátum a stlačíme enter, vypíše sa konkrétny deň v týždni na základe zadaného dátumu.
Máme hotovo alebo nie?
Jasne že nemáme!
Užívateľ je tvor nevyspytateľný a preto do políčka zadá čokoľvek, dokonca sa môže pokúsiť zadať aj nejaký kód, aby sa nabúral do našej stránky.
Čo s tým?
Musíme VŽDY ošetriť vstup od užívateľa.
Schválne si vyskúšajte rôzne zadania, teda 32.2.2016, .... Budete vidieť, že aj to vypíše nejaký deň, ale to my nechceme.
Vzhľadom na to, že február má niekedy 28 a inokedy 29 dní, musíme vedieť, koľko dní má zadaný mesiac v danom roku a na to si napíšeme funkciu.
Použijeme metódu getDate() na posledný deň mesiaca zadaného roku.
Kód:
function pocetDniMesiaca(rok, mesiac) {
return new Date(rok, mesiac, 1, -1).getDate(); // prvý deň v mesiaci mínus 1 hodina je posledný deň predchádzajúceho a ten si vrátime .getDate()
}
Celý script funcie.js bude nakoniec vyzerať takto:
Kód:
/** funkcie.js **/
/**
* vráti názov dňa v týždni zo zadaného dátumu
* @param dátum
* @return deň v týždni / Taký dátum neexistuje!
*/
function vratDenTyzdna(datum) {
var dni = new Array("Nedeľa", "Pondelok", "Utorok", "Streda", "Štvrtok", "Piatok", "Sobota");
var d = datum.split("."); // rozdelí teťazec na základe separátora "."
var pocet = pocetDniMesiaca(d[2], d[1]); // vráti počet dní zadaného mesiaca
/**
* podmienka:
* deň v mesiaci musí byť menší alebo rovný počtu dní v mesiaci a zároveň väčší ako nula
* a zároveň mesiac musí byť menší alebo rovný 12 a zároveň väčší ako nula
* a zároveň rok musí mať 4 číslice
*/
if (d[0] <= pocet && d[0] > 0 && d[1] <= 12 && d[1] > 0 && d[2].length == 4) {
var date = new Date(d[2], (d[1] - 1), d[0]);
return dni[date.getDay()];
}
else
return "Taký dátum neexistuje!";
}
/**
* vráti počet dní mesiaca zo zadaného dátumu
* @param rok
* @param mesiac
* @return pocetDní
*/
function pocetDniMesiaca(rok, mesiac) {
return new Date(rok, mesiac, 1, -1).getDate(); // prvý deň v mesiaci mínus 1 hodina je posledný deň predchádzajúceho a ten si vrátime .getDate()
}
/**
* hlavná funkcia - spustí sa až po načítaní stránky
*/
$(function() {
$("#datum").change(function(){ // pri zmene obsahu políčka (enter, klik)
var dat = $('#datum').val(); // do premennej sa uloží obsah políčka
$('#vysledok').text(vratDenTyzdna(dat)); // do podnadpisu <h2> sa vloží návratová hodnota funkcie vratDenTyzdna()
});
});
Tak a máme hotovo.
Teraz môžete skúšať rôzne zadania a už by nemal byť žiadny problém.
Nabudúce si povieme niečo o udalostiach v JS, ale pri použití jQuery.
Prihlásenie
Registrovať
Návody
Hľadať
Zoznam bodov
