Diskusia – 2. diel - VS Code a prvý skript

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

Jiří Anderle

Člen

Jiří Anderle:1.4.2018 0:57

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

Odpovedať

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.

Editované

Odpovedať

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.

Odpovedať

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.

Odpovedať

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);

Editované

Odpovedať

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?

Odpovedať

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?

Editované

Odpovedať

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>

Odpovedať

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 ;-)

Odpovedať

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.

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 156.

Najčastejšie vyhľadávané

Diskusia – 2. diel - VS Code a prvý skript