Pętle

pętla for

for (wyrażenie początkowe; wyrażenie warunkowe; wyrażenie modyfikujące){
    blok instrukcji
}

wyrażenie początkowe - inicjuje zmienną używaną jako licznik liczby wykonań pętli
wyrażenie warunkowe - określa warunek jaki musi być spełniony, aby dokonać kolejnego przejścia w pętli
wyrażenie modyfikujące - zazwyczaj jest używane do modyfikacji zmiennej będącej licznikiem


<script type="text/javascript">
for (var x = 0; x < 5; x++){
    document.write("Pętla typu for <br />");
}
</script>


wynik skryptu


Opis w jaki sposób należy rozumieć powyższy skrypt:
(var x = 0) - utwórz zmienną x i przypisz jej wartość 0
(x < 5) - tak długo jak wartość x jest mniejsza od 5 wykonuj instrukcję znajdującą się wewnątrz pętli: document.write
(x++) - zwiększaj x o 1
na ekranie pojawi się 5 razy napis "Pętla typu for"


<script type="text/javascript">
for (var x = 0; x < 5; x++){
    document.write("Pętla typu for " + x + "<br />");
}
</script>


wynik skryptu



pętla for z różnymi rodzajami zmiennych: vor, let, const

<script type="text/javascript">
var a = 10;
for(var a = 0; a <= 3; a++){
    document.write("pętla for " + a + "<br />");
}
document.write('this is a: ' + a);
</script>

wynik skryptu



<script type="text/javascript">
let b = 10;
for(let b = 0; b <= 3; b++){
    document.write("pętla for " + b + "<br />");
}
document.write('this is b: ' + b);
</script>

wynik skryptu



<script type="text/javascript">
const c = 10;
for(const c = 0; c <= 3; c++){
    document.write("pętla for " + c + "<br />");
}
document.write('this is c: ' + c);
</script>

wynik skryptu



wyrażenie modyfikujące wewnątrz pętli for

for (wyrażenie początkowe; wyrażenie warunkowe;){
    instrukcje do wykonania
    wyrażenie modyfikujące
}


<script type="text/javascript">
for (var x = 0; x < 5;){
    document.write("Pętla typu for <br />");
    x++;
}
</script>


wynik skryptu



wyrażenie początkowe przed pętlą

wyrażenie początkowe;
for (; warunek;){
    blok instrukcji
    modyfikacja
}

<script type="text/javascript">
var x = 0;
for (; x < 5;){
    document.write ("Pętla typu for <br />");
    x++;
}
</script>


wynik skryptu



pętla bez wyrażeń

<script type="text/javascript">
var x = 0;
for (; ;){
    document.write ("Petla typu for " + x + "<br />");
    if (x++ >= 5) break;
}
</script>


wynik skryptu



pętla for rosnących liczb

<script type="text/javascript">
for (var x = 1; x <= 20; x++){
    document.write(x + " ");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 1; x <= 20; x+=2){
    document.write(x + " ");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 1; x <= 20; x+=3){
    document.write(x + " ");
}
</script>

wynik skryptu



pętla for malejących liczb

<script type="text/javascript">
for (var x = 20; x >= 0; x--){
    document.write(x + " ");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 20; x >= 0; x-=2){
document.write(x + " ");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 20; x >= 0; x-=3){
    document.write(x + " ");
}
</script>

wynik skryptu



pętla for rosnących liczb raz jeszcze

<script type="text/javascript">
const a1 = 6;
const b1 = 12;
for (let i=1; i<=a1 && i<=b1; i++) {
    document.write(i + " ");
}
</script>

wynik skryptu



<script type="text/javascript">
const c1 = 6;
const d1 = 12;
for (let i=8; i>=c1 && i<=d1; i++) {
    document.write(i + " ");
}
</script>

wynik skryptu



pętla for obliczająca modulo

<script type="text/javascript">
for (var x = 0; x <= 6; x++){
    document.write(x + " % 1 = " + (x % 1) + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 0; x <= 6; x++){
    document.write(x + " % 2 = " + (x % 2) + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 0; x <= 6; x++){
    document.write(x + " % 3 = " + (x % 3) + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 0; x <= 6; x++){
    document.write(x + " % 4 = " + (x % 4) + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 0; x <= 6; x++){
    document.write(x + " % 5 = " + (x % 5) + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
for (var x = 0; x <= 6; x++){
    document.write(x + " % 6 = " + (x % 6) + "<br />");
}
</script>

wynik skryptu



liczby podzielne przez 2

<script type="text/javascript">
for (var x = 1; x <= 20; x++){
    if ((x % 2) == 0)
    document.write(x + " ");
}
</script>


wynik skryptu



liczby niepodzielne przez 2

<script type="text/javascript">
for (var x = 1; x <= 20; x++){
    if ((x % 2) != 0)
    document.write(x + " ");
}
</script>


wynik skryptu

---

<script type="text/javascript">
for (var x = 1; x <= 6; x++){
    if((x % 2) == 1){
        document.write("<b style=\"color: blue;\">" + x + "</b> ");
    } else {
        document.write("<b style=\"color: red;\">" + x + "</b> ");
    }
}
</script>

wynik skryptu



<div>Wynik: <span id="list"></span></div>

<script type="text/javascript">
const container = document.querySelector('#list');

for (let i = 1; i <= 5; i++){
    container.innerHTML = container.innerHTML + i;
}
</script>

wynik skryptu



<div>Wynik: <span id="list02"></span></div>

<script type="text/javascript">
const container02 = document.querySelector('#list02');

for (let i = 1; i <= 5; i++){
    container02.innerHTML = container02.innerHTML + i + ' ';
}
</script>

wynik skryptu



<div>Wynik: <span id="list03"></span></div>

<script type="text/javascript">
const container03 = document.querySelector('#list03');

for (let i = 1; i <= 5; i++){
    container03.innerHTML = container03.innerHTML + '<br />' + i;
}
</script>

wynik skryptu



generowanie listy za pomocą pętli for

<div id="list01A"></div>

<script type="text/javascript">
const el = document.querySelector('#list01A');
let text = '<ul>';

for (let i = 1; i <= 3; i++) {
    text = text + `<li>Element nr ${i}</li>`;
}

text = text + '</ul>';

el.innerHTML = text;
</script>

wynik skryptu



<div id="list02A"></div>

<script type="text/javascript">
function generateList(count, selectorId) {
    const el02 = document.querySelector('#' + selectorId);
    let text02 = '<ul>';

    for (let i = 1; i <= count; i++) {
        text02 = text02 + `<li>Element nr ${i}</li>`;
    }

    text02 = text02 + '</ul>';

    el02.innerHTML = text02;
}

generateList(3, "list02A");
</script>

wynik skryptu

pętla for...in

  stosowana jest w: obiektach, tablicach, stringach
  leci po kluczach
  leci tylko po elementach enumerowalnych
  sprawdza też pola prototypu


for (var nazwa in obiekt){
    instrukcje
}



<script type="text/javascript">
const Polska = {
    kraj: 'Polska',
    stolica: 'Warszawa',
    powierzchnia: '322 575 km²',
    ludność: '38 mln'
}
for(const key in Polska) {
    document.write(key + ": " + Polska[key] + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
const kraje = ['Polska', 'Czechy', 'Słowacja'];

for(const key in kraje){
    document.write(key + ": " + kraje[key] + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
const cytat = 'Koko dżambo i do przodu.';

for(const key in cytat){
    document.write(key + ": " + cytat[key] + "<br />");
}
</script>

wynik skryptu



<p id="wynik"> </p>
<script type="text/javascript">
const Niemcy = {
    kraj: 'Niemcy',
    stolica: 'Berlin',
    powierzchnia: '357 588km<sup>2</sup>',
    ludność: '83mln'
}

let txt = "";
for (let key in Niemcy) {
    txt += key + ": " + Niemcy[key] + "<br />";
}
document.getElementById("wynik").innerHTML = txt;
</script>

wynik skryptu

 

<p id="wynik02"> </p>
<script type="text/javascript">
const filmy = ['Matrix', 'Predator', 'Terminator'];

let txt02 = "";
for (let key in filmy) {
    txt02 += key + ": " + filmy[key] + "<br />";
}
document.getElementById("wynik02").innerHTML = txt02;
</script>

wynik skryptu

 

<p id="wynik03"> </p>
<script type="text/javascript">
const powiedzenie = "Koko koko euro spoko.";

let txt03 = "";
for (let key in powiedzenie) {
    txt03 += key + ": " + powiedzenie[key] + "<br />";
}
document.getElementById("wynik03").innerHTML = txt03;
</script>

wynik skryptu

 

pętla for...of

  stosowana jest w: tablicach, stringach
  leci po wartościach
  tylko po elementach iterowalnych
    tablice są iterowalne
    stringi są iterowalne
    NodeList jest iterowalne
    obiekty domyślnie nie są iterowalne (dlatego na obiektach nie używamy pętli for...of)



<script type="text/javascript">
const miasta = ['Warszawa', 'Praga', 'Bratysława'];

for(const value of miasta){
    document.write(value + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
const miasta02 = ['Warszawa', 'Praga', '', 'Bratysława'];
for (const value of miasta02){
    if (value.length == 0) break;
    document.write(value + "<br />");
}
</script>

wynik skryptu



<script type="text/javascript">
const miasta03 = ['Warszawa', 'Praga', 'Bratysława'];
for (const value of miasta03){
    if (value == 'Bratysława') break;
    document.write(value + "<br />");
}
</script>
wynik skryptu



<script type="text/javascript">
const cytat02 = 'Koko koko euro spoko.';
for(const value of cytat02) {
    document.write(value + "<br />");
}
</script>

wynik skryptu

pętla while

while (wyrażenie warunkowe){
    instrukcje
}

instrukcje warunkowe są wykonywane dopóty, dopóki wyrażenie warunkowe jest prawdziwe

<script type="text/javascript">
x = 0;
while(x++ < 5){
    document.write("Pętla typu while " + x + "<br />");
}
</script>


wynik skryptu



<script type="text/javascript">
x = 0;
while(++x < 5){
    document.write("Pętla typu while " + x + "<br />");
}
</script>


wynik skryptu



pętla while i liczby od 1 do 20

<script type="text/javascript">
x = 1;
while (x <= 20){
    document.write(x + " ");
    x++;
}
</script>


wynik skryptu



pętla while i liczby od 20 do 1

<script type="text/javascript">
x = 20;
while (x >= 1){
    document.write(x + " ");
    x--;
}
</script>


wynik skryptu



pętla while i liczby parzyste

skrypt wyświetlający liczby od 1 do 20 podzielne przez 2

<script type="text/javascript">
x = 1;
while (x <= 20){
    if(x % 2 == 0)
        document.write(x + ", ");
    x++;
}
</script>


wynik skryptu



pętla while i liczby nieparzyste

skrypt wyświetlający liczby od 1 do 20 niepodzielne przez 2

<script type="text/javascript">
x = 1;
while (x <= 20){
    if(x % 2 != 0)
        document.write(x + ", ");
    x++;
}
</script>


wynik skryptu

pętla do...while

do{
    instrukcje;
}
while(warunek);

wykonuj instrukcje, dopóki warunek jest prawdziwy
jeśli nawet warunek jest fałszywy to i tak pętla zostanie wykonana przynajmniej jeden raz


<script type="text/javascript">
var x = 0;
do{
    document.write("Pętla do...while <br />");
}
while (x++ < 5);
</script>


wynik skryptu

<script type="text/javascript">
var x = 0;
do{
    document.write("Pętla do...while <br />" + x);
}
while (x++ < 5);
</script>


wynik skryptu

<script type="text/javascript">
var x = 0;
do{
    document.write(x + " Pętla do...while <br />");
}
while (x++ < 5);
</script>


wynik skryptu



pętla do...while z fałszywym warunkiem

<script type="text/javascript">
do{
    document.write("Pętla do...while z fałszywym warunkiem <br />");
}
while (false);
</script>


wynik skryptu