Už umíš vytvořit statické stránky pomocí HTML a CSS. V minulé lekci jsi se navíc dověděla, že nemusíš psát všechno HTML ručně a ukládat do souborů, ale že jej lze dynamicky generovat na serveru, třeba zrovna Pythonem.

Programování webových stránek se však může odehrávat nejen na straně serveru, ale i přímo u návštěvníka stránek, tedy v jeho prohlížeči. Jen jeden jazyk umí jet přímo v prohlížeči a měnit stránku u uživatele bez toho, aby bylo potřeba ji znovu načíst ze serveru. Tím jazykem je JavaScript a pro webovou tvorbu je velmi důležitý. V této lekci se naučíš jeho základy.

Python jede na serveru, generuje stránky, a posílá je uživateli do prohlížeče. Jakmile je hotové odešle, už je nijak změnit neumí. Proto se jedná o backend. Jako backend se také označuje i všechno ostatní, co jede na serveru a uživatel to nemůže přímo vidět, jako např. databáze.

HTML, CSS a JavaScript se interpretují v prohlížeči u uživatele, takže se jedná o frontend.

• reagovat na to, že uživatel pohne myší, posouvá stránku, označí text, píše do inputu (textového pole), atd.
• měnit strukturu HTML a CSS vlastnosti dané stránky:
  • animovat věci na stránce
  • posouvat věci, skrývat, odkrývat, přebarvovat
  • zmenšovat nebo zvětšovat prvky na stránce
  • přidávat nové HTML i s textem, měnit existující
• přistupovat k informacím, které poskytuje prohlížeč:
  • datum a čas u uživatele
  • jestli je uživatel ve tmě nebo na světle, kolik má baterky
  • ovládat audio a video na stránce
  • jakým směrem je natočeno jeho zařízení, GPS pozice
• získávat informace ze serveru i bez nového načtení stránky

Je toho dokonce ještě mnohem víc, toto je jen výběr pro ilustraci. Souhrnně se tyto možnosti označují jako JavaScript Web APIs.

Jednoduchý program v JavaScriptu a ekvivalentní program v Pythonu mohou vypadat třeba takto:

function jeUkulele(pocetStrun) {
    if (pocetStrun === 4) {
       return true;
    } else {
       return false;
    }
}

console.log(jeUkulele(6)); // asi spíš kytara

def je_ukulele(pocet_strun):
    if pocet_strun == 4:
        return True
    else:
        return False

print(je_ukulele(6)) # asi spíš kytara

Všimni si zejména následujících rozdílů:

• Místo odsazení a dvojteček označuje bloky kódu dvojice závorek: { a }
• Příkazy se ukončují středníkem. Nebo také ne. Je nepovinný.
• Zatímco v Pythonu je zvykem pojmenovávat proměnné a funkce s podtržítkem mezi slovy, v JavaScriptu se používá tzv. camelCase konvence.

I přesto, že je mezi zápisy obou jazyků spousta rozdílů, jsi schopná program v JavaScriptu přečíst a do jisté míry mu porozumět. Není tedy čeho se bát, je to jako bys uměla italsky a zajela si na dovolenou do Barcelony. Něco vyloženě znáš, základy tušíš, složitější věci si vyhledáš.

Takže když si třeba řekneš, že bys potřebovala v JavaScriptu třeba cykly, jistě nebudeš mít problém je najít a porozumět tomu jak fungují. Samozřejmě některé detaily se budou lišit.

Velkým rozdílem mezi oběma jazyky je skutečnost, že v případě JavaScriptu slouží odsazení pouze k tomu, aby se program lépe četl lidem. Žádný jiný význam nemá.

Tento program bude fungovat úplně stejně, jako úvodní příklad:

function jeUkulele(pocetStrun) { if (pocetStrun == 4) { return true; } else { return false; } }; console.log(jeUkulele(6));

Když si chceš vyzkoušet kousky Pythonu, můžeš použít interaktivní python nebo ipython v příkazové řádce. Jak si ale můžeš vyzkoušet JavaScript, který by se měl spouštět v prohlížeči?

Otevři si prohlížeč Google Chrome a použij klávesovou zkratku Ctrl + Shift + J (na Macu Cmd + Alt + J). Měla by se ti otevřít vývojářská konzole, kde můžeme spouštět JavaScript.

Tam, kde ti bliká kurzor, vlož následující kód:

console.log('Hello, ' + window.prompt('Please, enter your name') + '!');

Stiskni Enter. Stránka se tě zeptá na jméno (funkce window.prompt()) a vypíše jej s pozdravem (funkce console.log).

Můžeš zkusit vložit i jednořádkový kód, jenž jsme si ukázali v předchozí sekci tohoto návodu, a ověřit tak, že opravdu i bez odsazování bude program fungovat. Dostaneš výsledek volání funkce console.log(jeUkulele(6)), tedy false (ukulele má struny čtyři, ne šest).

Když si chceme v Pythonu nastavit nějakou novou proměnnou, stačí udělat toto:

strings_count = 4

Proměnná bez hodnoty nemůže existovat. V JavaScriptu je to trochu jinak. Máme klíčové slovo var (jako variable, angl. proměnná), jímž v programu říkáme: „Vytvoř mi novou proměnnou s tímto názvem.“ Volitelně můžeme přidat i počáteční hodnotu. Ukažme si to třeba na funkci, která z hodiny umí poznat, zda je den nebo noc.

function denNeboNoc(cas) {
    // nová proměnná, bez hodnoty
    var denniDoba;

    // nová proměnná, s počáteční hodnotou
    var hodina = cas.getHours();

    if (hodina > 6 && hodina < 22) {
        denniDoba = 'den';
    } else {
        denniDoba = 'noc';
    }

    return denniDoba;
}

var praveJe = new Date();

console.log(denNeboNoc(praveJe));

Proměnnou denniDoba jsme vytvořili prázdnou, a až později jsme do ní přiřadili nějakou hodnotu. Proměnnou hodina jsme ale vytvořili už rovnou s nějakou počáteční hodnotou. Způsob, jakým v JavaScriptu fungují proměnné, je složitější, ale toto nám bude prozatím stačit.

JavaScript nemá seznamy a slovníky. Místo toho má pole (angl. array) a objekty (angl. object).

var nakoupit = [
    'mléko',
    'mouka',
    'miňonky',
    'máslo',
];
console.log(nakoupit[1]); // vypíše mouka

var angryBirdsScore = {
    'veronika': 6810,
    'dan': 4245,
    'zuzka': 29233,
    'honza': 3824,
};
console.log(angryBirdsScore['honza']); // vypíše 3824

Jak je vidět, na první pohled vypadají stejně. Občas se ale chovají trochu jinak, takže je dobré vždy ověřit, co přesně s nimi můžeš dělat a jak.

Například pokud název vlastnosti objektu neobsahuje žádné speciální znaky, můžeš ho zapisovat i bez uvozovek a přistupovat k nim přes tečku:

var pocetObyvatel = {
  karvina: 65141,
  ostrava: 294200,
  'frydek-mistek': 56945,
};
console.log(pocetObyvatel.karvina); // vypíše 65141
console.log(pocetObyvatel['ostrava']); // 294200
console.log(pocetObyvatel['frydek-mistek']); // 56945

Podobně jako CSS, i JavaScript můžeš uložit do souboru a připojit k webové stránce v jejím HTML. Vytvoř si do prázdné složky jednoduchou webovou stránku, pojmenovanou třeba index.html:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PyLadies</title>
        <script src="hello.js"></script>
    </head>
    <body>
        <h1>PyLadies</h1>
        <p>PyLadies jsou <strong>nejlepší</strong>!</p>
    </body>
</html>

Nyní si vedle ní vytvoř soubor hello.js:

console.log('Hello!');

Když si stránku otevřeš v prohlížeči a podíváš se do konzole, uvidíš, že se v ní objevilo Hello!. Prohlížeč si spolu se stránkou stáhl i tvůj soubor s JavaScriptem a spustil jej jako program.

Úvod lekce zmiňoval animace a další zábavné věci. Pozdravy vypsané do konzole, přiznejme si to, ostřílenou PyLady už moc nenadchnou. Zkus tedy místo console.log() použít funkci window.alert():

window.alert('Hello!');

Funkce window.alert() přiměje prohlížeč, aby se objevilo okno s textem, který mu předáme. Uživatel bude muset okno zavřít tlačítkem OK , jinak nezmizí.

Když programuješ v Pythonu, měla by sis hlídat verzi jazyka, jakou používáš. Možná víš, že pokud vytvoříš program, který lze spustit na Pythonu verze 3, nemusí jít spustit např. na verzi 2.7.

S JavaScriptem v prohlížeči je to o něco složitější. Prohlížečů je více (Chrome, Safari, Firefox, a další) a každý z nich může JavaScript interpretovat trochu jinak. Není tedy až tolik podstatná verze jazyka, ale zda tu kterou funkcionalitu daný prohlížeč podporuje a třeba i do jaké míry.

Dokumentace

Nejucelenější dokumentace k JavaScriptu je na MDN, což je web pro vývojáře od organizace Mozilla, která stojí za prohlížečem Firefox. Na každé stránce pojednávající o nějaké části JavaScriptu je vždy dole tabulka, jak si vysvětlovaná funkcionalita stojí z hlediska podpory v různých prohlížečích.

Hodit se může i již zmiňované caniuse.com, kde jsou kromě HTML a CSS pokryty některé oblasti JavaScriptu.

Testovat, testovat a testovat

Prakticky je potřeba si funkčnost všeho v prohlížečích, které chceš podporovat, otestovat. I ostřílený frontendista, který z hlavy ví, co si kde může a nemůže dovolit použít, občas narazí na nepříjemné překvapení.