JavaScript w przeglądarce · Moduł 04

Funkcje i parametry

Deklarowanie funkcji, przekazywanie argumentów, zwracanie wartości return i podział programu na logiczne podzadania.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minDefiniowanie i wywoływanie funkcji Podstawowa składnia deklaracji funkcji składa się ze słowa kluczowego function…
12 minParametry i argumenty funkcji Dzięki parametrom jedna funkcja może obsługiwać wiele różnych przycisków lub wariantów.
12 minZwracanie wartości za pomocą instrukcji return Oblicza wartość wyrażenia stojącego za słowem return .
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

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…

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…
Dobre praktyki nazewnictwa nakazują stosowanie czasowników opisujących wykonywaną czynność, np.
obliczCene , zmienZdjecie , zatwierdzDane .
Samo zadeklarowanie funkcji nie powoduje jej uruchomienia — funkcja wykonuje się dopiero wtedy, gdy zostanie jawnie wywołana w kodzie (np.

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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

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

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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

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

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

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

Atom 2 z 3 · ~12 min

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.

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 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…
Trzy różne przyciski wywołują tę samą funkcję, przekazując jej różne argumenty.

Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

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

Atom 3 z 3 · ~12 min

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 .

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.
Gdy interpreter napotka instrukcję return wartosc; :

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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";
}

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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";
}

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

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

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

Funkcja w języku JavaScript to nazwany blok instrukcji przygotowany do wielokrotnego wykonywania.
Dzięki parametrom jedna funkcja może obsługiwać wiele różnych przycisków lub wariantów.
Rozdzielenie funkcji czysto obliczeniowych (które tylko liczą i zwracają wynik) od funkcji prezentacyjnych (które pobierają dane z kontrolek i wypisują treść…

Bilet wyjściowy: W jaki sposób można przechwycić wynik zwracany przez funkcję z instrukcją return?
Odpowiedź: a) Przypisując wywołanie funkcji do zmiennej za pomocą znaku równości