Diskusia – 28. diel - Časovače a animácie v JavaScripte

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

Ivana Stehlíková

Člen

Ivana Stehlíková:28.9.2024 12:35

Druhý příklad -padající listí:
nepochopila jsem řádek kódu document.body.style.backgroundColor = "red";
Ve vzorovém souboru tento řádek chybí a v tutorialu chybí informace, že se netýká řešeného příkladu.
V tutorialu je volání události uvedeno jako
document.addEventListener("load", function(),
ve vzorovém souboru však je
document.addEventListener("DOMContentLoaded", function()
funkce prekresli() je v tutorialu uvedena ke konci příkladu, ve vzorovém souboru je však na začátku.

Odpovedať

28.9.2024 12:35

Miroslav Švec

Člen

Miroslav Švec:3.10.2024 17:09

já už na to upřímně ani nemám sílu. Přečtu přepíšu nefunguje... moudrej z toho nejsem...akorát otrávenej

Odpovedať

3.10.2024 17:09

Marta Píšová

Člen

Marta Píšová:1.11.2024 20:03

Nerozumím tomu, je to na mě moc rychlé, jsem z toho přetažená, nejvíc mě děsí, kolik mě toho ještě čeká - jako hlavně v tom smyslu, že to nemůžu stihnout. Jestli dám zkoušku, bude to zázrak.

Odpovedať

1.11.2024 20:03

Uživatel Senior

Člen

Uživatel Senior:23.11.2024 12:56

let text = "Hello world";
let paragraph = document.createElement("p");
let position = 0;
let interval;

window.onload = function() {
    interval = setInterval(AddChar, 400);
}

function AddChar() {
    if (position < text.length) {
        paragraph.textContent += text[position];
        position++;
        document.body.appendChild(paragraph);
    } else {
        clearInterval(interval);
    }
}

Odpovedať

23.11.2024 12:56

Ladislav Schnaiberg

Člen

Ladislav Schnaiberg:21.12.2024 16:14

použil jsem Copilota a ten to vyvětlil
proč nefunfovalo document.addEventListener("load", function() { `ale fungovalo `window.addEventListener("load", function() { ?

cituji kamáráda pilota od MS :-D
Dobrý dotaz! Klíčový rozdíl mezi document.addEventListener("load", function() {...}) a window.addEventListener("load", function() {...}) je v tom, na jaké úrovni se událost load vyvolá.
...
Protože document.addEventListener("load", ...) není správný způsob, jakým se sleduje, kdy je dokument načten, nefunguje tak, jak byste očekávali. Místo toho použijte DOMContentLoaded pro načítání dokumentu a load pro načítání všech zdrojů.

Máš nějaké další otázky nebo potřebuješ více podrobností? 🙂

Odpovedať

21.12.2024 16:14

Ladislav Schnaiberg

Člen

Ladislav Schnaiberg:21.12.2024 16:52

doplněn malý trik k animaci textu

<script>
        let text = " Ahoj světe"; //doplnil jsem malý trik, když se dá na začátek řetezce mezera neskáče obsah o řádek s každým začátkem nového vypisování

...

function zmenText() {
     if (paragraph.textContent == text) { //kontrola zda je již vypsán celý text, bez toho by se skript zacyklil
        paragraph.textContent = " "; //pokud je text již celý vynulujeme jej, doplněn malý trik

Odpovedať

21.12.2024 16:52

Ladislav Schnaiberg

Člen

Ladislav Schnaiberg:21.12.2024 17:05

celý kód je pak tento

<pre>
Postupné vypsání textu
  <div id="Text"></div>
    <script>
        let text = " Ahoj světe"; //doplnil jsem malý trik, když se dá na začátek řetezce mezera neskáče obsah o řádek s každým začátkem nového vypisování
        let paragraph = document.createElement("p"); //nastvíme DOM element s kterým budeme pracovat
        let pre = document.getElementsByTagName("pre");
        let divIdText = document.getElementById("Text");
        //console.log(divIdText);

        window.addEventListener("load", function () {
            //document.body.appendChild(paragraph); // připojí element <p> do těla stránky jako poslední element
            divIdText.appendChild(paragraph); // připojí element <p> k uzlu divIdText, tj. k divu s id Text
            //document.body.insertBefore(paragraph,pre[0]); //připojí element <p> do těla stránky před první <pre>
            zmenText();
            setInterval(zmenText, 1000); //po 1 sec se volá funkce zmenText
        })

        function zmenText() {
            if (paragraph.textContent == text) { //kontrola zda je již vypsán celý text, bez toho by se skript zacyklil
                paragraph.textContent = " "; //pokud je text již celý vynulujeme jej, doplněn malý trik
            } else {
                let pismenoKpridani = text[paragraph.textContent.length]; //přida dalsi pismenko podle stavajici delky, index [] je od 0
                paragraph.textContent += pismenoKpridani;
                if (pismenoKpridani == " ") { //pokud je na řadě mezera nečekáme další sekundu
                    zmenText();
                }
            }
        }
    </script>
</pre>

Editované 21.12.2024 17:06

Odpovedať

21.12.2024 17:05

Ladislav Schnaiberg

Člen

Ladislav Schnaiberg:21.12.2024 17:17

zistil jsem že na trik proti poskakování je lepší použít "\u00A0" než " "

Editované 21.12.2024 17:18

Odpovedať

21.12.2024 17:17

Iryna Makovska

Člen

Iryna Makovska:22.12.2024 21:07

V textu jde, ze "V souboru listy.js v události __onload__ nejprve
vytvoříme elementy listů ...", a v kodu nize je uvedeny EventListener: "document.addEventListener("load", function() {...."

Bohuzel, me to nefungovalo pokud jsem nezmenila to.

Odpovedať

22.12.2024 21:07

Jan Sobotka

Člen

Jan Sobotka:15. februára 11:12

V lekci je ukázána pouze první funkce, druhá je pouze popsána.

Odpovedať

15. februára 11:12

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

Najčastejšie vyhľadávané

Diskusia – 28. diel - Časovače a animácie v JavaScripte