Zobrazit stránkuStarší verzeZpětné odkazyNahoru Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku. ==== Vánoční dárky ==== === Zadání === Uděláme si seznam ve kterém půjde konfigurovat dárky pro svoje kamarády. Dárky ale nesmí překročit nějaký rozpočet - a to nám bude kontrolovat javascript === Stavební kameny === == Select == V html existuje formulářový prvek select s možnostmi option: <code html> <p>Mamince: <select id="darek_pro_maminku"> <option value="100">Kalendář</option> <option value="0">Nakreslit obrázek</option> <option value="500">Parfém</option> </select> </p> </code> == Načtení hodnoty == V javascriptu můžeme načíst hodnotu formulářového prvku input, select, atp následujícím kódem: <code javascript> var cena_darku_pro_maminku = document.getElementById('darek_pro_maminku').value </code> == Spuštění funkce po stisku tlačítka == V javascriptu si vytvoříme funkci, která se jmenuje //moje_funkce//. Mezi chlupatými závorkami je kód, který se vykoná: <code javascript> function moje_funkce(){ alert("Zmacknuto tlacitko") } </code> V html kódu uděláme tlačítko, můžeme mu dát atribut onclick, a v něm volání javascriptové funkce. <code html> <button onclick="moje_funkce()">Pracuj!</button> </code> == Rozhodnout něco na základě hodnoty == Pokud jsme si //načtením hodnoty// (viz výše) načetli hodnotu do proměnné, můžeme na základě její hodnoty něco udělat: <code javascript> var cena_darku_pro_maminku = parseInt(document.getElementById('darek_pro_maminku').value) if(cena_darku_pro_maminku > 100){ alert("Drahý dárek!") }else{ alert("Není to tak drahé") } </code> (//Všimni si použití funkce parseInt pro převedení řetězce na číslo//) == Zapsat něco do stránky == Abychom nepoužívali jenom nezvhledný příkaz //alert//, můžeme v javascriptu přímo měnit obsah html prvku: <code html> <div id="text">...</div> <script> document.getElementById('text').innerHTML = 'Hodnota z javascriptu' </script> </code> případně měnit prvku například barvu pozadí <code javascript> document.getElementById('text').style.color = 'green' </code> krouzek/uloha/vanocni_darky.txt Poslední úprava: 2023/11/15 20:54autor: 127.0.0.1