Tablice

Witaj z powrotem.

W poprzedniej lekcji poznałeś funkcje.

Funkcje pomagają ponownie używać kodu, organizować logikę i unikać zupy kopiuj-wklej.

Bardzo przydatne.

Bardzo cywilizowane.

Dziś przechodzimy do kolejnego ważnego tematu w JavaScript.

Tablice.

Tablica to lista wartości.

Zamiast tworzyć wiele osobnych zmiennych, możesz przechowywać wiele wartości w jednej zmiennej.

Bez tablic kod wygląda tak:

const student1 = "Anna";
const student2 = "Marco";
const student3 = "Luca";
const student4 = "Sofia";

To działa.

Ale nie jest piękne.

To trochę jak noszenie po jednym ziemniaku w każdej kieszeni zamiast użycia torby.

Z tablicą możemy napisać tak:

const students = ["Anna", "Marco", "Luca", "Sofia"];

Dużo lepiej.

Jedna zmienna.

Wiele wartości.

Mniej chaosu.

JavaScript powoli uczy się sprzątać swój pokój.

Prawie.

Czego Się Nauczysz

W tej lekcji nauczysz się:

czym są tablice;
jak stworzyć tablicę;
jak działają indeksy;
jak odczytywać elementy tablicy;
jak zmieniać elementy tablicy;
jak dodawać elementy za pomocą push;
jak usuwać elementy za pomocą pop;
jak sprawdzać długość tablicy;
jak przechodzić przez tablicę za pomocą pętli;
jak używać tablic z funkcjami;
jak używać tablic z DOM;
jak zbudować małą listę zadań.

Na końcu tej lekcji będziesz rozumieć, jak JavaScript przechowuje listy danych.

To duży krok.

Bo prawdziwe strony internetowe są pełne list.

Produkty.

Użytkownicy.

Wpisy blogowe.

Elementy menu.

Komentarze.

Zadania.

Zdjęcia.

Wszystko jest listą, jeśli patrzysz wystarczająco długo.

Trochę filozoficznie.

Ale nadal JavaScript.

Czym Jest Tablica?

Tablica to specjalna zmienna, która może przechowywać wiele wartości.

Przykład:

const fruits = ["apple", "banana", "orange"];

Tutaj mamy jedną zmienną:

fruits

A w środku mamy trzy wartości:

apple
banana
orange

Tablica używa nawiasów kwadratowych:

[]

Każda wartość jest oddzielona przecinkiem.

Przykład:

const numbers = [10, 20, 30, 40];
const names = ["Anna", "Marco", "Viktor"];
const mixed = ["JavaScript", 2026, true];

Tablica może zawierać teksty, liczby, wartości logiczne i inne dane.

Ale zwykle trzymamy podobne dane razem.

Tak:

const products = ["Laptop", "Mouse", "Keyboard"];

Nie tak:

const strangeArray = ["Pizza", 42, false, "Zdezorientowany pingwin"];

JavaScript na to pozwala.

Ale tylko dlatego, że możesz coś zrobić, nie znaczy, że powinieneś.

Bardzo ważna lekcja życia.

I programowania.

Utwórz Projekt

Utwórz folder dla tej lekcji:

mkdir javascript-lesson5
cd javascript-lesson5
touch index.html
touch script.js

Twój projekt powinien wyglądać tak:

javascript-lesson5/
  index.html
  script.js

Otwórz folder w edytorze.

Zaczniemy od konsoli.

Potem użyjemy tablic do aktualizacji strony internetowej.

Dzisiaj bez smoka frameworków.

Tylko JavaScript.

Nadal trochę niebezpieczny.

Ale do opanowania.

Napisz HTML

Otwórz index.html i dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tablice</title>
</head>
<body>
  <h1>Tablice</h1>
  <p>Otwórz konsolę przeglądarki, aby zobaczyć wynik JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Otwórz plik w przeglądarce.

Otwórz konsolę:

kliknij prawym przyciskiem myszy na stronie;
wybierz Zbadaj;
otwórz zakładkę Console.

Teraz JavaScript jest gotowy.

Konsola patrzy.

Znowu.

Ona nigdy nie śpi.

Twoja Pierwsza Tablica

Otwórz script.js i dodaj:

const fruits = ["apple", "banana", "orange"];

console.log(fruits);

Odśwież przeglądarkę.

Powinieneś zobaczyć:

["apple", "banana", "orange"]

Gratulacje.

Właśnie stworzyłeś swoją pierwszą tablicę.

Wygląda prosto.

Ale to jedno z najważniejszych narzędzi w JavaScript.

Zmienna przechowuje jedną wartość.

Tablica przechowuje wiele wartości.

To jest różnica.

Małe nawiasy.

Duża moc.

Indeksy Tablicy

Każdy element w tablicy ma swoją pozycję.

Ta pozycja nazywa się indeksem.

Ważne:

JavaScript zaczyna liczyć od zera.

Nie od jedynki.

Od zera.

Bo programiści spojrzeli na normalne liczenie i powiedzieli:

“Nie. Zbyt wygodne.”

Przykład:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Wynik:

apple
banana
orange

Struktura wygląda tak:

Index 0 -> apple
Index 1 -> banana
Index 2 -> orange

Więc pierwszy element to:

fruits[0]

Nie:

fruits[1]

To jeden z najczęstszych błędów początkujących.

Nie martw się.

Każdy to robi.

Potem każdy cierpi.

Potem każdy pamięta.

To naturalna ścieżka mądrości JavaScript.

Odczytywanie Elementów Tablicy

Możesz odczytać dowolny element za pomocą jego indeksu.

Przykład:

const languages = ["HTML", "CSS", "JavaScript"];

console.log(languages[0]);
console.log(languages[1]);
console.log(languages[2]);

Wynik:

HTML
CSS
JavaScript

Jeśli spróbujesz odczytać indeks, który nie istnieje:

console.log(languages[5]);

Wynik:

undefined

Dlaczego?

Bo nie ma elementu pod indeksem 5.

JavaScript nie panikuje.

Po prostu mówi:

undefined

Czyli:

“Nic tutaj nie znalazłem, kolego.”

Bardzo spokojnie.

Może nawet zbyt spokojnie.

Zmienianie Elementów Tablicy

Możesz zmienić element w tablicy.

Przykład:

const fruits = ["apple", "banana", "orange"];

fruits[1] = "kiwi";

console.log(fruits);

Wynik:

["apple", "kiwi", "orange"]

Element pod indeksem 1 został zmieniony.

Przed:

banana

Po:

kiwi

Banan opuścił budynek.

Bez wyjaśnienia.

Bez pożegnania.

Po prostu JavaScript.

Dodawanie Elementów za Pomocą push

Aby dodać element na końcu tablicy, używamy push.

Przykład:

const fruits = ["apple", "banana"];

fruits.push("orange");

console.log(fruits);

Wynik:

["apple", "banana", "orange"]

push dodaje nowy element na końcu.

Kolejny przykład:

const tasks = ["study JavaScript", "drink coffee"];

tasks.push("build a website");

console.log(tasks);

Wynik:

["study JavaScript", "drink coffee", "build a website"]

To przydaje się, kiedy użytkownik coś dodaje.

Nowe zadanie.

Nowy produkt.

Nową wiadomość.

Nowy problem.

Szczególnie ostatnie.

Web development kocha nowe problemy.

Usuwanie Elementów za Pomocą pop

Aby usunąć ostatni element z tablicy, używamy pop.

Przykład:

const fruits = ["apple", "banana", "orange"];

fruits.pop();

console.log(fruits);

Wynik:

["apple", "banana"]

pop usuwa ostatni element.

Może też zwrócić usunięty element:

const fruits = ["apple", "banana", "orange"];

const removedFruit = fruits.pop();

console.log(removedFruit);
console.log(fruits);

Wynik:

orange
["apple", "banana"]

Pomarańcza została usunięta.

Ale zapisaliśmy ją w zmiennej.

Bardzo dramatycznie.

Bardzo organizacyjnie.

Długość Tablicy

Aby sprawdzić, ile elementów jest w tablicy, używamy .length.

Przykład:

const fruits = ["apple", "banana", "orange"];

console.log(fruits.length);

Wynik:

To mówi nam, że tablica ma trzy elementy.

Kolejny przykład:

const students = ["Anna", "Marco", "Luca", "Sofia"];

console.log(`There are ${students.length} students.`);

Wynik:

There are 4 students.

.length jest bardzo przydatne.

Szczególnie kiedy trzeba przejść przez tablicę za pomocą pętli.

I tak.

Pętle nadchodzą.

Nie uciekaj.

Są przyjazne.

Przeważnie.

Przechodzenie Przez Tablicę

Wyobraź sobie, że mamy taką tablicę:

const fruits = ["apple", "banana", "orange"];

Moglibyśmy wypisać każdy element ręcznie:

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

To działa.

Ale nie jest elastyczne.

A jeśli mamy 100 elementów?

Będziemy pisać 100 razy console.log?

Nie.

Mamy godność.

Używamy pętli.

Przykład:

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Wynik:

apple
banana
orange

Jak to działa?

let i = 0

Zaczynamy od indeksu 0.

i < fruits.length

Kontynuujemy, dopóki i jest mniejsze niż długość tablicy.

i++

Po każdym obrocie pętli zwiększamy i.

Potem:

fruits[i]

pobiera aktualny element.

To bardzo częsty wzorzec w JavaScript.

Zobaczysz go wszędzie.

Jak kurz.

Ale pożyteczny kurz.

Pętla for...of

Istnieje też prostszy sposób przechodzenia przez tablice.

Przykład:

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

Wynik:

apple
banana
orange

To jest pętla for...of.

Jest czysta i łatwa do czytania.

Używaj jej, kiedy chcesz od razu dostać każdy element.

Przykład:

const names = ["Anna", "Marco", "Viktor"];

for (const name of names) {
  console.log(`Hello, ${name}!`);
}

Wynik:

Hello, Anna!
Hello, Marco!
Hello, Viktor!

Bardzo ładnie.

Bardzo czytelnie.

Bez dramatu z indeksami.

for czy for...of?

Używaj zwykłej pętli for, kiedy potrzebujesz indeksu.

Przykład:

const products = ["Laptop", "Mouse", "Keyboard"];

for (let i = 0; i < products.length; i++) {
  console.log(`${i}: ${products[i]}`);
}

Wynik:

0: Laptop
1: Mouse
2: Keyboard

Używaj for...of, kiedy potrzebujesz tylko wartości.

Przykład:

const products = ["Laptop", "Mouse", "Keyboard"];

for (const product of products) {
  console.log(product);
}

Wynik:

Laptop
Mouse
Keyboard

Prosta zasada:

Jeśli potrzebujesz indeksu, użyj for.

Jeśli potrzebujesz tylko elementu, użyj for...of.

JavaScript daje wybór.

Czasem za duży.

Ale te dwa wybory są naprawdę przydatne.

Tablice i Warunki

Możesz używać warunków wewnątrz pętli.

Przykład:

const prices = [10, 25, 50, 5, 100];

for (const price of prices) {
  if (price > 20) {
    console.log(`Expensive item: €${price}`);
  }
}

Wynik:

Expensive item: €25
Expensive item: €50
Expensive item: €100

To jest potężne.

Możesz filtrować dane.

Możesz znajdować ważne elementy.

Możesz sprawdzać reguły.

Przykład:

const ages = [12, 18, 25, 16, 40];

for (const age of ages) {
  if (age >= 18) {
    console.log(`${age} can enter.`);
  } else {
    console.log(`${age} cannot enter.`);
  }
}

Wynik:

12 cannot enter.
18 can enter.
25 can enter.
16 cannot enter.
40 can enter.

Tablice przechowują dane.

Pętle przechodzą przez dane.

Warunki podejmują decyzje.

JavaScript zaczyna wyglądać jak mały pracownik biurowy.

Trochę zmęczony.

Ale produktywny.

Tablice i Funkcje

Tablice bardzo dobrze współpracują z funkcjami.

Przykład:

function showProducts(products) {
  for (const product of products) {
    console.log(product);
  }
}

const products = ["Laptop", "Mouse", "Keyboard"];

showProducts(products);

Wynik:

Laptop
Mouse
Keyboard

Tutaj funkcja otrzymuje tablicę.

Potem przechodzi przez nią pętlą.

To bardzo częste w prawdziwych projektach.

Kolejny przykład:

function countItems(items) {
  return items.length;
}

const tasks = ["study", "practice", "build"];

console.log(countItems(tasks));

Wynik:

Funkcje i tablice są dobrymi przyjaciółmi.

Funkcje wykonują akcje.

Tablice przechowują dane.

Razem są niebezpieczne.

W dobrym sensie.

Przeważnie.

Zbuduj Listę Zadań

Teraz zbudujemy małą stronę, która wyświetla listę zadań.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tablice</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    p,
    li {
      font-size: 20px;
      line-height: 1.6;
    }

    ul {
      padding-left: 24px;
    }

    li {
      margin-bottom: 10px;
    }

    .count {
      font-weight: 700;
      color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>Tablice</h1>

  <div class="card">
    <h2>Dzisiejsze Zadania</h2>
    <p id="taskCount" class="count"></p>
    <ul id="taskList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

Teraz zaktualizuj script.js:

const tasks = [
  "Learn arrays",
  "Practice loops",
  "Build a small project",
  "Drink coffee"
];

const taskListElement = document.getElementById("taskList");
const taskCountElement = document.getElementById("taskCount");

function showTaskCount(tasks) {
  taskCountElement.textContent = `You have ${tasks.length} tasks today.`;
}

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

showTaskCount(tasks);
showTasks(tasks);

Odśwież przeglądarkę.

Powinieneś zobaczyć listę zadań na stronie.

JavaScript wziął tablicę i stworzył z niej elementy HTML.

To ważne.

Bardzo ważne.

Bo wiele prawdziwych stron działa dokładnie tak:

pobierają dane;
zapisują dane w tablicy;
przechodzą przez tablicę;
tworzą HTML;
pokazują wszystko użytkownikowi.

To nie jest tylko teoria.

To prawdziwy web development.

Mały.

Prosty.

Ale prawdziwy.

Przeglądarka nie jest już dekoracyjnym ziemniakiem.

Ona pracuje.

Jak Działa Ten Kod

Ta tablica przechowuje zadania:

const tasks = [
  "Learn arrays",
  "Practice loops",
  "Build a small project",
  "Drink coffee"
];

To znajduje listę w HTML:

const taskListElement = document.getElementById("taskList");

To znajduje akapit z liczbą zadań:

const taskCountElement = document.getElementById("taskCount");

Ta funkcja pokazuje, ile mamy zadań:

function showTaskCount(tasks) {
  taskCountElement.textContent = `You have ${tasks.length} tasks today.`;
}

Ta funkcja tworzy elementy listy:

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

To uruchamia obie funkcje:

showTaskCount(tasks);
showTasks(tasks);

Zwróć uwagę na coś ważnego.

Tablica zawiera dane.

Funkcje decydują, co zrobić z danymi.

To pomaga utrzymać kod w porządku.

Nie idealnie.

Ale lepiej.

Perfekcja i tak jest podejrzana.

Typowe Błędy

Zapominanie, że Tablice Zaczynają Się od Zera

Błędne oczekiwanie:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[1]);

Możesz oczekiwać:

apple

Ale dostaniesz:

banana

Bo pierwszy element ma indeks 0.

Poprawnie:

console.log(fruits[0]);

Wynik:

apple

JavaScript zaczyna od zera.

Zaakceptuj to.

Napij się wody.

Idź dalej.

Używanie Indeksu, Który Nie Istnieje

Przykład:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[10]);

Wynik:

undefined

Nie ma elementu pod indeksem 10.

JavaScript nie jest zły.

Tam po prostu jest pusto.

Jak w lodówce po północy.

Używanie `<=` Zamiast `<` w Pętli

Źle:

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i <= fruits.length; i++) {
  console.log(fruits[i]);
}

To może wypisać:

apple
banana
orange
undefined

Dlaczego?

Bo ostatni poprawny indeks to 2.

Ale fruits.length to 3.

Poprawnie:

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Używaj <.

Nie <=.

Mały znak.

Duża różnica.

Jak jedna śrubka w krześle.

Niby mała.

A potem siedzisz na podłodze.

Zapominanie o Wyczyszczeniu Listy

Jeśli uruchomisz funkcję wiele razy, może dodać te same elementy kilka razy.

Przykład:

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Jeśli ta funkcja uruchomi się dwa razy, zadania pojawią się dwa razy.

Aby tego uniknąć, najpierw wyczyść listę:

function showTasks(tasks) {
  taskListElement.innerHTML = "";

  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

To usuwa starą zawartość przed dodaniem nowej.

Bardzo przydatne.

Szczególnie gdy strona zaczyna duplikować elementy jak zepsuta drukarka.

Praktyka

Utwórz tablicę o nazwie favoriteLanguages.

Powinna zawierać co najmniej trzy języki programowania.

Przykład:

const favoriteLanguages = ["JavaScript", "Python", "Java"];

Wypisz każdy język za pomocą pętli for...of.

Przykład:

for (const language of favoriteLanguages) {
  console.log(language);
}

Następnie utwórz tablicę o nazwie scores.

Przykład:

const scores = [10, 25, 8, 40, 15];

Wypisz tylko wyniki większe niż 20.

Przykład:

for (const score of scores) {
  if (score > 20) {
    console.log(score);
  }
}

Uruchom kod.

Zmień wartości.

Zepsuj go.

Napraw go.

To nadal najlepszy sposób nauki.

JavaScript lubi praktykę.

I czasem ofiary.

Ale głównie praktykę.

Mini Wyzwanie

Zbuduj małą stronę z:

tytułem;
akapitem pokazującym, ile elementów jest na liście;
pustym <ul>;
tablicą produktów;
funkcją, która wyświetla wszystkie produkty na stronie.

Przykładowa tablica:

const products = [
  "Laptop",
  "Mouse",
  "Keyboard",
  "Monitor"
];

Utwórz funkcję:

function showProducts(products) {
  // create list items here
}

Bonus:

Dodaj drugą funkcję o nazwie showProductCount.

Powinna pokazać wiadomość:

There are 4 products.

Użyj:

products.length

To wyzwanie jest bardzo blisko prawdziwego web developmentu.

Masz dane.

Pokazujesz dane.

Trzymasz logikę w funkcjach.

Tak unikamy spaghetti.

Albo przynajmniej gotujemy lepsze spaghetti.

Podsumowanie

Dzisiaj nauczyłeś się:

tablice przechowują wiele wartości;
tablice używają nawiasów kwadratowych;
każdy element tablicy ma indeks;
indeksy w JavaScript zaczynają się od zera;
możesz odczytywać elementy po indeksie;
możesz zmieniać elementy tablicy;
push dodaje element na końcu;
pop usuwa ostatni element;
.length pokazuje liczbę elementów;
pętle mogą przechodzić przez tablice;
for...of to czysty sposób odczytywania elementów;
tablice dobrze współpracują z funkcjami;
tablice mogą tworzyć elementy HTML dynamicznie.

To duży krok.

Tablice są wszędzie w JavaScript.

Kiedy widzisz listę produktów, wpisów, użytkowników, zadań, komentarzy albo zdjęć, prawdopodobnie gdzieś za kulisami pracuje tablica.

Cicho.

Zmęczona.

Ale użyteczna.

Następna Lekcja

W następnej lekcji poznamy obiekty.

Obiekty pomagają przechowywać dane w bardziej uporządkowany sposób.

Bo czasem to nie wystarczy:

const user = "Viktor";

Czasem potrzebujemy tego:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

Tablice są do list.

Obiekty są do szczegółów.

Razem są wszędzie.

JavaScript robi się poważny.

Nadal dziwny.

Ale poważny.

Tablice

Czego Się Nauczysz

Czym Jest Tablica?

Utwórz Projekt

Napisz HTML

Twoja Pierwsza Tablica

Indeksy Tablicy

Odczytywanie Elementów Tablicy

Zmienianie Elementów Tablicy

Dodawanie Elementów za Pomocą push

Usuwanie Elementów za Pomocą pop

Długość Tablicy

Przechodzenie Przez Tablicę

Pętla for...of

for czy for...of?

Tablice i Warunki

Tablice i Funkcje

Zbuduj Listę Zadań

Jak Działa Ten Kod

Typowe Błędy

Zapominanie, że Tablice Zaczynają Się od Zera

Używanie Indeksu, Który Nie Istnieje

Używanie <= Zamiast < w Pętli

Zapominanie o Wyczyszczeniu Listy

Praktyka

Mini Wyzwanie

Podsumowanie

Następna Lekcja

Używanie `<=` Zamiast `<` w Pętli