Lekce 2 - Začínáme s JavaScriptem - První skripty

JavaScript Základní konstrukce Začínáme s JavaScriptem - První skripty American English version English version

Unicorn College ONEbit hosting 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, Úvod do JavaScriptu, jsme si udělali úvod do jazyka JavaScript. V dnešním tutoriálu si něco konečně naprogramujeme a vyzkoušíme. Nebudeme říkat, že píšeme programy, protože budeme psát spíše jen takové útržky kódu, které budou dělat jednoduchou a specifickou věc. Udělejme si tedy první skript. Rovnou na začátku říkám, že když chcete pracovat s JavaScriptem, musíte umět alespoň základy HTML. Skripty nemusíme na rozdíl od serverových jazyků (např. PHP) nikam nahrávat, budeme si je spouštět pěkně doma, ve svém prohlížeči. Prohlížečem mám na mysli buď Chrome (ten je úplně ideální) nebo Firefox. Oba totiž obsahují perfektní nástroje pro debugování skriptů, tím mám na mysli hledání chyb v našich skriptech. Pusťme se tedy do toho!

Vytvořte si novou HTML stránku a její obsah upravte do následující podoby:

<!DOCTYPE html>

<html lang="cs-cz">
        <head>
                <meta charset="utf-8" />
                <title>První webová aplikace v JavaScriptu</title>
        </head>

        <body>
                <script type="text/javascript">
                        document.write("Ahoj ITnetwork!");
                </script>
        </body>
</html>

Když si stránku nyní spustíte v prohlížeči, měla by obsahovat text "Ahoj ITnetwork!".

První webová aplikace v JavaScriptu
localhost

Je to obdoba aplikace Hello World (ahoj světě), která se používá při výuce programování v prvních aplikacích. Vysvětleme si, co jsme to vlastně udělali. Když prohlížeč zobrazuje HTML stránku, jede odshora dolů. Jakmile narazí na tag <script>, chápe text v tomto tagu jako zdrojový kód pro jazyk JavaScript a rovnou jej spustí. Po ukončení pokračuje dále s parsováním stránky. Toto může vést k problému, když chceme shora ovlivnit JavaScriptem element, který je až na konci stránky a prohlížeč ho tedy ještě nenačetl. Proto se JavaScript často vkládá do hlavičky a spouští se až když je celá stránka načtená. Tím se však budeme zabývat později. Máme tu tedy první příkaz:

document.write("nějaký text");

Prozradím, že dokument je objekt, který symbolizuje HTML dokument, tedy naší webovou stránku. A write() je jeho metoda, která zapíše na dané místo v kódu HTML stránky vložený text. Cokoli na stránce přes JavaScript změníme, to se okamžitě projeví. Zde se tedy zobrazí náš text "Ahoj ITnetwork!" Je zvykem psát za všemi příkazy středník - ;, i když to v JavaScriptu není nutné.

Nyní se podíváme jak se pracuje s proměnnými.

Proměnné

Slovo proměnná byste měli znát ze školy, pro neprogramátory je to místo v paměti, kam si můžeme ukládat data a potom s nimi pracovat. Každá proměnná má svůj datový typ, v JavaScriptu může obsahovat číslo, text, hodnotu boolean (pravda nebo nepravda, o té až příště) nebo objekt. Datové typy proměnným přiřazuje sám JavaScript podle toho, co do nich zrovna ukládáme. Proto říkáme, že je JavaScript dynamicky typovaný jazyk (dynamicky mění typy proměnných podle jejich obsahu).

Všechny proměnné se v JavaScriptu deklarují pomocí slova let! V minulosti se k těmto účelům používalo klíčové slovo var, které dnes slouží již jen k zachování zpětné kompatibility. Určitě na něj ještě ve starších zdrojových kódech narazíte. Když nepoužijete žádné klíčové slovo, na rozdíl od jiných jazyků vytvoříte tzv. globální proměnnou, což není vždy úplně to, co chcete. Ta je totiž potom přístupná ze všech skriptů a to může vyvolat konflikty.

Vytvořme si několik proměnných:

let a;       // vytvoří proměnnou a, ve které zatím nic není
let b = 40;  // vytvoří proměnnou b s hodnotou 40
c = 30;      // vytvoří globální proměnnou c s hodnotou 30
s = "Text";  // vytvoří globální proměnnou s, která bude obsahovat textový řetězec

Kód výše obsahuje vytvoření číselných proměnných a vytvoření proměnné, která obsahuje text (ten píšeme do uvozovek, aby překladač věděl, že je to jen text a ne název nějaké další proměnné nebo funkce). Zároveň jsme si ukázali, jak se v kódu dělají komentáře, tedy poznámky pro programátory, kterých si interpret (váš prohlížeč) nevšímá. Použijeme k tomu dvě lomítka - //. Kdybychom chtěli komentář na víc řádků, používá se /* a */ . S proměnnými samozřejmě můžeme dělat nejrůznější operace. Začněme sčítáním. Můžeme sčítat čísla, ale dokonce i textové řetězce (ty se tím spojí v jeden text). Vše se dělá pomocí operátoru +.

Dokonce můžeme sčítat i číslo a textový řetězec, interpret si číslo převede na řetězec a výsledkem bude součet řetězců.

let a = 10;
let b = 20;
let c = a + b;
document.write("Zde je součet čísel a a b: ");
document.write(c);
document.write("<br />"); // vložíme HTML tag pro nový řádek
let s1 = "10";
let s2 = "20";
let s3 = s1 + s2;
document.write("Zde je součet řetězců s1 a s2: ");
document.write(s3);

Výsledek:

Proměnné v JavaScriptu
localhost

Z výstupu tohoto programu byste měli pochopit rozdíl mezi číslem a řetězcem :) Můžeme samozřejmě i násobit, odčítat a dělit, jsou k tomu operátory *, \, -, /. Všimněte si, že jsme stále v HTML, pokud chceme nový řádek, vložíme do stránky prostě HTML tag pro odřádkování.

Datum a čas

Podívejme se ještě jak se pracuje s datem a časem. Výsledkem bude první skript do vašich stránek, který bude mít nějaké praktické využití. Vše potřebné nalezneme v objektu Date, tedy čas i datum. Ukážeme si, jak si objekt vytvořit a jak s ním pracovat. Vytvoříme jej pomocí klíčového slova new, které nám ho uloží do proměnné podobně, jako jsme to dělali s čísly nebo textem:

let d = new Date(); // vytvoří proměnnou, ve které je aktuální datum

Pozn.: Klasická proměnná neumí nic moc jiného, než uchovávat hodnotu. Co nejjednodušeji řečeno, objekt je chytřejší. Když si jej uložíme do proměnné, můžeme na něm potom volat tzv. metody. Vzpomeňte si na objekt document a metodu write(). S datem je to něco podobného.

Na objektu date budeme volat následující metody:

  • getDate() - Vrátí číslo dne v měsíci, 1 je prvního.
  • getMonth() - Vrátí číslo měsíce v roce, leden je 0, takže je nutné přičíst 1.
  • getFullYear() - Vrátí aktuální rok jako 4 číslice.
  • getHours() - Vrátí hodiny.
  • getMinutes() - Vrátí minuty.
  • getSeconds() - Vrátí sekundy.
  • getTime() - Tato metoda vrací počet milisekund od 1.1.1970. Tento formát se v informatice často používá (tzv. UNIX TimeStamp).

Jména metod nejsou úplně šťastně zvolená, no, co naděláme :)

Vypišme si tedy aktuální datum a čas:

let d = new Date(); // vytvoří proměnnou, ve které je aktuální datum
document.write("Dnes je: " + d.getDate() + ". " + (d.getMonth() + 1) + ". " + d.getFullYear());
document.write("<br />");
document.write("Čas je: " + d.getHours() + ":" + (d.getMinutes()));

Výsledek:

Datum a čas v JavaScriptu
localhost

Datum a čas se bere samozřejmě z počítače uživatele (opět opakuji, JavaScript běží u klienta), když tedy čas změníte, měl by se změnit i na stránce :) V příští lekci, Základní datové typy v JavaScriptu a jejich funkce, se podíváme blíže na základní datové typy. Všechny 3 zdrojové skripty jsou níže ke stažení pro případ, že jste někde udělali chybu. Bude tomu tak vždy.


 

Stáhnout

Staženo 665x (2.51 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?
58 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.
Miniatura
Předchozí článek
Úvod do JavaScriptu
Miniatura
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Aktivity (8)

 

 

Komentáře
Zobrazit starší komentáře (68)

Avatar
albertpatera
Redaktor
Avatar
albertpatera:1. dubna 22:18

Ahoj,

tak jsem si s tím trochu hrál a mělo by to fungovat (resp. mě to funguje). Musel jsem troochu upravit Tvůj kód.

<!DOCTYPE html>

<html lang="cs-cz">

<head>
<meta charset="utf-8" />
<title>První webová aplikace v JavaScriptu</title>
</head>

<body>

<script>

function setDate(){
document.body.innerHTML = ""; // Vymazeme predchozi text
let d = new Date(); // vytvoří proměnnou, ve které je aktuální datum
document.write("Dnes je: " + d.getDate() + ". " + (d.getMonth() + 1) + ". " + d.getFullYear());
document.write("");
document.write("Čas je: " + d.getHours() + ":" + (d.getMinutes()) + ":" + d.getSeconds());
}

setInterval(setDate, 1000);

</script>

</body>

</html>

1)

document.write("
");
  • máš to hozený na nový řádek (JS to bere jako znak navíc - ASCII znak)

Nevím proč, ale Sublime Text mi tam dal mezi funkce dosadil pomlčky, takže to jsem taky opravil (btw. možná to má něco společnýho s minulou přednáškou (viz středník != středník, ale čínský vykřičník). To byla jen malá odbočka :D

Funkce setInterval() se pak stará o aktualizaci data a času 1000 milisekund ;-)

 
Odpovědět 1. dubna 22:18
Avatar
Jiří Anderle:2. dubna 2:09

Tak jsem to opravil podle tebe a opět to nefungovylo a psalo to vše na jeden řádek. Otvírám v Mozile. Zkusil jsem to otevřít v Googlu a ejhle, funguje to. Vrátil jsem tam (br /) a zobrazuje to na dva řádky. Takže je to v prohlížeči. Nevíš náhodou proč? Zatím mockrát děkuji za trpělivost.

 
Odpovědět 2. dubna 2:09
Avatar
David Hynek
Redaktor
Avatar
Odpovídá na Jiří Anderle
David Hynek:4. dubna 21:17

Co reset pameti prohlizece? Nekdy se to tam tvrdohlave drzi ve stare verzy.

Odpovědět 4. dubna 21:17
Čím víc vím, tím víc věcí nevím.
Avatar
Jakub Hrubčo:17. dubna 11:17

Citujem z clanku: "Všechny proměnné se v JavaScriptu deklarují pomocí slova let! V minulosti se k těmto účelům používalo klíčové slovo var, které dnes slouží již jen k zachování zpětné kompatibility."

Nie je to pravda. Obe klucove slova maju svoj vyznam a su medzi nimi podstatne rozdiely. Velmi pekne a prehladne je to vysvetlene tu: https://stackoverflow.com/…iable-in-jav

 
Odpovědět 17. dubna 11:17
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jakub Hrubčo
David Čápka:17. dubna 11:44

Je to pravda :) Nikde neříkáme, že v nich nejsou rozdíly, říkáme, že var nemáš používat, což je korektní a aktuální informace.

Editováno 17. dubna 11:44
Odpovědět 17. dubna 11: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
Jakub Hrubčo:17. dubna 13:54

Nechcem byt za "hnidopicha" :), ale tvrdenie v clanku sa da interpretovat tak, ze novy standard hovori, ze "var" sa uz nema pouzivat a plnohodnotne ho nahradil "let". Urcite je dobre pouzivat "let" "as much as possible", lebo tak eliminujem moznost nechceneho prepisania globalnej premennej pouzivanej pre inu cast programu, a tiez menej zatazujem pamat. Ale "var" proste nezmizol, stale sa pouziva (sice v extremnych pripadoch, s ktorymi sa v tomto seriali nestretneme). Mozno sa mylim a v tom pripade prosim o vysvetlenie :)

 
Odpovědět 17. dubna 13:54
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jakub Hrubčo
David Čápka:17. dubna 16:00

Za hnidopicha bohužel jsi, jelikož jen tvrdíš jak něco tak není, evidentně nemáš moc zkušeností, a nenapsal jsi jediný důvod k čemu by bylo var dobré použít. Článek se tak dá interpretovat, protože přesně to má říkat. Další zdroj máš třeba zde - https://softwareengineering.stackexchange.com/…yword-in-es6 var je pouze jeden z omylů v návrhu JS, scope má špatně vymezený, proto má sideeffects, které byly pomocí let opraveny. Stejně jako for in cyklus který je opravený for of nebo scope this, který opravují lambda funkce, kde this funguje úplně jinak. Akorát mě otravuje dávat tady na pravou míru takovéhle poznámky a nemohu se věnovat užitečnějším věcem na síti. Příště sem buď pošli konkrétní argument proč to používat nebo autorovi neoponuj, takový příspěvek totiž nemá žádný význam.

Odpovědět  +1 17. dubna 16:00
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
Jakub Hrubčo:17. dubna 16:24

Vyznam to ma, dozvedel som sa nieco nove. Takze dakujem a sorry za otravovanie :)

 
Odpovědět 17. dubna 16:24
Avatar
František Hejský:31. července 16:25

Ahoj, nechce mi to zobrazit diakritiku.. Nevíte čím to je?

 
Odpovědět 31. července 16:25
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na František Hejský
David Čápka:31. července 16:26

Je to tím, že nemáš základy HTML, kde se řeší jak vytvořit soubor ve správném kódování - https://www.itnetwork.cz/…uvod-do-html

Odpovědět  +1 31. července 16:26
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! :)
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 10 zpráv z 78. Zobrazit vše