Přejít na:

Jazyk (X)HTML slouží k popisu struktury webových stránek. Dnes si představíme jazyky CSS a JavaScript, pomocí kterých můžeme popsat formu webové stránky a vytvářet interaktivní prvky.

Přejít: navigace | na začátek stránky | na konec stránky

CSS

Cascading Style Sheets (CSS) je jazyk pro popis zobrazení elementů elektronických dokumentů v jazycích (X)HTML nebo XML. Vzhled je možné definovat pro jednotlivé elementy v dokumentu, případně pro objekty s přiřazeným určitým identifikátorem (hodnotou atributu id na daném elementu), či příslušností k jisté třídě objektů (tj. s jistou hodnotou atributu class na daném elementu).

Pravidla jsou definována kaskádově. Tzn. každá definice vzhledu je na vyhovujícím elementu uplatňována, pokud není daná vlastnost předefinována nějakým více specifickým nebo pozdějším pravidlem, do jehož působnosti daný prvek dokumentu spadá. Díky tomu je možné styly budovat hierarchicky, tj. aplikovat na všechny elementy společná základní pravidla pro zobrazení, která budou v konkrétních případech „přebita“ specifičtějším nebo později definovaným pravidlem. Příkladem budiž stylopis pro (X)HTML dokument z minulého cvičení, kde je vlastnost color pro elementy odpovídající pravidlu h1 přepsána specifičtějším pravidlem pro elementy odpovídající pravidlu section h1: 

 1 h1 {
 2 	color: yellow;
 3 	background-color: #000000;
 4 }
 5 
 6 section h1 {
 7 	color: white;
 8 	text-align: right;
 9 }

Oddělení popisu vzhledu stránky pomocí CSS je vhodné využít k odlišné prezentaci obsahu při různém způsobu použití. Jak si můžete všimnout např. v hlavičce zdrojového textu této stránky, obsahuje samostatnou sadu CSS pro zobrazení na obrazovce elektronického zařízení a pro tisk: 

  <link rel="stylesheet" href="../../css/all.css" media="all"/>
  <link rel="stylesheet" href="../../css/screen.css" media="screen, projection"/>
  <link rel="stylesheet" href="../../css/print.css" media="print"/>

Je přitom využito kaskádové definice pravidel, kde jsou ve specifičtějších nebo později připojovaných stylopisech upravovány pouze ty vlastnosti zobrazení, které je třeba změnit oproti definicím předchozím.

CSS je formálně definovaný jazyk s přesnými syntaktickými pravidly. Dodržování těchto pravidel u konkrétního dokumentu je možné ověřit validací, např. pomocí on-line validační služby W3C pro CSS.

Na webu existuje obrovské množství výukových kurzů CSS. Osvědčeným zdrojem informací o webových technologiích (včetně CSS) jsou školičky technologií W3C. I přes své stáří je stále pěkným základním úvodem do filosofie a principů CSS kurz CSS na serveru Jak psát web.

Technologie CSS slouží pouze pro definici vzhledu. Samotný (X)HTML dokument by měl být plně smysluplný i bez připojení kaskádových stylů. V prohlížeči Firefox můžete použití CSS na libovolné stránce snadno vypnout a ověřit si tak, jak kvalitně je stránka strukturně označkována přímo v jazyce (X)HTML/XML: Zobrazení → Styl stránky → Bez stylu

Přejít: navigace | na začátek stránky | na konec stránky

JavaScript

JavaScript je interpretovaný programovací jazyk, který umožňuje oživit elektronické dokumenty v jazyce (X)HTML o interaktivní prvky. Jedná se o dynamicky typovaný jazyk s prvky funkcionálního a objektově orientovaného programování, který původně vznikl jako jednoduchá alternativa k webovým appletům v jazyce Java. JavaScript se Javě podobá syntaxí, názvy vestavěných funkcí a datových typů, ale koncepčně se jedná o zcela odlišné jazyky.

JavaScript můžeme rozdělit na prohlížečovou část a na jádro, které neobsahuje žádné metody pro manipulaci s elektronickým dokumentem a které lze používat i mimo webový prohlížeč jako víceúčelový programovací jazyk. Toto jádro se nazývá ECMAScript a je udržováno mezinárodní standardizační organizací ECMA International. Pro základní seznámení si otevřete JavaScriptovou konzolu svého prohlížeče (obvykle se skrývá pod klávesou F12 nebo pod klávesovou zkratkou Ctrl+Shift+J) a zkuste si spustit úryvky kódu z ukázkového souboru.

K elektronickému dokumentu lze z JavaScriptu přistupovat skrz rozhraní Document Object Model (DOM). DOM reprezentuje dokument jako strom, ve kterém je možné se pohybovat, přistupovat k jeho uzlům a reagovat na události, jako je kliknutí myši nebo stisk klávesy. S použitím DOMu můžeme náš ukázkový (X)HTML dokument z minulého cvičení upravit tak, aby se po kliknutí myši nebo doteku displeje změnil text a barva titulku: 

44     </main>
45     <script>
46     document.getElementById("title").onclick = function() {
47       this.style.color = "red";
48       this.replaceChild(
49           document.createTextNode("Nový text titulku"), title.firstChild);
50     };
51     </script>
52 </body>
53 </html>

V minulosti panovaly významné rozdíly mezi implementacemi DOMu v různých webových prohlížečích a vznikaly proto dodatečné knihovny, které autora od implementačních rozdílů odstiňovaly. Dnes je již situace podstatně lepší, nicméně knihovny jako jQuery nám stále mohou díky jednoduché syntaxi a rozšiřujícím modulům významně usnadnit práci. Předchozí příklad můžeme pomocí jQuery přeformulovat následovně: 

44     </main>
45     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
46     <script>
47     $("h1 span#title").click(function() {
48       $(this).css("color", "red").text("Nový text titulku");
49     });
50     </script>
51 </body>
52 </html>

Kromě DOMu lze z JavaScriptu přistupovat i k dalším webovým rozhraním, která umožňují využívat rozšiřující funkce webového prohlížeče. DOM a standardní webová rozhraní spadají pod správu World Wide Web konzorcia (W3C). Kromě nich existují i nestandardní rozhraní od výrobců prohlížečů.

Na webu existuje obrovské množství výukových kurzů JavaScriptu. Osvědčeným zdrojem informací o webových technologiích (včetně JavaScriptu) jsou školičky technologií W3C. I přes své stáří je stále pěkným základním úvodem do principů JavaScriptu kurz JavaScriptu na serveru Jak psát web. Při přípravě elektronického dokumentu bychom měli dbát na to, aby byl dokument samotný dobře čitelný i při zobrazení v prohlížeči bez podpory JavaScriptu. Prohlížeč nám zpravidla umožňuje JavaScript deaktivovat a ověřit si, jak dokument vypadá samostatně.

Přejít: navigace | na začátek stránky | na konec stránky

Praktické úkoly k procvičení

Přejít: navigace | na začátek stránky | na konec stránky