Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Zdarzenie onClick

Email Drukuj PDF

Bardzo często wykorzystywanym zdarzeniem jest onclick, które można przypisać do praktycznie dowolnego elementu strony: warstwy, akapitu, obrazu itd. Procedura obsługi takiego zdarzenia będzie wywoływana zawsze wtedy, gdy użytkownik kliknie myszą, a kursor znajduje się nad danym elementem. Warto wykonać prosty przykład. Załóżmy, że okno ma być wyświetlone za każdym razem, kiedy użytkownik kliknie akapit tekstowy umieszczony na witrynie za pomocą znacznika <p>. Nietrudno się domyślić, że znacznik ten będzie miał schematyczną postać:

<p onclick="procedura_obsługi();">

Na listingu 5.4 znajduje się kod strony z taką właśnie instrukcją.

Listing 5.4. Akapit reagujący na kliknięcia

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function onclickHandler()

    {

      alert('Akapit został kliknięty!');

    }

    </script>

  </head>

  <body>

    <p onclick="onclickHandler();">Kliknij ten akapit,

      a pojawi się okno dialogowe.</p>

  </body>

</html>

Procedurą obsługi zdarzenia jest tu funkcja onclickHandler, w której wnętrzu następuje wywołanie metody alert. Dzięki temu akapit tekstowy zdefiniowany za pomocą znacznika p będzie reagował na kliknięcia myszą. Każde kliknięcie będzie powodowało wywołanie funkcji onclickHandler, która z kolei wywołuje metodę alert. Tym samym każde kliknięcie będzie powodowało wyświetlenie okna dialogowego.

Skoro tak, zwykły akapit umieszczony na stronie za pomocą znacznika <p> można zmusić do wykonywania bardziej praktycznej czynności niż tylko wyświetlenie okna dialogowego. Można na przykład spowodować, aby akapit zachowywał się jak odnośnik, a jego kliknięcie powodowało przeniesienie na nową witrynę. Wystarczy skorzystać ze zdarzeń oraz standardowych obiektów poznanych w poprzedniej części kursu. Sposób realizacji takiego zadania jest przedstawiony na listingu 5.5.

Listing 5.5. Akapit zachowujący się jak odnośnik

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    var adresy = Array

    (

      "http://helion.pl/ksiazki/jscpk.htm",

      "http://helion.pl/ksiazki/cwjas2.htm",

      "http://helion.pl/ksiazki/joowww.htm"

    )

 

    function onclickHandler(num)

    {

      if(num >= 0 && num < adresy.length){

          location.assign(adresy[num]);

      }

    }

    </script>

  </head>

  <body>

    <p onclick="onclickHandler(0);" style="cursor:pointer">

      JavaScript. Praktyczny kurs

    </p>

    <p onclick="onclickHandler(1);" style="cursor:pointer">

      JavaScript. Ćwiczenia praktyczne

    </p>

    <p onclick="onclickHandler(2);" style="cursor:pointer">

      Joomla! Prosty przepis na własną stroną WWW

    </p>

  </body>

</html>

Każdy akapit ma przypisaną procedurę obsługi zdarzenia onclick, którą jest funkcja onclickHandler. Przyjmuje ona jeden argument, wskazujący adres, który ma być wczytany. Argumentem tym jest liczba określająca indeks globalnej tablicy o nazwie adresy, która przechowuje adresy wszystkich witryn wskazywanych przez poszczególne akapity. Tak więc wywołanie onclickHandler z argumentem 0 powinno spowodować wczytanie witryny http://helion.pl/ksiazki/jscpk.htm, z argumentem 1 — witryny http://helion.pl/ksiazki/cwjas2.htm itd.

W samej funkcji onlickHandler najpierw następuje sprawdzenie, czy otrzymany przez nią argument (num) jest prawidłowy, czyli zawiera się w przedziale od 0 (num >= 0) do wielkości tablicy adresy pomniejszonej o 1 (num < adresy.length). Jeżeli jest prawidłowy, następuje wywołanie opisanej już wcześniej metody assign obiektu location, a to powoduje wczytanie wskazanej przez użytkownika witryny.

Wykonajmy zatem jeszcze jedno zadanie tego typu. Należy spowodować, aby funkcję odnośników przejęły zwykłe przyciski umieszczone na stronie za pomocą znaczników input z parametrem type ustawionym na button. Takie przykładowe przyciski widoczne są na rysunku 5.1.

Rysunek 5.1. Przyciski realizujące zadania odnośników

Kod skryptu, widoczny na listingu 5.6, jest w tym przypadku bardzo podobny do przedstawionego w poprzednim przykładzie. Wszystkie adresy, na które mają być wykonywane przekierowania, są zebrane w tablicy adresy, natomiast wczytywaniem wskazywanych przez nie witryn zajmuje się funkcja onclickHandler. O tym, który z adresów ma być wczytany, decyduje przekazany funkcji argument. Wymieniona funkcja została przypisana jako procedura obsługi zdarzenia onclick każdego ze znaczników typu input.

Listing 5.6. Przyciski jako odnośniki

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    var adresy = Array

    (

      "http://helion.pl/ksiazki/pkjav2.htm",

      "http://helion.pl/ksiazki/cwjav2.htm",

      "http://helion.pl/ksiazki/javlk2.htm"

    )

 

    function onclickHandler(num)

    {

      if(num >= 0 && num < adresy.length){

          location.assign(adresy[num]);

      }

    }

    </script>

  </head>

  <body>

    <div>

    <input

      type="button" style="width:220px"

      value="Java. Praktyczny kurs"

      onclick="onclickHandler(0);"

    />

    <br />

    <input

      type="button" style="width:220px"

      value="Java. Ćwiczenia praktyczne"

      onclick="onclickHandler(1);"

    />

    <br />

    <input

      type="button" style="width:220px"

      value="Java. Leksykon kieszonkowy"

      onclick="onclickHandler(2);"

    />

    </div>

  </body>

</html>

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15276558