TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
- Pole a vše kolem něj
- Vlastnosti polí
- Dialogová okna
Pole v JavaScriptu
Pole je skupina "proměnných" v jednom prvku, kde jsou jednotlivé "proměnné" číslovány od nuly. Lépe to pochopíte na příkladech.
Deklarace pole (do hlavičky):
<script language="JavaScript" type="text/javascript">
pole1 = new Array("prvek č.0", "prvek č.1", "prvek č.2", "prvek č.3"); //první způsob deklarace
pole2 = ["prvek č.0", "prvek č.1", "prvek č.2", "prvek č.3"]; //druhý způsob deklarace
</script>
Zápis pole do dokumentu:
<script language="JavaScript" type="text/javascript">
document.write(pole1[0]+ ", " +pole1[3]+ ", " +pole2[1]);
</script>
Měli bychom se dopídit k výsledku:
prvek č.0, prvek č.3, prvek č.1
Vysvětlení:
- new Array - deklaruje prvky pole, pouze pokud jsou v kulaté závorce
- pole1 - název pole (je libovolný, třeba i číslo)
- (pole1[0]) - pole1 značí, že budeme čerpat z pole s názvem pole1 a číslo v hranaté závorce nám značí číslo prvku (začíná se od 0)
- znaménka + a vkládání mezer snad nemusím vysvětlovat
Slučování polí
Ke slučování dvou polí do jednoho budeme používat metodu concat(). Ukážeme si jeden příklad slučování polí.
Do hlavičky píšeme:
<script language="JavaScript" type="text/javascript">
pole1 = ["a", "b", "c"];
pole2 = ["d", "e", "f"];
pole3 = pole1.concat(pole2);
</script>
Chceme-li zapsat 'e', napíšeme do těla dokumentu
<script language="JavaScript" type="text/javascript">
document.write(pole2[1]); //zápis 'e' z druhého pole
document.write(pole3[4]); //zápis 'e' ze třetího pole
</script>
Přidávání prvků do polí
Tady si ukážeme, jak přidat další prvky do jednoho pole, aniž bychom toto pole museli přepisovat. Ukážeme si tři způsoby - jak umístit prvek kamkoli do pole, jak umístit prvek na konec pole, jak umístit prvek na začátek pole (budu psát pouze zápis do hlavičky souboru).
Umístění s libovolným pořadím:
<script language="JavaScript" type="text/javascript">
pole = ["prvek0", "prvek1", "prvek2"];
pole[3] = "prvek3"; //do pole jsme přidali třetí prvek s poř. číslem 3
</script>
Umístění na konec pole:
<script language="JavaScript" type="text/javascript">
pole = ["prvek0", "prvek1", "prvek2"];
pole.push("prvek3", "prvek4"); // na konec pole jsme přidali další dva prvky
</script>
Umístění na začátek pole:
<script language="JavaScript" type="text/javascript">
pole = ["prvek1", "prvek2", "prvek3"];
pole.unshift("prvek0"); //na začátek pole jsme přidali jeden prvek
</script>
Úkol č.1
Do hlavičky souboru napište pole se třemi prvky - pomeranč, cukr, petržel. Do těla souboru pak text: Musím koupit cukr, petržel a pomeranč. (cukr, petržel a pomeranč musí pochopitelně být prvky pole)
Vlastnosti pole
| Metoda | Vlastnost |
| concat(...) | spojí daná pole |
| join(oddělovač) | spojí daná pole, která oddělí oddělovačem |
| push(...) | přidá prvky na konec pole |
| upshift(...) | přidá prvky na začátek pole |
| pop() | odstraní poslední prvek pole a vrátí ho |
| reverse() | obrátí pořadí prvků v poli |
| slice(od, do) | vrátí prvky od do... |
| sort() | seřadí prvky v poli |
| tostring() | vrátí všechny prvky oddělené čárkou |
| shift() | odstraní první prvek v poli |
Dialogová okna
Pomocí dialogových oken vás může script upozorňovat, dávat vám na výběr, zkrátka můžete se scriptem komunikovat. Ukážeme si dva příklady se jménem autora článku a jeden se změnou barvy písma.
První příklad:
<input type="button" onclick="alert('Jméno autora')" value="Autor">
Výsledek:
Druhý příklad (s dotazem):
<head>
<script language="JavaScript" type="text/javascript">
function dotaz(){
okno = confirm("Chcete znát jméno autora tohoto článku?");
if(okno) alert("Jmeno autora");
}
</script>
</head>
<body>
<input type="button" onclick="dotaz();" value="Autor">
</body>
Výsledek:
Co ještě neznáme:
- confirm - vyvolá dotazník s možnostmi ano nebo ne
- if - vyvolá něco pouze pokud byly spněny podmínky předešlé události (u nás se vyvolá alert, pokud jste v dotazníku stiskli ano)
- (okno) - je hodnota příkazu if
Úkol č.2
Udělejte stránku, kde bude obyčejný text. Když na něj kliknu, objeví se mi dotaz, zda-li chci vidět věk autora. Po stisknutí 'ano' se věk autora ukáže.
