Mini-Kurs JavaScript (część II)

MINI-KURS JAVASCRIPT - część II

Pasek statusu

Status jest to ten pasek na dole ekranu, gdzie wyświetlany jest adres linki. Można na nim wyświetlić dowolny tekst. Aby na pasku był jakiś domyślny tekst cały czas, należy w bloku <HEAD> dokumentu wpisać polecenie:

defaultStatus="Komentarz"

Nie jest koniecznością, by polecenie domyślnego statusu było w wyżej wymienionym bloku. Jeżeli jest to jednak ważny komunikat, to zostanie wyświetlony przed załadowaniem całej strony, ponieważ już na samym początku zostanie wczytany do przeglądarki.

Jest jeszcze inna możliwość zmieniania paska statusu, podczas zdarzenia. Wtedy należy zdarzenie przypisać do np. linki:

<IMG SRC="rysunek.gif" onMouseOver="window.status='Komentarz'; return true">

Zdarzenie onMouseOver jest aktywne tylko wtedy, gdy myszka znajdzie się nad obiektem.

Jeżeli chodzi o window.status, to Netscape honoruje tylko aktywne elementy, czyli linki. Oznacza to, że najeżdżając na przycisk nic nie zobaczymy na pasku statusu. Ponadto polecenie może być równie dobrze wywołane tylko poprzez instrukcję status. Jest tak dlatego, że obiekt window jest obiektem domyślnym i można go opuścić.

Okienka dialogowe

Istnieją trzy typy okienek dialogowych:

alert - powoduje wyświetlenie komunikatu na ekranie, posiada tylko przycisk OK

confirm - powoduje wyświetlenie komunikatu na ekranie z możliwością wyboru pomiędzy przyciskami OK lub Anuluj (Cancel)

prompt ("Komunikat","domyślna") - daje możliwość wprowadzenia własnych danych. 'Komunikat' jest tekstem pojawiającym się w okienku, 'domyślna' jest wartością domyślną wprowadzanych danych.

W poniższym przykładzie instrukcja document.URL zwraca adres dokumentu. Zdarzenie onClick przypisane przyciskowi wygeneruje komunikat z adresem tej strony.

<INPUT TYPE=Button VALUE=Kliknij onClick="alert(Adres URL to:'+document.URL)">

W tym przypadku pojawi się okienko, gdzie użytkownik będzie proszony o potwierdzenie. Jeżeli potwierdzi (przez kliknięcie przycisku OK), to zostanie zwrócona wartość true i zostaną wykonane "instrukcje". W przypadku anulowania zwrócona wartość będzie równa false. confirm zwróci wartość w zależności od odpowiedzi. Instrukcja if jest poleceniem warunkowym

<INPUT TYPE=Button VALUE=Kliknij onClick="if (confirm('Komentarz')) {instrukcje}">

Okienko prompt pozwla pobrać dane od użytkownika. Poniższe instrukcje pozwolą wygodnie przejść do dowolnej strony internetowej. Zmienna Adres przyjmie adres zwróconej przez okienko. Warunek if sprawdza poprawność. Gdy klikniemy na Anuluj, wtedy zostanie zwrócona wartość null i nie zostanie wywołana żadna strona. Zabezpieczenie sprawdzi, czy zwrócona wartość jest różna od null, by nie nastąpiło wywołanie pustej strony. A oto jak wygląda postać instrukcji:

<INPUT TYPE=Button onClick="Adres=prompt('Wprowadź adres strony:', 'http://www.serwer.pl'); if (Adres!=null) {location.href=Adres}">

Jeżeli używasz Explorera, to on wygeneruje okienko potwierdzające, czy chcesz zamknąć okno przeglądarki. Jest to zabezpieczenie, przed niepowołanymi skryptami.

W okienku dialogowym można zrzucić tekst do następnej linijki, służą do tego \n. Do tworzenia tabulacji służy \t.

Równocześnie z wywołaniem okienek dialogowych jest wywoływany dźwięk, taki sam, jak przy ostrzeżeniach. Musi być ustawiony w panelu sterowania.

Historia

Przeglądając strony możemy pomóc sobie przyciskami historii, by sprawniej się poruszać

history.back() załaduje stronę poprzednią,
history.go(0) przeładuje bieżącą stronę, czyli ją odświeży,
history.forward() przejdzie do strony następnej, jeżeli uprzednio została cofnięta.

Zastosowanie historii jest proste:

<INPUT TYPE=Button VALUE="Wstecz" onClick="history.back()">
<INPUT TYPE=Button VALUE="Odśwież" onClick="history.go(0)">
<INPUT TYPE=Button VALUE="Dalej" onClick="history.forward()">

Albo z udziałem rysunków. Jednak takiej opcji nie uznaje Netscape.

<IMG SRC="back.gif" onClick="history.back()" ALT="Wstecz">
<IMG SRC="kulka.gif" onClick="history.go(0)" ALT="Odśwież">
<IMG SRC="next.gif" onClick="history.forward()" ALT="Dalej">

A teraz wersja z rysunkami, którą obsłuży i Netscape i Explorera W tym przypadku w kodzie linki, nie rysunku, należy zadeklarować, że linkę obsłuży JavaScript. Alternatywnym rozwiązaniem jest użycie zdarzenia onClick:

<A HREF="javascript:history.back()"><IMG SRC="back.gif"></A>
<A HREF="javascript:history.go(0)"><IMG SRC="kulka.gif"></A>
<A HREF="javascript:history.forward()"><IMG SRC="next.gif"></A>

Samo przeładowanie strony może odbyć się też za pomocą innej instrukcji:

location.reload()

Chcąc się przenieść do dowolnej strony należy użyć polecenia do przeładowywania strony, ale jako argument podać odpowiednią wartość. Jest ona równa ilości stron w historii, o które należy się przesunąć. Przyjmie ujemną wartość dla stron już obejrzanych i dodatnią dla tych, z których wróciliśmy. Równie dobrze można tak zapisać powyższe przykłady:

history.go(-1) - cofnij
history.go(0) - przeładuj
history.go(1) - dalej

Netscape jest mniej tolerancyjny na różnorodność zastosowań tego samego apletu na różnych obiektach, podobnie jak stare przeglądarki. Wyżej wymieniona historia w przykładzie drugim nie będzie działała, bo nie jest on elementem aktywnym, co innego np. w nowym Explorerze.

Podobnie wartość zero podczas przeładowywania strony jest potrzebna tylko w przeglądarkach Netscape'a. Explorera obsłuży polecenie także z pustą wartością

Data i czas

JavaScript umożliwia poznanie aktualnego czasu i daty. Aktualny, czyli systemowy. Każdy element czasu jest pobierany przez inną funkcję.

getDate() zwraca dzień miesiąca,
getMonth() zwraca miesiąc, JavaScript uznaje styczeń jako 0, luty jako 1 itd.
getYear() zwraca dwie ostatnie cyfry roku,
getHours() zwraca godzinę,
getMinutes() zwraca minuty, jeżeli jest ona mniejsza od 10, to nie zwraca 07 sekund, ale 7.
getSeconds() zwraca sekundy, podobnie jak minuty.

Jeżeli chcemy, by strona wprowadziła na stronę podczas ładowania aktualny* czas, należy wprowadzić taki kod na stronie:

dzisiaj=new Date();
document.write("Godzina: "+dzisiaj.getHours()+":"+dzisiaj.getMinutes()+"<BR>" )
document.write("Data: "
+dzisiaj.getDate()+"."+dzisiaj.getMonth()+1+"."+dzisiaj.getYear()+"<BR>")

Godzina: 17:33
Data: 11.101.107
Godzina: 18:9
Data: 30.41.2000
Godzina: 14:39
Data: 28.41.2000
Sun May 28 14:39:59 UTC+0200 2000

Obiekt dzisiaj należy zdefiniować jako typ zmiennej new Date(), zawiera wszystkie informacje o dacie i czasie zgodnie z trzecim ww. formatem. Informacja jest jednak nie czytelna, dlatego można zwrócić konkretne informacje. Instrukcja document.write() spowoduje wypisane zawartości na ekranie przeglądarki. Między kolejnymi instrukcjami należy dać znak plusa.

Można także za pomocą jednej instrukcji pobrać aktualną datę lub czas:

teraz=new Date().getHour

W ten sposób bez pomocniczego obiektu, zawierającego datę i czas, można pobrać konkretną wartość.

Dla bardziej wymagających przedstawię pobieranie daty i czasu bez przerwy, dane będą stale odświeżane. Dane muszą być umieszczone w funkcji, by mogły być stale uaktualniane. W bloku HEAD należy umieścić taki skrypt:

function zegar() {
teraz=new Date();
godzina=teraz.getHours();
minuta=teraz.getMinutes();
sekunda=teraz.getSeconds();
czas=godzina+":"+minuta+":"+sekunda;
document.zegar.czas.value=czas; Ten kod podstawi w formularzu zegar, polu czas odpowiednią wartość.

dzien=teraz.getDate();
miesiac=teraz.getMonth()+1;
rok=1900+teraz.getYear();
data=dzien+"."+miesiac+"."+rok;
document.zegar.data.value=data; Ten kod podstawi w formularzu zegar, polu data aktualną datę.
setTimeout("zegar()",1000);} Ta linia spowoduje ponawianie funkcji zegar co 1 sekundę.

Należy jeszcze wywołać funkcję z bloku <BODY>, by była wykonywana niezależnie od jakiegokolwiek zdarzenia.

<BODY onLoad="zegar()">

Ponadto ważny jest formularz:

<FORM NAME="zegar">
Czas: <INPUT TYPE=Text NAME="czas">
Data: <INPUT TYPE=Text NAME="data">
</FORM>

JavaScript umożliwia także ustawianie daty i godziny. Wartość nie zmienia jednak czasu systemowego, ale przyjmuje za jego wartość wprowadzone dane. Zmiana jest tylko w obrębie JavaScript.

setDate() ustawia dzień miesiąca,
setMonth() ustawia miesiąc,
setYear() ustawia dwie ostatnie cyfry roku,
setHours() ustawia godzinę,
setMinutes() ustawia minuty,
setSeconds() ustawia sekundy.

Każda metoda ustawia w obiekcie zawierającym datę, tylko jeden element. Ustawiając dzień miesiąca, nie zmieniamy samego miesiąca i jeżeli nie był on zmieniony, to metody wyżej wymienione zwrócą systemowe dane. Metoda getDay() nie ma swojego odpowiednika, bo jest ustalana na podstawie daty.

Można też zmienić wszystkie dane na raz:

dzisiaj = new Date(99,4,12,15,24,15)

W tym przypadku data zostanie pobrana wg podanych danych, nie z czasu systemowego. Kolejne liczby odpowiadają wartościom: roku, miesiąca, dnia, godziny, minuty, sekundy. Aby wyciągnąć odpowiednie wartości, należy posłużyć się instrukcjami z pierwszej części.

A tak wygląda funkcja zwracająca zmieniony dzień systemowy. Metody ustawiające datę i czas muszą mieć argumenty, podobnie jak metody ww. Wartość Zmienna będzie równa jeden. Zostanie jej przyporządkowana wartość daty systemowej, z tą różnicą, że data ta wynosi zadaną wartość, czyli jeden. Pozostałe wartości godziny i daty obiektu Teraz pozostają wartościami systemowymi.

Teraz=new Date();
Zmienna=Teraz.getDate(Teraz.setDate(1))

Instrukcja warunkowa

Instrukcja warunkowa wykonuje odpowiednie polecenia w zależności od wartości zwróconej przez argument warunku. Ma ona następującą postać:

if (warunek) {instrukcje} else {instrukcje}

Jeśli warunek ma wartość true (jest prawdziwy), czyli został spełniony, to zostaną wykonane instrukcje z pierwszego nawiasu. W przeciwnym razie przyjmie wartość false i zostaną wykonane instrukcje z drugiego. Drugi nawias wraz z instrukcją else można opuścić, wtedy żadne instrukcje nie będą wykonywane, jeżeli warunek nie będzie spełniony.

Za zmienną System zostaje podstawiona wartość logiczna zwrócona przez okienko dialogowe. Następnie zmienna jest warunkiem w instrukcji wyboru:

System=confirm("Czy używasz systemu operacyjnego Windows?");
if (System) {alert('Komentarz 1')}
else {alert('Komentarz 2')}

W ostatniej linijce przed else nie stawia się średnika, bo Navigator nie wykona instrukcji warunkowej. Instrukcja działałaby nieprawidłowo, gdyby w drugiej linijce ww. przykładu znalazł się średnik. Pownien on się znaleźć, gdyby instrukcja else była w tej samej linijce, co instrukcja warunkowa if.

Forma wyżej wypisana jest bardzo przejrzysta. Można ją nieco skrócić. Zamiast konstrukcji if else proponuję zastosować nieco krótszą:

(warunek) ? {instrukcje gdy true} : {instrukcje gdy false}

Zasada działania jest identyczna, ale krótszy zapis. Instrukcje muszą się znajdować w odpowiednich dla siebie nawiasach. Jeżeli rezygnujemy z instrukcji w przypadku fałszu, należy pozostawić puste nawiasy. Powyższe instrukcje mogą równie dobrze wyglądać tak:

confirm("Czy używasz systemu Windows?") ? alert('Ja też') :
alert('A ja tak')

Pętle

Pętla jest blokiem instrukcji wykonywanym określoną ilość razy. JavaScript posiada dwa rodzaje pętli, wykorzystywanych w zależności od potrzeb. Pierwszy ma postać:

for(Zmienna; Warunek; Zmiana Indeksu) { instrukcje }

Zmienna jest wartością indeksu pętli. Warunek jest warunkiem zakończenia działania pętli. Może nim być także sama zmienna logiczna (boolean). Jeżeli zmienna przyjmie wartości wyższe niż 1, to przeglądarki przyjmą warunek jako true. Zmiana indeksu jest wyrażeniem modyfikującym wartość indeksu pętli, czyli przypisuje jej nową wartość. Polecenia znajdujące się w nawiasach klamrowych będą wykonywane dotąd aż indeks przestanie spełniać warunek. A oto prosta pętla, w której pojawi się pięć okienek z kolejnymi numerami:

for (i; i<=5; i++)
{alert('Okienko numer: '+i)}

Drugim rodzajem pętli jest pętla: while(warunek) {polecenia}. W tym przypadku polecenia będą wykonywane tak długo, jak długo warunek jest spełniony. Na przykład:

while(confirm('Czy chcesz, by to okienko pojawiało się dalej?')) {}}

Jak wspomniałem w Okienkach Dialogowych funkcja confirm zwraca wartość true lub false w zależności od kliknięcia na okienku dialogowym. W celu sprawdzenia wartości warunku pętla wykona instrukcje. W tym przypadku nie ma ich, dlatego bezpośrednio zostanie ponownie sprawdzony warunek pętli. Pętla powtórzy czynności, jeżeli otrzymana wartość będzie prawdziwa. Można to też zrobić za pomocą instrukcji warunkowej if, ale wtedy warunek byłby tylko raz rozpatrywany.

Zarówno w pętlach jak i instrukcji warunkowej można użyć wielokrotnego warunku. Korzystając z operatorów logicznych można zbudować warunek:

for (i=1; (i<10) && (i!=5); i++)

W takich przypadkach najlepiej używać nawiasów, by nie było wątpliwości, który warunek jest nadrzędny. Ponadto w ww. zmienna i przyjmie tylko wartości od 1 do 4. Dzieje się tak dlatego, że gdy zmienna przyjmie wartość 5 pętla zostanie przerwana, mimo, że drugi warunek wskazuje, że i może przyjmować wartości do 10. Ale warunkiem jest koniunkcja i jej wartość false powoduje przerwanie pętli. Podobnie dzieje się z instrukcją warunkową i każdym innym logicznym warunkiem.

Pętlę for można przerwać bez względu na to, czy wszystkie instrukcje zostały wykonane. Służy do tego instrukcja break.

Poniższy przykład sprawdza, czy w ciągu trzech prób padnie prawidłowa liczba. Jeżeli dobra odpowiedź będzie zwrócona wcześniej, niż za trzecim razem, to pętla zostanie przerwana.

X=20;
for (i=1; i<=3; i++) {
Odp=prompt("Ile wynosi kwadrat"'+X+"?");
if (Odp==X*X) break;}

Kolejną użyteczną instrukcją pętli for jest możliwość przekazania działania pętli do jej początku za pomocą continue. Wszystkie instrukcje, które zostały umieszczone w tej pętli, ale za instrukcją continue zostają pominięte. Pętla zostaje rozpoczęta z wartością nowego indeksu.

X=20;
for (i=1; i<=3; i++) {
Odp=prompt("Ile wynosi kwadrat"'+X+"?");
if (Odp=="") continue;
if (Odp==X*X) break;}

Ta funkcja jest taka sama, ale gdy wprowadzona wartość jest pusta, to wszystkie pozostałe instrukcje zostają pominięte i pojawia się kolejne okienko. Użytkownika nie zobaczy zmian, ale pętla będzie działała szybciej, chociaż przy takiej krótkiej pętli nie będzie to zauważalne.

Pewną odmianą pętli for jest pętla for in stosowana tylko do obiektów. Chcąc wykonać operację na wszystkich elementach obiektu można użyć tej pętli. Ma ona tę zaletę, że nie trzeba znać ilości elementów (ilość elementów mogła by się zmieniać). Pętla wykona instrukcje na wszystkich elementach.

Tablica=new Array(0,1,2,3,4,5);
for (i in Tablica) {Tablica[i]+=2};

Ta tablica posiada kilka elementów będących liczbami. Pętla spowoduje dodanie do każdego zmienną liczbową równą dwa. Wszystkie elementy zostały zwiększone. Słowo in jest integralną częścią pętli.

C.D. w trzeciej części kursu JavaScript

D.F.