Pożyteczne drobiazgi


Przykład 5 - ruchomy napis

IE, Netscape, Opera

W pasku statutu przeglądarki możemy umieścić przewijający się tekst. Wystarczy do tego jedynie kilka linii JavaScriptu, które należy umieścić w nagłówku dokumentu HTML, pomiędzy znacznikami <HEAD>.

Krok 1

Zaczynamy od zdefiniowania dwóch zmiennych: tekstowej napis, w której między znakami cudzysłowu można umieścić dowolny ciąg znaków (na końcu wstaw kilka spacji), oraz zmiennej liczbowej pozycja.

Krok 2

Kolejny krok to definicja funkcji przewijanaWiadomosc (jej nazwa zależy tylko od Ciebie). Na początku (linia 5) umieszczamy w niej instrukcję wyświetlania tekstu w pasku statutu. Na jego zawartość składają się dwa fragmenty zmiennej napis: od litery, której kolejność w tekście odpowiada wartości zmiennej pozycja do końca, oraz od początku (zero oznacza pierwszą literę) do zmiennej pozycja. W linii 6 zwiększamy wartość zmiennej pozycja, co powoduje przesunięcie tekstu. Linia 7 sprawia, że po osiągnięciu określonej wartości przez zmienną pozycja napis jest wyświetlany od początku. W linii 8 określamy, jak szybko wiadomość będzie się przesuwać. Opóźnienie wyrażone jest w milisekundach. Linia 9 zamyka funkcję.

Krok 3

W linii dziesiątej umieszczamy wywołanie, które uruchomi zdefiniowaną przez nas funkcję.

1: <SCRIPT language="JavaScript">

2: napis = "Witamy na naszej stronie ";

3: pozycja = 0;

4: function przewijanaWiadomosc() {

5: window.status = napis.substring(pozycja, napis.length) + napis.substring(0, pozycja);

6: pozycja = pozycja + 1;

7: if (pozycja > napis.length) pozycja = 0;

8: window.setTimeout("przewijanaWiadomosc()",100);

9: }

10: przewijanaWiadomosc();

11: </SCRIPT>

Przykład 6 - okna

IE, Netscape, Opera

Za pomocą języka JavaScript można otwierać i zamykać okna przeglądarki. To właśnie w ten sposób powstają uciążliwe pop-upy, ale funkcję tę możemy również wykorzystać do wygodnego zaprezentowania zawartości naszej strony, w szczególności kolekcji grafiki, zdjęć itp. W tym celu stworzymy dwa dokumenty: pierwszy z miniaturką grafiki i skryptem otwierającym drugi dokument, w którym znajdzie się pełno wymiarowy obraz oraz kolejny skrypt, tym razem zamykającym nowo otwarte okno.

Dokument 1

Pierwszy dokument składa się z dwóch części: prostego skryptu JavaScript, oraz z fragmentu kodu HTML, umieszczającego na stronie miniaturkę grafiki.

Krok 1

Pop-up utworzony za pomocą JavaScriptu nie musi kojarzyć się z natrętną reklamą. Możemy w nim prezentować pliki graficzne, co odbędzie się bez przeładowywania całej strony.

Pop-up utworzony za pomocą JavaScriptu nie musi kojarzyć się z natrętną reklamą. Możemy w nim prezentować pliki graficzne, co odbędzie się bez przeładowywania całej strony.

Zaczynamy od napisania skryptu. Oprócz deklaracji funkcji o nazwie otwórz (linia 2), skrypt zawiera tylko jedno polecenie - Open (jest to tzw. metoda), która otworzy nowe okno. Umieszczamy w nim pomiędzy cudzysłowami następujące atrybuty: adres strony (zamknij_okno.html), nazwę nowego okna (Zamknij), a na końcu parametry tegoż okna, oddzielone od siebie przecinkami. W naszym przypadku są to wysokość i szerokość wyrażone w pikselach (odpowiadają rozmiarom grafiki, którą chcemy pokazać w nowym oknie) oraz zablokowanie rozmiarów okna - nie można go rozciągnąć myszką.

Krok 2

Linie 6 i 7 umieszczają na naszej stronie w postaci miniaturki grafiki odnośnik do nowego okna. W linii 7 widzimy atrybut href. Większość z nas przyzwyczaiła się, że zawiera on adres strony !WWW. Tym razem jednak przechowuje on wywołanie, które po kliknięciu w obrazek uruchamia naszą funkcję otwórz.

1: <SCRIPT language="JavaScript">

2: function otworz() {

3: open ("zamknij_okno.html","Zamknij",

"width=500,height=500,resizable=no");

4: }

5: </SCRIPT>

6: <a href="javascript:otworz()">

7: <img src="grafika_mala.jpg"></a>

Jeśli grafiki na Twojej stronie mają jednakowe rozmiary, wystarczy przy każdej z nich umieścić wywołanie tej samej funkcji. W przeciwnym wypadku dla każdej grafiki należy zdefiniować oddzielną funkcję otwierającą okno o odpowiednich rozmiarach. Pamiętaj przy tym, że funkcje muszę mieć różne nazwy, np. otworz1, otworz2 itd.

Dokument 2

Nowe okno, które wywoła funkcja otwórz z pierwszego dokumentu, prezentuje jedynie wybraną przez nas grafikę i posiada tę właściwość, że przy kliknięciu w obrazek zostanie automatycznie zamknięte. Co więcej, wielkość okna odpowiada rozmiarom grafiki.

Krok 1

W linii 1 w znaczniku BODY umieszczam funkcję obsługi zdarzeń onClick. W momencie kliknięcia w zawartość strony uruchomi ona przypisaną jej funkcję, w naszym przypadku jest to metoda close JavaScripu, która zamknie otwarte okno.

Krok 2

Linia 2 zawiera znacznik IMG, w którym podajemy ścieżkę dostępu i nazwę grafiki. Dodatkowo przesuwamy nasz obrazek, tak aby dokładnie przylegał do krawędzi okna. Służą do tego atrybuty margin-left (lewy margines) oraz margin-top (górny margines).

1: <BODY onClick="JavaScript:window.close()">

2: <IMG style="margin-left:-10; margin-top=-15" border="0" src="grafika_duza.jpg">

3: </BODY>

Przykład 7 - czas

IE, Netscape, Opera

Częstą praktyką jest umieszczanie na stronie WWW informacji o dacie ostatniej modyfikacji. Pozwala to odwiedzającym zorientować się na ile nasza strona jest aktualna. Umieszczając ręcznie datę w kodzie HTML, trzeba pamiętać o tej czynności, gdy dokonujemy zmian. Może nas w tym wyręczyć JavaScript, który automatycznie wyświetli datę ostatniej modyfikacji pliku, odbierając ją od serwera, na którym znajduje się Twoja strona. Zadanie to realizuje składowa lastModified obiektu document (linia 3). Cały skrypt (linie 2-4) można wstawić w dowolnym miejscu dokumentu HTML pomiędzy znacznikami BODY.

1: <P>Ostatnia aktualizacja:

2: <SCRIPT>

3: document.write(document.lastModified);

4: </SCRIPT>

5: </P>