JavaScript stránku oživí

Třetím jazykem webu je JavaScript. HTML dává stránce obsah, CSS vzhled a JavaScript ji oživí: dokáže reagovat na kliknutí, měnit, co stránka ukazuje, kontrolovat formuláře nebo načítat nová data. Na rozdíl od HTML a CSS je JavaScript programovací jazyk: píšete v něm pokyny, které prohlížeč provádí jeden po druhém.

Stránka má teď tlačítko, pod ním prázdný odstavec a třetí soubor, script.js. Ten stránka načítá řádkem <script src="script.js"></script> na konci souboru index.html. Tady je celý skript:

const tlacitko = document.querySelector("#pozdrav");
const zprava = document.querySelector("#zprava");

tlacitko.addEventListener("click", function () {
    zprava.textContent = "Ahoj! Vítejte na mé stránce.";
});

Obyčejnými slovy:

• První řádek najde na stránce tlačítko (prvek s id="pozdrav") a pojmenuje ho tlacitko.
• Druhý řádek najde prázdný odstavec s id="zprava" a pojmenuje ho zprava.
• Zbytek říká: když někdo na tlačítko klikne, vlož do odstavce text v uvozovkách.

Jména v kódu se píšou bez háčků a čárek (tlacitko, zprava), texty pro návštěvníky stránky s nimi. Klikněte v náhledu na tlačítko a uvidíte, jak se text objeví. Se všemi závorkami a středníky si zatím hlavu nelamte. Na téhle cestě se naučíte psát HTML, CSS i JavaScript sami, jeden jazyk po druhém, a to úplně od začátku.