JavaScript - Funkcje

Funkcja to nazwany fragment kodu, który możesz uruchomić w dowolnym momencie i dowolnie wiele razy. Zamiast kopiować te same linijki w kilka miejsc, zapisujesz je raz i nadajesz im nazwę.

Funkcja działa jak przepis kulinarny:

Funkcję tworzysz słowem function. Sama definicja jeszcze nic nie robi, bo przepis trzeba „ugotować”. Funkcję uruchamiasz, pisząc jej nazwę i nawiasy ().

function nazwaFunkcji() {      // definicja: przepis
  // kod funkcji
}

nazwaFunkcji();                // wywołanie: gotowanie

function hej() {
  console.log("Hej");
}
hej;
hej();

Funkcja staje się naprawdę przydatna, gdy może dostać dane. W nawiasie definicji wypisujesz parametry, czyli nazwy, pod którymi funkcja odbierze wartości. Przy wywołaniu podajesz argumenty, czyli konkretne wartości.

To najważniejsza część lekcji. console.log tylko pokazuje wartość w konsoli. return oddaje wynik do miejsca, w którym funkcję wywołano. Ten wynik możesz zapisać do zmiennej, dodać do czegoś albo przekazać dalej.

Wywołaj funkcję

function brutto(netto, vat) {
  return netto * (1 + vat);
}

Krok po kroku: co się dzieje przy wywołaniu

function brutto(netto, vat) {
  let wynik = netto * (1 + vat);
  return wynik;
}
let cena = brutto(100, 0.23);
console.log(cena);

function nazwa(parametr1, parametr2) {
  // obliczenia
  return wynik;
}
let zmienna = nazwa(argument1, argument2);

return natychmiast kończy funkcję, więc kod pod nim już się nie wykona. Dzięki temu możesz zwracać różne wyniki w różnych gałęziach if:

function podwoj(x) {
  console.log(x * 2);
}
let w = podwoj(5);
console.log(w);

Zmienne utworzone wewnątrz funkcji (także jej parametry) są lokalne: istnieją tylko podczas działania funkcji i nie widać ich na zewnątrz. Zmienne utworzone poza funkcjami są globalne, więc funkcja może z nich korzystać.

Wzorce z poprzedniej lekcji (suma, średnia, maksimum) najlepiej zamknąć w funkcjach. Wtedy działają dla każdej tablicy, a jedna funkcja może korzystać z drugiej.

Funkcja może też zwracać true albo false. Takie funkcje nazywamy zwykle od czy… i wstawiamy prosto do if:

Na egzaminie wystarczy klasyczne function. W kodzie z internetu spotkasz jednak dwa inne zapisy. Działają tak samo:

Na INF.03 funkcję prawie zawsze uruchamia kliknięcie przycisku. W HTML-u przycisk dostaje atrybut onclick z wywołaniem funkcji, a funkcja jest zdefiniowana w skrypcie:

<!-- HTML -->
<button onclick="oblicz()">Oblicz</button>

<!-- skrypt -->
<script>
  function oblicz() {
    // 1. pobierz dane z formularza
    // 2. policz wynik
    // 3. pokaż wynik na stronie
  }
</script>

Punkt 2 już umiesz. Punkty 1 i 3, czyli pobieranie danych z pól formularza i wyświetlanie wyniku na stronie, poznasz na następnej lekcji.

W każdym zadaniu napisz funkcję o podanej nazwie. Sprawdzarka sama wywoła ją z różnymi argumentami i porówna wynik, który zwróci return. Pod funkcją możesz dopisywać własne wywołania z console.log, żeby ją przetestować; sprawdzarka ich nie ocenia.

function obliczBrutto(netto) {
  return netto * 1.23;
}

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

function obwod(a, b) {
  return 2 * (a + b);
}

function czyPelnoletni(wiek) {
  return wiek >= 18;
}

function ocena(punkty) {
  if (punkty >= 95) return 6;
  if (punkty >= 85) return 5;
  if (punkty >= 70) return 4;
  if (punkty >= 55) return 3;
  if (punkty >= 40) return 2;
  return 1;
}

function srednia(tab) {
  if (tab.length === 0) {
    return 0;
  }
  let suma = 0;
  for (const x of tab) {
    suma += x;
  }
  return suma / tab.length;
}

function powitanie(imie, godzina) {
  if (godzina < 18) {
    console.log("Dzień dobry, " + imie + "!");
  } else {
    console.log("Dobry wieczór, " + imie + "!");
  }
}

function kosztPaliwa(km, spalanie, cena) {
  let litry = km / 100 * spalanie;
  return litry * cena;
}

function kosztNaOsobe(km, spalanie, cena, osoby) {
  return kosztPaliwa(km, spalanie, cena) / osoby;
}

function przywitaj() {
  console.log("Cześć!");
}
przywitaj();

function pole(a, b) { … }
pole(5, 3);   // a = 5, b = 3

function brutto(n) {
  return n * 1.23;
}
let cena = brutto(100);

function opis(t) {
  if (t < 0) return "mróz";
  if (t < 25) return "ok";
  return "upał";
}

const VAT = 0.23;     // globalna
function f() {
  let x = 1;          // lokalna
}

<button onclick="oblicz()">
function oblicz() { … }

Na następnej lekcji: DOM, czyli pobieranie danych z formularza (getElementById, .value) i wyświetlanie wyniku na stronie (innerHTML).