krouzek:uloha_vyber_barvy

Rozdíly

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

Odkaz na výstup diff

Následující verze		 Předchozí verze
krouzek:uloha_vyber_barvy [2022/10/04 20:05] – vytvořeno adminkrouzek: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 =====
 ''%%rgb(255,0,255)%%'' respektive ''%%#ff00ff%%'' ''%%rgb(255,0,255)%%'' respektive ''%%#ff00ff%%''
 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 ''%%<div id="color"></div>%%'' - ten nebude vidět  1) ze šablony vytvoř stránku, na které bude ''%%<div id="color"></div>%%'' - ten nebude vidět
 +
  2) zobraz ten div jako čtverec ve stránce, třeba s použitím následujícího css: ''%%#color {width:100px; height:100px; background-color: rgb(255,0,0)}%%''  2) zobraz ten div jako čtverec ve stránce, třeba s použitím následujícího css: ''%%#color {width:100px; height:100px; background-color: rgb(255,0,0)}%%''
 +
  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('color').style.backgroundColor='rgb(0,255,0)' document.getElementById('color').style.backgroundColor='rgb(0,255,0)'
 </code> </code>
 +
  4) vytvoř funkci ''%%zmenBarvu()%%'' do které dej kód co mění barvu divu - z předchozího bodu  4) vytvoř funkci ''%%zmenBarvu()%%'' do které dej kód co mění barvu divu - z předchozího bodu
 +
  5) změnu barvy navaž na stisknutí tlačítka ''%%<button onclick="zmenBarvu()">%%''  5) změnu barvy navaž na stisknutí tlačítka ''%%<button onclick="zmenBarvu()">%%''
 +
  6) uvniř funkce ''%%zmenBarvu%%'' vytvoř tři proměnné obsahující číslo a jejich hodnoty pošli do řetězce specifikujícího barvu:  6) uvniř funkce ''%%zmenBarvu%%'' vytvoř tři proměnné obsahující číslo a jejich hodnoty pošli do řetězce specifikujícího barvu:
 <code javascript> <code javascript>
Řádek 27: Řádek 33:
 </code> </code>
 (s použitím [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals|Šablon hodnot]] ) (s použitím [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals|Šablon hodnot]] )
 +
  7) do html vlož 3 inputy, nazvi je red, green, blue - uživatel tam bude psát čísla, tak můžeš použít ''%%<input type="number" id="red">%%''  7) do html vlož 3 inputy, nazvi je red, green, blue - uživatel tam bude psát čísla, tak můžeš použít ''%%<input type="number" id="red">%%''
 +
  8) uvnitř svojí funkce ''%%zmenBarvu()%%'' hodnoty red, green a blue načti z hodnot příslušných inputů:  8) uvnitř svojí funkce ''%%zmenBarvu()%%'' hodnoty red, green a blue načti z hodnot příslušných inputů:
 <code javascript> <code javascript>
  const red = parseInt(document.getElementById('red').value)  const red = parseInt(document.getElementById('red').value)
 </code> </code>
 +
  9) přidej kód, který při změně hodnoty inputu zavolá funkci zmenBarvu (''%%<input type="number" id="red" oninput="zmenBarvu()">%%'')  9) přidej kód, který při změně hodnoty inputu zavolá funkci zmenBarvu (''%%<input type="number" id="red" oninput="zmenBarvu()">%%'')
 +
  10) Změň vstupy z ''%%type="number"%%'' na ''%%type="range"%%'' a přidej atributy ''%%min="0" max="255"%%''  10) Změň vstupy z ''%%type="number"%%'' na ''%%type="range"%%'' a přidej atributy ''%%min="0" max="255"%%''
 +
 +
 +
 +---------
 +==== Řešení ====
 +<code html>
 +<!DOCTYPE html>
 +<html lang="cs">
 +<head>
 +    <meta charset="utf-8" />
 +    <title>Barvy</title>
 + 
 +    <style>
 +    /* Vychozi CSS stylovani prijde sem*/
 + body {background-color: rgb(200,200,200);}
 + 
 + body {
 + margin:0;
 + }
 + div#svetlo {
 + background-color: rgb(255, 100, 255);
 + border: 10px solid black;
 + width: 100px;
 + height: 100px;
 + }
 + 
 +    /* */
 +    </style>
 + 
 +    <script>
 +    /* <![CDATA[ */
 +    /* Sem prijde javascript kod */
 + console.log('test')
 + 
 + function zmenNeco(){
 + const red = parseInt(document.getElementById('redValue').value)
 + const green = parseInt(document.getElementById('greenValue').value)
 + const blue = parseInt(document.getElementById('blueValue').value)
 +
 + console.log(red+green+blue)
 + document.getElementById('svetlo').style.
 + backgroundColor=`rgb(${red}, ${green}, ${blue})`
 + "rgb(" + red + ", " + green + ", " + blue + ")"
 + }
 + 
 +    /* ]]> */
 +    </script>
 +</head>
 + 
 +<body>
 +<div id="svetlo"></div>
 +<h2>Barvy</h2>
 +  <input type="range" min="0" max="255"
 +  value="50" class="slider" id="redValue"
 +  oninput="zmenNeco()"
 +  >
 +  <input type="range" min="0" max="255"
 +  value="50" class="slider" id="greenValue"
 +  oninput="zmenNeco()"
 +  >
 +
 +  <input type="range" min="0" max="255"
 +  value="50" class="slider" id="blueValue"
 +  oninput="zmenNeco()"
 +  >
 +
 +
 +</body>
 +</html>
 +
 +</code>
  
  • krouzek/uloha_vyber_barvy.1664913939.txt.gz
  • Poslední úprava: 2023/11/15 20:54
  • (upraveno mimo DokuWiki)