uloha:barva_textu

Toto je starší verze dokumentu!


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

  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)

Nápovědy

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

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!

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)
  • uloha/barva_textu.1537346436.txt.gz
  • Poslední úprava: 2023/11/15 20:54
  • (upraveno mimo DokuWiki)