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í:

1. se změní barva textu na nějakou pevně zadanou (např. red)
2. se změní barva textu na jednu náhodnou z nějakého seznamu barev v kódu (např. red,green,blue)
3. 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ý
4. se změní barva na zcela náhodnou (vygenerují se tři čísla 0-255 - hodnoty RGB)

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>
 

 <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>

Různé zápisy 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!

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)

Do CSS vlastnosti odstavce chceme vložit například rgb(127,255,212). Z hlediska javascriptu jde o string (řetězec písmenek). Pokud jej víme napevno dopředu, je to snadné - stačí použít úvozovky kolem:

document.getElementById("odstavec").style.color="rgb(127,255,212)"

Co když ale do řetězce potřebujeme vložit nějaké číslo, které nám vznikne přímo ve programu/uživatelský vstup?

var cislo=124; /* Promenna cislo - nejak jsme ho vypocitali, zjistili od uzivatele, vygenerovali... */
 
document.getElementById("odstavec").style.color="rgb("+ cislo +",255,212)"

• Zde generujeme pouze červenou složku barvy, ty poté budeš generovat všechny tři čísla.
• Ukončím řetězec "rgb(" (úvozovkou) a zprava k němu připojím (operátor + ) obsah proměnné nazvané cislo. K výsledku ještě zprava připojuji zbytek řetězce ",255,212)" - výsledkem tak bude validní zápis rgb barvy.
• Neztrať se v úvozovkách