Hlavní obsah
Programování
Kurz: Programování > Kapitola 4
Lekce 8: Pokročilé vývojové nástrojePoužití ProcessingJS mimo Khan Academy
Naše editační prostředí má hned několik výhod - načítá se v reálném čase, upozorňuje tě na chyby a umožňuje ti využívat posuvníky čísel a palety barev. Toto prostředí je navrženo s ohledem na nové programátory – každý den jich zde máme tisíce a chceme jim učení se JavaScriptu usnadnit.
Jakmile se seznámíš s JavaScriptem a začneš vyvíjet delší a složitější programy, možná si budeš chtít mít ve svém programovacím prostředí různé funkce. Možná nepotřebuješ načítání v reálném čase. Možná také chceš svůj kód vložit do více souborů, nebo ho chceš mít v nějakém systému pro kontrolu verzí. Nebo jen chceš mít možnost začlenit programy využívající ProcessingJS do svých webových stránek.
V takovém případě by bylo dobré naučit se používat ProcessingJS i mimo Khan Academy. Nelze však pouze zkopírovat a vložit kód programu do souboru v počítačovém editoru. Takový program ti nebude fungovat. Proč ne?
ProcessingJS je knihovna postavená na webových technologiích. Když s ní programuješ zde na Khan Academy, skrytě pro tebe vytváříme webovou stránku (HTML soubor), přidáme do něj HTML tag
<canvas>, nahrajeme JavaScriptovou knihovnu ProcessingJS, a poté spustíme kód tvého programu. To znamená, že pokud chceš pracovat na svém programu mimo Khan Academy, musíš vytvořit HTML soubor, který dělá to samé, co děláme my automaticky.
Zde je příklad, s pomocí kterého můžeš začít:
Tento příklad je vytvořen pomocí našeho webového prostředí. Můžeš jej však vložit do HTML souboru v jakémkoli jiném prostředí pro editaci kódu.
Pokud svůj program vložíš do dané šablony, zjistíš, že vše funguje perfektně a můžeš skákat radostí! (Nebo skákat za klacíky, pokud jsi bobřík).
Pokud věci nefungují tak, jak mají, může to být kvůli tomu, že daná šablona nepoužívá přesně tu stejnou verzi ProcessingJS, kterou používáme zde na Khan Academy. Naše verze je navržena speciálně pro použití uvnitř KA, proto doporučujeme při vývoji mimo KA používat oficiální knihovnu ProcessingJS.
Mezi naším ProcessingJS a tím oficiálním existuje několik větších rozdílů:
- KA používá pro globální boolean
mouseIsPressedmístomousePressed. Podobně KA používákeyIsPressedmístokeyPressed. To znamená, že při vkládání svého kódu do šablony musíš změnitmouseIsPressedakeyIsPressed. - KA používá ve výchozím nastavení stupně pro všechny parametry úhlu místo radiánů. Pokud ve tvém programu používáš pro úhly stupně, můžeš je převést pomocí
radians(). - KA používá
getImage()agetSound()pro obrázky a zvuky, které v oficiální verzi neexistují. Pro obrázky můžeš použítPImagea pro přehrávání zvuků budeš muset vytvořit tag<audio>.
Oficiální verze má také širší škálu funkcí, jako je manipulace s obrazem a více možností pro 3D animace. To vše můžeš prozkoumat v oficiální dokumentaci ProcessingJS.
Rádi bychom se podívali na programy, které vytvoříš mimo Khan Academy, takže doufáme, že je s námi budeš sdílet, jakmile je budeš mít hotové. Buď je převedeš zpět na naši verzi ProcessingJS, nebo je budeš sdílet v našem webovém prostředí.
Dále si ještě řekneme trochu více o desktopových editorech a nástrojích pro ladění.
Chceš se zapojit do diskuze?
Proč to nefunguje
var x = random(0,3);
var l = random(1,2);
fill(0, 0, 0);
textSize(18);
text("Uhodni kartu.",138,50,400,60);
text("Uhodl jsi? Napij se!",117,355,400,60);
text("1",79,170,60,60);
text("2",180,170,60,60);
text("3",278,170,60,60);
rect(60,200,50,120);
rect(160,200,50,120);
rect(260,200,50,120);
draw = function() {
if (mousePressed&&mouseX>=60&&mouseX<=110&&mouseY>=200&&mouseY<=320&&x<=1) {
fill(209, 209, 35); // click color
rect(60,200,50,120);
}
if (mousePressed&&mouseX>=260&&mouseX<=310&&mouseY>=200&&mouseY<=320&&x>2) {
fill(209, 209, 35); // click color
rect(260,200,50,120);
}
if (mousePressed&&mouseX>=160&&mouseX<=210&&mouseY>=200&&mouseY<=320&&x>1&&x<=2) {
fill(209, 209, 35); // click color
rect(160,200,50,120);
}
};(1 hlas)