Kontakt

Przykładowe skrypty:

JavaScript to język skryptowy. Kodujac w JavaScript zyskujesz dynamiczne efekty na swojej stronie WWW.

Zobacz również:

LINKI:
Przepisy
Gry dla dzieci

W tym miejscu znajdziesz odnośniki do stron znajomych oraz do stron tematycznie powiązanych z tematyką mojego serwisu.

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.

Tak wygląda rezultat działania skryptu. Możliwe jest ustawienie szybkości zmiany tekstu poprzez zmianę wartości zmiennej czas. Czas podawany jest w ms (np. 8000ms = 8 sekund).

 

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">
#wiadomosc {
width: 300px;
border: 1px solid #333333;
background-color: #ffffff;
height: 100px;
margin: 0px 0px 0px 10px;
padding : 4px;
}
</style>

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 widzisz chodzi o parametr znacznika body.


UWAGA
Po zakodowaniu strony internetowej zawsze sprawdź czy prawidłowo wyświetla się we wszystkich popularnych przeglądarkach internetowych (np.: Internet Explorer, Mozilla Firefox, Opera).




Copyright © Atom 2006