Skrypt - zmieniająca się informacja
Skrypty wyświetla informacje na stronie w określonym odstępie czasu. W tym przykładzie jest to 8 sekund. Skrypt można wykorzystać np. do wyświetlania informacji o nowościach na stronie. Oczywiście oprócz tekstu można umieszczać również grafikę, jak i każdy element html.
Aby umieścić skrypt na własnej stronie należy skopiować cztery elementy. Pierwszym z nich jest funkcja javascript o nazwie wiadomosc. Funkcja ta posiada parametr n, który określa kolejność wyświetlania informacji.
Poniższy zapis należy umieścić w sekcji head z znaczniku script.
| <script type="text/javascript"> function wiadomosc(n) { var czas = 8000; var tablica = new Array(); tablica[0] = "Po pierwsze Pierwsza z 4 wiadomości. Tak właśnie działa ten skrypt. Za osiem sekund wyświetlony zostanie kolejny tekst."; tablica[1] = "Po drugie Druga wiadomość z ostatniej chwili. Za osiem sekund znowu następny tekst."; tablica[2] = "Po trzecie Trzecia wiadomość z ostaniej chwili. Nowe kredyty mieszkaniowe."; tablica[3] = "Po czwarte Tu czwarta wiadomość. Nowy lek na grypę w pobliskiej aptece. Jakaś treść. A teraz za osiem sekund powrót do pierwszej wiadomości. "; document.getElementById("wiadomosc").innerHTML = tablica[n]; if (n < tablica.length-1) { n = (n+1); } else { n = 0; } setTimeout("wiadomosc("+n+")", czas); } </script> |
Tu mała, ale ważna uwaga do kodu funkcji. Na stronie linijki dotyczące opisów tzn. np. tablica[n] = "" i tu następuje treść pierwszej informacji są "złamane" tzn. wygląda jakby był wciśnięty ENTER przed wyrażeniem kolejny tekst. Nie wolno łamać linii w kodzie strony - u mnie na stronie poprostu nie zmieściła się w linijce natomiast jeżeli podejrzysz kod źródłowy to zobaczysz, że jest w jednej linijce.
W sekcji body umieść następujący wpis:
|
<div id="wiadomosc"> </div> |
W miejscu gdzie umieścisz powyższy wpis, skrypt będzie wyświetlał informacje.
Kolejną ważną rzeczą są style CSS. Umieść je w sekcji head w znaczniku style:
|
<style type="text/css"> |
Aby sterować wyglądem - zmieniaj style CSS. Możesz dodawać tło, zmieniać kolor liter itd...
Ostatni element do umieszczenia to wywołanie funkcji w momencie załadowania się strony. Wpis wygląda następująco:
| <body onload="wiadomosc(0);"> |
Jak widać chodzi o parametr znacznika body.