Prvý kód – Hello, world!

V tejto kapitole si vytvoríme obyčajný kód, ktorý nám vypíše do okna „Hello World!“ hlášku.

Pre jednoduchosť si svoj prvý skript napíšeme priamo do HTML kódu a následne si skúsime tento kód napísať aj do súboru zvlášť.

Hello World! v HTML stránke

Samotný skript si môžeme napísať nie len do hlavičky stránky, ale aj do tela stránky. Rozdiel je v tom, že kde sa script nachádza, tam sa najprv vykoná.

Vykonanie skriptu pred načítaním obsahu stránky

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">

        <script>
            alert("Hello World!");
        </script>
    </head>
    <body>
        <p>Prvy paragraf</p>
        <p>Druhy paragraf</p>
    </body>
</html>

Vykonanie skriptu pred načítaním celého obsahu stránky (po načítaní časti stránky)

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p>Prvy paragraf</p>

        <script>
            alert("Hello World!");
        </script>

        <p>Druhy paragraf</p>
    </body>
</html>

V tomto prípade síce prehliadač časť stránky načíta, no aj napriek tomu, že skript už začal pracovať, obsah stránky, ktorý bol pred ním zapísaný sa nevykreslil.

Vykonanie skriptu po načítaním celého obsahu stránky

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p>Prvy paragraf</p>
        <p>Druhy paragraf</p>

        <script>
            alert("Hello World!");
        </script>
    </body>
</html>

V tomto prípade síce prehliadač časť stránky načíta, no aj napriek tomu, že skript už začal pracovať, obsah stránky, ktorý bol pred ním zapísaný sa nevykreslil. Preto sa častokrát načítavajú skripty asynchrónne, aby nebránili vykresľovaniu obsahu. Tento princíp je možné nasadiť iba pre skripty načítané zo súborov.

Hello World! v súbore zvlášť

Tak ako aj v prípade, kedy sme náš skript písali priamo do stránky, tak aj v prípade, že ho načítavame zo súboru, je podstatné kde ho umiestnime na stránke. Celý rozdiel je iba v samotnom zápise. Povedzme, že sme si vytvorili súbor „sript.js“, v ktorom máme náš kód uložený. Tento skript sa nachádza v stromovej štruktúre nášho projektu na rovnakej úrovni ako náš HTML kód. Čiže máme projekt „Hello World“ a v ňom dva súbory:

  • Hello World
    • index.html
    • script.js

V našom HTML kóde si načítame skript nasledovne:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./script.js"></script>
    </head>
    <body>
        <p>Prvy paragraf</p>
        <p>Druhy paragraf</p>
    </body>
</html>

Celá zmena kódu nastala iba v tom, že už nepíšeme obsah nášho javaScriptového kódu priamo do HTML stránky do značiek <script></script>, ale do otváracej značky vložíme adresu súboru do atribútu „src“, čo je skratka pre „source“ alebo taktiež známe ako „zdroj“.

Samotný „script.js“ bude obsahovať tento kód:

alert("Hello World!");

Asynchrónne načítavanie skriptov

Takýto typ načítania skriptov slúži na to, aby sme neblokovali vykresľovanie obsahu stránky načítavaním skriptu. Akonáhle sa nám skript načíta, tak sa jeho obsah vykoná.

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p>Prvy paragraf</p>
        <p>Druhy paragraf</p>
        <script src="./script.js" async></script>
    </body>
</html>

Na to aby sme vedeli zabezpečiť asynchrónne načítanie skripov nám stačí pridať atribút „async“ do značky scriptu.