KURS PROGRAMOWANIA W JAVASCRIPT

Wstęp

Na tej stronie chciałbym przedstawić kilka informacji na temat tworzenia skryptów i sięgnąć trochę do historii. Tą stroną będą zainteresowani Ci, którzy nie mieli wcześniej styczności z apletami i to głównie ich uwadze poświęcam tę stronę.

JavaScript to język programowania, opracowany specjalnie dla potrzeb pracy w środowisku World Wide Web przez firmę Sun Microsystem i Netscape. Jest narzędziem pozwalającym na trochę bardziej interaktywne tworzenie stron WWW, niż można to osiągnąć za pomocą samego HTML-a. Daje możliwość kontrolowania zachowań internauty oglądającego stronę WWW i reagowania na nie według zadanych warunków. Poprzez tworzenie apletów można wzbogacić stronę o wiele ciekawych rozwiązań, o których jest ten kurs.

Tworzenie apletów można podzielić na kilka części. Tworzenie skryptów uruchamiających się zaraz po wczytaniu strony, niezależnie od jakichkolwiek zdarzeń. Drugi rodzaj, to funkcje wykonywane po wywołaniu ich poprzez zdarzenie (kliknięcie myszką, uzupełnienie formularza).

Teraz kilka słów o konstrukcji. Każdy aplet musi być zbudowany wg pewnego schematu:

<SCRIPT LANGUAGE="JavaScript">
<!--
Instrukcje
//-->
</SCRIPT>

Po pierwsze musimy wpisać parzysty tag, gdzie zdefiniujemy język skryptowy (bo JavaScript nie jest jedynym, chociaż bardzo znanym). Znaki komentarza pozwalają na pominięcie skryptu tym przeglądarkom, które nie radzą sobie z odczytywaniem apletów. Podobne stosuje się czasami w stylach.

Jeżeli chodzi o funkcje, to sprawa się ma podobnie. Różnica jest niewielka:

<SCRIPT LANGUAGE="JavaScript">
<!--
function Sprawdzam(zmienna)
{ Instrukcje
}
//-->
</SCRIPT>

 

W tym przypadku wszystkie instrukcje znajdują się między znakami { } poprzedzonymi wyrazem function i nazwą tej funkcji. Nazwa może być prawie dowolna, za wyjątkiem słów zarezerwowanych. Ponadto nazwa funkcji i zmiennych musi być niepowtarzalna, jednoznacznie identyfikująca funkcję. Co do zmiennej, to nie jest ona konieczna, jeżeli jej nie ma, to nawiasy są puste. Jeżeli już jest, to jej wartość jest równa wartości z jaką została wywołana funkcja. Jej wartość jest pomocna, gdy jedna funkcja obsługuje kilka obiektów, różniących się tylko jednym parametrem. Takich zmiennych może być więcej, wtedy należy je rozdzielić przecinkiem. Wtedy, bardzo ważna jest kolejność zmiennych, z jaką została wywołana funkcja.

Funkcja może też wywołać równie dobrze samą siebie, co nazywa się rekurencją.

Zdarzenia są wywoływane, kiedy oglądający stronę najedzie myszką na obiekt formularza, rysunek albo linkę, kliknie go, zdejmie focus itp. Są one definiowane wraz z elementem, do którego dane zdarzenie się odnosi. Omówię to na przykładzie:

<INPUT TYPE=Button VALUE=Przycisk onClick="Sprawdzam(zmienna)">

W momencie kliknięcia na taki przycisk jest wywoływane zdarzenie onClick. Wykonuje ono funkcję Sprawdzam z podanym argumentem zmienna.

<A HREF="javascript:funkcja()">Linka</A>
<A HREF="javascript:instrukcja">Linka</A>

Powyższe przykłady dają możliwość odwołania się do języka JavaScript bezpośrednio w adresie linki. W obu przypadkach konieczne jest wpisanie, że dany adres jest odwołaniem obsługiwanym przez JavaScript. W przeciwnym razie wszystko między cudzysłowem będzie traktowane jako linka. Na pasku statusu pojawi się instrukcja, a nie jak zwykle adres linki.

Podobnie jak HTML, JavaScript posiada możliwość wstawiania komentarza, niewidocznego dla przeglądarki i internauty. Pierwszy z nich dotyczy komentarzy zawartych tylko w jednej linijce:

function Sprawdzam(zmienna) //Ta funkcja sprawdzi dane
{ Instrukcje
}

W powyższym przypadku już żadna instrukcja nie może pojawić się za komentarzem. Jako jego koniec traktowany jest koniec linijki. Drugi sposób, pozwala wprowadzić dłuższe notatki:

function Sprawdzam(zmienna) /*Ta funkcja sprawdzi dane
potrzebne do formularza*/
{ Instrukcje
}

Podobnie jak w HTML-u jest otwierany i zamykany. Może być umieszczany w wielu linijkach. Daje możliwość wprowadzania bardziej rozbudowanych treści.

Na zakończenie dodam jeszcze, że bardzo ważna jest wielkość liter zmiennych, funkcji itd. Zmienna zadeklarowana jako policz, a wywołana jako Policz spowoduje błąd.

Wszystkie instrukcje muszą być rozdzielone średnikami. Nieraz przeglądarka wykona skrypt, ale dla pewności i poprawności, warto stawiać średniki na końcu każdej instrukcji.

W temacie przeglądarek można rzec, że wszystko sprowadza się do dwóch wielkich konkurentów: Microsoftu oraz Netscape'a. Powodem tego jest to, że Navigator, a teraz także Explorer to produkty freewarowe. W zasadzie same zalety, ale więcej różnic niż podobieństw między tymi produktami, co powoduje problemy. Przede wszystkim arkusze stylów są dużo lepiej obsługiwane przez IE. Daje to możliwość lepszego panowania nad położeniem, kolorem, czy wielkością elementów strony.

Co do obsługi JavaScrit przez te przeglądarki, to już jest lepiej, ale nie doskonale. Przede wszystkim język programowania skryptów proponowany przez Netscape'a JavaScript, nie jest bratem bliźniakiem JScriptu Microsoftu. Problem polega na tym, że istnieją instrukcje, które są obsługiwane tylko przez Navigatora, inne tylko przez Explorera. Jedyną tego zaletą jest to, że można, w sposób alternatywny, określić za pomocą której przeglądarki została otworzona dana strona.

Ponieważ język stale się rozwija, mamy już kolejne wersje tego języka, pomocne m.in. przy tworzeniu dynamicznych stron DHTML. Efektem tego jest zróżnicowanie w programowaniu skryptowym przeglądarek. Nie dość, że należy sprawdzić, czy dany skrypt działa w obydwu konkurencyjnych przeglądarkach, to nie wiadomo, czy starsze wersje go odczytają.

Debugger. To jest to, co pomoże poradzić sobie z problemem, jaki napotykają twórcy stron WWW. Debugger to program, który pomaga znaleźć błędy w skryptach. Pozwala śledzić kolejne wykonywane instrukcje i odszukać tę felerną linijkę, która stanowi problem.

Jest jeszcze jedna różnica pomiędzy przeglądarkami. Dość istotna dla tych, którzy często korzystają ze źródła strony. Otóż polega to na tym, że Explorer pokaże prawdziwe źródło strony, czyli identyczne, jak to, które napisał twórca strony. Navigator czasami pokaże inną treść źródła. Jeżeli zadeklarujemy formatowanie tekstu w JavaScript, to przeglądarka Netscape'a pokaże ten tekst za pomocą tylko dostępnych tagów HTML-a. Najlepiej przekonać się o tym dokładnie oglądając źródło strony formatowania tekstu.

Chciałbym tutaj przedstawić podstawowe zasady tworzenia prostych apletów. Przede wszystkich jednak tych apletów, które można szybko i samodzielnie dodać do swoich stron, niewymagających wielkiego zaangażowania i poświęcenia w sprawdzaniu poprawności. Zdecydowana większość skryptów jest wraz z przykładami. Te łatwe utworzone tylko za pomocą skryptów są pod przyciskiem Test. Jeżeli jednak tak nie jest, to zawsze można zajrzeć do źródła, gdzie dany aplet został wykorzystany. Tam, gdzie można tworzyć bardziej zaawansowane rzeczy jest linka Master w postaci rysunku diamentu do nowego okienka.

Wprowadziłem dość jednolitą strukturę, by można było się swobodnie poruszać. A więc nagłówek, poniżej metody, właściwości i parametry używane przy danym temacie. Część właściwa Kursu, gdzie znajdują się wszystkie informacje dotyczące danego tematu. Czasem rozdzielone linią, by rozdzielić ważniejsze zagadnienia. Ważniejsze informacje (jeżeli takie są) dotyczące danego tematu, znajdują się na końcu pod linią.

Oprócz samego Kursu można tu znaleźć inne ciekawe rzeczy związane z programowaniem w JavaScript. Stają się pomocne przy poszukiwaniach konkretnych instrukcji - hierarchia.

Do przeglądania stron polecam najnowszego Explorera, można go ściągnąć z bardzo wielu miejsc na friko (dodawany do CD wszystkich szanujących się pism komputerowych). Ja także używałem MSIE i obsługuje wszystkie przedstawione tu rozwiązania (chyba, że napisałem inaczej). Ale ze względu na różnorodność przeglądarek nie ręczę, że wszystko działać będzie, jak należy, pomimo tego, że dołożyłem wszelkich starań, by tak było.

Jego dodatkową zaletą jest dobra obsługa arkuszy stylów (CSS), co poprawia walory wizualne strony. A moje strony są bardzo przesycone stylami. A to wszystko po to, by łatwiej było znaleźć na nich to wszystko, co jest potrzebni. Mogłem to także uczynić zapychając kilobajtami grafiki i powodując wolniejsze ładowanie stron.

To wszystko sprawia, że moje strony są przejrzyste i lekkie.

Rodzaje zmiennych

Na początek kilka słów o definiowaniu zmiennych. Zmienna zdefiniowana w dokumencie, ale nie w funkcji to zmienna globalna. Jest ona w pamięci przez cały czas i można się do niej odwoływać we wszystkich skryptach i funkcjach. W przypadku zadeklarowania zmiennych w funkcji - zmienne lokalne - o tej samej nazwie, jak zmienna globalna, wszystkie instrukcje tej funkcji odnoszące się do tej zmiennej, będą się odnosiły do zmiennej lokalnej. Ponadto wszelkie jej modyfikacje nie spowodują zmiany wartości zmiennej globalnej. Nie można używać zmiennych bez uprzedniego ich zadeklarowania. Można to zrobić w dowolnym miejscu programu, nawet bezpośrednio przed jej użyciem:

var Zmienna

W taki sposób utworzona została dana o nazwie Zmienna. Jej wartość jest na razie nieokreślona, czyli domyślnie undefined. Jeżeli wartość nie może być określona, na przykład w przypadku dzielenia przez zero, to otrzymamy infinity. W zależności od tego, co podstawimy za wartość zmiennej, to do odpowiedniego typu będzie ona należeć.

Drugim rodzajem definiowania danej jest przypisanie jej po prostu wartości, ona zdecyduje jednoznacznie o rodzaju zmiennej. Obydwie formy są poprawne:

Zmienna=123
var Zmienna=123

Bardzo ważną rzeczą w nazewnictwie jest wielkość użytych liter. Zmienne zdefiniowane wewnątrz funkcji nie są dostępne poza nią. Są to wyżej wspomniane zmienne lokalne

W języku JavaScript można wyróżnić kilka rodzajów zmiennych. W nawiasach są podane ich nazwy oryginalne:

Łańcuch znaków. (string) Jest to dowolny ciąg znaków umieszczany zawsze w cudzysłowu podwójnym lub w pojedynczym:

Zmienna="1 jest_MnieJszE-od+3"

Zmienna string może być także zbudowana ze znaków i innej zmiennej. W takim przypadku trzeba rozdzielić string od zmiennej. Służy do tego cudzysłów. O jego używaniu dalej.

Zmienna liczbowa. (number) Czyli po prostu liczba. Miejsca dziesiętne oddziela się kropką. Liczbę można zapisać w jednym z formatów:

Zmienna=25.2 - standartowo w systemie dziesiątkowym,
Zmienna=25e-2 - czyli 25/100,

Zmienne logiczne. (boolean) Przyjmują tylko dwie wartości: true (1) albo false (0):

Zmienna=true

Wartość Null. (object) Jest to bardzo specyficzna wartość zmiennej. Oznacza nic, czyli de facto jej wartość nie istnieje. Dla przykładu w okienkach dialogowych (więcej I>>) po naciśnięciu anuluj zwracana jest wartość null. Podobnie jak w przypadku liczb i wartości logicznych nie należy stosować cudzysłowu, bo wtedy otrzymamy łańcuch znaków:

Zmienna=null

Chcąc sprawdzić do jakiego typu należy dana zmienna można użyć funkcji typeof. Zwróci ona nazwę ciągu znaków. Jeżeli chodzi o zmienne, to należy je wcześniej zdefiniować, by funkcja działała:

typeof(true) - zwróci wartość boolean.

Kolejną, dość wygodną rzeczą jaką daje JavaScript, jest możliwość skracania kodu. Załóżmy, że polecenie odwołania się do konkretnego elementu formularza (więcej I>>) jest powtarzane dosyć sporą ilość razy, wtedy takie skrócenie staje się wygodniejsze:

document.Form.Test.value;

Można rozwiązać ten problem poprzez zastosowanie dowolnej zmiennej, której należy przypisać dany obiekt:

F=document.Form.Test;

Zmiennej F przypisałem tylko obiekt, bez właściwości value. Podobnie jak metody, właściwości nie można przypisać nowej zmiennej. Należy ją przywołać przy każdorazowym uzyciu nowego obiektu. Po takiej modyfikacji można przypisać wartości F dowolną właściwość, a tej znowu nową wartość, powodując w ten sposób modyfikację w formularzu:

F.value="Cześć!"

Dzieje się tak dlatego, że zmienna F jest obiektem, któremu można przypisywać własności i metody. Jednak tylko te, jaki dany obiekt obsługuje. W tym przypadku wartość VALUE elementu formularza będzie wynosiła Cześć!.

W temacie operacji na liczbach wygląda to tak, że wszystko zależy od rodzajów zmiennych - argumentów. Suma łańcuchów zmiennych string jest zmienną łańcuchową wg podanej zasady:

Zmienna1="Damian"
Zmienna2="Szczepanik"
Zmienna1+Zmienna2="DamianSzczepanik";

Przede wszystkim nie sprawdza się przemienność dodawania. Żadna ze zmiennych nie posiadała spacji, suma też jej nie posiada. Podobny efekt będzie, gdy dodamy liczbę i zmienną łańcuchową. Można także dodawać bezpośrednio string do zmiennej:

Zmienna="Tekst"+Imie;

W tym przypadku Tekst jest stringiem, Imie wcześniej zdefiniowaną zmienną - jej rodzaj nie jest ważny. Problem może się pojawić, gdy string zawiera już jakieś cudzysłowy. Wtedy, ten, który znajduje się pierwszy rozpoczyna string, drugi jest jego częścią:

Zmienna="Tekst 'Tutul' "+Imie;

Efektem operacji na zmiennych liczbowych jest liczba wynikła z działania. Jeżeli chcemy, by liczby były traktowane jako zmienne łańcuchowe, to należy dodać np. między nimi pusty element string:

Zmienna=125+""+521
Zmienna=125521

W przypadku innych operacji na zmiennych łańcuchowych otrzymamy najprawdopodobniej wartość NaN (Not a Number). Taka wartość zostanie zwrócona, bo JavaScript nie mogła zakwalifikować danego wyniku jako liczby.

Co się tyczy operacji na zmiennych logicznych i wartości null, to wiadomo, że true jako prawda jest traktowane jako 1. Dwie pozostałe wartości to 0. Powinny być traktowane przez przeglądarki, jako te właśnie liczby, ale może wystąpić wartość infinity lub NaN.

Teraz kilka użytecznych funkcji do konwersacji zmiennych z jednego typu do innego. Wspomniana wyżej wartość NaN po zmodyfikowaniu pozwala określić, czy dana zmienna nie jest liczbą. Oznacza to, że zwraca wartość false jeżeli dana zmienna jest liczbą. Na przykład:

isNaN(25) - zwróci wartość false,
isNaN(a1) - zwróci wartość true.

Jeżeli już stwierdzimy, że dana zmienna jest liczbą, możemy ją konwertować do liczby całkowitej przez funkcję pareInt lub zmiennoprzecinkowej - wymiernej przez parseFloat Teraz kilka przykładów dla lepszego rozeznania się w tych funkcjach:

parseInt(5e1) - zwróci wartość 5.
parseInt(-21a) - zwróci wartość -21.
parseFloat(-2.3) - zwróci wartość -2.3.
parseFloat(-12.1+5) - zwróci wartość -12.

W drugim przykładzie zwrócona wartość wynosi -21, chociaż argument nie jest liczbą, ale jego pierwsze 3 znaki są i te zostały zamienione. W czwartym przypadku można by się spodziewać liczby -7.1, ale przypominam, że to jest traktowane jako ciąg znaków, plus nie jest żadną liczbą.

Jeszcze jedna bardzo przydatna instrukcja. Konwertuje ona działanie na argumencie przedstawione jako string. Jest to pomocna, gdy wywołujemy funkcję z wartością jako string, a należy wykonać na niej działanie Oto zastosowanie:

Zmienna1="10+2*4"
Zmienna2=eval(Zmienna1) - zmienna będzie wynosiła 18, będzie zmienną typu number.

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ć.

ienną typu number.

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, 'domyslna' 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)">

Początek formularza

Dół formularza

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}">

Początek formularza

Dół formularza

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}">

Początek formularza

Dół formularza

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()">

Początek formularza

Dół formularza

 

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: 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ć aktulaną 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>

Początek formularza

Dół formularza

 

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.

Początek formularza

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.

Dół formularza

Formatowanie tekstu

Tekst napisany za pomocą JavaScript może być formatowany wg podanej zasady:

document.write(wyświetlany_tekst.styl())

Tekst jest dowolnym stringiem podanym w cudzysłowu albo jako zmienna. Styl jest rodzajem kroju lub formatu czcionki. Można używać przykładowych stylów:

.italics (kursywa),
.bold (pogrubienie),
.strike (przekreślenie),
.sub (_{indeks dolny}),
.sup (^{indeks górny}),
.big (zwiększ czcionkę o 1pt),
.small (zmniejsz czcionkę o 1pt),

A przykładowy kod generujący może wyglądać tak:

document.write("Damian".bold()+"Szczepanik".italics());
document.write("<BR><A HREF=mailto:[e-mail]>"
  +"dszczepanik".sup()+"@poczta.onet.pl".strike()+"</A>");

 

Jeżeli chodzi o "<BR>"+, to służy przerzuceniu tekstu do następnej liniji. Zostanie przetworzony jako kod HTML. Efekt wygląda następująco:

 

Damian Szczepanik
^[e-mail] Damian Szczepanik
^[e-mail]

Można też zmieniać kolor i wielkość czcionek. Można je łączyć równocześnie z powyższymi formatowaniami:

.fontsize(rozmiar) (rozmiar czcionki),
.fontcolor("barwa") (kolor czcionki).

 

A oto przykład wielokrotnego formatowania:

document.write("Kolorowy ".fontcolor("pink").fontsize(5).italics()
+"Tekst".bold().fontcolor("aqua").strike())

 

Kolorowy Tekst Kolorowy Tekst

Jeżeli chodzi o kolejność formatowań, to nie ma hierarchii.

Formatując kolory trzeba pamiętać o cudzysłowu. A sama nazwę kolorów można definiować za pomocą kodu szesnastkowego lub słownie. Rozmiar czcionki jest podawany w siedmiostopniowej skali jak w HTML-u.

Formularze
W elementach formularza za pomocą JavaScriptu można odwoływać się do wielu wartości deklarowanych w HTML-u lub metod właściwości dostępnych tylko za pomocą JavaScript. Na tej stronie szczegółowo omówię wszystkie dostępne możliwości. Spis wg elementów formularza, z podziałem na poszczególne elementy, znajduje się w dodatku formularze.

Na przykładzie właściwości value przedstawię, jak odwoływać się do konkretnych elementów formularza:

document.Form.Test.value
document.forms['Form'].Test.value
document.Form.elements['Test'].value
document.forms['Form'].elements['Test'].value

W powyższej instrukcji Form jest nazwą formularza, Test nazwą elementu tego formularza, do którego chcemy się odwołać. Można zastosować kilka różnych odwołań do formularzy. W pierwszym przypadku brane są pod uwagę konkretne nazwy. Można też odwołać się do formularza poprzez forms['Form'], jeżeli chodzi o elementy formularza to poprzez elements['Test']. Drugi sposób korzysta przy z tablic, zawierających wszystkie formularze i wszystkie elementy kolejnych formularzy. Jeżeli ważna jest kolejna pozycja formularza w dokumencie HTML, a nie nazwa, (np. przy posiadaniu 10 takich samych elementów), to można odwołać się do nich, używając jego numeru indeksu. Są to kolejne liczby odpowiadające położeniu kolejnych formularzy lub elementów w dokumencie, przy czym indeks taki zaczyna się od zera. Do piątego elementu pierwszego formularza można przypisać wartość value w taki sposób:

document.forms[0].elements[4].value=Liczba

Jeżeli chodzi o listę SELECT to do niej samej trzeba się odwołać jak wyżej, przy czym do jej kolejnych elementów należy odwołać się poprzez następujący kod:

document.Form.Test.options[x].value

Gdzie options[x] zawiera tablicę wszystkich pozycji SELECT. Licznik indeksu elementów zaczyna się od zera.

Można też dodawać nowe elementy do istniejącej listy SELECT. Jeżeli dodamy element o indeksie, który jest już przyporządkowany innemu elementowi, to nastąpi podmienienie wszystkich właściwości tego elementu. Jeżeli dodamy element o indeksie nr 10, a lista ma ich tylko 5, to powstaną puste, niezdefiniowane pola, a na miejscu 10 nowy element:

Nowy=new Option(opcjaText,opcjaValue, domyślnieWybrana, wybrana)
NazwaListy.options[x]=Nowy

W taki sposób należy dodać element do listy. Najpierw definiujemy nowy obiekt jako Option, któremu przypisujemy cztery wartości (kolejność jest ważna): text, value, defaultSelected, selectedIndex omówione niżej. Dwa pierwsze przyjmują dowolne wartości zmiennych łańcuchowych lub liczbowych. Pozostałe dwa mogą przyjąć tylko wartości logiczne. NazwaListy jest po prostu skróconym zapisem odwołania się do listy zgodnie z ww. metodami. Dodanie elementu można przypisać krócej:

NazwaListy.options[x]=new Option(opcjaText, opcjaValue, domyślnieWybrana, wybrana)

W przypadku, gdy rozwijająca lista znajduje się w formularzu, trzeba jeszcze dodatkowo dodać obiekt document oraz obiekt formularza. Podobnie, jak to ma miejsce w innych elementach formualrza. W przeciwnym razie obiekt forms należy opuścić

Pliki graficzne

JavaScript pozwala zamienić zawartość obrazka zdefiniowanego za pomocą HTML-a na drugi. Może się to odbyć z zastosowaniem formularza wyboru: <SELECT>. Wybierając opcję formularza można zamienić rysunek na inny wcześniej zdefiniowany. Przykładowa funkcja wygląda tak:

function Rysunek(nr) {
if (nr==0) {Nowy="ryba.gif"};
if (nr==1) {Nowy="donald.gif"};
if (nr==2) {Nowy="rekin.gif"};
if (nr==3) {Nowy="kot.gif"};
document.Obrazek.src=Nowy }

Nazwa Obrazek jest nazwą rysunku, który chcemy zamienić. Właściwość scr określa, że JavaScript ma zmienić ścieżkę pliku zawierającego rysunek, a nie np. szerokość. Rysunek definiujemy za pomocą kodu HTML. Różnica polega na tym, że konieczna jest nazwa obrazka nadana parametrem NAME jednoznacznie identyfikująca dany rysunek. Nazwa nie jest konieczna, gdybyś wykorzystana została tablica images zawierająca obrazki na stronie. W tym przypadku definicja obrazka wygląda następująco:

<IMG SRC="ryba.gif" NAME="Obrazek">

Formularz, który pozwoli na wybór obrazka wygląda tak:

<FORM>
Wybierz rysunek:
<SELECT onChange="Rysunek(this.selectedIndex)">
<OPTION VALUE=ryba SELECTED>ryba
<OPTION VALUE=donald>donald
<OPTION VALUE=rekin>rekin
<OPTION VALUE=kot>kot
</SELECT>
</FORM>

Dół formularza

Zasada działania. Po zmianie opcji formularza uaktywnia się zdarzenie onChange. Wywołuje funkcję z wartością obecnego indeksu opcji, czyli z numerem pola, które zostało zaznaczone (wartość indeksu zaczyna się od zera). Następnie w funkcji następuje przyporządkowanie każdemu z numerów indeksu pewien plik. Ostatnia linijka funkcji zamienia źródło obiektu o nazwie Obrazek na nowo przypisane źródło Nowy.

 

Często stosowanym elementem urozmaicenia stron jest podmienianie obrazków po najechaniu na niego myszką. Wszystko steruje zdarzenie onMouseOver oraz onMouseOut. Zamiana polega na zamianie źródła obrazka.

Aby móc swodobnie korzystać z tego zdarzenia, warto każdemu obrazkowi nadać niepowtarzalną nazwę. By nie definiować źródła każdego pliku graficznego, wprowadzam pewne uproszczenie. Nazwy plików graficznych będą kolejnymi cyframi z rozszerzeniem gif. Nazwy rysunków w tagach będą równe AxA, gdzie x jest kolejną cyfrą. Użycie liter jest konieczne, by działały funkcje - nazwa nie może być tylko liczbą.

<A HREF="plik1.htm" onMouseOver="On(1)" onMouseOut="Off(1)">
  <IMG SRC="graph/1.gif" NAME="A1A"></A>
<A HREF="plik2.htm" onMouseOver="On(2)" onMouseOut="Off(2)">
  <IMG SRC="graph/2.gif" NAME="A2A"></A>
<A HREF="plik3.htm" onMouseOver="On(3)" onMouseOut="Off(3)">
  <IMG SRC="graph/3.gif" NAME="A3A"></A>

Nazywanie pliku kolejnymi cyframi nie jest może zbyt wygodne, ale nie wymaga wprowadzania zmiennnych, które zawierałyby wszsytkie źródła plików, tak, jak to ma miejse w powyższym przykładzie.

Funkcja On odpowiada za zamienianie źródła, kiedy myszka najedzie na obrazek. Funkcja Off przywraca źródło podstawowego obrazka:

function On(z) {document.images["A"+z+"A"].src="graph/"+z+"0.gif";}
function Off(z) {document.images["A"+z+"A"].src="graph/"+z+".gif";}

Przekazany do funkcji argument jednoznacznie określa, który obrazek należy zamienić i na jakie żródlo. Pliki graficzne, które zawierają obrazek do podmienienia nazywa się tak samo jak te podstawowe. Różnica polega tylko na tym, że pliki wywoływane mają w nazwie jeszcze zero. Jeżeli więc plik podstawowy nazywa się 1.gif, żródło alternatywne nazywa się 10.gif.

Takie uład nazw plików daje się łatwo modyfikować, gdyby menu się zmieniło. Należałoby tylko stworzyć nowe pliki i tagi wg. wzoru.

Tablice

Tablice są bardzo pomocne w przypadku, gdy wprowadzamy kilkanaście lub więcej wartości zmiennych, które należą do tej samej grupy, np. nazwiska, adresy, e-maile itp. Ich zasadniczą zaletą jest to, że są zapamiętywane pod tą samą zmienną, ale z innym indeksem. Ponadto ich liczba może się stale zmieniać.

Każdy element tablicy ma swój niepowtarzalny adres, czyli indeks. Pozwala on odwoływać się do danej komórki tablicy oraz modyfikować i odczytywać jej wartość.

Zmienną tablicową należy zadeklarować w następujący sposób:

Grupa=new Array;

Można sprecyzować ilość elementów tablicy, ale nie jest to konieczne:

Grupa=new Array(100);

Wartości kolejnych zmiennych deklaruje się wraz z indeksem znajdującym się w kwadratowym nawiasie. Indeks jako swoją pierwszą wartość przyjmuje zawsze zero.

Grupa[0]="Mariusz";
Grupa[1]="Łukasz";
Grupa[2]="Mateusz";

Wartości te można też zapisać zaraz przy deklaracji zmiennej jako new Array. Chcąc zadeklarować pierwszy element z indeksem równym jeden, trzeba wstawić komórkę zerową, np. jako pustą: "".

Grupa=new Array("Mariusz", "Łukasz", "Mateusz")

W powyższym przykładzie pierwszy element jest przypisany zmiennej indeksowej 0, następny 1 itd. Wszystkie komórki oddzielane są przecinkiem.

A teraz zastosowanie na przykładzie dziennego menu dnia w bardzo prostej wersji:

function Dzien() {
Posilek=new Array;
Wszystko="";
for (i=1; i<=5; i++) {
 Posilek[i]=prompt('Podaj pięc posiłków:\nPodaj posiłek nr.\t'+i,Posilek[i]);
 Wszystko+="\n"+i+". "+Posilek[i]  };
alert('Oto te posiłki:'+Wszystko)};

Ważne, by pamiętać, że tablica zdefiniowana wewnątrz funkcji (tak jak w tej) nie będzie dostępna poza nią. Warto zatem zdefiniować obiekt Array przed funkcją.

Istnieje także możliwość stworzenia tablic o kilku indeksach. Pozwalają one na poruszanie się po obiektach w dwóch wymiarach. Na przykład po tabeli według kolumny i wiersza. Aby stworzyć zmienną tablicową o dwóch indeksach, należy zdefiniować zmienną o jednym indeksie jako Array:

Grupa=new Array;
Grupa[1]=new Array;

Wcześniej należy zdefiniować Grupa jako standartowa zmienna Array. Nowa zmienna Grupa[1] jest zmienną tablicową, i należy się do niej odwołać w następujący sposób:

Grupa[x][y]

Gdzie wartości x oraz y są indeksami. Kolejność ich występowania jest bardzo ważna.

Tak zdefiniowana tablica będzie posiadała tylko dla pierwszego indeksu równego 1 dwa wymiary. By stworzyć tablicę o dwóch wymiarach 10x10, należy użyć np. pętli. Zamieni ona dziesięć przykładowych tablic o jednym indeksie na tablice o dwóch zmiennych:

Grupa=new Array;
for (i=1; i<=10; i++) {
 Grupa[i]=new Array;}

Powyższa tablica posiada dwa indeksy jeżeli pierwsza zmienna nie przekroczy 10. Dla większych wartości Grupa jest tablicą z jednym indeksem.

Jeżeli tablica posiada już dwa indeksy, to w analigiczny sposób można utworzyć tablice o dowolnej liczbie zmiennych.

Do obiektu Array można stosować jeszcze klika pomocnych funkcji:

join() zwraca wartości wszystkich komórek tablicy w postaci jednego łańcucha znaków. W nawiasie, jako argument, można umieścić znak, który będzie używany do rozdzielenia elementów. Domyślnym jest przecinek i spacja. Użycie z tablicą: Tablica.join().

reverse() odwraca kolejność elementów wszystkich komórek. Użycie z tablicą: Tablica.reverse().

Obiekt Math

W JavaScript dostępny jest obiekt Math, który posiada podstawowe funkcje matematyczne. Lista dostępnych metod znajduje się w hierarchii. Metody zwracają wartości zależne od podanego argumentu, albo stałe matematyczne. Oto ogólne zasady używania tych obiektu Math:

x=Math.round(3,14)

Powyższy przykład zaokrągli liczbę znajdującą się w nawiasie do najbliższej całkowitej wartości do dołu. Zmienna przyjmie wartość 3.

Drugą możliwością jest możliwość zwracania pewnych stałych matematycznych. Ich wartość jest niezależna od jakichkolwiek argumentów, dlatego w tym przypadku pomijamy nawiasy:

x=Math.PI

Zmienna przyjmie wartość stałej pi.

Obiekt Math można także zagnieżdżać. Oznacza to, że argumentem jednego obiektu może być wartość zwrócona prze inny obiekt Math. Zatem pierwsza zmienna może być też wygenerowane w inny sposób. W tym przypadku zostanie zwrócona liczba pi. Potem zostanie ona zaokrąglona, a wynik podstawiony za zmienną.

x=Math.round(Math.PI)

Obiekt String

Obiekt string dostarcza właściwości i metod do operowania na zmiennych. Zmienne te są traktowane jako ciągi znaków. Jeżeli będzie to liczba, to nie jest ważna jej wartość. Ważne jest, że składa się z ciągu znaków.

Wszystkie właściwości i metody tego obiektu znajdują się w hierarchii. W tym temacie zostaną omówione zasady korzystania z tego obiektu.

W wielu formularzach trzeba podać adres e-mail. Jego cechą charakterystyczną jest występowanie znaku @. Można spotkać także inny ciąg znaków zastępujący małpę, a mianowicie (at). Poniższy formularz sprawdza, czy adres jest poprawnie wpisany.

Najważniejszym warunkiem jest występowanie znaku @ lub ciągu znaków (at). Pomocna do tego będzie właściwość obiektu indexOf(). Pobiera ona dwa argumenty. Pierwszym jest poszukiwany łańcuch znaków. Drugi jest wartością indeksu, od którego należy zacząć poszukiwania. Pierwsza zmienna ciągu znaków ma indeks równy zero. Na początek definicja pola formularza:

<FORM NAME=Form>
<INPUT TYPE=Text NAME=Malpa>
</FORM>

Poniższe instrukcje sprawdzają, czy pole tego formularza zawiera znak @ lub (at).

Mail=document.Form.Malpa.value;
Nr=Mail.indexOf("@", 0);
if (Nr<0) Nr=Mail.indexOf("(at)", 0);

Zmienna Nr określa numer indeksu występowania poszukiwanego znaku. Jeżeli będzie mniejsza niż zero, to znaczy, że znak małpa jest w ciągu znaków, ale występuje jako pierwszy znak. Oznacza to, że dany adres nie posiada loginu, a tym samym nie jest poprawny. Jeżeli tak, to ta sama właściwość w następnej linijce poszukuje ciągu znaków (at).

Okienko dialogowe wyświetla potwierdzenie poprawności adresu. Skrócona instrukcja wyboru zwraca wartośc, która będzie wyświetlana w okienku dialogowym:

alert((Nr>0) ? "OK" : "Błędny")

Tak skonstruowany formularz nie będzie działał profesjonalnie, bo nie wyklucza przypadku, kiedy wpiszemy dwa znaki @. To nie jest jedyna wada tego formularza, ale jego zadaniem było pokazanie działania obiektu string.

Informacje o przglą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. A teraz efekt, wykrywam Twoją przeglądarkę:

Zapewne używasz Explorera. Zapewne używasz Explorera.

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ąba 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 atgument 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 podstwiona 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. Ostatecznia 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 agrumentu, 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 ograniczne 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 pozwaają je czytelniej pogrupować.

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

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 bierzącym wieku. Kolejne zmienne zostały zdefiniowane jako zmienne tablicowe. IleDni zawiera ilość dni poszczególnych miesięcy (z pominięciem roku przestępnego). Skroty zawiera informację, o sktó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 Miesiace. 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 zmianna Czas. Następnie już w obrębie tej funkcji pobrana zostanie wartość komórki tablicy IleDni. Komórki tablicy liczone są od zera, daltego 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 prypisać 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 aktulanej daty. Komórka tabeli z bierzącym dniem w kalendarzu niech będzie innym kolorem. Życze 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 wszsyscy posiadają nowe przeglądarki, umieściłbym moje menu w skrypcie. Ładowałoby się już po otwarciu strony, dałoby się latwo 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.

"Artykuł ściągnięty ze strony Damiana Szczepanika:
http://priv2.onet.pl/kat/dszczepanik/javascript.htm"

---