Diskuze – Lekce 2 - VS Code a první skript

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

Jiří Anderle

Člen

Jiří Anderle:1.4.2018 0:57

Poraďte mi prosím, jak mám automaticky aktualizovat zobrazený čas? Děkuji.

Odpovědět

1.4.2018 0:57

Petr Šťastný

Tvůrce

Petr Šťastný:1.4.2018 10:23

Prokousej se dalšími články, určitě tam na to přijde řeč. Ale kdyby sis s tím chtěl hrát už teďka: Máš funkce setInterval a setTimeout. setInterval ti umožní určit nějaký blok příkazů, který se bude každých x milisekund vykonávat. setTimeout ti umožní určit nějaký blok příkazů, který se vykoná za x milisekund (pouze jednou).

Abys to mohl použít, musíš zabalit nějaké příkazy do balíčku - do funkce. To se dělá třeba takhle:

function pozdrav(){
alert("Ahoj!");
}

A funkci potom spustíš takhle

pozdrav();

Třeba setInterval použiješ takto:

setInterval(pozdrav, 3000);

Tohle každý tři vteřiny (3000 milisekund) zavolá funkci pozdrav. Místo funkce pozdrav můžeš dát třeba ten skript jak vypisuje čas. Dávej si pozor, do téhle funkce se píše jméno té funkce bez závorek.

Editováno 1.4.2018 10:24

Odpovědět

1.4.2018 10:23

Jiří Anderle

Člen

Jiří Anderle:1.4.2018 16:34

Ano, setInterval jsem zkoušel, ale nevím, jak to do toho načteného data a času vpravit. Zkoušel jsem i 60000 ms, že by to stačilo každou minutu. Ale nevím, jak. Potřeboval bych to polopaticky. Děkuji.

Odpovědět

1.4.2018 16:34

Jiří Anderle

Člen

Jiří Anderle:1.4.2018 16:48

Jsem úplný začátečník, prokousal jsem se HTML a CSS. Zhotovil jsem si na zkoušku svoje stránky.
Nyní tam doplňuji podle JavaScript datum a pozdrav. Je toho najednou moc informací. Pomaloučku to ale půjde. To jen pro doplnění mého stupne vzdělání v IT. Děkuji.

Odpovědět

1.4.2018 16:48

Petr Šťastný

Tvůrce

Petr Šťastný:1.4.2018 16:49

Takže nejdřív musíš vytvořit funkci, která bude psát to datum. Zkopíroval jsem ten kód úplně na konci a udělal tohle, ještě tam ale vypisuju navíc vteřiny, abychom výsledek viděli hned a nemuseli na něj minutu čekat.

function setDate(){
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()) + ":" + d.getSeconds());
}

Teď musíš spustit následující příkaz:
setInterval(jméno funkce, milisekundy)

setInterval(setDate, 1000);

Budeme to spouštět každou vteřinu.

Když to spustíš, vidíš, že se postupně píše text furt dál a dál - nemaže se starý. Proto musíme do funkce setDate() vložit před ostatní kód následující řádek:

document.body.innerHTML = "";

Tohle vezme HTML dokument a nastaví vnitřní HTML na prázdný string - tímhle způsobem vymaže všechno co tam je. Výsledný kód bude vypadat nějak takhle:

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("<br />");
document.write("Čas je: " + d.getHours() + ":" + (d.getMinutes()) + ":" + d.getSeconds());
}

setInterval(setDate, 1000);

Editováno 1.4.2018 16:49

Odpovědět

1.4.2018 16:49

Jiří Anderle

Člen

Jiří Anderle:1.4.2018 17:07

Tak jsem to vyzkoušel, ale při spuštění se načte moje stránka a po asi sekundě zmizí azůstane tam statický čas a datum v základní formě na bílém poli. Stále to načítá. Vznikla asi nějaká smyčka. Nemusí se to nějak ukončit?

Odpovědět

1.4.2018 17:07

Petr Šťastný

Tvůrce

Petr Šťastný:1.4.2018 17:17

Tak to nevím, to je divný. Vložil jsem to tady do JS konzole a funguje to. Zkus zkopírovat kód, dát F12 a vložit ho do konzole, mělo by to fungovat. Jak přesně vypadá ta tvoje stránka?

Editováno 1.4.2018 17:19

Odpovědět

1.4.2018 17:17

Jiří Anderle

Člen

Jiří Anderle:1.4.2018 17:56

Otevřel jsem nový soubor jen s výše uvedenou funkcí obnovy času. Zkus se prosím podívat, kde je zakopanej pes. Děkuji. :

<!DOCTYPE html>

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

<body>

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("<br />");
document.write("Čas je: " + d.getHours() + ":" + (d.getMinutes()) + ":" + d.getSeconds());
}

setInterval(setDate, 1000);

</script>

</body>

</html>

Odpovědět

1.4.2018 17:56

albertpatera

Tvůrce

albertpatera:1.4.2018 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>

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

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

Odpovědět

1.4.2018 22:18

Jiří Anderle

Člen

Jiří Anderle:2.4.2018 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.4.2018 2:09

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

Nejčastěji vyhledáváné

Diskuze – Lekce 2 - VS Code a první skript