MODUŁ 04

Funkcje i parametry

PPrezentacja dla nauczyciela

W tym module nauczysz się organizować kod w wielokrotnie wykorzystywane bloki: tworzyć funkcje o znaczących nazwach, przekazywać do nich parametry oraz zwracać wyniki obliczeń za pomocą instrukcji return.

Definiowanie i wywoływanie funkcji

Funkcja w języku JavaScript to nazwany blok instrukcji przygotowany do wielokrotnego wykonywania. Zamiast powielać ten sam kod w wielu miejscach skryptu, zamykamy logikę w funkcji i wywołujemy ją zawsze wtedy, gdy zachodzi potrzeba (np. po kliknięciu przycisku przez użytkownika).

Podstawowa składnia deklaracji funkcji składa się ze słowa kluczowego function, unikalnej i znaczącej nazwy, nawiasów okrągłych () oraz ciała funkcji ograniczonego nawiasami klamrowymi { }:

function wyczyscFormularz() {
    // instrukcje do wykonania
}

Dobre praktyki nazewnictwa nakazują stosowanie czasowników opisujących wykonywaną czynność, np. obliczCene, zmienZdjecie, zatwierdzDane. Unikaj nazw jednoliterowych lub niejasnych skrótów, ponieważ kod traci wówczas czytelność.

Samo zadeklarowanie funkcji nie powoduje jej uruchomienia — funkcja wykonuje się dopiero wtedy, gdy zostanie jawnie wywołana w kodzie (np. wyczyscFormularz()) lub przypisana do obsługi zdarzenia w dokumencie HTML.

W poniższym przykładzie funkcja wyczyscFormularz() resetuje wartość pola tekstowego oraz aktualizuje komunikat o stanie. Przetestuj działanie przycisku:

function wyczyscFormularz() {
    const pole = document.getElementById("poleNotatki");
    pole.value = "";

    const stan = document.getElementById("stanPola");
    stan.textContent = "Pole zostało pomyślnie wyczyszczone.";
}

1. Jakie słowo kluczowe rozpoczyna standardową deklarację funkcji w języku JavaScript?

Słowo kluczowe function poprzedzające nazwę definiowanego bloku Słowo kluczowe procedure stosowane do wydzielania fragmentu kodu Słowo kluczowe method używane przy programowaniu proceduralnym Słowo kluczowe define deklarujące nową zmienną z przypisaniem

2. Co należy zrobić, aby kod umieszczony wewnątrz ciała funkcji został faktycznie wykonany?

Wystarczy sama deklaracja funkcji w dowolnym miejscu pliku skryptu Należy jawnie wywołać funkcję po nazwie z nawiasami okrągłymi Konieczne jest zrestartowanie serwera aplikacji po każdej zmianie Trzeba zapisać nazwę funkcji w nagłówku sekcji head w dokumencie

3. Czym charakteryzuje się prawidłowa i czytelna nazwa funkcji w aplikacji internetowej?

Składa się wyłącznie z pojedynczej litery lub losowego ciągu cyfr Zawiera spacje rozdzielające poszczególne wyrazy wewnątrz nazwy Opisuje czasownikiem wykonywaną czynność, na przykład obliczCene Musi być zawsze identyczna z adresem pliku skryptu na serwerze

Parametry i argumenty funkcji

Aby funkcja była uniwersalna i mogła działać na różnych danych wejściowych, wyposażamy ją w parametry. Parametry to nazwane zmienne umieszczone w nawiasach okrągłych w nagłówku funkcji. W momencie wywołania funkcji przekazujemy do nich konkretne wartości, nazywane argumentami.

function wybierzPakiet(nazwa, cena) {
    // nazwa i cena to parametry działające jak lokalne zmienne
}

Dzięki parametrom jedna funkcja może obsługiwać wiele różnych przycisków lub wariantów. Zamiast pisać trzy oddzielne funkcje dla trzech pakietów usług, definiujemy jedną funkcję wybierzPakiet(nazwa, cena), a w znacznikach HTML przekazujemy właściwe wartości w atrybucie zdarzenia:

<button onclick="wybierzPakiet('Podstawowy', 49)">...</button>
<button onclick="wybierzPakiet('Premium', 149)">...</button>

Warto pamiętać, że parametry stają się zmiennymi lokalnymi widocznymi wyłącznie w ciele danej funkcji — po zakończeniu jej działania przestają istnieć i nie kolidują ze zmiennymi w innych częściach programu.

Trzy różne przyciski wywołują tę samą funkcję, przekazując jej różne argumenty.

W edytorze poniżej sprawdź działanie każdego z nich:

function wybierzPakiet(nazwa, cena) {
    const podsumowanie = document.getElementById("podsumowaniePakietu");
    podsumowanie.textContent = "Wybrano: " + nazwa + " — koszt miesięczny: " + cena + " zł";
}

4. Jaka jest relacja między parametrami a argumentami funkcji w programowaniu?

Parametry to liczby zmiennoprzecinkowe, a argumenty to ciągi tekstowe Parametry i argumenty to dokładnie dwa określenia tej samej zmiennej Argumenty definiuje się w ciele, a parametry w sekcji znaczników head Parametry są zmiennymi w nagłówku, a argumenty to wartości przekazane

5. Jaki zasięg widoczności posiadają parametry zadeklarowane w nagłówku funkcji?

Zasięg lokalny, ograniczony wyłącznie do ciała danej funkcji Zasięg globalny, dzięki czemu są widoczne w całym skrypcie Zasięg formularza, automatycznie tworzący nowe pola w HTML Zasięg systemowy, dostępny w konsoli innego użytkownika

6. Dlaczego stosowanie parametrów w funkcjach jest uznawane za dobrą praktykę?

Zwiększa rozmiar wynikowego pliku skryptu zapisanego na dysku Pozwala jednej funkcji wykonywać to samo zadanie dla różnych danych Wymusza na przeglądarce ignorowanie błędów w innych plikach Uniemożliwia użytkownikowi klikanie przycisków w formularzu

Zwracanie wartości za pomocą instrukcji return

Wiele funkcji ma za zadanie wykonać konkretne obliczenie matematyczne lub przekształcenie danych i odesłać gotowy wynik z powrotem do miejsca, w którym funkcja została wywołana. Do tego celu służy słowo kluczowe return.

Gdy interpreter napotka instrukcję return wartosc;:

Oblicza wartość wyrażenia stojącego za słowem return.
Natychmiast przerywa wykonywanie funkcji (wszelkie linie kodu po return w danym bloku zostaną zignorowane).
Przekazuje wyliczoną wartość w miejsce wywołania funkcji.

Dzięki temu możemy przypisać wynik działania funkcji do zmiennej, na przykład:

function obliczPole(a, b) {
    return a * b;
}

const poleDzialki = obliczPole(15, 20); // poleDzialki otrzymuje wartość 300

Rozdzielenie funkcji czysto obliczeniowych (które tylko liczą i zwracają wynik) od funkcji prezentacyjnych (które pobierają dane z kontrolek i wypisują treść na stronie) to podstawowa zasada dobrej architektury kodu — ułatwia testowanie i zapobiega błędom.

Funkcja obliczPoleProstokata(a, b) oblicza pole powierzchni i zwraca wynik, który funkcja główna wyświetla w akapicie wynikowym.

W edytorze poniżej przetestuj działanie kalkulatora:

function obliczPoleProstokata(szerokosc, dlugosc) {
    return szerokosc * dlugosc;
}

function pokazWymiaryDzialki() {
    const a = parseFloat(document.getElementById("bokA").value);
    const b = parseFloat(document.getElementById("bokB").value);

    const pole = obliczPoleProstokata(a, b);
    const obwod = 2 * (a + b);

    const wynik = document.getElementById("wynikWymiarow");
    wynik.textContent = "Pole powierzchni: " + pole + " m², obwód: " + obwod + " m";
}

7. Co powoduje wykonanie instrukcji return wewnątrz ciała funkcji?

Powoduje powtórne wykonanie całego skryptu od pierwszej linii Czyści wartości wszystkich zmiennych zadeklarowanych w programie Zwraca określoną wartość i natychmiast kończy działanie funkcji Otwiera nowe okno przeglądarki ze stroną główną aplikacji

8. Jaka wartość zostanie zwrócona przez funkcję, która nie zawiera instrukcji return?

Liczba całkowita zero reprezentująca brak zgłoszonych błędów Pusty ciąg znaków o zerowej długości w cudzysłowie tekstowym Wartość logiczna false informująca o niezwróceniu wyniku Wartość specjalna undefined oznaczająca brak zdefiniowanej wartości

9. W jaki sposób można przechwycić wynik zwracany przez funkcję z instrukcją return?

Przypisując wywołanie funkcji do zmiennej za pomocą znaku równości Wpisując nazwę funkcji do atrybutu title w nagłówku dokumentu Używając instrukcji import wewnątrz znacznika akapitu wynikowego Pobierając identyfikator funkcji za pomocą metody getElementById

Funkcje i parametry

Definiowanie i wywoływanie funkcji

Parametry i argumenty funkcji

Zwracanie wartości za pomocą instrukcji return

Ćwiczenia