Archívy kategórie: Kurz programovania

Ako som vytváral študijný plán web developerskej školy

V júni 2015 som sa pustil do vytvárania študijnej osnovy letnej web developerskej školy. Zbúchal som ju docela rýchlo. Obsahovala 13 týždňový program. Pôvodne mala škola trvať 13 týždňov. Zamyslel som sa, či to nie je málo a zistil som, že je. Pridal som ďalšie 2 týždne. Je možné, že aj to bude málo. Vecí, ktoré sa treba naučiť je hrozne moc ale snažím sa ich filtrovať len na tie najpodstatnejšie.

Pôvodné myšlienky

Pôvodne som chcel v kurze preberať aj front-end JavaScriptové frameworky a postupne jeden za druhým skúšať. Zistil som, že je to somarina. Študentovi stačí ovládať jeden. Nakoniec som názov lekcie zmenil na “Quick overview of front-end frameworks” a jeden si možno vyskúšame.

Pôvodne som moc nechcel učiť PHP, ale nakoniec som dal do osnovy Nette framework a MySQL. O pár dní nato som si spomenul ako som začínal ja s Nette, keď som nevedel objektovo programovať. Nette som vôbec nechápal a nevedel som sa v ňom ani pohnúť. O rok na to, keď som sa naučil OOP (Object Oriented Programming), som do Nette nakukol znovu a už som mu chápal oveľa viac. Takže Nette som vyškrtol a lekciu som nazval “Quick overview of PHP and PHP frameworks”.

Pridal som do osnovy “Introduction to OOP”. Bude to naozaj len krátky a rýchly prehľad na čo slúži OOP a aké je dôležité ho ovládať. Študentom stačí vedieť na začiatok len základy. Neskôr budem pravdepodobne učiť OOP viac do hĺbky.

Počas týždňa som osnovu niekoľkokrát upravil a prekopal a ešte ju aj budem upravovať. Chcem, aby si študenti odniesli nie len prehľad technológií, ale aj vlastné skúsenosti na projektoch, skúsili si párové programovanie, prácu v tíme a mnoho iných vecí.

Prekvapivé zistenie

Nakoniec som zistil jednu zaujímavu vec. Človek, ktorý nemá žiadne skúsenosti s programovaním, sa dokáže naučiť tvoriť webové aplikácie do 7 týždňov vďaka super jednoduchej technológií zvanej Meteor.js. Osnovu som upravil tak, aby sa študenti najskôr naučili základ webu – JavaScript, HTML a CSS. Hneď na to učím jQuery, ktoré je súčasťou snáď každého moderného webu, a prehľad ostatných JavaScriptových technológií. Šiesty týždeň web developerskej školy zoznámim študentov s Meteor.js a od tohto momentu sú schopní vyvíjať vlastné webové aplikácie. Siedmy týždeň učím Meteor viac do hĺbky, študenti tak získajú slušný základ pre vývoj ich vlastných aplikácií. Vývoj webových aplikácií nebol nikdy tak jednoduchý ako dnes s Meteor.js.

Ostatné týždne učím už len doplnkové veci, ktoré by mal vedieť každý dobrý web developer.

Nauč sa tvoriť (webové) aplikácie

Dnes, keď je vývoj webových, ba dokonca mobilných aplikácií pomerne jednoduchý, je škoda to nevyužiť a nenaučiť sa vytvoriť si vlastnú aplikáciu do dvoch mesiacov. Nemusíš študovať 5 rokov na vysokej škole, aby si dokázal vytvoriť aplikáciu. Stačí ti len chuť učiť sa a vášeň pre programovanie.

Pridaj sa do študijnej skupiny “Online web developerská škola” a využi jedinečnú šancu stať sa web developerom.

Ak máš akékoľvek nejasnosti, môžeš sa pýtať priamo v študijnej skupine, prípadne vo FB skupine “Web development school“, alebo priamo mňa cez Facebook.

Ak ešte váhaš, či do toho ísť, alebo neísť, prečítaj si článok “Ako mi programovanie zmenilo život “. Dúfam, že ťa to motivuje a aspoň vyskúšaš či by ťa kódenie náhodou nebavilo.

Letná web developerská škola

Čoraz viac ľudí ma oslovuje s tým, že sa chcú naučiť kódiť a robiť webové aplikácie. To ma vyhecovalo k tomu, aby som spravil 3 mesačnú letnú web developerskú školu. Veľa študentov sa bude cez prázdniny nudiť, takto môžu pre seba aspoň niečo spraviť.

Všetko podstatné som popísal na stránke Web developerskej školy: http://www.codermania.com/kurzy/letna-web-developerska-skola.

Pôvodne som to chcel robiť za dobrovoľný príspevok, ale zistil som, že ľudí by to moc nemotivovalo a nevážili by si nadobudnuté znalosti. Tým, že to bude platené, odfiltrujem špekulantov a získam študentov, ktorí majú seriózny záujem sa naučiť tvoriť webové aplikácie. Cena nie je ani vysoká, ani nízka. Teda oproti ostatným kurzom je pomerne nízka. Mojim cieľom nie je momentálne na tom zbohatnúť. Mojim cieľom je zvýšenie počtu a kvality web developerov, ktorým budem môcť posúvať pracovné ponuky, ktoré mi chodia.

Takže dúfam, že sa nazbiera dostatok serióznych záujemcov, ktorých naučím veci, ktoré by sa sami len tak nenaučili.

CoderMania – priebeh výuky

Utriedil som si v hlave ako bude prebiehať výuka programovania a web developmentu na CoderManii.

Študijné skupiny a týždňové “šprinty”

Na CoderManii som vytvoril študijné skupiny týkajúce sa HTML, CSS, JavaScriptu a celkovo web developmentu. Študijná skupina je vlastne chat, kde sa študenti môžu pýtať otázky a komunikovať medzi sebou (niečo ako Slack chat). Na otázky môže odpovedať každý študent. Šikovní študenti sa tak môžu zároveň stať učiteľmi.

Zo začiatku budem cez chat zadávať na každý týždeň čo by sa mali študenti naučiť. Na CoderManii budú pribúdať interaktívne lekcie a cvičenia, ktoré si študenti budú môcť preštudovať a vypracovať. Akonáhle budú študenti ovládať HTML, CSS a JavaScript, zadám im vypracovať reálny projekt, na ktorom sa naučia uviesť nadobudnoté poznatky do praxe a ešte k tomu sa naučia niečo nové. Opäť môžu svoje riešenia konzultovať cez chat. Tempo učenia sa študentov bude s veľkou pravdepodobnosťou rozdielne. Niekto môže za týždeň zvládnuť všetky lekcie na CoderManii. Taký študent môže vypracovať projekt, učiť ostatných a začať pracovať na vlastných projektoch. Pokiaľ študent nebude mať za sebou aspoň jeden väčší projekt, nebude mať veľkú šancu sa zamestnať. Každému študentovi by som rád prisľúbil kontrolu jeho kódu (code review), ale zatiaľ neviem, či to budem stíhať.

Online výuka a osobné stretnutia

Väčšina výuky bude prebiehať online. Pokiaľ to bude potrebné, môžem sa s ľuďmi zo študijnej skupiny raz za mesiac (podľa možností aj viackrát) stretnúť a skonzultovať nejasné veci. Študijné skupiny budú zatiaľ v Brne a v Dubnici nad Váhom. Ak bude viac študentov aj v inom meste, môžem spraviť stretnutie aj v ňom pokiaľ bude v rozumnej vzdialenosti (~150km) od Brna, alebo Dubnice.

Som toho názoru, že človek v IT by mal byť schopný vygoogliť si všetko, čo potrebuje. Nechcem študentov vodiť za ručičku. Ja môžem iba poradiť, dovysvetliť učivo, inšpirovať a motivovať.

Koniec výuky

Hlavným cieľom CoderManie pre začiatok je naučiť študentov HTML, CSS a JavaScript (prípadne jQuery). Na konci výuky budú študenti vedieť vytvoriť webovú stránku, prípadne aplikáciu bez databázy. Na konci (alebo aj v priebehu) výuky študentom poodhalím technológie, ktoré sa používajú v praxi a ktoré by sa mali naučiť a zase si v nich vytvoriť projekt. Pomôžem študentom rozhodnúť sa, či sa chcú stať front-end, full-stack, alebo back-end vývojármi.

Je dosť možné, že vytvorím ďalšiu študijnú skupinu pre výuku programovania webových aplikácií, ktoré pracujú s databázou.

Pokročilé kurzy

Keďže sa zameriavam už iba na vývoj čisto JavaScriptových aplikácií, pokročilé kurzy budem robiť v JavaScripte. Mojim miláčikom je Meteor.js, ktorý sa zatiaľ v ČR a na Slovensku takmer vôbec nepoužíva, ale má obrovský potenciál do budúcnosti a je pravdepodobné, že ho slovenské a české firmy začnú čoskoro používať a hľadať Meteor vývojárov. Ak nie, práce v Meteore v zahraničí je dostatok. Hlavne v USA, ale aj v Holandsku, Nemecku, Švajčiarsku,… vo veľa prípadoch sa dá pracovať na diaľku za peniaze, o ktorých sa vám ani nesnívalo. S ostatnými technológiami by som vedel poradiť asi na takej úrovni, ako ujo Google.

V Čechách a na Slovensku sa stále hojne používa PHP, s ktorým už nepracujem a neviem, či by som ho dokázal učiť. Ak by chcel niekto učiť PHP a niektorý z PHP frameworkov, nech sa mi ozve. Ostatné technológie uvítam tiež.

Motivácia

Aby som študentov trochu motivoval, tak najlepší z nich dostanú možnosť exkurzie a následne pohovorov v rôznych IT firmách. Dozvedia sa aké technológie firmy používajú a aké technológie sa treba doučiť. Je veľká šanca, že najšikovnejších žiakov firmy prijmu a budú im platiť za to, aby sa naučili technológie, ktoré používajú. IT je jeden z mála oborov, kde ľudia dostávajú plat za to, že sa učia nové veci.

Začiatok prihlasovania na kurz

Od dňa 19. mája 2015 je možné sa prihlasovať do verejných študijných skupín, kde výuka prebieha v angličtine: http://www.codermania.com/study-groups. Ak ste v Brne, môžete sa pridať do skupiny Web developeri Brno. Ak ste v Dubnici, alebo inej časti Slovenska, pridajte sa do skupiny Web developeri Slovensko. Môžete sa samozrejme pridať do oboch skupín. Ak máte pripomienky, nápady na vylepšenia, napíšte mi ich na Facebook.

Programovanie pre neprogramátorov – JavaScript prakticky

Ak vás doteraz teória nebavila, možno vás bude baviť JavaScript prakticky. A možno sa ho prakticky rýchlejšie naučíte keď si ho budete môcť vyskúšať.

Ak máte Google Chrome, ste za vodou. Ak máte Firefox, nainštalujte si Firebug. Ak máte iný prehliadač, stiahnite si Chrome alebo Firefox. Ak máte všetko hotovo, zmačknite klávesu F12, objaví sa vám developerská konzola:

firebug-img

Skúste do konzoly napísať “Ahoj” aj s uvodzovkami (Je to String) a stlačte enter. Môžete skúsiť matematické operácie 5 + 2 – 3, 3 * 4, 6 / 2. Vyskúšajte jeden dlhší príklad: 1 + 2 * 3 / 6 – 4. Platia matematické pravidlá zo základnej školy. Najskôr sa vyhodnotí násobenie a delenie, potom plus a mínus. Takisto mínus mínus dáva plus: -1 – -5.

Definujme si premennú name (v konzoli):

var name = 'Tomas';

Hodnotu premennej name vypíšeme v konzoli jednoducho:

name //vypíše "Tomas"

Takto môžeme zisťovať hodnoty všetkých definovaných premenných.

Určite na vás niekedy vyskočilo také otravné chybové okienko:

alert('ahoj');

Sranda, však? Môžete napísať viacero alertov za sebou:

alert('ahoj');alert('Nazdar!');

V konzoli môžete skúšať naozaj hocičo. Ako ale vytvoriť reálny skript, ktorý môžem niekomu poslať? Vytvorte si súbor s názvom index.html do súboru napíšte nasledujúce:

<script>
&nbsp;&nbsp;alert('Ahoj, ja som skript');
</script>

A tento súbor otvorte v prehliadači. Ak súbor nejde otvoriť klasicky, klikni na pravé tlačítko myši, vyber z menu “otvoriť čím” a vyber Firefox alebo Chrome. Všetko, čo je medzi <script> a </script> je považované za JavaScript. Skúste si do vašeho skriptu napísať:

console.log('Ahoj, toto sa zobrazí v konzoli');
console.log('2 + 4 = ', 2 + 4);

Stlačte F5 (refresh) a uvidíte výsledok v konzoli. Konzolu zapnete/vypnete slačením klávesy F12. Po každej zmene skriptu je treba stlačiť F5 alebo refresh prehliadača. Na výpis do HTML dokumentu použite funkciu document.write:

document.write('Ahoj, toto sa zobrazí v HTML dokumente');
document.write('2 + 4 = ', 2 + 4);

Ops, všetko je na jednom riadku a pravdepodobne vám nefunguje diakritika. Nevadí, diakritikou sa teraz nebudeme zaoberať. Medzi jednotlivé riadky pridáme HTML značku <br />, ktorá nám pridá nový riadok.

document.write('Ahoj, toto sa zobrazí v HTML dokumente');
document.write('');
document.write('2 + 4 = ', 2 + 4);

Ok, vieme písať do HTML dokumentu pomocou JavaScriptu a vieme odriadkovať. Teraz si napíšeme skript, ktorý bol medzi mojimi prvými:

for (var i = 1; i <= 30; i++) {
&nbsp;&nbsp;document.write('Ahoj');
}

V príklade vyššie je už aj trochu HTML a CSS. Inak to nepôjde, budete sa musieť naučiť aj HTML a CSS. Čo ten skript robí? Jednoducho použijeme cyklus for a vypíšeme 30x Ahoj, okrem toho nastavíme veľkosť písma cez CSS pre každý riadok podľa hodnoty i (1 – 30). Skúste stránku scrollovať dole a hore. Pekné však?

Kde všade sa používa JavaScript?

Všade. Naozaj. Facebook používa JavaScript, Google používa JavaScript, všetci používajú JavaScript. Viac o tom kde, ako a prečo sa používa JavaScript by bolo na samostatný článok. Tu vám iba ukážem čo všetko sa dá vytvoriť pomocou JavaScriptu, HTML a CSS:

Čo ďalej?

Keď sa chcete programovaniu webových aplikácií venovať ďalej, musíte sa naučiť poriadne JavaScript, HTML, CSS a angličtinu. Bez nich sa ďalej nepohnete. A ešte je dobré vedieť používať Google pre hľadanie informácií, budete to určite potrebovať.

Viac o JavaScripte sa dočítate na w3schools (anglicky) kde nájdete aj veľa praktických príkladov alebo na jakpsatweb.cz (česky). V oboch zdrojoch nájdete aj HTML a CSS.

Môžete skúsiť aj Codecademy. Ale keďže Codecademy má svoje muchy, tak som vytvoril novú e-learningovú platformu CoderMania, kde si môžete prečítať teóriu a zároveň precvičiť nadobudnuté znalosti.

Ak ste to dočítali až sem, môžete si vyskúšať CodeCombat. Hra, pri ktorej sa naučíte programovať a programátorsky premýšľať. Prešiel som si pár levelov a je to super. Hra vás núti premýšľať a zároveň je to zábava. Klobúk dole pred tvorcami CodeCombat.

Pozrite si videá web developerskej školy:

Programovanie pre neprogramátorov – 4. lekcia

Blížime sa ku koncu základov programovania. Ostáva nám naučiť sa čo sú funkcie a objekty. V ďalšej lekcii si ukážeme už aj praktické využitie JavaScriptu. Tešíte sa?

Funkcie

Funkcia vo veľa programovacích jazykoch vyzerá takto:

//definícia funkcie
function addition(a, b) {
  return a + b;
}

//zavolanie funkcie
var additionResult = addition(5, 2); // 7

Definícia funkcie začína kľúčovým slovom “function“, nasleduje názov funkcie a jej parametre v zátvorke oddelené čiarkou. Funkcia môže mať ľubovoľný počet parametrov. Aj nula. Parametre môžu mať ľubovoľný názov. Kľučové slovo return vracia výsledok/hodnotu funkcie. Existujú funkcie bez return, ktoré zvyčajnie niečo vykresľujú alebo robia iné výpočty. Samotné definovanie funkcie nerobí nič, musíme ju zavolať. Funkciu zavoláme tak, že napíšeme jej názov a v zátvorke jej predáme parametre. Nesmieme zabudnúť na ukončenie príkazu stredníkom ; Všimnite si, že za definíciou funkcie nemusí byť stredník. Hodnotu, ktorú vráti funkcia môžeme uložiť do premennej, alebo s ňou inak pracovať.

Načo sú dobré funkcie? Funkcie sa používajú keď potrebujeme ten istý kód spustiť viackrát. Napríklad nasledujúca funkcia toCelsius, môžeme ju použiť na viacerých miestach a nepotrebujeme si tak pamätať vzorec:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit - 32);
}

//Niekde chceme previesť 90 stupňov
var temp90 = toCelsius(90);

//Niekde inde chceme previesť 60 stupňov
var temp60 = toCelsius(60);

Objekty

Na http://www.w3schools.com/js/js_objects.asp sú objekty pekne vysvetlené aj s obrázkom. Ja sa ich pokúsim vysvetliť bez obrázku.

var person = {
  firstName: "John",
  lastName: "Doe",
  age:50,
  getFullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.firstName); //John
console.log(person.getFullName()); //John Doe

Vytvorili sme objekt s názvom person, ktorý má niekoľko atribútov. Medzi atribútmi je aj funkcia getFullName(), ktorá po zavolaní person.getFullName() vypíše “John Doe”. Všimnite si, že atribútom priraďujeme hodnotu dvojbodkou, nie rovná sa. Vo funkcii getFullName používame kľúčové slovo this. This znamená, tento objekt. This.firstName nám vráti hodnotu atribútu firstName daného objektu.

Pomocou objektov môžeme simulovať objekty reálneho sveta. Každý objekt má nejaký atribút a môže obsahovať aj funkcie.

var car = {}; //definujeme prázdny objekt
car.name = 'Porsche'; //postupne objektu pridávame atribúty
car.color = 'red';
car.getNameAndColor = function() {
  return  this.color + ' ' + this.name;
};

Môžeme definovať aj prázdny objekt “{}”, ktorý nemá žiadne atribúty a neskôr mu môžme atribúty pridať. Z hľadiska výkonu kódu sa to ale nevyplatí. A je dobré vopred poznať štruktúru objektu.

var car = {
  name: null, //null je prazdna hodnota
  color: null,
  getColorAndName: function() {
    return this.color + ' ' + this.name;
  }
};

console.log(car.getColorAndName()); //null null
car.name = 'Porsche';
car.color = 'red';
console.log(car.getColorAndName()); //red Porsche

Problematika objektov je široká, nám zatiaľ stačia základy. Viac o objektoch sa dočítate na w3schools alebo na Mozilla Developer Network.

Cvičenie

Funkcie: http://jsfiddle.net/elfoslav/3gwd3xa5/
Objekty: http://jsfiddle.net/elfoslav/xt227wtb/

Ako odovzdávať cvičenia? Keď sa ti zobrazí stránka s cvičením, klikni v hornom menu na “Fork”. To vytvorí tvoju kópiu cvičenia. Keď budeš chcieť spustiť kód, klikni v hornom menu na “Run”. Keď budeš mať cvičenie hotové, klikni na “Update”, to uloží tvoje cvičenie. Potom už len skopíruješ link cvičenia a odošleš mi ho do mailu. Ja ti cvičenie skontrolujem a oznámkujem.

Prihlásiť sa k odberu noviniek o programovaní

* povinné pole



Chcem dostávať novinky o:


 

Programovanie pre neprogramátorov – 3. lekcia

Tento článok je súčasťou môjho online kurzu programovania v JavaScripte. Každý sa ho môže zúčastniť, kurz je zdarma. Kto sa ešte nezaregistroval, môže tak spraviť tu: http://eepurl.com/UzefH. Kurz obsahuje teoretickú časť (články na tomto blogu) a praktickú čast (domáce úlohy zadávané emailom).

Máme za sebou prvú lekciu o premenných, druhú lekciu o podmienkach a dnes nás čakajú cykly (loops).

Cykly slúžia vykonanie určitého kódu viackrát a na prechádzanie prvkov v poli. Máme viacero druhov cyklov:

For:

for (var i = 1; i <= 10; i++) {
  console.log(i); //vypíše do konzoly čísla od 1 po 10
}

Poďme si rozobrať jednotlivé časti for cyklu. “var i = 1;” definuje premennú “i” s hodnotou 1. Podmienka “i <= 10;” znamená, že cyklus bude bežať dovtedy, kým táto podmienka platí. Tj. kým “i” je menšie, alebo rovné 10. “i++” znamená, že “i” sa po každej iterácii cyklu zväčší o 1. V cykloch je zvykom pomenovávať iteračnú premennú písmenom “i”.

Využitie cyklu for pre prechádzanie prvkov v poli:

var fruits = ['apple', 'pear', 'citron'];
for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i] + ' '); //vypíše 'apple pear citron '
}

Máme definované pole fruits. Definujeme “var i = 0;” pretože polia sú indexované od 0. Cyklus prebieha dovtedy, kým “i” je menšie ako počet prvkov v poli, v tomto prípade 3. Tj. hodnota “i” je v prvej iterácii 0, v druhej 1, v tretej 2 a keď “i” je 3, tak cyklus končí, pretože 3 nie je menšie ako 3 (počet prvkov v poli).

While:

var i = 0;
while (i <= 10) {
  console.log(i); //vypíše čísla od 0 po 10
  i++;
}

Cyklus while môžeme použiť podobne ako cyklus for. Môžete si všimnúť, že tento príklad je podobný ako prvý príklad pre for. Načo je teda cyklus while, keď máme for? Cyklus while sa používa ak vopred nevieme koľkokrát cyklus prebehne.

//cyklus while pobeží dovtedy, kým nezadáte číslo 7 do promptu
while (prompt('3 + 4 = ') != 7) {
  console.log('zle');
}

console.log('ok');

Príklad vyššie si môžete vyskúšať na http://jsfiddle.net/elfoslav/m7x4z3o9/

Do…While

“Do” znamená “rob”, “while” znamená “kým”. V preklade to znamená “rob niečo, kým…”

var i = 0;

do {
  console.log(i); //Vypíše raz "0"
  i++;
} while (i > 5); //cyklus tu končí, pretože 0 nie je väčšia ako 5

Zhrnutie

Najpoužívanejší cyklus je for. Mali by ste si s ním vystačiť v 98% prípadoch. Je dobré vedieť, že existuje while a do…while a kedy ich použiť.

While použijete ak vopred neviete kedy cyklus skončí.

Do…while použijete ak potrebujete aby cyklus aspoň raz prebehol a potom už závisí na podmienke while či cyklus prebehne 2 a viackrát.

Cvičenie

http://jsfiddle.net/elfoslav/0chmvb2d/

Ako odovzdávať cvičenia? Keď sa ti zobrazí stránka s cvičením, klikni v hornom menu na “Fork”. To vytvorí tvoju kópiu cvičenia. Keď budeš chcieť spustiť kód, klikni v hornom menu na “Run”. Keď budeš mať cvičenie hotové, klikni na “Update”, to uloží tvoje cvičenie. Potom už len skopíruješ link cvičenia a odošleš mi ho do mailu. Ja ti cvičenie skontrolujem a oznámkujem.

Alebo jednoduchšie: Zaregistruj sa na http://www.codermania.com a prejdi si cvičenia tam. Cvičenia sa vyhodnocujú automaticky. Ak si nebudeš dať vedieť rady, je tam tlačidlo “Ask for help”. Ak nevieš po anglicky, môžeš použiť Google translator. Veľa šťastia.

Prihlásiť sa k odberu noviniek o programovaní

* povinné pole



Chcem dostávať novinky o:


 

Programovanie pre neprogramátorov – 2. lekcia

Tento článok je súčasťou môjho online kurzu programovania v JavaScripte. Každý sa ho môže zúčastniť, kurz je zdarma. Kto sa ešte nezaregistroval, môže tak spraviť tu: http://eepurl.com/UzefH. Kurz obsahuje teoretickú časť (články na tomto blogu) a praktickú čast (domáce úlohy zadávané emailom).

V prvej lekcii som vysvetľoval prvé základné stavebné kamene každého programu/aplikácie. Dnes si ukážeme ďalšie stavebné kamene a to podmienky.

Podmienky určujú, ktorá časť kódu sa vykoná. Z prvej lekcie budeme potrebovať vedieť čo sú boolean premenné (true, false).

var isRaining = true;
if (isRaining) {
  //prší, vykoná sa táto časť kódu
}

Ak by sme definovali “isRaining” false, blok kódu obalený if-om by sa nevykonal. Keďže je “isRaining” true, “prší” sa vykoná.

var isRaining = false;
if (isRaining) {
  //prší, vykoná sa táto časť kódu
} else {
  //neprší, vykoná sa táto časť kódu
}

V ukážke vyššie definujeme boolean premennú “isRaining” s hodnotou false (nepravda). Ktorá časť kódu sa vykoná? Vykoná sa “neprší” (vetva else), pretože “isRaining” je nepravda. Ak by sme definovali “isRaining” ako true, vykoná sa “prší”. Všimnite si medzeru za “if” a medzeru pred a za “else”. Takisto odsadenie 2 medzerami alebo tabulátorom vo vnútri “if”. Je to “coding standard“, ktorý by mali dodržiavať všetci programátori.

Skoro by som zabudol na “else if”:

var age = 18;
if (age === 18) {
  //si dospelý, už môžeš piť alkohol legálne
} else if (age < 18) {
  //si ešte dieťa, môžeš piť nelegálne alkohol
} else {
  //máš viac ako 18 rokov. Si už stará raketa.
}

“else if” použijeme ak chceme overiť viacero podmienok. “else if” môže byť za sebou ľubovoľne veľakrát. Po “else if” môže a nemusí nasledovať “else”.

Ešte je tu pár vecí, ktoré by sme mali vedieť pri podmienkach a boolean hodnotách. A to:

Operátory a vyhodnocovanie podmienok:

Operátor is equal ==

var name = 'Josh';
//operátor is equal (==) porovná 2 hodnoty a vyhodnotí podmienku na true (ak sa rovnajú) alebo false (ak sa nerovnajú)
var isJosh = (name == 'Josh'); //isJosh sa vyhodnotí na true. Zátvorky sú ľubovoľné, slúžia pre prehľadnosť kódu
var isPeter = (name == 'Peter'); //isPeter sa vyhodnotí na false pretože 'Josh' != 'Peter'

if (name == 'Josh') {
  //som Josh
}

Existuje aj operátor “===”, ktorý porovnáva rovnosť hodnôt ako aj “==” ale líšia sa tým, že operátor “===” porovnáva aj rovnosť typov premenných:

var zero = 0;

if (zero == "0") {
  //podmienka sa vyhodnotí na true. V JavaScripte môžeme porovnávať čísla so stringami s operátorom ==
}

if (zero === "0") {
  //podmienka sa vyhodnotí na false, pretože zero je typ Number a "0" je String
}

Operátor nerovná sa (is not equal) !=

var zero = 0;

if (zero != "0") {
  //tento blok sa nevykoná, vyhodnotenie podmienky je false
}

//operátor !== porovnáva hodnotu aj typ premenných
if (1 !== "1") {
  //true, 1 je typ Number, "1" je typ string.
}

Porovnávajúce operátory <, >, <=, >=

if (3 > 4) {
  //3 nie je väčšie ako 4...
}

if (5 <= 5) {
  //5 je menšie, alebo rovné 5
}

Operátor && (and) a || (or)

var isRaining = true;
var isStorm = false;
var isRainingAndStorm = isRaining && isStorm; //operátor && je logický AND (a zároveň). Porovnáva 2 hodnoty. Ak sú obe hodnoty true, podmienku vyhodnotí na true. Ak je jedna, alebo obe hodnoty false, podmienku vyhodnotí na false

isRainingAndStorm = isRaining || isStorm //operátor || je logický OR (alebo). Stačí ak je jedna hodnota true a celý výraz sa vyhodnotí na true

Viac o porovnávacích operátoroch sa dozviete tu.

Zhrnutie

Mali by ste chápať načo slúžia podmienky “if”, “else if”, “else”
Mali by ste chápať operátorom “&&”, “||”, “==”, “===”, “!=”, “!==”, “<“, “>”, “<=”, “>=”

Cvičenie/Domáca úloha

http://jsfiddle.net/elfoslav/fyC3L

Ako odovzdávať cvičenia? Keď sa ti zobrazí stránka s cvičením, klikni v hornom menu na “Fork”. To vytvorí tvoju kópiu cvičenia. Keď budeš chcieť spustiť kód, klikni v hornom menu na “Run”. Keď budeš mať cvičenie hotové, klikni na “Update”, to uloží tvoje cvičenie. Potom už len skopíruješ link cvičenia a odošleš mi ho do mailu. Ja ti cvičenie skontrolujem a oznámkujem.

Alebo jednoduchšie: Zaregistruj sa na http://www.codermania.com a prejdi si cvičenia tam. Cvičenia sa vyhodnocujú automaticky. Ak si nebudeš dať vedieť rady, je tam tlačidlo “Ask for help”. Ak nevieš po anglicky, môžeš použiť Google translator. Veľa šťastia.

Prihlásiť sa k odberu noviniek o programovaní

* povinné pole



Chcem dostávať novinky o:


 

Programovanie pre neprogramátorov – 1. lekcia

Tento článok je súčasťou môjho online kurzu programovania v JavaScripte. Každý sa ho môže zúčastniť, kurz je zdarma. Kto sa ešte nezaregistroval, môže tak spraviť tu: http://eepurl.com/UzefH. Kurz obsahuje teoretickú časť (články na tomto blogu) a praktickú čast (domáce úlohy zadávané emailom).

V úvodnom článku o programovaní som sľúbil, že v ďalšom článku si ukážeme kusy kódu.

Tak poďme na to. Dnes sa naučíme pojmy ako

  • variable (čítaj veriebl)
  • array (čítaj erej)
  • string (čitaj ako vidíš)
  • integer (čítaj intidžer)
  • float (čítaj flout)
  • boolean (čítaj búlín)

Tieto pojmy využijete takmer vo všetkých programovacích jazykoch.

Premenné (variables)

Premenné si môžete predstaviť ako úložisko dát. Do premennej môžeme uložiť text (dátový typ string), čislo (dátové typy integer, float, double), zoznam položiek (pole), funkcie, objekty a ďalšie. Premenné sa píšu anglickým názvom. Vlastne všetky programy sa píšu anglicky, aby im rozumeli programátori z celého sveta. V JavaScripte začína definícia premennej kľúčovým slovom “var” (skratka variable).

Ukážka premennej dátového typu string s názvom “name” a hodnotou ‘Peter’:

var name = 'Peter';

Ukážka premenných s názvom “carName” a “pigName”:

//string môže začínať a končiť jednoduchými uvodzovkami ' '
var carName = 'Škoda';
//alebo dvojitými uvodzovkami " "
var pigName = "Miško";

Všimnite si ako sú názvy napísané. Viacslovné názvy začínajú malým písmenom, nové slovo začína veľkým. Toto sa nazýva CamelCase a je to programátorský štandard vo väčšine programovacích jazykoch. Všimnime si tiež, že deklarácia premennej končí znakom “;” nazývaný stredník (semicolon). Stredník slúži k ukončeniu príkazu.

Premenné typu string môžeme spájať s operátorom +:

var firstname = 'Peter';
var lastname = 'Pan';
var fullName = firstname + ' ' + lastname; //medzi firstname a lastname musíme pridať medzeru. fullName má hodnotu 'Peter Pan'

Premenné typu integer/float:

//integer je celé číslo
var a = 6;
var b = 2;
var c = a + b; //8
var d = a / b; //3
var e = a * b; //12
var f = a - b; //4
//float je desatinné číslo
var x = 1.5;
var y = 2.23;
var z = x + y; //3.73

Desatinné čísla sa píšu s bodkou, nie čiarkou ako sme zvyknutí.

Premenné typu boolean:

var isDay = true; //je deň
var isNight = false; //nie je noc
var hasDog = false; //nemá psíka

Premenné typu boolean majú len 2 hodnoty – “true” a “false”. Používajú sa na zistenie či je niečo pravda alebo nepravda. Všimnite si prefixu “is/has”. Je zvykom tento prefix mať v názve premennej typu boolean.

Viac o premenných sa dočítate tu.

Komentáre (comments)

V programoch sa píšu komentáre pre objasnenie, čo daný kus kódu robí. Programátor naprogramuje niečo zložité, nenapíše si k tomu komentár, lebo v danej chvíli je mu jasné čo daný kód robí. Keď sa však po pol roku k tomu kódu vráti, bude márne rozmýšľať čo tým kusom kódu pred pol rokom myslel. Preto dobrí programátori píšu komentáre. Komentáre sa tiež píšu po anglicky, len v tomto článku ich budem písať po slovensky.

Ukážka komentárov:

//toto je jednoriadkový komentár
//každý riadok musí začínať s dvoma lomítkami

/** toto je viacriadkový komentár
začína lomítkom a dvoma hviezdičkami
končí jednou hviezdičkou a jedným lomítkom
*/

//môžeme zakomentovať aj kusy kódu. Zakomentovaný kód bude program ignorovať.
//var a = 'blabla';

Kľúčové slová (keywords)

Každý programovací jazyk má kľúčové slová. V JavaScripte je to napr “var”, “break”, “delete”,…  Kľúčové slová nemôžu byť použité ako názvy premenných pretože majú definovaný svôj speciálny význam. Všetky kľúčové slová nájdete tu.

Polia (arrays)

Ak ste si predstavili pole ako rolu, tak to nie je ono. Polia slúžia v programoch na uloženie zoznamu dát. Pole je vlastne typ premennej, tak ako sme si predstavili typy string, integer, float a boolean.

Ukážka poľa v JavaScripte:

/** pole people obsahuje mená ľudí. K položkám v poli pristupujeme pomocou indexu. Polia sa indexujú od 0. */
var people = ['Jully', 'John', 'Josh', 'Marry'];

var jully = people[0]; //people[0] vráti položku s indexom 0, teda 'Jully'
var josh = people[2]; //people[2] vráti 'Josh'

//položku v poli môžeme zmeniť
people[1] = 'Joe'; //John zmeníme na Joe

//prázdne pole
var people2 = [];

people2[0] //vráti undefined, pretože v poli na indexe 0 nič nie je.

//položky do poľa pridáme pomocou funkcie push
people2.push(jully, 'Julian', people[3]); // ['Jully', 'Julian', 'Marry']

//počet položiek v poli zistíme pomocou length
var peopleCount = people.length; //4

S poľami sa toho dá robiť veľa. Viac sa dočítate na w3schools. Polia si precvičíme v cvičení, na konci článku.

Zaujímavosti

var name = 'Peter'; //definujeme premennú kľúčovým slovom var
name = 'Jay'; //hodnotu premennej môžeme zmeniť. Premenná už existuje, píšeme ju bez var.
name = []; //hodnotu premennej môžeme predefinovať

Všetky prebrané veci v tomto článku sú základné stavebné kamene každého programu.

Pôvodne som chcel prebrať viac, ale zdá sa, že už je toho v tejto lekcii dosť. V druhej lekcii si predstavíme cykly a nejaké tie ify – ďalšie základné stavebné kamene každého programu. Ak ste sa ešte nezaregistrovali do kurzu a chcete sa naučiť základy programovania, môžte sa ešte stále zaregistrovať.

Komu by nestačil tento článok, tu je pár zdrojov o JavaScripte:

Cvičenia

1. úloha: http://jsfiddle.net/elfoslav/9G3xa/
2. úloha: http://jsfiddle.net/elfoslav/He9z4/

Ako odovzdávať cvičenia? Keď sa ti zobrazí stránka s cvičením, klikni v hornom menu na “Fork”. To vytvorí tvoju kópiu cvičenia. Keď budeš chcieť spustiť kód, klikni v hornom menu na “Run”. Keď budeš mať cvičenie hotové, klikni na “Update”, to uloží tvoje cvičenie. Potom už len skopíruješ link cvičenia a odošleš mi ho do mailu. Ja ti cvičenie skontrolujem a oznámkujem.

Alebo jednoduchšie: Zaregistruj sa na http://www.codermania.com a prejdi si cvičenia tam. Cvičenia sa vyhodnocujú automaticky. Ak si nebudeš dať vedieť rady, je tam tlačidlo “Ask for help”. Ak nevieš po anglicky, môžeš použiť Google translator. Veľa šťastia.

Prihlásiť sa k odberu noviniek o programovaní

* povinné pole



Chcem dostávať novinky o: