Kroužek Javascriptu - krouzek
https://adasek.cz/js/
2026-04-19T03:45:10+00:00Kroužek Javascriptu
https://adasek.cz/js/
https://adasek.cz/js/_media/wiki:dokuwiki.svgtext/html2024-04-03T14:13:14+00:00Anonymous (anonymous@undisclosed.example.com)akumulator
https://adasek.cz/js/krouzek:akumulator?rev=1712153594&do=diff
Akumulátor
Opakování - pole
Máte pole nějakých prvků - zde čísel.
let pole = [42, 28, 5, 61, 3, 17]
Procházení pomocí
for (let i=0; i<pole.length; i++){
const cislo = pole[i]
console.log("Nasel jsem v poli prvek " + cislo)
}
nebotext/html2024-04-03T13:42:51+00:00Anonymous (anonymous@undisclosed.example.com)akumulator_uloha
https://adasek.cz/js/krouzek:akumulator_uloha?rev=1712151771&do=diff
Rébus
* Vylušti zprávu a zjisti tajemství! Zapiš tajemství do formuláře, aby se ti zapsal čas.
* Lušti jako programátor, použij for cyklus který bude zprávu znak po znaku překládat.
const zprava = ['---','-...','-.-.','.-','...','','.---','.','','-','._.','.','-...','.-','','---','-...','._.','-.','..','-','','...','.','','-','._.','.--.','.','.-..','..','...-','---','...','-','..','','-.-','-..','-.--','--..','','-.-.','.-..','---','...-','.','-.-','','.-..','..-','...','-','..','---','.…text/html2023-11-22T16:07:02+00:00Anonymous (anonymous@undisclosed.example.com)animace
https://adasek.cz/js/krouzek:animace?rev=1700669222&do=diff
[ Příklady kódu v archivu ZIP]
Cíl: Ukázat dva způsoby jak animovat
Před Vánoci jsme si ukázali pozicování -
vnější kontejner(div) má position: relative a rozměry (width, height)
a vnitřní div (reprezentující třeba autíčko) má position: absolute
(a menší rozměry a třeba background-color).text/html2023-11-22T17:50:22+00:00Anonymous (anonymous@undisclosed.example.com)animace_2023
https://adasek.cz/js/krouzek:animace_2023?rev=1700675422&do=diff
Výchozí stav: stránka se zobrazeným barevným čtvercem (div)
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Animace 2023</title>
<style>
#ctverec {
position: absolute;
/* rozmery ctverce: sirka(width) a vyska(height) */
width: 200px;
height: 200px;
/* pozice leveho horniho rohu ctverce vuci parent elementu:display:
top = jak daleko od horni hrany
left = jak daleko od leve hrany
bottom = jak daleko od …text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)arcade_volleyball
https://adasek.cz/js/krouzek:arcade_volleyball?rev=1700081679&do=diff
Arcade Volleyball
Cíl: s použitím knihovny matter.js vytvoříme 2d hru, ve které si dva hráči pinkají s míčkem. Inspirací je prastará DOSová hra Arcade Volleyball (video).
* [výchozí zdrojový kód] (zip je nutné rozbalit)
Úkoly
1) Správně napojit ovládání druhého hráče.
Proměnnétext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)architektura_hra
https://adasek.cz/js/krouzek:architektura_hra?rev=1700081679&do=diff
Role
Měřič
Tvým úkolem je měřit teplotu v nádobě (hrneček, láhev). K tomu dostáváš teploměr.
Naměříš hodnotu každou minutu a zapíšeš na barevný papírek společně s časem. Například:
15:00 15°C
Server + Databázetext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)async_await
https://adasek.cz/js/krouzek:async_await?rev=1700081679&do=diff
Doprovodný zdrojový kód:
Intro
Většina procedurálních jazyků primárně používá blokující funkce
* čekání na vstup (klávesa, myš) uživatele
* načítání dat ze souboru
* síťové dotazy
Například v pythonu:
jmeno = input('Kdo jsi?\n') # zde se čeká dokud uživatel nenapíše jméno
# teď můžu pracovat s hodnotou proměnné jméno, mám ji načtenou
print(f"Ahoj {jmeno}")text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)auticko
https://adasek.cz/js/krouzek:auticko?rev=1700081679&do=diff
Úloha: Autíčko
Vaším úkolem bude vytvořit hru, ve které se jezdí autíčkem. Autíčko je ovládáno šipkami, které mění jeho směr a zvyšují-snižují jeho rychlost.
K tomuto cíli se budeme dostávat postupně:
Autíčko
Auto může být reprezentováno elementemtext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)auticko2
https://adasek.cz/js/krouzek:auticko2?rev=1700081679&do=diff
Autíčko
Ovládání z klávesnice
Došli jsme k poznání, že kód pro zachytávání stisků kláves:
document.addEventListener('keypress', function(event){
if(event.key=== 'w' || event.key=== 'W'){
zrychli();
}
//dalsi klavesy
});text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)auticko3
https://adasek.cz/js/krouzek:auticko3?rev=1700081679&do=diff
Převod úhlu a skalární rychlosti na speedX, speedY
function getXDiff(angle,velocity){
var angleRad=((angle+90)/180)*Math.PI;
return Math.cos(angleRad)*velocity;
}
function getYDiff(angle,velocity){
var angleRad=((angle+90)/180)*Math.PI;
return Math.sin(angleRad)*velocity;
}text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)auticko_akcelerace
https://adasek.cz/js/krouzek:auticko_akcelerace?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Auto</title>
<style>
#parkoviste {
width: 500px;
height: 500px;
background-color: gray;
position: absolute;
}
#auticko{
transform: rotate(152deg);
width: 100px;
height: 50px;
background-color: transparent;
background-size: cover;
background-image:url('auto.svg');
position: relative;
left: 250px;
top: 250px;
}
</style>
</head>
<body>
<div id="parkoviste">
<div id="auticko"></div>
</div>
<butt…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)auticko_kolize
https://adasek.cz/js/krouzek:auticko_kolize?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Auto</title>
<style>
html, body {padding: 0; margin:0}
#parkoviste {
width: 1200px;
height: 800px;
background-color: gray;
background-size: cover;
position: absolute;
overflow: hidden;
}
#auticko{
transform: rotate(152deg);
width: 100px;
height: 50px;
background-color: transparent;
background-size: cover;
background-image:url('auto.svg');
position: absolute;
left: 250px;
top: 250px;
}
.kuzelka{…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)auticko_objekty
https://adasek.cz/js/krouzek:auticko_objekty?rev=1700081679&do=diff
Úkoly
* Omezte auto parkovištěm: vyberte si z možností:
* Náraz do stěny zastaví auto, zastavené auto lze pak otočit a rozjet zpět, případně vycouvat
* Stěnu parkoviště lze překročit, auto které vyjede doprava se pak ovšem vrátí zlevatext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)auticko_otacejici
https://adasek.cz/js/krouzek:auticko_otacejici?rev=1700081679&do=diff
Úkoly
* Doplňte reakci na ovládání klávesami (zrychlování, zpomalování, otáčení)
<!DOCTYPE html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auticko 2019-11-13</title>
<style>
#hra {
width:80%;
margin:0 auto;
height:80vh;
background-color:#f0f0f0;
border:2px solid black;
position:relative;
overflow:hidden;
}
.auticko {
width:100px;
height:200px;
background-color:green;
position:absolute;
}
</style>
</head>
<b…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)balonky
https://adasek.cz/js/krouzek:balonky?rev=1700081679&do=diff
Obrázky
* luk
* šipka
* balónek
([ balonek obrazky v zip])
Cíl
Vytvořte hru, ve které se na levé straně obrazovky objevují a stoupají balónky. Hráč je v roli střelce, který z pravé strany obrazovky vystřeluje šípy. Když šíp protne balónek, balónek praskne a hráči se započítá bod. Cílem hráče je nasbírat co nejvíce bodů za daný čas, třeba za dvě minutytext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)balonky_pole
https://adasek.cz/js/krouzek:balonky_pole?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
#plocha {
background-color: rgb(120, 200, 200);
width: 800px;
height: 600px;
position: relative;
}
#sip {
background-color:rgb(100,100,255);
background-image: url('sip.svg');
background-size: 100% auto;
background-position: top left;
width: 80px;
height: 22px;
position: absolute;
top: 400px;
left: 600px;
}
/* trida (class) */
.balonek {
background-color: red;
background-image: url('balo…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)bludiste
https://adasek.cz/js/krouzek:bludiste?rev=1700081679&do=diff
function pohybHrace(event){
if(!bylPohyb && event.code == "ArrowDown"){
// ukazkovy pohyb panacka dolu
const cilovaY = player.y + 1
const cilovaX = player.x
if(mapa[cilovaY][cilovaX] == ' '){
player.x = cilovaX
player.y = cilovaY
}
bylPohyb = true
}
}
document.addEventListener("keydown", pohybHrace);text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)bludiste2
https://adasek.cz/js/krouzek:bludiste2?rev=1700081679&do=diff
Výchozí stav
* hráč se pohybuje klávesami
* dvě nepohybující se příšery
/* Javascript */
// obalová funkce zajistí, že se vše spustí až po načtení dokumentu
(function() {
const mapa = [
['X','X','X','X','X','X','X','X','X','X','X'], // y=0
['X',' ',' ','X',' ',' ',' ',' ','X',' ','X'], // y=1
['X',' ',' ','X','X',' ','X',' ','X',' ','X'], // y=2
['X',' ','X','X',' ',' ','X',' ','X',' ','X'], // y=3
['X',' ','X',' ',' ','X','X',' ',' ',' ','X'], // y=4
['X',' ',…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)bludiste3
https://adasek.cz/js/krouzek:bludiste3?rev=1700081679&do=diff
text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)bludiste_hledani
https://adasek.cz/js/krouzek:bludiste_hledani?rev=1700081679&do=diff
Bludiště - rekapitulace
Zadání
Na začátku jsme brainstormovali zadání - hra s hrdinou, co se snaží projít bludištěm (do nějakého cílového políčka). Variace je Sokoban = hrdina posouvá bedny na cílová místa. Exotičtější varianta je třebatext/html2023-12-13T16:15:43+00:00Anonymous (anonymous@undisclosed.example.com)button_onclick
https://adasek.cz/js/krouzek:button_onclick?rev=1702484143&do=diff
Úkoly
* Jukni na výchozí kód, který po stisknutí tlačítka změní pozadí na zelené.
* Změň odstín zelené z green na lightgreen
* Vytvoř nové tlačítko, které změní pozadí na červené a pořádně otestuj
* Postup dál
Výchozí stavtext/html2023-12-13T16:48:47+00:00Anonymous (anonymous@undisclosed.example.com)button_onclick2
https://adasek.cz/js/krouzek:button_onclick2?rev=1702486127&do=diff
Úkoly
* Seznam se s kódem
* Vytvoř nové tlačítko, které bude přidávat jiné vánoční https://emojipedia.org/
Výchozí stav
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Button</title>
<style>
</style>
<script>
function pripis(){
document.getElementById('output').innerHTML += '🎄'
}
</script>
</head>
<body>
<button onclick="pripis()">Připiš</button>
<p id="output"></p>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)caesarova_sifra
https://adasek.cz/js/krouzek:caesarova_sifra?rev=1700081679&do=diff
String.prototype.replaceAt = function(index, character) {
return this.substr(0, index) + character + this.substr(index+character.length);
};
var retezec = "AHOJ"
for(var i = 0;i<retezec.length;i++){
console.log(retezec[i])
if (retezec[i] == "A"){
retezec = retezec.replaceAt(i,"E")
}
}
console.log(retezec)text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)cas
https://adasek.cz/js/krouzek:cas?rev=1700081679&do=diff
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript abc</h2>
<p id="demo"></p>
<script>
var praveTed = new Date();
var dnes = new Date("2020-05-13");
document.getElementById("demo").innerHTML = dnes;
var predtim = new Date("2019-03-03");
document.getElementById("demo").innerHTML =
predtim + '<br>' + dnes + "<br>" +
"uplynulo dnu: " + (dnes-predtim)/1000/60/60/24;
</script>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)class
https://adasek.cz/js/krouzek:class?rev=1700081679&do=diff
chodec.js
Chodec = function(herniPlocha){
/* Pocatecni pozice */
this.x=200;
this.y=200;
this.rychlost=0;
this.uhel=0;
this.mujElement = document.createElement('div');
this.mujElement.className="chodec";
herniPlocha.appendChild(this.mujElement);
}
Chodec.prototype.vykresli = function(){
//Aktualizuj souradnice dle rychlosti
var rychlostX = getXDiff (this.uhel, this.rychlost);
var rychlostY = getYDiff (this.uhel, this.rychlost);
this.…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)css
https://adasek.cz/js/krouzek:css?rev=1700081679&do=diff
CSS
Vlastnosti
Barvy
* color = barva textu, rámečů, atp.
* background-color
Možné použít pojmenované barvy (anglicky), hexa zápis, rgb, rgba
p {
color: black;
background-color: #ffaaaa;
}
h1, h2 {
color: rgb(0,50,50);
background-color: rgba(200, 255, 255, 0.5);
}text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)css_2023
https://adasek.cz/js/krouzek:css_2023?rev=1700081679&do=diff
Opakování z minula
S použitím předchozích znalostí o HTML:
* Najděte svoji html stránku z minula
* Vytvořte druhý html soubor s jiným obsahem
* Propojte oba soubory navzájem prostřednictvím odkazů <a href="druha.htm">Druhá stránka</a>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)css_pozicovani
https://adasek.cz/js/krouzek:css_pozicovani?rev=1700081679&do=diff
Pozicování v CSS
Počátky
* Tok dokumentu zhora dolů
* display: block, display: inline a display: inline-block
* float:left a right
Omezující! Web není knížka, chce horizontální členění!
Obtékání příklad
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
div#sloupek {
background-color: green;
width: 30%;
height: 1200px;
float: left;
}
#sloupek a{
…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)css_pozicovani_a_pohyb
https://adasek.cz/js/krouzek:css_pozicovani_a_pohyb?rev=1700081679&do=diff
<!DOCTYPE html>
<html>
<style>
body {position: relative}
#seno {position: absolute;left:50px;top:30px}
</style>
<body>
<img id="seno" src="http://adasek.cz/menu/fotky.jpg">
</body>
<script>
document.getElementById("seno").style.top = 120*Math.random() +"px"
</script>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)css_text
https://adasek.cz/js/krouzek:css_text?rev=1700081679&do=diff
p {
width: 50%;
background-color: white;
font-family: "Times New Roman", serif;
font-weight: bold;
letter-spacing: 0em;
line-height: 120%;
color: rgb(0,0,50);
text-shadow: red 0px 0px 10px, yellow 1px 1px 1px;
font-style: italic;
text-decoration: underline;
word-spacing: 0.2em;
text-transform: uppercase;
}text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)cykly_ulohy
https://adasek.cz/js/krouzek:cykly_ulohy?rev=1700081679&do=diff
Jednoduchý cyklus
S použitím for nebo while cyklu vyřešte následující problémy:
Úkol:Násobilka
Do konzole vytiskni popořadě všechny násobky čísla 7 menší než 1000.
Úkol:Náhodný řetězec
Vytvoř funkci, která vrací (returntext/html2024-06-12T14:56:58+00:00Anonymous (anonymous@undisclosed.example.com)denik
https://adasek.cz/js/krouzek:denik?rev=1718204218&do=diff
Deníky předchozích ročníků naleznete v archivu.
27. září 2023
* Úvodní hodina, poučení o bezpečnosti.
* Seznámení s účastníky
4. října
* Pokročilí: samostatná úloha transformace textu
* Začátečníci: základy syntaxe - proměnné a přiřazenítext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)denik_2021
https://adasek.cz/js/krouzek:denik_2021?rev=1700081679&do=diff
Toto je deník ze školního roku 2020/2021. Možná vás zajímá aktuální deník, nebo jiný archivní.
23.září 2020
* Poučení o bezpečnosti a pravidlech
* Plán kroužku
* Javascript v kontextu jiných programovacích jazyků
* Seznámení s účastníky
* První seznámení s Javascriptem - v konzoli prohlížečetext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)denik_2022
https://adasek.cz/js/krouzek:denik_2022?rev=1700081679&do=diff
Toto je archivovaný deník. Zobrazte si ten aktuální
22. září 2021
* Úvodní hodina, pravidla, poučení o bezpečnosti.
* Co je javascript, vztah HTML, CSS a Javascriptu
* Plán kroužku
29. září 2021
* Ukázky použití javascriptu ve webových stránkách
*text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)denik_2023
https://adasek.cz/js/krouzek:denik_2023?rev=1700081679&do=diff
Deníky předchozích ročníků naleznete v archivu.
Školní rok 2022/2023
21. září 2022
* Úvodní hodina, poučení o bezpečnosti.
* Webové aplikace, cloud a jeho výhody a nevýhody
* Střípky z historie programovacích jazyků
* HTML, CSS, webdesigntext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)discoseno
https://adasek.cz/js/krouzek:discoseno?rev=1700081679&do=diff
<!DOCTYPE html>
<html>
<style>
body {position: relative}
#seno {position: absolute;left:50px;top:30px}
</style>
<body>
<img id="seno" src="http://adasek.cz/menu/fotky.jpg">
</body>
<script>
function vykresli(){
document.getElementById("seno").style.top = 120*Math.random() +"px"
}
setInterval(vykresli, 500)
</script>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)documentgetelementbyid
https://adasek.cz/js/krouzek:documentgetelementbyid?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
/* Vychozi CSS stylovani prijde sem*/
/* */
</style>
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
function overHeslo(){
if(document.getElementById('heslo').value == "bagr"){
document.body.innerHTML = 'Tajna cast'
}
}
function zmenJmeno(){
let jmeno = document.getElementById("jmeno").value
jmeno = jmeno.toUpperCase().replace("A"…text/html2024-05-22T16:08:55+00:00Anonymous (anonymous@undisclosed.example.com)emoji_sifra
https://adasek.cz/js/krouzek:emoji_sifra?rev=1716394135&do=diff
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Czech Letters to Emojis</title>
<style>
#output {
font-size: 2em;
white-space: pre-wrap;
}
</style>
<script>
function translateToEmoji() {
const letterToEmoji = {
'A': '🎉', 'B': '🌟', 'C': '🎈', 'Č': '🍀', 'D': '🚀', 'Ď': '🌹', 'E': '🎵', 'É': '🧸',
…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)expressjs
https://adasek.cz/js/krouzek:expressjs?rev=1700081679&do=diff
Úkol
* Vyzkoušejte si vytvořit vlastní ExpressJS aplikaci (běží na NodeJS) - viz návod (1)
* Sami si najděte curl příkazy pro testování svých POST a GET endpointů, případně zkuste v Nástrojích pro vývojáře v prohlížeči.
* Jak správně strukturovat ExpressJS projekt? Představte si, že bude mít endpointů třeba 100!text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)funkce
https://adasek.cz/js/krouzek:funkce?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Louka</title>
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
var louka = {
sezranaTrava: 0,
pocetBlech: 10
}
function krecek(stav){
console.log("Chramst "+Math.random())
stav['sezranaTrava'] += 1
}
krecek(louka)
krecek(louka)
krecek(louka)
krecek(louka)
console.log("sezrana trava:" + louka['sezranaTrava'])
c…text/html2024-05-29T16:28:31+00:00Anonymous (anonymous@undisclosed.example.com)funkce_cviceni
https://adasek.cz/js/krouzek:funkce_cviceni?rev=1717000111&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
</style>
</head>
<body>
<input id="vstup">
<button onclick="vypocitej()">Klikni</button>
<p id="odstavec">Test</p>
<script>
function druhaMocnina(x){
return x*x
}
function vypocitej(){
/* Nacti vstup*/
const vstup = document.getElementById("vstup").value
/* Preved na cislo */
c…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)galerie
https://adasek.cz/js/krouzek:galerie?rev=1700081679&do=diff
Do package.json přidat
"type": "module",
Procházení filesystému
import { readdir } from 'node:fs/promises';
/*
const sharp = require('sharp')
console.log('Resizing')
sharp('alps.jpg')
.resize(1200, 1200)
.rotate(10, {background: "#ff0000"})
.toFile('output.jpg', function(err) {
});
*/
try {
const photoRoot = await readdir('photos');
for (const photoDirName of photoRoot){
console.log(photoDirName);
// Jednotliva galerie
const photoDir = await readdir(`photos/${…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)generovani_spiraly
https://adasek.cz/js/krouzek:generovani_spiraly?rev=1700081679&do=diff
x = 100
y = 100
otoceni = 0
delka = 1
for(var i=0;i<50;i++){
if(otoceni==0){x+=delka}
//TODO: dopln ostatni smery
otoceni=(otoceni+1)%4
delka++
console.log(x,y)
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
.platno {
position: relative;
}
.bod {
position: absolute;
background-color:black;
width:2px;
height:2px;
}
</style>
</head>
<body>
<div class='platno' id="platno"></div>
<script>
x…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)git
https://adasek.cz/js/krouzek:git?rev=1700081679&do=diff
GIT - verzovací systém
Nastavení uživatele
Uvnitř Git console, nebo cmd (je třeba mít nainstalovaný GIT)
git config --global user.email "someone@example.com"
git config --global user.name "Jmeno"
Klíč
Vytvoření SSH klíče (na Windows)text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)gps
https://adasek.cz/js/krouzek:gps?rev=1700081679&do=diff
text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)html
https://adasek.cz/js/krouzek:html?rev=1700081679&do=diff
" Vygeneruj lekci věnující se HTML sémantice. Popiš základní vlastnosti, strukturu a atributy nadpisů, odstavců, seznamů, obrázků, tabulek."
Co říká ChatGPT
(upraveno, rozšířeno)
Co je HTML Sémantika?
HTML sémantika je způsob, jakým vtext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)html_sablona
https://adasek.cz/js/krouzek:html_sablona?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
/* Zde bude CSS, například:
* body {
* background-color: red;
* color: white;
* }
* #nejaky-prvek {
* font-size: 120%;
* }
* .trida-prvku {
* margin: 50px;
* padding: 20px;
* }
*/
/* */
</style>
<script>
/* Javascript
* napriklad
* function test(){
* console.log('Ah…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)html_sablona2
https://adasek.cz/js/krouzek:html_sablona2?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
#output {
border:2px solid black;
padding:5px;
}
</style>
</head>
<body>
<div id="output">
test
</div>
<input type="text" id="vstup"></input>
<button onclick="akce()">Akce</button>
<script>
function akce(){
alert("neco se stalo")
//document.getElementById('vstup')
}
</script>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)input
https://adasek.cz/js/krouzek:input?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
</head>
<body>
<input id="vstup" type="text" onchange="pocitej()">
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
function pocitej(){
vstup = document.getElementById('vstup')
console.log("a")
console.log(vstup.value)
}
/* ]]> */
</script>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)input2
https://adasek.cz/js/krouzek:input2?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
</head>
<body>
<input id="vstup" type="text" onchange="pocitej()">
<div id="out"></div>
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
function pocitej(){
vstupPrvek = document.getElementById('vstup')
const hodnotaVstupu = parseFloat(vstupPrvek.value)
const vysledek = hodnotaVstupu * 2
document.getElementById('out').innerHTML = "Vysledek=" + vysle…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)json
https://adasek.cz/js/krouzek:json?rev=1700081679&do=diff
Stahněte si JSON Seznam zastávek PID z <https://pid.cz/o-systemu/opendata/>
Nejjednodušší způsob jak dostat JSON do prohlížeče při práci z filesystému (localhost), je JSONP;
Přidej na začátek staženého json souboru : `var data =`
a ulož jako `stops.js`.
Pak můžeš použít pomocný html soubor - a psát kód pracující s daty do něj, nebo do konzole.text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)json_lexikon_zvirat
https://adasek.cz/js/krouzek:json_lexikon_zvirat?rev=1700081679&do=diff
Lexikon zvířat v JSON (zdroj: ZOO Praha, licence CC0)
Stahněte si jeho JSONP verzi: lexikon.js, kterou můžete vložit do svojí stránky:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Lexikon zvířat</title>
<style>
</style>
<script src="lexikon.js"></script>
<script>
/* <![CDATA[ */
console.log(lexikon['zvirata'][0])
/* ]]> */
</script>
</head>
<body>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)kontakt
https://adasek.cz/js/krouzek:kontakt?rev=1700081679&do=diff
Kontakt
Vedoucí kroužku
Omluvy účastníků narychlo sms, nápady a otázky nejlépe e-mailem
* Ing. Adam Benda
* adam@adasek.cz
* (+420) 605 777 278
* facebook
Stanice Techniků Vyšehrad
Přihlášky, dlouhodobé omluvy, když mě nezastihnete
* Web:text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)logika
https://adasek.cz/js/krouzek:logika?rev=1700081679&do=diff
Hodnota v nějakém rozmezí:
vek >= 10
vek < 20
function prihlaskaPlatna(){
if(vek >= 10 && vek < 20) {
// prihlaska plati
return true
}
return false
}
function prihlaskaPlatna(){
return (vek >= 10 && vek < 20)
}
// zavolani
if(prihlaskaPlatna() && poplatekZaplacen()){
// posli mail ze je to v pohode
}
// tautologie (vždy splněno)
(vek >= 10 || vek < 20)
věk větší než deset, nebo věk menší než dvacet
// kontradikce (nesplněno nikdy)
vek < 10 && vek > 2…text/html2024-06-12T15:11:19+00:00Anonymous (anonymous@undisclosed.example.com)matterjs
https://adasek.cz/js/krouzek:matterjs?rev=1718205079&do=diff
* Dokumentace matter js
* Kód k experimentování, aneb co vygenerovala ChatGPT (na třetí pokus, prompt „Can you create a simple angry birds clone using matter.js?“)
<!DOCTYPE html>
<html>
<head>
<title>Angry Birds Clone</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script>
// Module aliases
const { Engine, Render, Runner, Bodies, Mo…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)mereni_rychlosti_internetu
https://adasek.cz/js/krouzek:mereni_rychlosti_internetu?rev=1700081679&do=diff
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 10px;
height: 0px;
background-color: black;
float:left;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
var start_time = new Date();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var end_time = new Date();
var time = (end_time - start_time)/1000;
document.getElementById("result").innerHTML = "5MB staženo za "+time+"s";
}
…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)movingseno
https://adasek.cz/js/krouzek:movingseno?rev=1700081679&do=diff
<!DOCTYPE html>
<html>
<style>
body {position: relative}
#seno {position: absolute;left:50px;top:30px}
</style>
<body>
<img id="seno" src="http://adasek.cz/menu/fotky.jpg">
</body>
<script>
var x = 0
var y = 0
function vykresli(){
document.getElementById("seno").style.top = y +"px"
document.getElementById("seno").style.left = x +"px"
x++
if(x>300){x=0}
}
setInterval(vykresli, 50)
</script>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)mys
https://adasek.cz/js/krouzek:mys?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Míč</title>
<style>
body {
background-color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#herni_plocha {
background-color:#ffaaaa;
width: 300px;
height:300px;
}
#mic {
background-color: green;
wi…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)nodejs
https://adasek.cz/js/krouzek:nodejs?rev=1700081679&do=diff
Úkoly
* Seznamte se s nodejs, ověřte že máte nainstalovanou rozumně novou verzi a zkuste interakci s javascriptem skrze NodeJS terminál.
* Napište hello world který načte nějaký text ze standardního vstupu (například uživatelovo jménotext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)objekty
https://adasek.cz/js/krouzek:objekty?rev=1700081679&do=diff
// vytvoreni objektu ve kterem budeme pocitat
var poctyPismenek = {}
for(var i=0; i< text.length; i++){
var pismenko = text[i]
if(!(pismenko in poctyPismenek)){
// v objektu jeste klic pismenko neni - vytvorime ho
poctyPismenek[pismenko]=0
}
poctyPismenek[pismenko]++
}text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)objekty_psi
https://adasek.cz/js/krouzek:objekty_psi?rev=1700081679&do=diff
Úkoly
* Přidejte formulářové prvky, zapsání do objektu a zobrazení pro další atributy: vek, pohlavi, vyska
* Zkusíme si vypsat vše co o pejskovi víme: for cyklus pro objekty
* Z pole vsichniPsi zkuste vybrat všechny splňující nějaký atribut - například mladší 3 lettext/html2024-05-15T17:00:20+00:00Anonymous (anonymous@undisclosed.example.com)objekt_cviceni
https://adasek.cz/js/krouzek:objekt_cviceni?rev=1715792420&do=diff
1. Vytvoření objektu: Definujte objekt s názvem `student` s klíči pro name (jméno), `age` (věk) a `grade` (třída) a přiřaďte jim vhodné hodnoty.
const kniha = {
"jmeno": "Vojna a mír",
"autor": "F.M. Dostojevskij",
"stran": 470,
"rokVydani": 1977
}text/html2024-05-22T16:57:38+00:00Anonymous (anonymous@undisclosed.example.com)objekt_sifra
https://adasek.cz/js/krouzek:objekt_sifra?rev=1716397058&do=diff
Udělejte překlad z textu od uživatele ( .toUpperCase() ) do svého obrázkového kódu.
Písmenko Emoji A 🎉 B 🌟 C 🎈 Č 🍀 D 🚀 Ď 🌹 E 🎵 É 🧸 Ě 🎁 F 🍕 G 🏆 H 🐱 CH 🌞 I 🍎 Í 🃏text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)obrazovka
https://adasek.cz/js/krouzek:obrazovka?rev=1700081679&do=diff
Rozbalte si a otevřete html v prohlížeči.
Úkoly - nakreslete:
* kříž - plusko
* do prostředka tabulky, ať je jakkoliv velká
* vodorovné čáry každou pátou linku
* šachovnici (0,0 bílá)
* šachovnici (0,0 černá)text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)obsahuje3e
https://adasek.cz/js/krouzek:obsahuje3e?rev=1700081679&do=diff
function obsahuje3e(str){
if((str.match(/e/g) || []).length >= 3){
return true;
}
}
Pouze první část zastávky:
function obsahuje3e(str){
if((str.split(",")[0].match(/e/g) || []).length >= 3){
return true;
}
}text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)openai_api
https://adasek.cz/js/krouzek:openai_api?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8"/>
<title>OpenAI API example</title>
<style>
</style>
<script>
// Generate your API key on https://beta.openai.com/account/api-keys
const API_TOKEN = 'get-your-own'
async function queryOpenAI() {
const url = 'https://api.openai.com/v1/completions'
const bearer = 'Bearer ' + API_TOKEN
let apiResponse = null
const prompt = 'Bylo nebylo,'
try {
…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)osnova
https://adasek.cz/js/krouzek:osnova?rev=1700081679&do=diff
Osnova
Cílem kroužku je seznámit účastníky s algoritmizací a základními návrhovými vzory v prostředí jazyka Javascript. Naučíme se základy programování - podmínky a cykly, izolování funkčních celků a základy objektově orientovaného programování.text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)otacejici_se_obrazec
https://adasek.cz/js/krouzek:otacejici_se_obrazec?rev=1700081679&do=diff
(Místo drak.svg použijte jméno svého obrázku)
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
/* Vychozi CSS stylovani prijde sem*/
body {
text-align: center;
}
img {
max-width: 40em;
}
</style>
<script>
let otoceni = 10
let kliknuto = false
function otoc(){
if(kliknuto){
otoceni += 1
}
const obrazek = document.getElementById("drak-obrazek")
// obrazek.style.transform = "rotate(" + otoceni + "deg)"
…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)piskvorky
https://adasek.cz/js/krouzek:piskvorky?rev=1700081679&do=diff
Základ pro piškvorky,
kód od Aleše - děkuji.
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<style>
table {border-collapse:collapse}
td {
border:2px solid black;
padding:10px;
}
</style>
<title>
Piškvorky
</title>
</head>
Piškvorky
<br>
<br>
<body>
<table>
<tr>
<td id="bunka1_1"></td>
<td id="bunka1_2"></td>
<td id="bunka1_3"></td>
</tr>
<tr>
<td id="bunka2_1"></td>
<td id="bunka2_2"></td>
<td id="bunka2_3"></td>
</tr>
<tr>
<td id="bunka3_1"></td>
<td id="bunka3_2"></td>
<td id="bunka3_3"></td>
</…text/html2024-01-24T16:12:03+00:00Anonymous (anonymous@undisclosed.example.com)podminky_a_logika
https://adasek.cz/js/krouzek:podminky_a_logika?rev=1706112723&do=diff
Hledání výchozího stavu (opakování)
Najděte svůj kód z minula a upravte jej, aby stránka obsahovala:
* HTML:
* Vstupní políčko (<input>), s id (např. id="vstup") - tak aby k němu šlo přistoupit v javascriptu pomocí document.getElementById('vstup')text/html2024-01-24T15:20:15+00:00Anonymous (anonymous@undisclosed.example.com)podminky_a_logika_vychozi
https://adasek.cz/js/krouzek:podminky_a_logika_vychozi?rev=1706109615&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Podmínky</title>
<style>
</style>
<script>
function spocitej() {
// nacti z inputu
const vstupRetezec = document.getElementById('vstup').value
const vstupCislo = parseFloat(vstupRetezec)
// vypocti neco
const vysledek = vstupCislo + 1
// vypis to
document.getElementById('vystup').innerHTML = vysledek
…text/html2024-02-28T16:33:48+00:00Anonymous (anonymous@undisclosed.example.com)pole
https://adasek.cz/js/krouzek:pole?rev=1709138028&do=diff
* <https://www.w3schools.com/js/js_arrays.asp>
* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>
Balíček karet
* Vypište první kartu z balíčku
* Vypište desátou a jednáctou kartu z balíčku
* Vyměňte první a poslední kartu v tomto balíčku, vypište balíček pro kontrolu.
* Vypište, kolik karet je v balíčkutext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)pole_graf
https://adasek.cz/js/krouzek:pole_graf?rev=1700081679&do=diff
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 10px;
height: 0px;
background-color: black;
float:left;
}
</style>
</head>
<body>
<div id="a0"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
<script>
var pole = [10, 15, 30, 36, 42, 54, 200]
for (var i=0;i<pole.length;i++){
document.getElementById('a'+i).style.height=pole[i]+'px'
}
</script>
</body>
</html>text/html2024-02-28T14:56:38+00:00Anonymous (anonymous@undisclosed.example.com)pole_karet_generovani
https://adasek.cz/js/krouzek:pole_karet_generovani?rev=1709132198&do=diff
Kód generující zamíchaný balíček
Rozšiřující materiál ke stránce pole
//https://javascript.info/task/shuffle
function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}
values = [7,8,9,10,'j','q','k','a']
colors = ['♠','♡','♢','♣']
cards = []
for (let i=0;i<values.length;i++){
for (let j=0;j<colors.length;j++){
cards.push(values[i]+colors[j])
}
}
shuffle(cards)
console.log(cards)text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)pole_textarea_cisel
https://adasek.cz/js/krouzek:pole_textarea_cisel?rev=1700081679&do=diff
Úlohy
* Funkce počítající:
* sumu prvků pole
* maximum/minimum
* průměr
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
textarea {width: 100%; height: 10em; font-size: 3vw;}
</style>
<script>
function vypocti(){
const vstup = document.getElementById('vstup').value
const poleRetezcu = vstup.split("\n")
const poleCisel = poleRetezcu.map(x => parseFloat(x))
console.log(poleCisel)
console.log(poleCi…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)postreh
https://adasek.cz/js/krouzek:postreh?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Postřeh</title>
<style>
body {background-color: red}
#vysledek {
font-size: 200%;
font-weight: bold;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<script>
/* <![CDATA[ */
/* Sem prijde javascript k…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)pozicovani_priklad
https://adasek.cz/js/krouzek:pozicovani_priklad?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
#plocha {
background-color: rgb(120, 200, 200);
width: 300px;
height: 300px;
position: relative;
}
#objekt1 {
background-color: black;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
left: 120px;
}
#objekt2 {
background-color: red;
width: 30px;
height: 30px;
position: absolute;
top: 30px;
left: 220px;
}
</style>
<link rel="stylesheet" type="text/css" href="styl.css">
<s…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)prace_s_textem
https://adasek.cz/js/krouzek:prace_s_textem?rev=1700081679&do=diff
Úkoly:
* text do velkých písmenek
* Prvních 100 znaků textu (substr)
* odstranit samohlásky
* změnit tečky na | nebo odřádkování
* odstranění české diakritiky
* Caesarova šifra
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Práce s textem</title>
<style>
textarea {width:80%;height:12em}
</style>
<script>
/* <![CDATA[ */
function zmenText1(text){
text = text.toLowerCase()
return text
}
…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)prace_s_textem_prubezne
https://adasek.cz/js/krouzek:prace_s_textem_prubezne?rev=1700081679&do=diff
// Postupne pridavani do noveho pole
let textPole = []
for(let i=0; i < nezalomenyText.length; i++){
if(i % delkaRadku == 0){
textPole.push(nezalomenyText[i] + "<br>")
} else {
textPole.push(nezalomenyText[i])
}
}
const zalomenyText = textPole.join("")text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)prace_s_textem_sablona
https://adasek.cz/js/krouzek:prace_s_textem_sablona?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Zalamování</title>
<style>
input[type=text] {
width: 95%;
}
#vystup {
white-space: nowrap;
}
</style>
<script>
function zalamText(){
// vstup
const nezalomenyText = document.getElementById('vstup').value
const delkaRadku = parseInt(document.getElementById('delka-radku').value)
// todo: udelej zmeny
let zalomenyText = nezal…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)progress
https://adasek.cz/js/krouzek:progress?rev=1700081679&do=diff
<progress id="posuvnik" max="100" value="0">
<script>
var hodnota = 0
setInterval(
function(){
hodnota+=1
document.getElementById("posuvnik").value=hodnota
},10
)
</script>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)promenne
https://adasek.cz/js/krouzek:promenne?rev=1700081679&do=diff
// spocteni matematickeho vyrazu
const vysledek = (5+2)*3
// vypis do konzole
console.log(vysledek)
// vypis do tela stranky
document.body.innerHTML = vysledektext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)rebusy
https://adasek.cz/js/krouzek:rebusy?rev=1700081679&do=diff
Součet tří čísel, která jsou po sobě jdoucí, nám ve výsledku dá výsledné číslo 348. Jaká jsou to tři čísla?
<https://mozkolam.cz/matematicke-hlavolamy/hratky-s-cisly/pocet-devitek/>
Která tři kladná čísla mají stejný součet i součin?
Jaké je nejmenší celé číslo, které se rovná sedminásobku součtu svých číslic?text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)retezce
https://adasek.cz/js/krouzek:retezce?rev=1700081679&do=diff
Vykopírujte si část článku z <https://cs.wikipedia.org/wiki/Praha> . Použití v programu: buď napevno do řetězce:
const text="Praha (německy Prag; v jiných jazycích často Prague či Praga) je hlavní město a současně největší město Česka..."
nebo si vytvořte stránku, na nítext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)retezce_for
https://adasek.cz/js/krouzek:retezce_for?rev=1700081679&do=diff
const text="Ahoj svete".toUpperCase()
for(let i=0;i<text.length;i++){
console.log(text[i])
}text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)ruzne_html
https://adasek.cz/js/krouzek:ruzne_html?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
/* Vychozi CSS stylovani prijde sem*/
ul {list-style-type:square}
ul ul {list-style-type:circle}
table {border-collapse: collapse}
td {
border: 2px solid black;
padding:10px;
}
/* */
</style>
</head>
<body>
<ul>
<li>Obratlovci
<ul>
<li>Savci</li>
<li>Obojživelníci</li>
<li>Plazi</li>
</ul>
</li>
<li>Bezobratlí
<ul>
<li>Pavoukovci</li>
<li>…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)sablona_formular
https://adasek.cz/js/krouzek:sablona_formular?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Formulářová šablona</title>
<style>
p {display:flex}
p label {display:block; width: 10em }
</style>
<script>
/* <![CDATA[ */
function provedVypocet(){
var vstup1_hodnota = document.getElementById('vstup1').value
var vstup2_hodnota = document.getElementById('vstup2').value
var vystup = "Výchozí výstup"
//vyzkoušej:
//vystup = vstup1_hodnota + vstup2…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)sablona_pole
https://adasek.cz/js/krouzek:sablona_pole?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Pole</title>
<style>
td {border-width:1px solid black;padding:0.3em;}
table {border-collapse:collapse;}
</style>
</head>
<body>
<div id="vstup">
<input type="text" id="vstupni_text">
<button onclick="vstupA()">A</button>
<button onclick="vstupB()">B</button>
</div>
<div id="vystup"></div>
<table><tr id="tabulka_pole"><td></td></tr></table>
<script>
/* <![CDATA[ */
//Funkce vo…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)sablona_transformace
https://adasek.cz/js/krouzek:sablona_transformace?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
</head>
<body>
<div id="vystup"></div>
<script>
/* <![CDATA[ */
var veta="Lorem ipsum dolor sit amet."
var vystup=""
//neco udelam s vetou, kopiruju ji do vystupu
for(var i=0;i<veta.length;i++){
vystup+=veta[i];
}
document.getElementById('vystup').innerHTML=vystup;
/* ]]> */
</script>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)sandbox_sablona
https://adasek.cz/js/krouzek:sandbox_sablona?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
/* Sem prijde CSS kod */
</style>
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
/* ]]> */
</script>
</head>
<body>
<h1>Afrika</h1>
<p><span class="jmeno">Afrika</span> je třetí největší kontinent po <span class="jmeno">Asii</span> a <span class="jmeno">Americe</span> s celkovou rozlohou přes 30,3 mil. km², což představuje 20,3 % celkového p…text/html2023-11-28T23:03:39+00:00Anonymous (anonymous@undisclosed.example.com)settimeout_setinterval_dom
https://adasek.cz/js/krouzek:settimeout_setinterval_dom?rev=1701212619&do=diff
(výchozí html soubor najdeš níže)
Úkoly
* Změň 5s po načtení stránky barvu písma nadpisu h1 (Vítejte) na modrou (blue)
* Rozšiř hodiny: ať zobrazují i milisekundy - hodnotu získáš pomocí funkce aktualniCas.getMilliseconds()text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)sharp_js
https://adasek.cz/js/krouzek:sharp_js?rev=1700081679&do=diff
Tohle funguje v nodejs když jste předtím udělali npm install sharp
const sharp = require('sharp')
console.log('Resizing')
sharp('alps.jpg')
.resize(1200, 1200)
.toFile('output.jpg', function(err) {
});text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)slideshow
https://adasek.cz/js/krouzek:slideshow?rev=1700081679&do=diff
* Seznam se se setTimeout a setInterval pro načasování běhu funkce v javascriptu
* Napiš program, který za pět sekund od otevření stránky vypíše zprávu/aktuální čas:
* jako alert (message)
* do input nebo textarea
* do divu nebo nadpisu
* Modifikuj program, aby aktuální čas vypisoval opakovanětext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)slovniky
https://adasek.cz/js/krouzek:slovniky?rev=1700081679&do=diff
Od pole k objektům
Začněme úlohou:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
/* Vychozi CSS stylovani prijde sem*/
/* */
</style>
</head>
<body>
<div id="vystup"></div>
<script>
/* <![CDATA[ */
var tramvaje = [15, 20, 12, 20]
var nalezeno = 0
for(var i=0;i<tramvaje.length;i++){
//vykona se pro kazdy prvek
if(tramvaje[i] == '20'){
nalezeno++
}
}
document.getElementById('vystup').innerHTML =…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)stopky
https://adasek.cz/js/krouzek:stopky?rev=1700081679&do=diff
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript abc</h2>
<p id="demo"></p>
<button onclick="zmacknutoA()">START</button>
<button onclick="zmacknutoB()">STOP</button>
<script>
function zmacknutoA(){
a = new Date()
}
function zmacknutoB(){
b = new Date()
document.getElementById('demo').innerHTML =
(b-a)/1000 + "s"
}
</script>
</body>
</html>text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)synchronni_rekurze
https://adasek.cz/js/krouzek:synchronni_rekurze?rev=1700081679&do=diff
// Faktorial = !n
function faktorial(n){
if(n==0){
return 1
}else{
return n*faktorial(n-1)
}
}
console.log(faktorial(10))text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)uloha_clovece_nezlob_se
https://adasek.cz/js/krouzek:uloha_clovece_nezlob_se?rev=1700081679&do=diff
První verze - zobrazení kruhu
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8"/>
<title>Člověče nezlob se</title>
<style>
#herniPlocha {
position: relative
}
.policko {
border: 1px solid black;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="herniPlocha"></div>…text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)uloha_clovece_nezlob_se2
https://adasek.cz/js/krouzek:uloha_clovece_nezlob_se2?rev=1700081679&do=diff
Postupujeme s prototypem
* zobrazení políček na kruhu
* více hráčů a více figurek každého hráče
* hod kostkou -> hráč může zvolit figurku kterou táhne nebo nasadí
* vyhazování figurek navzájem
* každý hráč má počáteční zásobník figurek, nasazovací místo a cílový domeček (napojený na konkrétní políčko)text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)uloha_clovece_nezlob_se3
https://adasek.cz/js/krouzek:uloha_clovece_nezlob_se3?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8"/>
<title>Člověče nezlob se</title>
<style>
#herniPlocha {
position: relative
}
.policko {
border: 1px solid black;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="herniPlocha"></div>
<script>
function hodKostkou() {
return Math.random() …text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)uloha_dopravni_radar
https://adasek.cz/js/krouzek:uloha_dopravni_radar?rev=1700081679&do=diff
Zadání
Napište funkci vyhodnocující záznam průjezdového radaru.
* Pokud jede vozidlo do 50km/h, zobrazte usmívajícího se smajlíka.
* Pokud jede vozidlo přes 50km/h, zobrazte mračícího se smajlíka
* Pokud jede vozidlo přes 70km/h, upozorněte na piráta silnic - například pomocítext/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)uloha_vyber_barvy
https://adasek.cz/js/krouzek:uloha_vyber_barvy?rev=1700081679&do=diff
Výběr barvy
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.
<input type="range" min="0" max="255" value="50" class="slider" id="redValue">
<input type="range" min="0" max="255" value="50" class="slider" id="greenValue">
<input type="range" min="0" max="255" value="50" class="slider" id="blueValue">text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)uloha_zoo
https://adasek.cz/js/krouzek:uloha_zoo?rev=1700081679&do=diff
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8"/>
<title>ZOO</title>
<style>
body {
box-sizing: border-box
}
#sklad-json {
width: 98%;
height: 50vh;
}
#vsechno {
display: flex;
flex-direction: row;
}
#podminky {
width: 40vw;
}
#sklad {
background-color: rgba(220, 220, 220);
width: 30vw;
}
.vybeh {
border: 0.05em soli…text/html2024-01-03T17:56:13+00:00Anonymous (anonymous@undisclosed.example.com)vanocni_uloha
https://adasek.cz/js/krouzek:vanocni_uloha?rev=1704304573&do=diff
Rozbal si projekt z 2023_vanoce.zip a otevřete ve VSCode a prohlížeči.
Úkoly
* zobraz dárek vždy (změnou css)
* zobraz dárek až po kliknutí na tlačítko
* napozicuj ozdoby na stromeček změnou jejich top a left css vlastností. Můžeš vytvořit i další ozdoby, případně použij i obrázkytext/html2024-01-17T17:12:56+00:00Anonymous (anonymous@undisclosed.example.com)vstup_a_podminky
https://adasek.cz/js/krouzek:vstup_a_podminky?rev=1705511576&do=diff
Úloha
* Vytvoř stránku s tlačítkem a div elementem. Po stisknutí tlačítka do divu vypište „stisknuto“
* Přidejte do stránky textové políčko - input element: <input id="vstup">
* změň, aby se po stisknutí tlačítka načetl vstup v textovém políčku (text/html2023-11-15T20:54:39+00:00Anonymous (anonymous@undisclosed.example.com)vytvareni
https://adasek.cz/js/krouzek:vytvareni?rev=1700081679&do=diff
Obsah na stránce
Máme HTML prvky ve statickém dokumentu, které mají vzhled nastaven pomocí CSS. Jak tyto prvky ovlivnit, vytvořit či smazat v závislosti na akcích uživatele - z prostředí javascriptu?
<div id="testovaci_prvek">Lorem ipsum</div>