6. díl - Pole v JavaScriptu

JavaScript Základní konstrukce Pole v JavaScriptu

V minulém tutoriálu našeho seriálu jsme se naučili používat cykly v JavaScriptu. V dnešním dí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 svých 50ti kamarádů. Asi vám dojde, že v programování bude nějaká lepší cesta, než začít bušit proměnné kamarád1, kamarád2... až kamarád50. 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, de 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 vytvoříme pomocí objektu Array:

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

Naplnění pole cyklem

Naplníme si pole čísly od 1 do 10 pomocí FOR cyklu:

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

Abychom pole vypsali, můžeme za předchozí kód připsat:

for (var 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:

Naplnění a výpis pole v JavaScriptu

Foreach

Pro čtení všech prvků z pole můžeme použít zjednodušenou verzi cyklu pro práci s kolekcemi, známou jako foreach. Ten projede všechny prvky v poli a jeho délku si zjistí sám:

var a = new Array();
// Zde by se nacházel nějaký kód pro naplnění pole
// ...
for (x in a)
{
        document.write(a[x]);
}

Pro programátory v jiných jazycích může být matoucí, že máme v x index a nikoli prvek.

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 funkce 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í:

var dny = new Array("Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota");
var d = new Date();
var den = d.getDay(); // vrátí číslo 0 - 6
document.write("Dnes je " + dny[den]);

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

Vypsání dne v týdnu pomocí pole v JavaScriptu

Můžete se také setkat se zkráceným zápisem pomocí hranatých závorek:

var dny = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"];

Do pole můžeme prvky libovolně přidávat nebo je mazat:

var dny = new Array("Ú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. a 4. prvek (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ě):

var 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 dalším dílu). Setřídění pole čísel by vypadalo takto:

var 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ě script 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 script 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ů
var mesice = new Array();
// postupně přidáme měsíce se svátky, prvky pole tedy bude další pole
// leden
mesice.push(new Array("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(new Array("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(new Array("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(new Array("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ří", "2Marek", "Oto", "Jaroslav", "Vlastislav", "Robert", "Blahoslav"));
// květen
mesice.push(new Array("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(new Array("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(new Array("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(new Array("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(new Array("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(new Array("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(new Array("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(new Array("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, sdraco", "Silvestr"));

// nyní přestoupíme k samotnému výpisu
var d = new Date();
var den = d.getDate()-1;
var mesic = d.getMonth();
document.write("Dnes má svátek " + mesice[mesic][den]);

Výsledek:

Výpis svátku pomocí pole v JavaScriptu

Tak a to byl konec naší práce s datem a časem. Příště budeme přes JavaScript manipulovat se samotnými HTML elementy a to teprve poznáme jeho sílu a možnosti. Ukážeme si také uživatelský vstup a vytvoříme svou první webovou aplikaci, máte se na co těšit! :)


 

Stáhnout

Staženo 122x (4.19 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (10 hlasů) :
55555


 


Miniatura
Předchozí článek
Cvičení k 5. lekci JavaScriptu
Miniatura
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Cvičení k 6. lekci JavaScriptu

 

 

Komentáře
Zobrazit starší komentáře (34)

Avatar
Libor Šimo (libcosenior):

Urob si trojrozmerné pole stringov, tým dosiahneš na na jednom indexe jméno, pozici X a pozici Y a môžeš v ňom pohodlne vyhľadávať.

Odpovědět  +1 31. března 11:56
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Pluhtík
Člen
Avatar
Pluhtík:

Ahoj, můžu se zeptat proč mi pole nezačíná od nuly? Ze začátku mě docela zmátlo, že v obou cyklech je použitá proměnná i, takže jsem si nakonec druhý cykluc upravil na j. Nicméně v první fázi toho cyklu by se mělo vypsat jen a[j], což je v tom případě nula a cyklus by tím pádem měl končit 10, protože délka pole a (a.length) je i + 1 na konci prvního cyklu, tedy 11, tak co jsem pochopil špatně? Díky za odpověď :)

var a = new Array();
for (var i = 0; i < 10; i++)
{
  a[i] = i + 1;
}
for (var j = 0; j < a.length; j++)
{
  document.write(a[j] + " ");
}
 
Odpovědět 14. července 13:16
Avatar
Odpovídá na Pluhtík
Martin Gabriel:

Koukni na to pořádně. V prvním cyklu do pole 'a' vkládáš i+1. Při prvním průchodu cyklu je i = 0, ale ty uložíš i+1, takže v a[0] je hodnota 1.
Odmaž to '+ 1' na třetím řádku a prvky v poli budou začínat od 0. :)

Odpovědět  +1 14. července 13:24
"Be the change you want to see in the world" - Michael Scofield
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Martin Gabriel
Pluhtík:

Ano, jenže na výstupu se mi vypíše hodnota a[j], která začíná na nule. Funguje to, jak to říkáš, i když to stále nechápu :) furt mi připadá, že by tam mělo být a[j] + 1, aby to začínalo od 1. Tím samozřejmě neříkám, že jsem chytřejší než počítač, ale něco chápu špatně :D
a.length = 10, to mám správně, že ano?

 
Odpovědět 14. července 14:29
Avatar
Pluhtík
Člen
Avatar
Pluhtík:

Mám to :) opět se ukazuje mé pomalé vedení :D
a[i] = i + 1 tzn. že vždy v tom souboru bude a[x] = x + 1. Vyzkoušeno tím, že jsem si udělal menší zápis (viz níže) a na výstupu bylo číslo 4.

document.write(a[3]);

Tzn. že výsledek je 3 + 1.

 
Odpovědět 14. července 14:40
Avatar
Odpovídá na Pluhtík
Libor Šimo (libcosenior):

Aby si mal istotu, že pole naplníš v cykle správne, môžeš použiť push().

$(function() {
    var a = new Array();

    for (var i = 6; i <= 15; i++) {
        a.push(i);
    }
    document.write(a);
});
Odpovědět 14. července 15:05
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Libor Šimo (libcosenior)
Pluhtík:

To už je trošku složitější, ale až budu u další lekce (funkcí), tak se k tomu určitě vrátím a zkusím si rozebrat, co jednotlivé příkazy dělají. Díky :)
Jinak, musím se pochlubit :)

document.write("<h1>Vlastní cyklus, který vypíše dny v týdnu pod sebe</h1>");
for (var i = 0; i < dny.length; i++)
{
        document.write(dny[i] + "<br />");
}
Editováno 14. července 17:30
 
Odpovědět 14. července 17:30
Avatar
Pluhtík
Člen
Avatar
Pluhtík:

Jen dodatečný dotaz k této lekci. Proč u get.Month() u svátků nemusím dávat -1? Přece červenec je (podle programu) v 6. měsíc (počítáme-li leden jako nultý).

 
Odpovědět 14. července 17:55
Avatar
Jan Bezdíček
Redaktor
Avatar
Odpovídá na Pluhtík
Jan Bezdíček:

Protoze cervenec je v poli na 6. indexu (protoze pole je indexovane od 0) ... kdyby si pouzil jeste -1, tak ti to bude vypisovat svatky v cervnu

 
Odpovědět  +1 14. července 18:06
Avatar
Odpovídá na Pluhtík
Libor Šimo (libcosenior):

Kazde pole zacina indexovat od nuly.
Funkcia pusch() prida hodnotu na dalsi index v poradi. Teda ak je pole prazdne, tak na pole[0].

Odpovědět  +1 15. července 5:57
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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