Kurs języka HTML i CSS

Poradnik webmastera

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

Dostęp do elementów strony

Email Drukuj PDF

Dostęp do wybranego elementu witryny najłatwiej uzyskać za pomocą metody getElementById obiektu document. Oczywiście warunkiem jest to, aby podczas definiowania takiego elementu nadać mu unikatowy atrybut id. Przykładowo dostęp do poszczególnych składowych formularza wcale nie musi się odbywać poprzez konstrukcję typu:

document.forms.nazwa_formularza.nazwa_elementu

Co więcej, w niektórych przypadkach nie ma nawet potrzeby definiowania samego obiektu formularza. Warto zauważyć, że w przykładzie zliczającym wystąpienia danego ciągu w tekście był definiowany formularz, dzięki czemu możliwy był dostęp do elementów składowych. Niemniej ten formularz był wykorzystywany tylko lokalnie (nie był używany do zbierania danych i wysyłania ich do serwera). Jeśli więc w celu dostępu do pól tekstowych zostanie zastosowana metoda getElementById, znacznik <form> stanie się zupełnie zbędny. Kod przedstawiony na listingu 5.16 pokazuje, jakie zmiany należy wprowadzić (a dotyczą one zarówno części HTML, jak i JavaScript), aby zastosować opisany sposób dostępu.

Listing 5.16. Bezpośredni dostęp do elementów witryny

<!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 szukaj()

    {

      var tekst = document.getElementById('okno_tekstowe').value;

      var ciag = document.getElementById('ciag_znakow').value;

      if((ciag == "") || (tekst == "")) return;

      var indeks = 0;

      var indeks_wystapienia = 0;

      var liczba_wystapien = 0;

 

      while (indeks_wystapienia != -1){

        indeks_wystapienia = tekst.indexOf(ciag, indeks);

        if (indeks_wystapienia != -1){

          indeks = indeks_wystapienia + ciag.length;

          liczba_wystapien++;

        }

      }

      document.getElementById('ile').value = liczba_wystapien;

    }

    </script>

  </head>

  <body>

    <table border="0">

    <tr>

      <td>Wpisz w tym oknie tekst:

      </td>

      <td>Wpisz szukany ciąg znaków:

      </td>

    </tr>

    <tr>

      <td rowspan="2">

        <textarea id="okno_tekstowe"

                  cols="35"

                  rows="10"></textarea>

     </td>

     <td valign="top" align="right">

       <input type="text"

              id="ciag_znakow">

       <br /><br />

       <input type   ="button"

              value  ="Szukaj"

              onClick="szukaj();">

     </td>

    </tr>

    <tr>

      <td align="right">

        Podany ciąg znaków wystąpił w tekście:<br />

        <input type="text" id="ile"><br />

        razy.

     </td>

    </tr>

    </table>

  </body>

</html>

Tym razem nie ma znacznika <form>, natomiast wszystkie pola tekstowe otrzymały unikatowe (niepowtarzające się) identyfikatory:

  • okno_tekstowe — pole służące do wprowadzania tekstu;

  • ciag_znakow — pole służące do wprowadzenia ciągu, którego wystąpienia będą zliczane;

  • ile — pole służące do prezentacji wyników.

Zmodyfikowana została również funkcja szukaj. Dostęp do wprowadzonych przez użytkownika danych jest teraz realizowany przez wywołania metody getElementById. Każde takie wywołanie zwraca obiekt o identyfikatorze przekazanym w postaci argumentu, w tym przypadku konkretne pole tekstowe, posiadające właściwość value zawierającą przechowywany przez nie tekst. Samo przeszukiwanie tekstu jest realizowane tak jak w poprzednim przykładzie.

W rozdziale opisującym struktury języka JavaScript prezentowany był skrypt obliczający rozwiązania równania kwadratowego. Wymagał on jednak, aby parametry tegoż równania były podane bezpośrednio w kodzie. Obecnie, kiedy zostały już zaprezentowane elementy umożliwiające wprowadzanie danych przez użytkownika, można wykonać przykład realizujący takie zadanie, ale pozwalający na wygodne rozwiązywanie dowolnych równań.

Na stronie zostaną umieszczone cztery pola tekstowe, trzy służące do wprowadzania danych i jedno do przedstawiania rozwiązań, tak jak jest to widoczne na rysunku 5.5.

Rysunek 5.5. Skrypt rozwiązujący równania kwadratowe

Każde pole otrzyma identyfikator, który pozwoli na dostęp do niego z poziomu skryptu. Te identyfikatory to:

  • paramA — dla pola przechowującego parametr A,

  • paramB — dla pola przechowującego parametr B,

  • paramC — dla pola przechowującego parametr C,

  • wynik — dla pola przechowującego wynik.

Obliczenie wyniku będzie się odbywało po kliknięciu widocznego na rysunku przycisku Oblicz, cały skrypt będzie zaś miał postać zaprezentowaną na listingu 5.17.

Listing 5.17. Obliczanie rozwiązań równania kwadratowego o zadanych parametrach

<!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 oblicz()

    {

      //deklaracje zmiennych odpowiadających parametrom równania

      var A = parseInt(document.getElementById("paramA").value);

      var B = parseInt(document.getElementById("paramB").value);

      var C = parseInt(document.getElementById("paramC").value);

      var wynikTekst = "";

 

      //sprawdzenie, czy jest to równanie kwadratowe

      if (A == 0){

        //A jest równe zero, równanie nie jest kwadratowe

        wynikTekst = "To nie jest równanie kwadratowe: A = 0!";

      }

      else{

        //A jest różne od zera, równanie jest kwadratowe

 

        //obliczenie delty

        var delta = B * B - 4 * A * C;

 

        //jeśli delta mniejsza od zera

        if (delta < 0){

           wynikTekst = "Delta < 0. To równanie nie ma rozwiązania ";

           wynikTekst += ("w zbiorze liczb rzeczywistych!");

        }

        //jeśli delta równa zero lub większa od zera

        else{

           //jeśli delta jest równa zero

           if (delta == 0){

             //obliczenie wyniku

             var wynik = - B / 2 * A;

             wynikTekst = "Rozwiązanie: x = " + wynik;

           }

           //jeśli delta jest większa od zera

           else{

             //obliczenie wyniku

             wynik = (- B + Math.sqrt(delta)) / 2 * A;

             wynikTekst = "x1 = " + wynik;

             wynik = (- B - Math.sqrt(delta)) / 2 * A;

             wynikTekst += ", x2 = " + wynik;

           }

        }

      }

      document.getElementById('wynik').value = wynikTekst;

    }

    </script>

  </head>

  <body>

    <div>

    parametr A:

    <input type="text" id="paramA" size="3">

    parametr B:

    <input type="text" id="paramB" size="3">

    parametr C:

    <input type="text" id="paramC" size="3">

    <input type   ="button"

           value  ="Oblicz"

           onClick="oblicz();"

    >

    <br /><br />

    Wynik:

    <input type="text" id="wynik" size="70">

    </div>

  </body>

</html>

Funkcja oblicz, która jest procedurą obsługi zdarzenia onclick przycisku Oblicz, wykonuje bardzo podobne zadanie jak prezentowany już wcześniej skrypt, wszak zasady rozwiązywania równań kwadratowych pozostały niezmienione. Niemniej występuje w niej kilka modyfikacji w stosunku do wspomnianego przykładu. Przede wszystkim parametry równania odzwierciedlane przez zmienne A, B i C są odczytywane z pól tekstowych, do których dostęp jest zapewniany przez metodę getElementById. Każdy ciąg znaków odczytywany z pola tekstowego jest zamieniany na wartość liczbową za pomocą funkcji parseInt.

Wynik obliczeń jest z kolei zapisywany w zmiennej pomocniczej wynikTekst i dopiero na samym końcu funkcji oblicz wartość tej zmiennej jest zapisywana w polu tekstowym o identyfikatorze wynik, dzięki czemu dane pojawiają się na ekranie.

Dostęp do elementów witryny umożliwia też np. napisanie skryptu, który wyświetli aktualną godzinę na zwykłym przycisku generowanym za pomocą znacznika input, tak jak jest to widoczne na rysunku 5.6.

Rysunek 5.6. Zegar na przycisku

Uzyskanie aktualnego czasu jest możliwe dzięki obiektowi Date, którego opis został zawarty we wcześniejszych rozdziałach. Wywołania metod getHours, getMinutes i getSeconds pozwalają na skonstruowanie ciągu zawierającego aktualny czas, tak jak zostało to wykonane w funkcji showTime widocznej na listingu 5.18.

Listing 5.18. Aktualny czas wyświetlany na przycisku

<!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 showTime()

    {

      var data = new Date();

      var godziny = data.getHours();

      var minuty = data.getMinutes();

      var sekundy = data.getSeconds();

      var czas = godziny;

      czas += ((minuty < 10) ? ":0" : ":") + minuty;

      czas += ((sekundy < 10) ? ":0" : ":") + sekundy;

      document.getElementById("btnCzas").value = czas;

    }

    setInterval("showTime()", 1000);

    </script>

  </head>

  <body>

    <div>

    <input type   ="button"

           value  ="--:--:--"

           id="btnCzas"

    >

    </div>

  </body>

</html>

Czas ten jest wyświetlany na elemencie witryny o identyfikatorze btn1, którym jest zwykły przycisk. Oczywiście dostęp do tego elementu jest uzyskiwany dzięki wywołaniu metody getElementById obiektu document. Cykliczne wywoływanie funkcji showTime, uaktualniające pokazywany czas, zapewnia z kolei wywołanie metody setInterval obiektu window.

Równie ciekawym efektem jest cykliczna zmiana koloru przycisku, aby jednak był on atrakcyjny, zmiany te nie powinny być przypadkowe — przejścia między barwami powinny być możliwie płynne. Aby to osiągnąć, najwygodniej wygenerować programowo odpowiednią tabelę kolorów, z której następnie będą pobierane dane. Jak to zrobić, zostało zobrazowane na listingu 5.19.

Listing 5.19. Przycisk zmieniający kolor

<!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 speed = 1;

    var colorTable = new Array();

    var index = 0;

    function generujKolory()

    {

      for (i = 0; i < 256; i++){

        var color = "#";

        color += "00";

        color += (i < 16)?"0" + i.toString(16):i.toString(16);

        color += ((255-i) < 16)?"0" + (255-i).toString(16):(255-i).toString(16);

        colorTable[i] = color;

        color = "#";

        color += "00";

        color += ((255-i) < 16)?"0" + (255-i).toString(16):(255-i).toString(16);

        color += (i < 16)?"0" + i.toString(16):i.toString(16);

        colorTable[i + 256] = color;

     }

    }

    function zmienKolor()

    {

      document.getElementById("btn1").style.background =

        colorTable[index++];

      if(index >= colorTable.length) index = 0;

    }

    function start()

    {

      generujKolory();

      setInterval("zmienKolor()", speed);

    }

    </script>

  </head>

  <body onload="start();">

    <div>

    <input type="button"

           value="Przycisk"

           id="btn1"

    >

    </div>

  </body>

</html>

Za cykliczną zmianę stylu przycisku odpowiada funkcja zmienKolor. Prędkość zmian jest natomiast regulowana zdefiniowaną na początku skryptu zmienną speed, która określa, co ile milisekund ma następować wywołanie zmienKolor. Generowaniem tablicy kolorów (colorTable) zajmuje się funkcja generujKolor, natomiast cały proces jest zapoczątkowywany w funkcji start, która jest procedurą obsługi zdarzenia onload sekcji body. Funkcja start najpierw wywołuje generujKolory, a następnie rozpoczyna działanie timera przez wykonanie instrukcji:

setInterval("zmienKolor()", speed);

Tabela przejść między barwami, tworzona w funkcji generujKolory, może być wykonana na różne sposoby. W tym konkretnym przypadku cykl rozpoczyna się od koloru niebieskiego (#0000FF), który płynnie przechodzi w zielony (#00FF00), a ten z powrotem w niebieski (#0000FF). W każdym przebiegu pętli for są więc modyfikowane dwie składowe RGB.

W całej tabeli składowa G zmienia się w zakresie: 00 – FF – 00, B w zakresie: FF – 00 – FF, a R pozostaje bez zmian (cały czas jest równa 0). Dodatkową komplikacją jest konieczność dokonania konwersji zmiennej i na ciąg znaków reprezentujący jej wartość w postaci szesnastkowej. Jest to wykonywane za pomocą funkcji toString.

Parametrem tej funkcji jest podstawa systemu liczbowego, w jakim ma być zwrócony wynik. Przykładowo: jeśli jest zadeklarowana zmienna i zawierająca wartość 255, to wykonanie instrukcji:

var napis = i.toString(16);

spowoduje przypisanie do zmiennej napis ciągu znaków FF.

To jednak nie rozwiązuje do końca problemu. Otóż kolor musi być zdefiniowany w postaci #RRGGBB, czyli kolor niebieski jako #0000FF (R = 0, G = 0, B = 255). Tymczasem wykonanie instrukcji:

var napis = "#" + (0).toString(16) + (0).toString(16) + (255).toString(16);

dałoby w rezultacie ciąg znaków #00FF. Jest to zrozumiałe, jako że liczby od 0 do 15 dziesiętnie mają w postaci szesnastkowej postać jednocyfrową od 0 do F. Należy zatem uwzględnić ten fakt podczas konwersji i jeśli to konieczne, dodawać brakujące zera. Najwygodniej jest skorzystać z wyrażenia warunkowego w postaci:

(wyrażenie warunkowe) ? wartość1 : wartość2

Jeśli wyrażenie jest prawdziwe, całość przyjmuje wartość1, w przeciwnym razie wartość2. Dlatego do dokonania odpowiedniej konwersji jest używana konstrukcja:

(i < 16) ? "0" + i.toString(16) : i.toString(16);

Funkcja zmienKolor działa w bardzo prosty sposób. Uzyskuje dostęp do przycisku za pomocą metody getElementById oraz odwołuje się do właściwości style.background odpowiadającej kolorowi tła przycisku. Tej właściwości przypisuje też wartość pobraną z tablicy colorTable zawierającej definicje wygenerowanych wcześniej kodów kolorów. Aktualny kod wskazywany jest przez zmienną index, która jest zwiększana przy każdym wywołaniu funkcji zmienKolor (index++). Gdy index osiągnie wartość równą rozmiarowi tablicy colorTable, jest zerowany, a tym samym rozpoczyna się kolejny cykl.

 

Nowości Helionu

Statystyki

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