Mini-Kurs JavaScript (część IV)

MINI-KURS JAVASCRIPT - część IV

Informacje o przeglądarce

W celu usprawnienia działania skryptów, można je dostosować do rodzaju przeglądarki. Jest to przydatne w bardziej rozbudowanych skryptach.
W tym celu należy sprawdzić, jaka przeglądarka wczytuje stronę.
Parametry przeglądarki zawiera obiekt navigator, można je sprawdzić w następujący sposób:

navigator.appName - nazwa,
navigator.appVersion -wersja
navigator.language - obsługiwany język.

W zaawansowanych skryptach bardziej pomocna jest wiedza, czy strona jest przeglądana za pomocą Explorera, czy Navigatora. Do tego celu można wykorzystać różnice między językiem skryptowym obsługiwanym przez Explorera,
a Navigatora. Fortel polega na tym, że w Explorerze nie istnieje obiekt layers
i podobnie Navigator nie rozpoznaje obiektu all.
Oto sposób jak rozpoznać przeglądarkę:

if (document.layers) {NN=1}
else {NN=0};
if (document.all) {IE=1}
else {IE=0}

Zmienne przyjmą wartości logiczne: true lub false, w zależności od wykrytej przeglądarki. Problem może się pojawić w starych wersjach lub tych, które obsługują oba obiekty. Zapis, można skrócić, a jego instrukcje pozostały identyczne:

NN=(document.layers)? true:false;
IE=(document.all)? true:false

Powyższe instrukcje warunkowe są opisane szerzej w instrukcjach wyboru.

Jeżeli używasz Explorera, to może się okazać, że nie jest znany język, wtedy otrzymana wartość będzie wynosić undefined.

Okna przeglądarki

JavaScript daje możliwość otwarcia dokumentu w nowym oknie przeglądarki.
Z tą różnicą od normalnego otwierania (z SHIFT-em w Explorerze), że nowe okno może mieć zadane parametry dotyczące wyglądu.

window.open("plik.htm",'nazwaOkna','parametry')

Jako pierwszy parametr występuje adres pliku do otwarcia.
Następnie możemy określić nazwę okna, która będzie pomocna przy ewentualnych odwołaniach się do tego okna za pomocą innych instrukcji skryptowych.
Na końcu, między pojedynczymi cudzysłowami występują parametry samego okna. Wszystkie parametry należy oddzielać przecinkami.
A teraz te parametry. Wszystkie, oprócz wielkości okna, przyjmują wartości logiczne yes/no.

toolbar - pasek nawigacji,
menubar - pasek menu,
location - pasek lokalizacji strony,
personalbar - pasek zakładek (w Navigatorze),
status - pasek statusu,
resizable - możliwość zmieniania rozmiarów okna,
scrollbars - paski przewijania,
directories - paski łącza,
copyhistory - określa, czy historia okna przeglądarki ma być skopiowana do nowego okna
fullscreen - określa czy okno ma być w wersji pełny ekran, bez żadnych pasków (tylko IE 4.0+),
height - wysokość okna,
width - szerokość okna,
left - odległość od lewej strony ekranu,
top - odległość od górnej strony ekranu.

Dwa ostatnie parametry są dostępne w nowszych wersjach przeglądarek. Ostateczna, przykładowa instrukcja może mieć taką postać:

window.open("plik.htm",'JavaScript','toolbar=no,menubar=no,location=no,
personalbar=no,scrollbars=no,directories=no,status=no,resizable=no,
width=450,height=300')

Trudność mogą sprawić odstępy między parametrami okna, które pomagają w czytelności zapisu. Netscape nieraz źle odczytuje spacje i nie stosuje się do właściwości. Polecenie otwarcia okna przeglądarki można także przyporządkować zmiennej. Tak, jak przedstawiłem poniżej. Łatwiej wtedy się do niego odwołać.

Kolejny ciekawy efekt można uzyskać poprzez otwieranie okna i decydowanie na bieżąco, co ma się w nim znaleźć.
Można w otwartym oknie, zamiast jakiegoś pliku, wpisać szybką stronę za pomocą normalnego HTML-a. Całość wygląda np. tak:

NoweOkienko=window.open();
NoweOkienko.document.open();
NoweOkienko.document.write ("<HTML><HEAD><TITLE>Witaj</TITLE></HEAD><BODY>Witaj</BODY></HTML>");
NoweOkienko.document.close();
NoweOkienko.focus();

W pierwszej linijce definiujemy zmienną, jako nowe okienko. Podobnie jak wyżej, można zdefiniować właściwości nowego okienka, w miejscu, gdzie podaje się plik do wczytania pozostaje wolne miejsce, czyli ''. Kolejne linijki wprowadzają kod strony. Wprowadzając kod strony należy pamiętać, że kolejne instrukcje kodu HTML nie mogą być rozdzielone znakiem końca linijki, czyli Enterem. Można ominąć ten problem wstawiając na końcu linijki koniec cudzysłowu i znak plus. Następną rozpocząć kolejnym znakiem cudzysłowu. Na końcu nowe okienko jest przywoływane na wierzch.

Skoro już jest metoda otwierająca okienka, należy jeszcze je zamknąć. Służy to tego metoda close(). Wywołanie jej, jest analogiczne, jak w przypadku otwierania okienek:

window.close()

Jeżeli nowe okno będzie wygenerowane dynamicznie, jak wyżej, to w celu zamknięcia go z poziomu okna, z którego zostało otwarte, należy użyć takiej instrukcji:

NoweOkienko.close()

Metoda zamykania okienek ma pewien mankament. Jeżeli użyjemy jej w zwykłym oknie przeglądarki, czyli takim, które nie zostało otwarte metodą open(), to przeglądarka zapyta o potwierdzenie tej czynności. Jeżeli okno powstało za pomocą tej metody, to zamknie się bez żadnym potwierdzeń.

Obydwie omówione metody zarówno open(), jak i close() mogą być używane bez obiektu window. Jest to związane z tym, że obiekt ten jest najważniejszy i często się do nie używa. W tym przypadku podkreśla, że to okno zostanie otwarte, a nie np. dokument.

Ramki

Za pomocą JavaScript można transportować informacje pomiędzy ramkami. Najważniejsze, by ramki te miały swoje indywidualne nazwy. Instrukcja pozwalająca określić, na której ramce chcemy operować, ma postać:

parent.frames['Menu']
parent.frames[1]
parent.Menu

Wszystkie metody są poprawne, Menu jest nazwą ramki. parent występuje zawsze przy odnoszeniu się do ramek. frames zawiera tablicę wszystkich ramek, dlatego można się do nich odwołać przez kolejność występowania w dokumencie, gdzie ramki zdefiniowano. Aby zwrócić wartość równą ilości ramek należy użyć polecenia:

parent.length

W przypadku zagnieżdżania ramek (ramka w ramce) dostęp do niej jest nieco bardziej skomplikowany:

parent.parent.frames[1].frames[0]

Tyle jest właściwości parent i tablic frames ile jest zagnieżdżonych ramek. Takie zdefiniowanie powoduje odwołanie się do najwyższej w hierarchii etykiety FRAMESET i zejście kolejno do zadanej ramki.

W taki sposób definiuje się, gdzie ma zostać wykonana dana instrukcja lub skąd ściągnąć dane. Po zdefiniowaniu ramki, należy jeszcze dodać rodzaj operacji, który już się niczym nie różni, oprócz tego, że jest poprzedzony powyższymi parametrami, np. wpisanie tekstu:

parent.Menu.document.write('To jest menu')

Teraz krótki przykład ładujący stronę do górnej ramki zgodnie z adresem z formularza umieszczonego w dolnej ramce. Górna ramka nazywa się Up i jest dowolną stroną. Dolna ramka posiada funkcję ładującą stronę i formularz:

function Laduj() {
Adres=document.Form.Podaj.value;
parent.Up.location.href=Adres;

Można równie dobrze pominąć zmienną Adres i przypisać od razu ładowanie. Budowa formularza wygląda następująco:

<FORM NAME=Form>
<INPUT TYPE=Text NAME="Podaj" onChange="Laduj()">
</FORM>

Cookies (ciasteczka)

Przeglądarki mogą zapisywać do pliku informacje. Są one przechowywane razem z innymi plikami na dysku i mogą zawierać różnego rodzaju informacje. Najczęściej informacje takie są dostarczane przez serwer. JavaScript posiada jednak możliwość operowania na cookies. Informacje przechowywane w cookies mogą być bardzo cenne, bo mogą zawierać informacje o tym, kiedy ostatni raz internauta pojawił się na danej stronie WWW oraz co tam robił, czego szukał.

Ciasteczka są przypisane konkretnemu katalogowi lub domenie. Tworząc cookies na dysku głównym C:/, tworzysz ciasteczko, które będzie dostępne tylko z tego katalogu. Będzie zawierał informacje zapisane przez pliki znajdujące się w tym katalogu. Nie ma możliwości sprawdzenia, jakie informacje zawarte są w innych ciasteczkach.

Informacje są przechowywane są w pliku tekstowym. W jednym pliku, którzy może mieć kilka kilo może być zawartych kilka informacji. Są one poukładane następująco:

Cookie: Nazwa1=wartosc1; Nazwa2=wartosc2;...

Wszystkie informacje zawarte w ciasteczkach są dostępne poprzez document.cookie. Zawartość w ciasteczkach nie może zawierać spacji. W tym celu dane są kodowane przy pomocy funkcji escape() oraz rozkodowywane przy pomocy unescape.

Przykładowa funkcja, która będzie zapisywała informacje do ciasteczek wygląda następująco:

function Zapisz(NazwaCookie) {
Nowe=prompt("Pytanie"")
if (Nowe!=null) {
Teraz=new Date();
Teraz.setTime(Termin = (24*60*60*1000) + Teraz.getTime());
Termin= (Teraz.toGMTString());
document.cookie= NazwaCookie+"=" + escape(Nowe) + "; expires="+Termin;
}
}

Funkcja pobiera jeden argument, który jednoznacznie określa nazwę cookie. W przypadku, gdy będzie więcej ciasteczek, będzie możliwość sprawdzenia, które pole należy zamienić. Za zmienną Nowe podstawiana jest wartość okienka dialogowego prompt(. Jeżeli została wprowadzona wartość, to pobierany jest aktualna data. Ciasteczka mają możliwość ustawiania w nich daty. Oznacza to, że po tym czasie informacje nie będą już dostępne. Data taka musi być zapisana w odpowiednim formacie. W tej funkcji ważność ciasteczka jest ustawiona na 24 godziny od pory, kiedy funkcja została wywołana. Ostatnia linijka zapisuje wartość podają w okienku prompt() wraz z odpowiadającą jej wartością (zakodowaną) oraz termin ważności podany jako wartość pola expires (bez tego pola ciasteczka nie będą działały poprawnie). Należy pamiętać o rozdzieleniu średnikiem kolejnych pól każdego ciasteczka.

Wywoływanie funkcji

Funkcje są tak specyficznymi obiektami, że mogą się do siebie odwoływać. Oznacza to, że w obrębie funkcji możliwo jest jej ponowne wywołanie. Zasadę działania można przedstawić na funkcji, która będzie obliczała silnie dla danego argumentu.

W tym celu należy wykorzystać polecenie return. Zwraca ono wartość podaną jako argument i wstawia w miejsce wywołania funkcji. Funkcja licząca silnię ma następującą postać:

function Silnia(a) {
if (a>1) i*=Silnia(a-1);
else i=1;
return i};

alert(Silnia(3));

Zasada działania skryptu jest następująca. Okienko dialogowe wywołuje funkcję a argumentem 3. Ta sprawdza, czy dany argument jest większy od 1. Jeżeli tak, to następuje ponowne wywołanie funkcji z argumentem o jeden mniejszym. Pozostałe instrukcje funkcji nie są (na razie) wykowywane. Sytuacja się powtarza, dopóki argument nie wyniesie jeden. Wtedy za wartość i zostaje podstawiona liczba 1. Funkcja za pomocą return zwraca wartość i, czyli 1 do wcześniejszej funkcji. Następnie wraca do poprzedniego odwołania i za wartość Silnia(a-1) zostaje podstawiona wartość zwrócona przez poprzednią funkcję. Zmienna i zostaje zmodyfikowana o iloczyn danej liczby i silni poprzedniej. Sytuacja powtarza się taką ilość razy, jaką funkcja odwoływała się do samej siebie. Ostateczna wartość zostaje zwrócona do okienka dialogowego.

Ilość odwołań jest pamiętana, dlatego zmienną i można zastąpić zmienną a. Działanie skryptu nie zmieni się, poza tym, że ma jedną zmienną mniej.

Inną zaletą takiego działania jest możliwość wstawienia funkcji jako argumentu, co miało miejsce w tym przypadku. Jeżeli funkcja będzie zwracała tylko wartości logiczne, można jej użyć np. w instrukcji warunkowej:

if (Silnia(5)==120) alert("To jest silnia liczby 5")

Działanie skryptu możesz sprawdzić poniżej. Tylko nie przesadzaj z wartościami, komputer ma ograniczone możliwości.

Nowe obiekty

Możliwość tworzenia nowych obiektów, to duży atut dla języka programowania. Także JavaScript daje taką możliwość. Nowe obiekty nie dają dostępu do nowych właściwości, czy metod. Pozwalają jednak tworzyć bardziej precyzyjnie rozbudowane zmienne. Wykorzystuje się je w bardziej złożonych skryptach, gdzie ilość danych jest bardzo duża. Nowe obiekty pozwalają je czytelniej pogrupować.

Aby lepiej omówić to zagadnienie, posłużę się przykładem. Zbuduję funkcję, która będzie zawierała dane obiektu:

function Datownik() {
this.Wiek="XXI";
this.IleDni=new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.Skroty=new Array("Pn", "Wt", "Sr", "Cz", "Pt", "So", "Nd");
}

Tak stworzona funkcja zawiera dane o miesiącu i dniach tygodnia. Wiek jest zmienną typu string, zawiera informacje o bieżącym wieku. Kolejne zmienne zostały zdefiniowane jako zmienne tablicowe. IleDni zawiera ilość dni poszczególnych miesięcy (z pominięciem roku przestępnego). Skróty zawiera informację, o skrótach danego dnia tygodnia. Do stworzenia tych danych niezbędne jest użycie słowa this. W ten sposób informacje zawarte w tablicach są częścią funkcji, a nie lokalna zmienną tej funkcji.

Kolejnym etapem tworzenia jest przypisane jakiejś zmiennej stworzonej funkcji .Odbywa się to zawsze za pomocą słowa kluczowego new, na przykład:

Czas=new Datownik;

Nawiasy przy przypisywaniu funkcji można opuścić. Ponadto Czas jest teraz obiektem. Teraz można już uzyskać dostęp do danych zawartych w funkcji Miesiące. Odwołanie się do nowego obiektu odbywa się poprzez zdefiniowaną zmienną Czas i odpowiednią wartość w funkcji, czyli na przykład tak:

Czas.IleDni[3];

Takie odwołanie spowoduje przejście do funkcji Datownik, bo tak została przypisana zmienna Czas. Następnie już w obrębie tej funkcji pobrana zostanie wartość komórki tablicy IleDni. Komórki tablicy liczone są od zera, dlatego końcowy efekt, to liczba 30.

Można także tworzyć nowe obiekty w już istniejących. W takim przypadku zamiast this.Wiek, można przypisać nowy obiekt poprzez this.Wiek=new Stulecia. Odwołanie się do takiego obiektu składałoby się z trzech członów. Stulecia byłoby nową funkcją, którą także należy zdefiniować.

Poniżej znajdziesz ciekawy przykład zastosowania nowych obiektów - kalendarz miesięczny. Jeżeli masz jeszcze jakieś wątpliwości, to ten plik pozwoli ci je rozwiać. Zobacz, jak wygląda to w praktyce. Kalendarz możesz udoskonalić w ramach ćwiczeń. Dodaj nagłówek z zamieszczeniem aktualnej daty. Komórka tabeli z bieżącym dniem w kalendarzu niech będzie innym kolorem. Życzę miłej pracy.

Wstawianie skryptów

Gdy skrypt jest używany w wielu plikach, można go zachować w osobnym pliku, a następnie poprzez krótki kod wstawić na stronę. Wygenerowanie skryptu w taki sposób jest wygodne i nie zajmuje wiele miejsca przy ściąganiu z serwera. Jego wadą jest to, że stare przeglądarki (np. MSIE 3.0) nie są w stanie zinterpretować takiego kodu. Gdybym np. był pewien, że wszyscy posiadają nowe przeglądarki, umieściłbym moje menu w skrypcie. Ładowałoby się już po otwarciu strony, dałoby się łatwo modyfikować - wystarczyłoby tylko jeden plik, podobnie z resztą jak arkusze stylów.

Skrypt znajdujący się w osobnym pliku można wstawić za pomocą następującego tagu:

<SCRIPT LANGUAGE="JavaScript" SRC="plik.js"></SCRIPT>

W takim przypadku zostaną wykonane wszystkie instrukcje znajdujące się w danym pliki, o ile nie zostały umieszczone w funkcji. Funkcja musi być dodatkowo wywołana poprzez polecenia do tego używane.

W pliku, gdzie dana funkcja się znajduje, nie należy poprzedzać instrukcji żadnymi tagami, jak to ma miejsce w plikach HTML. Plik powinien zawierać tylko i wyłącznie instrukcje JavaScript. Przykładowy plik może wyglądać tak:

status="Strona o JavaScript."
function Start() {
alert("Witaj na mojej stronie.")
}

Przy zadeklarowaniu takiej strony na pasku statusu ukaże się napis. Okienko dialogowe zostanie wywołane dopiero po wywołaniu funkcji Start.

Autorem kursu jest: Damian Szczepanik

D.F.