Cykly v JS sú podobné ako v céčku.
Nebudeme sa zdržiavať teórioiu a prejdeme hneď k praxi.
Vytvorme si html súbor cykly.html
Kód:
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/podmienky.js"></script>
<title>Cykly a pole v JS</title>
</head>
<body>
<p id="vypis" class="modry"></p>
</body>
</html>
Ďalej súbor style.css
Kód:
p {
font-size: 1.3em;
}
.modry {
color: blue;
}
Takže cykly sú ako v céčku a niečo je aj navyše.
Kód:
for (var i = 0; i < pocet; i++) {}
Kód:
while (true) {}
Kód:
do {}while (frue);
Navyše je čítanie poľa:
Kód:
for (var x in pole) {}
Uvediem príklady na všetky druhy.
Kód:
/** cyklus for **/
$(function() {
var pocet = 10;
for (var i = 0; i < pocet; i++) {
var p = $('<p></p>').text(i).addClass('modry');
$('body').append(p);
}
});
Vysvetlíme si obsah tela cyklu.
Riadok:
Kód:
var p = $('<p></p>').text(i).addClass('modry');
vytvorí premennú p a naplní ju elementom odstavec(p) s textom hodnoty i z cyklu a pridá mu triedu modry zo súboru style.css.
Riadok:
Kód:
$('body').append(p);
pridá do tela stránky (body) vytvorenú premennú.
Kód:
/** cyklus while **/
$(function() {
var pocet = 10;
var x = 3;
while (x < pocet) { // ak je x menšie ako 10
var p = $('<p></p>').text(x).addClass('modry');
$('body').append(p);
x++; // zvýšenie x o jedna v každom cykle
}
});
Kód:
/** cyklus do while **/
$(function() {
var pocet = 10;
var x = 3;
do {
var p = $('<p></p>').text(x).addClass('modry');
$('body').append(p);
x++;
}while (x < pocet);
});
Skôr ako si vysvetlíme posledný spôsob cyklu, zoznámime sa s poľom v JS.
Zase je to veľmi podobné ako v céčku, akurát pretože JS je objektovo orientovaný jazyk, pole sa deklaruje takto:
Kód:
var pole = new Array();
Prístup k jednotlivým prvkom je:
pole[0] je prvý prvok
pole[1] je druhý prvok
pole[2] je tretí prvok
pole[x] je x-tý plus jedna prvok
Pole môžeme naplniť priamo
Kód:
var dni = new Array("Nedeľa", "Pondelok", "Utorok", "Streda", "Štvrtok", "Piatok", "Sobota");
stretnete sa aj s takýmto priamym naplnením a je to úplne to isté
Kód:
var dni = [Nedeľa", "Pondelok", "Utorok", "Streda", "Štvrtok", "Piatok", "Sobota"];
cyklom
Kód:
var pole = new Array();
for (var i = 0; i < 10; i++) {
pole[i] = i + 1;
}
Vznikne:
pole(1,2,3,4,5,6,7,8,9)
Teraz si pozrieme posledný cyklus.
Kód:
/** cyklus for na čítanie poľa **/
$(function() {
var dni = new Array("Nedeľa", "Pondelok", "Utorok", "Streda", "Štvrtok", "Piatok", "Sobota");
for (var x in dni) {
var d = $('<p></p>').text(dni[x]).addClass('modry');
$('body').append(d);
}
});
Možno vám to pripomína cyklus foreach z iných c-like jazykov, ale je tu jeden veľký rozdieľ, ktorý mnohokrát vedie ku chybám.
Ide o to, že v JS sa premenná x naplní indexami poľa a preto sa číta ako pole[index]. Kdežto v ostatných jazykoch sa x naplní obsahom prvku poľa a preto sa číta ako x.
Do poľa môžeme prvky ľubovoľne pridávať alebo ich mazať.
Kód:
var dni = new Array("Utorok", "Streda", "Štvrtok", "Piatok", "Sobota");
Výstup: Utorok, Streda, Štvrtok, Piatok, Sobota
Kód:
dni.push("Nedeľa"); // pridá nový prvok na koniec poľa
Výstup: Utorok, Streda, Štvrtok, Piatok, Sobota, Nedeľa
Kód:
dni.unshift("Pondelok"); // pridá nový prvok na začiatok poľa
Výstup: Pondelok, Utorok, Streda, Štvrtok, Piatok, Sobota, Nedeľa
Kód:
dni.splice(2, 1); // zmaže 3. prvok (indexy sú od nuly) ("Streda")
Výstup: Pondelok, Utorok, Štvrtok, Piatok, Sobota, Nedeľa
Kód:
dni.splice(2, 0, "Streda"); // vloží na 3. miesto "Streda" a ostatné posunie
Výstup: Pondelok, Utorok, Streda, Štvrtok, Piatok, Sobota, Nedeľa
Kód:
dni.splice(2, 3); // zmaže 2 prvky od 3. pozície (indexy sú od nuly) ("Streda", "Štvrtok")
Výstup: Pondelok, Utorok, Sobota, Nedeľa
Zoradenie prvkov v poli.
(reťazce)
Kód:
dni.sort();
Výstup: Nedeľa, Pondelok, Sobota, Utorok
S číslami je to trochu zložitejšie.
Kód:
var cisla = new Array(5,6,7,12,8,4,9);
Výpis: 5, 6, 7, 12, 6, 4, 9
Kód:
cisla.sort(function(a, b) {return a-b});
Výpis: 4, 5, 6, 6, 7, 9, 12
Opačné poradie v poli (platí pre každé pole, dokonca aj pre viacrozmerné pole).
Kód:
cisla.reverse();
12, 9, 7, 6, 6, 5, 4
Kód:
dni.reverse();
Výstup: Utorok, Sobota, Pondelok, Nedeľa
Dvojrozmerné pole.
Kód:
var zakusky = [
["0","punčové rezy","imgz/puncove.jpg","40","2-0.2","5-0.4","6-7","25-0.5","30-1","47-1","48-1"],
["1","banánová roláda","imgz/bananova_rolada.jpg","15","3-0.2","4-0.12","5-0.200","6-7","8-1","12-0.5","16-1","22-0.5","46-0.5"],
["2","gaštanová roláda","imgz/gastanova_rolada.jpg","15","12-0.5","16-1","20-0.5","44-1","45-1","73-1","53-1"],
["3","medové rezy","imgz/medove_rezy.jpg","40","3-0.45","4-0.35","6-1","7-0.5","8-1.5","9-0.5","12-0.5","14-1","17-1","43-0.1","44-1"],
["4","orechové košíčky","imgz/orechove_kosicky.jpg","50","7-0.3","12-0.5","17-1","28-0.1","32-0.25","33-1","42-1"],
["5","cokoladové košíčky","imgz/cokoladove_kosicky.jpg","50","3-0.25","4-0.22","6-5","8-1","9-0.15","12-0.5","17-1","22-0.1","24-0.1"],
["6","parížske rožky","imgz/parizske_rozky.jpg","50","4-0.21","6-3","8-2","12-0.5","17-1","22-0.5","32-0.15","53-2"],
["7","miňonky","imgz/minonky.jpg","50","3-0.1","5-0.38","6-13","8-1.5","12-0.5","16-1","17-2","22-0.5","28-0.1","32-0.2","38-0.5","39-1"],
["8","kokosky","imgz/kokosky.jpg","40","4-0.5","6-5","8-1","17-1","19-1","29-1"],
["9","burizónové guľky","imgz/burizonove_gulky.jpg","50","5-0.35","12-1","36-1","37-1"],
["10","makové kolieska","imgz/makove_kolieska.jpg","50","3-0.4","4-0.2","6-3","9-1","30-1","33-1","35-1","49-0.15"]
];
Výpis:
Príloha:
normal.PNG [ 41.19 KiB | Zobrazené 2545 krát ]
Kód:
zakusky.reverse();
Výpis:
Príloha:
reverse.PNG [ 41.06 KiB | Zobrazené 2545 krát ]
Nabudúce budeme hovoriť o funkciách, to už bude zábavnejšie.
Prihlásenie
Registrovať
Návody
Hľadať
Zoznam bodov
