Seznam lekcí

18 Karel + soutěž

2020-01-09T19:05:01+00:00

Začnu soutěží programování, která se koná 13.3.2020 a přihlášky do 10.3.2020 viz. zde

A teď k dnešní lekci:

Zjistila jsem že Karel je ještě na živu, takže vyzkoušejte online robotka, který se programuje českými příkazy (fakt je háklivý na češtinu, tak bacha na háčky a čárky).

http://karel.oldium.net/

Karel je robot, který má v základu 4 příkazy - krok dopředu - otočení vlevo - zvednutí předmětu - položení předmětu.

To ale nevadí, protože si můžete směle vytvářet vlastní příkazy, neboli funkce. Tak hurá do toho.

Na rozdíl od našeho oranžového robotka, Karel už umí rozhodování (podmínky) a cykly, což značně rozšiřuje možnosti, jak si s ním hrát. Nemusíme krokovat, ale můžeme mu rovnou říct, ať jde dokud nenarazí na zeď

PRIKAZ-BEZ

DOKUD NENÍ ZEĎ

KROK

KONEC

Kdybyste nemohli najít tak tady je nápověda: http://karel.oldium.net/napoveda.html

...možná tu časem přidám i nějaké video...

17 - kod

2020-01-09T19:05:01+00:00

Vysvoboď se z učebny, najdi správný kód na odemčení dveří:

http://lucie.zolta.cz/programko/tajnyKod/zadejKod.html

Kroužek programování I

2019-09-07T11:31:02+00:00

V kroužku Programování 1 se děti seznámí se základy programování. Je tedy vhodný pro úplné začátečníky. Budeme programovat v jazyku JavaScript, který je jednoduše dostupný na všech počítačích a nevyžaduje instalaci žádných složitých prostředí.

16 Hra - panák zvedá krabici

2020-01-09T19:05:01+00:00

V dnešní lekci jsme přidali panákovi možnost přenášet břemena. Co vám budu vyprávět, zde je kód:

<HTML>
	<HEAD>
		<TITLE></TITLE>
		<META charset="UTF-8">
    
	  <style> 
             #panak {
                  width:50px;
                  position:absolute;
                  top:300px;
                  left:600px;
             }
            #blok{
               width:50px;
               position:absolute;
            }
    </style>
    
	</HEAD>

	<BODY onKeyPress="tuk(event)" >
        <img src="vec2.jpg" id="blok">	
        <img src="panak.png" id="panak">	
        			
        
        

<SCRIPT>
	  var zleva = 600;
          var svrchu = 300;
          var drzim = false; //promenna drzim reprezentuje stav (false = ne = nedrzim, true=ano=drzim)
          
          function tuk(event){
              var x = event.keyCode;
              
              if(x==119){   //W sipka hore
                  svrchu=svrchu-40;
                  document.getElementById("panak").style.top=svrchu+"px";
                  if(drzim){
                      premistiVecKeMe();
                  }
              }
              if(x==115){   //S sipka dole
                  svrchu=svrchu+40;
                  document.getElementById("panak").style.top=svrchu+"px";
                  if(drzim){
                      premistiVecKeMe();
                  }
              }
              if(x==97){  //A sipka doleva
                  zleva=zleva-40;
                  document.getElementById("panak").style.left=zleva+"px";
                  if(drzim){
                      premistiVecKeMe();
                  }
              }
              if(x==100){ //D sipka doprava
                  zleva=zleva+40;
                  document.getElementById("panak").style.left=zleva+"px";
                  if(drzim){
                      premistiVecKeMe();
                  }
              }
              if(x==13){    //enter  
                  premistiVecKeMe();
                  
              }
              if(x==107){ //drzim
                 drzim=true; 
              }
              if(x==109){ //pustim
                 drzim=false; 
              }
              
            
            
          }
          function premistiVecKeMe (){
                  document.getElementById("blok").style.left=zleva;
                  document.getElementById("blok").style.top=svrchu;
          }
			   
	
		</SCRIPT>
	</BODY>
	
</HTML>

15 KeyPress a panák v pohybu

2020-01-09T19:05:01+00:00

Dnes si povíme jak udělat ovládání prvků pomocí kláves, tedy klávesnice. Budeme k tomu potřebovat událost onKeyPress. O událostech obecně jsme si už povídali zde.

Událost onKeyPress dáme do tágu body, protože ten je stále aktivní.

<body onKeyPress="tuk()">

Nyní se provede funkce tuk() při sisku libovolné klávesy. Abychom identifikovali klávesu, která byla stisknuta, přidáme parametr event.

<body onKeyPress="tuk(event)">

Ve funci pak vytáhneme z eventu číslo zmáčknuté klavesy příkazem event.keyCode, nebo event.which. Jeden příkaz fungje na písmenka a druhý na ostatní klávesy jako např. šipky.

function tuk (event) {
     var kodKlavesy=event.keyCode;
}

Pohyb panáčka

Pohyb obrázku na stisk kláves provedeme skze kaskádové styly. Nezapomeňte prvku ve stylech nastavit position:absolute.

<style>
    #panak {position:absolute}
</style>
...
<img src="obrazek.jpg" id="panak">
...
function tuk (event) {
     var kodKlavesy=event.keyCode;
     var zleva = 0;
     if(kodKlavesy==100){
            zleva=zleva+50;
           document.getElementById("panak").style.left=zleva+"px";
     }
}

14 Pole

2020-01-09T19:05:01+00:00

Pole (po anglicky array) je speciální proměnná. Pokud vnímáme klasickou proměnnou jako hrníček, pak pole je nádoba rozdělena do přihrátek. Třeba takové přihrádky na šroubky, z kterých můžeme secvakat libovolně dlouhou řadu.

Pole může obsahovat libovolné množství hodnot. Abychom se v těch hodnotách vyznali, jsou přihrádky očíslovány tzv. indexy. Pole vždy čísluje své přihrádky od nuly. První je tedy nultá.

Pojďme si teď vytvořit pole z obrázku vpravo:

var modre = [3, 2, 4, 1];

Vytvořili jsme pole, které se jmenuje modre a obsahuje hodnoty 3, 2, 4, 1. Abychom se dostali k těmto hodnotám, musíme použít index, který jasně určí přihrátku, do které se v poli máme podívat. Kromě názvu pole musíme do hranatých závorek zadat index (číslo přihrátky) např.: modre[2].

//vypis hodnoty v poli z indexem 2,0,1
document.write(modre[2]);
document.write(modre[0]);
document.write(modre[1]);

Na výstupu pak bude 432 (viz. obrázek vpravo), neboť na třetí pozici pole (index [2] neboť se čísluje od nuly) je uložena hodnota 4, na první pozici index [0] je trojka a modre[1]=2.

Jak mne mile překvapilo, javascript už zvládá příkaz

document.write(modre);

jenž vypíše celé pole. Pokud by to nefungovalo, museli bychom vypisovat pole pomocí cyklu, podobně jako si na dalším příkladě ukážeme výpočet průměru.

Př.: Výpočet průměru:

var znamky = [1,3,1,5,4,2,3,2,1,4,1,2];    //pole známek z kterých chceme vypočítat průměr

//vypočet průměru (sečíst všechny známky a vydelit počtem známek)
var soucet = 0;                                           //promenna do které budu scitat znamky
var pocet_znamek = znamky.length;     //pocet znamek = velikost pole (pocet prvku v poli)

for(var i = 0; i < pocet_znamek; i=i+1)    //každou známku z pole známek
{
     soucet = soucet + znamky[i];               //přičti k proměnné soucet
}
var prumer = soucet / pocet_znamek;
document.write("průměr je "+prumer);

13 Cykly

2020-01-09T19:05:01+00:00

Cyklem označujeme část kódu, který se opakuje. Chceme-li něco udělat třeba tisíckát, můžeme tisíckrát zkopírovat příkaz a nebo to udělat v cyklu.

Nedávno jsem si dělala tuto pomůcku pro kreslení a potřebovala jsem vygenerovat síť tlačítek, které mi zakryjí obrázek. Cykly potřebujeme znát když pracujeme s poli (složitější proměnná o které si povíme více příště).

POZOR! Hrajeme-li si s cykly, velmi snadno se nám stane, že se zacyklíme. Spustíme-li nekonečný cyklus většinou nám zatuhne prohlížeč, v horším případě budeme muset restartovat celý počítač.

Existují tři základní typy cyklů:

while (podmínka) { tělo cyklu }

do { tělo cyklu } while (podmínka)

for ( počáteční hodnota ; podmínka ; krok ) { tělo cyklu }

While je cyklus s podmínkou na začátku. Do-while je cyklus s podmínkou na konci. To je jediný rozdíl. U těchto dvou cyklů si však člověk musí dávat pořádně pozor, aby se nezacyklil. Všchny cykly běží tak dlouho, dokud je podmínka pravdivá. Zapomeneme-li teda uvnitř cyklu, měnit hodnotu proměnné v podmínce, jsme zacyklení.

Př.1: cykly.html

                       var juchu = 1;
			while ( juchu < 11 ) { 
			   	document.write("juchu je ");
			   	document.write(juchu);
				document.write("<br>");
				juchu = juchu + 1;
			}

Kdybych zapoměla na poslední zvýrazněný příkaz cyklu (jako že jsem zapoměla :)), došlo by k zacyklení. Neboť proměnná juchu by se neměnila, zůstavala by stále rovna jedné, a podmínka juchu < 11 by byla stále pravdivá 1<11.

No a protože se na tu kontrolní proměnnou často zapomíná a takové zapomnění, může udělat pěknou paseku, je tu cyklus for. V cyklu for, musíme ošetřit hned na začátku všechno. Kromě samotné podmínky obsahuje hlavička forka počáteční hodnotu a krok (přičtení s každým cyklem), vše odděleno středníkem.

Př.2: cykly-for.html

                       for (var juchu=1; juchu < 11 ; juchu = juchu+1) { 
			   	document.write("juchu je ");
			   	document.write(juchu);
				document.write("<br>");
			}

V tomto příkladu jste viděli přepsaný př.1 do forka. Všiměte si že dva řádky z př.1 se nyní ocitly v závorce spolu s podmínkou.

12 Formuláře + Robot

2020-01-09T19:05:01+00:00

Doposud jsme řešili obsluhu uživatelských akcí pomocí událostí. Tlačítku jsme nastavili onClick událost, která nás odkázala na funkci v skriptové části. Na podnět Toma si dnes představíme formuláře a vytvoříme si svůj vlastní "vyhledávač":

Vyhledej videa na téma:

Proč formuláře?

Jak už jsem zmínila dříve, v rámci výuky bastlíme všechno dohromady - styly, skripty, html - vše v jednom dokumentu. Protože děláme "jednoduché" věci na několik málo řádku, je tento způsob přehledný. V praxi, kdy třeba jen styly jsou na sto řádků, bychom se v takovém zdrojáku uskrolovali k smrti. No a stejně jako můžeme styly vypreparovat do zvláštního souboru s koncovkou .css, můžeme i programovou část řešit zvlášť. Formuláře slouží k tomuto způsobu, kdy ve formuláři jen sesbíráme data a pošleme je na zpracování někam pryč.

Jak na to?

Všechny ovládací prvky (tlačítka, kolonky, zaškrtávátka,...), tedy tágy <input>, strčíme do formuláře.

<form action="https://www.youtube.com/">
    <input type="text" name="tema">
    <input type="submit">
</form>

Každý formulář by měl mít tlačítko k odeslání <input type="submit">, kterým dojde k odeslání formuláře.

? Kam se formulář odešle určuje atribut formuláře action. V ukázce jsme zadali zadali, že chceme formulář odeslat ke zpracování na youtube.

? Co vlastně posíláme na youtube?? Posíláme tam vyplněná data z našeho formuláře. Jednotlivé prvky formuláře proto musíme mít pojmenovány. Naše jediná kolonka z ukázky má jméno tema name="tema". Je to v podstatě to samé jako id, které jsme používali dříve. Proč formuláře neumí pracovat s id, fakt netuším.

? Jak se odešle formulář? Existují dvě metody k odeslání formuláře výchozí metoda get, která pošle data v URL adrese. V podstatě nastartuje stránky podobně jako odkaz, jen za otazník přilepí vyplněná data. Další metoda post se používá, nechceme-li aby byly odesílané data vidět.

Jdeme zkoušet

Vyzkoušej si formulář z ukázky výše, napiš do kolonky třeba "pes" a klikni na tlačítko. Nic zvláštního se nestalo. Jen se nastartoval jůtub. Ale přece jen se něco povedlo. Mrkni do url adresy. Na konci je ?tema=pes. Tedy název textboxu z tvého vyhledávače a vyplněná hodnota. Povedlo se ti tedy odeslat formulář na youtube. A kdyby youtube rozuměl tvému formuláři, určitě by ti vyhledal videa o psovi.

Jenže youtube tvému formuláři nerozumí. Pojmenoval si svůj textbox jinak než ty. Když zjistíš jak, podaří se ti podstrčit mu svůj formulář tak, že mu bude rozumnět. Zadej nyní do standardního vyhledávače na youtubu třeba toho psa a podívej se, do URL adresy.

Vidíš rozdíl?

1) Vyhledáváš-li přes youtube, jeho textbox se jmenuje search_query, nikoli tema jako u tebe

2) Vyhledáváš-li přes youtube, odešle se formulář na adresu https://www.youtube.com/results

Upravíš-li svůj vlastní vyhledávač, tak aby se formulář odeslal na správnou adresu a přejmenuješ li svou kolonku na stejné jméno jako má youtube, budeš mít svůj vlastní youtube-vyhledávač.

Podobně můžeš udělat vyhledávač na seznam, nebo google. Stačí jen odpozorovat, jaké názvy textboxů používají tyto vyhledávače a ty použít i ve svém.

PS.: Tohle sice vypadá jako těžká frajeřina. Hele naprogramoval jsem google vyhledávač. Ale ve skutečnosti jen využíváš službu googlu. Vyhledávače samy o sobě, mají prográmky (roboty), kteří každý den procházejí Internet, projíždějí všechny odkazy, které najdou, zpracovávají text, ukládají jej do svých databází a pak vyhledávají ve svých vlastních datech. Jde o složitý proces, který nikomu nepoví, neboť je to jejich přísně tajné know how.

10 Shrnutí + odklizení sněhu 1

2019-12-05T07:46:00+00:00

Pojďme si všechno přehledně shrnout na jednom místě. Aneb kopírovací příručka.

HTML tágy

<p>odstavec</p>

<span>kousek textu</span>

<h1>nadpis</h1>

Seznam formulářových tágů (www.jakpsatweb.cz)

Seznam HTML tágů (www.jakpsatweb.cz)

Propojení HTML části s programovou části (SCRIPT)

Jak propojit viditelnou HTML část (<body>...</body>) s programovou části (<script></script>) a vytvořit z webu program.

1. Události (HTML -> SCRIPT)

To co nás hodí z HTML do scriptu jsou události (events). Události se přiřazují jednotlivým html tágům podobně jako vlastnosti. Události obsahují část scriptu, ideálně když se jen zavolá nějaká funkce do scriptové části.

Seznam některých událostí

onClick

kliknutí myší na prvek

onMouseOver

najetí myší nad prvek

onMouseOut

odjetí myši z prvku

onDblClick

dvojitý klik myší

onLoad

načtení stránky

onKeyPress

stisknutí klávesy

... a další na jakpsatweb.cz

Oba tlačítka výše odchytávají události onClick. K té dojde po kliknutí na tlačítko. První tlačítko zavolá při této události funkci baf() a druhé volá funkci au(). Další události které můžeme použít vidíte u druhého tlačítka. Jejich význam vidíte v zeleném rámečku vpravo.

Př.1: Poznáš z chování ukázkových tlačítek (výše) jaké příkazy obsahuje funkce uf()?

document.document.getElementById("idd").style.left = "300px";

document.document.getElementById("ustrasenec").style.background = "green";

document.document.getElementById("ustrasenec").value = "Uf";

document.document.getElementById("obrazek1").src = "logo-goole.jpg";

document.document.getElementById("ustrasenec").style.background = "red";

document.document.getElementById("ustrasenec").style.color = "red";

document.document.getElementById("ustrasenec").value = "Co mi chceš udělat?";

document.document.getElementById("ustrasenec").style.background = "gray";

2. Identifikátor id=""

Ve skritpu potřebujeme pracovat zase s HTML prvky, takže se k ním potřebujeme nějak dostat. Abychom přesně určili (identifiovali) prvek s kterým chceme pracovat, musíme jej opatřit IDčkem. ID znamená jednoznačné identifikační číslo. Například jako ID člověka (občana) se používá rodné číslo. Nemohou (neměli by) existovat dva lidé se stejným rodným číslem. Pomocí inventárního čísla můžeme zase jednoznačně určit konkrétní stůl ve škole, jde tedy o ID nábytku.

V HTML a JavaSriptu můžeme použít jako ID nejen čísla, ale libovolný text. A to tak, že html tág opatříme vlastností id:

Ve skriptu se pak k těmto prvkům (které jsou opatřeny vlastnosti id) dostaneme pomocí tohoto příkazu (defaultní funkce JavaScriptu):

document.getElementById("obrazek1");

Tato funkce vrací objekt s daným id, v tomto případě tedy objekt obrázku. Můžeme mu tedy nastavovat vlastnosti typické pro obrázek jako třeba src. A to buďto rovnou, nebo si jej vložit do proměnné. To je výhodné, zejména chceme-li s tímto objektem pracovat více.

document.getElementById("tlacitko").value = "Ťukni si";

var obr = document.getElementById("obrazek1");

obr.src = "nit.jpg";

obr.style.width = "50px";

Př.2: Hra odklízení sněhu

hra.html

09 Podmínky

2019-12-05T07:46:00+00:00

Podmínka, neboli ify slouží k větvení programu.

Je-li podmínka splněná provede se tělo if{...}.

V opačném případě pak tělo else{...}, je-li definováno.

Př.1: Syntaxe podmínky v JavaScriptu, aneb jak se zapisuje if.

if (mojeCislo > 5)

{

alert("Podminka splnena.");

}

else

{

alert("Proběhlo ELSE.");

}

Bude-li mojeCislo=7, pak vyskočí okono s nápisem Podmínka splněna. Bude-li mojeCislo=4, pak se vykoná část else a vyskočí okno s nápisem Proběhlo ELSE.

Př.2. Vyzkoušej si, zda umíš správně zapsat podmínku. Doplň kód v následujících příkladech tak, aby měla podmínka smysl.

a) příklad 1

b) příklad 2

*své řešení si ověř kliknutím na zelené tlačítko

V dávných dobách, kdy počítače ještě neměly žádnou grafiku existovaly textové hry. Scény se popisovaly a hráči si vybírali z několika možností. Vytvoř si takovouto hru:

pohadka.html

Zobrazíš-li si kód (ctrl+u) této pohádky, zjistíš že je v kódu jen hromada ifů ošetřujících jednotlivé situace.