INF.03: JavaScript na egzaminie. Walidacja formularzy i manipulacja DOM
W
Wiktor Józwiak
Na egzaminie INF.03 JS służy głównie do dwóch rzeczy:
Najbezpieczniej używać document.getElementById().
<input type="text" id="wiek">
<button onclick="sprawdz()">Sprawdź</button>
<p id="wynik"></p>function sprawdz() {
var wiek = document.getElementById("wiek").value; // Pobieramy WARTOŚĆ
var wynikElement = document.
Poradniki TechniczneOktety, binarki, CIDR... Brzmi strasznie? Wytłumaczę Ci adresację IP tak prosto, że policzysz podsieci w pamięci. Obowiązkowe na INF.02.
Poradniki TechniczneBoisz się konsoli? Niepotrzebnie. Opanuj zarządzanie użytkownikami, grupami i uprawnieniami (chmod/chown) w Linuxie. To pewne punkty na egzaminie INF.02.
Poradniki TechniczneŚrubokręt w dłoń! Procedura montażu, kody błędów POST i BHP w pracowni. Zobacz, jak nie spalić płyty głównej na egzaminie.
Poradniki TechniczneActive Directory to zmora wielu zdających. Zobacz, jak promować serwer do kontrolera domeny, tworzyć użytkowników i zarządzać politykami GPO. Gotowe solucje.
Sprawdź, czy wiek > 18.
if (wiek >= 18) {
wynikElement.innerHTML = "Jesteś pełnoletni";
wynikElement.style.color = "green";
} else {
wynikElement.innerHTML = "Jesteś niepełnoletni";
wynikElement.style.color = "red";
}Napisz funkcję JS, która pobiera dwie liczby z inputów (a, b) i wyświetla ich sumę w divie o id suma.
Pamiętaj o rzutowaniu typów! parseInt(a) + parseInt(b). Inaczej JS połączy napisy (np. "2" + "2" = "22").
Klasyk egzaminacyjny.
var haslo1 = document.getElementById("haslo1").value;
var haslo2 = document.getElementById("haslo2").value;
if (haslo1 != haslo2) {
alert("Hasła są różne!");
return false; // Blokuje wysłanie formularza
}Na nowszych arkuszach (2024/2025) coraz częściej pojawia się wymóg sprawdzenia "siły hasła" lub formatu kodu pocztowego. Robimy to metodą .test().
Wzorce (Pewniaki):
^[0-9]{2}-[0-9]{3}$ (czyli: 2 cyfry, myślnik, 3 cyfry. ^ to początek, $ to koniec).[0-9]^@ (czy zawiera małpę na początku? Nie. /@/ sprawdza czy w ogóle zawiera).var kodPocztowy = document.getElementById("kod").value;
var wzorzec = /^[0-9]{2}-[0-9]{3}$/;
if (!wzorzec.test(kodPocztowy)) {
alert("Zły format kodu pocztowego!");
}Nie pasuje
Tekst nie pasuje do wzorca.
Tutaj sprawdzamy właściwość .checked, a nie .value.
var regulamin = document.getElementById("regulamin");
if (!regulamin.checked) {
alert("Musisz zaakceptować regulamin!");
}Zamiast onclick w HTML, lepiej używać addEventListener w JS (wyższa jakość kodu, ale na egzaminie onclick też przejdzie).
document.getElementById("przycisk").addEventListener("click", function() {
console.log("Kliknięto!");
});Wiesz, czym się różni innerHTML od textContent? Sprawdź, czy rozumiesz, jak JS widzi Twoją stronę.
JavaScript na INF.03 to nie jest pisanie Reacta czy Angulara. To proste operacje na tekście i liczbach. Pamiętaj: value dla inputów, innerHTML dla divów/paragrafów.