Diskuze: Prečo script ktorý funguje v <body> nefunguje ako subor.js?

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):5.12.2015 13:03

Toto funguje:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;

</script>

</body>
</html>

Toto nie:
html

<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <title>JavaScript - samostatný súbor</title>
            <script type="text/javascript" src="script.js"></script>
      </head>

      <body>
        <p id="demo"></p>
      </body>
</html>

script.js

var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML = answer1 + "<br>" + answer2 + "<br>" + answer3;

Vie niekto prečo?

Odpovědět

5.12.2015 13:03

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

Jan Lupčík

Tvůrce

Jan Lupčík:5.12.2015 13:08

Nejsem si jist, ale mám za to, že ten skript se spustí hned, jak se načte, takže se ani nestihne načíst ten odstavec. Zkus to JS udělat takto:

window.onload = function() {
        var answer1 = "It's alright";
        var answer2 = "He is called 'Johnny'";
        var answer3 = 'He is called "Johnny"';

        document.getElementById("demo").innerHTML = answer1 + "<br>" + answer2 + "<br>" + answer3;
}

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

5.12.2015 13:08

TruckersMP vývojář

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.12.2015 14:34

Nebo můžeš přidat atribut defer.

Nahoru Odpovědět

5.12.2015 14:34

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:5.12.2015 14:38

Je to způsobeno tím, že prohlížeč zpracovává dokument (-> vytváří DOM) postupně od shora dolu.

Nahoře narazí na tvůj JS (je úplně jedno, jestli je importován nebo vložen), ten načte a zpracuje jej.

Může se stát, že v okamžiku, kdy se skript zpracovává ještě není DOM vytvořený, nebo není kompletní, proto se nemusí najít žádný element s #demo a tedy se skript "neprovede".

Pokud umístíš JS na spodek stránky, všechno se provede tak, jak má, jelikož je již připraven DOM a skript se má na čem provést.

Dá se tomu samozřejmě zabránit, pokud spustíš skript až po načtení dokumentu, jak psal Jan Lupčík.

Velmi často jsou dotazy typu proč to na lokálu ("u mě v počítači") funguje a na serveru ne. To je dáno tím, že u tebe v počítači je přístup k souborům okamžitý, takže se okamžitě vytvoří DOM a skript najde chtěný element. Na serveru je však situace jiná. Musíš všechny soubory stahovat a pokud stáhneš skript dříve, než HTML, které se ještě musí převést na DOM, skript se prostě neprovede. Dá se tomu zabránit částečně různým cachováním atp., ale to není moc spolehlivé. Nejspolehlivější je použití .onload či umístění všech skriptů na spodek stránky, což doporučuji, protože nikdy nevíš, je skript, který importuješ má tento problém ošetřený. :-)

Nahoru Odpovědět

5.12.2015 14:38

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):5.12.2015 15:11

Takto?

<script type="text/javascript" src="script.js" defer></script>

Nefunguje to.

Editováno 5.12.2015 15:14

Nahoru Odpovědět

5.12.2015 15:11

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

Jurajs

Člen

Jurajs:5.12.2015 15:13

<script src="script.js" type="text/javascript"></script>

Takhle ne?

Nahoru Odpovědět

5.12.2015 15:13

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):5.12.2015 15:15

Pýtal som sa Jirku Gracíka na umiestnenie atribútu defer.

Nahoru Odpovědět

5.12.2015 15:15

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:7.12.2015 0:26

Ano, takto. Tak pak to může být tím, že to prohlížeč nepodporuje nebo to funguje jinak, než si pamatuji

Nahoru Odpovědět

7.12.2015 0:26

Neaktivní uživatelský účet

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 8 zpráv z 8.

Nejčastěji vyhledáváné

Diskuze: Prečo script ktorý funguje v <body> nefunguje ako subor.js?