Základy programovania v javascripte

Dominik Šelmeci 12.02.2016

Javascript je skriptovací programovací jazyk. Je "najpoužívanejší" jazyk dneška - aktuálny počet javascriptových repozitárov na Githube je okolo 1 917 600. Pre predstavu, taký počet repozitárov obsahuje cca 100 000 000 riadkov kódu. Primárne sa používa ako jazyk pri tvorbe webových stránok. Môžeme ho použiť aj na serveri (populárny node.js), alebo ako primárny jazyk v game engine (napríklad v Unity).

Javascript vyžaduje hlbšie pochopenie a štúdium, aby ste ho mohli zvládnuť na profesionálnej úrovni naproti HTML a CSS. Samozrejme tým nemyslím, že HTML a CSS sú ľahšie jazyky. Základná verzia Javascriptu je trocha "krkolomná", dá sa zjednodušiť používaním knižníc. Pod knižnicou chápeme súbor, v ktorom sa nachádza kód programovacieho jazyka, ktorý nám uľahčuje samotný vývoj webu, alebo aplikácie.

Som zástanca najskôr skúšaj, bav sa a potom choď do hĺbky. Dnes sa budeme hrať :). Preskočíme veľa poznania a obídeme základy tým, že použijeme knižnice. Ukážeme si, ako takú knižnicu nájsť, stiahnuť a použiť v našej šablóne.

Vytvorenie galérie pomocou knižnice Galleria.io

Príklad z praxe: vytvárame stránku a potrebujeme do nej vložiť galériu alebo slider. Čo urobíte ako prvé? No idete googliť samozrejme :). Po čase nájdete nejakú vhodnú knižnicu. Ja som našiel http://galleria.io/. Najskôr si nachystáme priečinok, ktorý si pekne štrukturalizujeme a vložíme do neho stiahnutú knižnicu.

Súbor index.html obsahuje základnú HTML kostru.

<!DOCTYPE html>
<html>
<head>
	<title>Galéria</title>
	<meta charset="utf-8">
</head>
<body>
	<h1>Galéria zvierat</h1>

</body>
</html>

Celý základ si môžete stiahnuť tu: štartovací súbor.

Na stránke knižnice máte podrobný návod, ako ju používať (tzv. quickstart). Nachádza sa aj na:
galleria.io => Documentation => Beginners Guide. Je tu popísaný celý návod ako ju spojazdniť. Naša galleria je postavená na knižnici jQuery. jQuery si môžeme stiahnuť na oficiálnej stránke jQuery, alebo použiť priamo ich súbor zo serveru. Vložte pod <meta charset="utf-8"> tento kód:

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

Tým sme sa oslobodili od nutnosti sťahovať ručne jQuery knižnicu. Následne pridáme aj súbor našej galérie pod jQuery.

<script src="galleria/galleria-1.4.2.min.js"></script>

Teraz pridáme naše obrázky do HTML (stiahnite si ľubovoľné obrázky z internetu, alebo použite môj štartovací súbor). Pod nadpis doplníme tento kód:

<div class="galleria">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
</div>

Triede .galleria potrebujeme nastaviť CSS štýl. Galéria na základe neho správne inicializuje veľkosť plochy. Vložte tento kód do značky <head></head>.

<style>
	.galleria{
		width: 700px; 
		height: 467px; 
		background: #000; 
	}
</style>

Už potrebujeme len inicializovať našu galériu. Knižnica spraví všetko ostatné za nás. Pred koncovú značku </body> vložte tento javascriptový kód:

<script>
	Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
	Galleria.run('.galleria');
</script>

Náš výsledok:

 

Výsledný kód si môžete stiahnuť: finálny súbor

Čo poviete? Napísali sme minimum javascriptového kódu a máme vytvorenú jednoduchú galériu. Môžeme si ju vložiť na vlastný web. Takýmto spôsobom môžeme nájsť množstvo ďalších javascriptových knižníc. Tie známejšie majú veľmi dobrú dokumentáciu. Z nej ľahko pochopíte ako knižnicu inicializovať a používať.

V tomto článku sme si ukázali, ako si môžete nájsť javascriptové knižnice na internete. Ako nájsť návod, ako knižnicu inicializovať na svojom webe. Plne sme si nevysvetlili, ako inicializácia prebieha a prečo sme napísali kód tak, ako sme ho napísali. To bude téma ďalšieho článku.

Teším sa na vaše reakcie dolu v komentároch.