Tutorial JavaScript
de Alexandra Carpen
JavaScript este un limbaj de scripting care a fost creat pentru a adauga interactivitate paginilor HTML.
Un script poate citi si schimba continutul diferitelor elemente HTML, poate reactiona la evenimente, poate fi folosit pentru a valida formulare, pentru a detecta browser-ul utilizatorului.
- Inserarea codului Javascript in pagina HTML
- Ascunderea codului pentru browser-e care nu suporta JavaScript
- Plasarea codului JavaScript in pagina HTML
- Inserarea codului Javascript scris intr-un fisier extern
- Variabile
- Instructiuni conditionale
- Instructiuni de ciclare
- Functii JavaScript
- Ferestre de mesaje
- Evenimente
- Adrese utile
Inserarea codului Javascript in pagina HTML
Se realizeaza prin folosirea tag-ului <script>
<script type="text/javascript">
// cod JavaScript
</script>
Cea mai simpla comanda JavaScript este document.write, care scrie un text in pagina HTML.
Ex.
document.write("Hello World!");
Aceasta comanda scrisa in cadrul tag-ului <script> duce la afisarea textului "Hello World" in pagina browser-ului.
Ascunderea codului pentru browser-e care nu suporta JavaScript
Exista browsere care nu suporta Javascript. Pentru a nu afisa comenzile JavaScript in pagina HTML, acestea pot fi incadrate de comentarii HTML, pentru a fi ignorate de browser-e.
<!--
cod JavaScript
//-->
Simbolurile // folosite inaintea inchiderii comentariului HTML --> reprezinta un comentariu in JavaScript si sunt folosite pentru ca JavaScript sa nu incerce sa execute "-->"
<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>
Plasarea codului JavaScript in pagina HTML
Exista 2 variante:
1. Asezarea codului in sectiunea <head>
Ex.
<html>
<head>
<script type="text/javascript">
...
</script>
</head>
<body>
...
</body>
</html>
Scriptul asezat in sectiunea <head> este incarcat in browser o data cu incarcarea paginii, dar nu se executa decat atunci cand este apelat.
2. Asezarea codului in sectiunea <body>
Ex.
<html>
<head>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
Aceste script-uri se executa cand pagina se incarca.
3. Asezarea codului atat in sectiunea <head>, cat si in sectiunea <body>>
Inserarea codului Javascript scris intr-un fisier extern
Codul JavaScript poate sa fie salvat intr-un fisier (cu extensia .js), atunci cand este nevoie de refolosirea codului pe mai multe pagini.
Pentru a folosi un script dintr-un fisier .js, se adauga tag-ului <script> atributul "src" care sa aiba ca valoare calea care fisierul .js.
<script src="fis.js"></script>
Variabile
Variabilele nu au tip specificat la declarare. Tipul lor este determinat la executia scriptului in functie de prima valoare atribuita.
Numele variabilelor sunt case-sensitive, si nu pot incepe decat cu o litera sau caracterul underscore _.
Declararea unei variabile: var nume = valoare; sau var nume;
(fara o valoare initiala)
Atribuirea se realizeaza la fel ca in Java: var nume = val;
Durata de viata a variabilelor:
1. Variabile declarate in functii
Aceste variabile se numesc variabile locale si pot fi accesate doar in corpul functiei.
2. Variabile declarate in afara unei functii
Pot fi accesate incepand cu locul unde au fost definite si pana la sfarsitul paginii.
Instructiuni conditionale
Sintaxa:
1. Instructiunea if
if (condition)
{
code to be executed if condition is true
}
2. Instructiunea if...else
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
3. Instructiunea switch
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is
different from case 1 and 2
}
Instructiuni de ciclare
1. For
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
2. While
while (var<=endvalue)
{
code to be executed
}
3. do...while
do
{
code to be executed
}
while (var<=endvalue);
3. For...In
Instructiunea for...in este folosita pentru a parcurge elementele unui vector sau proprietatile unui obiect. Codul din corpul instructiunii este executat o singura data pentru fiecare element parcurs.
for (variable in object)
{
code to be executed
}
Functii JavaScript
Functiile contin cod care se executa la aparitia unui eveniment sau la apelul functiei.
Pentru a fi incarcate in momentul apelului, se recomanda ca functiile sa fie definite in sectiunea <head> a paginii.
Sintaxa de definire a functiilor:
function functionname(var1,var2,...,varX)
{
some code
}
var1, var2, ... sunt parametrii trimisi functiei.
O functie fara parametri se defineste astfel:
function functionname()
Functia poate sa intoarca o valoare folosind instructiunea return:
return value;
Ferestre de mesaje
1. Alert Box
Folosita pentr a afisa o informatie la utilizator. Pentru inchidere, utilizatorul trebuie sa apese butonul OK.
Sintaxa:
alert("sometext");
2. Confirm Box
Folosita pentru a cere utilizatorului sa verifica sau sa accepte o informatie.
Utilizatorul poate apasa butonul OK (caz in care este intoarsa valoarea true) sau butonul Cancel (pentru care fereastra intoarce false).
Sintaxa:
confirm("sometext");
3. Prompt Box
Este folosita daca se doreste o valoare introdusa de utilizator.
Daca utilizatorul introduce o valoare si apoi apasa OK, fereastra va intoarce valoarea introdusa. Daca utilizatorul apasa butonul Cancel, fereastra intoarce valoarea null.
Sintaxa:
prompt("Introduceti un text","defaultvalue");
Evenimente
Evenimentele sunt actiuni asociate unor elemente HTML, si care se executa apeland functii JavaScript.
1. Evenimentele onload si onUnload
Sunt declansate cand utilizatorul incarca si respectiv paraseste pagina.
Evenimentul onload poate fi folosit de exemplu pentru a determina browser-ul utilizatorului.
2. Evenimentele onFocus, onBlur si onChange
Aceste evenimente sunt legate de validarea campurilor unui formular.
onFocus - se declanseaza la selectarea campului de catre utilizator
onBlur - se declanseaza la parasirea campului de catre utilizator
onChange - se declanseaza la modificarea campului
Ex.
<input type="text" size="30" id="nume" onchange="verificare_nume()">
3. Evenimentul onSubmit
Este utilizat pentru validarea tuturor campurilor inainte de trimiterea lor. Daca nu toate campurile sunt completate corect, functia care le valideaza ar trebui sa intoarca valoarea false si formularul sa nu fie acceptat.
Ex. <form method="post" action="next_page.htm" onsubmit="return
checkForm()">
4. Evenimentele onMouseOver si onMouseOut
Sunt evenimente declansate de plasarea mouse-ului intr-o anumita zona sau de parasirea acesteia.
Sunt folosite in general pentru crearea de butoane animate.