Projektowanie stron WWW dla laików

Skrypty

        Skrypty, czyli krótkie programy umożliwiające Ci poszerzenie możliwości strony możesz pisać, gdy oczywiście znasz choć jeden ze stosownych języków (C, ActiveX, Java, JavaScript i inne). Ja jednak zakładam że nie znasz żadnego z nich i jesteś laikiem, dlatego podam Ci poniżej kilka ciekawych zastosowań JavaScript (jednego z języków, w którym można pisać skrypty, umieszczając ich tekst bezpośrednio w kodzie strony).


Rollover

- Podstawowym i bardzo często wykorzystywanym skryptem jest tzw. efekt rollover. Stosujemy go przy linkach, które reprezentowane są przez obrazki (pamiętamy, że dodajemy parametr BORDER=0). Zasada jego działania jest prosta. Jeżeli kursor znajduje się nad obrazkiem, wyświetlana zostaje jego alternatywna (podświetlona) wersja, a w przeciwnym wypadku jego wersja standardowa. Aby taki efekt uzyskać, tworzymy obrazek podświetlony i nazywamy go on.jpg oraz obrazek standardowy, nazywając go off.jpg. Oto przykład działania skryptu wraz z gotowym kodem HTML:

<A HREF="strona.htm">
<IMR SRC="off.jpg" onMouseOver='this.src="on.jpg"' onMouseOut='this.src="off.jpg"' BORDER=0>
</A>


off.jpg - tak wygląda uprzednio przygotowany plik.
on.jpg - tak wygląda uprzednio przygotowany plik.
Aby obejrzeć efekt, najedź kursorem myszki na obrazek po lewej.



Zegar

- Kolejnym skryptem, który może uatrakcyjnić Twoją stronę jest prosty zegar. Aby wstawić go na stronę, musisz część jego kodu wstawić do sekcji HEAD. Tak więc:

        Do sekcji HEAD wstaw kod:

<script language="javascript">
<!--W3e JAVAscript Preset
var timerID = null;
var timerRunning = false;
function stopclock()
{
      if(timerRunning)
            clearTimeout(timerID)
      timerRunning = false;
}

function startclock()
{
      stopclock();
      showtime();
}

function showtime()
{
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();
      var timeValue = "" + ((hours > 12) ? hours - 12 : hours);
      timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
      timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
      timeValue += (hours >= 12) ? " P.M." : " A.M.";
      document.clock.face.value = timeValue;
      timerID = setTimeout("showtime()",1000);
      timerRunning = true;
}
//-->
</script>


        W miejsce, w którym ma pojawić się zegar w sekcji BODY, wstaw kod:

<form name="clock" onSubmit="0">
    <input type="text" name="face" size="10" style="border-width: 0 0">
</form>
<script>startclock();</script>

        A oto i efekt:

        (Skrypt Zegar został zapożyczony ze strony KURS HTML autorstwa p. Pawła Wimmera).


Pasek statusu

- Najechanie na link (bez względu na to, czy reprezentuje go grafika, czy tekst), może skutkować zmianą treści paska statusu. Jeżeli pragniesz, by taki efekt uatrakcyjnił działanie linków na Twojej stronie, znacznik <A> wzbogać o poniższe parametry:

<A HREF="index.htm" onMouseOver="window.status='Powróć na stronę główną';return true" onMouseOut="window.status='';return true">Powróć</A>

        Oto przykład działania takiego skryptu - najedź kursorem myszki na tekst 'Powróć' i obserwuj pasek statusu:

Powróć


Przycisk 'Powrót'

- Kolejnym, bardzo często stosowanym 'miniskryptem' jest bardzo typowe wykorzystanie JavaScript przy powracaniu do poprzedniej strony. Poprzez wstawienie zamiast nazwy pliku, kodu <A HREF="javascript:history.back()">, po kliknięciu na link powrócisz do poprzednio oglądanej strony dokładnie tak, jakbyś nacisnął przycisk 'Wstecz' (Back) na przeglądarce. Jest to o tyle wygodne, że przeglądarka nie ściąga wtedy całego kodu z sieci, lecz ze swojego cache'u. Ponadto, powracasz w dokładnie to miejsce na poprzedniej stronie, z którego wszedłeś na stronę aktualną, a nie na początek strony poprzedniej. Nie będę podawał odrębnego przykładu, gdyż każdy przycisk 'Powrót' na tych stronach napisany jest właśnie w ten sposób.


Powrót


Strona została stworzona w ramach zaliczenia przedmiotu Komputerowa Grafika Inżynieryjna.
© MŁ, 2001, prawa autorskie zastrzeżone.

Warto odwiedzić: fryzury