6. diel - Polia v JavaScripte

V minulej lekcii, Textové reťazce v JavaScripte , sme si ukázali, ako pracovať s textovými reťazcami, vysvetlili sme si použitie rôznych typov úvodzoviek a špeciálne znaky.

V minulej lekcii, Textové reťazce v JavaScripte , sme sa naučili používať cykly. V dnešnom JavaScript tutoriálu si uvedieme dátovú štruktúru poľa.

Predstavte si, že si chcete uložiť nejaké údaje o viac prvkoch. Napr chcete v pamäti uchovávať 10 čísel, 30 pozícií posledných súradníc myši alebo mena 50tich užívateľov. Asi vám dôjde, že v programovaní bude nejaká lepšia cesta, než začať búšiť premenné Užívateľ 1, Užívateľ 2... až uzivatel50. Nehľadiac na to, že ich môže byť potrebné 1000. A ako by sa v tom potom hľadalo? Brrr, takto nie

Ak potrebujeme uchovávať väčšie množstvo premenných rovnakého typu, tento problém nám rieši poľa. Môžeme si ho predstaviť ako rad priehradiek, de v každej máme uložený jeden prvok. Priehradky sú očíslované tzv. Indexy, prvý má index 0. Môžeme si však prvky poľa miesto číslovanie aj priamo pomenovať, teda je indexovať textovým reťazcom. V niektorých jazykoch musíme pri vytváraní poľa zadať jeho presnú veľkosť a rovnaký typ údajov (typ premennej - číslo, reťazec, objekt ...) pre všetky prvky. V JavaScriptu nemusíme špecifikovať vôbec nič a môžeme si do poľa nahrávať čo chceme Pole úzko súvisí s cyklami, pretože sa potom používajú na manipuláciu s prvkami.

Vytvorenie poľa

Pole môžeme vytvoriť pomocou objektu Array:

let a = new Array();
a[0] = 1;

K prvkom poľa potom pristupujeme cez hranatú zátvorku, tu sme na prvý index (teda index 0) uložili číslo 1. Pomocou hranatých zátvoriek môžeme poľa takisto vytvoriť. Nasledujúci kód funguje úplne rovnako ako ten vyššie, ale je kratšia a preto tento zápis polí budeme preferovať:

let a = [];
a[0] = 1;

Naplnenie poľa cyklom

Naplníme si pole číslami od 1 do 10 pomocou for cyklu:

let a = [];
for (let i = 0; i < 10; i++) {
    a[i] = i + 1;
}

Aby sme pole vypísali, môžeme za predchádzajúci kód pripísať:

for (let i = 0; i < a.length; i++) {
    document.write(a[i] + " ");
}

Všimnite si, že pole má vlastnosť length, kde je uložená jeho dĺžka, teda počet prvkov.

výsledok:

Foreach

Pre čítanie všetkých prvkov z poľa môžeme použiť zjednodušenú verziu cyklu pre prácu s kolekciami, známu ako foreach. Ten prejde všetky prvky v poli a jeho dĺžku si zistí sám:

let prvky = [];
// Tu by sa nachádzal nejaký kód pre naplnenie poľa
// ...
for (prvek of prvky) {
    document.write(prvek);
}

V minulosti v JavaScripte existoval ešte cyklus for...in. Ten bol však zrušený, pretože mal v premennej miesto prvku jeho index, čo bolo mätúce.

Naplnenie poľa výpočtom prvkov

Pole samozrejme môžeme naplniť ručne, ponúka sa to napríklad na uloženie dní v týždni alebo mien v kalendári k vypísaniu sviatku. Oboje si tu vysvetlíme.

Začnime vypísaním dňa v týždni, k tomu využijeme metódy getDay(), ktorá sa volá na objekte Date a vracia deň v týždni. Bohužiaľ sú dni v americkom formáte začínajúcom nedeľou, to nám však toľko nevadí:

let dny = ["Nedeľa", "Pondelok", "Utorok", "Streda", "Štvrtok", "Piatok", "Sobota"];
let d = new Date();
let den = d.getDay(); // vráti číslo 0 - 6
document.write("Dnes je " + dny[den]);

Skript vytvoril pole textových reťazcov (string ov) s názvami dní, ďalej si zistí číslo aktuálneho dňa. Potom je vypísaný niekoľký prvok v poli podľa tohto čísla dňa.

Do poľa môžeme prvky ľubovoľne pridávať alebo ich mazať:

let dny = ["Utorok", "Streda", "Štvrtok", "Piatok", "Sobota"];
dny.push("Nedeľa"); // pridá nový prvok na koniec poľa
dny.unshift("Pondelok"); // pridá nový prvok na začiatok poľa
dny.splice(2, 3); // zmaže 3. a 4. prvok (indexy sú od nuly)

Radenie prvkov v poli

Prvky v poli možno jednoducho zoradiť metódou sort(), bez odovzdanie ďalších parametrov sa zoradia podľa abecedy (vzostupne):

let slova = ['Dálava', 'Blýskavice', 'Erb', 'Cílovníci', 'Akát'];
slova.sort(); // Zmení slová na ["Akát", "Blýskavice", "Cílovníci", "Dálava", "Erb"]

Ak máme v poli čísla, zoradia sa bohužiaľ ako textové reťazce, takže je napr. 25 pred 3. Správanie radiacej metódy môžeme upraviť odovzdaním tzv. Anonymné funkcie (bude plne vysvetlené v nasledujúcej lekcii). Zotriedenie pole čísel by vyzeralo takto:

let cisla = [5, 3, 1, 30, 25, 80];
cisla.sort(function(a, b) { return a - b }); // Zmení cisla na [1, 3, 5, 25, 30, 80]

Poradie prvkov v poli môžeme otočiť pomocou metódy reverse():

dny.reverse(); // otočí pole tak, aby boli prvky pospiatky

Výpis sviatkov

Skúsime si urobiť ešte skript na vypísanie toho, kto má dnes sviatok. Najprv si musíme vytvoriť pole so všetkými menami v roku. Bude to trochu zložitejšie ako minulý príklad, pretože budeme potrebovať dvojrozmerné pole, presnejšie pole polí. Budeme mať polia mesiacov a v každom prvku (teda mesiaci) bude ďalšie pole s dni, ktoré bude obsahovať daná mena. Tú otrockú prácu prepisovanie mien do poľa som za vás urobil Poďme teda programovať:

// Tento skript pochádza z webu itnetwork.cz
// Smie byť ľubovoľne používaný aj modifikovaný, ale nesmie z neho byť zašpinenie tento text

// vytvoríme si prázdne pole mesiacov
let mesice = [];
// postupne pridáme mesiaca sa sviatky, prvky poľa teda bude ďalšou pole
// január
mesice.push(["Nový rok, Deň obnovy samostatného českého štátu", "Karina", "Radmila", "Diana", "Dalimil", "Traja králi", "Vilma", "Čestmír", "Vladan", "Břetislav", "Bohdana", "Pravoslav", "Edita", "Radovan", "Alice", "Ctirad", "Drahoslav", "Vladislav", "Doubravka", "Ilona", "Běla", "Slavomír", "Zdeněk", "Milena", "Miloš", "Zora", "Ingrid", "Otýlie", "Zdislava", "Robin", "Marika"]);
// február
mesice.push(["Hynek", "Nela", "Blažej", "Jarmila", "Dobromila", "Vanda", "Veronika", "Milada", "Apolena", "Mojmír", "Božena", "Slavena", "Věnceslav", "Valentín", "Jiřina", "Ljuba", "Miloslava", "Gizela", "Patrik", "Oldřich", "Lenka", "Petr", "Svatopluk", "Matěj", "Liliana", "Dorota", "Alexandr", "Lumír", "Horymír"]);
// marec
mesice.push(["Bedřich", "Anežka", "Kamil", "Stela", "Kazimír", "Miroslav", "Tomáš", "Gabriela", "Františka", "Viktorie", "Anjela", "Gregor", "Růžena", "Rút, Matylda", "Ida", "Elena, Herbert", "Vlastimil", "Eduard", "Josef", "Světlana", "Radek", "Leona", "Ivona", "Gabriel", "Marián", "Emanuel", "Dita", "Soňa", "Taťána", "Arnošt", "Benjamín"]);
// apríl
mesice.push(["Hugo", "Erika", "Richard", "Ivana", "Miroslava", "Vendula", "Heřman, Hermína", "Ema", "Dušan", "Darja", "Izabela", "Julius", "Aleš", "Vincenc", "Anastázie", "Irena", "Rudolf", "Valérie", "Rostislav", "Marcela", "Alexandra", "Evženie", "Vojtěch", "Jiří", "Marek ", "Oto", "Jaroslav", "Vlastislav", "Robert", "Blahoslav"]);
// máj
mesice.push(["Sviatok práce", "Zikmund", "Alexej", "Květoslav", "Klaudie", "Radoslav", "Stanislav", "Deň víťazstva", "Ctibor", "Blažena", "Svatava", "Pankrác", "Servác", "Bonifác", "Žofia", "Přemysl", "Aneta", "Nataša", "Ivo", "Zbyšek", "Monika", "Emil", "Vladimír", "Jana", "Viola", "Filip", "Valdemar", "Vilém", "Maxmilián", "Ferdinand", "Kamila"]);
// jún
mesice.push(["Laura", "Jarmil", "Tamara", "Dalibor", "Dobroslav", "Norbert", "Iveta, Slavoj", "Medard", "Stanislava", "Gita", "Bruno", "Antonie", "Antonín", "Roland", "Ví", "Zbyněk", "Adolf", "Milan", "Leoš", "Květa", "Alois", "Pavla", "Zdeňka", "Jan", "Ivan", "Adriana", "Ladislav", "Lubomír", "Petr a Pavel", "Šárka"]);
// júl
mesice.push(["Jaroslava", "Patricie", "Radomír", "Prokop", "Cyril, Metod", "Deň upálenia majstra Jána Husa", "Bohuslava", "Nora", "Drahoslava", "Libuše, Amálie", "Olga", "Bořek", "Markéta", "Karolína", "Jindřich", "Luboš", "Martina", "Drahomíra", "Čeněk", "Ilja", "Vítězslav", "Magdaléna", "Libor", "Kristýna", "Jakub", "Anna", "Věroslav", "Viktor", "Marta", "Bořivoj", "Ignác"]);
// august
mesice.push(["Oskar", "Gustav", "Miluše", "Dominik", "Kristián", "Oldřiška", "Lada", "Soběslav", "Roman", "Vavřinec", "Zuzana", "Klára", "Alena", "Alan", "Hana", "Jáchym", "Petra", "Helena", "Ludvík", "Bernard", "Johana", "Bohuslav", "Sandra", "Bartolomej", "Radim", "Luděk", "Otakar", "Augustín", "Evelína", "Vladěna", "Pavlína"]);
// septembra
mesice.push(["Linda, Samuel", "Adéla", "Bronislav", "Jindřiška", "Boris", "Boleslav", "Regína", "Mariana", "Daniela", "Irma", "Denisa", "Marie", "Lubor", "Radka", "Jolana", "Ludmila", "Naděžda", "Kryštof", "Zita", "Oleg", "Matúš", "Darina", "Berta", "Jaromír", "Zlata", "Andrea", "Jonáš", "Václav, Deň českej štátnosti", "Michal", "Jeroným"]);
// október
mesice.push(["Igor", "Olivie, Oliver", "Bohumil", "František", "Eliška", "Hanuš", "Justýna", "Věra", "Štefan, Sára", "Marina", "Andrej", "Marcel", "Renáta", "Agáta", "Tereza", "Havel", "Hedviga", "Lukáš", "Michaela", "Vendelín", "Brigita", "Sabina", "Teodor", "Nina", "Beáta", "Erik", "Šarlota, Zoe", "Deň vzniku samostatného československého štátu", "Silvie", "Tadeáš", "Štěpánka"]);
// november
mesice.push(["Felix", "Pamiatka zosnulých (dušičky)", "Hubert", "Karel", "Miriam", "Liběna", "Saskie", "Bohumír", "Bohdan", "Evžen", "Martin", "Benedikt", "Tibor", "Sáva", "Leopold", "Otmar", "Mahulena, Deň boja za slobodu a demokraciu", "Romana", "Alžbeta", "Nikola", "Albert", "Cecília", "Klement", "Emílie", "Kateřina", "Artur", "Xenie", "René", "Zina", "Ondřej"]);
// december
mesice.push(["Iva", "Blanka", "Svatoslav", "Barbora", "Jitka", "Mikuláš", "Benjamín", "Květoslava", "Vratislav", "Julie", "Dana", "Simona", "Lucie", "Lýdia", "Radana", "Albína", "Daniel", "Miloslav", "Ester", "Dagmar", "Natálie", "Šimon", "Vlasta", "Adam, Eva, Štedrý deň", "1. sviatok vianočný", "Štěpán, 2. sviatok vianočný", "Žaneta", "Bohumila", "Judita", "David", "Silvester"]);

// teraz prestupujeme k samotnému výpisu
let d = new Date();
let den = d.getDate()-1;
let mesic = d.getMonth();
document.write("Dnes má svátek " + mesice[mesic][den]);

výsledok:

Tak a to bol koniec našej práce s dátumom a časom. V budúcej lekcii, Riešené úlohy k 6. lekcii JavaScriptu , sa budeme venovať funkciám, bez ktorých sa v JavaScripte nezaobídeme.

V nasledujúcom cvičení, Riešené úlohy k 6. lekcii JavaScriptu, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.