Funkcje i Zdarzenia

INF.03.6 (2) — Tworzenie modułowego kodu i interaktywności w JavaScript

DefinicjaCzym jest funkcja?

Funkcja to blok kodu zaprojektowany do wykonania określonego zadania. Używamy funkcji, aby:

  • Modularyzacja: Dzielić duży program na mniejsze, łatwiejsze do zarządzania fragmenty.
  • Ponowne użycie: Wywoływać ten sam kod wiele razy bez jego kopiowania.
  • Parametry: Przyjmować dane wejściowe (argumenty) i zwracać wynik za pomocą return.

FunkcjeDeklaracja i wyrażenia

Deklaracja funkcji (function declaration)

Funkcja jest dostępna w całym zasięgu, również przed miejscem definicji (tzw. hoisting).

function obliczSume(a, b) {
  const wynik = a + b;
  return wynik;
}

// Wywołanie:
const suma = obliczSume(10, 5); // suma = 15

Wyrażenie funkcyjne (function expression)

Funkcja przypisana do zmiennej (często const), dostępna dopiero po zadeklarowaniu w kodzie. Często jest anonimowa i używana np. w obsłudze zdarzeń.

const powitaj = function(imie) {
  console.log("Witaj, " + imie);
};

// Wywołanie:
powitaj("Anna");

ZdarzeniaReagowanie na interakcje

Zdarzenie (event) to akcja w systemie, np. kliknięcie myszą, wciśnięcie klawisza, załadowanie strony czy zmiana pola formularza. [web:18]

Metoda addEventListener (zalecana)

Pozwala przypisać wiele funkcji do tego samego zdarzenia na jednym elemencie i łatwo je zdejmować. [web:18]

const przycisk = document.getElementById("btn-klik");

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

Obiekt event (ponadpodstawowe)

Każda funkcja obsługująca zdarzenie może otrzymać parametr event (często skracany do e) z informacjami o zdarzeniu. Można z niego odczytać m.in. typ zdarzenia, element źródłowy czy klawisze myszy/klawiatury. [web:18]

przycisk.addEventListener("click", function (e) {
  console.log("Typ zdarzenia: " + e.type); // "click"
  e.preventDefault(); // Zatrzymuje domyślną akcję (np. wysłanie formularza)
});

ĆwiczenieZadania praktyczne

Zadanie 1: Prosta funkcja z return (podstawowe)

Napisz funkcję obliczPodatek(kwota), która przyjmuje kwotę jako argument i zwraca kwotę powiększoną o stały podatek 23%.

function obliczPodatek(kwota) {
    const stawkaPodatku = 0.23;
    const kwotaZPodatkiem = kwota * (1 + stawkaPodatku);
    return kwotaZPodatkiem;
}

const wynikKoncowy = obliczPodatek(100);
console.log("Kwota z podatkiem: " + wynikKoncowy); // 123

Zadanie 2: Interaktywny licznik (ponadpodstawowe)

Stwórz przycisk o ID btn-dodaj i element o ID licznik-display (z początkową wartością 0). Po kliknięciu przycisku licznik ma zwiększać się o 1.

Licznik: 0 
let licznik = 0;
const przycisk = document.getElementById("btn-dodaj");
const display = document.getElementById("licznik-display");

function aktualizujLicznik() {
    licznik++;
    display.textContent = licznik;
}

if (przycisk && display) {
    przycisk.addEventListener("click", aktualizujLicznik);
}

Zadanie 3: Modułowy skrypt (wyzwanie)

Przebuduj kod z Zadania 2 w bardziej modułowy sposób, umieszczając całą logikę (zmienne, pobieranie elementów, funkcję i listener) w jednej funkcji anonimowej natychmiast wywoływanej (IIFE), aby nie zaśmiecać zasięgu globalnego.

(function () {
    let licznik = 0;
    const przycisk = document.getElementById("btn-dodaj");
    const display = document.getElementById("licznik-display");

    function aktualizujLicznik() {
        licznik++;
        display.textContent = licznik;
    }

    if (przycisk && display) {
        przycisk.addEventListener("click", aktualizujLicznik);
    }
})(); // IIFE

MateriałyNarzędzia i linki

  • MDN Web Docs: dokumentacja funkcji i zdarzeń JavaScript (hasła „Functions”, „Events”, „addEventListener”). [web:18]
  • Kursy INF.03: szkolenia z JavaScript pod egzamin zawodowy (np. technikinformatyk / kursjs). [web:12][web:18]
  • Ćwiczenia: wyszukaj „JavaScript DOM events tutorial”, aby poćwiczyć obsługę zdarzeń i interakcji z elementami strony. [web:4]
Materiały: Funkcje i zdarzenia · na podstawie wymagań kwalifikacji INF.03