Diskusia – 15. diel - Základy práce s DOM a udalosti 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

Michal Vlasák

Člen

Michal Vlasák:13.4.2016 11:50

Ahoj, jakto, že je funkce secti() bez argumentů. Očekával jsem, že tam budeme nějaké dávat, protože nechápu, jak je možné, že tato funkce "zná" proměnné cislo1 a cislo2.
Děkuji za vysvětlení.

Odpovedať

13.4.2016 11:50

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:13.4.2016 13:43

Dobře, koukni se kde je funkce secti() deklarovaná, uvnitř jiné funkce, v javascriptu existuje něco čemu se říká vareable context, jinými slovy tato funkce je v podstatě dcerou vnější funkce, jako taková má tedy právo sahat na proměnné z matky aniž by musela sama matka být v té době dostupná... Má to řadu výhod, ale trochu to kazí přehlednost kódu v začátcích, Vem to jako fakt. Na druhou stranu, když deklaruješ v jiných jazycích cyklus, nebo if taky je zevnitř vidět ven, no a díky tomu, že javascript ti dovolí vytvořit funkci uvnitř funkce, může vnitřní funkce vidět taky ven. Rozumíš?

Odpovedať

13.4.2016 13:43

Neaktivní uživatelský účet

Michal Vlasák

Člen

Michal Vlasák:14.4.2016 8:08

Ahoj, moc ne, protože, když jsme měli tenhle kód:

var tlacitko = document.getElementById("tlacitko");
var cislo1 = document.getElementById("cislo1");
var cislo2 = document.getElementById("cislo2");

function secti() {
        alert(cislo1.value + cislo2.value);
}

tlacitko.onclick = secti;

tak ta funkce secti() dcera žádné funkce ještě nebyla a fungovalo to taky.

Odpovedať

14.4.2016 8:08

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:14.4.2016 9:51

Ale ovšem že funkce secti() byla dcerou, tentokrát ne jiné funkce ale globálního objektu window, nebolí object Global, do kterého patří všechno, pokud nestanovíš jinak ... Doporučuji tohle se pro začátek naučit jako fakt a až budeš mít v JS nějakou praxi ono to do sebe všechno dozapadne samo neboj. Javascript je v tomhle zvláštní a není snadný si všechno představit hned na začátku, chce to abys prošel trochu objekty a experimentoval s funkcemi ... Teď už by to ale mohlo být jasnější ...

Odpovedať

14.4.2016 9:51

Neaktivní uživatelský účet

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):20.4.2016 9:36

Na tejto stránke:

<!DOCTYPE html>
<html>
<head>
    <title>Moje webová stránka</title>
        <meta charset="utf-8" />
</head>
<body>
        <nav>
                <img src="logo.png" alt="logo" />
                <ul>
                        <li>Reference</li>
                        <li>Fotogalerie</li>
                </ul>
        </nav>
        <main>
                <article>
                        <p>Ahoj</p>
                        <p>Obrovský</p>
                        <p>Světe</p>
                </article>
        </main>
</body>
</html>

chcem vložiť element "p" do article.
Toto mi funguje (ako rodiča berie "body")
p.appendChild(body);
ale toto nie (ako rodiča mi "article" neberie, nie je definovaný)
p.appendChild(article);
Ako ho mám definovať?

Mám takýto kód:

function vytvorRiadok(text, rodic) {
         var p = document.createElement("p");
         p.textContent = text;
         rodic.appendChild(p);

         return p;
}

function vytvorVsetkyRiadky() {
         vytvorRiadok("koleso", document.article);
}

window.onload = function() {
         vytvorVsetkyRiadky();
         console-log(vytvorVsetkyRiadky());
}

Odpovedať

20.4.2016 9:36

Aj tisícmíľová cesta musí začať jednoduchým krokom.

Erik Palenčík

Člen

Erik Palenčík:23.1.2017 23:16

Milujem webove jazyky opišeš HTML, CSS, a všecko a aj tak ti to zobrazí inač ako v tutorialy ale inač super články

Odpovedať

23.1.2017 23:16

Pluhtík

Člen

Pluhtík:27.6.2018 18:49

Zdravím, můžu se zeptat, proč mi nefunguje můj kód? Je tam jen drobná chyba nebo celý ten systém "button.onclick = function(parametr1, parametr2, ...)" je špatně?

window.onload = function() {
        sum = document.getElementById('b1');
        sub = document.getElementById('b2');
        mul = document.getElementById('b3');
        div = document.getElementById('b4');
        pow = document.getElementById('b5');
        num1 = document.getElementById('n1');
        num2 = document.getElementById('n2');
        num1 = parseInt(num1.value);
        num2 = parseInt(num2.value);

        function after_Button(type, n1, n2) {
                document.write("<h1>Vysledek je: </h1>");
                if (type == 1)
                        document.write(n1 + n2);
                else if (type == 2)
                        document.write(n1 - n2);
                else if (type == 3)
                        document.write(n1 * n2);
                else if (type == 4)
                        document.write(n1 / n2);
                else
                        document.write(Math.pow(n1, n2));
        }

        sum.onclick = after_Button(1, num1, num2);
        sub.onclick = after_Button(2, num1, num2);
        mul.onclick = after_Button(3, num1, num2);
        div.onclick = after_Button(4, num1, num2);
        pow.onclick = after_Button(5, num1, num2);
}

Odpovedať

27.6.2018 18:49

David Hynek

Tvůrce

David Hynek:27.6.2018 19:50

Jak mas HTML cast?

Odpovedať

27.6.2018 19:50

Čím víc vím, tím víc věcí nevím.

Pluhtík

Člen

Pluhtík:27.6.2018 19:52

<!DOCTYPE html>

<html lang="cs-cz">

        <head>
                <meta charset="utf-8">
                <title>Kalkulacka, pole</title>
                <script src="javascript.js"></script>
        </head>

        <body>
                <h1>Kalkulacka</h1>
                <p> Number 1: <input type="text" id="n1" size="5" /> </p>
                <p> Number 2: <input type="text" id="n2" size="5" /> </p>
                <p> <button id="b1">Summation</button> </p>
                <p> <button id="b2">Substraction</button> </p>
                <p> <button id="b3">Multiplication</button> </p>
                <p> <button id="b4">Divison</button> </p>
                <p> <button id="b5">Power</button> </p>
        </body>

</html>

Editované 27.6.2018 19:53

Odpovedať

27.6.2018 19:52

Pluhtík

Člen

Pluhtík:27.6.2018 19:56

Number 1 jsem měl n1 místo n2, což byla chyba. Nyní místo klasické stránky vyskakuje to, co je na obrázku.
Jestliže smažu windows.onload function() {....} a upravím zarovnání, tak naskočí jen prázdná stránka

Odpovedať

27.6.2018 19:56

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

Najčastejšie vyhľadávané

Diskusia – 15. diel - Základy práce s DOM a udalosti v JavaScripte