Dnes se blížeji podíváme na operátory a příkazy if, switch, for a while. Slíbený bonus v podobě seznamu klíčových slov JavaScriptu se do dnešního dílu bohužel již nevešel.
Předchozí díly seriálu:
Aritmetické
Operátor |
Popis |
Příklad |
Výsledek |
+ |
sčítání |
2+2 |
4 |
- |
odčítání |
5-2 |
3 |
* |
násobení |
4*5 |
20 |
/ |
dělení |
15/5 5/2 |
3 2.5 |
% |
Modulo dělení, zbytek po celočíselném dělení. Příklad 1: 5/2 po dělení 2, zbytek 1 Příklad 2: 10/8 po dělení 1, zbytek 2
|
5%2 10%8 |
1 2 |
++ |
zvýšení o jedničku |
x=5 x++ |
x=6 |
-- |
snížení o jedničku |
x=5 x-- |
x=4 |
Možný je i zkrácený zápis, pokud ho někde uvidíte, nelekejte se.
Operátor |
Příklad |
Stejné jako zápis |
+= |
x+=y |
x=x+y |
-= |
x-=y |
x=x-y |
*= |
x*=y |
x=x*y |
/= |
x/=y |
x=x/y |
%= |
x%=y |
x=x%y |
++ |
x++ |
x=x+1 |
-- |
x-- |
x=x-1 |
Relační
Slouží k porovnávání hodnot uložených v jednotlivých proměnných. Nic složitého.
Operátor |
Popis |
Příklad |
== |
je rovno |
5==8 vrátí false (nepravda) |
!= |
nerovná se |
5!=8 vrátí true (pravda) |
> |
je větší než |
5>8 vrátí false (nepravda) |
< |
je menší než |
5<8 vrátí true (pravda) |
>= |
je větší nebo rovno |
5>=8 vrátí false (nepravda) |
<= |
je menší nebo rovno |
5<=8 vrátí true (pravda) |
Logické
Opět zde dochází k porovnávání hodnot jako u relačních operátorů. Zde se ovšem porovnávají jejich logické hodnoty.
Operátor |
Popis |
Příklad |
&& |
a (logický součin) Výsledek bude true, pokud všechny porovnávané hodnoty budou true.
|
x=6 y=3 (x < 10 && y > 1) vrátí true (pravda)
|
|| |
nebo (logický součet) Výsledek bude true, pokud aspoň jedna z porovnávaných hodnot bude true.
|
x=6 y=3 (x==5 || y==5) vrátí false (nepravda)
|
! |
negace Mění hodnotu operandu na opačnou.
|
x=6 y=3 x != y vrátí true (pravda)
|
Poznámka: Logické proměnné můžou nabývat pouze dvou hodnot a to true nebo false. True můžeme nahradit číslem 1 a false číslem 0. Krátký příklad:
<script type="text/javascript">
<!--
var x;
x=true;
if (x==1)document.write("true");
else document.write("false");
//-->
</script>
Vím, že pro začátečníka bývá pochopení logických operátorů složitější a proto je zde malý příklad, kde můžete trénovat.
Poznámka: JavaScript obsahuje i další speciální operátory. Při psaní skriptů se s nimi s největší pravděpodobností vůbec nesetkáte a proto je neuvádím.
Priorita operátorů
Při psaní komplikovanějších výrazů se může v jedné rovnici vyskytnout více operátorů. Každému je asi jasné, že 3+5*2 je něco jiného než (3+5)*2. Každý operátor má jinou prioritu. Na začátek nám budou pro aritmetické operátory stačit pravidla matematiky (přednost násobení před sčítáním atd.).
Cykly
Používají se tehdy pokud chceme provést nějaký blok kódu opakovaně. V JavaScriptu k tomuto účelu můžeme použít následující příkazy:
- while - Cyklus s podmínkou na začátku. Cyklus se bude provádět tak dlouho, dokud bude platit podmínka.
- do...while - Cyklus podmínkou na konci. Stejné jako v předcházejícím případě, ale podmínka se testuje až na konci.
- for - Cyklus se zadaným počtem opakování.
While
while (podmínka) {
příkazy JavaScriptu
}
Příklad na vysvětlení snad bude stačit:
<script type="text/javascript">
<!--
var i=0;
while (i<5) {
alert("i = " + i);
i++;
}
//-->
</script>
Do...while
do {
příkazy JavaScriptu
} while (podmínka)
Opět snad bude stačit pouze příklad:
<script type="text/javascript">
<!--
var i=0;
do {
alert("i = " + i);
i++;
} while (i<5)
//-->
</script>
Poznámka: Na rozdíl od předcházejícího příkladu proběhne cyklus minimálně jednou bez ohledu na počáteční stav ukončovací podmínky. Zkuste změnit počáteční hodnotu i například na 10 a uvidíte.
For
for (počáteční inicializace; podmínka; úprava řídící proměnné) {
příkazy JavaScriptu
}
Příklad:
<script type="text/javascript">
<!--
for (var i=0; i<5; i++) {
alert("i = " + i);
}
alert("Konec!");
//-->
</script>
Podmínky
Použijeme je tehdy, pokud chceme, aby se program podle nějaké podmínky sám rozhodl, jak bude dál pokračovat.
Podmínkové operátory
Jde o zvláštní druh operátorů, které umožňují vyhodnotit nějakou jednoduchou podmínku a v závislosti na výsledku provést danou operaci. V JavaScriptu nám k tomuto účelu slouží dva operátory, které se vždy používají společně. Jsou to znaky ? a :. Jejich použití vypadá takto:
(podmínka) ? výsledek při splněné podmínce : výsledek při nesplněné podmínce;
Krátký příklad se vždy hodí:
<script language="JavaScript" type="text/javascript">
<!--
var i, hlaska;
i=5;
hlaska = (i==0) ? "Hodnota i je opravdu nula." : "Hodnota i není rovna nule.";
alert(hlaska);
//-->
</script>
Poznámka: Podmínkové operátory jsem mohl zařadit už do sekce "Operátory", ale zde mně to přijde vhodnější.
Podmíněný příkaz If
Používá se tehdy pokud chceme, aby se určité příkazy v JavaScriptu provedly pouze za určitých okolností a další příkazy zase za jiných okolností. Obecný zápis vypadá takto:
if (podmínka) {
příkazy, které se provedou při splněné podmínce; }
else {
příkazy, které se provedou pokud není podmínka splněna; }
Při vícenásobném větvení programu by obecný zápis vypadal takto:
if (podmínka1) {
příkazy, které se provedou pokud je podmínka1 splněna; }
else if (podmínka2) {
příkazy, které se provedou pokud není podmínka1 splněna, ovšem podmínka2 vyhovuje; }
else {
příkazy, které se provedou pokud není splněna ani jedna předcházející podmínka; }
Poznámka: Pokud by vyhovovala podmínka1 i podmínka2, provede se kód pouze v bloku podmínka1. Podmínka1 vyhovuje, je tedy proveden její kód a skript skončí v hledání dalších vyhovujících podmínek!
V následujícím příkladě se pokusíme vytvořit kód, který vyhodnotí a ocení obchodníky. Obchodník, který prodá více než 10 kusů výrobku obdrží bonus a jako další základ platu se mu počítají prodané kusy nad 10. Naopak obchodník, který prodá méně než 10 kusů výrobku, bude krácen na platě. Jestliže obchodník prodá právě 10 kusů výrobku, nestane se nic.
<script type="text/javascript">
<!--
var prodkus = 11;
if (prodkus > 10) {
alert("Získáváte bonus 5000 Kč!");
alert("Počet prodaných kusů je snížen o deset.");
prodkus = prodkus - 10; //počítají se pouze kusy převyšující 10
}
else if (prodkus == 10) {
alert("Dobrá práce, ovšem na bonus to není.");
alert("Počet prodaných kusů je vrácen na 0.");
prodkus = 0;
}
else {
alert("Z platu vám srážíme 5000 Kč \n protože jste nedosáhl kvóty.");
alert("Ztrátu budete muset dohnat.");
prodkus = prodkus - 10;
}
//-->
</script>
Hodně autorů dělá na začátku chybu uvedenou níže. Popřemýšlejte, proč skript zde uvedený nemůže správně fungovat.
<script type="text/javascript">
<!--
var prodkus = 11;
if (prodkus > 10) {
alert("Získáváte bonus 5000 Kč!");
alert("Počet prodaných kusů je snížen o deset.");
prodkus = prodkus - 10; //počítají se pouze kusy převyšující 10
}
if (prodkus == 10) {
alert("Dobrá práce, ovšem na bonus to není.");
alert("Počet prodaných kusů je vrácen na 0.");
prodkus = 0;
}
if (prodkus < 10) {
alert("Z platu vám srážíme 5000 Kč \n protože jste nedosáhl kvóty.");
alert("Ztrátu budete muset dohnat.");
prodkus = prodkus - 10;
}
//-->
</script>
Řešení: Obchodník prodá například 11 kusů výrobku a je mu přiznán bonus. Následně je mu počet prodaných kusů snížen o deset, nyní tedy má pouze 1 prodaný kus. Další podmínka nevyhoví, ale poslední ano. Tím je dobrému obchodníku strženo z platu 5000 Kč a s prodanými kusy se dostane do mínusu. To by se asi divil! Správný zápis (nad tímto) skončí po splnění první podmínky a další vyhovující podmínky nehledá.
Switch (přepínač)
Pokud je zápis pomocí if, else if a else dlouhý a nepřehledný například, když máme vybrat mezi více hodnotami (třeba 10 podmínek). V tomto případě pužijeme příkaz switch (přepínač), který umožňuje rozdělit program jednoduše a přehledně na několik větví.
Struktura zápisu příkazu switch vypadá takto:
switch (proměnná) {
case hodnota1:
příkazy, které se provedou pokud proměnná=hodnota1;
break;
...
case hodnotaN:
příkazy, které se provedou pokud proměnná=hodnotaN;
break;
default:
pokud nebyla splněna ani jedna z předcházejících podmínek
provedou se příkazy zapsané zde;
break;
}
Příklad s hlášekami na různé dny pomocí příkazu switch:
<script type="text/javascript">
//Různé hlášky podle dne v týdnu. Pamatujte,
//že Neděle=0, Pondělí=1, Úterý=2, atd..
var d=new Date()
den=d.getDay() //nabývá hodnot 0 až 6
switch (den) {
case 5:
document.write("Konečně pátek.");
break;
case 6:
document.write("Super sobota!");
break;
case 0:
document.write("Pohodička je neděle.");
break;
default:
document.write("Už se těším na víkend.");
break;
}
</script>
Vnořené podmínky a cykly
Někdy je vhodné pro zjednodušení skriptu vložit více podmínek nebo cyklů do sebe. V tomto případě je nutné pečlivě sledovat syntaxi, správný počet závorek, bloky se nesmí překrývat atd.
Vnořené cykly
Uvnitř jednoho cyklu probíhá další cyklus.
Příklad na malou násobilku:
<script type="text/javascript">
<!--
var i,j;
for (i=1; i<=10; i++) { //vnější cyklus
for (j=1; j<=10; j++) { //vnitřní cyklus
document.write(i*j+ " "); //vypíše řádek s malou násobilkou
}
document.write("<br>"); //přechod na nový řádek
}
//-->
</script>
Vnořené podmínky
Stejně jako u cyklů musíme dát zvýšenou pozornost na syntaxi, jinak se snadno dopustíme chyby. Na následujícím příkladu si předvedeme jak se dá kód pomocí vnořených podmínek zjednodušit.
Příklad na vyhledání maxima ze tří čísel:
<script type="text/javascript">
<!--
var x, y, z;
x=8;y=-5;z=6;
var max=x;
if (y>max){
max = (y>z) ? y:z; //podmínkový operátor
}
else {
if (z>max){
max=z;
}
}
alert("Největší číslo je: "+ max);
//-->
</script>
Poznámka: Zatím jsme nemluvili o možnosti zadávání hodnot uživatelem, proto do skriptu vstupují rovnou hodnoty. Později si povíme i o vstupu hodnot od uživatele z formuláře nebo pomocí dialogového okna.
Dnešní díl je delší než jsem si původně myslel, proto zde nenajdete slíbená klíčová slova JavaScriptu. Přesto doufám, že i tento delší díl jste strávili a vydržíte na pokračování. Příště se podrobněji podíváme na provádění kódu, řekneme si něco o událostech a snad konečně zbude místo i pro klíčová slova.