Konzole
Nejjednodušší, nejrychlejší způsob, jak si vyzkoušet Javascript (JS) je použít JS konzoli prohlížeče. Zapneme ji při otevřeném okně prohlížeče klávesou F12. Používá se pro testovací účely.
Jestli funguje, můžeme otestovat zadáním matematického výrazu, např: 1 + 2 + 3, vyzkoušejte i jiné výrazy:
3 + 4 * 5
(3 + 4) * 5
25 - 7 - 10
25 - (7 - 10)
132 / 11
1 / 2 (čárka, nebo tečka?)
17 - 42, ...
Co se stane, když se spleteme a zadáme chybný výraz, např. 19 - (3 4), nebo 22 + 7 * a nebo 10 / (6 - 2 * 3) ?
Můžeme zadat i text, jen je třeba použít uvozovky, nebo apostrof: "Ahoj", 'Ahoj', vyzkoušejte i variantu bez uvozovek.
Jak zapíšeme větu: Nadšeně křičeli: "Gól!" ?
Máme-li větu "Fotbal se hraje 2 * 45 min." Vyzkoušejte, jestli se minuty automaticky vynásobí?
Jak se vypíše "Petr" + "Pavel" ?
Napište fotbalovou větu tak, aby v ní byl celkový počet minut (90).
Proměnné
Hodnoty často označujeme písmeny, např. strana čtverce a = 25 cm, výška válce v = 100 cm, x = 0.
Co se stane, když do konzole napíšete a = 25 ? Nic, proč?
V paměti počítače se vytvořilo místo - proměnná s názvem "a", do kterého se uložila číslice 25. Proměnná se automaticky nezobrazí, musíme ji "zavolat".
Většinou je potřeba toto vytvoření proměnné - deklaraci proměnné uvést nějakým příkazem - klíčovým slovem. V JS se používá var, nově let, nebo const.
Příklad: let a = 25; všimněte si, že za výrazem následuje středník.
Deklaraci ( let jmeno; ) můžeme oddělit od přiřazení hodnoty ( jmeno = Pavel; ).
Pozor: JS rozlišuje v názvech malá a velká písmena. Názvy se píší na začátku s malým písmenem.
Jak zobrazit obsah proměnné?
Zůstaneme-li u konzole a budeme chtít obsah proměnné "a" vypsat do ní, použijeme příkaz console.log(a).
Do závorky lze místo názvu proměnné napsat jakýkoli text, číslici, nebo výraz.
Vyzkoušejte matematický výraz 100 * 100 ( console.log(100 * 100); ), zobrazí se výsledek, nebo zápis?
Jak zobrazíme zápis?
Když změníme hodnotu proměnné, přepočítá se automaticky výsledek?
a = 100;
vypocet = a * a;
console.log(vypocet);
a = 1;
console.log(vypocet);
Co musíme udělat, aby se výsledek přepočítal?
První program
Teď vyzkoušejte něco z reálného života. Napište program na výpočet ceny zmrzliny. Používejte proměnné - chceme, aby byl program použitelný i když se změní cena a počet dětí.
Zadání: kopeček zmrzliny stojí 23 Kč, dětí je 6, každé dítě dostane dva kopečky.
Jak změníte program, když budou chtít tři děti dva kopečky, dvě děti jeden kopeček a jedno dítě tři kopečky?
Ukázka možného výsledku
Pole
Do klasické proměnné lze uložit jen jednu hodnotu. Pro uložení více hodnot použijeme pole.
Zápis je stejný, jen se hodnoty uzavřou hranatými závorkami [ ]:
const barvy = ["červená", "modrá", "zelená"];
console.log(barvy);
Uložení a výpis jednotlivých prvků pole
Pro výpis a uložení prvků v poli se používají indexy (číselné označení pořadí prvku). Indexy se počítají od nuly.
console.log(barvy[1]); zobrazí druhý prvek v poli (modrá), první prvek by byl [0].
barvy[3] = "žlutá"; přidá čtvrtý prvek do pole
Objekt
Kdybychom chtěli navíc ještě hodnoty v poli pojmenovat, použijeme objekt.
Pro objekt se používají složené závorky { }.
const adresa = {jmeno: "Pepa Zdepa", ulice = "Trolejní", mesto = "Postoloprty" };
Uložení i výpis je možné dělat dvěma způsoby:
adresa[cisloDomu] = 25; console.log(adresa["cisloDomu"]);
adresa.cisloDomu = 25; console.log(adresa.cisloDomu);
Pro objekt se používá druhý "tečkový" zápis. První je spíše jen pojmenování indexu pole.
Podmínky
Mnoho internetových služeb je omezeno věkem. Např. Google účet si můžete zřídit až od 15 let.
Zkusíme napsat program, do kterého zadáme rok narození a počítač rozhodne, jestli máme právo si vytvořit účet (bylo nám 15 let).
Postup:
1) Vytvoříme vstupní a výstupní proměnné:
Chceme-li, aby nám počítač automaticky vypsal aktuální rok (a byl tak stále funkční, i další roky) napíšeme tento kód:
var datum = new Date();
var rok = datum.getFullYear();
2) vypočítáme, kolik je nám let - to už umíme
3) rozhodneme, jestli nám už bylo 15:
Použijeme příkaz (klíčové slovo) if.
Zápis: if (podmínka) {pokud, je podmínka splněna, udělej toto ... }
Příklad:
if (vek > 17) {text = "Vítej mezi plnoletými"} splnění podmínky způsobilo, že se do proměnné text vepíše daná věta
Následně si necháme vypsat proměnnou "text"
Zde najděte a následně vyzkoušejte:
- jak by se stejný příklad zapsal: věk je roven nebo větší 18
- jaký by byl zápis, kdybychom chtěli zjistit pomocí podmínky, jestli proměnná rok (viz výše) obsahuje opravdu rok 2021, tedy: if (rok = 2021) (znak "=" použít nemůžeme, používá se pro přiřazení hodnoty do proměnné)
- co se stane, když místo "rovná se" (viz předešlý příklad) napíšeme "nerovná se" (jak se to píše?)
4) Když podmínka není splněna:
Dále musíme vyřešit, co se má stát (a jak), když podmínka splněna nebude
V tom případě pokračujeme tímto příkazem:
Zápis: else {udělej ...}
Příklad: else {text = "Nemáš potřebný věk"}
Můžeme také pokračovat další podmínkou:
else if {udělej ... }
Využijte opakované podmínky k tomu, abyste napsali program, který vás pozdraví podle toho, jaká je část dne (dopoledne do 12, odpoledne do 18 a večer)
Tento kód generuje aktuální hodinu:
var datum = new Date();
var hod = datum.getHours();
Uživatelské vstupy a výstupy
Výpis proměnné z JS na webovou stránku:
Abychom mohli obsah proměnné zobrazit na webové stránce, musíme ho vepsat do nějakého HTML elementu.
Nejjednodušší způsob je, připravit si v HTML prázdný odstavec a pojmenovat ho pomocí id:
<p id="nazev_id"></p>
Následně element odstavce v JS načteme pomocí příkazu:
document.getElementById("nazev_id"). "document" v příkazu představuje naši webovou stránku
Přidáme ještě příkaz, který říká: "vypiš to do načteného elementu":
innerHTML
Celý zápis potom vypadá takto:
document.getElementById("nazev_id").innerHTML = vystup; "vystup" je název proměnné, kterou chceme zobrazit
Načtení hodnoty ze vstupního pole:
Postup je stejný, jen místo innerHTML použijeme value.
Navíc hodnotu nepředáváme, ale získáváme - musíme ji uložit do naší proměnné (vstup).
Zápis:
vstup = document.getElementById("nazev_id").value;
Jako vstupní element můžeme použít např. textové pole: <input type="text" id="nazev_id">
Program se ale spustí ihned po načtení stránky, když v poli ještě není zadán žádný text. Proto si pomůžeme tak, že si do elementu hodnotu předepíšeme pomocí HTML atributu value.
<input type="text" id="nazev_id" value="Vstupní text">
Výstražná zpráva
Někdy chceme uživatele důrazně upozornit, informovat. Použijeme k tomu výstražné okno:
alert("Ahoj!");
Funkce, podprogramy
Pokud chceme např. něco sečíst, nemusíme psát stále dokola celý program: a = 5, b = 3, x = a + b.
Kód si můžeme uložit a potom jej jen zavolat. Použijeme k tomu klíčové slovo function.
Zápis:
function název() {tělo funkce} název = název funkce, tělo = co se má provést
Příklad:
function pozdrav() {alert("Ahoj");}
Funkci potom jen zavoláme jejím jménem (nezapomeneme na závorky): pozdrav()
V závorce předáváme vstupní hodnoty.
function pozdrav(parametr) {alert(parametr);}
hodnota "Ahoj!" se uloží do proměnné parametr a tato proměnná se použije v těle funkce
pozdrav("Ahoj!") zavoláme funkci a předáme jí hodnotu "Ahoj!"
Můžeme předávat i více hodnot, oddělených čárkou.
Cvičení: Zkuste napsat funkci pro sčítání dvou čísel (viz výše).
Tlačítko a jiné vstupní elementy
Funkce můžeme spouštět tlačítkem. Zavoláme ji jejím jménem pomocí onclick atributu v HTML:
<button onclick="nazev_funkce()">Klikni!</button>
Podobně můžeme načíst obsah textového pole (pomocí funkce) ze vstupního pole, po zadání textu:
<input type="text" onchange="nazev_funkce()">
Cvičení: Přidejte k vašemu programu na sčítání tlačítko "Sečti", které funkci spustí.
