JSON

📘 Lekcja 1: Definicje

💬 Co to jest baza danych?

Baza danych to miejsce (system), w którym przechowujemy, organizujemy i zarządzamy informacjami.
Tak jak notatnik albo szafka na dokumenty, tylko w wersji cyfrowej.

Przykład:
Baza danych drużyn w Escape Challenge zawiera:

  • nazwy drużyn,
  • liczbę punktów,
  • pokoje, w których grają.

Przykład wyjaśnienia:
Wyobraź sobie szafkę na dokumenty:

  • Szuflada 1: drużyny
  • Szuflada 2: wyniki
  • Szuflada 3: pokoje gry

W bazie danych online te szuflady to np. pliki .json lub tabele.

Przykład bazy danych dla Escape Challenge

Wyobraźmy sobie, że baza danych wygląda jak tabela (podobnie jak w MS Excel ale ma więcej możliwości użycia i lepsze zarządzanie informacją, bardziej optymalne):

ID drużynyNazwa drużynyPunktyPokój gryLider drużyny
1Kaktusy50DżunglaOla
2Smoki40ZamekKasia
3Rakiety30Statek KosmicznyTomek

Każdy wiersz (rekord) = jedna drużyna.
Każda kolumna = jedna cecha drużyny (nazwa, punkty, pokój, lider).

Baza danych vs. Arkusz MS Excel

CechaBaza danychArkusz kalkulacyjny (MS Excel)
Czym jest?System do przechowywania i zarządzania danymiNarzędzie do obliczeń i przechowywania danych
StrukturaTabele (rekordy = wiersze, kolumny = pola)Arkusze z komórkami (wiersze i kolumny)
DaneStruktura narzucona i ściśle kontrolowanaDane mogą być dowolne (luźna struktura)
Wyszukiwanie danychBardzo szybkie i precyzyjne (zapytania SQL)Możliwe, ale wolniejsze i bardziej ręczne (filtry, wyszukiwanie)
Łączenie danychMożna łączyć wiele tabel (relacje)Trudne, zwykle osobne pliki lub arkusze
AutomatyzacjaMożliwość automatycznego dodawania/usuwania danych (np. programowo)Wymaga ręcznego działania lub makr VBA
Bezpieczeństwo danychZaawansowane (uprawnienia, kopie zapasowe)Słabe (łatwo przypadkowo skasować lub zmienić dane)
Rozmiar danychObsługuje miliony rekordówOgraniczony (np. Excel ma limit wierszy: ~1 milion)
Typowe zastosowaniaSystemy sklepowe, rejestracje użytkowników, wyniki gierBudżety, proste listy, wykresy
Przykłady narzędziMySQL, PostgreSQL, Firebase, MongoDBMS Excel, Google Sheets

Prosty programik (HTML+JS) pokazujący „bazę danych” na stronie:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Baza drużyn Escape Challenge</title>
</head>
<body>

  <h1>Nasza baza drużyn</h1>
  <div id="database"></div>

  <script>
    // Nasza baza danych drużyn (tablica obiektów)
    const database = [
      {id: 1, name: "Kaktusy", points: 50, room: "Dżungla", leader: "Ola"},
      {id: 2, name: "Smoki", points: 40, room: "Zamek", leader: "Kasia"},
      {id: 3, name: "Rakiety", points: 30, room: "Statek Kosmiczny", leader: "Tomek"}
    ];

    // Wyświetlenie danych na stronie
    let output = "<table border='1' cellpadding='5'><tr><th>ID</th><th>Nazwa</th><th>Punkty</th><th>Pokój</th><th>Lider</th></tr>";

    database.forEach(team => {
      output += `<tr><td>${team.id}</td><td>${team.name}</td><td>${team.points}</td><td>${team.room}</td><td>${team.leader}</td></tr>`;
    });

    output += "</table>";

    document.getElementById("database").innerHTML = output;
  </script>

</body>
</html>

W tym przykładzie:

  • dane drużyn są zapisane jako tablica obiektów JavaScript (const database = [...]).
  • to nie jest czysty JSON, tylko struktura w stylu JSON, ale zapisana jako JavaScript.

JSON i obiekty JavaScript wyglądają bardzo podobnie, ale to technicznie różne rzeczy.

Różnice:

JavaScript (JS)JSON (JavaScript Object Notation)
Żywy kod – można wykonywać operacjeTylko zapis danych – czysty tekst
Zmienna np. const database = [...]Tekst np. zapisany w "" lub w pliku .json
Klucze mogą być bez cudzysłowuKlucze muszą być w cudzysłowach "..."
Może zawierać funkcje, zmienne itp.Tylko dane: teksty, liczby, wartości logiczne

Przykład w JS:

const database = [
  {id: 1, name: "Kaktusy", points: 50, room: "Dżungla", leader: "Ola"},
  {id: 2, name: "Smoki", points: 40, room: "Zamek", leader: "Kasia"},
  {id: 3, name: "Rakiety", points: 30, room: "Statek Kosmiczny", leader: "Tomek"}
];

to:

  • tablica obiektów JavaScript,
  • nie plik lub ciąg tekstowy JSON.

ten sam zapis jako prawdziwy JSON?

[
  {
    "id": 1,
    "name": "Kaktusy",
    "points": 50,
    "room": "Dżungla",
    "leader": "Ola"
  },
  {
    "id": 2,
    "name": "Smoki",
    "points": 40,
    "room": "Zamek",
    "leader": "Kasia"
  },
  {
    "id": 3,
    "name": "Rakiety",
    "points": 30,
    "room": "Statek Kosmiczny",
    "leader": "Tomek"
  }
]

Każdy klucz ("id", "name", "points") jest w cudzysłowie.

Jest to surowy tekst, który trzeba by później wczytać za pomocą JSON.parse() w JS.

Baza danych to zorganizowany zbiór danych o drużynach, punktach i pokojach.
W programowaniu używamy np. tablic JSON, aby trzymać te dane w czytelny sposób.

Gdybyśmy mieli 100 drużyn, baza danych pozwala szybko szukać, dodawać, usuwać i aktualizować informacje.

💬 Co to jest localStorage?

localStorage to pamięć przeglądarki internetowej –
umożliwia zapisywanie danych na stałe po stronie użytkownika.

Przykład:
Jeśli zapiszesz drużyny do localStorage, to nawet po odświeżeniu strony dane nadal tam będą.

localStorage – definicja prosta:

  • localStorage to specjalna pamięć wbudowana w przeglądarkę internetową.
  • Można w niej przechowywać dane (np. wyniki gry, drużyny) lokalnie – czyli na komputerze użytkownika.
  • Dane nie znikają nawet po odświeżeniu strony lub ponownym uruchomieniu przeglądarki.

✅ localStorage jest więc jak mini-baza danych zapisanych na Twoim komputerze.

Porównanie: localStorage vs Baza danych

CechalocalStorageBaza danych (np. MySQL, Firebase)
Gdzie dane są zapisywane?Na komputerze użytkownika (przeglądarka)Na serwerze (dostępne z każdego miejsca)
Czy dane są prywatne?Tak, dostępne tylko na Twoim urządzeniuWspółdzielone, mogą być dostępne dla innych
Rozmiar danychMały (zwykle max 5MB)Bardzo duży (gigabajty, terabajty)
Czy wymaga internetu?Nie, działa offlineTak, baza danych online wymaga sieci
Czy wymaga logowania / serwera?NieTak (serwer lub specjalne konto)
Łatwość użyciaBardzo proste w JavaScriptWymaga dodatkowych technologii (np. SQL)

localStorage i JSON – jak się łączą?
-localStorage może przechowywać tylko tekst (string).
-Jeśli chcesz zapisać np. tablicę drużyn albo obiekty, musisz je najpierw zamienić na JSON.
-kiedy chcesz odczytać dane, musisz je znowu zamienić z JSON na obiekty JS.
OperacjaFunkcja w JavaScript
Obiekt JS ➔ Tekst JSONJSON.stringify()
Tekst JSON ➔ Obiekt JSJSON.parse()

Praktyczny przykład krok po kroku:

  1. Masz dane (np. drużyny):
let teams = [
  {name: "Kaktusy", points: 50},
  {name: "Smoki", points: 40}
];

2. Zapisujesz do localStorage:

localStorage.setItem("teams", JSON.stringify(teams));

teams zamienia się na tekst JSON i jest zapisane w przeglądarce.

3. Odczytujesz z localStorage:

let savedTeams = JSON.parse(localStorage.getItem("teams"));
console.log(savedTeams);

Znowu masz tablicę obiektów – gotową do użycia w programie.

💬 Co to jest plik JSON?

JSON (JavaScript Object Notation) to format zapisu danych w postaci tekstowej.
Dane są zapisane w parach klucz: wartość, np.:

{
  "name": "Kaktusy",
  "points": 50,
  "room": "Dżungla"
}

JSON jest używany, bo:

  • Jest lekki i szybki,
  • Jest łatwy do odczytu przez ludzi i programy,
  • Idealnie pasuje do stron internetowych.

Przykład bazy danych zapisany w json:

[
  {
    "id": 1,
    "name": "Kaktusy",
    "points": 50,
    "room": "Dżungla",
    "leader": "Ola"
  },
  {
    "id": 2,
    "name": "Smoki",
    "points": 40,
    "room": "Zamek",
    "leader": "Kasia"
  },
  {
    "id": 3,
    "name": "Rakiety",
    "points": 30,
    "room": "Statek Kosmiczny",
    "leader": "Tomek"
  }
]

Co oznacza:

  • [...] – lista wielu drużyn (tablica),
  • {...} – jedna drużyna (obiekt),
  • "klucz": "wartość" – dane o drużynie.

Szuflada = lista drużyn → cała tablica [ {...}, {...}, {...} ]

Kartka w szufladzie = jedna drużyna → obiekt { "name": "Kaktusy", ... }

Linijki na kartce = informacje o drużynie → „name”, „points”, „room”, „leader”

📘 Lekcja 2: Tworzenie pliku JSON i wyświetlanie danych

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Dane drużyn – JSON</title>
</head>
<body>

  <h1>Lista drużyn</h1>
  <div id="teamsList"></div>

  <script>
    // Dane drużyn zapisane w formacie JSON
    let jsonData = `
    [
      {"name": "Kaktusy", "points": 50, "room": "Dżungla"},
      {"name": "Smoki", "points": 40, "room": "Zamek"},
      {"name": "Rakiety", "points": 30, "room": "Kosmos"}
    ]
    `;

    // Zamiana tekstu JSON na obiekty JavaScript
    let teams = JSON.parse(jsonData);

    // Wyświetlenie drużyn na stronie
    let output = "";
    teams.forEach(team => {
      output += `<p>Drużyna: <strong>${team.name}</strong>, Punkty: ${team.points}, Pokój: ${team.room}</p>`;
    });

    document.getElementById("teamsList").innerHTML = output;
  </script>

</body>
</html>

Zadanie: Dopisz nową drużynę bez zmiany całego JSON, dodaj klucze:

nazwę,

liczbę punktów,

escape room

📘 Lekcja 3: Wczytywanie JSON i dodawanie nowych danych

Jak odczytać JSON w kodzie JavaScript:

let data = '[{"name":"Kaktusy","points":50,"room":"Dżungla"}]';
let teams = JSON.parse(data);

console.log(teams[0].name); // Wynik w konsoli: Kaktusy
  • JSON.parse() – zamienia tekst JSON na obiekty JS.
  • Teraz możesz łatwo pracować na tych danych.
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Dodawanie drużyn – JSON</title>
</head>
<body>

  <h1>Aktualna lista drużyn</h1>
  <div id="teamsList"></div>

  <h2>Dodaj nową drużynę</h2>
  <input type="text" id="teamName" placeholder="Nazwa drużyny">
  <input type="number" id="teamPoints" placeholder="Punkty">
  <input type="text" id="teamRoom" placeholder="Escape room">
  <button onclick="addTeam()">Dodaj drużynę</button>

  <script>
    let teams = [
      {"name": "Kaktusy", "points": 50, "room": "Dżungla"},
      {"name": "Smoki", "points": 40, "room": "Zamek"}
    ];

    function displayTeams() {
      let output = "";
      teams.forEach(team => {
        output += `<p><strong>${team.name}</strong> – ${team.points} pkt – Pokój: ${team.room}</p>`;
      });
      document.getElementById("teamsList").innerHTML = output;
    }

    function addTeam() {
      let name = document.getElementById("teamName").value;
      let points = parseInt(document.getElementById("teamPoints").value);
      let room = document.getElementById("teamRoom").value;

      teams.push({"name": name, "points": points, "room": room});
      displayTeams();
    }

    // Startowe wyświetlenie
    displayTeams();
  </script>

</body>
</html>

Zadanie: Po dodaniu drużyny, wyczyść pola formularza

Jak dodać nową drużynę:

teams.push({
  "name": "Rakiety",
  "points": 30,
  "room": "Kosmos",
  "leader": "Tomek"
});

ponownie zapisać jako JSON:

let updatedData = JSON.stringify(teams);
console.log(updatedData);

JSON.stringify() – zamienia dane JS z powrotem na tekst JSON.

📘 Lekcja 4: Zapisywanie danych do localStorage

Jak zapisać drużyny do localStorage:

localStorage.setItem("teams", JSON.stringify(teams));

Jak odczytać dane:

let savedTeams = JSON.parse(localStorage.getItem("teams"));
console.log(savedTeams);

Przykład użycia w pliku HTML

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Zapisywanie drużyn – localStorage</title>
</head>
<body>

  <h1>Moje drużyny</h1>
  <div id="teamsList"></div>

  <h2>Dodaj nową drużynę</h2>
  <input type="text" id="teamName" placeholder="Nazwa drużyny">
  <input type="number" id="teamPoints" placeholder="Punkty">
  <input type="text" id="teamRoom" placeholder="Escape room">
  <button onclick="addTeam()">Dodaj i zapisz</button>

  <script>
    let teams = JSON.parse(localStorage.getItem("teams")) || [];

    function displayTeams() {
      let output = "";
      teams.forEach(team => {
        output += `<p><strong>${team.name}</strong> – ${team.points} pkt – Pokój: ${team.room}</p>`;
      });
      document.getElementById("teamsList").innerHTML = output;
    }

    function addTeam() {
      let name = document.getElementById("teamName").value;
      let points = parseInt(document.getElementById("teamPoints").value);
      let room = document.getElementById("teamRoom").value;

      teams.push({"name": name, "points": points, "room": room});

      // Zapis do localStorage
      localStorage.setItem("teams", JSON.stringify(teams));
      displayTeams();
    }

    // Wyświetl dane przy starcie
    displayTeams();
  </script>

</body>
</html>

Zadanie: Dodaj przycisk „Resetuj drużyny” – usuwa dane z localStorage

Rozwiązanie zadania 2-4

Zadanie 2 Napisać JSON z trzema własnymi drużynami.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Drużyny JSON – rozwiązanie Lekcja 2</title>
</head>
<body>

  <h1>Lista drużyn – rozwiązanie</h1>
  <div id="teamsList"></div>

  <script>
    // JSON zapisany poprawnie – trzy drużyny
    let jsonData = `
    [
      {"name": "Wilki", "points": 45, "room": "Zamek"},
      {"name": "Żółwie", "points": 35, "room": "Dżungla"},
      {"name": "Lisy", "points": 55, "room": "Kosmos"}
    ]
    `;

    let teams = JSON.parse(jsonData);

    let output = "";
    teams.forEach(team => {
      output += `<p><strong>${team.name}</strong> – ${team.points} punktów – Pokój: ${team.room}</p>`;
    });

    document.getElementById("teamsList").innerHTML = output;

    /* Rozwiązanie zadania Lekcja 2:
       - 3 drużyny
       - każda z nazwą, punktami i pokojem
    */
  </script>

</body>
</html>

Zadanie 3. Wczytać JSON z drużynami i umożliwić dodanie nowej drużyny.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Dodaj drużynę – rozwiązanie Lekcja 3</title>
</head>
<body>

  <h1>Aktualna lista drużyn</h1>
  <div id="teamsList"></div>

  <h2>Dodaj nową drużynę</h2>
  <input type="text" id="teamName" placeholder="Nazwa drużyny">
  <input type="number" id="teamPoints" placeholder="Punkty">
  <input type="text" id="teamRoom" placeholder="Escape room">
  <button onclick="addTeam()">Dodaj drużynę</button>

  <script>
    let teams = [
      {"name": "Kaktusy", "points": 50, "room": "Dżungla"},
      {"name": "Smoki", "points": 40, "room": "Zamek"}
    ];

    function displayTeams() {
      let output = "";
      teams.forEach(team => {
        output += `<p><strong>${team.name}</strong> – ${team.points} pkt – Pokój: ${team.room}</p>`;
      });
      document.getElementById("teamsList").innerHTML = output;
    }

    function addTeam() {
      let name = document.getElementById("teamName").value;
      let points = parseInt(document.getElementById("teamPoints").value);
      let room = document.getElementById("teamRoom").value;

      teams.push({"name": name, "points": points, "room": room});
      displayTeams();

      // Czyścimy pola po dodaniu
      document.getElementById("teamName").value = "";
      document.getElementById("teamPoints").value = "";
      document.getElementById("teamRoom").value = "";

      /* Rozwiązanie zadania Lekcja 3:
         - Dodawanie nowej drużyny
         - Wyświetlanie drużyn
         - Czyszczenie pól formularza
      */
    }

    displayTeams();
  </script>

</body>
</html>

Zadanie 4. Zapisać drużyny do localStorage i odczytać je po odświeżeniu strony.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Zapisywanie drużyn – rozwiązanie Lekcja 4</title>
</head>
<body>

  <h1>Moje drużyny (dane zapisane)</h1>
  <div id="teamsList"></div>

  <h2>Dodaj nową drużynę</h2>
  <input type="text" id="teamName" placeholder="Nazwa drużyny">
  <input type="number" id="teamPoints" placeholder="Punkty">
  <input type="text" id="teamRoom" placeholder="Escape room">
  <button onclick="addTeam()">Dodaj i zapisz</button>

  <script>
    // Pobieranie drużyn z localStorage lub tworzenie pustej listy
    let teams = JSON.parse(localStorage.getItem("teams")) || [];

    function displayTeams() {
      let output = "";
      teams.forEach(team => {
        output += `<p><strong>${team.name}</strong> – ${team.points} pkt – Pokój: ${team.room}</p>`;
      });
      document.getElementById("teamsList").innerHTML = output;
    }

    function addTeam() {
      let name = document.getElementById("teamName").value;
      let points = parseInt(document.getElementById("teamPoints").value);
      let room = document.getElementById("teamRoom").value;

      teams.push({"name": name, "points": points, "room": room});
      
      // Zapisujemy nowe dane do localStorage
      localStorage.setItem("teams", JSON.stringify(teams));
      
      displayTeams();

      // Czyścimy pola po dodaniu
      document.getElementById("teamName").value = "";
      document.getElementById("teamPoints").value = "";
      document.getElementById("teamRoom").value = "";

      /* Rozwiązanie zadania Lekcja 4:
         - Zapis do localStorage
         - Odczyt z localStorage
         - Aktualizacja drużyn
         - Czyszczenie pól
      */
    }

    displayTeams();
  </script>

</body>
</html>

Referencje

  1. Artykuł o JSON (po angielsku, łatwy): w3schools JSON tutorial
  2. Środowisko do programowania on-linie: https://jsbin.com/

Opublikowano

w

przez

admin

Tagi: