Pętla for

Pętla for jest jedną z podstawowych struktur sterujących w JavaScript, umożliwiając wykonanie bloku kodu określoną liczbę razy. Jest to szczególnie przydatne, gdy chcemy wykonać jakąś operację na każdym elemencie tablicy lub gdy chcemy wykonać dany kod określoną liczbę razy. W tej lekcji przyjrzymy się różnym przykładom użycia pętli for, ilustrującym jej wszechstronność i praktyczność w różnych scenariuszach.

Przykłady użycia pętli for

Poniżej znajduje się kompletny plik HTML z kodem JavaScript zawierającym różne przykłady użycia pętli for. Każdy przykład będzie szczegółowo opisany i skomentowany, abyś mógł łatwo zrozumieć, jak działają pętle for w praktyce.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady pętli for w JavaScript</title>
</head>
<body>
    <h3>Przykłady pętli for w JavaScript</h3>
    <script>
        // Przykład 1: Podstawowe użycie pętli for
        console.log("Przykład 1: Podstawowe użycie pętli for");
        for (let i = 0; i < 5; i++) {
            console.log("Wartość i:", i);
        }
        // W tym przykładzie pętla wykona się 5 razy, z wartościami i od 0 do 4.

        // Przykład 2: Iteracja przez tablicę
        console.log("Przykład 2: Iteracja przez tablicę");
        const fruits = ["jabłko", "banan", "pomarańcza"];
        for (let i = 0; i < fruits.length; i++) {
            console.log("Owoc:", fruits[i]);
        }
        // Pętla for przechodzi przez każdy element tablicy 'fruits' i wyświetla go.

        // Przykład 3: Użycie pętli for do tworzenia HTML
        const items = ["Pierwszy", "Drugi", "Trzeci"];
        let itemsHTML = "<ul>";
        for (let i = 0; i < items.length; i++) {
            itemsHTML += `<li>${items[i]}</li>`; // Dodawanie elementu listy do stringa HTML
        }
        itemsHTML += "</ul>";
        document.body.innerHTML += itemsHTML;
        // W tym przykładzie tworzona jest lista HTML z elementów tablicy 'items'.
    </script>
</body>
</html>

Opis przykładów

  • Przykład 1 pokazuje najbardziej podstawowe użycie pętli for, które wykonuje się określoną liczbę razy, zwiększając zmienną i o 1 za każdym razem.
  • Przykład 2 ilustruje, jak używać pętli for do iteracji przez tablicę. Jest to bardzo często używany wzorzec, pozwalający na wykonanie operacji na każdym elemencie tablicy.
  • Przykład 3 demonstruje zastosowanie pętli for do dynamicznego tworzenia elementów HTML na stronie, używając tablicy i doklejania nowych elementów do stringa HTML, a następnie wstawiając gotowy kod HTML do dokumentu.

Podsumowanie

Pętla for jest niezwykle potężnym narzędziem w języku JavaScript, które pozwala na efektywne przetwarzanie kolekcji danych, wykonanie kodu określoną liczbę razy, a także dynamiczne generowanie zawartości strony. Zrozumienie i opanowanie pętli for jest kluczowe dla każdego programisty JavaScript, ponieważ jest ona stosowana w wielu różnych scenariuszach programistycznych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top