10. diel - Poľa v JavaScripte druhýkrát - Radenie prvkov a 2D poľa Nové

V tutoriále základov JavaScriptu sa budeme venovať ďalšej práci s poľom. Ukážeme si, ako prvky poľa zoradiť. Predstavíme si tiež pole polí, teda dvojrozmerné pole. Využijeme ho pri tvorbe aplikácie, ktorá bude mať za úlohu zistiť, kto má daný deň v roku sviatok.

Radenie prvkov v poli

Položky v poli je možné jednoducho zoradiť metódou sort(). Táto metóda nám zoradí textové reťazce podľa abecedy (vzostupne):

let jmena = ["Dan", "Bohouš", "Cyril", "Anna"];
jmena.sort();
for (let jmeno of jmena) {
    document.write(jmeno + " ");
}

Výstup v prehliadači:

Poradie prvkov v poli môžeme otočiť pomocou metódy reverse(). Do predchádzajúceho príkladu teda pridáme volanie tejto metódy a cyklus na výpi prvkov poľa:

jmena.reverse();
for (let jmeno of jmena) {
    document.write(jmeno + " ");
}

Výstup v prehliadači:

Pokiaľ máme v poli čísla, metóda sort() ich zoradí ako textové reťazce:

let cisla = [5, 3, 30, 25];
cisla.sort();
for (let cislo of cisla) {
    document.write(cislo + " ");
}

Výstup:

Tento výpis je ale správne iba lexikograficky, nie tak, ako sme mali v úmysle. Aby sme docielili správny výsledok, musíme metóde pridať anonymnú funkciu, v ktorej určíme, podľa čoho má prvky nášho poľa porovnať. Použijeme teda nasledujúci zápis:

let cisla = [5, 3, 30, 25];
cisla.sort(function(a, b) { return a - b });
for (let cislo of cisla) {
    document.write(cislo + " ");
}

V prehliadači si môžeme overiť, že sú čísla už zoradené správne:

Funkciám sa budeme venovať v lekcii Funkcie v JavaScripte. Jednoducho povedané tu metóde sort() určíme, že má zistiť rozdiel medzi dvoma prvkami (a - b). Pretože sa tieto prvky pokúšame odčítať, dôjde k ich pretypovaniu z reťazca na číslo. Ak je a väčšia ako b, získame kladnú hodnotu a metóda tieto čísla prehodí. V opačnom prípade zostane poradie zachované. Porovnávanie položiek v poli prebieha opakovane až do chvíle, kedy sú všetky prvky poľa na správnych pozíciách a pole je celé zoradené.

Dvojrozmerné pole v JavaScripte

Mnohých z nás asi neprekvapí, že JavaScript umožňuje vytvoriť aj pole, ktoré obsahuje ďalšie pole ako svoje prvky. Hovoríme potom o poli polí alebo o dvojrozmernom poli.

Dvojrozmerné pole si môžeme v pamäti predstaviť ako tabuľku a mohli by sme takto reprezentovať napr. rozohranú partiu piškvoriek. Ak by sme sa chceli držať reálnych aplikácií, môžeme si predstaviť, že do 2D poľa budeme ukladať informácie o obsadenostiach sedadiel v kinosále. Situáciu by sme si mohli graficky znázorniť napr. takto:

(Na obrázku je vidieť 2D pole reprezentujúce obsadenosť kinosály)

Kinosála by bola v praxi samozrejme väčšia, ale ako ukážka nám toto pole postačí. 0 znamená voľno, 1 obsadené. Neskôr by sme mohli doplniť aj 2 pre rezervované a podobne.

Viacrozmerné polia využijeme najmä, ak programujeme nejakú simuláciu, napríklad hru.

Deklarácia 2D poľa

Aby sme vytvorili pole polí, najskôr si deklarujeme pole s názvom kinosal. Do toho potom pomocou cyklu vložíme nové polia (kinosal[i] = [];), ktorého položky potom pomocou vnoreného cyklu napĺňame dátami. Definícia takého poľa pre kinosálu, ktorá by na začiatku obsahovala samé 0, vyzerá takto:

let kinosal = [];

for (let i = 0; i < 5; i++) {
    kinosal[i] = [];
    for (let j = 0; j < 5; j++) {
        kinosal[i][j] = 0; // Naplnenie poľa nulami
    }
}

Prvý cyklus udáva počet stĺpcov, druhý cyklus udáva počet riadkov (samozrejme si to môžeme určiť aj obrátene, napr. matice v matematike sa zapisujú opačne).

Naplnenie dátami

Teraz kinosálu naplníme jednotkami tak, ako je vidieť na obrázku vyššie. Pre prístup k prvku 2D poľa musíme samozrejme zadať dve súradnice pomocou indexov. Prostredný prvok nášho kinosály je teda na pozícii kinosal[2][2]. Predošlý kód doplníme takto:

kinosal[2][2] = 1;

// Úprava 4. riadku
for (let i = 1; i < 4; i++) {
    kinosal[3][i] = 1;
}

// Naplnenie celého posledného riadku
for (let i = 0; i < 5; i++) {
    kinosal[4][i] = 1;
}

Výpis

Výpis poľa opäť vykonáme pomocou cyklu, budeme potrebovať opäť dva cykly (jeden nám proiteruje stĺpce a druhý riadky). Ako správni programátori nevložíme počet riadkov a stĺpcov do cyklov napevno, pretože sa môže zmeniť.

Musíme však pamätať na skutočnosť, že keď sa spýtame na kinosal.length, bude obsahovať počet vnorených polí. Aby sme získali počet riadkov (dĺžku vnútorného poľa), spýtame sa na kinosal[i].length.

Cykly zanoríme do seba tak, aby nám vonkajší cyklus prechádzal riadkami a vnútornými stĺpcami v aktuálnom riadku. Po výpise riadku je nutné odriadkovať. Oba cykly musia mať samozrejme inú riadiacu premennú. Doplníme teda tento kód:

for (let i = 0; i < kinosal.length; i++) {
    for (let j = 0; j < kinosal[i].length; j++) {
        document.write(kinosal[i][j] + " ");
    }
    document.write("<br>");
}

Keď teraz spustíme celý príklad v prehliadači, dostaneme tento výstup:

Naplnenie 2D poľa ručne

Dvojrozmerné pole je možné tiež deklarovať a naplniť dátami ručne:

let kinosal = [
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0],
    [0, 1, 1, 1, 0],
    [1, 1, 1, 1, 1]
];

Ak pridáme k tomuto kódu cykly na výpis všetkých prvkov z predchádzajúceho príkladu, dostaneme v prehliadači rovnaký výstup:

Výpis sviatkov pre daný deň

Na záver si dnes vytvoríme skript vypisujúci, kto má dnes sviatok. Najprv si vytvoríme pole, kam budeme ukladať ďalšie pole, v ktorom budú uložené sviatky v danom mesiaci. Na pridanie vnorených polí využijeme metódu push(). Postupne takto doplníme položky so všetkými menami v roku.

Potom zistíme aktuálny dátum a pomocou metódy getDate() získame číslo dňa. Metóda vracia hodnotu 1 až 31, ak teda chceme získať zodpovedajúci index v poli pre aktuálny deň, musíme odpočítať 1. Poradové číslo mesiaca získame metódou getMonth(). Tá vracia hodnotu od 0 do 11, kde 0 zodpovedá januáru a 11 decembru, získanú hodnotu teda už nemusíme upravovať. Nakoniec vyberieme hľadaný prvok v poli polí, použijeme teda najprv index mesiaca a potom index dňa:

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

// vytvoríme si prázdne pole mesiacov a postupne doň pridáme pole so sviatkami v danom mesiaci
let mesice = [];

// 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", "Bretislav", "Bohdana", "Pravosláv", "Edita", "Radovan", "Alice", "Ctirad", "Drahoslav", "Vladislav", "Dúbravka", "Ilona", "Biela", "Slávomier", "Zdeniek", "Milena", "Miloš", "Zora", "Ingrid", "Otýlie", "Zdislava", "Robin", "Marika"]);
// február
mesice.push(["Hyniek", "Nela", "Blažej", "Jarmila", "Dobromila", "Vanda", "Veronika", "Milada", "Apolena", "Mojmír", "Božena", "Slávená", "Venceslav", "Valentín", "Georgína", "Ljuba", "Miloslava", "Gizela", "Patrik", "Oldřich", "Lenka", "Peter", "Svätopluk", "Matej", "Liliana", "Dorota", "Alexandr", "Lumír", "Horymír"]);
// marec
mesice.push(["Bedrich", "Anežka", "Kamil", "Stela", "Kazimír", "Miroslav", "Tomáš", "Gabriela", "Františka", "Viktória", "Anjela", "Rehor", "Ružená", "Rút, Matylda", "Ida", "Elena, Herbert", "Vlastimil", "Eduard", "Josef", "Svetlana", "Radek", "Leona", "Ivona", "Gabriel", "Marián", "Emanuel", "Dita", "Soňa", "Tatiana", "Arnošt", "Kvido"]);
// apríl
mesice.push(["Hugo", "Erika", "Richard", "Ivana", "Miroslava", "Vendula", "Harman, Hermína", "Ema", "Dušan", "Darja", "Izabela", "Julius", "Aleš", "Vincent", "Anastázia", "Irena", "Rudolf", "Valérie", "Rastislav", "Marcela", "Alexandra", "Evženie", "Vojtoch", "Juraj", "Marek", "Oto", "Jaroslav", "Vlastislav", "Robert", "Blahoslav"]);
// máj
mesice.push(["Sviatok práce", "Zikmund", "Alexej", "Kvetoslav", "Klaudia", "Radoslav", "Stanislav", "Deň víťazstva", "Ctibor", "Blažena", "Svätava", "Pankrác", "Servác", "Bonifác", "Žofia", "Premysel", "Aneta", "Nataša", "Ivo", "Zvyšok", "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", "Antónia", "Antonín", "Roland", "Vít", "Zvyšok", "Adolf", "Milan", "Leoš", "Kveta", "Alois", "Pavla", "Zdenka", "Jan", "Ivan", "Adriana", "Ladislav", "Lubomier", "Peter a Pavel", "Šárka"]);
// júl
mesice.push(["Jaroslava", "Patrícia", "Radomír", "Prokop", "Cyril, Metódaj", "Deň upálenia majstra Jána Husa", "Bohuslava", "Nora", "Drahoslava", "Libuša, Amália", "Olga", "Borok", "Marketa", "Karolína", "Jindřich", "Luboš", "Martina", "Drahomiera", "Čeniek", "Ilja", "Víťazsláv", "Magdaléna", "Libor", "Kristína", "Jakub", "Anna", "Vieroslav", "Viktor", "Marta", "Borivoj", "Ignác"]);
// august
mesice.push(["Oskar", "Gustav", "Miluša", "Dominik", "Kristián", "Oldřiška", "Lada", "Sebeslav", "Roman", "Vavrinec", "Zuzana", "Klára", "Alena", "Alan", "Hana", "Jachým", "Petra", "Helena", "Ľudík", "Bernard", "Johana", "Bohuslav", "Sandra", "Bartolomej", "Radim", "Ludiek", "Otakar", "Augustín", "Evelína", "Vladená", "Pavlína"]);
// septembra
mesice.push(["Linda, Samuel", "Adéla", "Bronislav", "Geniška", "Boris", "Boleslav", "Regína", "Mariana", "Daniela", "Irma", "Denisa", "Marie", "Lubor", "Radka", "Jolana", "Ľudmila", "Nadež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šok", "Eliška", "Hanuš", "Justína", "Vera", "Štefán, Sára", "Marina", "Andrej", "Marcel", "Renáta", "Agáta", "Tereza", "Havel", "Hodvika", "Lukáš", "Michaela", "Vendelín", "Brigita", "Sabína", "Teodor", "Nina", "Beáta", "Erik", "Šarlota, Zoe", "Deň vzniku samostatného československého štátu", "Silvie", "Tadeáš", "Štiepánka"]);
// november
mesice.push(["Felix", "Pamiatka zosnulých (dušičky)", "Hubert", "Karel", "Miriam", "Libená", "Saskie", "Bohumier", "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ília", "Katarína", "Artur", "Xenie", "René", "Zina", "Ondrej"]);
// december
mesice.push(["Iva", "Blanka", "Svätoslav", "Barbora", "Jitka", "Mikuláš", "Benjamín", "Kvetoslava", "Vroclav", "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ý", "Štepan, 2. sviatok vianočný", "Žaneta", "Bohumila", "Judita", "David", "Silvester"]);

// teraz pristúpime k samotnému výpisu
let dnes = new Date();
let den = dnes.getDate()-1;
let mesic = dnes.getMonth();
document.write("Dnes má meniny " + mesice[mesic][den]);

Výsledok:

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