Lekcja 10

Myszka i klawiatura w JS

1. zdarzenia
2. rejestrowanie
3. myszka
4. animacja

Zdarzenie
Zdarzenia, to funkcje, które wykonywane są automatycznie podczas przeglądania strony. Większość zdarzeń wywoływana jest przez użytkownika: klikanie, poruszanie myszką, naciskanie klawiszy. Istnieją też zdarzenia inne: ładowanie, zamykanie, zmiana rozmiarów strony, itp. Spośród wiele różnych zdarzeń tylko kilkanaście jest często używanych.

• onblur gdy obiekt przestał być aktywny

• onchange gdy obiekt zmienił swoją zawartość

• onclick gdy obiekt został kliknięty

• ondblclick gdy podwójnie klikniemy na obiekt

• onfocus gdy obiekt stał się wybrany

• onkeyoown gdy został naciśnięty klawisz na klawiaturze

• oninput uruchamiane w czasie trzymania klawisza

• onkeyop gdy puścimy klawisz na klawiaturze

• onload gdy obiekt został załadowany

• onmouseover gdy kursor znalazł się na obiekcie

• onmouseout gdy kursor opuścił obiekt

• onmousedown przycisk myszki naciśnięty

• onmouseup przycisk myszki puszczony

• onmousemove kursor się porusza

• onresize rozmiar okna przeglądarki jest zmieniany

• onselect gdy zawartość obiektu została zaznaczona

• onsubmit gdy formularz został wysłany

• onunload gdy użytkownik opuszcza dana stronę

Jak wykorzystać zdarzenia? Po prostu „podpinamy się” do określonego elementu na stronie internetowej. Skrypt wraz ze współdziałającym z nim kodem HTML musi być tak skonstruowany, aby skrypt był wczytywany dopiero wtedy, gdy strona już jest wyświetlona i element oczekuje na zdarzenie. Jeśli najpierw uruchomi się skrypt, który nie będzie miał czego sprawdzać, mogą wystąpić różnorodne komplikacje.

Rejestrowanie zdarzeń w HTML
Zdarzenia onclick, checkbox, onchange zostały omówione w lekcji 7. Kliknięcie w przycisk z napisem START uruchamiało funkcję JS o nazwie OdNowa, która uruchamiała funkcję restartującą animację. Zmiana własności checkboxa czyściła ekran. Przesunięcie suwaka uruchamiało funkcję zmieniającą parametr używany do animowania i wartość suwaka była wpisywana do pola tekstowego na stronie.

<input type="button" value="START" onclick= OdNowa()>
<input type="range" id="RopS" min=990 max=1000 onchange=OporPow()>
<input type="text" id="RopT" size=2>

<script>
  function OdNowa(){
    if (rys0.checked) {c.clearRect(0, 0, w, h);
  }
  function OporPow(){
    opor=RopS.value/1000; RopT.value=opor;
  }
</script>

Myszka
Przeglądarki udostępniają kilkanaście właściwości, które powinny zwracać pozycję myszki.

• screenX i screenY - pozycja myszki na ekranie

• clientX i clientY - pozycja myszki w obiekcie, do którego podpięto zdarzenie.

Najłatwiej przechowywać położenie myszki w zmiennej (w przykładzie MYSZKA), która posiada dwa pola (x,y), Zdarzenie onmousemove przypięto do obiektu canvas.

<canvas width="400" height="400" id="can"></canvas>
<br>
ekran (X,Y):<input type=text id=Ex size=2>
<input type=text id=Ey size=2>
canvas (X,Y):<input type=text id=Cx size=2>
<input type=text id=Cy size=2>

<script>
  var c = can.getContext("2d");
  var w = c.canvas.width;
  var h = c.canvas.height;

var MYSZKA = {x: 0, y: 0};
c.canvas.onmousemove =  function(evt) {	
  MYSZKA.x = evt.clientX - 8;
  MYSZKA.y = evt.clientY - 8;
  Cx.value = MYSZKA.x;
  Cy.value = MYSZKA.y;
  Ex.value = evt.screenX;
  Ey.value = evt.screenY;
};

c.strokeStyle="black";
  c.strokeRect(0, 0, w, h);

</script>

UWAGA – wskazania w zmiennych są przesunięte o 8 pikseli w stosunku do brzegów okna przeglądarki, więc jeśli chcemy mieć dokładny pomiar, należy wprowadzić niewielka korekta w funkcji.

Animacja i zdarzenia
Podepniemy zdarzenia pod typowy animacyjny schemat i nauczymy piłeczkę reagować na myszkę

Błądząca piłeczka
Kolorowa kulka podąża za wskaźnikiem myszki, im dalej wskaźnik od piłki, tym szybciej. Instrukcje wstawiono do pętli głównej animacji.

Strzał
Kliknięcie w canvas spowoduje powiększenie promienia piłki. W pętli głównej stopniowo przywracamy promieniowi poprzednią wartość.

ekran (X,Y):<input type=text id=Ex size=2>
<input type=text id=Ey size=2>
canvas (X,Y):<input type=text id=Cx size=2>
<input type=text id=Cy size=2>
<br>

<canvas width="400" height="400" id="can"></canvas>

<script>
  var c = can.getContext("2d");
  var w = c.canvas.width;
  var h = c.canvas.height;
  //kliknięcie w canvas uruchamia zdarzenie evt
  c.canvas.onclick = function(evt) {r=100;}

var MYSZKA = {x: 0, y: 0};
c.canvas.onmousemove =  function(evt) {	
  MYSZKA.x = evt.clientX - 8;
  MYSZKA.y = evt.clientY - 8;
  Cx.value = MYSZKA.x;
  Cy.value = MYSZKA.y;
  Ex.value = evt.screenX;
  Ey.value = evt.screenY;
};

// kolorowa piłka
function pilka(x,y,r,kolor) {
  c.beginPath();
  c.strokeStyle=kolor;
  c.fillStyle=kolor;
  c.arc(x,y,r,0,2*Math.PI);
  c.stroke();
  c.fill();
};

  var skok = 10;
  var czas;
  var x=100;
  var y=100;
  var vx=2;
  var vy=3;
  var r=30;
  
function animacja() {
  c.clearRect(0, 0, w, h);
  c.strokeStyle="black";
  c.strokeRect(0, 0, w, h);

vx=(MYSZKA.x-x)/10;
vy=(MYSZKA.y-y)/10;
x=x+vx;
y=y+vy;
pilka(x,y,r,"red");
if (r>10){r=r-5}
clearTimeout(czas);
  czas = setTimeout(animacja, skok); 
}

animacja();

</script>

Szablon

<canvas width="400" height="400" id="can"></canvas>

<script>
  var c = can.getContext("2d");
  var w = c.canvas.width;
  var h = c.canvas.height;

  var skok = 10;
  var czas;
  
function animacja() {
  c.clearRect(0, 0, w, h);
  c.strokeStyle="black";
  c.strokeRect(0, 0, w, h);

  clearTimeout(czas);
  czas = setTimeout(animacja, skok); 
}

animacja();

</script>