• Artykuł

          

Kurs JavaScript - Zdarzenia  Udostępnij na: Facebook

Autor: Bożena Jurczyk

Opublikowano: 2011-12-15

W poprzednim samouczku dowiedziałeś się, co to są funkcje i jak je efektywnie wykorzystywać. Dzięki temu, możesz teraz przejść do kolejnego ciekawego zagadnienia, jakim są zdarzenia. W języku JavaScript istnieje gotowy zestaw predefiniowanych zdarzeń. Są one związane, np. z kliknięciem na przycisk, najechaniem kursorem myszki na element, czy chociażby załadowaniem strony internetowej do przeglądarki.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • jak używać podstawowych zdarzeń w języku JavaScript.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zapoznaj się z informacjami zawartymi w samouczku Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, jak posługiwać się zdarzeniami w języku JavaScript.

Zdarzenie onLoad

Zdarzenie onLoad pozwala wykonać pewne instrukcje po załadowaniu strony przez przeglądarkę. Jest ono związane ze znacznikiem body i aby obsłużyć to zdarzenie za pomocą własnej funkcji, musisz wpisać jej nazwę jako wartość atrybutu onLoad tego znacznika.

Informacja
Informacja o załadowaniu strony przez przeglądarkę jest niezbędna, jeśli odwołujesz się do elementów umieszczonych na niej, m.in. za pomocą funkcji getElementById oraz getElementsByName. Wywołanie tych funkcji, przed załadowaniem strony, spowoduje zwrócenie wartości null.
  1. Otwórz plik jTest.html w dowolnym edytorze tekstowym. Odnajdź znacznik o nazwie body, a następnie zmodyfikuj go w następujący sposób:
<body onLoad="alert('Witaj na stronie samouczka JavaScript');">
  1. Zapisz zmiany, a następnie odśwież stronę w przeglądarce, wciskając np. klawisz F5.
  2. Na ekranie powinien pojawić się alert z następującą informacją (Rys. 1.).

Rys. 1. Komunikat wyświetlony po załadowaniu strony.

Informacja
Kod wpisany jako wartość atrybutu onLoad znacznika body, zostanie automatycznie wykonany przy każdym załadowaniu strony przez przeglądarkę. Możesz wpisać tam dowolną liczbę instrukcji, jednak znacznie praktyczniejszym rozwiązaniem będzie zapisanie ich w ciele utworzonej w tym celu funkcji oraz wywołanie tej funkcji w funkcji, obsługującej zdarzenie onLoad.

Zdarzenie onClick

Zdarzenie onClick związane jest z każdym elementem strony HTML, które reaguje na kliknięcie. Wśród nich znajdują się takie znaczniki jak <a>, <div>, <img>, <table>, <form> i oczywiście <input>. Jednak nie są to wszystkie elementy.

  1. Otwórz stronę jTest.html w edytorze tekstowym. Usuń wcześniej wprowadzone zmiany, a następnie znajdź element input o nazwie "butSend" i zmodyfikuj go w następujący sposób:
<input id="butWyslij" type="submit" name="butWyslij" value="Wyślij" onClick="changeText()"/>
  1. Odśwież stronę jTest.html w przeglądarce internetowej. Wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
  2. W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys.2.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:
function changeText(){
    var text = document.getElementById('mojTekst').value;
    var elem = document.getElementById('pokaz');
    elem.innerHTML = text.toUpperCase().bold(); }

Rys. 2. Narzędzia programistyczne do języka JavaScript w Internet Explorer 9.

  1. Wciśnij przycisk Run script.
  2. W przeglądarce, w polu tekstowym, wpisz ciąg znaków: "Tekst wpisany za pomocą zdarzenia onClick() przycisku" i naciśnij przycisk "Wyślij".
  3. Na stronie powinien pojawić się wynik w postaci tekstu tak, jak na Rys. 3.

Rys. 3. Tekst wyświetlony po kliknięciu na przycisk.

Informacja

Funkcja podpięta pod zdarzenie onClick przycisku, pobiera tekst wprowadzony do pola tekstowego, a następnie wypisuje go w elemencie div, znajdującym się na początku strony. Jak widzisz, w funkcji tej możesz wykonać dowolne instrukcje na pobranych elementach lub utworzyć własne. Dodatkowo, jak zostało to wspomniane we wcześniejszym ćwiczeniu, instrukcje zostały umieszczone w funkcji changeText(). Pozwala to na zachowanie porządku w kodzie, a co za tym idzie, łatwiejsze jego utrzymanie.

Pamiętaj, że zdarzenie to możesz podpiąć również pod elementy innego typu, dzięki czemu masz możliwość stworzenia bogatszej interakcji swojej strony z użytkownikiem.

Zdarzenia onMouseOver, onMouseOut

Ostatnimi zdarzeniami, prezentowanymi w tym samouczku, są: zdarzenie onMouseOver (wywoływane w momencie najechania kursorem myszy na element) oraz onMouseOut (wywoływane w momencie zjechania kursorem myszy z elementu).

  1. Otwórz stronę jTest.html w edytorze tekstowym. Znajdź pierwszą listę wypunktowaną (<ul>) i zamień trzy pierwsze elementy <li> za pomocą następującego fragmentu kodu:
<li onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)">Vivamus scelerisque ullamcorper sapien, quis sollicitudin lectus euismod vitae.</li>
<li onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)">Aliquam venenatis nisl vel augue egestas vulputate.</li>
  1. Odśwież stronę jTest.html w przeglądarce internetowej. Wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
  2. W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys.2.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:
var oldColor = "";

function mouseOver(element){
    oldColor = element.style.background;
    element.style.background = '#D6EEFB';
    return false; }

function mouseOut(element){
    element.style.background = oldColor;
    return false; }
  1. Wciśnij przycisk Run script.
  2. Po najechaniu kursorem myszy na pierwsze trzy punkty listy, powinieneś zobaczyć zmianę koloru tła elementu listy na jasno-niebieski (Rys.4.).

Rys.4. Zmiana koloru tła elementu listy na jasno-niebieski.

Informacja
W celu zrealizowania ćwiczenia zostały utworzone dwie funkcje i jedna zmienna globalna. Zmienna ma za zadanie przechowywać kolor tła akapitu, który jest zmieniany w funkcji mouseOver(). Jej parametrem jest dany akapit. Funkcja podpięta jest pod zdarzenie onMouseOver. Dotyczy ono trzech pierwszych elementów listy. Aby przywrócić wartości po zjechaniu kursora myszy z akapitu, użyte zostało zdarzenie onMouseOut, pod które została podpięta funkcja mouseOut().

Podsumowanie

Z tego samouczka dowiedziałeś się, co to są zdarzenia w języku JavaScript oraz w jaki sposób wykonać własne instrukcje w reakcji na konkretne zdarzenie. Poznałeś cztery podstawowe zdarzenia, najczęściej wykorzystywane do wzbogacenia interakcji strony z użytkownikiem.

W kolejnym samouczku nauczysz się, jak korzystać z instrukcji warunkowych w języku JavaScript – Instrukcja warunkowa – if.