Obsługa zdarzeń Myszy i klawiatury

workshop: #js-events-ws2.html

Warsztat: Obsługa myszy i klawiatury

Zdarzenia obsługi myszy oraz klawiatury w przeglądarce internetowej

Przygotowanie

Przygotuj katalog 14-events w katalogu domowym.
Posiadasz wiedzę nt. obsługi zdarzeń.
Wywołaj skrypt podpięty do dokumentu HTML w Przeglądarce internetowej

1 Zadania

Włącz tryb pełnoekranowy po najechaniu na czerwoną kropkę ustawioną w prawym górnym rogu okna
Wyświetlaj we wskazanym polu informacje o naciśniętych klawiszach
Zmień rozmiar czcionki w dokumencie po użyciu rolki scrolla (przewijanie)

Zastosuj przygotowany kod:

<style>
  #redBall { position: absolute; top: 0; right: 0; background: red; border-radius: 50%; height: 50px; width: 50px;}
</style>
</head>
<body>
<div id="redBall"></div>
<div id="keysUsed"></div>
...

2 Obsługa myszy

Zdarzenie najechania myszą na czerwoną kulę - włącz tryb pełnoekranowy okna
Zdarzenie opuszczenia myszą obszaru czerwonej kuli - wyłącz tryb pełnoekranowy okna

Aby wyświetlić informacje nt. konfiguracji interpretera przygotuj skrypt:

3 Obsługa klawiatury

Użyj do odczytu kodów klawiszy: https://www.toptal.com/developers/keycode

Wyświetlanie napisów w węźle #keysUsed. Napisz obsługę następujących klawiszy w przedstawiony sposób:

SPACJA - wyświetl napis: Start
ESC - wyświetl napis: Pauza
F - obsługa pełnego ekranu (włącz i wyłącz)
Strzałka w lewo - przesunięcie czerwonego kółka w lewo
Strzałka w prawo - j/w w prawo
Strzałka w górę - j/w w górę
Strzałka w dół - j/w w dół

Zasoby lekcji

Przygotowanie