Lekce 6 - Pole v JavaScriptu
V předešlém cvičení, Řešené úlohy k 5. lekci JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
V dnešním JavaScript tutoriálu si uvedeme datovou strukturu pole.
Představte si, že si chcete uložit nějaké údaje o více prvcích. Např
chcete v paměti uchovávat 10 čísel, 30 pozic posledních souřadnic myši
nebo jména 50ti uživatelů. Asi vám dojde, že v programování bude nějaká
lepší cesta, než začít bušit proměnné uzivatel1
,
uzivatel2
, ... až uzivatel50
. Nehledě
na to, že jich může být třeba 1000. A jak by se v tom potom hledalo? Brrr,
takhle ne
Pokud potřebujeme uchovávat větší množství proměnných stejného
typu, tento problém nám řeší pole. Můžeme si ho představit jako řadu
přihrádek, kde v každé máme uložený jeden prvek. Přihrádky jsou
očíslované tzv. indexy, první má index 0. Můžeme si však prvky pole
místo číslovaní i přímo pojmenovat, tedy je indexovat textovým
řetězcem. V některých jazycích musíme při vytváření pole zadat jeho
přesnou velikost a stejný datový typ (typ proměnné - číslo, řetězec,
objekt...) pro všechny prvky. V JavaScriptu nemusíme specifikovat vůbec nic a
můžeme si do pole nahrávat co chceme Pole úzce souvisí s cykly, protože se potom používají na
manipulaci s prvky.
Vytvoření pole
Pole můžeme vytvořit pomocí objektu Array
:
let a = new Array(); a[0] = 1;
K prvkům pole potom přistupujeme přes hranatou závorku, zde jsme na
první index (tedy index 0
) uložili číslo 1
.
Pomocí hranatých závorek můžeme pole rovněž vytvořit.
Hranaté závorky []
můžeme na české
klávesnici zapsat pomocí pravého ALT a znaků F a
G:

Následující kód funguje úplně stejně jako ten výše, ale je kratší a proto tento zápis polí budeme preferovat:
let a = []; a[0] = 1;
Naplnění pole cyklem
Naplníme si pole čísly od 1
do 10
pomocí
for
cyklu:
let a = []; for (let i = 0; i < 10; i++) { a[i] = i + 1; }
Abychom pole vypsali, můžeme za předchozí kód připsat:
for (let i = 0; i < a.length; i++) { document.write(a[i] + " "); }
Všimněte si, že pole má vlastnost length
, kde je uložena
jeho délka, tedy počet prvků.
Výsledek:
for
...of
Pro čtení všech prvků z pole můžeme použít zjednodušenou verzi cyklu
pro práci s kolekcemi, for
...of
, známou někdy jako
foreach. Ten projede všechny prvky v poli a jeho délku si zjistí sám:
let prvky = []; // Zde by se nacházel nějaký kód pro naplnění pole // ... for (let prvek of prvky) { document.write(prvek); }
V minulosti se pro procházení polí v JavaScriptu
používal i cyklus for...in
. Ten ovšem do proměnné neukládá
prvek, ale index, což je pro tento účel matoucí.
Naplnění pole výčtem prvků
Pole samozřejmě můžeme naplnit ručně, nabízí se to například k uložení dnů v týdnu nebo jmen v kalendáři k vypsání svátku. Oboje si tu vysvětlíme.
Začněme vypsáním dne v týdnu, k tomu využijeme metody
getDay()
, která se volá na objektu Date
a vrací den
v týdnu. Bohužel jsou dny v americkém formátu začínajícím nedělí, to
nám však tolik nevadí:
let dny = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"]; let d = new Date(); let den = d.getDay(); // vrátí číslo 0 - 6 document.write("Dnes je " + dny[den]);
Skript vytvořil pole textových řetězců (string
ů) s názvy
dnů, dále si zjistí číslo aktuálního dne. Potom je vypsán několikátý
prvek v poli podle tohoto čísla dne.
Do pole můžeme prvky libovolně přidávat nebo je mazat:
let dny = ["Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"]; dny.push("Neděle"); // přidá nový prvek na konec pole dny.unshift("Pondělí"); // přidá nový prvek na začátek pole dny.splice(2, 3); // smaže 3 prvky od 3. prvku dále (indexy jsou od nuly)
Řazení prvků v poli
Prvky v poli lze jednoduše seřadit metodou sort()
, bez
předání dalších parametrů se seřadí podle abecedy (vzestupně):
let slova = ['Dálava', 'Blýskavice', 'Erb', 'Cílovníci', 'Akát']; slova.sort(); // Změní slova na ["Akát", "Blýskavice", "Cílovníci", "Dálava", "Erb"]
Pokud máme v poli čísla, seřadí se bohužel jako textové řetězce,
takže je např. 25
před 3
. Chování řadící
metody můžeme upravit předáním tzv. anonymní funkce (bude plně
vysvětleno v příští lekci). Setřídění pole čísel by vypadalo
takto:
let cisla = [5, 3, 1, 30, 25, 80]; cisla.sort(function(a, b) { return a - b }); // Změní cisla na [1, 3, 5, 25, 30, 80]
Pořadí prvků v poli můžeme otočit pomocí metody
reverse()
:
dny.reverse(); // otočí pole tak, aby byly prvky pozpátku
Výpis svátků
Zkusíme si udělat ještě skript na vypsání toho, kdo má dnes svátek.
Nejprve si musíme vytvořit pole se všemi jmény v roce. Bude to trochu
složitější než minulý příklad, protože budeme potřebovat
dvourozměrné pole, přesněji pole polí. Budeme mít pole měsíců a v
každém prvku (tedy měsíci) bude další pole s dny, které bude obsahovat
daná jména. Tu otrockou práci přepisování jmen do pole jsem za vás
udělal Pojďme tedy
programovat:
// Tento skript pochází z webu itnetwork.cz // Smí být libovolně používán i modifikován, ale nesmí z něj být umazán tento text // vytvoříme si prázdné pole měsíců let mesice = []; // postupně přidáme měsíce se svátky, prvky pole tedy bude další pole // leden mesice.push(["Nový rok, Den obnovy samostatného českého státu", "Karina", "Radmila", "Diana", "Dalimil", "Tři králové", "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"]); // únor mesice.push(["Hynek", "Nela", "Blažej", "Jarmila", "Dobromila", "Vanda", "Veronika", "Milada", "Apolena", "Mojmír", "Božena", "Slavěna", "Věnceslav", "Valentýn", "Jiřina", "Ljuba", "Miloslava", "Gizela", "Patrik", "Oldřich", "Lenka", "Petr", "Svatopluk", "Matěj", "Liliana", "Dorota", "Alexandr", "Lumír", "Horymír"]); // březen mesice.push(["Bedřich", "Anežka", "Kamil", "Stela", "Kazimír", "Miroslav", "Tomáš", "Gabriela", "Františka", "Viktorie", "Anděla", "Řehoř", "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", "Kvido"]); // duben 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"]); // květen mesice.push(["Svátek práce", "Zikmund", "Alexej", "Květoslav", "Klaudie", "Radoslav", "Stanislav", "Den vítězství", "Ctibor", "Blažena", "Svatava", "Pankrác", "Servác", "Bonifác", "Žofie", "Přemysl", "Aneta", "Nataša", "Ivo", "Zbyšek", "Monika", "Emil", "Vladimír", "Jana", "Viola", "Filip", "Valdemar", "Vilém", "Maxmilián", "Ferdinand", "Kamila"]); // červen mesice.push(["Laura", "Jarmil", "Tamara", "Dalibor", "Dobroslav", "Norbert", "Iveta, Slavoj", "Medard", "Stanislava", "Gita", "Bruno", "Antonie", "Antonín", "Roland", "Vít", "Zbyněk", "Adolf", "Milan", "Leoš", "Květa", "Alois", "Pavla", "Zdeňka", "Jan", "Ivan", "Adriana", "Ladislav", "Lubomír", "Petr a Pavel", "Šárka"]); // červenec mesice.push(["Jaroslava", "Patricie", "Radomír", "Prokop", "Cyril, Metoděj", "Den upálení mistra Jana 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"]); // srpen 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", "Bartoloměj", "Radim", "Luděk", "Otakar", "Augustýn", "Evelína", "Vladěna", "Pavlína"]); // září 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", "Matouš", "Darina", "Berta", "Jaromír", "Zlata", "Andrea", "Jonáš", "Václav, Den české státnosti", "Michal", "Jeroným"]); // říjen 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", "Hedvika", "Lukáš", "Michaela", "Vendelín", "Brigita", "Sabina", "Teodor", "Nina", "Beáta", "Erik", "Šarlota, Zoe", "Den vzniku samostatného československého státu", "Silvie", "Tadeáš", "Štěpánka"]); // listopad mesice.push(["Felix", "Památka zesnulých (dušičky)", "Hubert", "Karel", "Miriam", "Liběna", "Saskie", "Bohumír", "Bohdan", "Evžen", "Martin", "Benedikt", "Tibor", "Sáva", "Leopold", "Otmar", "Mahulena, Den boje za svobodu a demokracii", "Romana", "Alžběta", "Nikola", "Albert", "Cecílie", "Klement", "Emílie", "Kateřina", "Artur", "Xenie", "René", "Zina", "Ondřej"]); // prosinec mesice.push(["Iva", "Blanka", "Svatoslav", "Barbora", "Jitka", "Mikuláš", "Benjamín", "Květoslava", "Vratislav", "Julie", "Dana", "Simona", "Lucie", "Lýdie", "Radana", "Albína", "Daniel", "Miloslav", "Ester", "Dagmar", "Natálie", "Šimon", "Vlasta", "Adam, Eva, Štědrý den", "1. svátek vánoční", "Štěpán, 2. svátek vánoční", "Žaneta", "Bohumila", "Judita", "David", "Silvestr"]); // nyní přestoupíme 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ýsledek:
Tak a to byl konec naší práce s datem a časem.
V následujícím cvičení, Řešené úlohy k 6. lekci JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.
Stáhnout
Staženo 352x (4.46 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
Komentáře


Zobrazeno 10 zpráv z 61. Zobrazit vše