Kurs języka HTML i CSS

Poradnik webmastera

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

Obiekt Window

Email Drukuj PDF

Obiekt window znajduje się na szczycie hierarchii obiektów i reprezentuje okno przeglądarki. Jest też obiektem domyślnym, tzn. do jego metod i właściwości można się odwoływać bezpośrednio, z pominięciem jego nazwy. Na przykład zastosowana na początku kursu instrukcja alert("tekst") wyświetlająca okno dialogowe ze zdefiniowanym tekstem to nic innego jak metoda obiektu window, wywołanie mogłoby zatem wyglądać również następująco:

window.alert("tekst");

Tak samo jest z pozostałymi składowymi tego obiektu. Listę składowych dla danej przeglądarki można uzyskać po zastosowaniu skryptu z listingu 4.1.

Listing 4.1. Wyświetlenie składowych obiektu window

<script type="text/javascript">

for(index in window){

  document.write(index +" = " + window[index] + "<br />");

}

</script>

Właściwości obiektu window

Obiekt window zawiera wiele właściwości, niestety każda przeglądarka ma własny ich zestaw. W tabeli 4.1 zostały przedstawione najpopularniejsze z nich, wraz z informacją, które z przeglądarek je obsługują, a także czy dana właściwość występuje w standardzie rekomendowanym przez organizację W3C.

Tabela 4.1. Wybrane właściwości obiektu window

Nazwa

Znaczenie

Dostępność

closed

Ustawiona na true oznacza, że okno zostało zamknięte.

FF, IE, NN, OP, W3C

defaultStatus

Domyślny tekst wyświetlany na pasku stanu.

FF, IE, NN, OP, W3C

document

Obiekt document zawierający elementy wyświetlanej witryny.

FF, IE, NN, OP, W3C

event

Zawiera odniesienie do obiektu typu Event opisującego ostatnie zdarzenie. Używany w modelu zdarzeń przeglądarki Internet Explorer.

IE, OP

frames

Tablica zawierająca odniesienia do ramek danego okna.

FF, IE, NN, OP

history

Obiekt History zawierający historię odwiedzin.

FF, IE, NN, OP, W3C

innerWidth

Wewnętrzna wysokość obszaru okna.

NN, OP, FF

innerHeight

Wewnętrzna szerokość obszaru okna.

NN, OP, FF

length

Liczba ramek potomnych zawartych w oknie.

FF, IE, NN, OP, W3C

location

Obiekt Location zawierający URL aktualnego dokumentu.

FF, IE, NN, OP, W3C

locationbar

Obiekt pozwalający na określanie, czy ma być widoczny pasek adresu. Posiada właściwość visible, której można przypisywać wartości true i false.

NN, FF

menubar

Obiekt pozwalający na określanie, czy ma być widoczny pasek menu. Posiada właściwość visible, której można przypisywać wartości true i false.

NN, FF

name

Nazwa bieżącego okna.

FF, IE, NN, OP, W3C

opener

Jeżeli bieżące okno zostało otwarte za pomocą metody open, właściwość opener zawiera odniesienie do okna źródłowego.

NN, OP, FF, W3C

outerHeight

Zewnętrzna wysokość obszaru okna.

NN, OP, FF, W3C

outerWidth

Zewnętrzna szerokość obszaru okna.

NN, OP, FF, W3C

pageXOffset

Przesunięcie bieżącej strony w poziomie względem lewego górnego rogu okna (szerokość zasłoniętego obszaru).

NN, OP, FF, W3C

pageYOffset

Przesunięcie bieżącej strony w pionie względem lewego górnego rogu okna (wysokość zasłoniętego obszaru).

NN, OP, FF, W3C

parent

Odniesienie do okna źródłowego.

FF, IE, NN, OP, W3C

personalbar

Obiekt pozwalający na określanie, czy ma być widoczny pasek ustawień osobistych. Posiada właściwość visible, której można przypisywać wartości true i false.

NN, FF

scrollbars

Obiekt pozwalający na określanie, czy mają być widoczne paski przewijania. Posiada właściwość visible, której można przypisywać wartości true i false.

NN, FF

self

Odniesienie do bieżącego aktywnego okna lub ramki.

FF, IE, NN, OP, W3C

status

Tekst wyświetlany na pasku stanu.

FF, IE, NN, OP, W3C

statusbar

Obiekt pozwalający na określanie, czy ma być widoczny pasek stanu. Posiada właściwość visible, której można przypisywać wartości true i false.

NN, FF

toolbar

Obiekt pozwalający na określanie, czy ma być widoczny pasek narzędziowy. Posiada właściwość visible, której można przypisywać wartości true i false.

NN, FF

top

Odniesienie do okna znajdującego się najwyżej w hierarchii.

FF, IE, NN, OP, W3C

window

Odniesienie do bieżącego okna lub ramki

FF, IE, NN, OP

Gdyby zatem istniała potrzeba, aby podczas ładowania witryna umieszczała na pasku stanu własny tekst, należałoby w sekcji body umieścić prosty skrypt w postaci widocznej na listingu 4.2.

Listing 4.2. Zmiana napisu na pasku stanu

<script type="text/javascript">

window.status = "Nowy tekst...";

</script>

Aby natomiast poznać rozmiary okna wskazywane przez obiekt window (w przeglądarkach Firefox, Netscape Navigator i Opera), można użyć skryptu z listingu 4.3.

Listing 4.3. Wyświetlenie rozmiarów okna przeglądarki

<script type="text/javascript">

document.write("innerWidth = " + window.innerWidth + "<br />");

document.write("innerHeight = " + window.innerHeight + "<br />");

document.write("outerWidth = " + window.outerWidth + "<br />");

document.write("outerHeight = " + window.outerHeight + "<br />");

</script>

Metody obiektu Window

Poniżej zebrane zostały najpopularniejsze metody obiektu window, część z nich została omówiona dokładniej wraz z odpowiednimi przykładami zastosowania, a pozostałe umieszczono w tabeli znajdującej się w podpunkcie „Pozostałe popularne metody”.

Metoda alert

Wywołanie: alert(argumenty)

Dostępność: FF, IE4, NN3, OP9

Metoda alert była już prezentowana i powoduje wyświetlenie okna dialogowego ze zdefiniowaną zawartością. Podobnie jak w przypadku document.write, można wyświetlać zarówno ciągi znaków (które muszą być ujęte w znaki cudzysłowu lub apostrofu), jak i wartości liczbowe oraz zawartość zmiennych. Gdy argumentem będzie obiekt, zostanie wyświetlona wraz z jego nazwą taka informacja, jak na rysunku 4.2.

Rysunek 4.2. Obiekt jako argument metody alert

Metoda clearInterval

Wywołanie: clearInterval(id)

Dostępność: FF, IE4, NN4, OP9

Zatrzymuje timer o identyfikatorze id uruchomiony przez wywołanie setInterval. Przykład wykorzystania zostanie podany przy opisie metody setInterval.

Metoda clearTimeout

Wywołanie: clearTimeout(id)

Dostępność: FF, IE4, NN4, OP9

Zatrzymuje timer o identyfikatorze id uruchomiony przez wywołanie setTimeout. Przykład wykorzystania zostanie podany przy opisie metody setTimeout.

Metoda confirm

Wywołanie: confirm(argumenty)

Dostępność: FF, IE4, NN4, OP0

Metoda confirm wyświetla okno dialogowe zawierające przyciski OK i Anuluj (Cancel). Postać tego okna będzie podobna we wszystkich przeglądarkach (rysunek 4.3).

Rysunek 4.3. Okno wyświetlane przez metodę confirm

Metoda pozwala stwierdzić, który przycisk został kliknięty przez użytkownika, zwraca bowiem wartość true, jeśli wybrany został przycisk OK, oraz false, jeśli był to przycisk Anuluj bądź okno dialogowe zostało zamknięte w inny sposób. W jaki sposób odczytać informację zwróconą przez wywołanie confirm, ilustruje skrypt z listingu 4.4.

Listing 4.4. Użycie metody confirm

<script type="text/javascript">

var result = confirm("Czy wyświetlić wszystkie dane?");

if(result == true){

  document.write("Został kliknięty przycisk OK.");

}

else{

  document.write("Został kliknięty przycisk Anuluj.");

}

</script>

Instrukcja if bada tu wartość zwróconą przez metodę confirm, a zapisaną w zmiennej pomocniczej. W zależność od tego, czy jest to true (kliknięto przycisk OK), czy false (kliknięto przycisk Anuluj), wyświetla na ekranie odpowiedni tekst.

Nie ma przy tym formalnej konieczności używania w instrukcji if warunku w postaci result == true, z powodzeniem można użyć konstrukcji skróconej typu if(result) — efekt działania będzie taki sam. Można również zrezygnować ze zmiennej pomocniczej result i wywołanie metody confirm umieścić bezpośrednio w if. Takie rozwiązanie zostało zaprezentowane na listingu 4.5.

Listing 4.5. Bezpośrednie użycie wartości zwróconej przez confirm

<script type="text/javascript">

if(confirm("Czy wyświetlić wszystkie dane?")){

  document.write("Został kliknięty przycisk OK.");

}

else{

  document.write("Został kliknięty przycisk Anuluj.");

}

</script>

Metoda moveBy

Wywołanie: moveBy(px, py)

Dostępność: FF, IE4, NN4, OP9

Metoda moveBy pozwala przesunąć okno przeglądarki (względem bieżącego położenia) o zadaną liczbę pikseli w pionie i (lub) w poziomie. Przesunięcie w poziomie jest określane przez argument px, a w pionie — przez py. Jeśli argument px jest dodatni, następuje przesunięcie w prawo, a jeśli jest ujemny — w lewo. Analogicznie: jeśli argument py jest ujemny, następuje przesunięcie w górę, a kiedy dodatni — w dół. Na listingu 4.6 został zaprezentowany prosty skrypt ilustrujący możliwości metody. Przesuwa on okno przeglądarki o 100 pikseli w prawo, następnie o 200 pikseli w lewo, a później o kolejne 100 pikseli w prawo, przywracając okno do położenia pierwotnego. Ponieważ zmiana położenia odbywa się w pętli for w krokach co jeden piksel, osiągamy płynną animację ruchu.

Listing 4.6. Ilustracja działania metody moveBy

<script type="text/javascript">

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

  window.moveBy(1, 0);

}

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

  window.moveBy(-1, 0);

}

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

  window.moveBy(1, 0);

}

</script>

Metoda moveTo

Wywołanie: moveTo(px, py)

Dostępność: FF, IE4, NN4, OP9

Metoda przesuwa okno tak, aby jego lewy górny róg znalazł się w punkcie wskazywanym przez argumenty px i py, przy czym pierwszy określa współrzędną x, a drugi współrzędną y. Aby zatem ustawić okno w lewym górnym rogu ekranu, należy zastosować wywołanie:

window.moveTo(0, 0);

Metoda open

Wywołanie: open(URL, nazwa [, właściwości[, zamiana]]])

Dostępność: FF, IE4, NN4, OP9

Metoda open otwiera nowe okno o nazwie nazwa, z dokumentem wskazywanym przez URL, o ile taka możliwość nie została zablokowana w opcjach konfiguracyjnych przeglądarki (większość współczesnych przeglądarek udostępnia taką możliwość). Wygląd okna określa argument właściwości. Może on przyjmować parametry przedstawione w tabeli 4.2. Poszczególne parametry należy oddzielać od siebie wyłącznie znakami przecinka (przykład przedstawiony poniżej).

Tabela 4.2. Parametry dla metody open

Parametr

Znaczenie

Dopuszczalne wartości

Przykład

Dostępność

left

Współrzędna x lewego górnego rogu okna.

liczby całkowite

left=100

FF, IE, NN, OP

top

Współrzędna y lewego górnego rogu okna.

liczby całkowite

top=10

FF, IE, NN, OP

height

Wysokość obszaru okna zawierającego treść strony, włącznie z wysokością poziomego paska przewijania.

liczby całkowite, minimalna wartość: 100

height=200

FF, IE, NN, OP

width

Szerokość obszaru okna zawierającego treść strony, włącznie z wysokością pionowego paska przewijania.

liczby całkowite, minimalna wartość: 100

width=200

FF, IE, NN, OP

outerHeight

Zewnętrzna wysokość całego obszaru okna, włącznie z wszystkimi paskami narzędziowymi.

liczby całkowite, minimalna wartość: 100

outerHeight=200

FF, NN, OP

outerWidth

Zewnętrzna szerokość całego obszaru okna, włącznie z wszystkimi paskami narzędziowymi.

liczby całkowite, minimalna wartość: 100

outerWidth=200

FF, NN, OP

innerHeight

Wysokość obszaru okna zawierającego treść strony (odpowiednik height), włącznie z wysokością poziomego paska przewijania.

liczby całkowite, minimalna wartość: 100

innerHeight=200

FF, NN, OP

innerWidth

Szerokość obszaru okna zawierającego treść strony (odpowiednik width), włącznie z wysokością pionowego paska przewijania.

liczby całkowite, minimalna wartość: 100

innerWidth=200

FF, NN, OP

menubar

Określa, czy ma być widoczny pasek menu.

yes, no

menubar=yes

FF, IE, NN

toolbar

Określa, czy ma być widoczny pasek narzędziowy (nawigacyjny).

yes, no

toolbar=yes

FF, IE, NN

location

Określa, czy ma być widoczny pasek adresu.

yes, no

location=yes

FF, IE, NN, OP

directories

Określa, czy ma być widoczny pasek ustawień osobistych (Personal Toolbar). Jego zawartość zależy od konkretnej przeglądarki.

yes, no

directories=yes

FF, IE, NN, OP

personalbar

Określa, czy ma być widoczny pasek ustawień osobistych (Personal Toolbar). Odpowiednik opcji directories. Jego zawartość zależy od konkretnej przeglądarki.

yes, no

personalbar=yes

FF, NN

status

Określa, czy ma być widoczny pasek stanu (statusu).

yes, no

status=yes

FF, IE, NN, OP

resizable

Określa, czy wymiary okna mogą być zmieniane.

yes, no

resizable=yes

FF, IE, NN

scrollbars

Określa, czy w przypadku, kiedy dokument nie mieści się w oknie, mają być wyświetlane paski przewijania.

yes, no

scrollbars=yes

FF, IE, NN

dependent

Określa, czy nowe okno ma być zależne od okna otwierającego.

yes, no

dependent=yes

FF, NN

chrome

Pozwala otworzyć okno nieposiadające żadnego interfejsu.

yes, no

chrome=yes

FF, NN

modal

Określa, czy okno ma być modalne.

yes, no

modal=yes

FF, NN

dialog

Określa, czy okno ma być tworzone jako dialogowe.

yes, no

dialog=yes

FF, NN

minimizable

W przypadku okna dialogowego pozwala określić, czy ma ono posiadać przycisk minimalizacji.

yes, no

minimizable=yes

FF, NN

Opcjonalny argument zamiana ustawiony na true określa, że otwierany dokument ma się pojawić w historii otwieranych witryn jako nowy wpis, a ustawiony na false — że ma zamienić aktualny wpis. Metoda zwraca obiekt wskazujący nowe okno, pozwalający na wykonywanie na tym oknie innych operacji (wywoływanie metod, zmiana właściwości itp.).

Argument nazwa zamiast nazwy okna może też zawierać jedną z poniższych wartości:

_blank — odnośnik zostanie otwarty w nowym oknie lub nowej karcie (jest to zachowanie domyślne);

_parent — odnośnik zostanie otwarty w oknie (karcie) nadrzędnym;

_self — odnośnik zostanie otwarty w oknie (karcie) bieżącym;

_top — odnośnik zostanie otwarty w oknie (karcie) znajdującym się na szczycie hierarchii.

Aby zatem otworzyć nowe okno o rozmiarach 800×600 pikseli, o nazwie okno2, umiejscowione w lewym górnym rogu ekranu, zawierające stronę o adresie http://marcinlis.com, posiadające pasek nawigacyjny oraz adresu, należy zastosować wywołanie:

window.open("http://marcinlis.com", "okno2", "width=800,height=600,left=0,top=0,toolbar=yes,location=yes");

Metoda prompt

Wywołanie: prompt(str[, defStr])

Dostępność: FF, IE4, NN4, OP9

Metoda prompt wyświetla okno dialogowe z tekstem zdefiniowanym przez argument str, przyciskami OK i Anuluj (Cancel) oraz polem tekstowym, umożliwiające wprowadzenie danych przez użytkownika, tak jak jest to widoczne na rysunku 4.4.

Rysunek 4.4. Okno wyświetlane przez metodę prompt

W polu tekstowym wyświetlony zostanie ciąg defStr, o ile argument ten został podany w wywołaniu metody. Jeżeli nie zostanie podany, większość przeglądarek w polu tekstowym nie wyświetli nic (formalnie rzecz ujmując — wyświetli pusty ciąg znaków), jedynie Internet Explorer (nawet w najnowszych wersjach) wyświetla wtedy ciąg undefined. Dlatego też jeśli nie chcemy, aby w polu pojawił się jakikolwiek tekst, najlepiej stosować wywołanie w postaci:

prompt(tekst, "");

Wprowadzony przez użytkownika ciąg znaków jest zwracany jako wynik działania funkcji. Jeżeli nie zostaną wprowadzone żadne dane bądź w oknie zostanie kliknięty przycisk Anuluj (Cancel), wynikiem działania będzie wartość null. Przykładowy skrypt, który prosi użytkownika o podanie imienia, a następnie używa wprowadzonych danych do wyświetlenia powitania, mógłby wyglądać tak, jak przedstawiono to na listingu 4.7.

Listing 4.7. Ilustracja działania metody prompt

<script type="text/javascript">

var result = prompt("Podaj swoje imię:", "");

if(result == null || result == ""){

  document.write("Czemu nie chcesz podać swojego imienia?");

}

else{

  document.write("Cześć " + result + ". Miło Cię powitać na naszej stronie!");

}

</script>

Metoda setInterval

Wywołanie: setInterval(exp, mtime)

Dostępność: FF, IE4, NN4, OP9

Metoda setInterval przetwarza wyrażenie (lub wywołuje funkcję) wskazane przez exp co mtime milisekund. Zwraca identyfikator, który może być użyty do zatrzymania zliczania czasu przez wywołanie clearInterval. Przykład wykorzystania metody setInterval jest widoczny na listingu 4.8.

Listing 4.8. Proste użycie metody setInterval

<script type="text/javascript">

var i = 0;

function changeStatusBarText()

{

  window.status = i++;

}

setInterval("changeStatusBarText();", 1000);

</script>

Wywołanie setInterval("changeStatusBarText();", 1000); powoduje, że co 1000 milisekund będzie wywoływana funkcja changeStatusBarText. W tej funkcji znajduje się instrukcja zmieniająca napis na pasku stanu na wartość reprezentowaną przez zmienną i. Ponieważ i jest przy każdym wywołaniu zwiększane o 1, na pasku co sekundę pojawi się nowa wartość większa o jeden od poprzedniej. Czynność ta będzie powtarzana dopóty, dopóki nie zostanie opuszczona strona zawierająca skrypt. Gdyby wyświetlanie miało zakończyć się na przykład po osiągnięciu przez i wartości 10, należałoby zmodyfikować funkcję changeStatusBarText tak, by wywoływała metodę clearInterval. Skrypt miałby wtedy postać przedstawioną na listingu 4.9.

Listing 4.9. Zatrzymanie zegara uruchomionego przez setInterval

<script type="text/javascript">

var i = 0, id;

function changeStatusBarText()

{

  window.status = i++;

  if(i > 10) clearInterval(id);

}

id = setInterval("changeStatusBarText();", 1000);

</script>

Pojawiła się tu nowa globalna zmienna id, która przechowuje identyfikator zwrócony przez wywołanie metody setInterval. W funkcji changeStatusBarText została natomiast umieszczona instrukcja warunkowa badająca stan zmiennej i. Kiedy wartość tej zmiennej przekroczy 10, zegar jest wyłączany przez wywołanie clearInterval(id).

Napiszmy jeszcze skrypt, który po uruchomieniu zacznie wyświetlać co 200 milisekund na pasku stanu wartości rosnące, po osiągnięciu wartości 10 zmieni kierunek odliczania, po osiągnięciu zera ponownie go zmieni, a po wykonaniu 5 takich zmian zatrzyma się. Tak działający skrypt znajduje się na listingu 4.10.

Listing 4.10. Sterowanie zmianami cyklicznymi

<script type="text/javascript">

var i = 0, id, j = 1, changes = 0;

function changeStatusBarText()

{

  window.status = i;

  i += j;

  if(i > 10 || i < 0){

    j = -j;

    i += j;

    if(++changes >= 5) clearInterval(id);

  }

}

id = setInterval("changeStatusBarText();", 200);

</script>

Pojawiły się tu dwie nowe zmienne. Pierwsza to j, która zawiera wartość, o jaką będzie powiększana zmienna i przy każdym wywołaniu funkcji changeStatusBarText. Druga to changes — zliczająca liczbę zmian kierunku odliczania. Wywołanie funkcji setInternval ma praktycznie taką samą postać jak w poprzednim przykładzie, inny jest jedynie drugi argument. Tym razem jest to 200, co oznacza, że funkcja changeStatusBarText będzie wywoływana co 200 milisekund.

W funkcji changeStatusBarText najpierw właściwości status obiektu przypisywany jest stan zmiennej i. Przy pierwszym wywołaniu będzie to wartość 0, gdyż taka wartość została przypisana zmiennej przy inicjacji. Następnie do wartości i dodawana jest aktualna wartość j. Ponieważ początkowo j jest równe 1, na pasku stanu zaczną się pojawiać kolejne wartości całkowite, począwszy od 0.

Instrukcja warunkowa if bada złożony warunek i > 10 || i < 0. Wnętrze tej instrukcji jest zatem wykonywane albo wtedy, gdy i jest większe od 10, albo też, gdy i jest mniejsze od zera. W takiej sytuacji niezbędne jest odwrócenie kierunku zliczania. Czyli jeżeli i rosło, to musi zacząć maleć, bądź też, jeśli i malało, to musi zacząć rosnąc. Jest to osiągane w bardzo prosty sposób, przez odwrócenie znaku zmiennej j (instrukcja j = -j;).

Występująca wewnątrz if instrukcja i += j; powoduje, że będą wykonywane pełne cykle, czyli odliczanie od 0 do 10, następnie od 10 do 0 itd. (a także, że nie pojawią się wartości –1 i 11). Czyli zarówno 0 (począwszy od 2. cyklu), jak i 10 będą wyświetlane przez 400 milisekund (po 200 na każdy cykl). Jako ćwiczenie do samodzielnego wykonania można polecić wykonanie takiej modyfikacji skryptu, aby 0 i 10 zawsze były wyświetlane tylko przez 200 milisekund.

Wewnętrzna instrukcja warunkowa if bada warunek ++changes >= 5. Najpierw jest tu zwiększana wartość zmiennej changes, a następnie jest ona porównywana z wartością 5. Jeżeli changes osiągnie 5, oznacza to, że została wykonana założona przez nas liczba cykli i należy zakończyć wywoływanie funkcji changeStatusBarText. Dokonujemy tego przez wyzerowanie timera za pomocą wywołania funkcji clearInterval.

Wykonajmy jeszcze jeden przykład. Przy użyciu poznanego wcześniej obiektu Date oraz metody setInterval można pokusić się o napisanie skryptu, który na pasku statusu będzie wyświetlał aktualny czas. Jak widać na listingu 4.11, nie jest to skomplikowane zadanie.

Listing 4.11. Wyświetlenie zegara pokazującego aktualny czas

<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;

  window.status = czas;

 

}

showTime();

setInterval("showTime();", 1000);

</script>

Czas jest pobierany w funkcji showTime za pomocą wywołań metod getHours, getMinutes i getSesonds i jest zapisywany w zmiennej czas, której zawartość jest następnie przypisywana właściwości status obiektu window. Funkcja showTime jest natomiast wywoływana co sekundę dzięki metodzie setInterval.

Metoda setTimeout

Wywołanie: setTimeout(exp, mtime)

Dostępność: FF, IE, NN, OP

Przetwarza wyrażenie (lub wywołuje funkcję) exp po czasie mtime milisekund. Zwraca identyfikator, który może być użyty do zatrzymania zliczania czasu przez wywołanie clearTimeout. Warto w tym miejscu wspomnieć o różnicy, jaka występuje pomiędzy setTimeout a setInterval. Choć wyglądają podobnie, mają nieco inne działanie. Otóż setInterval powoduje działanie co zadany czas, a setTimeout po zadanym czasie. A więc w pierwszym przypadku mamy do czynienia z działaniem cyklicznym, a w drugim — z jednorazowym.

Jeśli zatem w pięć sekund po wczytaniu strony miałoby się wyświetlić okno dialogowe, to należy zastosować przykładowe wywołanie:

setTimeout("alert('tekst');", 5000);

Metoda setTimeout może być przy tym użyta tak, by wywoływania pewnej funkcji były cykliczne. Po prostu oprócz startowego wywołania należy w funkcji umieścić kolejne wywołanie. Schemat takiej konstrukcji jest następujący:

function funkcja([argumenty])

{

  //instrukcje

  setTimeout("funkcja([argumenty]);", czas);

}

setTimeout("funkcja([argumenty]);", czas);

Korzystający z tej metody skrypt wyświetlający na pasku stanu kolejne wartości całkowite miałby zatem postać taką, jaka została zaprezentowana na listingu 4.12.

Listing 4.12. Symulacja wywołań cyklicznych za pomocą metody setTimeout

<script type="text/javascript">

var i = 0;

function changeStatusBarText()

{

  window.status = i++;

  setTimeout("changeStatusBarText();", 1000);

}

setTimeout("changeStatusBarText();", 1000);

</script>

Pozostałe popularne metody

W tabeli 4.3 zostały zebrane pozostałe popularne metody obiektu window.

Tabela 4.3. Wybrane metody obiektu window

Metoda

Opis

Dostępność

back()

Odpowiada wciśnięciu przycisku Back (Wstecz) w przeglądarce.

FF, NN, OP

blur()

Usuwa fokus z bieżącego okna.

FF, IE, NN, OP

close()

Zamyka okno przeglądarki.

FF, IE, NN, OP

find([str[, caseSensitive, backward]])

Umożliwia przeszukanie treści bieżącego okna pod kątem występowania ciągu str. Jeżeli nie zostanie podany żaden argument, przeglądarka wyświetli okno dialogowe umożliwiające wprowadzenie danych. Parametr caseSensitive ustawiony na true oznacza uwzględnianie wielkości liter, natomiast backward ustawiony na true oznacza przeszukiwanie od końca dokumentu.

FF, NN

focus()

Ustawia fokus na bieżącym oknie.

FF, IE, NN, OP

forward()

Odpowiada wciśnięciu przycisku Forward (W przód) w przeglądarce.

FF, NN, OP

home()

Odpowiada wciśnięciu przycisku Home (Start, Główna itp.) w przeglądarce.

FF, NN, OP

print()

Drukuje zawartość okna.

FF, IE, NN, OP

resizeBy(px, py)

Przemieszcza prawy dolny róg okna do punktu o współrzędnych px, py.

FF, IE, NN, OP

resizeTo(szerokość, wysokość)

Zmienia rozmiary okna.

FF, IE, NN, OP

scroll(x, y)

Przesuwa zawartość okna do współrzędnych x, y. Metoda przestarzała — o ile to możliwe, należy korzystać z metody scrollTo.

FF, IE, NN, OP

scrollBy(px, py)

Przesuwa zawartość okna o px pikseli w poziomie i py pikseli w pionie. Metoda użyteczna tylko w przypadku, kiedy zawartość dokumentu nie mieści się w oknie.

FF, IE, NN, OP

scrollTo(x, y)

Przesuwa zawartość okna do współrzędnych x, y.

FF, IE, NN, OP

stop()

Odpowiada wciśnięciu przycisku Stop w przeglądarce.

FF, NN, OP

 

Nowości Helionu

Statystyki

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