JavaScript jest prostym językiem skryptowym interpretowanym przez przeglądarki WWW.
Interpreter tego języka został po raz pierwszy zaimplementowany w przeglądarce Netscape Navigator 2.0.
Pierwotnie był znany pod nazwą LiveScript, dopóki Sun Microsystems nie opublikował języka Java. Po wprowadzeniu Javy Netscape i Sun Microsystems porozumiały się i
przemianowały LiveScript na JavaScript. Java i JavaScript są w istocie dwiema różnymi technikami programowania w internecie.
Atrybut LANGUAGE określa język skryptu. Jeśli nie zostanie podany dla większości przeglądarek
przyjmie domyślną wartość "JavaScript". Parametr TYPE jest w zasadzie ignorowany przez większość przeglądarek,
jest za to wymagany w specyfiakcji HTMLa. Treść skryptu najlepiej jest ująć w znakach komentarza
(<!-- i // -->), aby przeglądarki nieinterpretujące JavaScript go zignorowały.
Oto prosty przykład. Umieszczenie w kodzie strony formuły:
Polecenia JavaScript można wykonywać również stosując protokuł javascript. Jeżeli np. w pasku adresu wpiszemy:
javascript: document.write("Hello world!")
wyświetlona zostanie strona z napisem "Hello world!". Wpisanie w pasku adresu:
javascript: history.back()
da taki sam wynik jak naciśnięcie klawisza Wstecz/Back przeglądarki.
W JavaScript mamy możliwość komentowania tekstu na dwa sposoby:
- ujęcie dowolnego fragmentu tekstu w znaczniki /* i */
- znacznik // powodujący potraktowanie jako komentarz tekstu stojącego za znacznikiem do końca lini
Wprowadzenie do kodu zmiennej nie wymaga jej wcześniejszego deklarowania (nie podajemy jej typu). Wystarczy użyc np.
liczba = 12. Podanie przed nazwą zmiennej słowa VAR oznacza
jej lokalną deklarację. Bez tego słowa zmienna traktowana jest globalna. Zmienne mogą mieć następujące wartości:
liczbowa, np.: x = 10 x = 3.14 x = -7.45 + 12
ciąg znaków np.: s = "Hello world!"
Uwaga: wartością "rok" + 2001 jest ciąg znaków "rok 2001"
Znaki specjalne:
- \n - koniec linii
- \" - cudzysłów
logiczna - true lub false (bez cudzysłowia)
null - wartość pusta. Użycie: VAR zmienna jest równoważne: VAR zmienna = null
Wartością zmiennej niezadeklarowanej jest undefined
Obiekty w JavaScript można tworzyć samemu lub korzystać z już gotowych, udostępnianych przez
przeglądarkę, a reprezentujących np. elementy dokumentu HTML.
Każdy obiekt może mieć pewne własności i metody.
Własność obiektu zachowuje się jak zmienna (albo kolejny obiekt),
a metoda to nic innego jak funkcja odnosząca się do obiektu.
Własności i metody obiektów wywołuje się następująco:
obiekt.własność
obiekt.metoda()
Przy odwoływaniu się do metod lub własności obiektu można użyć instrukcji with, np.:
with (obiekt)
{
wlasnosc = 'aaa';
metoda(parametr);
}
Nowy obiekt tworzy się instrukcją new. Konstruktor obiektu jest funkcją, w której do konstruowanego
obiketu odwoływać się można poprzez słowo this:
function mojObiekt()
{
this.wlasnosc1 = null;
this.wlasnosc2 = null;
return this;
}
Użycie:
nowyObiekt = new mojObiekt();
Najciekawsze predefiniowane w JavaScript konstruktory:
Date - użycie:
zmienna = new Date()
zmienna = new Date(hours, minutes, seconds)
zmienna = new Date(year, month, day)
Dostępne metody: getDate(), setDate(), getTime(), getDay(), setTime() itp.
Array - użycie:
a = new Array(5) //tablica 5-cio elementowa
t = new Array("aaa", "bbb", "ccc")
Function - użycie:
f = new Function([argument1, argument2, ..., argumentn], treść)
W ten sposób możemy utworzyć funkcję, która jest w istocie obiektem przypisanym na zmienną f (wywołanie: f(arg1,arg2,...,argn)).
Math - przykładowe własności: E (stała Eulera), LN2 (logarytm naturalny z dwóch), PI (liczba Pi)
przykładowe metody: abs(liczba), sqrt(liczba), random(liczba), sin(liczba)
JavaScript jest przede wszystkim wykorzystywana do obsługi zdarzeń. Oto przykładowe nazwy zdarzeń oraz opis sytauacji,
w których są wywoływane:
onBlur - przy zmianie fokusa na inny element
onClick - przy kliknięciu
onChange - przy zmianie
onFocus - przy ustawieniu fokusa
onLoad - przy ładowaniu strony
onMouseover - przy przejechaniu kursorem myszki ponad elementem
onSubmit - przy wysyłaniu formularza
onUnload - opuszczenie strony
Przypisanie obsługi zdarzenia do elementu następuje poprzez rozszerzenie definicji taga:
<TAG parametryTagu nazwaZdarzenia="kod, np. wywołanie funkcji">
Przykład:
navigator - obiekt z danymi przeglądarki. Własności:
appCodeName - Zwraca nazwę kodową przeglądarki
appName - Zwraca nazwę przeglądarki
appVersion - Zwraca numer wersji przeglądarki
userAgent - Zwraca pełną nazwę przeglądarki
history - zawiera informację o bieżącej sesji użytkowania przeglądarki. Metody: back, forward, go(skok)
location - informacje o adresie URL. Własności:
hash - odwołuje się do kotwicy
host - ustala nazwę hosta
hostname - wyświetla nazwę hosta lub adres IP bieżącego hosta
href - określa cały adres URL
pathname - odnosi się do ścieżki dostępu w adresie URL
port - określa port komunikacyjny serwera. Zazwyczaj 80
protocol - określa nazwę protokołu dla transmisji danych (http, ftp, etc.)
search - pokazuje tekst zapytania po znaku ? w adresie URL
window - najwyższy w hierarchi obiekt dla każdego obiektów związanych ze stroną. Do jego metod i własności można odwoływać
bezpośrednio, bez podawania nazwy obiektu.Własności:
defaultStatus - Domyślna wiadomość wyświetlana w pasku statusu
document - Dotyczy bieżącego dokumentu
frames - Tablica zawierająca listę wszystkich ramek w oknie
frame - Przewijalne okno używane dla tablicy
length - Liczba ramek w bieżącym oknie
location - Pełny adres URL bieżącego dokumentu
name - Nazwa okna
parent - Synonim dla okna, którego szkielet ramek (frameset) zawiera bieżącą ramkę
self - Dotyczy bieżącego okna
status - Wyświetla wiadomość w pasku statusu
top - Dotyczy okna położonego najwyżej w hierarchii (głównego)
window - Dotyczy bieżącego okna
Metody:
alert - Tworzy okienko dialogowe z alertem
close - Zamyka dokument
confirm - Tworzy okienko dialogowe z potwierdzeniem - z przyciskami OK i Cancel
open - Otwiera nowe okno.
prompt - Tworzy okienko dialogowe zachęcające do wprowadzenia jakichś danych
setTimeout - Wykonuje skrypt JavaScript po upłynięciu podanej liczby milisekund
clearTimeout - Przerywa polecenie setTimeout
Oto mały przykład, który ilustruje wykorzystanie w skryptach JavaScript wbudowanych obiektów:
<SCRIPT>
<!--
var text2="";
var z=0;
function pokazujNapis(z){
var kursor="|";
var tekst=document.f.tekst.value;
text2=text2+tekst.substring(z,z+1);
window.status=text2+kursor;
b=z+1;
if (z<tekst.length){
setTimeout("pokazujNapis(b)",100);
} else {
window.status=tekst;
}
};
function przejdz() {
history.go(document.f.go.value);
}