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[
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++) {
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.
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: