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

V minulej lekcii, Poľa v JavaScripte, sme sa naučili používať pole. Ukázali sme si prácu s prvkami poľa.

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().

Radenie textu

Táto metóda nám zoradí textové reťazce podľa abecedy (vzostupne):

let names = ["Daniel", "Robin", "Hansel", "Annie"];
names.sort();
for (let name of names) {
    document.write(name + " ");
}

Výstup v prehliadači:

Zostupné radenie

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ýpis prvkov poľa:

names.reverse();
for (let name of names) {
    document.write(name + " ");
}

Výstup v prehliadači:

Radenie čísel

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

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

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 numbers = [5, 3, 30, 25];
numbers.sort(function(a, b) { return a - b });
for (let number of numbers) {
    document.write(number + " ");
}

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 polia 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 movieTheater. Do toho potom pomocou cyklu vložíme nové polia zápisom:

movieTheater[i] = [];

Pomocou vnoreného cyklu potom naplníme vnorené polia dátami. Definícia takého poľa pre kinosála, ktorá by na začiatku obsahovala samé 0, vyzerá takto:

let movieTheater = [];

for (let i = 0; i < 5; i++) {
    movieTheater[i] = [];
    for (let j = 0; j < 5; j++) {
        movieTheater[i][j] = 0; // filling the array with 0
    }
}

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:

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 movieTheater[2][2]. Predošlý kód doplníme takto:

movieTheater[2][2] = 1;

// Edit of the 4th row
for (let i = 1; i < 4; i++) {
    movieTheater[3][i] = 1;
}

// Filling the entire last row
for (let i = 0; i < 5; i++) {
    movieTheater[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 movieTheater.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 movieTheater[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. Pre výpis 2D využijeme HTML tabuľku. Oba cykly musia mať samozrejme inú riadiacu premennú. Doplníme teda tento kód:

document.write("<table border='1'>");

for (let i = 0; i < movieTheater.length; i++) {
    document.write("<tr>");
    for (let j = 0; j < movieTheater[i].length; j++) {
        document.write("<td>"+ movieTheater[i][j] + "</td>");
    }
    document.write("</tr>");
}

document.write("</table>");

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 movieTheater = [
    [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:

// This script comes from the web ictdemy.com
// It may be used and modified as desired, but this text may not be deleted from it

// we will create an empty arrays of months and gradually add to it a field with holidays in the given month
let months = [];

// January
months.push(["New Year's Day", "Basil", "Genevieve", "Elizabeth Ann Seton", "Edward the Confessor", "Epiphany (Three Kings' Day)", "Raymond", "Lucian", "Adrian", "William", "Theodosius", "Aelred", "Hilary", "Felix", "Paul", "Marcellus", "Anthony", "Margaret", "Wulfstan", "Fabian", "Agnes", "Vincent", "Emerentiana", "Francis de Sales", "Conversion of Saint Paul", "Timothy and Titus", "Angela", "Thomas Aquinas", "Gildas", "Charles", "John Bosco"]);
// February
months.push(["Brigid", "Presentation of Jesus", "Blaise", "Gilbert", "Agatha", "Paul Miki and Companions", "Colette", "Jerome Emiliani", "Apollonia", "Scholastica", "Our Lady of Lourdes", "Damian", "Catherine de Ricci", "Cyril and Methodius (Valentine's Day)", "Faustina", "Juliana", "Seven Founders of the Servite Order", "Bernadette", "Conrad", "Eleutherius", "Peter Damian", "Chair of Saint Peter", "Polycarp", "Matthias", "Walburga", "Alexander", "Gabriel of Our Lady of Sorrows", "Oswald", "John Cassian (Leap Year)"]);
// March
months.push(["David", "Chad", "Katharine Drexel", "Casimir", "John Joseph of the Cross", "Colette", "Perpetua and Felicity", "John of God", "Frances of Rome", "Victor", "Rosalia", "Gregory", "Euphrasia", "Matilda", "Louise de Marillac", "Heribert", "Patrick (Saint Patrick's Day)", "Cyril of Jerusalem", "Joseph (Saint Joseph's Day)", "Cuthbert", "Benedict", "Lea", "Turibius of Mogrovejo", "Gabriel", "Annunciation", "Margaret Clitherow", "John of Egypt", "Sixtus III", "Gladys", "John Climacus", "Benjamin"]);
// April
months.push(["Hugh", "Francis of Paola", "Richard of Chichester", "Isidore", "Vincent Ferrer", "William of Eskilsoe", "John Baptist de la Salle", "Julie Billiart", "Mary Cleophas", "Fulbert of Chartres", "Gemma Galgani", "Julius I", "Martin I", "Lidwina", "Paternus", "Bernadette", "Stephen Harding", "Perfectus", "Emma", "Agnes of Montepulciano", "Anselm", "Soter and Caius", "George (Saint George's Day)", "Fidelis", "Mark", "Cletus", "Zita", "Peter Chanel", "Catherine of Siena", "Pius V"]);
// May
months.push(["Joseph the Worker", "Athanasius", "Philip and James", "Florian", "Hilary of Arles", "John before the Latin Gate", "Stanislav", "Victor", "Gregory Nazianzen", "Solomon", "Ignatius", "Pancras", "Servatius", "Boniface", "Isidore the Farmer", "Margaret of Cortona", "Paschal Baylon", "John I", "Dunstan", "Bernardine of Siena", "Christopher Magallanes", "Rita of Cascia", "John Baptist Rossi", "Mary Help of Christians", "Bede", "Philip Neri", "Augustine of Canterbury", "Germanus", "Maximinus", "Joan of Arc", "Visitation of the Blessed Virgin Mary"]);
// June
months.push(["Justin", "Marcellinus and Peter", "Charles Lwanga and Companions", "Francis Caracciolo", "Boniface", "Norbert", "Robert of Newminster", "William of York", "Columba", "Margaret of Scotland", "Barnabas", "John of St. Facundo", "Anthony of Padua", "Methodius", "Vitus", "John Francis Regis", "Botolph", "Gregory Barbarigo", "Romuald", "Silverius", "Aloysius Gonzaga", "Thomas More", "John Fisher", "Nativity of John the Baptist", "Prosper", "Josemaria Escriva", "Cyril of Alexandria", "Irenaeus", "Peter and Paul", "First Martyrs of the Church of Rome"]);
// July
months.push(["Aaron", "Otto", "Thomas", "Elizabeth of Portugal", "Anthony Maria Zaccaria", "Maria Goretti", "Pantaenus", "Kilian", "Augustine Zhao Rong", "Rufina", "Benedict", "John Gualbert", "Henry", "Kateri Tekakwitha", "Bonaventure", "Our Lady of Mount Carmel", "Alexis", "Frederick", "Macrina", "Apollinaris", "Lawrence of Brindisi", "Mary Magdalene", "Bridget of Sweden", "Charbel Makhlouf", "James the Greater", "Joachim and Anne", "Pantaleon", "Victor I", "Martha", "Peter Chrysologus", "Ignatius of Loyola"]);
// August
months.push(["Alphonsus Liguori", "Eusebius of Vercelli", "Lydia", "John Vianney", "Transfiguration of the Lord", "Oswald", "Sixtus II", "Dominic", "Teresa Benedicta of the Cross", "Lawrence", "Clare", "Jane Frances de Chantal", "Hippolytus", "Maximilian Kolbe", "Assumption of the Blessed Virgin Mary", "Stephen of Hungary", "Hyacinth", "Helena", "John Eudes", "Bernard", "Pius X", "Queenship of Mary", "Rose of Lima", "Bartholomew", "Louis of France", "Joseph Calasanz", "Monica", "Augustine of Hippo", "Beheading of John the Baptist", "Jeanne Jugan", "Raymond Nonnatus"]);
// September
months.push(["Giles", "Ingrid", "Gregory the Great", "Rosalia", "Teresa of Calcutta", "Eleutherius", "Regina", "Nativity of the Blessed Virgin Mary", "Peter Claver", "Nicholas of Tolentino", "Paphnutius", "Most Holy Name of Mary", "John Chrysostom", "Exaltation of the Holy Cross", "Our Lady of Sorrows", "Cornelius and Cyprian", "Robert Bellarmine", "Joseph of Cupertino", "Januarius", "Andrew Kim Taegon", "Matthew", "Maurice", "Pio of Pietrelcina", "Our Lady of Walsingham", "Sergius", "Cosmas and Damian", "Vincent de Paul", "Wenceslaus", "Michael, Gabriel and Raphael", "Jerome"]);
// October
months.push(["Therese of Lisieux", "Guardian Angels", "Gerard of Brogne", "Francis of Assisi", "Faustina Kowalska", "Bruno", "Our Lady of the Rosary", "Pelagia", "Denis and Companions", "Francis Borgia", "John XXIII", "Wilfrid", "Taylor", "Callistus I", "Teresa of Avila", "Margaret Mary Alacoque", "Ignatius of Antioch", "Luke", "Isaac Jogues and Companions", "Paul of the Cross", "Hilarion", "John Paul II", "John of Capistrano", "Anthony Mary Claret", "Crispin", "Alfred the Great", "Frumentius", "Simon and Jude", "Narcissus", "Marcellus", "All Hallows Eve"]);
// November
months.push(["All Saints' Day", "All Souls' Day", "Martin de Porres", "Charles Borromeo", "Elizabeth", "Leonard", "Willibrord", "Godfrey", "Dedication of the Lateran Basilica", "Leo the Great", "Martin of Tours (Remembrance Day)", "Josaphat", "Stanislav Kostka", "Lawrence O'Toole", "Albert the Great", "Greta", "Elizabeth of Hungary", "Rose Philippine Duchesne", "Mechtilde", "Edmund", "Presentation of the Blessed Virgin Mary", "Cecilia", "Clement I", "Andrew Dung-Lac and Companions", "Catherine of Alexandria", "John Berchmans", "Virgil", "James of the Marches", "Saturninus", "Andrew (Saint Andrew's Day)"]);
// December
months.push(["Edmund Campion", "Bibiana", "Francis Xavier", "John Damascene", "Sabbas", "Nicholas", "Ambrose", "Immaculate Conception", "Juan Diego", "Eulalia", "Damasus I", "Our Lady of Guadalupe", "Lucy", "John of the Cross", "Nino", "Adelaide", "Lazarus", "Flannan", "Anastasius I", "Dominic of Silos", "Peter Canisius", "Frances Xavier Cabrini", "John of Kanty", "Christmas Eve", "Christmas Day", "Stephen (Boxing Day)", "John the Apostle", "Holy Innocents", "Thomas Becket", "Sylvester I", "John Wycliffe"]);

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:

// now we proceed to the statement itself
let today = new Date();
let day = today.getDate()-1;
let month = today.getMonth();
document.write("Today is  " + months[month][day] + "'s name day");

Výsledok:

V nasledujúcom cvičení, Riešené úlohy k 9.-10. lekciu 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š.