JavaScript – podstawy i ćwiczenia praktyczne

JavaScript to język skryptowy wykonywany po stronie klienta. Pozwala na tworzenie dynamicznych elementów strony, obsługę zdarzeń, formularzy oraz interaktywności.

1. Struktura i składnia JavaScript

Skrypty mogą być wstawiane w dokument HTML:

<script>
  // Komentarz w JS
  console.log("Witaj, świecie!");
</script>

Ćwiczenie: Dodaj skrypt, który wyświetla w konsoli nazwę użytkownika.

2. Wyświetlanie komunikatów i okna dialogowe

alert("To jest alert!");
let imie = prompt("Podaj swoje imię:");
confirm("Czy chcesz kontynuować?");

Ćwiczenie: Poproś użytkownika o imię i powitaj go alertem.

3. Zmienne i typy

let liczba = 10;       // Number
let tekst = "Cześć!";  // String
let logiczna = true;    // Boolean
let nic = null;         // Null
let niezdef = undefined; // Undefined

Ćwiczenie: Zdefiniuj zmienne różnego typu i wyświetl je w konsoli.

4. Operatory i instrukcje warunkowe

let a = 10, b = 5;
if(a > b) {
  console.log("a jest większe od b");
} else {
  console.log("b jest większe lub równe a");
}

switch(a) {
  case 10:
    console.log("a = 10");
    break;
  default:
    console.log("Inna wartość");
}

Ćwiczenie: Stwórz instrukcję warunkową sprawdzającą wiek użytkownika i wyświetl odpowiedni komunikat.

5. Pętle

for(let i=0; i<5; i++){
  console.log("Iteracja: " + i);
}

let j = 0;
while(j<5){
  console.log(j);
  j++;
}

let k = 0;
do{
  console.log(k);
  k++;
} while(k<5);

Ćwiczenie: Wypisz liczby parzyste od 0 do 20 każdą w nowej linii w konsoli.

6. Funkcje i argumenty

function dodaj(a, b){
  return a + b;
}
console.log(dodaj(5,7));

Ćwiczenie: Napisz funkcję, która oblicza pole prostokąta.

7. Obiekty w JavaScript

let osoba = {
  imie: "Jan",
  wiek: 25,
  przedstawSie: function(){
    console.log("Cześć, mam na imię " + this.imie);
  }
};
osoba.przedstawSie();

Ćwiczenie: Dodaj do obiektu nową właściwość „zawód” i wyświetl ją.

8. Obsługa zdarzeń i formularzy

document.getElementById("przycisk").addEventListener("click", function(){
  alert("Przycisk kliknięty!");
});

let formularz = document.getElementById("formularz");
formularz.addEventListener("submit", function(e){
  e.preventDefault(); // blokuje wysłanie
  console.log("Formularz wysłany!");
});

Ćwiczenie: Dodaj przycisk i formularz, obsłuż kliknięcia i wysyłanie w JavaScript.

Podsumowanie

JavaScript – zaawansowane zagadnienia

Ta sekcja obejmuje bardziej zaawansowane elementy języka JavaScript: tablice, obiekty, manipulacje DOM, animacje oraz walidację formularzy po stronie klienta. Uczniowie nauczą się dynamicznie zmieniać treść strony, reagować na zdarzenia i tworzyć interaktywne elementy.

1. Tablice i podstawowe operacje

let owoce = ["Jabłko", "Banan", "Wiśnia"];
console.log(owoce[0]);        // Jabłko
owoce.push("Gruszka");        // dodaje element na końcu
owoce.pop();                   // usuwa ostatni element
owoce.unshift("Truskawka");   // dodaje element na początku
owoce.shift();                 // usuwa pierwszy element
console.log(owoce.length);    // długość tablicy

Ćwiczenie: Stwórz tablicę 5 dowolnych przedmiotów i wyświetl je w konsoli.

2. Obiekty z metodami

let samochod = {
  marka: "Toyota",
  model: "Corolla",
  rok: 2020,
  wyswietlInfo: function(){
    console.log(this.marka + " " + this.model + " (" + this.rok + ")");
  }
};
samochod.wyswietlInfo();

Ćwiczenie: Dodaj nową metodę, która zwraca wiek samochodu.

3. Manipulacja DOM

let naglowek = document.getElementById("tytul");
naglowek.textContent = "Witaj w JavaScript!";
naglowek.style.color = "orange";

let nowyElement = document.createElement("p");
nowyElement.textContent = "To jest nowy paragraf dodany dynamicznie.";
document.body.appendChild(nowyElement);

Ćwiczenie: Zmień kolor wszystkich elementów <p> na zielony.

4. Prosta animacja

let box = document.getElementById("animacja");
let pos = 0;
function przesun(){
  if(pos < 200){
    pos += 2;
    box.style.left = pos + "px";
    requestAnimationFrame(przesun);
  }
}
przesun();

Ćwiczenie: Stwórz prosty kwadrat i animuj go w poziomie po stronie strony.

5. Walidacja formularzy po stronie klienta

let form = document.getElementById("formularz");
form.addEventListener("submit", function(e){
  let imie = document.getElementById("imie").value;
  let email = document.getElementById("email").value;
  let errors = [];
  
  if(imie.trim() === ""){
    errors.push("Imię jest wymagane.");
  }
  if(!email.includes("@")){
    errors.push("Niepoprawny email.");
  }

  if(errors.length > 0){
    e.preventDefault(); // blokuje wysłanie formularza
    alert(errors.join("\\n"));
  }
});

Ćwiczenie: Dodaj walidację dla pola numeru telefonu i sprawdź, czy zawiera 9 cyfr.

Podsumowanie

JavaScript – zaawansowane interakcje i API

W tej sekcji uczymy się, jak tworzyć dynamiczne strony WWW, reagować na zdarzenia użytkownika oraz pobierać dane z serwerów za pomocą AJAX/fetch.

1. Zaawansowane zdarzenia

let przycisk = document.getElementById("kliknij");
przycisk.addEventListener("mouseover", function(){
  this.style.backgroundColor = "orange";
});
przycisk.addEventListener("mouseout", function(){
  this.style.backgroundColor = "initial";
});

Ćwiczenie: Dodaj przycisk i zmieniaj jego kolor podczas najechania i opuszczenia kursora.

2. Pobieranie danych z serwera – fetch

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Błąd:", error));

Ćwiczenie: Pobierz dane o użytkowniku i wyświetl jego nazwę w konsoli.

3. Dynamiczne wyświetlanie danych

fetch("https://jsonplaceholder.typicode.com/users")
  .then(resp => resp.json())
  .then(users => {
    let lista = document.getElementById("lista-uzytkownikow");
    users.forEach(user => {
      let li = document.createElement("li");
      li.textContent = user.name + " (" + user.email + ")";
      lista.appendChild(li);
    });
  });

Ćwiczenie: Stwórz pustą listę w HTML i wypełnij ją danymi pobranymi z API.

4. Obsługa błędów i retry

async function pobierzDane(url){
  try {
    let resp = await fetch(url);
    if(!resp.ok) throw new Error("Błąd sieci: " + resp.status);
    let data = await resp.json();
    console.log(data);
  } catch(error) {
    console.error("Wystąpił błąd:", error);
  }
}
pobierzDane("https://jsonplaceholder.typicode.com/posts/1");

Ćwiczenie: Napisz funkcję, która pobiera dane o poście i obsługuje ewentualne błędy.

5. Interakcja z formularzem i API

let form = document.getElementById("formularz-api");
form.addEventListener("submit", async function(e){
  e.preventDefault();
  let id = document.getElementById("post-id").value;
  try {
    let resp = await fetch("https://jsonplaceholder.typicode.com/posts/" + id);
    let data = await resp.json();
    document.getElementById("wynik").textContent = JSON.stringify(data, null, 2);
  } catch(err){
    console.error("Błąd pobierania:", err);
  }
});

Ćwiczenie: Dodaj formularz z polem ID i przyciskiem „Pobierz post”. Wyświetl wynik w elemencie <pre>.

Podsumowanie