Výuka JavaScriptu – 3.

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.

Diskuze (17) Další článek: Další detaily ohledně Geforce 4

Témata článku: Software, Programování, Java, Javascript, Výuka, Pre, Syntax, Case, Bonus, Počáteční stav, Následující den, Elsa, Dobrý den, Speciální operátor, Plat, Zvláštní druh, Alert, Switch, Dobrá práce


Určitě si přečtěte

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 4

redakce
Mapy GoogleStreet View
Uživatelé hlásí problémy s jednou z listopadových záplat pro Windows 10
Karel Kilián
Windows UpdateAktualizaceWindows 10
Vodafonu se zhroutila kabelovka. Síť bývalého UPC má výpadky
Lukáš Václavík
VodafoneUPC
Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

** Vývoj COVID-19 v Česku: nakažení, úmrtí, testovaní, hospitalizovaní ** Mapa podle okresů, přehled podle věku, situace v Evropě i ve světě ** Každý den aktualizované grafy a mapy

Marek Lutonský | 172

Marek Lutonský
COVID-19Koronavirus
Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

** Obtěžují vás neustálé dotazy webů, zda chcete zobrazovat oznámení? ** Můžete je zakázat, a to jak kompletně, tak i pro jednotlivé stránky ** Připravili jsme návody pro Chrome, Firefox, Edge a Operu

Karel Kilián | 11

Karel Kilián
Jak na InternetTipyProhlížeče
Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

** Tipy na užitečné příslušenství k počítačům ** Poradíme, s jakými produkty neuděláte chybu ** Některé z věcí mohou být dobrými vánočními dárky

David Polesný, Stanislav Janů | 20

David PolesnýStanislav Janů
Příslušenství

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5