Mesačné archívy: október 2014

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:


 

Barcamp Hradec Králové 2014

Čo je Barcamp?

Je to (väčšinou) sobota plná prednášok. Od rána (9:00) do večera (18:00) môžete sledovať rôzne prednášky technického (IT) ale aj netechnického smeru. Celá akcia je zdarma a ešte sa tam aj zadarmo občerstvíte vďaka sponzorom. Nie je to iba o prednáškach, ale hlavne o spoznávaní nových ľudí. Nemusíte byť za každú cenu na prednáške, môžete si niekoho odchytiť a namiesto prednášky s ním pokecať. Barcamp zvyčajne býva vo väčších priestoroch vysokých škôl. A zvyčajne býva večer afterpárty, kde sa môžete uvoľniť a pokecať s novými ľuďmi.

Môj Barcamp

Do Hradce Králové som vyrazil vlakom z Brna o 6:40 ráno. Ako to už býva zvykom, vlak v ktorom som sedel mal asi 7 minútové meškanie a mal som 5 minút na prestup v Pardubiciach. Samozrejme prípoj nepočkal tie 2 minúty, šak načo. O pol hodinu šiel ďalší vlak do Hradce. Tak som sa dostal na barcamp o pol hodinu neskôr a zmeškal som prvú prednášku. Čo už. Aspoň som stihol druhú prednášku, na ktorú som sa celkom tešil.

Co musí umět moderní HTML kodér? (Robin Pokorný). Keďže chcem učiť ľudí programovanie a kódovanie webových stránok/aplikácií, tak som si šiel pozrieť čo by som mal učiť. A bolo to presne to, čo som si myslel. Takže to bola jedna z tých prednášok, kde sa len utvrdíte v tom, že to čo robíte, je správne.

Sketchnoting (Jenda Knoulich) bola prednáška o technike zapisovania poznámok ako obrázkov, prípadne zvýrazneného textu. Pointou bolo, že keď zapisujete klasický text, váš mozog automaticky zabúda to, čo si píšete. Takže ak si na prednáškach zapisujete poznámky, rovno to zabúdate a budete sa dlhšie učiť z poznámok. Ale ak si robíte kreslené poznámky, ukladajú sa vám v mozgu. Ak to teda nie sú čarbanice, ktoré si väčšina ľudí zvykne robiť na prednáškach :)

Měním se v Apple Sheep (Pavel Jeňkovský). Na tejto prednáške som sa iba utvrdil v tom, že MAC sa proste oplatí mať. Aj keď potom, keď si zvyknete na MAC už neviete na inom systéme normálne pracovať. Keď dostanete prvý krát do rúk MAC, neviete s tým pracovať. Naučíte sa to cca za 2 týždne a potom už niet cesty späť.

Ideálne pracovné prostredie (Riki Fridrich). Kamoš Riki popisoval ako (zle) vplývajú openspace na zamestnancov a ich pracovný výkon. Ideálne pracovné prostredie je miestnosť, kde je tím max 7 ľudí, ktorí pracujú na 1 projekte. Každý je tak informovaný čo sa s projektom deje.

Proč? Protože to jde (Štěpán Bechynský). Praktická prednáška o tom, ako si poskladať mobilný telefón s Arduino. Štepán počas prednášky vysvetlil jednotlivé časti telefónu a poskladal ich do seba ako lego. Telefón mal iba 2 tlačítka – jedno na volanie, druhé na posielanie SMS. Číslo, na ktoré sa malo volať a posielať SMS si naprogramoval. Keď si poskladáte takýto telefón, môžete posielať SMS a volať z akéhokoľvek čísla. Super, nie? :)

Mobilný telefón na platforme Arduino.
Mobilný telefón na platforme Arduino.

Vynechám popis pár prednášok aby som mohol dlhšie popísať najzaujímavejšiu prednášku Hodnotový kotrmelec krásou a smradem Indie (Jiří Kastner). Jiří sa vydal na 5 týždňov do Severnej Indie učiť deti telocvik a pobehať budhistické chrámy v rámci osobného rozvoja. Už po pár dňoch zistil aký obrovský rozdiel je medzi východnou a západnou kultúrou. Ľudia na východe žijú jednoduchým životom v chudobe, ale sú šťastní vďaka tomu, že poznajú pravé hodnoty života. Vďaka budhizmu.

Na západe je pre nás učiteľ autorita (aspoň väčšinou). Na východe je učiteľ zážitkom.

Ako učiteľ telocviku učil deti robiť kliky a rátal im koľko ich spravia. Čo myslíte? Koľko?… 7 ročné deti nemali problém spraviť nad 100 klikov :o. Schválne vyskúšajte koľko klikov spraví 7 ročné dieťa na západe 😉

Stravu nemali moc pestrú. Každý deň ryža, zelenina a sem tam nejaký iný pokrm. Aj napriek takejto jednoduchej strave tam ľudia dokážu fungovať vitálnejšie ako ľudia na západe. A vďaka tejto strave nepoznajú obezitu. Ukazoval im obrázok tučnej rozprávkovej postavičky a neveriacky krútili hlavou, čo to je za tvora.

Počúvať zážitky ostatných je fajn, ale zažiť si ich na vlastnej koži je na nezaplatenie, takže raz určite navštívim východné krajiny.

Viac o jeho zážitkoch si môžete prečítať na:
http://kastner.blog.idnes.cz/c/380692/Jak-byt-druhym-pozitivnim-zazitkem.html a http://kastner.blog.idnes.cz/c/380692/Jak-byt-druhym-pozitivnim-zazitkem.html

Cesta do Brna

Keďže už pár ľudí z podobných akcií ako barcamp poznám, tak som si dokázal nájsť odvoz do Brna a nemusel som čakať do polnoci na vlak. V aute ma veľmi zaujalo rozprávanie vodiča (Jezevec) o tom prečo sa Rusi serú do Ukrajiny, resp. jej častí kde je veľa Rusov. Jednoducho preto, lebo z historických dôvodov tam nemajú Rusov radi. Asi ako Slováci Maďarov a Francúzi Nemcov, možno ešte viac. Rusi tam žijúci túto nenávisť celkom pociťovali a tak zavolali tatinovi Putinovi aby tam poslal tanky a trochu ich skľudnil. Vraj si iba chráni ruských občanov.

Na záver

Ak ste to dočítali až sem, tak vás vyzývam, aby ste obetovali jednu sobotu a šli na ďalší barcamp. Je to taký technickejší TEDx akurát zdarma. Barcampy bývajú pomerne dosť často po celom svete. Občas aj na Slovensku ak sa niekto odhodlá ho zorganizovať. Mám za sebou 2 barcampy a pôjdem aj na tretí. A pôjdem aj bez vás 😛