Cvičení – přidání interaktivity pomocí JavaScriptu

10 min

JavaScript (nebo ECMAScript) je programovací jazyk, který vám pomůže přidat interaktivitu na webové stránky.

Pomocí JavaScriptu můžete například definovat chování, které se stane, když uživatel vybere tlačítko, například otevření automaticky otevíraných oken. Pomocí JavaScriptu můžete přidat nebo odebrat obsah z webové stránky, aniž byste ho znovu načítáli.

V této lekci nastavíte ukázkový soubor JavaScriptu pro webovou stránku. V něm vytvoříte tlačítko pro přepínání mezi světlými a tmavými motivy. Pak toto tlačítko připojíte k kódu JavaScriptu, který provede skutečné přepínání motivu. Nakonec zkontrolujete dokončený projekt pomocí vývojářských nástrojů prohlížeče.

Odkaz na JavaScript

Stejně jako css můžete javascript přidat přímo do souboru HTML, ale doporučeným postupem je uložit JavaScript do samostatného souboru. Přidání kódu JavaScriptu do samostatného souboru usnadňuje opakované použití na několika webových stránkách. Můžete například vytvořit automaticky otevírané upozornění tak, že do textu webových stránek přidáte následující kód:

<script>alert('Hello World')</script>

Je ale lepší přidat kód JavaScriptu do samostatného souboru, který můžete propojit s každým souborem, který potřebuje vaše vlastní funkce.

Značka <script> skriptu HTML nám umožňuje vytvořit odkaz na externí javascriptový soubor, což je způsob konfigurace webové aplikace v tomto cvičení.

V editoru Visual Studio Code otevřete soubor index.html .
Najděte uzavírací </body> prvek a umístěte kurzor na nový řádek nad ním. Enter script:src a stiskněte Enter. Do kódu se přidají počáteční a koncové značky <script> prvku.

Upravte prvek <script> tak, aby načetl váš app.js soubor, jak je znázorněno v následujícím příkladu. Ujistěte se, že se nachází za uzavíracím </ul> prvkem seznamu.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

Prvek <script> můžete umístit do <head> nebo jinde v <body>. Umístění <script> prvku na konec oddílu <body> však umožňuje, aby se před načtením skriptu na obrazovce zobrazil veškerý obsah stránky.

Přidání odolnosti proti chybám

Do souboru HTML přidejte prvek <noscript> po uzavírací značce </script>, který lze použít k zobrazení zprávy, pokud je JavaScript deaktivován.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Přidání prvku <noscript> je příkladem odolnosti proti chybám nebo ladného snižování výkonu. Když použijete <noscript> prvek, může kód rozpoznat a naplánovat, kdy není funkce podporovaná nebo dostupná.

Nastavení striktního režimu

JavaScript byl navržen tak, aby se snadno naučil a umožnil vývojáři dělat určité chyby. JavaScript například při použití chybně napsané proměnné nevyvolá chybu a vytvoří novou globální proměnnou. Když se začnete učit JavaScript, je vhodné mít méně chyb. Může to ale vést k psaní kódu, který je pro prohlížeče obtížnější optimalizovat a obtížněji ladit.

Přepněte do striktního režimu, abyste získali užitečnější chyby, když uděláte omyl.

V editoru app.js Visual Studio Code otevřete soubor a zadejte následující:
```
'use strict';
```

Přidání tlačítka

Potřebujete způsob, jak uživatelům umožnit přepínání mezi světlými a tmavými motivy na webové stránce. V tomto cvičení implementujete tuto funkci pomocí elementu HTML <button> .

Do souboru HTML (index.html) přidejte <button> prvek. Vložte tlačítko do elementu <div> a přidejte ho hned za konec seznamu (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Všimněte si, že element v tomto příkladu <button>má atribut třídy , který můžete použít k použití stylů CSS.
Uložte změny do souboru HTML pomocí klávesové zkratky Control+S ve Windows nebo Command+S v macOS.
Do souboru CSS (main.css) přidejte nové pravidlo s selektorem .btn tříd pro tlačítko HTML. Pokud chcete, aby se barvy tlačítek odlišily od obecných světlých nebo tmavých barev motivu, nastavte vlastnosti color a background-color v tomto pravidle. Když se zobrazí stránka, tyto .btn vlastnosti přepíší výchozí vlastnosti nastavené v body pravidle souboru CSS.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Dále upravte .btn pravidlo a přidejte některé styly pro velikost, tvar, vzhled a umístění tlačítka. Následující šablony stylů CSS vytvoří kulaté tlačítko napravo od záhlaví stránky.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Dále aktualizujte šablony stylů CSS pro světlý a tmavý motiv. Definujte některé nové proměnné --btnBg a --btnFontColorzadejte barvu pozadí a barvu písma specifickou pro tlačítko.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Uložte změny do souboru CSS pomocí klávesové zkratky Control+S ve Windows nebo Command+S v macOS.

Přidejte obslužnou rutinu události

Pokud chcete, aby tlačítko něco udělalo, když ho vyberete, potřebujete v souboru JavaScriptu obslužnou rutinu události. Obslužná rutina události je způsob, jak spustit funkci JavaScriptu, když se na stránce stane událost. Pro tlačítko přidáme obslužnou rutinu události pro click událost. Funkce obslužné rutiny události se spustí, když dojde k click události.

Předtím, než přidáte obslužnou rutinu události, potřebujete referenci na element tlačítka.

V souboru JavaScriptu (app.js) použijte document.querySelector k získání odkazu na tlačítko.
```
const switcher = document.querySelector('.btn');
```
Funkce document.querySelector používá selektory CSS stejně jako ty, které jste použili v souboru CSS. switcher je teď odkaz na tlačítko na stránce.
Dále přidejte obslužnou rutinu události click. V následujícím kódu přidáte naslouchací proces události click a definujete funkci obslužné rutiny události, kterou prohlížeč spustí při výskytu click události.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

V předchozím kódu jste použili metodu toggle k úpravě <body> atributu třídy elementu. Tato metoda automaticky přidá nebo odebere třídu light-theme a dark-theme. Tento kód použije tmavé styly místo světlých stylů, pokud kliknete, a potom světlé styly místo tmavé, pokud kliknete znovu.

Popisek tlačítka ale musí být také aktualizován, aby zobrazoval správný motiv, takže musíte přidat if příkaz, abyste určili aktuální motiv a aktualizovali popisek tlačítka.

Takto by měl váš kód JavaScriptu vypadat s přidaným obslužným programem události:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Jedná se o javascriptovou konvenci použití velbloudého písmena pro názvy proměnných s více než jedním slovem, například proměnnou className.

Zpráva konzoly

Jako vývojář webu můžete vytvářet skryté zprávy, které nejsou viditelné na webové stránce, ale které si můžete přečíst na kartě Vývojářské nástroje na kartě Konzola . Použití zpráv konzoly je užitečné pro zobrazení výsledku kódu.

Do souboru JavaScriptu přidejte volání console.log za příkaz if, ale uvnitř posluchače událostí.

Po provedení této změny by měl úplný javascriptový kód vypadat takto.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Když jste v javascriptovém souboru v editoru Visual Studio Code, můžete použít automatické dokončování console.loglog zadáním a stisknutím klávesy Enter.

Textový řetězec můžete definovat s jednoduchými nebo dvojitými uvozovkami kolem textu.

Otevřít v prohlížeči

Pokud chcete zobrazit náhled, klikněte pravým tlačítkem myši index.html a vyberte Otevřít ve výchozím prohlížeči nebo znovu načtěte stejnou kartu prohlížeče stisknutím klávesy F5.
Výběrem nového tmavého tlačítka přepnete na tmavý motiv.
Ujistěte se, že všechno vypadá správně a chová se podle očekávání. Pokud ne, měli byste si projít předchozí kroky a zjistit, jestli jste něco nezmeškali.

Kontrola stránky v vývojářských nástrojích

Otevřete Vývojářské nástroje tak, že kliknete pravým tlačítkem a vyberete Možnost Zkontrolovat nebo pomocí klávesové zkratky F12. Případně můžete použít klávesovou zkratku Ctrl+Shift+I ve Windows nebo Linuxu a Option+Command+I v macOS.
Vyberte kartu Prvky a vyberte kartu Styly.
Vyberte prvek <body>. Na kartě Styly se podívejte na použitý motiv. Pokud je aktuální motiv tmavý, dark-theme styly se použijí.

Ujistěte se, že je vybraný tmavý motiv.
Vyberte kartu Konzole pro zobrazení zprávy console.logcurrent class name: dark-theme.

Pomocí konzoly můžete získat zajímavé přehledy z kódu JavaScriptu. Přidejte další zprávy konzoly, abyste pochopili, které části kódu se spouští, a seznamte se s aktuálními hodnotami jiných proměnných.

Další informace o konzole najdete v článku přehledu konzoly.

Váš názor

Byla tato stránka užitečná?