Základy
Kam s JavaScriptem
HTML stránku postaví, CSS ji obleče. JavaScript ji rozhýbe: počítá, reaguje na kliknutí a mění obsah.
Ukážeme, kam se skript píše, jak se dívat do konzole a co dělat, když se něco pokazí. Pod náhledem je konzole: tam se objevuje, co skript vypíše.
Zápis · 1
Element <script>
JavaScript se píše do elementu <script>, nejčastěji úplně na konec stránky, těsně před </body>. Prohlížeč ho spustí, jakmile k němu při čtení stránky dojde.
Příkaz console.log() vypíše, co mu dáme do závorek, do konzole.
Text v JavaScriptu patří do uvozovek: 'Ahoj' nebo "Ahoj". Příkaz končí středníkem.
Zápis · 2
Konzole: okno do skriptu
Do konzole můžeme vypsat cokoli: text, číslo i výsledek výpočtu. Víc hodnot oddělíme čárkou.
Na stránce samotné nic vidět není. Konzole je místo pro programátora, ne pro návštěvníka.
V opravdovém prohlížeči se konzole otevře klávesou F12 (na Macu ⌥ ⌘ I), tab Console. Je to první místo, kam se podívat, když skript nefunguje.
Zápis · 3
Komentáře
Co začíná dvěma lomítky //, prohlížeč přeskočí až do konce řádku. Komentář je poznámka pro lidi, kteří kód čtou, třeba pro vás za měsíc.
Zápis · 4
Skript změní stránku
Skutečná síla JavaScriptu je v tom, že umí sahat na stránku. Tento řádek najde první h1 a přepíše jeho text.
Podívejte se do náhledu: v HTML pořád stojí Ahoj, ale na stránce už je nový text. Skript ho změnil po načtení.
Jak hledat prvky a měnit je, ukážou lekce Výběr prvků a Změna obsahu. Teď jen ochutnávka.
Chyby
Když se něco pokazí
Stačí překlep: místo console napíšeme consol. Prohlížeč neví, co to je, a skript na tom řádku skončí. Nic dalšího se už neprovede.
Konzole ukáže červenou chybu i číslo řádku. Nadpis se nezměnil, protože jeho řádek je až za chybou.
Chybová hláška vypadá strašidelně, ale je to kamarád: říká, co se stalo a kde. consol is not defined znamená „nic jménem consol neznám“.
Zápis · 5
Skript v samostatném souboru
Opravíme překlep a všechno zase běží. Delší skript se ale nepíše do HTML. Dá se do souboru skript.js a do stránky se jen připojí, podobně jako styl přes <link>.
Atribut defer říká: stáhni skript hned, ale spusť ho až po načtení celé stránky. Pak může být v <head> a stejně najde všechny prvky. Bez defer patří <script> na konec <body>.
Shrnutí
Skript na správném místě
Ano
<script>na konci<body>, nebo<script src defer>v hlavičce- větší kód v samostatném souboru
.js console.log()a konzole (F12) při hledání chyb- komentáře, které vysvětlují proč
Ne
- skript v
<head>bezdefer: prvky stránky ještě neexistují - ignorovat červené hlášky v konzoli