Część arkuszy INF.03 zamiast skryptu PHP ma skrypt JavaScript. Zadanie jest zwykle podobne: użytkownik wpisuje dane do formularza, klika przycisk, a skrypt coś oblicza i wypisuje wynik albo zmienia wygląd strony. Wystarczy kilka elementów języka, żeby rozwiązać większość takich poleceń.
Wzór: przycisk wywołuje funkcję
<input type="number" id="liczba" value="5">
<button onclick="oblicz()">Oblicz kwadrat</button>
<p id="wynik"></p>
<script>
function oblicz() {
let x = Number(document.getElementById('liczba').value);
document.getElementById('wynik').innerHTML = 'Kwadrat liczby to: ' + (x * x);
}
</script>Cztery kroki, które powtarzają się w niemal każdym arkuszu:
- Przycisk wywołuje funkcję:
onclick="oblicz()". - Funkcja pobiera wartość z pola:
document.getElementById('liczba').value. - Zamienia tekst na liczbę (
Number(...)alboparseInt(...)) i liczy. - Wypisuje wynik w elemencie strony:
innerHTML.
value zawsze zwraca tekst. Bez Number() działanie '2' + '3' da '23', a nie 5.
Warunki: różny wynik dla różnych danych
function sprawdz() {
let wiek = Number(document.getElementById('wiek').value);
let komunikat;
if (wiek >= 18) {
komunikat = 'Bilet normalny';
} else if (wiek >= 7) {
komunikat = 'Bilet ulgowy';
} else {
komunikat = 'Wstęp bezpłatny';
}
document.getElementById('wynik').innerHTML = komunikat;
}Pola wyboru, listy i przyciski opcji
// pole wyboru (checkbox): true albo false
let zgoda = document.getElementById('zgoda').checked;
// lista rozwijana (select): wartość wybranej opcji
let rozmiar = document.getElementById('rozmiar').value;
// przyciski opcji (radio): który jest zaznaczony
let dostawa = document.querySelector('input[name="dostawa"]:checked').value;Zmiana wyglądu i obrazów
Arkusze często każą zmienić kolor, ukryć blok albo podmienić obraz po kliknięciu:
<p id="tekst">Kliknij przycisk, żeby zmienić mój wygląd.</p>
<button onclick="zmien()">Zmień</button>
<script>
function zmien() {
let el = document.getElementById('tekst');
el.style.color = 'white';
el.style.backgroundColor = 'SteelBlue';
el.style.padding = '10px';
}
</script>document.getElementById('foto').src = 'zdjecie2.jpg'; // podmiana obrazu
document.getElementById('blok').style.display = 'none'; // ukrycie bloku
document.getElementById('blok').style.display = 'block'; // pokazanie blokuW JavaScripcie nazwy z myślnikiem zapisuje się razem, z wielką literą: background-color → backgroundColor, font-size → fontSize.
Pętla: powtarzanie i liczenie
let suma = 0;
for (let i = 1; i <= 10; i++) {
suma += i;
}
document.getElementById('wynik').innerHTML = 'Suma: ' + suma;Najczęstsze błędy w skryptach JavaScript
| objaw | przyczyna |
|---|---|
| po kliknięciu nic się nie dzieje | literówka w nazwie funkcji albo w id – wielkość liter ma znaczenie |
wynik typu 23 zamiast 5 | brak zamiany tekstu na liczbę (Number) |
Cannot set properties of null | getElementById nie znalazł elementu – zła nazwa id |
wynik NaN | pole było puste albo zawiera tekst, którego nie da się zamienić na liczbę |
| skrypt nie działa, a kod wygląda dobrze | błąd w innym miejscu – otwórz konsolę przeglądarki (F12) i przeczytaj komunikat |
Narzędzia deweloperskie przeglądarki otwiera klawisz F12. Zakładka Console pokazuje dokładnie, w której linii jest błąd.
Wszystkie polecenia z tego poradnika znajdziesz z przykładami w słowniku składni JavaScript. Gdy arkusz ma skrypt PHP zamiast JavaScriptu, przeczytaj poradnik PHP i mysqli na INF.03.