Rozgrzewka: funkcje z poprzedniej lekcji

1. Od jakiego słowa zaczyna się definicja własnej funkcji w JavaScript?
2. Co wpisujecie w nawiasy okrągłe zaraz po nazwie funkcji?
3. Do czego służy słowo return wewnątrz funkcji?

Zanim napiszecie kod: co wchodzi, co robi, co wychodzi

Zanim zaczniecie pisać funkcję, warto rozpisać ją na trzy pytania: co funkcja dostaje (parametry), co z tym robi (kod w środku) i co po sobie zostawia (wynik). To ten sam schemat „maszynki”, co przy funkcjach w PHP.

onclick: przycisk HTML wywołujący funkcję

<button onclick="add()">Dodaj</button>

Od pól formularza do wyniku w konsoli

page.html:

Pierwsza liczba: <input type="text" id="number1">
Druga liczba: <input type="text" id="number2">
<button onclick="add()">Dodaj</button>

script.js:

function add() {
  const number1 = parseFloat(document.getElementById("number1").value);
  const number2 = parseFloat(document.getElementById("number2").value);
  const total = number1 + number2;
  console.log(total);
}

document.getElementById("number1") znajduje pole po jego id i pobiera to, co ktoś w nie wpisał (.value). parseFloat zamienia tekst z pola na liczbę - bez tego "3" + "4" dałoby tekst "34", nie liczbę 7.

Ciekawostka z MDN: znak + w JavaScripcie potrafi sklejać teksty, nie tylko dodawać liczby. Gdy choć jedna strona jest tekstem, druga też zamienia się w tekst - dlatego "2" + 2 daje tekst "22", a nie liczbę 4.

Wartość bezwzględna: liczba ujemna staje się dodatnia

function absoluteValue(number) {
  if (number < 0) {
    number = number * -1;
  }
  return number;
}

Jedna definicja funkcji, dwa przyciski z różnym argumentem: <button onclick="absoluteValue(-7)"> i <button onclick="absoluteValue(7)">. Dla liczby ujemnej funkcja ją odwraca, dla dodatniej zostawia bez zmian - w obu przypadkach wynik to 7. To się nazywa wartość bezwzględna.

Tak pytają na egzaminie

Podaj pierwszą liczbę: <input type="text" name="liczba1" />
Podaj drugą liczbę: <input type="text" name="liczba2" />
...
<script type=text/javascript>
function dodaj() {
  // ta funkcja realizuje dodawanie
  // i podaje jego wynik
}
</script>

function fun1(f) {
  if (f < 0) f = f * (-1);
  return f
}

Ćwiczenie: przycisk „Dodaj”

1. Otwórz page.html z poprzednich lekcji (w folderze swojego projektu).
2. Dodaj dwa pola tekstowe o id="number1" i id="number2" oraz przycisk <button onclick="add()">Dodaj</button>.
3. W script.js napisz function add(), która odczyta oba pola (document.getElementById(...).value, zamienione przez parseFloat) i wypisze ich sumę w konsoli (console.log).
4. Sprawdźcie w przeglądarce (F12, konsola): wpiszcie dwie liczby, kliknijcie „Dodaj”, sprawdźcie wynik.
5. Dla chętnych w domu: dodaj drugi przycisk „Odejmij” i funkcję subtract() działającą na tych samych polach.

A jak to wygląda w produkcji?