TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Opakování na příkladech.
Tuto kulatou lekci věnuji opakování prvků z předešlých lekcí, tudíž zopakujeme základy JavaScriptu – proměnné, operátory, funkce, konstrukce a mnoho dalšího. To vše na praktických příkladech. Na úvod tu máte pár tabulek týkajících se JavaScriptu pro lepší přehlednost.
Klíčová slova pro JavaScript
| break | do | function | null | typeof |
| case | else | if | return | var |
| continue | export | import | swich | void |
| default | false | in | this | while |
| delete | for | new | true | with |
Dlaší důležitá slova pro JavaScript
| abstract | debugger | goto | package | synchronized |
| boolean | double | implement | private | throw |
| byte | enum | instanceof | protected | throws |
| catch | extends | int | extend | transient |
| char | final | interface | short | try |
| class | finally | long | static | |
| const | float | native | super |
Operátory
Omlouvám se vám, že operátory zmiňuji až v 10. lekci, ale měl jsem za to, že jsem je již zmiňoval.
| Aritmetciké operátory | Význam | Logické operátory | Význam |
| + | sčítaní | && | a |
| - | odečítání | || | nebo |
| * | násobení | ! | ne |
| / | dělelní | ||
| % | modul | ||
| ++ | zvětšení hodnoty o 1 | ||
| -- | zmenšení hodnoty o 1 |
| Operátory přiřazení | Význam | Srovnávací operátory | Význam |
| = | přiřazení | == | je shodné |
| += | zvýšení hodnoty a následné přiřazení | != | není shodné |
| -= | snížení hodnoty a následné přiřazení | > | větší než |
| *= | roznásobení hodnoty a následné přiřazení | < | menší než |
| /= | dělení hodnoty a následné přiřazení | >= | větší nebo rovno |
| %= | modulo hodnoty a následné přiřazení | <= | menší nebo rovno |
| Podmínkový operátor | Význam |
| podmínka ? operace1 : operace2 | Pokud je splněna podmínka, provede se operace1, pokud ne, provede se operace2. |
Kontrola nicku a hesla
Na jednoduchém příkladu kontroly hesla a nicku při logování si zopakujete použití a syntaxi konstrukce if/else. Budeme používat 2 proměnné – nick a heslo. Jejich hodnoty (zadané uživatelem) získáme dvěma dialogovými okny typu prompt. Dále už následuje jen ověření správnosti nicku a hesla a případná chybová hlášení. V první konstrukci typu IF máme reakci při zadání obou údajů správně, v další konstrukci, tentokráte ELSEIF, kontrolujeme pouze heslo. Pokud není splněna podmínka v prvním bloku IF, začne se script dívat po podmínkách v blocích ELSEIF; pokud je podmínka některého z bloků ELSEIF splněna, vykoná se jeho obsah. Pokud ovšem není splněna podmínka v bloku IF a zároveň ani jedna podmínka v blocích ELSEIF, vykoná se obsah bloku ELSE. Na tomto principu pracuje logovací script níže.
<html>
<head>
<title>Kontrola nicku a hesla</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var nick;
var heslo;
nick = prompt('Zadejte nick:',' ');
heslo = prompt('Zadejte heslo:',' ');
if (nick == 'mujnick' && heslo == 'mojeheslo') {
alert('Přihlášení proběhlo úspěšně.');
}
else if (nick == 'mujnick') {
alert('Zadal jste špatné heslo.');
}
else if (heslo == 'mojeheslo') {
alert('Zadal jste špatný nick.');
}
else {
alert('Zadal jste špatný nick a heslo.')
}
</script>
</body>
</html>Vícestupňové menu
Jako druhý příklad jsem si pro vás připravil vícestupňové menu, které může uživatel postupně rozbalovat, než se dostane ke konečné položce. S tímto jevem se můžete setkat v různých e-shopech, či jiných webech s bohatou postranní nabídkou. Já vám ukážu jednodušší verzi o 3 základních „odkazech“. Na tomto příkladu si procvičíme opět konstrukci IF/ELSE, ale také události a manipulaci se styly pomocí JS, resp. manipulaci s atributem display. Nejprve vytvoříme funkci, která bude kontrolovat jakou hodnotu atribut display má, na co se bude měnit a kdy.
function rozbal(id_rozbalovaneho_divu) {
var zmena = document.getElementById(id_rozbalovaneho_divu).style; // definujeme proměnnou zmena jako 'adresu' na styl prvku
if(zmena.display == 'block') { // kontrola jakou hodnotu
zmena.display = 'none'; // prvek display právě má
} // a podle toho se bude
else { // patřičně měnit
zmena.display = 'block';
}
}Teď je i výhodná situace na to, abychom si ukázali podmínkový operátor v akci. Celý kód nahoře převedeme do podmínkového operátoru, který bude vykonávat stejnou funkci. Rozsahem je použití operátoru jednodušší, ale podle mého názoru je předešlá možnost s IF/ELSE mnohem přehlednější.
function rozbal(id_rozbalovaneho_divu) {
var zmena = document.getElementById(id_rozbalovaneho_divu).style;
zmena.display = (zmena.display == 'block') ? 'none' : 'block';
}A teď to skombinujeme s HTML kódem a přiřadíme funkci rozbal odkazům. Vyvolávat se bude pomocí události onclick.
<html>
<head>
<title>Kontrola nicku a hesla</title>
<script language="JavaScript" type="text/javascript">
function rozbal(nabidka) {
var zmena = document.getElementById(nabidka).style;
if(zmena.display == 'block') {
zmena.display = 'none';
}
else {
zmena.display = 'block';
}
}
</script>
</head>
<body>
<span style="cursor: pointer;" onClick="rozbal('nabidka1');">nabídka 1</span>
<div id="nabidka1" style="display: block;" onLoad="this.style.dsiplay='none'">
<a href="#">nabídka 1.1</a>
<a href="#">nabídka 1.2</a>
<a href="#">nabídka 1.3</a>
</div>
<span style="cursor: hand; cursor: pointer;" onClick="rozbal('nabidka2');">nabídka 2</span>
<div id="nabidka2" style="display: none;">
<a href="#">nabídka 2.1</a>
<a href="#">nabídka 2.2</a>
<a href="#" onClick="rozbal('nabidka23');">nabídka 2.3</a>
<div id="nabidka23" style="display: none;">
<a href="#">nabídka 2.3.1</a>
<a href="#">nabídka 2.3.2</a>
</div>
</div>
<span style="cursor: hand; cursor: pointer;" onClick="rozbal('nabidka3');">nabídka 3</span>
<div id="nabidka3" style="display: none;">
<a href="#">nabídka 3.1</a>
<a href="#">nabídka 3.2</a>
<a href="#">nabídka 3.3</a>
</div>
</body>
</html>Kalkulačka
Posledním příkladem, který vám ukážu, je nascriptování kalkulačky. Než přejdeme ke scriptování funkcí samotné kalkulačky v JavaScriptu, bude potřeba vytvořit základní prostředí, tedy políčko na hodnoty a tlačítka s číslicemi 0-9, dále tlačítka s operátory a tlačítko na vyhodnocení zadaného příkladu a na vyvolání výsledku. Navrhl jsem základní návrh kalkulačky, aby vzhledově trochu vypadala, takže si teď budete chvíli připadat jako v kurzu CSS nebo HTML. První část bude CSS kód (umístěný do hlavičky).
<style type="text/css">
input.in_vypocet {
background-color: #f0f0f0;
border: 5px solid #dddddd;;
width: 280px;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
margin: 5px;
}
input.in_snum {
background-color: #f0f0f0;
border: 5px solid #dddddd;
width: 50px;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
margin: 5px;
color: #464646;
cursor: pointer;
}
input.in_lnum {
background-color: #f0f0f0;
border: 5px solid #dddddd;
width: 110px;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
margin: 5px;
color: #464646;
cursor: pointer;
}
input.in_xlnum {
background-color: #f0f0f0;
border: 5px solid #dddddd;
width: 170px;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
margin: 5px;
color: #464646;
cursor: pointer;
}
</style>A HTML kód bude vypadat takto:
<input type="text" name="vysledek" value="" class="in_vypocet" readonly="readonly" /><br />
<input type="button" value="7" class="in_snum" /><input type="button" value="8" class="in_snum" /><input type="button" value="9" class="in_snum" /><input type="button" value="*" class="in_snum" /><input type="button" value="/" class="in_snum" /><br />
<input type="button" value="4" class="in_snum" /><input type="button" value="5" class="in_snum" /><input type="button" value="6" class="in_snum" /><input type="button" value="+" class="in_snum" /><input type="button" value="-" class="in_snum" /><br />
<input type="button" value="1" class="in_snum" /><input type="button" value="2" class="in_snum" /><input type="button" value="3" class="in_snum" /><input type="button" value="." class="in_snum" /><input type="button" value="=" class="in_snum" /><br />
<input type="button" value="0" class="in_lnum" /><input type="reset" value="DELETE" class="in_xlnum" />Zatím máme vytvořeno toto.
Nyní vytvoříme sadu proměnných pro každé tlačítko, pak funkci na vkládání hodnot do políčka nahoře a funkci na výpočet zadaných hodnot. Všechny inputy, které tvoří kalkulačku, se nyní musejí vložit do formuláře a poté s nimi budeme moci pracovat. Formulář bude vypadat takto:
<form name="kalkulacka" method="post">
...
</form>Teď se konečně dostaneme k JavaScriptu. První část bude tvořit již zmiňovaná sada proměnných pro jednotlivá tlačítka. Naprostá banalita.
var jedna = '1';
var dve = '2';
var tri = '3';
var ctyri = '4';
var pet = '5';
var sest = '6';
var sedm = '7';
var osm = '8';
var devet = '9';
var nula = '0';
var plus = '+';
var minus = '-';
var krat = '*';
var deleno = '/';
var tecka = '.';Další částí je nascriptování funkce pro přidání stisknuté číslice do pole pro výsledek. V této funkci bude potřeba dvou proměnných – proměnná zadané číslice nebo znaku a proměnná udávající název formuláře.
function pridej_znak(formular, znak) {
formular.vysledek.value += znak; // vysledek je hodnota name u políčka pro výsledky
}Teď je ještě potřeba definovat funkci pro vygenerování výsledku – pro výpočet. Nejprve si podmínkou IF ověříme, zdali je vůbec v poli něco zadané, jestli je vůbec co počítat. Když bude, tak provedeme výpočet.
function vypocti(formular) {
if (formular.vysledek.value) {
formular.vysledek.value = eval (formular.vysledek.value);
}
else {
alert ('Musíte nejprve zadat nějaké hodnoty!');
}
}A teď už jen aplikujeme funkce do HTML kódu. Použijeme pouze událost onclick. Jedna neobvyklá věc – pole pro výpočet (výsledek) bude mít hodnotu action, to proto, že se veškeré akce budou točit kolem něj a výsledky bude vyhodnocovat právě toto políčko.
<form name="kalkulacka" method="post">
<input type="text" name="vysledek" value="" class="in_vypocet" readonly="readonly" action="vypocti(kalkulacka);" /><br />
<input type="button" value="7" class="in_snum" onClick="pridej_znak(kalkulacka, sedm);" /><input type="button" value="8" onClick="pridej_znak(kalkulacka, osm);" class="in_snum" /><input type="button" value="9" class="in_snum" onClick="pridej_znak(kalkulacka, devet);" /><input type="button" value="*" class="in_snum" onClick="pridej_znak(kalkulacka, krat);" /><input type="button" value="/" class="in_snum" onClick="pridej_znak(kalkulacka, deleno);" /><br />
<input type="button" value="4" class="in_snum" onClick="pridej_znak(kalkulacka, ctyri);" /><input type="button" value="5" class="in_snum" onClick="pridej_znak(kalkulacka, pet);" /><input type="button" value="6" class="in_snum" onClick="pridej_znak(kalkulacka, sest);" /><input type="button" value="+" class="in_snum" onClick="pridej_znak(kalkulacka, plus);" /><input type="button" value="-" class="in_snum" onClick="pridej_znak(kalkulacka, minus);" /><br />
<input type="button" value="1" class="in_snum" onClick="pridej_znak(kalkulacka, jedna);" /><input type="button" value="2" class="in_snum" onClick="pridej_znak(kalkulacka, dve);" /><input type="button" value="3" class="in_snum" onClick="pridej_znak(kalkulacka, tri);" /><input type="button" value="." class="in_snum" onClick="pridej_znak(kalkulacka, tecka);" /><input type="button" value="=" class="in_snum" onClick="vypocti(kalkulacka);" /><br />
<input type="button" value="0" class="in_lnum" onClick="pridej_znak(kalkulacka, nula);" /><input type="reset" value="CANCEL" class="in_xlnum" />
</form>Nyní už jen zbývá ukázat vám výsledek a popřát mnoho zdaru v dalším scriptování.
Úkol
V této lekci bude úkol velmi individuelní. Vaším úkolem je vymyslet nějaký „užitečný“ script. Pokud se jich sejde více, sestavím z nich zase nějakou opakovací lekci.
