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.