Pętle

Klasyczna pętla for

Wykonuje blok kodu określoną liczbę razy.

for (let i = 0; i < 5; i++) {
    console.log('Liczba i jest równa: ' + i);
}

Pętla for/in

Pętle tego typu iterują po właściwościach obiektów

const person = {firstname: "Grzegorz", lastname: "Brzęczyszczykiewicz", age: 35};
for (let x in person) {
    console.log('klucz: ' + x + '; wartość: ' + person[x]);
}

Pętla for/of

Pętle tego typu iterują po strukturach składających się z wielu elementów. Mogą to być ciągi znaków, tablice, kolekcje elementów HTML.

let city = "Nowy Jork";
for (let n of city) {
    console.log(n);
}

Pętla while

Wykonuje blok kodu dopóki określony warunek jest spełniony. Sprawdzenie warunku odbywa się przed wykonaniem kodu.

let i = 0;
while (i < 0.5) {
    i = Math.random();
    console.log({i});
}

Pętla do/while

Wykonuje blok kodu dopóki określony warunek jest spełniony. Sprawdzenie warunku odbywa się po wykonaniu kodu.

let j = 0;
do {
    j = Math.random();
    console.log({j});
} while (j < 0.5);

Zadania

Zadanie 1. #

Umieść w pliku elementy_input.html element form. Następnie odszukaj go w pliku elementy_input.js i, korzystając z pętli for, dodaj wewnątrz niego 100 elementów input. Elementom input dodaj następujące atrybuty: id (z numerem elementu; pamiętaj, że element nie może mieć identyfikatora będącego liczbą ani zaczynającego się od liczby), name, style (margines 10 pikseli oraz box-shadow 5px w kolorze lightblue), placeholder (Element numer n). Dodatkowo elementy input rozmieść w pięciu kolumnach po 20 w jednej kolumnie, tak jak na poniższym obrazku.

2023-05-11 21:33:56 2023-11-17 00:57:42