4.Wprowadzenie do JavaScript

Otóż w tym dziale poznasz sposoby umieszczania skryptów na stronie, importowanie ich z plików oraz wywoływanie. Zaużmy, że chcemy wyświetlić sobie na pasku statusu napis. Musimy stworzyć skrypt, więc w sekcji HEAD piszemy:

<SCRIPT LANGUAGE="JavaScript">
function napis()
{
window.status="www.otul.prv.pl";
}
</SCRIPT>

Pamiętajmy o tym, by po każdej pełnej instrukcji stawiać średnik i o tym, że w JavaScript, tak samo jak C funkcje, większe pętle, warunki itp. znajdują się w nawiasch klamrowych. Napisaliśmy już skrypt, ale nic się nie dziej. Trzeba go jakoś wywołać, jest na to kilka sposbów np. w sekcji BODY możemy użyć parametru onload=napis() i już skrypt działa. Ale my chcielibyśmy ten napis mieć na pasku dopiero wtedy gdy ktoś najedzie na rysunek i kliknie, więc piszemy:

<A HREF=javascript:napis()> <IMG SRC=otul.gif> </A>

Można też wykorzystać zdarzenia myszy typu onclick czy onmouseover, jest to wszystko jedno. Póżniej przedstawię zdarzenia i ich znaczenie. Teraz zajmijmy się importem skryptu z pliku, aby to uczynić należy napisać:

<SCRIPT SRC=nazwaskryptu.js>

</SCRIPT>

I to już wystarczy aby skrypt był dostępny na naszej stronie. Kiedy mamy już skrypt dostępny na stronce musimy poznać nowe zdarzenia służące do jego obsługi.

Zdarzenia:

onload- kiedy obiekt się załaduje

onunload - kiedy opuszczamy stronę

onerror - kiedy navigator nie może załadować obrazka

onabort - kiedy przerywamy ładowanie obrazka

onclick- kiedy obiekt zostanie kliknięty

onmouseover- kiedy kursor znajduje się nad obiektem

onmouseout - kiedy kursor opuści obszar obiektu

onmousedown - kiedy przycisk jest trzymany

onmouseup - kiedy przycisk zostaje zwolniony

onblur - kiedy opuszczamy pole tekstowe

onselect - kiedy zaznaczamy tekst w polu tekstowym

onchange - kiedy opuszczamy pole tekstowe, a jego wartość jest zmieniona

onfocus - kiedy wchodzimy w pole tekstowe

Operatory:

= a=b Powoduje przypisanie wartości zmiennej b do a

+= a+=b Powoduje przypisanie wartości a+b do zmiennej a

-= a-=b Powoduje przypisanie wartości a-b do zmiennej a

*= a*=b Przypisuje wartość wyrażenia a*b do zmiennej a

/= a/=b Przypisuje wartość wyrażenia a/b do zmiennej a

%= a%=b Powoduje przypisanie wartości a % b do zmiennen a

> a>b Wykonuje bitową operację AND

^ a^b Wykonuje bitową operację XOR

| a|b Wykonuje bitową operację OR

<< a<<b Przesuwa bity w lewo o b miejsc

>> a>>b Przesuwa bity w prawo o b miejsc

>= a>=b Wykonuje przypisanie a=a>b

^= a^=b Przypisanie a=a^b

|= a|=b Powoduje przypisanie a=a|b

<<= a<<=b Przypisuje a=a<b

>>= a>>=b Przypisuje a=a>>b

>>>= a>>>=b Powoduje przypisaniea=a>>>b

== a==b Zwraca wartość TRUE jeśli oba wyrażenia są sobie równe

!= a!=b Zwraca prawdę kiedy oba wyrażenia są różne

< a<b Zwraca wartość TRUE kiedy wyrażenie a jest mniejsze od b

> a>b Zwraca TRUE kiedy pierwsze wyrażenie jest większe od drugiego

>= a>=b Zwraca prawdę kiedy a jest większe bądź równe b

<= a<=b Zwraca prawdę kiedy a jest mniejsze bądź równe b

+ a+b Zwraca wartość sumy obu wyrażęń

- a-b Zwraca wartość różnicy a i b

* a*b Zwraca wartość iloczynu

/ a/b Wykonuje dzielenie a przez b

% a%b Zwraca resztę z dzielenia

++ a++ Inkrementacja - zwiększa a o 1

-- a-- Dekrementacja - zmniejsza a o 1

Polecenia:

if (zmienna == wartość) {polecenia} else {polecnia2} - jeżeli warunek jest spełniony tzn. zmienna jest równa wartości to następuje wykonanie poleceń, w przeciwnym wypadku polecenia2

for (zmienna=n;n<10;n++) {polecenia} - dla zmiennej n mniejszej niż 10 wykonuj polecenia i zwiększ n

while(a>b) {polecenia b++} - dopóki a większe od b to wykonuj polecenia i zwiększ b

do {polecenia b++} while(a>b) - wykonuj instrukcje i zwiększ b dopóki a jest większe od b

Użycie:
for(i=0;i<10;i++)
{
document.write(i);
if (i == 5) alert("I = 5");
}

W tym miejscu przyjżymy się funkcją JavaScript, obiektom i okienką dialogowym oraz ich znaczeniom:

FUNKCJE:

escape(tekst) - zwraca heksadecymalny zapis napisu kodowany w ISO-8859-1

eval(wyrazenie) - funkcja oblicza wartość wyrażenia

isNaN(wartosc) - funkcja określa, czy wartosc jest liczbą, czy nie

parseFloat(łańcuch) - funkcja konwertuje łańcuch znaków na liczbę zmiennoprzecinkową

parseInt(łańcuch) - funkcja konwertuje łańcuch znaków na liczbę całkowitą

unescape(tekst) - dekoduje napis zakodowany funkcją escape

window.status="www.otul.prv.pl" - wypisuje napis na pasku statusu

history.back() - wywołuje stronę poprzednią

history.forward() - idzie do strony następnej

OBIEKTY:

-DATE

getDate() - zwraca aktualny dzień miesiąca

getMonth - zwraca numer bieżącego miesiąca (0 = styczeń)

getYear - zwraca aktualny rok

getHours - podaje aktualną godzinę

getMinutes - podaje aktualną minutę

getSeconds - podaje aktualną sekundę

Użycie:
teraz=new Date();
document.write("ROK:"+teraz.getYear()+" MIESIĄC:"+teraz.getMonth());

Za pomocą JavaScript można także ustawiać datę, funkcje są bardzo podobne - getYear -> setYear - ta służy do ustawiania.

-MATH

abs(liczba) - Zwraca wartość absolutną liczby

acos(liczba) - Zwraca arcus cosinus z liczby (podanej w radianach)

asin(liczba) - Zwraca arcus sinus z liczby (podanej w radianach)

atan(liczba) - Zwraca arcus tangens z liczby (podanej w radianach)

ceil(liczba) - Zwraca najmniejszą liczbę całkowitą, większą lub równą podanej liczbie

cos(liczba) - Zwraca cosinus liczby (podanej w radianach)

exp(liczba) - Zwraca warto?ć E podniesionej do potęgi wyrażonej podanym argumentem

floor(liczba) - Zwraca największą liczbę całkowitą mniejszą lub równą podanej liczbie

log(liczba) - Zwraca logarytm naturalny liczby

max(liczba1,liczba2) - Zwraca większą z dwóch liczb

min(liczba1,liczba2) - Zwraca mniejszą z dwóch liczb

pow(liczba1,liczba2) - Zwraca wartość liczby1 podniesionej do potęgi liczby2

random() - Zwraca wartość pseudolosową z przedziału 0-1

round(liczba) - Zwraca zaokrąglenie danej liczby do najbliższej liczby całkowitej

sin(liczba) - Zwraca sinus liczby (podanej w radianach)

sqrt(liczba) - Zwraca pierwiaastek kwadratowy liczby

tan(liczba) - Zwraca tangens liczby (podanej w radianach)

Obiekt Math potrafi zwrócić jeszcze następujące stałe:

E - Zwraca stałą Eulera, która wynosi ok. 2.718

LN2 - Zwraca logarytm dwóch, tj. ok. 0.693

LN10 - Zwraca logarytm z dziesięciu, tj. ok. 2.302

LOG2E - Zwraca logarytm o podstawie 2 z liczby E, czyli ok. 1.442

LOG10E - Zwraca logarytm o podstawie 10 z E, czyli ok. 0.434

PI - Zwraca wartość liczby Pi, czyli ok. 3.14159

SQRT1_2 - Zwraca pierwiastek kwadratowy z 0.5, czyli ok. 0.707

SQRT2 - Zwraca pierwiastek kwadratowy z 2, czyli ok. 1.414

Użycie:
a=Math.PI;
b=Math.SQRT2;
document.write("PI * pierwiastek kwadratowy z dwóch = "+ a * b);

-STRING

big() - Nadaje atrybut big

blink() - Nadaje atrybut blink

bold() - Nadaje atrybut bold

charAt(indeks) - pobiera prawy znak z pewnej pozycji napisu

fontcolor(kolor) - Określa kolor stringu

fontsize(wielkość) - Określa wielkość czcionki w napisie

indexOf(łańcuch,indeks) - Szuka pierwszego wystąpienia poszukiwanej wartości w napisie

lastIndexOf(łańcuch,indeks) - Szuka ostatniego wystąpienia poszukiwanej wartości w napisie

link(href) - Czyni ze napisu odsyłacz (link)

small() - Nadaje atrybut small

strike() - Nadaje atrybut strike

sub() - Nadaje atrybut subscript

substring(Początek,Końca) - Zwraca łańcuch zaczynający się od Początek i kończący na Koniec

sup() - Nadaje atrybut superscript

toLowerCase() - Nadaje atrybut lower case - małe litery

toUpperCase() - Nadaje atrybut upper case - wielkie litery

length - długość napisu

Użycie:
tekst="www.otul.prv.pl";
document.write(tekst.bold()+tekst.blink()+"Liczba znaków= "+tekst.length);

OKIENKA DIALOGOWE:

alert("Uwaga! Wirus na dysku!") - wyświetla tekst w okienku z klawiszem OK i ikonką z wykrzyknikiem

alert("1.Otul\n2.BARTEK\n3.RAQF") - wyświetla teksty w kolejnych linijkach

confirm("Chcesz dostać wirusa?") - wyświetla okienko z przyciskami OK i Cancel

prompt("Ile masz lat?","19") - wyświetla okienko z możliwością wpisywania tekstu wraz z wpisaną 19

Użycie:
nick=prompt("Podaj nick","Lamer");
alert("Cze "+nick);
odp=confirm("EEe ty "+nick+" chcesz wira?");
if (odp) alert("WIRUS INFECKT!!!");
else
alert("I TAK DOSTANIESZ!!! ;-)");

Gotowe przykłady znajdują się na górze stony, a w tym miejscu przedstawię kilka przykładów w formie tekstu.

Powitanie:

<HTML>
<HEAD>
<TITLE>LOGIN</TITLE>
<SCRIPT>
function login()
{
var login, haslo;
login=document.formlogin.login.value;
haslo=document.formhaslo.haslo.value;
if (haslo=="virus45")
{
alert('Hello '+login+' , I am Red Hat Linux 1.2');
}
else
alert('Niepoprawne hasło!!!');

</SCRIPT>
</HEAD>
<BODY BGCOLOR=GOLD>
<FONT COLOR=BLACK SIZE=4>Login:
<form name=formlogin>
<input type=text size=25 maxlength=25 name=login>
</form>
<FONT COLOR=BLACK SIZE=4>Hasło:
<form name=formhaslo>
<input type=password size=25 maxlength=25 name=haslo>
<br>
<br>
<input type=button name=ok value=OK onclick=login()>
<input type=reset value=Wyszyść>
</form>
</BODY>
</HTML>

A tak wygląda ten skrypt po uruchomieniu: