Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Discount week 50

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

V minulé lekci, Úvod do JavaScriptu, jsme si udělali úvod do jazyka JavaScript.

V dnešním tutoriálu si něco 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!

 V kódu níže najdeme znaky jako větší a menší <>, na klávesnici je napíšete pomocí pravého ALT a těchto kláves:

Větší a menší

 Také využijeme uvozovky ". Do uvozovek se v kódu píše obyčejný text. Na klávesnici můžeme uvozovky napsat pomocí SHIFT a této klávesy:

Uvozovky

 Příkazy v JavaScriptu končí středníkem ;. Klávesu pro středník najdete na české klávesnici pod klávesou ESC:

Uvozovky

Nyní si vytvořte 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é

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 var 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.

Narazit můžete také na deklaraci proměnných pomocí const, což je stejné jako let, pouze proměnná potom již nejde měnit. Jelikož jsme zatím v základním kurzu, budeme zde používat pro vytváření všech proměnných pouze let.

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š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.

V příští lekci, Základní datové typy v JavaScriptu a jejich funkce, se podíváme na základní datové typy a jejich funkce.


 

Stáhnout

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

 

Předchozí článek
Úvod do JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
79 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (16)

 

 

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

Avatar
Vojtěch Reichsfeld:14.11.2020 17:07

Ahoj! prosím pěkně, proč když dám náhled stránky v pspadu, tak to nic neukáže? Mám tam vložený script přímo odsud ale stejně to nefunguje. Nevíte co dělám špatně prosím?

 
Odpovědět
14.11.2020 17:07
Avatar
Jurajs
Člen
Avatar
Odpovídá na Vojtěch Reichsfeld
Jurajs:14.11.2020 17:57

Ahoj, náhled v PSpad nepoužívej!!! ;) ...Uloz si ten kód jako html stránku a otevři to v prohlížeči, který používáš ...(chrome, edge, firefox atp) ....

 
Odpovědět
14.11.2020 17:57
Avatar
Jurajs
Člen
Avatar
Odpovídá na Vojtěch Reichsfeld
Jurajs:14.11.2020 18:03

Jo a JS se do HTML nepíše...na JS by si měl vytvořit soubor.js a tam psát všechny scripty a pak to nalinkovat do hlavicky v html...
<head>
<script src="soubor.js"></scrip­t>
</head>

 
Odpovědět
14.11.2020 18:03
Avatar
Jiří Petráš:28.11.2020 17:51

Čas se mě zobrazil 17:3
To je asi v česku nepoužitelný formát, nevím jak jinde. Předpokládám, že to půjde opravit na 17:03 v dalších lekcích. Mohla tam být poznámka, že to vylepšíme později, jinak to vypadá, že Javascript není pro čas použitelný :-)

 
Odpovědět
28.11.2020 17:51
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na Jiří Petráš
Milan Turyna:29.11.2020 12:15

Javascript funguje přesně tak jak má, funkce vrací aktuální minutu, přidání nuly už je pouze "designový" doplněk.

Až projdeš lekce
https://www.itnetwork.cz/…ial-podminky
https://www.itnetwork.cz/…cript-funkce
můžeš si vytvořit podmínku která zkontroluje zda d.getMinutes() je menší jak 10 a pokud ano, přidá se nula.

function zero(minutes)
{
  return (minutes < 10 ? '0' : '') + minutes;
}

let d = new Date();
console.log(d.getMinutes()); // 5
console.log(zero(d.getMinutes())); // 05

Pokud by ti však nevyhovoval tento způsob, můžeš využít nějakou knihovnu k formátování aktuálního datumu a času.

Editováno 29.11.2020 12:16
 
Odpovědět
29.11.2020 12:15
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Milan Turyna
Jiří Petráš:29.11.2020 19:16

Nějakou takovou podmínku jsem si představoval, že to půjde vyřešit. Spíš jsem jen reagoval na článek a přání komentáře (hádám v zájmu vylepšení článku), protože úplného začátečníka to může až vyděsit, když nebude tušit, že jde formát opravit. Tak snad to najde aspoň v diskuzi, nebo ho to neodradí a bude číst další lekce :-)

 
Odpovědět
29.11.2020 19:16
Avatar
M Ark
Člen
Avatar
M Ark:21. ledna 22:27

Zdravím, jako správná lama mám dotaz:
když opakovaně uplatním metodu write na document, přidává další a další obsah,
ale když použiji setInterval, tak všechno smaže a začne na čisté stránce?

asi zbytečně, ale kód je zde:

document.write("*** datum a čas ***<br>");
        let dac = new Date();
        document.write(dac + "<br>");
        document.write("getDate: " + dac.getDate() + "<br>");
        document.write("getMonth: " + dac.getMonth() + "<br>");
        document.write("getMonth: " + dac.getMonth() + "<br>");
        document.write("getTime: " + dac.getTime() + "<br>");
        document.write("<hr>");

        document.write("*** běžící čas ***<br>");

        function adzero(nozero) {
            return (nozero < 10 ? '0' : '') + nozero;
        }

        function hodiny() {
            let drc = new Date();
            let cas = adzero(drc.getHours()) + " : " + adzero(drc.getMinutes()) + " : " + adzero(drc.getSeconds());
            document.body.innerHTML = "";
            document.write(cas);
        }
        setInterval(hodiny, 1000);
        document.write("<hr>");
 
Odpovědět
21. ledna 22:27
Avatar
Odpovídá na M Ark
Patrik Valkovič:21. ledna 22:46

Ahoj, problém je na řádce

document.body.innerHTML = "";

Ta přepíše obsah stránky prázdným řetězcem a tak efektivně vše smaže.

Odpovědět
21. ledna 22:46
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
M Ark
Člen
Avatar
Odpovídá na Patrik Valkovič
M Ark:22. ledna 13:44

Ahoj, velmi se omlouvám, javascriptu zatím moc nerozumím, ale i když zakomentuji document.body­.innerHTML = ""; chová se skript stále stejně a kupodivu ani nepřipisuje čas, ale přepisuje, jsem trochu zmaten (a ano pustil jsem to na jiném prohlížeči, kdyby zůstal skript v keši)

 
Odpovědět
22. ledna 13:44
Avatar
Jakub Janáček:23. února 14:04

Skvělý článek, Děkuji !

 
Odpovědět
23. února 14:04
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 124. Zobrazit vše