Kroužek Javascriptu - uloha
https://adasek.cz/js/
2026-05-03T04:46:48+00:00Kroužek Javascriptu
https://adasek.cz/js/
https://adasek.cz/js/_media/wiki:dokuwiki.svgtext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)barva_textu
https://adasek.cz/js/uloha:barva_textu?rev=1700081679&do=diff
Úloha: Přebarvování textu
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 (text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)bludiste
https://adasek.cz/js/uloha:bludiste?rev=1700081679&do=diff
Bludiště
Úkol: seznam se s kódem bludiště a implementuj ve funkci „naviguj“ různé algoritmy:
* náhodné hledání cesty
* heuristika: jdu směrem abych pokud možno zmenšil svou vzdálenost k cíli
* nejkratší cesta nalezená hledáním do šířkytext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)element
https://adasek.cz/js/uloha:element?rev=1700081679&do=diff
window.onload = function(){
var novyPrvek = document.createElement("h2")
novyPrvek.innerHTML = "Krásný nadpis"
document.body.appendChild(novyPrvek)
}text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)had
https://adasek.cz/js/uloha:had?rev=1700081679&do=diff
Had
- direction = smer ('north', 'west', 'east', 'south')
- nextStepDoEnlarge = true nebo false jestli jsme prave snedli mrkev
- souradnice pocatku/hlavy => bude soucasti pole nize
- souradnice vsech policek tela - na zacatku hlava, na konci ocas
- snakeBody.unshift([1,1]) = pridani na zacatek
- snakeBody.pop() = odebrani z konce
- doStep() - proved krok
- setDirection(direction)
- enlarge() - nasledujici step neudela pop
- checkCollision() - zkontroluje, ze hlava nema totoznou sour…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)had_class
https://adasek.cz/js/uloha:had_class?rev=1700081679&do=diff
class Snake {
bodyParts = []
direction = 'north'
alive = true
constructor(startX, startY) {
this.bodyParts.push([startX, startY])
}
/*
* Udela jeden krok hada
* */
step() {
if (!this.alive) {
return false
}
const headPosition = this.bodyParts[0]
const newPosition = [headPosition[0], headPosition[1]]
if (direction == 'north') {
newPosition[1]--
} else if (direction == 'south') {
…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)had_v2
https://adasek.cz/js/uloha:had_v2?rev=1700081679&do=diff
text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)had_v3
https://adasek.cz/js/uloha:had_v3?rev=1700081679&do=diff
Počáteční stav:
Koncový stav:
TODO
* Had sní jablíčko
* Jablíčko se zobrazí na dalším místě
* Vyjetí hada z obrazovky = buď smrt hada, nebo se objeví na opačné straně
* Smrt hada = restart hry, nebo hláška
* Had koliduje sám se seboutext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)kalkulacka_git
https://adasek.cz/js/uloha:kalkulacka_git?rev=1700081679&do=diff
Ukázkový programovací úkol: vytvořte kalkulačku - dva inputy pro zadání čísel, tlačítka [+], [-], [*] atp. pro provedení dané operace, výstupní div/input prvek
Doporučené záchyné body:
* initial šablona
* základní html elementytext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)otaceni
https://adasek.cz/js/uloha:otaceni?rev=1700081679&do=diff
<html>
<head>
<style>
#oblast{
max-width:42em; padding:1em;background-color:#ccffcc;
z-index:3;
position:relative;
}
button{
position:relative;
z-index:5;
}
</style>
</head>
<body>
<script>
var rotation=0; //hodnota otoceni
function rotateLeft(){
rotation--;
document.getElementById("oblast").style.transform="rotate("+rotation+"deg)";
}
function rotateRight(){
rotation++;
document.getElementById("oblast").sty…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)pythagorejske_trojuhelniky
https://adasek.cz/js/uloha:pythagorejske_trojuhelniky?rev=1700081679&do=diff
Zadání
Pro svoje spolužáky chcete vytvořit příklady na řešení trojuhelníku.
Všimli jste si, že se nejsnáze řeší trojúhelníky s celočíselnými stranami (takovým se říká <https://cs.wikipedia.org/wiki/Pythagorejsk%C3%A1_trojice Pythagoreské>).
Vygenerujte tedy co nevíce takových trojuhelníků, jejichž strany jsou menší než 100.text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)removechild
https://adasek.cz/js/uloha:removechild?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
function vymaz(){
var odebiranyPrvek = document.getElementById('odstavec2')
document.body.removeChild(odebiranyPrvek)
}
/* ]]> */
</script>
</head>
<body>
<p id="odstavec1">Nejaky prvek</p>
<p id="odstavec2">Nezadouci prvek</p>
<button onclick="vymaz()">Smaz</button>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)slovni_uloha
https://adasek.cz/js/uloha:slovni_uloha?rev=1700081679&do=diff
<html>
<head>
<title></title>
</head>
<body>
<script>
function uloha(){
var delkaCesty=parseFloat(document.getElementById('delkaCesty').value);
var rychlostMyslivce=parseFloat(document.getElementById('rychlostMyslivce').value);
var rychlostZeny=parseFloat(document.getElementById('rychlostZeny').value);
var rychlostPsa=parseFloat(document.getElementById('rychlostPsa').value);
//vypocteni casu za ktery se setkaji myslivec a zena
var cas= delkaCe…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)tetris
https://adasek.cz/js/uloha:tetris?rev=1700081679&do=diff
* Čtverečkový systém jako úloha Had
* Objekty:
* HerníPlocha (prázdný čtverečkový grid)
* AktivníKostička (barva, tvar, x, y)
* PoloženáKostička PoloženýČtvereček (barva, tvar, [x,y])
* Linka (ruší se, nebo se ztrácí?)