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:

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>// <![CDATA[
&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:

• Harlem Shake
• Bomberman
• Pacman
• Solitare
• Wolfenstein 3D

Č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.

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:

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.