Funkcje i Zdarzenia (Events)

Kod JavaScript napisany po prostu w pliku uruchomi się od razu w momencie załadowania strony. Zwykle tego nie chcemy. Chcemy, aby kod uruchomił się dopiero, gdy uczeń kliknie przycisk, prawda? Do tego służą Funkcje i Zdarzenia.

Czym jest funkcja?

Funkcja to blok kodu, nazwany przez nas, który czeka w ukryciu, dopóki ktoś go nie "wezwie".

function powitajUzytkownika(imie) {
    let pelnePowitanie = "Witaj na stronie, " + imie + "!";
    alert(pelnePowitanie);
}

// Funkcja sobie "śpi". Aby się wykonała, wywołujemy ją:
powitajUzytkownika("Oskar");

Return - Zwracanie wyniku

Często na arkuszach egzaminacyjnych piszesz funkcję, która musi coś obliczyć (np. koszt farby do malowania), a ten wynik chcesz przekazać dalej. Używamy do tego słowa return.

function obliczZysk(koszt, przychod) {
    return przychod - koszt;
    // Kod poniżej słowa return NIGDY się nie wykona!
}

let zysk = obliczZysk(100, 500); 

Zdarzenia (Events) na stronie WWW

Przeglądarka "nasłuchuje" wszystkiego, co robi użytkownik.

• onclick – Ktoś kliknął.
• onmouseover – Ktoś najechał myszką.
• onchange – Ktoś zmienił wartość wpisaną do pola formularza.
• onsubmit – Ktoś wysłał formularz.

Jak to spiąć z HTML?

Najprostszy (choć z perspektywy supernowoczesnych praktyk "brzydszy") sposób, notorycznie widywany w rozwiązaniach CKE:

<!-- HTML: -->
<button type="button" onclick="obliczCene()">Kliknij by obliczyć</button>

<!-- W pliku skrypt.js: -->
<script>
    function obliczCene() {
        console.log("Liczy się...");
    }
</script>

Wskazówka na egzamin: Pamiętaj by do przycisków, które odpalają Twój kod dodawać type="button". Jeśli pominiesz ten atrybut w formularzu, przeglądarka domyślnie potraktuje ten przycisk jako type="submit", co spowoduje wysłanie formularza i ODŚWIEŻENIE CAŁEJ STRONY! Wyzerujesz wtedy wszystko, co obliczył Twój JavaScript, a egzaminator nie dostrzeże działania skryptu.