In acest script am folosit doua ferestre de dialog numite confirm si alert
. Se observa instructiunile asemanatoare cu cel din C
si elemente din Pascal (cuvantul cheie
function ).
Aceste ferestre sunt de fapt metode ( un fel
de proceduri ) ale clasei (obiectului) window.
Daca functia confirm a returnat valoarea true
(ceea ce inseamna ca utilizatorul a actionat butonul OK)
se apeleaza functia JavaScript eval, avand ca parametru
sirul de caractere introdus de utilizator in campul exp. Functia eval
evalueaza expresia din sirul de caractere transmis ca parametru
si intoarce ca rezultai valoarea expresiei. Rezultatul intors de
functia eval este atribuit ca valoare campului din formular denumit
rezultat. Daca functia confirm a returnat valoarea false (ceea ce
inseamna ca utilizatorul a actionat butonul Cancel) se
apeleaza o alta metoda a clasei window, si anume metoda
alert, care are ca efect vizualizarea unei ferestre de avertizare ce contine
mesajul transmis functiei alert ca parametru (in cazul nostru 'Lasam
pe alta data!') .
Observatie:
Functia eval este o functie
predefinita a limbajului JavaScript. Alte exemple de functii predefinite
sunt:
isNaN(expresie)
functia evalueaza expresia pe care o primeste
ca parametru si intoarce true daca valoarea expresiei nu este un
numar (NaN - Not a Number). in caz contrar,
functia intoarce valoarea false.
parseInt
(sir_de_caractere)
parseFloat
(sir_de_caractere)
cele doua functii analizeaza sirul de
caractere pe care il primesc ca parametru si incearca sa-1
converteasca intr-un numar intreg, respectiv real. in cazul in care
este intalnit un caracter ilegal, acesta este ignorat impreuna cu toate
caracterele care urmeaza. Functiile intorc drept valoare numarul
obtinut prin conversie (intreg pentru parselnt, real pentru parseFloat)
sau, in cazul in care conversia a esuat de la primul caracter din
sir, valoarea NaN.
Functia parseInt accepta optional
si un al doilea parametru (baza in care este
scris numarul). Baza implicita este 10.
2. Un alt exemplu de script care se
incarca doar la lansarea si inchiderea paginii de WEB.
<HTML>
<HEAD>
<SCRIPT
TYPE’=”text/javascript” >
<!- - pentru situatia ca browserul nu
suporta scripturi.
var Nume ;
function DetNume()
function Gata()
// -- >
</SCRIPT>
</HEAD>
<BODY ONLOAD =”DetNume()” ONUNLOAD =”Gata()” >
</BODY>
Alte elemente noi folosite ar fi metoda prompt care este o
fereastra ce permite sa se
introduca date ( siruri de caractere ).
In JavaScript nu este necesara
declararea variabilelor. Daca doriti sa o faceti, este suficient sa
specificati numele variabilei, precedat de cuvantul cheie var. La
declarare nu este necesara specificarea tipului variabilei, ba mai mult,
daca pe parcursul programului atribuii unei variabile o valoare
incomparabila cu tipul ei (determinat implicit), se executa conversia
automata a variabilei la tipul dorit. De exemplu, putem declara o variabila
careia sa ii atribuim o constata intreaga : var x = 100. Daca
doriti, variabilei x ii putem atribui ulterior o valoare de alt tip (de
exemplu sir de caractere): x = 'acum memorez un sir' .
Totusi, putem
face acest lucru fara a preciza
tipul acestei variabile. Se pot face atribuiri pentru variabile, la fel ca in C
. In legatura cu variabilele, se aseamana mai mult cu
limbajul VBasic sau cu VFoxpro. Variabilele pot fi globale sau locale (cu
aceeasi semnificatie cunoscuta din limbajele de programare
universale) .
Prin
urmare, concluzionand, putem spune ca declararea unei variabile se poate
face in doua moduri:
- atribuindu-i pur
si simplu o valoare (de exemplu x = 3.5);
- utilizand cuvantul cheie var (de exemplu, var
x). La declararea utilizand var, variabilei i se poate atribui si o
valoare (de exemplu, var x = 3).
In functie de pozitia declaratiei
variabilei, exista doua tipuri de variabile :
- variabile globale: declaratia lor
este plasata in afara corpului oricarei functii. Domeniul
lor de valabilitate este intregul document.
- variabile locale: declaratia lor este
plasata in corpul unei functii. Domeniul lor de valabilitate este
restrans la functia in care sunt declarate.
3. Un script pentru validarea datelor introduse intr-un formular .
In general, cand se folosesc formulare,
este bine sa se verifice datele introduse de utilizator, si numai
dupa aceea sa se trimita aceste date spre server. De obicei, in
momentul in care se schimba valoarea unui camp din formular sau cand se
apasa butonul SUBMIT, ar trebui sa intervina scriptul si
sa verifice datele (la producerea evenimentelor ONCHANGE, ONSUBMIT sau ONCLICK pe butonul
SUBMIT ).
Sa descriem un exemplu care
verifica daca utilizatorul a introdus corect varsta .
<SCRIPT
TYPE=”text/javascript” >
function
Verificare()
else
if ((parseInt(Button.value)<0)
|| (parseInt(Button.value)>150))
return
Corect;
O astfel de functie se va
apela in locul in care se descrie
formularul sub forma
<B>
Varsta dumneavoastra <B>
<INPUT TYPE =”text” NAME =”varsta ”
OnChange “Verificare()” >
<BR>
Un alt exemplu folosit in
practica este cel de verificare a completarii unui camp de catre utilizator . Un astfel de
script se aseamana cu limbajul
C .
function CampGol( Sir)
Puteam folosi si instructiunea if.
Pe aceeasi idee, putem sa
verificam daca numele contine doar litere sau anumite caractere ca in limbajul C++: for (i=0; i<Sir.length; i++) conditie.
Un alt exemplu ar fi acela in care doriti sa
verificati daca s-a introdus intr-un camp o adresa de email
corecta (putem sa apelam functia anterioara CampGol). Acest lucru inseamna ca in sir exista caracterul , exista
caractere inainte de , exista caracterul pentru a separa domeniul, avem caractere inainte de
acest caracter.
Exemplu
function EmailCorect( Sir)
5. Un alt exemplu este acela de creare a unor
efecte speciale in pagina de WEB. Un prim exemplu ar fi acela in care avem un meniu si dorim ca atunci cand
mouse-ul ajunge pe o anumita optiune, aceasta sa se
evidentieze cumva, sa se animeze cumva. De exemplu daca folosim mici imagini de forma unor
triunghiuri ca niste marcaje puse
in fata optiunilor din meniu, triunghiul meniului pe care se
afla mouse-ul sa apara cu varful in jos ( sau altfel)
<HTML>
<HEAD>
<TITLE> Exemplu de simpla animatie </TITLE>
<SCRIPT type='text/javascript'>
<!--
function LoadImage
if
(document.images)
function
InversareVarfuri(Pozitie, Stare)
else
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR='SILVER' >
<H1>
Acesta este un meniu cu mai multe optiuni </H1>
<P>
<HR>
<TABLE CELLPADDING=12 CELSSPACING=4 >
<TR>
<TD>
<A ONMOUSEOVER='InversareVarfuri(0,1)'
ONMOUSEOUT='InversareVarfuri(0,0)' HREF= 'prim.html' >
<IMG SRC='s1.gif' BORDER=0 > </A>
</TD>
<TD><H3> Prima optiune
<TR>
<TD>
<A ONMOUSEOVER='InversareVarfuri(1,1)'
ONMOUSEOUT='InversareVarfuri(1,0)' HREF = 'prim.html' >
<IMG SRC='s1.gif' BORDER=0 > </A>
</TD>
<TD><H3> A doua optiune
<TR>
<TD>
<A ONMOUSEOVER='InversareVarfuri(2,1)'
ONMOUSEOUT='InversareVarfuri(2,0)' HREF = 'prim.html' >
<IMG SRC='s1.gif' BORDER=0 > </A>
</TD>
<TD><H3> A treia optiune
</TABLE>
</BODY>
</HTML>
6. Un alt exemplu este acela al unui
text care sa deruleze intr-o anumita zona, de exemplu pe un
buton text dintr-un formular. In exemplul urmator este definita functia
recursiva Balans () care deplaseaza un text in campul Text al
formularului F de la dreapta la stanga. Cand textul a atins marginea din stanga
a campului Text, isi schimba directia de miscare,
deplasandu-se spre dreapta s.a.m.d.:
<HTML>
<HEAD>
<TITLE>BANNER</TITLE>
<SCRIPT
TYPE='TEXT/JAVASCRIPT'>
Lg=110;
Viteza=2;
Poz=Lg;
Mesaj='Text care
deruleaza ';
Dir=2;
Lg-=Mesaj.length-1;
function Balans()
if (Poz>Lg)
Sp=' '
for (i=1; i<Poz;i++) Sp+=' ';
document.F.Text.value=Sp+Mesaj;
setTimeout('Balans();',100);
</SCRIPT>
</HEAD>
<BODY ONLOAD='setTimeout('Balans();',100);'>
<CENTER>
<FORM
NAME='F'>
<INPUT SIZE=80
NAME='Text' VALUE=' '>
</FORM>
</CENTER>
</BODY>
</HTML>
Variabila Dir indica directia de miscare. Daca valoarea variabilei Dir este 2,
textul se misca de la dreapta la stanga (deci Poz, pozitia de
inceput a textului, scade la fiecare apel cu valoarea vitezei). Daca valoarea variabilei Dir
este 1, textul se misca de la stanga la dreapta (deci Poz,
pozitia de inceput a textului, creste la fiecare apel cu valoarea
vitezei). Pentru ca textul sa fie afisat in campul text incepand cu
pozitia Poz, se afiseaza mai intai Poz spatii
(retinute in variabila Sp). Directia de miscare se schimba
cand textul a atins una din margini. La incarcarea paginii in fereastra browser-ului
(evenimentul ONLOAD) este lansata in executie functia
setTimeout, cu parametrii 'Balans ()' si 200.
Metoda setTimeout apartine clasei Window
si are ca efect evaluarea unei expresii sau apelarea unei functii
dupa o anumita perioada de timp. in
cazul nostru, este apelata functia Balans(), dupa 200
milisecunde.
Alt exemple de scripturi:
1. Cum a ajuns utilizatorul pe
acest site:
<center>
<script
language='javascript'>
var where = document.referrer;
var name = navigator.appName;
var vers = navigator.appVersion;
document.write('<FONT COLOR=black><FONT
SIZE=2>Tu esti <BR>'+where+' <BR>
'+name+' '+vers+'<BR></FONT></FONT>')
</script>
</center>
Schimbarea culorii backgroundului (1).
<CENTER>
<FORM>
<FONT FACE='VERDANA,
ARIAL'><B>Choose a background color:</B></FONT>
<SELECT name='ccGround' size=”1'
onChange=(document.bgColor=ccGround.options[ccGround.selectedIndex].value)>
<OPTION value='408080'
target='1' selected>Cool Green
<OPTION value='C0C0C0'
target='1'>Cool Grey
<OPTION value='000000'
target='1'>Black
<OPTION value='730200'
target='1'>DarkRed
… se pot pune si alte culori
<OPTION value='FBFF73'
target='1'>Light Yellow
<OPTION value='7CFF7D'
target='1'>LightGreen
<OPTION value='A6BEFF'
target='1'>Light Blue
<OPTION value='FFFFFF'
target='1'>White
</SELECT></FORM></CENTER>
Adauga in favorites:
<SCRIPT LANGUAGE='JavaScript'>
<!—
if ((navigator.appName
== 'Microsoft Internet Explorer') &&
(parseInt(navigator.appVersion) >= 4))
else // -->
</script>
Butoane inainte si inapoi:
<SCRIPT LANGUAGE='JavaScript'>
<!-- hide this
script tag's contents from old browsersfunction goHist(a) //<!--
done hiding from old browsers -->
</script>
<FORM METHOD='post'>
<INPUT TYPE='button' VALUE=' BACK '
onClick='goHist(-1)'>
<INPUT TYPE='button' VALUE='FORWARD'
onClick='goHist(1)'>
</form>
Arata ora sistemului :
<SCRIPT LANGUAGE='JavaScript'>
var timerID = null;
var timerRunning = false;
function stopclock ()
function showtime ()
function startclock ()
</SCRIPT>
<BODY onLoad='startclock();
timerONE=window.setTimeout' BGCOLOR='000080'
TEXT='ffffff'>
<CENTER><form name='clock'
onSubmit='0'>
<input type='text'
name='face' size=13 value=''></CENTER>
Ceas cu calendar (1):
<script language='JavaScript'>
function process()
today = new Date();
if(today.getMinutes()
< 10) elsepad =
'';
document.write('<center><FONT
SIZE=4 color=black>Welcome!!</FONT></center>') if((today.getHours()
< 12) && (today.getHours() >= 6))
if((today.getHours() >= 12) &&
(today.getHours() < 18)) if((today.getHours() >= 18) &&
(today.getHours() <= 23)) if((today.getHours() >= 0) &&
(today.getHours() < 4)) if((today.getHours() >= 4) && (today.getHours() <=
6))
document.write('<center><FONT
SIZE=3
color=black>Time:',today.getHours(),':',pad,today.getMinutes())
document.write(' Date:',today.getMonth()+1,'/',today.getDate(),'/',today.getYear(),'
<br></font></center>');
</script>
