Javascript for Kids · Lekcja

Pętla wewnątrz pętli

Pętle zagnieżdżone

Pętla wewnątrz pętli to bezpłatna lekcja Javascript for Kids na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Javascript for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Javascript for Kids zawiera 4 lekcji w sumie.

Pętla w pętli?! 🤯

Co się stanie, gdy umieścimy pętlę WEWNĄTRZ innej pętli? To jak koło obracające się wewnątrz większego koła! ⚙️⚙️

Nazywa się to zagnieżdżoną pętlą i pozwala tworzyć niesamowite grafiki!

Pętla zewnętrzna i wewnętrzna 🪆

Pomyślmy o rosyjskich matrioszkach! 🪆 Zewnętrzna pętla to duża lalka. Wewnętrzna pętla to mała lalka w środku.

Na każdą JEDNĄ iterację pętli zewnętrznej pętla wewnętrzna wykonuje WSZYSTKIE swoje iteracje!

Pierwsza zagnieżdżona pętla 🔁

W tym przykładzie pętla zewnętrzna wykonuje się 2 razy. Za każdym razem pętla wewnętrzna wykonuje się 3 razy! Przyjrzyjmy się uważnie.

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log('i=' + i + ' j=' + j)
  }
}

Dwa liczniki! ✌️

Widzimy? Mamy teraz DWA liczniki: i dla pętli zewnętrznej i j dla wewnętrznej.

Wewnętrzny licznik j przyjmuje wartości 1, 2, 3 za każdym razem, gdy zmienia się zewnętrzny licznik i!

for (let i = 1; i <= 2; i++) {
  console.log('Outer ' + i + ' starts')
  for (let j = 1; j <= 2; j++) {
    console.log('  inner ' + j)
  }
}

Ile razy łącznie? 🔢

Jeśli pętla zewnętrzna wykonuje się 3 razy, a wewnętrzna 4 razy, daje to 3 × 4 = 12 wszystkich iteracji!

Policzmy je.

let count = 0
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 4; j++) {
    count = count + 1
  }
}
console.log('Total runs: ' + count)

Dni i posiłki 🍽️

Przykład z życia! Każdego DNIA jemy 3 POSIŁKI. Pętla zewnętrzna oznacza dni, a wewnętrzna — posiłki.

for (let day = 1; day <= 2; day++) {
  console.log('Day ' + day)
  for (let meal = 1; meal <= 3; meal++) {
    console.log('  meal ' + meal)
  }
}

Gwiazdki w wierszach ⭐

Pętla zewnętrzna tworzy WIERSZE. Pętla wewnętrzna wyświetla gwiazdki w danym wierszu. To przedsmak tworzenia grafiki!

for (let row = 1; row <= 3; row++) {
  for (let s = 1; s <= 2; s++) {
    console.log('star')
  }
  console.log('--- end of row ---')
}

Kolejność ma znaczenie 📋

Pętla wewnętrzna ZAWSZE kończy wszystkie swoje iteracje, zanim pętla zewnętrzna przejdzie dalej. To jak przeczytanie każdego słowa w wierszu przed przejściem do następnego wiersza! 📖

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log(i + ',' + j)
  }
}

Mnożenie liczb ✖️

Zagnieżdżone pętle świetnie nadają się do obliczeń! Pomnóżmy przez siebie i oraz j.

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(i + ' x ' + j + ' = ' + (i * j))
  }
}

Wybieranie strojów 👕👖

2 koszule i 2 pary spodni dają 4 stroje! Zagnieżdżone pętle pokazują każdą kombinację.

for (let shirt = 1; shirt <= 2; shirt++) {
  for (let pants = 1; pants <= 2; pants++) {
    console.log('Shirt ' + shirt + ' with pants ' + pants)
  }
}

Czas na zagnieżdżanie 🌟

Proszę zmienić pętlę wewnętrzną tak, aby wykonała się 4 razy, i uruchomić kod! Proszę zobaczyć, jak rośnie wynik. 🪆

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 4; j++) {
    console.log('i=' + i + ' j=' + j)
  }
}

Szybki test ✅

Szybki test wiedzy o zagnieżdżonych pętlach! 🧠

Podsumowanie zagnieżdżonych pętli 🎉

Niesamowite! 🤯 Nauczono się korzystać z zagnieżdżonych pętli.

Pętla WEWNĄTRZ pętli, jak rosyjskie matrioszki 🪆
Licznik zewnętrzny i i licznik wewnętrzny j
Pętla wewnętrzna kończy wszystkie iteracje, zanim pętla zewnętrzna przejdzie dalej

Następnie: tworzenie wierszy i kolumn, czyli siatki! 🟦

Często zadawane pytania

Czy lekcja „Pętla wewnątrz pętli” jest bezpłatna?

Tak — pełny tekst „Pętla wewnątrz pętli” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Javascript for Kids, przejdź na CoddyKit PRO. Kurs Javascript for Kids zawiera 4 lekcji w sumie.

Co nauczysz się w „Pętla wewnątrz pętli”?

Pętle zagnieżdżone Ćwiczysz Javascript for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Javascript for Kids?

Nie wymagamy żadnego doświadczenia. Javascript for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Pętla wewnątrz pętli”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Javascript for Kids?

Tak. Każda lekcja Javascript for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Javascript for Kids