Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- uloha:barva_textu [2018/09/19 08:25] – vytvořeno admin
+++ uloha:barva_textu [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 41: / Řádek 41: @@
   };
  </script>
+ </code>
+ == Změna vzhledu v javascriptu ==
+<code html>
+ <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>
+</code>
+ == Vyjádření barev ==
+ [[https://www.jakpsatweb.cz/barvy-zapis.html|Různé zápisy barev]]:
+  * [[https://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html|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)%%''
+ [[https://www.webtoolkitonline.com/hexadecimal-decimal-color-converter.html|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)%%''
+ == Spojování řetězců (string) ==
+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:
+<code javascript>
+document.getElementById("odstavec").style.color="rgb(127,255,212)"
+</code>
+Co když ale do řetězce potřebujeme vložit nějaké číslo, které nám vznikne přímo ve programu/uživatelský vstup?
+<code javascript>
+var cislo=124; /* Promenna cislo - nejak jsme ho vypocitali, zjistili od uzivatele, vygenerovali... */
+document.getElementById("odstavec").style.color="rgb("+ cislo +",255,212)"
+</code>
+  * 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 :-)
-</code>