Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Následující verze | Předchozí verze | ||
krouzek:uloha_vyber_barvy [2022/10/04 20:05] – vytvořeno admin | krouzek:uloha_vyber_barvy [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1 | ||
---|---|---|---|
Řádek 1: | Řádek 1: | ||
- | === Výběr barvy === | + | ===== Výběr barvy ===== |
'' | '' | ||
Cíl: mít tři slidery reprezentující červenou, zelenou a modrou složku barvy. Při změně (libovolné r g b hodnoty) chci výslednou barvu zobrazit uživateli. | Cíl: mít tři slidery reprezentující červenou, zelenou a modrou složku barvy. Při změně (libovolné r g b hodnoty) chci výslednou barvu zobrazit uživateli. | ||
Řádek 10: | Řádek 10: | ||
- | Postupné úkoly: | + | ====Postup==== |
1) ze šablony vytvoř stránku, na které bude '' | 1) ze šablony vytvoř stránku, na které bude '' | ||
+ | |||
2) zobraz ten div jako čtverec ve stránce, třeba s použitím následujícího css: '' | 2) zobraz ten div jako čtverec ve stránce, třeba s použitím následujícího css: '' | ||
+ | |||
3) nastav divu background-color pomocí javascriptu. Pozor, pomlčka se mění na camelCase: | 3) nastav divu background-color pomocí javascriptu. Pozor, pomlčka se mění na camelCase: | ||
<code javascript> | <code javascript> | ||
document.getElementById(' | document.getElementById(' | ||
</ | </ | ||
+ | |||
4) vytvoř funkci '' | 4) vytvoř funkci '' | ||
+ | |||
5) změnu barvy navaž na stisknutí tlačítka '' | 5) změnu barvy navaž na stisknutí tlačítka '' | ||
+ | |||
6) uvniř funkce '' | 6) uvniř funkce '' | ||
<code javascript> | <code javascript> | ||
Řádek 27: | Řádek 33: | ||
</ | </ | ||
(s použitím [[https:// | (s použitím [[https:// | ||
+ | |||
7) do html vlož 3 inputy, nazvi je red, green, blue - uživatel tam bude psát čísla, tak můžeš použít '' | 7) do html vlož 3 inputy, nazvi je red, green, blue - uživatel tam bude psát čísla, tak můžeš použít '' | ||
+ | |||
8) uvnitř svojí funkce '' | 8) uvnitř svojí funkce '' | ||
<code javascript> | <code javascript> | ||
const red = parseInt(document.getElementById(' | const red = parseInt(document.getElementById(' | ||
</ | </ | ||
+ | |||
9) přidej kód, který při změně hodnoty inputu zavolá funkci zmenBarvu ('' | 9) přidej kód, který při změně hodnoty inputu zavolá funkci zmenBarvu ('' | ||
+ | |||
10) Změň vstupy z '' | 10) Změň vstupy z '' | ||
+ | |||
+ | |||
+ | |||
+ | --------- | ||
+ | ==== Řešení ==== | ||
+ | <code html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | /* Vychozi CSS stylovani prijde sem*/ | ||
+ | body {background-color: | ||
+ | |||
+ | body { | ||
+ | margin:0; | ||
+ | } | ||
+ | div#svetlo { | ||
+ | background-color: | ||
+ | border: 10px solid black; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | /* */ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | /* < | ||
+ | /* Sem prijde javascript kod */ | ||
+ | console.log(' | ||
+ | |||
+ | function zmenNeco(){ | ||
+ | const red = parseInt(document.getElementById(' | ||
+ | const green = parseInt(document.getElementById(' | ||
+ | const blue = parseInt(document.getElementById(' | ||
+ | |||
+ | console.log(red+green+blue) | ||
+ | document.getElementById(' | ||
+ | backgroundColor=`rgb(${red}, | ||
+ | " | ||
+ | } | ||
+ | |||
+ | /* ]]> */ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | < | ||
+ | <input type=" | ||
+ | value=" | ||
+ | oninput=" | ||
+ | > | ||
+ | <input type=" | ||
+ | value=" | ||
+ | oninput=" | ||
+ | > | ||
+ | |||
+ | <input type=" | ||
+ | value=" | ||
+ | oninput=" | ||
+ | > | ||
+ | |||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||