Toto je starší verze dokumentu!
Úloha: Přebarvování textu
Zadání
Vytvoř jednoduchou html stránku s odstavcem textu. Pokud se ti nechce nic psát, můžeš použít lorem ipsum generátor. Nastav textu jiný než defaultní font (např. font-family:Arial
), tučnost (font-weight
), odstup písmenek (letter-spacing
), odstupy řádků (line-height
), a případně další vlastnosti. Použij https://www.jakpsatweb.cz/css/ jakpsatweb.cz/css pro referenci.
Textu nastav nějakou výchozí barvu. Dej do stránky tlačítko (nebo odkaz), po jehož zmáčknutí:
- se změní barva textu na nějakou pevně zadanou (např.
red
) - se změní barva textu na jednu náhodnou z nějakého seznamu barev v kódu (např.
red
,green
,blue
) - se změní barva textu na následující ze seznamu barev v kódu - tedy když je text červený, změní se vždy na zelený, když je zelený, změní se vždy na modrý, když je modrý, změní se zas na červený
- se změní barva na zcela náhodnou (vygenerují se tři čísla 0-255 - hodnoty RGB)
Nápovědy
Navázání akce
Událost onlick: Buď v HTML:
<script> /* Definice funkce, ktera bude pote prirazena k onclick */ function zmacknuto(){ console.log("Zmacknul jsem to!"); } </script> <button onclick="zmacknuto()">Ťuk</button>
Nebo přiřazení v javascriptu:
<button id="tlacitko">Ťuk</button> <script> /* Definice funkce, ktera bude pote prirazena k onclick */ function zmacknuto(){ console.log("Zmacknul jsem to!"); } /* Prirazeni k onclick */ document.getElementById('tlacitko').onclick = function(){ console.log("Zmacknuto tlacitko!"); }; </script>
Změna vzhledu v javascriptu
<p id="odstavec">Ťuk</p> <script> /* Nejprve si najdeme v dokumentu element(prvek), ktery chceme ovlivnit */ var prvek = document.getElementById('odstavec') /* Muzeme zmenit jeho barvu, css atribut color */ prvek.style.color="yellow"; /* CSS vlastnosti s pomlčkou se v javascriptu mění na camelCase např. background-color se mění na backgroundColor */ prvek.style.backgroundColor="black"; </script>
Vyjádření barev
- pojmenování (pouze některé):
Aquamarine
- v šestnáctkové soustavě (tři dvojciferná čísla):
#7fffd4
- v desítkové soustavě (tři čísla 0-255 oddělená čárkami)„
rgb(127,255,212)
Převod mezi šetnáctkovým a desítkovým zápisem dokážeš spočítat i ručně, zkus si to!
Náhodné číslo
V javascriptu volání funkce Math.random()
vrací desetinné číslo mezi nulou(včetně) a jedničkou(nevčetně). Vyzkoušej si napsat Math.random() do konzole!
My ale potřebujeme - pro zápis v desítkovém formátu rgb(127,255,212) číslo bez desetinné čárky - a z rozsahu 0-255, ne 0-1
- Jak „zvětšit“ rozsah? Vynásobením.
- Jak se zbavit desetinné části? Zaokrouhlením
Math.round(15.3541)