Obsługa klawiatury w JavaScript
W graficznych systemach operacyjnych głównym urządzeniem, za pomocą którego użytkownik steruje pracą komputera jest myszka. Podczas przeglądania stron internetowych klawiatura jest potrzebna praktycznie tylko do pobrania adresu żądanej witryny. Najnowsze przeglądarki umożliwiają jednakże tworzenie skryptów, które wprowadzają komunikację użytkownika ze stroną WWW za pomocą klawiatury.
Dla wykorzystywania klawiatury w skryptach języka JavaScript niezbędne jest poznanie trzech procedur obsługi zdarzeń.
Procedura onKeyDown
Zdarzenie
KeyDown zachodzi, gdy wciśnięty zostaje jakiś klawisz klawiatury. Zdarzenie
KeyDown zachodzi zawsze przed zdarzeniem
KeyPress.
Procedura onKeyPress
Gdy zostanie naciśnięty klawisz - bezpośrednio po
KeyDown - zachodzi zdarzenie
KeyPress. W przeciwieństwie do
KeyDown, zdarzenie
KeyPress nie występuje, gdy zostanie naciśnięty któryś z klawiszy Alt, Ctrl, Shift. Umożliwia to rozpoznawanie kodów znaków, które wymagają naciśnięcia dwóch klawiszy, na przykład wielkich liter.
Procedura onKeyUp
Zdarzenie
KeyUp zachodzi, gdy zostaje zwolniony klawisz. Procedura obsługi tego zdarzenia zwraca identyczny kod, jak procedura obsługi zdarzenia
KeyDown, zachodzącego odpowiednio wcześniej.
Odczytywanie znaku klawiatury
Wszystkie procedury obsługi zdarzeń związanych z klawiaturą umożliwiają odczytanie kodu znaku, którego dane zdarzenie dotyczy. Przedstawiony niżej skrypt umożliwia odczytanie kodu wciśniętego klawisza:
<SCRIPT LANGUAGE="JavaScript">
<!--
function keyInfo(evnt) {
if (document.layers)
Key = evnt.which;
if (document.all)
Key = event.keyCode;
alert("Nacisnieto klawisz o kodzie " + Key);
}
document.onkeydown = keyInfo
if (document.layers) document.captureEvents(Event.KeyDown)
//-->
</SCRIPT>
Jak widać odczytywanie znaków w obydwu przeglądarkach przebiega odmiennie - w przeglądarce
Netscape'a za pomocą parametru which,
Internet Explorer wykorzystuje parametr
keyCode. Ponadto, aby w produkcie firmy
Netscape rejestrowane były wszystkie wystąpienia zdarzenia
KeyDown musimy wykorzystać metodę
captureEvents, która jest charakterystyczna dla tej przeglądarki.
W implementacji
Internet Explorera obiekt event udostępnia także specjalne parametry
shiftKey,
altKey i
ctrlKey, które umożliwiają odczytanie stanu klawiszy shift, alt oraz ctrl. Parametry te przyjmują wartości true, gdy dany klawisz jest wciśnięty oraz false, gdy klawisz jest zwolniony. Skrypt na stronie, której kod przedstawiono poniżej przedstawia stan tych trzech klawiszy:
<html>
<body>
Stan klawisza SHIFT: <div id=klawiszShift></div>
Stan klawisza ALT: <div id=klawiszAlt></div>
Stan klawisza CTRL: <div id=klawiszCtrl></div>
<script language="JavaScript">
<!--
document.onkeydown=update
document.onkeyup=update
function update() {
document.all("klawiszShift").innerText=event.shiftKey;
document.all("klawiszAlt").innerText=event.altKey;
document.all("klawiszCtrl").innerText=event.ctrlKey;
}
// -->
</script>
</body>
</html>
Funkcja
update() odświeża pola strony zawarte pomiędzy znacznikami
<div></div> prezentujące stan odpowiednich klawiszy.
Nawigowanie za pomocą klawiatury
Jako pierwszy przykład wykorzystania klawiatury w konstrukcji stron internetowych może posłużyć następujący skrypt:
<script language="JavaScript">
<!--
function navigate(evnt) {
if ((document.layers)&&(evnt.which==32))
window.location="http://www.dhtml.pik-net.pl";
else if ((document.all)&&(event.keyCode==32))
window.location="http://www.dhtml.pik-net.pl"
}
if (document.layers)
document.captureEvents(Event.KeyPress)
document.onkeypress=navigate
//-->
</script>
Po naciśnięciu klawisza spacji użytkownikowi oglądającemu stronę, na której zamieszczono powyższy skrypt naciśnięcie klawisza spacji zapewnia przeniesienie pod adres określony parametrem
location obiektu
window. Rozszerzając ten skrypt o obsługę kolejnych klawiszy możemy skonstruować serwis internetowy z dużą ilością stron, w którym cała nawigacja odbywa się za pomocą klawiatury.
Szersze wykorzystywanie klawiatury
Strony internetowe tworzone z zastosowaniem technik dynamicznych mogą charakteryzować się interakcyjnością, polegająca na przykład na tym, że użytkownik sam decyduje o wyglądzie witryny.
Wprowadźmy na przykład na stronę WWW pojedynczą warstwę.. Naszym zamiarem jest umożliwienie dowolnego pozycjonowania tej warstwy w pionie. W tym celu musimy stworzyć odpowiednie funkcje, które będą odpowiadały za poruszanie elementu strony - w tym przypadku właśnie naszej warstwy (sposoby poruszania elementów witryn internetowych zostały szerzej omówione w numerze 10/99 Magazynu Internet). Skrypt - za pomocą procedur obsługi zdarzeń
onKeyDown oraz
onKeyUp - będzie reagował na naciskanie i zwalnianie przez użytkownika klawiszy 2 i 8 z klawiatury numerycznej. Nasza warstwa, z którą skojarzono obiekt o nazwie
element będzie poruszana tylko w sytuacji, gdy naciśnięto odpowiedni klawisz. Zwolnienie klawisza zatrzymuje ruch. Kod całej strony z omówionym skryptem może przedstawiać się następująco:
<html>
<head>
<script>
function init() {
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
if (ns4) element = document.warstwa
if (ie4) element = warstwa.style
element.x = parseInt(element.left)
element.y = parseInt(element.top)
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KeyDown
| Event.KeyUp)
}
//funkcja wywolywana, gdy klawisz zostal wcisniety
function keyDown(evnt) {
if (ns4) var nKey = evnt.which
if (ie4) var ieKey = window.event.keyCode
if (nKey==56 || ieKey==104) elementUp()
if (nKey==50 || ieKey==98) elementDown()
}
//funkcja wywolywana, gdy klawisz zostal zwolniony
function keyUp(evnt) {
if (ns4) var nKey = evnt.which
if (ie4) var ieKey = window.event.keyCode
if (nKey==56 || ieKey==104) moveStop()
if (nKey==50 || ieKey==98) moveStop()
}
//funkcje reazlizujace ruch elementu na stronie www
function elementUp() {
element.move=true
moveUp()
}
function elementDown() {
element.move=true
moveDown()
}
function moveUp() {
if (element.move) {
element.y -= 5
element.top = element.y
setTimeout("moveUp()",30)
}
}
function moveDown() {
if (element.move) {
element.y += 5
element.top = element.y
setTimeout("moveDown()",30)
}
}
function moveStop() {
element.move=false;
}
</script>
</head>
<body onLoad="init()">
<div id="warstwa" style="position:absolute; left:100;
top:100; width:100; height:100; background-color:green;
layer-background-color:green"> </div>
</body>
</html>
Możliwość reagowania na akcje użytkownika związane z klawiaturą otwiera nowe możliwości przed twórcami stron WWW. Należy jednakże pamiętać, że procedury obsługi zdarzeń związane z klawiaturą są dostępne tylko w nowych przeglądarkach firm Microsoft i Netscape działających w systemie operacyjnym Windows.
Przedstawione w tym artykule metody wykorzystywania skryptów obsługujących klawiaturę są szeroko wykorzystywane przez twórców gier, które są napisane za pomocą języka JavaScript.
