Podstawowe informacje na temat języka JavaScript
JavaScript jest językiem bazującym na obiektach, jednak nie ma możliwości definiowania własnych klas ani stosowania mechanizmów obiektowych np. dziedziczenia, przeciążenia itp. Bazuje ona na obiektach dostarczanych przez przeglądarkę. W JavieScript nie trzeba także deklarować zmiennych.
Najprostszy program wyświetlający jakiś napis może wyglądać tak :
[HTML]
[HEAD]
[SCRIPT]
[!-- ukrywa skrypt przed przeglądarkami, które nie obsługują JavyScript document.write("jakis tekst"); --]
[/SCRIPT]
[/HEAD]
[BODY]
Właściwa strona
[/BODY]
[/HTML]
W tym przykładzie, jak i w następnych, musiałem zastosować nawiasy "[" i "]", zamiast "<" ">", w innym wypadku ten tekst po prostu nie został by wyświetlony, bo przeglądarka zidendyfikowała by go jako instrukcje HTML-a. Więc jeżeli ktoś chciał by uruchomić któryś z przykłądów, musi pozamieniać sobie nawiasy. Jak widzimy do wyświetlenia tekstu wykorzystałem metodę " write", obiektu "document". Obiekt "document" jest wyświetlany na ekranie w formie strony HTML, jest to poprostu plik HTML, w którym znajduje się nasz skrypt. Powyższy przykład wykona się automatycznie, jako pierwszy na tej stronie, ponieważ umieściłem go pomiędzy blokiem "[HEAD] - [/HEAD]". Skrypty można umieszczać też w bloku "[BODY] - [/BODY]". W tym przykładzie skrypt wykona się automatycznie, jednak czasami zachodzi potrzeba by skrypt zareagował na jakieś zdarzenie np. naciśnięcie przycisku. W HTML-u mamy możliwość wstawienia na swoją stronę przycisków, pól edycyjnych itp. JavaScript może z nimi oczywiście współpracować np.
[HTML]
[HEAD]
[/HEAD]
[FORM]
[INPUT TYPE="button" Value="Kliknij mnie" OnClick="document.write('Jakis tekst')"]
[/FORM]
[/HTML]
Pewnie zauważyłeś że tekst który ma być wyświetlony jest pomiędzy apostrofami, a nie cudzysłowiami, jest tak dlatego że cudzysłów oznaczał by koniec zdarzenia OnClick. To zdarzenie to poprostu rekacja na naciśnięcie go. Można nim również wywołać funkcję. Funkcje w JavieScript nie muszą być wcześniej deklarowane, nie musimy również określać typu jaki funkcja zwróci np.
[html]
[head]
[SCRIPT]
[!--
function Napis(s)
{
document.write(s)
}
--]
[/SCRIPT]
[/head]
[FORM]
[INPUT TYPE="button" Value="Kliknij mnie" OnClick="Napis('To jest napis')"]
[/FORM]
[/html]
W tym wypadku naciśnięcie klawisza spowoduje wywołanie funkcji "Napis", której jako parametr możemy przekazać dowolny tekst. Ciało funkcji znajduje się pomiędzy klamrami " { } " podobnie jak w C++. Jeżeli chcieli byśmy wyświetlić tekst z pola edycyjnego museli byśmy użyć wyrażenia "this.form", kóre określa formularz w którym zostało użyte, i odnosi się tylko do tego formularza, a nie do całego dokumentu tak jak objekt "document" np.
[html]
[head]
[SCRIPT]
[!--
function Napis(s)
{
document.write(s)
}
--]
[/SCRIPT]
[/head]
[FORM]
[INPUT TYPE="textfields" NAME="PoleTekstowe" size=40 Value="Jakis tekst"]
[INPUT TYPE="button" Value="Kliknij mnie" OnClick="Napis(this.form.PoleTekstowe.value)"]
[/FORM]
[/html]
Abyśmy mogli się posługiwać polem edycyjnym tzn. odczytywać i zapisywać do niego jakis tekst, musi ono posiadać nazwę. Służy do tego właściwość "NAME". W przykładzie powyżej pole edycyjne nazwałem "PoleTekstowe". Aby wpisać jakiś tekst w to pole wystarczy napisać :
OnClick="this.form.PoleTekstowe.value='Jakis tekst' "
Na zakończenie jeszcze dodam że w JavieScript znaczenie ma wielkość liter, dlatego musimy uważać na zapis nazw obiektów i metod.
WARUNKI
W JavieScript, tak jak w innych jezykach możem decydować po okrerśleniu pewych warunków, w jaki sposób wykonywać ma się dalsza część programu. Instrukcja która do tego służy to "if". Składnia tej instrukcji ma postać:
if (warunek)
{
instrukcje które mają
się wykonać po spełnieniu warunku
}
else
{
instrukcje które się wykonają
jeśli warunek nie zostanie spełniony.
}
Można pominąć część "else", jeżeli nam nie jest potrzebna. Można również zagnieżdżać instrukcje "if" w sobie np.
if (warunek)
{
if (warunek2)
{
}
}
Przykład wykorzystania instrukcji "if".
[html]
[head]
[SCRIPT]
[!--
function PodajCzas()
{
czas= new Date()
sek=czas.getSeconds()
if (sek<10)
{
sek="0"+sek
}
min=czas.getMinutes()
if (min<10)
{
min="0"+min
}
god=czas.getHours()
if (god<10)
{
god="0"+god
}
document.Formularz.PoleTekstowe.value = god+":"+min+":"+sek
window.setTimeout("PodajCzas()",1000);
}
[/SCRIPT]
[/head]
[body onLoad="PodajCzas()"]
[FORM name="Formularz"]
[INPUT TYPE="textarea" NAME="PoleTekstowe" size=40 ]
[/FORM]
[/body]
[/html]
Ten przykład to oczywiściwe zegarek. Instrukcję "if" wykorzystałem do dopełnienia godzin, minut i sekund zerem, jeżeli jest mniejsza od 10. Co znacznie poprawia efektywność zegarka.
Poniżej zamieściłem dostępne znaki porównawacze instrukcji "if":
== sprawdza czy wyrażenie jest równe np. if(wynik==3) { ... }
!= sprawdza czy wyrażenie nie jest równe.
> sprawdza czy liczba z lewej strony jest większa od tej z prawej
np. if( 6 > 9 ) {...}
< sprawdza czy liczba z lewej strony jest mniejsza od tej z prawej
>= sprawdza czy liczba z lewej strony jest większa lub równa od tej z prawej
<= sprawdza czy liczba z lewej strony jest mniejsza lub równa od tej z prawej
Instrukcja "for" służy do kilkakrotnego wykonania części programu. Składnia:
inicjalizacja warunek zwiększenie
for (i = 1; i <=10; ++i )
{
Instrukcje do wykonania
}
Częśc inicjalizacyjna określa początkową wartość zmiennej. Część "warunek" określa warunek jaki musi być spełniony by pętla została przewana ( w tym wypadku zmienna "i" musi być większa od 10 ) natomiast częśc "zwiększanie" podowuje zwiększenie lub zmniejszanie zmiennej "i"( w tym wypadku zwiększanie o jeden). Instrukcje pętli w powyższym przykładzie wykonają się 10 razy.
ZDARZENIA
Zdarzenie jest to reakcja np. na kliknięcie przycisku, jaką ma wykonać program. Opis zawiera zdarzenie, z jakim elementem może być stosowane oraz krótką jego charakterystykę.
OnClick - elementy: button, radio, checkbox, submit, reset i linki.
powoduje reakcje na kliknięcie danego elementu.
OnChange - elementy: textfield, textarea, selections.
powoduje reakcję w momencie gdy zmieni się wartość pola
danych np. wpiszemy jakiś tekst.
OnBlur - elementy: textfield, textarea, selections.
powoduje reakcję w momencie gdy element traci aktywność.
OnFocus - elementy: textfield, textarea, selections.
powoduje reakcję gdy dany element zostanie uaktywniony
np. klikniemy na niego.
OnLoad - elementy: dokument HTML.
występuje w chwili załadowania dokumentu HTML.
OnUnload - elementy: dokument HTML.
występuje w chwili opuszczenia dokumentu HTML.
OnSubmit - elementy: submit.
wystepuje w chwili naciśnięcia przycisku submit.
OnSelect - elementy: textfield, textarea.
występuje gdy nastąpi uaktywnienie pola danych i pojawi
się w nim kursor tekstowy.
OnMouseover - elementy: linki.
zachodzi gdy wskaźnik myszy pojawi się nad linkiem.
Każde otwarte okienko przeglądarki jest obiektem typu "window". Jest to obiekt który postawiony jest najwyżej w hierarchii obiektów w JavaScript. Opiszę jego metody, pola i zdarzenia.
Metody
alert - Wyświetla okno komunikatu(MessageBox w Delphi), oraz odtwarzany jest
standardowy dźwięk Windows, odpowiadający za "błąd programu".
close - Zamyka aktualne okno.
confirm - Otwiera okienko z przyciskami "OK" i "Anuluj".
open - Otwiera nowe okienko przeglądarki
prompt - Otwiera okienko wprowadzania danych(InputBox w Delphi).
setTimeout - Umożliwia wykonanie jekiejś czynności po zadanym czasie.
np. window.setTimeout('Napis',2000 ), gdzie Napis jest nazwą
procedury którą ma uruchomić po 2000 milisekundach.
clearTimeout - Anuluje działanie metody setTimeout.
Pola
defaultStatus - domyślny tekst wyświetlany w lini statusu.
status - tekst który ma wyświetlić w lini statusu.
lenght - liczba ramek przyporządkowanych do okna.
name - nazwa okna.
parent - odniesienie do okna, z którego to okno zostało utworzone np. przy
pomocy metody "open".
self - odniesienie do aktualnego obiektu "window".
top - reprezentuje okno które zostało urworzone jako pierwsze.
Zdarzenia
onLoad - wywołana w momencie otwarcia dokumentu HTML.
onUnload - wywołana w momencie opuszczania dokumentu HTML.
Przy tworzeniu nowego okna np. NoweOkno = window.open , możemy ustawić kilka jego parametrów np.
myWindow = window.open("http://www.kki.net.pl/~zodi", "toolbar=no", "width=100");
spowoduje otworzenie okna z adresem "http://www.kki.net.pl/~zodi", bez paska narzędziowego "toolbar=no". Szerokość okna będzie miała 100 pikseli "width=100". Poniżej znajduje się spis tych parametrów.
toolbar - określa czy ma się pojawić pasek narzędzi w nowym oknie.
location - określa czy ma się pojawić wiersz edycyjny z adresem URL.
directories - określa czy ma być wyświetlany pasek "łącza".
status - określa czy okno ma zawierać pole statusu.
menubar - określa czy ma być wyświetlony pasek "menubar"
scrollbars - określa czy okno ma zawierać paski przewijania.
resizeable - określa czy bedzie możliwa zmiana rozmiaru okna.
width - szerokość okna w pikselach.
height - wysokość okna w pikselach.
Obiekt "document" zawiera informacje o zawartości okna i jest przyporządkowany obiektowi "window".
Pola
alinkColor - określa kolor aktywnych odnośników (tak jak ALINK w BODY).
bgColor - kolor tła dokumentu (BGCOLOR w BODY).
cookie - umożliwia zapamiętywanie i odcztytywanie różnych informacji przez
przeglądarkę na dysku odwiedzającego stronę
np. document.cookie="jakis tekst" zachowa tekst "jakis tekst".
fgColor - kolor tekstu (TEXT w BODY).
forms - jeżeli w obiekcie "document" znajduje się kilka formularzy, to są
one zapisane na tej liście.
lastModified - podaje datę ostatniej modyfikacji dokumentu.
linkColor - kolor linków.
links - zawiera listę wszystkich odnośników umieszczonych na stronie.
location - informacja na temat rzeczywistego adresu dokumentu.
referer - adres dokumentu z którego nastąpiło odwołanie do aktualnej strony.
title - odczytuje tytuł dokumentu.
vlinkColor - kolor odwiedzonych linków.
Metody
clear - czyści
close - w czasie przygotowania nowo sformatowanego dokumentu HTML, przy użyciu
metody "open", można używać innych metod np. "write", lecz efekty
pojawią się dopiero po wykonaniu tej metody.
open - przygotowuje okno do wyświetlania nowo sformatowanego dokumentu HTML
write - wypisuje tekst.
writeln - wypisuje tekst i przechodzi do nowej lini, Nie działa jednak
w sformatowanym dokumencie.