NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 29 - Časovače a animace v JavaScriptu

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
Avatar
Ivana Stehlíková
Člen
Avatar
Ivana Stehlíková:28.9.2024 12:35

Druhý příklad -padající listí:
nepochopila jsem řádek kódu document.body­.style.backgrou­ndColor = "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.addE­ventListener("lo­ad", function(),
ve vzorovém souboru však je
document.addE­ventListener("DOM­ContentLoaded", function()
funkce prekresli() je v tutorialu uvedena ke konci příkladu, ve vzorovém souboru je však na začátku.

 
Odpovědět
28.9.2024 12:35
Avatar
Miroslav Švec
Člen
Avatar
Odpovídá na Vendula Hrstková
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

 
Odpovědět
3.10.2024 17:09
Avatar
Marta Píšová
Člen
Avatar
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.

 
Odpovědět
1.11.2024 20:03
Avatar
Uživatel Senior
Člen
Avatar
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);
    }
}
 
Odpovědět
23.11.2024 12:56
Avatar
Ladislav Schnaiberg
Člen
Avatar
Odpovídá na Ivana Stehlíková
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í? 🙂

 
Odpovědět
21.12.2024 16:14
Avatar
Ladislav Schnaiberg
Člen
Avatar
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
 
Odpovědět
21.12.2024 16:52
Avatar
Ladislav Schnaiberg
Člen
Avatar
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>
Editováno 21.12.2024 17:06
 
Odpovědět
21.12.2024 17:05
Avatar
Ladislav Schnaiberg
Člen
Avatar
Odpovídá na Ladislav Schnaiberg
Ladislav Schnaiberg:21.12.2024 17:17

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

Editováno 21.12.2024 17:18
 
Odpovědět
21.12.2024 17:17
Avatar
Iryna Makovska
Člen
Avatar
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.addE­ventListener("lo­ad", function() {...."

Bohuzel, me to nefungovalo pokud jsem nezmenila to.

 
Odpovědět
22.12.2024 21:07
Avatar
Jan Sobotka
Člen
Avatar
Jan Sobotka:15. února 11:12

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

 
Odpovědět
15. února 11:12
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 41.