Zdarzenia klawiatury

Zdarzenia klawiatury reagują na interakcje użytkownika z klawiszami. Dzięki nim możemy np. wykrywać kiedy klawisz został naciśnięty, przytrzymany lub puszczony. Są często używane w formularzach, wyszukiwarkach, grach i interaktywnych aplikacjach.

1. onkeydown - reakcja przy naciśnięciu klawisza

Zdarzenie onkeydown wywołuje się w momencie wciśnięcia klawisza, jeszcze zanim znak pojawi się w polu tekstowym.
Działa też dla klawiszy specjalnych, takich jak: Shift, Alt, Enter, Backspace, Escape.

Najczęściej używany do:

• blokowania klawiszy,

• wykrywania skrótów (np. Ctrl + S),

• reagowania natychmiast po naciśnięciu klawisza.

Przykład 1 - wyświetlanie kodu naciśniętego klawisza

<p>Naciśnij dowolny klawisz:</p>
<p id="info">...</p>

<script>
document.onkeydown = function(event) {
  document.getElementById("info").textContent =
    "Naciśnięto klawisz: " + event.key + " (kod: " + event.keyCode + ")";
};
</script>

Wyjaśnienie:

• document.onkeydown - nasłuchuje naciśnięcia klawisza w całym dokumencie.

• event.key - zwraca nazwę klawisza (np. "a", "Enter").

• event.keyCode - zwraca kod numeryczny klawisza.

Przykład 2 - blokowanie klawisza Backspace

<p>Spróbuj nacisnąć Backspace:</p>

<script>
document.onkeydown = function(e) {
  if (e.key === "Backspace") {
    e.preventDefault();
    alert("Backspace został zablokowany!");
  }
};
</script>

Wyjaśnienie:

• e.preventDefault() zatrzymuje domyślne działanie klawisza.

• Dzięki temu Backspace nie cofnie strony ani nie usunie tekstu.

2. onkeypress - reakcja na wpisywanie znaków

Zdarzenie onkeypress wywołuje się tylko przy wpisywaniu znaków, czyli działa dla liter, cyfr i symboli.
Nie działa dla klawiszy typu: Shift, Ctrl, Alt, Escape, Backspace.

Często stosowany w:

• walidacji podczas pisania,

• ograniczaniu dozwolonych znaków (np. tylko liczby),

• podglądzie wpisywanego tekstu.

Przykład 1 - pozwól wpisać tylko cyfry

<input type="text" onkeypress="return tylkoCyfry(event)">
<p>Dozwolone tylko cyfry 0–9</p>

<script>
function tylkoCyfry(e) {
  const kod = e.key;
  if (!/[0-9]/.test(kod)) {
    return false; // blokuje wpisanie znaku
  }
}
</script>

Wyjaśnienie:

• onkeypress reaguje na znaki, które mają być wprowadzone do pola.

• Wyrażenie regularne /[0-9]/ sprawdza, czy znak jest cyfrą.

• return false blokuje wpisanie innych znaków.

Przykład 2 - pokazywanie ostatnio wpisanego znaku

<input type="text" onkeypress="pokazZnak(event)">
<p id="wynik">Wpisz coś...</p>

<script>
function pokazZnak(e) {
  document.getElementById("wynik").textContent =
    "Wpisany znak: " + e.key;
}
</script>

Wyjaśnienie:

• e.key zwraca dokładnie ten znak, który użytkownik wpisał w polu.

3. onkeyup - reakcja po puszczeniu klawisza

Zdarzenie onkeyup uruchamia się po zwolnieniu klawisza.
Oznacza to, że tekst w polu input jest już zaktualizowany, dlatego często wykorzystuje się je do:

• wyszukiwania "na żywo",

• liczenia znaków,

• auto-podpowiedzi,

• dynamicznej walidacji.

Przykład 1 - licznik znaków

<input type="text" id="pole" onkeyup="liczZnaki()">
<p id="info">Liczba znaków: 0</p>

<script>
function liczZnaki() {
  const tekst = document.getElementById("pole").value;
  document.getElementById("info").textContent =
    "Liczba znaków: " + tekst.length;
}
</script>

Wyjaśnienie:

• onkeyup działa po puszczeniu klawisza, więc wartość inputa jest aktualna.

• Idealne do dynamicznej walidacji tekstu.

Przykład 2 - dynamiczne wyszukiwanie

<input type="text" id="search" onkeyup="szukaj()">
<p id="wynik"></p>

<script>
function szukaj() {
  const tekst = document.getElementById("search").value.toLowerCase();

  if (tekst === "java") {
    wynik.textContent = "Znaleziono: Java";
  } else if (tekst === "javascript") {
    wynik.textContent = "Znaleziono: JavaScript";
  } else {
    wynik.textContent = "Brak wyników";
  }
}
</script>

Wyjaśnienie:

• Wpisywany tekst jest przetwarzany natychmiast po jego dodaniu.

• To podstawowy mechanizm działania wyszukiwarek w aplikacjach internetowych.

Podsumowanie - Zdarzenia klawiatury

JS - Zdarzenia obiektów

Zdarzenia obiektów reagują na działania związane z ładowaniem strony, zmianą rozmiaru, przewijaniem oraz uzyskiwaniem lub traceniem fokusu przez elementy. Pozwalają tworzyć dynamiczne, interaktywne strony oraz kontrolować zachowanie dokumentu i okna przeglądarki.

1. onload - zdarzenie po załadowaniu strony

Zdarzenie onload uruchamia się gdy cała strona zostanie w pełni załadowana, wraz ze wszystkimi obrazkami, skryptami i arkuszami stylów.

Najczęstsze zastosowania:

• uruchamianie skryptu dopiero po załadowaniu strony,

• inicjalizacja danych,

• ustawienie wartości w formularzach,

• załadowanie animacji lub elementów interfejsu.

Przykład 1 - Wyświetlenie komunikatu po załadowaniu strony

<body onload="stronaGotowa()">

<h2>Witaj na stronie!</h2>
<p id="info"></p>

<script>
function stronaGotowa() {
  document.getElementById("info").textContent =
    "Strona została w pełni załadowana!";
}
</script>

</body>

Wyjaśnienie:
onload działa dopiero wtedy, gdy cała zawartość strony jest już gotowa do użycia.

Przykład 2 - Ukrywanie preloadera

<div id="loader">Ładowanie...</div>
<div id="content" style="display:none;">Treść strony</div>

<script>
window.onload = function() {
  loader.style.display = "none";
  content.style.display = "block";
};
</script>

2. onscroll - wykrywanie przewijania strony

Zdarzenie onscroll uruchamia się za każdym razem, gdy użytkownik przewija stronę lub dany element.

Najczęstsze zastosowania:

• animacje podczas scrollowania,

• przyklejane menu (sticky navbar),

• wykrycie końca strony (infinite scroll),

• licznik postępu scrollowania.

Przykład 1 - Pokazywanie aktualnej pozycji przewinięcia

<p>Przewiń stronę w dół.</p>
<p id="info"></p>

<script>
window.onscroll = function() {
  document.getElementById("info").textContent =
    "Pozycja przewinięcia: " + window.scrollY + " px";
};
</script>

Przykład 2 - Pokazywanie przycisku "Do góry" po przewinięciu

<button id="topBtn" onclick="scrollToTop()" style="display:none;">
  Do góry
</button>

<script>
window.onscroll = function() {
  topBtn.style.display = window.scrollY > 200 ? "block" : "none";
};

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: "smooth" });
}
</script>

3. onresize - zmiana rozmiaru okna

Zdarzenie onresize uruchamia się za każdym razem, gdy użytkownik zmienia rozmiar okna przeglądarki.

Najczęstsze zastosowania:

• dopasowywanie elementów do zmiany ekranu,

• dynamiczne układy responsive,

• reagowanie na zmianę orientacji (mobile),

• optymalizacja widoku przy zmianie rozdzielczości.

Przykład 1 - Wyświetlanie aktualnych wymiarów okna

<p id="wynik">Zmień rozmiar okna...</p>

<script>
window.onresize = function() {
  wynik.textContent =
    "Szerokość: " + window.innerWidth +
    " px, wysokość: " + window.innerHeight + " px";
};
</script>

Przykład 2 - Zmiana wielkości elementu przy resize

<div id="box" style="width:100px; height:100px; background:lightblue;"></div>

<script>
window.onresize = function() {
  const szer = window.innerWidth / 10;
  box.style.width = szer + "px";
};
</script>

4. onfocusin - element uzyskuje fokus

Zdarzenie onfocusin wywołuje się kiedy element dostaje fokus - np. input zostaje aktywny.

Najczęściej używane do:

• podświetlania aktywnych pól,

• pokazywania podpowiedzi,

• dynamicznej walidacji.

Przykład 1 - Podświetlanie pola po kliknięciu

<input type="text" id="pole" onfocusin="podswietl()">

<script>
function podswietl() {
  pole.style.border = "2px solid blue";
}
</script>

Przykład 2 - Pokazywanie wskazówki

<input type="text" id="login" onfocusin="wskazowka()">
<p id="info"></p>

<script>
function wskazowka() {
  info.textContent = "Wpisz nazwę użytkownika.";
}
</script>

5. onfocusout - element traci fokus

Zdarzenie onfocusout działa kiedy użytkownik wyjdzie z elementu, np. kliknie poza input lub przejdzie do innego pola.

Najczęściej używane do:

• sprawdzania poprawności danych,

• ukrywania podpowiedzi,

• przywracania domyślnego wyglądu.

Przykład 1 - Sprawdzenie, czy pole nie jest puste

<input type="text" id="email" onfocusout="sprawdzEmail()">
<p id="info"></p>

<script>
function sprawdzEmail() {
  if (email.value === "") {
    info.textContent = "Pole nie może być puste!";
  } else {
    info.textContent = "";
  }
}
</script>

Przykład 2 - Usuwanie podświetlenia po wyjściu

<input type="text" id="pole" 
       onfocusin="pole.style.background='lightyellow';"
       onfocusout="pole.style.background='white';">

Podsumowanie - Zdarzenia obiektów

Metody i pola obiektu String

Obiekt String w JavaScript pozwala wykonywać różne operacje na tekstach: wyszukiwać fragmenty, zmieniać je, pobierać długość tekstu, zamieniać wielkość liter i wiele więcej. Metody te są bardzo ważne podczas pracy z formularzami, walidacją danych, filtrowaniem wyników oraz analizą tekstu.

1. length - długość tekstu

length to właściwość (nie metoda), która zwraca liczbę znaków w danym tekście.

Najczęściej używana do:

• walidacji długości haseł i loginów,

• liczenia znaków w polach tekstowych,

• sprawdzania, czy tekst jest pusty.

Przykład - sprawdzanie długości tekstu

<input type="text" id="pole" onkeyup="sprawdz()">
<p id="info">Liczba znaków: 0</p>

<script>
function sprawdz() {
  const tekst = pole.value;
  info.textContent = "Liczba znaków: " + tekst.length;
}
</script>

2. indexOf() - wyszukiwanie fragmentu tekstu

Metoda indexOf() zwraca pozycję pierwszego wystąpienia szukanego tekstu lub -1, jeśli nie został znaleziony.

Najczęściej używana do:

• sprawdzania, czy tekst zawiera dane słowo,

• wyszukiwania fraz,

• filtrowania wyników.

Przykład - sprawdzanie, czy tekst zawiera słowo

<input type="text" id="pole" placeholder="Wpisz tekst">
<button onclick="sprawdz()">Szukaj 'ala'</button>
<p id="wynik"></p>

<script>
function sprawdz() {
  const tekst = pole.value.toLowerCase();
  const pozycja = tekst.indexOf("ala");

  wynik.textContent = pozycja >= 0
    ? "Znaleziono na pozycji: " + pozycja
    : "Nie znaleziono";
}
</script>

3. search() - wyszukuje tekst za pomocą wyrażenia regularnego

search() działa podobnie do indexOf(), ale dodatkowo pozwala szukać za pomocą wyrażeń regularnych.

Najczęściej stosowana gdy:

• chcemy szukać wzorców (np. litery, cyfry, słowa),

• filtrujemy tekst wg reguł,

• wykrywamy pierwsze wystąpienie wzorca.

Przykład - wyszukiwanie cyfry w tekście

<input type="text" id="pole" placeholder="Wpisz tekst">
<button onclick="szukaj()">Szukaj cyfry</button>
<p id="wynik"></p>

<script>
function szukaj() {
  const tekst = pole.value;
  const pozycja = tekst.search(/[0-9]/);

  wynik.textContent = pozycja >= 0
    ? "Znaleziono cyfrę na pozycji: " + pozycja
    : "Brak cyfr w tekście";
}
</script>

4. substr() - wycinanie fragmentu tekstu

substr(start, długość) zwraca fragment tekstu rozpoczynający się w start i o określonej długości.

Zastosowanie:

• wycinanie wyrazów,

• pobieranie części tekstu,

• skracanie opisów.

Przykład - skracanie długiego tekstu

<p id="tekst">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

<button onclick="skroc()">Skróć do 20 znaków</button>

<script>
function skroc() {
  const t = tekst.textContent;
  tekst.textContent = t.substr(0, 20) + "...";
}
</script>

5. replace() - zamiana fragmentu tekstu

replace() pozwala zamienić pierwszy znaleziony fragment tekstu lub - przy użyciu wyrażeń regularnych - wszystkie wystąpienia.

Zastosowanie:

• zamiana słów,

• ukrywanie danych (np. maskowanie telefonu),

• czyszczenie tekstu.

Przykład - zamiana słowa w tekście

<p id="tekst">Koty są super. Lubię koty.</p>
<button onclick="zamien()">Zamień 'koty' na 'psy'</button>

<script>
function zamien() {
  const t = tekst.textContent;
  tekst.textContent = t.replace(/koty/g, "psy");
}
</script>

6. toUpperCase() - zamiana na wielkie litery

Metoda zmienia cały tekst na wielkie litery.

Zastosowanie:

• standaryzacja tekstu,

• porównywanie słów,

• przetwarzanie formularzy.

Przykład - zamiana wpisanego tekstu na wielkie litery

<input type="text" id="pole" onkeyup="duze()">
<p id="wynik"></p>

<script>
function duze() {
  wynik.textContent = pole.value.toUpperCase();
}
</script>

7. toLowerCase() - zamiana na małe litery

Metoda zamienia cały tekst na małe litery.

Zastosowanie:

• normalizacja danych,

• porównywanie fraz,

• wyszukiwanie bez różnicy wielkości liter.

Przykład - porównywanie tekstu bez względu na wielkość liter

<input type="text" id="pole" placeholder="Wpisz 'JavaScript'">
<button onclick="sprawdz()">Sprawdź</button>
<p id="wynik"></p>

<script>
function sprawdz() {
  const tekst = pole.value.toLowerCase();

  wynik.textContent =
    tekst === "javascript"
      ? "Zgadza się!"
      : "Spróbuj ponownie.";
}
</script>

Podsumowanie - metody i właściwości String

Zadania - JS - Zdarzenia klawiatury

onkeydown 1 - Zmiana koloru tła przy wciśnięciu klawisza

Napisz skrypt, który zmieni kolor tła strony w zależności od wciśniętego klawisza.

<p>Naciśnij klawisz R, G lub B, aby zmienić kolor tła</p>

Polecenia:

• Ustaw zdarzenie onkeydown na całym dokumencie.

• W funkcji sprawdź event.key:

  • "R" - tło czerwone,

  • "G" - tło zielone,

  • "B" - tło niebieskie.

• Użyj document.body.style.backgroundColor.

Efekt:
Po wciśnięciu klawisza R, G lub B zmienia się kolor tła strony.

onkeydown 2 - Wciśnięcie klawisza powoduje dodanie elementu do listy

Napisz skrypt, który po naciśnięciu dowolnego klawisza doda jego nazwę do listy na stronie.

<ul id="lista"></ul>

Polecenia:

• Ustaw onkeydown na całym dokumencie.

• Pobierz element <ul id="lista">.

• W funkcji utwórz <li> z nazwą wciśniętego klawisza i dodaj go do listy za pomocą appendChild().

Efekt:
Każde wciśnięcie klawisza powoduje dodanie nowego elementu z jego nazwą do listy.

onkeypress 1 - Liczenie wciśnięć klawiszy

Napisz skrypt, który policzy, ile klawiszy wciśnięto w polu tekstowym.

<input type="text" id="tekst" placeholder="Pisząc, zwiększasz licznik">
<p id="licznik">0</p>

Polecenia:

• Pobierz input i element licznika.

• Ustaw na input zdarzenie onkeypress.

• W funkcji zwiększaj licznik o 1 i wyświetlaj jego wartość.

Efekt:
Za każdym wciśnięciem klawisza licznik rośnie.

onkeypress 2 - Pokazywanie kodu znaku

Napisz skrypt, który wyświetli kod ASCII znaku wpisanego w pole tekstowe.

<input type="text" id="pole" placeholder="Wpisz znak">
<p id="kod"></p>

Polecenia:

• Pobierz input i <p id="kod">.

• Ustaw zdarzenie onkeypress.

• W funkcji użyj event.charCode, aby odczytać kod znaku.

• Wyświetl go w elemencie <p>.

Efekt:
Po wpisaniu znaku wyświetla się jego kod ASCII.

onkeyup 1 - Zamiana tekstu na wielkie litery w czasie rzeczywistym

Napisz skrypt, który automatycznie zamienia wpisywany tekst w polu input na wielkie litery.

<input type="text" id="tekst">

Polecenia:

• Pobierz input.

• Ustaw onkeyup.

• W funkcji przypisz do value same wielkie litery (input.value = input.value.toUpperCase()).

Efekt:
Tekst w polu input jest automatycznie zamieniany na wielkie litery podczas wpisywania.

onkeyup 2 - Sprawdzenie długości hasła

Napisz skrypt, który sprawdzi długość wpisanego hasła i wyświetli komunikat.

<input type="password" id="haslo" placeholder="Wpisz hasło">
<p id="komunikat"></p>

Polecenia:

• Pobierz input i element komunikatu.

• Ustaw zdarzenie onkeyup na polu hasła.

• W funkcji:

  • sprawdź długość wpisanego tekstu,

  • jeśli hasło krótsze niż 6 znaków - wypisz "Hasło za krótkie",

  • w przeciwnym razie "Hasło OK".

Efekt:
Użytkownik na bieżąco widzi, czy hasło spełnia minimalną długość.

Zadania - JS - Zdarzenia obiektów

onload 1 - Ustawienie tekstu po załadowaniu strony

Napisz skrypt, który po załadowaniu strony wpisze tekst do paragrafu.

<body onload="">
    <p id="info"></p>
</body>

Polecenia:

• Pobierz element <p id="info">.

• W wydarzeniu onload ustaw mu tekst, np. "Strona została załadowana".

Efekt:
Po wejściu na stronę w paragrafie pojawia się komunikat.

onload 2 - Wyświetlenie alertu po załadowaniu strony

Napisz skrypt, który po załadowaniu strony wyświetli alert.

<body onload="">

Polecenia:

• W wydarzeniu onload wywołaj alert("Witaj!").

Efekt:
Po wejściu na stronę pojawia się okno dialogowe.

onscroll 1 - Liczenie przewiniętych pikseli

Napisz skrypt, który podczas przewijania pokazuje liczbę przewiniętych pikseli.

<body onscroll="">
    <p id="wynik"></p>
</body>

Polecenia:

• Pobierz paragraf <p id="wynik">.

• W wydarzeniu onscroll ustaw jego tekst na window.scrollY.

Efekt:
Podczas przewijania paragraf pokazuje aktualną liczbę pikseli scrolla.

onscroll 2 - Pokazywanie napisu po przewinięciu

Napisz skrypt, który pokazuje napis dopiero po przewinięciu 200 pikseli.

<body onscroll="">
    <p id="komunikat"></p>
</body>

Polecenia:

• Pobierz <p id="komunikat">.

• W wydarzeniu onscroll:

  • jeśli scrollY > 200, wpisz tekst "Jesteś dalej!"

  • w przeciwnym razie usuń tekst.

Efekt:
Napis pojawia się dopiero po przewinięciu strony w dół.

onresize 1 - Wyświetlanie szerokości okna

Napisz skrypt, który przy zmianie rozmiaru okna wyświetla jego szerokość.

<body onresize="">
    <p id="szerokosc"></p>
</body>

Polecenia:

• Pobierz <p id="szerokosc">.

• W wydarzeniu onresize wpisz do paragrafu window.innerWidth.

Efekt:
Przy zmianie szerokości okna paragraf aktualizuje liczbę.

onresize 2 - Zmiana koloru tekstu zależnie od szerokości

Napisz skrypt, który zmienia kolor tekstu nagłówka, gdy okno jest wąskie.

<body onresize="">
    <h1 id="naglowek">Nagłówek</h1>
</body>

Polecenia:

• Pobierz <h1 id="naglowek">.

• W wydarzeniu onresize:

  • jeśli szerokość < 500, ustaw kolor na czerwony,

  • w przeciwnym razie ustaw czarny.

Efekt:
Nagłówek zmienia kolor, gdy okno jest wystarczająco małe.

onfocusin 1 - Pokazywanie tekstu "piszesz…"

Napisz skrypt, który po wejściu w pole tekstowe pokazuje informację "Piszesz...".

<input type="text" id="pole">
<p id="info"></p>

Polecenia:

• Pobierz input i paragraf.

• Ustaw onfocusin na input.

• W funkcji wpisz do paragrafu "Piszesz...".

Efekt:
Po kliknięciu w pole pojawia się komunikat.

onfocusin 2 - Zmiana koloru obramowania

Napisz skrypt, który po kliknięciu w pole podświetli je na żółto.

<input type="text" id="pole">

Polecenia:

• Pobierz input.

• W onfocusin ustaw style.border = "2px solid yellow".

Efekt:
Kliknięcie w pole zmienia jego obramowanie.

onfocusout 1 - Sprawdzanie, czy pole nie jest puste

Napisz skrypt, który po opuszczeniu pola powie, czy coś wpisano.

<input type="text" id="pole" onfocusout="">
<p id="wynik"></p>

Polecenia:

• Pobierz input i paragraf.

• W onfocusout:

  • jeśli input pusty - wpisz "Pole jest puste",

  • w przeciwnym razie wpisz "OK".

Efekt:
Wyświetla komunikat zależnie od tego, czy coś zostało wpisane.

onfocusout 2 - Pokazywanie długości tekstu po wyjściu z pola

Napisz skrypt, który po wyjściu z pola pokaże, ile wpisano znaków.

<input type="text" id="tekst" onfocusout="">
<p id="info"></p>

Polecenia:

• Pobierz input i paragraf.

• W wydarzeniu onfocusout ustaw w paragrafie input.value.length.

Efekt:
Po opuszczeniu pola pokazuje liczbę wpisanych znaków.