Home

hra HAD v javascriptu

2024-06-25T12:51:13+00:00

HTML (pokus3.html)

Kaskádové styly (CSS) - vzhled.css

body {
background: rgb(212, 211, 211);
}

.grid {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}

.grid div {
width: 20px;
height: 20px;
/*border:1px black solid;
box-sizing:border-box*/
}

.snake {
background: #afff33;
}

.apple {
background: red;
border-radius: 20px;
}

.popup {
background: rgb(32, 31, 31);
width: 100px;
height: 100px;
position: fixed;
top: 100px;
left: 100px;
display: flex;
justify-content: center;
align-items: center;
}

JAVASCRIPT - program.js

Projekty dětí

2022-04-05T10:25:40+00:00

Kuba (5.třída) - snake, nim (2.2.2025)

Programkový víkend v knihovně (28.-29.1.2023)

Rebeka (2.třída) - Hack Ondrovy chytačky - Trolling house hunt (25.8.2022)

Ondra (3.třída) - Chytačka - Trolling doge hunt (23.8.2022)

Ondra & Šíma (1.-3.třída) - Chytačka (23.8.2022) (23.8.2022)

Johy (3.třída) & Adam (3.třída) - Textová hra - Zkažený chleba (23.8.2022)

Ivan (8.třída) - javascript - Kalkulačka na trojčlenku (20.1.2022)

Justy (5.třída) - první web - Článek pro potěšení duše (5.4.2022)

Roboti z microbitu - Přemek, Hanka, Barča, Mía,... (2.-5.třída) (2022)

Max (8.třída) - 3D Blender (2022)

Rebeka (2.třída) - 3D Malování (2022)

Přemek (3.třída) - 3D Malování (2022)

Hanka (4.třída) - 3D Malování (2022)

Norbert (předškolák 5let) - 3D Malování (2022)

II. Displej, animace, hudba

2020-12-02T19:47:01+00:00

Na microbitu jsem si vyzkoušeli používaní displeje a bzučáku. Zobrazili jsme si obrázky, písmena, čísla a vyzkoušeli si různé animace. Vytvořili a přehráli různé melodie. Zde jsou ukázky různých kódu.

1) Zobraz srdce

2) Microbit se vyznává z lásky :)

3) Animace skákání přes švihadlo

4) Animace blikající šipka

5) Jednoduchý hudební přehrávač (uživatelsky přívětivý)

III. Proměnná

2020-12-07T19:52:35+00:00

To, že je proměnná něco, co má jméno a obsah a můžeme si jí představit jako popsaný hrníček, jsem už vysvětlovala tady - proměnná v Javascriptu.

Dnes se podíváme jak se vytváří proměnná ve Scratchi (dětském programovacím jazyku - puzzle), konkrétně pak microbit make code studiu.

1) Proměnné se schovávají v prostřední části dole, v červeném "šuplíku" s názvem Proměnné (viz. obr. vpravo). Po rozkliknuti tam nejspíš nic neuvidíme, protože proměnnou si musíme nejdřív vytvořit/založit/deklarovat.

2) Klikneme tedy na tlačítko "Vytvořit proměnnou" a napíšeme její název.

Já si založila proměnnou s názvem hrnicek, jak můžete vidět na obrázku vlevo. Tak se mi tam vytvořili 3 nové příkazy (puzzlíky).

3) Jak tyto nové příkazy použít vidíte na obrázku dole. Při spuštění nastavíme promennou hrnicek=3 a v dalším příkazu vypíšeme hodnotu hrnicku. Na displeji se nám po spuštění tohot programu objeví trojka.

Micro bit - LEDky

2020-12-03T11:07:09+00:00

https://www.elecfreaks.com/christmas-tree-rainbow-led-for-micro-bit.html

Vánoční stromek microbitu je složitější než jsem si myslela. Předpoklad že nacvaknu stromek a pustím tam signál binárního čísla a barvy byl mylný. K připojení ledkového vánočního stromku je třeba přistupovat přes rozšíření make code studia a to o blok Neopixel.

Př.1:

Rozsvícení desíti LED diod červeně:

Zhasnutí výše zmíněných diod po stisknutí tlačítka B:

Rozsvícení výše zmíněných diod po stisknutí tlačítka A:

Př.2: Rozsvícení jen některých diod:

Vánoční stromek obsahuje pouze 6 diodek, takže stačí v prvním řádku set ledky... zadat hodnotu 6. Zapojuje se kablíky na spodní (zlaté pás) porty(piny) G-G, V-3V, S-P0. Zapojíme-li S na jiný pin, musíme to definovat v prvním řádku deklarace ledek (set letky).

I. Seznámení s roboty

2020-09-29T05:33:44+00:00

Clementoni

Oranžový robotek, můžeme mu programovat jen příkazy VPŘED, VZAD, OTOČKA DOPRAVA, OTOČKA DOLEVA. Programuje se ve čtyřech krocích:

0) Zapnutí programovacího módu: Přepínač vlevo nahoře přepneme na Prog.

1) Zahájení programování: Stiskneme tlačítko P (vpravo nahoře). Robotu blikají oči, je tedy ve stavu programování.

2) Programování: Zadáme robotovi příkazy, které si má zapamatovat. Používáme k tomu čtyři okrajové tlačítka kříže. Např. stiskneme-li 3x po sobě horní tlačítko, zapamatuje si robot 3 "kroky" dopředu.

3) Ukončení programování: Stiskneme opět tlačítko P (vpravo nahoře). Robotovi přestanou blikat oči, program je uložený a nyní je ve stavu, kdy je připraven provést program.

4) Provedení programu: Stiskneme prostřední tlačítko kříže a robot začne vykonávat program, který jste zadali v kroku 2.

Krypton

Je programovatelná stavebnice. Programuje se pomocí tabletu, pomocí vizuální puzzle jazyku. Obsahuje motory, senzory, apod.

Zde je několik návodů:

Větrník

Houpačka

Čerpací stanice

Micro:bit

Programovatelná deska, pomocí které můžeme vyluzovat zvuky, vysvicovat displej, roztáčet servo, apod.

Programuje se skrze online studio Make code, jehož součástí je i simulátor. Nemusíme mít tedy Micro:bit fyzicky u sebe.

Chceme-li svůj program přenést na skutečný přístroj, zde je postup:

1) Stáhneme si program, pomocí tlačítka Download (v Make code). Uložíme si soubor s koncovkou .hex někam na disk.

2) Připojíme micro:bit desku k počítači přes USB kabel. V počítači se objeví připojený disk.

3) Do připojeného disku zkopírujeme stažený program s koncovkou .hex

Po doblikání žlutého světýlka na desce (u usb kabelu) se program začne ihned vykonávat.

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.

07 Funkce s parametrem

2019-11-13T07:46:00+00:00

Funkce s parametry

Minule jsme si řekli, že funkce je jakýsi podprogram. Dnes si vysvětlíme funkci z pohledu matematiky a využijeme ony závorky, které jsme zatím nechávali prázdné. Funkce s parametrem je v podstatě to samé co matematická funkce. Tu si můžeme představit jako černou skříňku, do kteřé z jedne strany něco cpeme (x) a z druhé nám něco vypadává (y). V té černé skříňce se provede nějaký výpočet a vyplivne to výsledek.

Př.4: Ukázka funkcí v matematice

f(x) = y

f(x) = x + 2;        // definice funkce v matematice

f(1) = 1 + 2 = 3;    // funkce f(x) udělala z jedničky trojku...
f(2) = 4;        // ... z dvojky čtyřku
f(3) = 5;        // ... z trojky pětku

Př.5: Funkce s parametrem v JavaScriptu

    var hoho = mojeFunkcniFunkce(3);
    document.write(hoho);

    function mojeFunkcniFunkce (vstupniPromenna)
    {
        var vysledek = vstupniPromenna + 2;
        return vysledek;            //vyplivni vysledek z funkce
    }

06 Datové typy (Ceasarová šifra)

2019-11-12T10:46:00+00:00

Datové typy

Aneb typy proměnných. Ačkoli se JavaScript tváří, že má jeden typ proměnné na všechno (na čísla i texty), není tomu tak. Na rozdíl od ostatních programovacích jazyků, si přetypopává proměnné podle potřeby (podle toho co tam zrovna cpeme).

Základní typy dat s kterými pracujeme jsou:

čísla (Numeric) = 1, 2, 3, 3.14, -5,...
řetězec (String) = "ahoj", " ", "Jakýkoli text dlouhý či krátky.",...
boolean (Boolean) = True, False, 0, 1.

Operace

Nad čísly můžeme provádět základní matematické operace jako je:
+ sčítání
- odčítání
* násobení
/ dělení

Př.1:
        var prom1 = 12;
        var cislo = 4;

        var vysled = prom1 + cislo;
        var rozd = prom1 - cislo;
        var nasobinek = prom1 * cislo;
        var delenak = prom1 / cislo;

Asi vás nepřekvapí že proměnná vysled bude obsahovat 16, v proměnné rozd bude 8, atd.

Řetězce můžeme rovněž sčítat. Plusko v tomto případě funguje jako lepidlo, které nám slepí dva řetězce do jednoho.

Př.2:
        var pozdrav = "Ahoj";
        var jmeno = "Horymír";

        var veta = pozdrav+jmeno;

        document.write(veta);

Mezera je to samé co písmeno, či jakýkoli jiný znak. Není-li v uvozovkách napsaná, nevypíše se. Víš jak upravit skript v př.2, aby se vypaslo "Ahoj Horymír!"?

Problém s mícháním typů

A tím se dostáváme k situaci, kdy nakombinujeme numerický typ proměnné se stringem (řetězcem, textem). Jinde by vám to neprošlo. Ale JavaScript to vyřeší jednoduše tak, že všechny proměnné typu Numeric, přetypuje pro účely sčítání na String (z 6 udělá "6") a pak to pospojuje jako řetězce. A tak se nám snadno stane, že 6+4=64

Př.3:

            var cisilko = 6;
            var textik = "to je:";
            var mismas = textik+cisilko+4;

            document.write(mismas);

            document.write("<br>");
            document.write(cisilko+4);

            document.write("<br>"+cisilko+4);

V jednom řádku tedy nemůžeme mít operátor plus jako sčítání a zároveň jako slepování řetězců.

Další operace, aneb JavaScriptovské funkce

Kromě základních operací, které jsme si popsali výše, má JavaScript už předdefinované funkce, které můžeme využívat. Mimo jiné:

Všechna data s kterými pracujeme jsou nakonec převedena na nuly a jedničky. Protože počítač (hardware) pracuje v binární soustavě (je signál/není signál). Takže jakýkoli znak ať už číslo, nebo písmeno se musí převést na číslo (ASCII kód), které se převede do binární soustavy a počítač jej pak může uložit, nebo s ním počítat. Jak to vypadá v praxi, vidíte vpravo v ASCII tabulkce.

A my si teď uděláme jednoduchý ASCII převodník. Využijeme k tomu příkaz

String.fromCharCode(100);

který převede ascii kód v závorce do znaku (v tomto případě na "d").

Naopak funkce charCodeAt() převádí znaky na číslo ascii kodu:

var znak = "m";
znak.charCodeAt(0);

Př. 5: Vytvoř ASCII převodník, který převede číslo na znak. Můžeš využít tuto univerzální šablonu:

Šablona - univerzální formulář - inout.html

Př.6: Vytvoř šifrovací program pro Galia Julia Ceasara.

Známý římský vojevůdce Ceasar, šifroval vojenské zprávy jednoduchou šifrou, která dodnes po něm nese jméno. Princip této šifry je jednoduchý - posunout jednotlivé písmenka textu o několik pozic.

"cezar" -> "dfabs"

Vytvoř program který převede zadané písmeno na zašifrované (posunute o několik znaku dopředu či dozadu).

Šablona - univerzální formulář - inout.html

Tip: využij ascii tabulku.

05 Webhosting a templaty

2019-11-07T10:46:39+00:00

Statické webovky si může udělat rychle a snadno s použitím již hotových šablon, které jednoduše přepíšeme.

Jak najít webovou šablonu?

Z čeho se skládá webovka (šblona)?

Jak přepsat šablonu?

Jak zprovoznit menu?

Proč se nemohu dostat na svůj html dokument přes Internet?

Ve škole na počítači jsme si do svých adresářů uložili, několik html dokumentů a pokusili jsme se k ním dostat doma. Zadali jsme stejnou URL adresu, která se nám zobrazila v prohlížeči ve škole...

... ale nefunguje :( Proč?

Je to výborný nápad a fungovalo by to, kdyby byl disk Z: na serveru, který je připojený k Internetu. Pak bychom se na něj mohli dostat přes veřejnou adresu (například přes doménové jméno školy).

Protože nám však škola neposkytuje webhosting, pracujeme se soubory lokálně (odříznutě od světa). Mám-li něco uložené lokálně, mám to uložené pouze na svém počítači a mohu s tím zase pracovat jen na svém počítači. Chceme-li se dostat ke svým souborům doma máme několik možností:

Poslat si je na mejl v příloze a doma si je stáhnout a dál na nich pracovat lokálně
Přenést na flashce a doma na nich pracovat lokálně
Nahrát je na Internet, tedy využít nějakého webhostingu. Tím si vlastně vytvoříme své stránky, na které se dostaneme odkudkoli, kde je Internet.
- sweb.cz - seznam nabízí hosting souborů zdarma na sweb.cz. Máte-li e-mail na seznamu, pak se tam přihlásíte jednoduše přihlašovacími údaji k e-mailu a hned můžete kopírovat své soubory.
- webzdarma.cz - další možnost webhostingu zdarma.
- onebit.cz - placený webhosting. Webhostingy zdarma přidávají do stránek reklamy. Kdo se chce těmto reklamám vyhnout, musí si buď vytvořit vlastní server, nebo zaplatit webhostig. Já využívám webhostingu u onebit.cz s kterým mám dobré zkušenosti.

Na hostingu můžeme mít mnoho html dokumentů. Aby prohlížeč věděl, který má spustit. Musíme ten první úvodní dokument nazvat index.html.

Pěkný web snadno a rychle

Rozhodneme-li se vytvořit si vlastní stránky, nemusíme začínat od píky (tedy od prázdného notepadu). V dnešní době existuje mnoho šablon, které můžeme využívat zdarma, ale pozor většinou jen pro soukromé účely! Je tedy dobré věnovat pozornost licenci. Zadáte-li do vyhledávače "free website template" (zdarma webové šablony), naleznete spoustu, spoustu odkazů. Např.:

https://www.w3schools.com/w3css/w3css_templates.asp

https://freewebsitetemplates.com/

Pak si stačí jen vybrat stránky které se vám líbí, stáhnout, přepsat texty, poměnit obrázky a finální webovky nahrát na nějaký webhosting.