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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 815x (3.62 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript