Diskuze – Lekce 16 - Základy práce s DOM a události 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

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

Odpovědět

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íš?

Odpovědět

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.

Odpovědět

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ší ...

Odpovědět

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

Odpovědět

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

Odpovědět

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

Odpovědět

27.6.2018 18:49

David Hynek

Tvůrce

David Hynek:27.6.2018 19:50

Jak mas HTML cast?

Odpovědět

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>

Editováno 27.6.2018 19:53

Odpovědět

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

Odpovědět

27.6.2018 19:56

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

Nejčastěji vyhledáváné

Diskuze – Lekce 16 - Základy práce s DOM a události v JavaScriptu