Ce este JavaScript
JavaScript este un nou limbaj de scripting ce este dezvoltat de Netscape. Cu ajutorul JavaScript puteti creea cu usurinta pagini web interactive. Acest tutorial va arata cateva efecte realizate cu ajutorul JavaScript - si mult mai important, cum sa realizati propriile voastre pagini cu scripturi JavaScript.
JavaScript nu este Java!
Multi oameni au impresia ca JavaScript este acelasi lucru cu Java, si aceasta din cauza similaritatii numelor. Insa nu este adevarat. Cred ca pentru moment nu trebuie sa enumeram diferentele, trebuie doar sa retineti ca JavaScript nu este Java.
Rularea JavaScript
De ce aveti nevoie pentru a rula scripturi scrise in JavaScript? Aveti nevoie de un browser care suporta JavaScript - de exemplu Netscape Navigator (incepand cu versiunea 2.0) sau Microsoft Internet Explorer (MSIE - incepand cu versiunea 3.0). De vreme ce aceste browsere sunt extrem de raspandite multi oameni au posibilitatea de a rula scripturile JavaScript. Acesta este un amanunt important in procesul de alegere a JavaScript ca limbaj de scripting pentru paginile dumneavoastra.
Bineinteles ca aveti nevoie de cunosterea - cel putin la nivel de mediu - a HTML, inainte de a incepe acest tutorial.
Introducerea JavaScript in pagina HTML
Codul JavaScript este introdus direct in pagina HTML. Pentru a vedea cum functioneaza JavaScript sa ne aruncam privirile peste un exemplu usor:
< html>
< body>
< br>
Acesta este un document HTML.
< br>
<script language="JavaScript">
document.write("Acesta este JavaScript!")
</script>
< br>
Din nou cod HTML.
< /body>
< /html>
La prima vedere acesta bucata de cod arata ca un fisier HTML normal. Singurul lucru nou este partea:
<script language="JavaScript">
document.write("Acesta este JavaScript!")
</script>
Acesta este JavaScript! Pentru a observa modul de functionare a acestui script salvati acest fisier ca un fisier normal HTML si incarcati-l in browserul dumneavoastra ce suporta JavaScript.
Iata outputul generat de fisier ( daca browserul dumneavoastra suporta JavaScript veti vedea 3 linii ):
Acesta este un document HTML.
Acesta este JavaScript!
Din nou cod HTML.
Trebuie sa recunosc ca acest script nu prea este folositor - acelasi rezultat il puteam obtine cu HTML mult mai simplu. Am dorit numai sa demonstrez folosirea tagului <script>. Tot ce este intre tagul <script> si tagul </script> este interpretat drept cod JavaScript. Puteti observa folosirea document.write() - una dintre cele mai importante comezi in programarea JavaScript. document.write() este folosit pentru a scrie ceva intr-un document (in acest caz in documentul HTML). Asa ca micul nostru program JavaScript scrie textul Acesta este JavaScript! in documentul HTML.
Browsere ce nu suporta JavaScript
Cum arata pagina noatra daca browserul nu intelege JavaScript? Acel browser nu va intelege tagul <script>. Ca atare, browserul ignora tagul si furnizeaza codul ca si cum ar fi simplu text. Aceasta inseamna ca utilizatorul va vedea codul JavaScript in interiorul paginii HTML. In mod sigur nu asta doream sa realizam. Exista o modalitate de a ascunde codul sursa de browserele mai vechi. Vom utiliza comentariile HTML <!-- -->. Codul sursa va arata astfel:
< html>
< body>
< br>
This is a normal HTML document.
< br>
<script language="JavaScript">
<!-- hide from old browsers

document.write("This is JavaScript!");

// -->
</script>
< br>
Back in HTML again.
< /body>
< /html>
Iesirea intr-un browser JavaScript va arata astfel:
This is a normal HTML document.
Back in HTML again.
Fara comentariul HTML rezultatul intr-un browser ce nu suporta JavaScript ar fi:
This is a normal HTML document.
document.write("This is JavaScript!");
Back in HTML again.
Va rog sa observati ca nu puteti ascunde complet codul JavaScript. Ceea ce facem cu aceste taguri este sa prevenim aparitia codului in document - dar utilizatorul poate vedea sursa prin 'View document source'. Nu exista nici o modalitate de a impiedica pe cineva de a vedea codul sursa (pentru a vedea cum a fost realizat un anumit efect).
Crearea de casete simple de mesaj
O metoda ptr. a lucra cu casete de dialog este metoda alert. Este necesar un sir de caractere ca parametru care va fi afisat. Ea se fol. Ptr. situatii in care doriti sa afisati intr-o caseta de dialog un mesaj adresat utilizatorului.Urmatorul exemplu va fol. functia alert.
< html><head><title>alert </title></head>
< body>
< script language="JavaScript">
alert("\nSalut, JS!");
< /script>
< /body></html>
Metoda prompt
creeaza o caseta de dialog cu un mesaj specificat un buton OK si un buton Cancel si in acelasi timp ofera un camp ptr. introducerea datelor implicite.
Necesita 2 siruri de caractere ca parametrii.
Ex: prompt(“Cat este suma 10+10”,”0”);
“ Cat este suma 10+10”=sirul care va fi afisat; iar”0”=textul implicit care va fi afisat in camp. Metoda returneaza sirul de caractere acre a fost introdus de utilizator.
Metoda confirm
confirm(“Gresit mai incearca!”);
Ex:
< html><head><title>alert </title></head>
< body>
< script language="JavaScript">
alert("\nSalut, JS");
prompt("Cat este suma 10+10","0");
confirm("Gresit mai incearca!");
< /script>
< /body></html>

Evenimente
Evenimentele sunt foarte importante in programarea JavaScript. Evenimentele sunt de cele mai multe ori declansate de actiuni ale utilizatorului. Daca utilizatorul apasa un buton un eveniment Click are loc. Daca mouse-ul este deasupra unei legaturi un eveniment MouseOver are loc.
Dorim ca programul JavaScript sa reactioneze la unele evenimente. Aceasta se poate realiza cu ajutorul "event-handlers" - manageri de evenimente sau gestionar de evenimente. Un buton poate creea o fereastra atunci cand este apasat. Aceasta inseamna ca fereastra apare ca o reactie la evenimentul Click. Managerul de eveniment (event-handler) pe care trebuie sa-l utilizam este numit onClick. Acesta spune computerului ce sa faca atunci cand evenimentul are loc. Urmatorul cod este un exemplu simplu de event-handler onClick:
< form>
< input type="button" value="Click me" onClick="alert('Yo')">
< /form>
Bottom of Form 1
Exista cateva lucruri care trebuie analizate in acest cod - asa ca sa o luam pas cu pas. Observati ca am creeat un buton cu ajutorul unui formular (aceasta este o problema HTML asa ca nu va fi analizata aici). Noua bucata de cod este onClick="alert('Yo')" in interiorul tagului <input>. Asa cum am spus deja aceasta defineste ce se intampla cand butonul este apasat. Atunci cand un eveniment Click are loc computerul executa alert('Yo'). Acesta este codul JavaScript (Va rog sa observati ca nu utilizam tagul <script> in acest caz).
alert() va permite sa creeati ferestre de avertizare (popup windows). In interiorul parantezelor trebuie sa specificati un sir. In cazul nostru acesta este 'Yo'. Acesta este un text ce va fi afisat in fereastra de avertizare. Deci scriptul nostru creeaza o fereastra cu continutul 'Yo' atunci cand utilizatorul apasa butonul.
Un lucru poate insa sa aduca confuzie. In comanda document.write() am folosit ghilimele duble "" , dar in combinatie cu alert() am folosit ghilimele simple ' '. De ce? In principiu pot fi ambele utilizate. Dar in ultimul exemplu am scris onClick="alert('Yo')" - puteti vedea ca am folosit si ghilimele simple si duble. Daca am fi scris onClick="alert("Yo")" computerul ar fi fost confuzionat pentru ca nu este clar care parte apartine onClick event-handler si care nu. Asa ca trebuie sa alternam ghilimelele. Nu conteaza ordinea in care folositi ghilimelele - mai intai cele duble si apoi cele simple sau viceversa. Puteti scrie fara nici o problema onClick='alert("Yo")'.
Exista diferite manageri de evenimente (event handler) pe care le puteti utiliza. Veti face cunostinta cu o parte in acest tutorial, dar nu cu toti. Va rog sa consultati referintele limbajului daca doriti sa aflati ce alti manageri de evenimente exista.
Daca utilizati Netscape Navigator fereastra care apare va contine textul JavaScript alert. Acesta este o restrictie din motive de securitate. Puteti creea o astfel de fereastra cu metoda promt(). Acesta fereastra accepta o intrare (un input). Un script rau intentionat ar putea imita un mesaj de sistem si ar putea cere introducerea unei parole. Textul din fereastra arata ca fereastra aparuta are ca loc de provenienta browserul si nu sistemul de operare. Deoarece este o restrictie de securitate nu puteti elimina acest mesaj.
Functii
Vom utiliza functii in cea mai mare parte a programelor noastre JavaScript. De aceea vom explora subiectul inca din primul capitol.
Functiile sunt o metoda de a lega mai multe comenzi impreuna. Sa scriem un script care furnizeaza un anumit text de trei ori consecutiv.
< html>
< script language="JavaScript">
< !-- hide
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
// -->
< /script>
< /html>
Acest script va scrie
Welcome to my homepage!
This is JavaScript!
de trei ori. Uitati-va la codul sursa - scriind de trei ori comanda ne duce la rezultatul scontat. Dar este eficient ? Nu, deci haideti sa rezolvam problema mai simplu. Ce spuneti de codul urmator care face acelasi lucru:
< html>
< script language="JavaScript">
< !-- hide
function myFunction() {
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
}

myFunction();
myFunction();
myFunction();

// -->
< /script>
< /html>
In acest script definim o functie. Aceasta se realizeaza cu urmatoarele linii de cod:
function myFunction() {
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
}
Comenzile din interiorul {} apartin functiei myFunction(). Aceasta inseamna ca cele doua comenzi document.write() sunt stranse impreuna si pot fi executate prin apelarea functiei. In exemplul nostru avem trei apelari ale functiei.Puteti observa ca am scris myFunction() de trei ori imediat sub definitia functiei. Acestea sunt trei apelari ale functiei si au rolul de a face ca functia sa fie executata de trei ori.
Acesta este un exemplu simplu de functi. Probabil va intrebati de ce functiile sunt asa de importante. In timp ce citeati acest tutorial v-ati dat seama cu certitudine de beneficiile pe care le aduc functiile. In special translatarea variabilelor faca ca scripturile sa fie cu adevarat flexibile - vom vedea mai tarziu la ce se refera acestea.
Functiile pot de asemenea sa fie folosite in combinatie cu managerii de evenimente (event-handlers). Iata un exemplu:
< html>
< head>

<script language="JavaScript">
< !-- hide

function calculation() {
var x= 12;
var y= 5;

var result= x + y;

alert(result);
}

// -->
< /script>

</head>
< body>

<form>
< input type="button" value="Calculate" onClick="calculation()">
< /form>

</body>
< /html>
Puteti testa acest exemplu:
Top of Form 2

Bottom of Form 2
Aceast buton apeleaza functia calculation(). Puteti observa ca aceasta functie efectueaza o serie de calcule simple. Pentru aceasta utilizam variabilele x, y si result. Putem defini variabila cu ajutorul cuvantului cheie var. Variabilele pot fi utilizate pentru a inmagazina diferite valori - numere, siruri alfanumerice etc. Linia var result= x + y; transmite browserului sa creeze o variabila result si sa o stocheze in x + y (i.e. 5 + 12). Dupa acesta operatie variabila result este 17. Comanda alert(result) este in acest caz aceeasi cu alert(17). Vom obtine o fereastra afisind numarul 17.

Amplasarea scripturilor
!!! Scripturile scrise in sectiunea <body>….</body> se vor executa atata timp cat pagina se incarca.
Scripturile scrise in sectiunea <head>….</head> se vor executa cand sant apelate, sau cand este declarat un eveniment.

a)amplasate in sectiunea de header
< html>
< head>
< script language=”JavaScript">
instructii;
< /script>
< /head>

b)amplasate in sectiunea body
< html>
< head>
< /head>
< body>
< script language=”JavaScript">
instructii;
< /script>
< /body>
!!! Se pot amplasa cate scripturi doriti in sectiunea body numai sa nu uitati sa le inchideti.
c)amplasate in sectiunea header cat si body
< html>
< head>
< script language=”JavaScript">
instructii;
< /script>
< /head>
< body>
< script language=”JavaScript">
instructii;
< /script>
< /body>
d) scripturi externe
< html>
< head>
< /head>
< body>
< script src="xxx.js"></script>
< /body>
< /html>
In acest caz se salveaza ceea ce dorim sa scriem in script intr-un fisier cu extensia js (de ex: “xxx.js”) fisier care va fi apelat in pagina principala datorita atributului src= “xxx.js". Ele sunt folosite in cazul in care in pagina principala dorim sa apelam mai multe scripturi externe.

EX3-Scripturi declarate in partea de header
< html>
< head>
< script language=”JavaScript">
function message()
{
alert("This alert box was called with the onload event");
}
< /script>
< /head>
< body onload="message()">
< /body>
< /html>
!!!!Scriptul se va incarca sigur inainte de a fi apelata functia tocmai datorita metodei alert.

Prin rulare se va obtine
La incarcarea paginii apare casuta de mesaj (casuta alert) pe care va fi scris textul:
This alert box was called with the onload event

EX4-Scripturi declarate in partea de body
< html>
< head>
< /head>
< body>
< script language=”JavaScript">
document.write("This message is written when the page loads");
< /script>
< /body>
< /html>
Prin rulare se va obtine
This message is written when the page loads

EX5-Scripturi externe
< html>
< head>
< /head>
< body>
< script src="xxx.js">
< /script>
< p>
The actual script is in an external script file called "xxx.js".
< /p>
< /body>
< /html>

Prin rulare se va obtine
In fisierul xxx.js voi avea textul: This script is external !!! dupa care se afiseaza textul din body cuprins intre marcajele <p>..</p>si anume:
The actual script is in an external script file called "xxx.js".

Declararea unei variabile
Declararea unei variabile se poate face cu urmatoarea instructie:

var strname = some value;

Atribuirea unei valori unei variabile

Atribuirea unei valori unei variabile se face in felul urmator:
var strname = "Hege";
- strname reprezinta numele variabilei , iar valoarea care se doreste sa se atribuie variabilei este la dreapta si se numeste “Hege”.
Durata de functionare a unei variabile
Variabile locale
Cand se declara o variabila in cadrul unei functii , variabila poate fi accesata doar in cadrul acelei functii. In momentul parasirii functiei respective variabila este distrusa. Aceste variabile se numesc variabile locale. Putem avea variabile locale cu acelasi nume in functii diferite deoarece fiecare este recunoscuta numai de functia in care este declarata.
Variabile globale
Daca se declara o variabila in afara unei functii , toate functiile din pagina au acces la ea. Durata acestei variabile incepe din momentul de cand este declarata , si se sfarseste in momentul in care pagina se inchide.

EX6-Declararea si afisarea continutului unei variabile
< html>
< body>
< script language=”JavaScript”>
var name = "Hege";
document.write(name);
document.write("<h1>"+name+"</h1>");
< /script>
< p>This example declares a variable, assigns a value to it, and then displays the variable.</p>
< p>Then the variable is displayed one more time, only this time as a heading.</p>
< /body>
< /html>

Prin rulare se va obtine

Hege
Hege
This example declares a variable, assigns a value to it, and then displays the variable.
Then the variable is displayed one more time, only this time as a heading.

EX-Declararea si afisarea continutului unei variabile unde in prealabil s-a fol. metoda prompt si eval
< html>
< head>
< title>prompt
< /title>
< /head>
< body>
< script language="JavaScript">
result=eval(prompt("Introduceti o expresie:","0"));
document.write("<h3>Rezultat:" + result + "</h3>");
< /script>
< /body>
< /html>

Operatorii aritmetici
Operatori Descriere Exemple Rezultate
+ Adunare x=2 x+2 4
- Scadere x=2 5-x 3
* Inmultire x=4 x*5 20
/ Impartire 15/5 5/2 3 2.5
% Modulo (reprezinta restul impartirii celor doua numere) 5%2 10%8 10%2 1 2 0
++ Incrementare x=5 x++ x=6
-- Decrementare x=5 x-- x=4
Operatorii de atribuire
Operatori Exemple Este echivalent cu
= X=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Operatorii de comparare
Operatori Descriere Exemple
== Este egal cu 5==8 returneaza fals
!= Nu este egal cu 5!=8 returneaza true
> Mai mare decat 5>8 returneaza fals
< Mai mic decat 5<8 returneaza true
> = Mai mare sau egal 5>=8 returneaza fals
< = Mai mic sau egal 5<=8 returneaza true
Operatorii logici
Operatori Descriere Exemple
&& And x=6 y=3 (x < 10 && y > 1) returneaza true
|| Or x=6 y=3 (x==5 || y==5) returneaza false
! Not x=6 y=3 x != y returneaza true
Operatori de tip sir de caractere
Operatorii de tip sir de caractere sunt de exmplu un text de forma “Hello World!” . Pentru a concatena ( a le alatura sau alipi) continutul a doua sau mai multe variabile impreuna se foloseste operatorul +.
Ex:
txt1="What a very";
txt2="nice day!";
txt3=txt1+txt2;

Variabila txt3 va contine acum urmatorul sir de caractere: "What a verynice day!"

!!! Pentru a insera un spatiu intre continutul a doua variabile de tip sir de caracter se insereaza un spatiu intre cele doua varabile si anume ” “, sau se insereaza un spatiu in unul din siruri.

txt1="What a very";
txt2="nice day!";
txt3=txt1+" "+txt2;
sau
txt1="What a very ";
txt2="nice day!";
txt3=txt1+txt2;

In acest caz variabila txt3 va contine acum textul "What a very nice day!".

alert("This is a message");

Definirea unei functii
1. Functie cu parametrii

function myfunction(argument1,argument2,etc)
{
instructiuni;
}

myfunction = numele functiei
argument1, argument2 = parametrii functiei

2 . Functie fara parametrii

function myfunction()
{
instructii;
}
La functiile fara parametrii trebuie sa includem parantezele
Argumentele sunt variabile care vor fi folosite in functii.
Prin plasarea functiei in partea de header a unui document, puteti fi sigur ca tot codul din functie va fi incarcat inainte de apelul finctiei.

Functii care returneaza o valoare expresiei apelante

EX
function result(a,b)
{
c=a+b;
return c;
}
Apelul unei functii
O functie nu se executa inainte de apelul ei.

Apelul unei functii care contine argumente

myfunction(argument1,argument2,etc)

sau fara argumente:
myfunction()

Instructiunea return
Functiile care returneaza un rezultat folosesc instructiunea “return”.

Ex1: functie care returneaza suma a doua numere

function total(a,b)
{
result=a+b;
return result;
}

Cand se apeleaza aceasta functie trebuie transmisi doi parametrii cu ea.

sum=total(2,3)

Valoarea returnata de catre functia total(a,b) va fi memorata in variabila numita sum.

EX1: Apelul unei functii
< html>
< head>
< script language="JavaScript">
function myfunction()
{
alert("HELLO");
}
< /script>
< /head>
< body>
< form>
< input type="button" onclick="myfunction()" value="Call function">
< /form>
< p>By pressing the button, a function will be called. The function will alert a message.</p>
< /body>
< /html>
Prin rulare se va obtine
Un buton care pe el va fi scris “Call function” iar prin apasarea pe buton (onclick) apelam functia myfunction si va aparea caseta alert cu textul “HELLO” scris pe ea., dupa care in body va aparea textul
By pressing the button, a function will be called. The function will alert a message.

EX2: Functii care au argumente
< html>
< head>
< script language=”JavaScript">
function myfunction(txt)
{
alert(txt);
}
< /script>
< /head>
< body>
< form>
< input type="button" onclick="myfunction('Hello')" value="Call function">
< /form>
< p>By pressing the button, a function with an argument will be called. The function will alert
this argument.</p>
< /body>
< /html>
Prin rulare se va obtine

Top of Form 1

Bottom of Form 1
By pressing the button, a function with an argument will be called. The function will alert this argument.

Prin apasarea butonului va aparea o casuta de mesaj pe care va sta scris textul “Hello”.

Ex 3 Functii cu doua argumente
< html>
< head>
< script language=”JavaScript”>
function myfunction(txt)
{
alert(txt);
}
< /script>
< /head>
< body>
< form>
< input type="button" onclick="myfunction('Good Morning!')" value="In the Morning">
< input type="button" onclick="myfunction('Good Evening!')" value="In the Evening">
< /form>
< p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
< /p>
< /body>
< /html>
Prin rulare se va obtine
Top of Form 1

Bottom of Form 1
When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.
Prin apasarea pe butonul pe care sta scris “In the Morning” va aparea o casuta de mesaj pe care este scris ‘Good Morning!’, iar prin apasarea butonului pe care sta scris “In the Evening “va aparea o casuta de mesaj pe care este scris 'Good Evening!'.

Ex 4: Functie care returneza o valoare
< html>
< head>
< script language=”JavaScript”>
function myFunction()
{
return ("Hello, have a nice day!");
}
< /script>
< /head>
< body>

<script language=”JavaScript”>
document.write(myFunction());
< /script>
< p>The script in the body section calls a function.</p>
< p>The function returns a text.</p>
< /body>
< /html>

Prin rulare se va obtine
Hello, have a nice day!
The script in the body section calls a function.
The function returns a text.

Ex 5: Functie cu argumente care returneaza o valoare
< html>
< head>

<script language=”JavaScript”>
function total(numberA,numberB)
{
return numberA + numberB;
}
< /script>
< /head>
< body>
< script language=”JavaScript”>
document.write(total(2,3));
< /script>
< p>The script in the body section calls a function with two arguments, 2 and 3.</p>
< p>The function returns the sum of these two arguments.</p>
< /body>
< /html>
Prin rulare se va obtine
5
The script in the body section calls a function with two arguments, 2 and 3.
The function returns the sum of these two arguments.

Sintaxa

if (conditie)
{
instructiile vor fi executate daca conditia va fi adevarata;
}

Ex
< script language=”JavaScript”>
//If the time on your browser is less than 10,
//you will get a "Good morning" greeting.
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
< /script>
Instructiile din ciclul if vor fi executate daca conditia va fi adevarata.

A2) IF ELSE

Sintaxa

if (conditie)
{
instructiile (codul) se vor executa daca conditia este adevarata (true);
}
else
{
instructiile (codul) se vor executa daca conditia este falsa (false);
}

Ex
< html>
< head>
< title>operatori
< /title>
< /head>
< body>
< script language="JavaScript">
var rezultat;
rezultat=eval(prompt("Rezultatul adunarii 10+10","0"));

if (rezultat==20)
alert("Corect");
else
alert("Gresit");
< /script>
< /body>
< /html>

Ex
< script language=”JavaScript”>
//If the time on your browser is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
< /script>
b) Instructia Switch
Se va folosi daca vei vrea sa selectezi unul sau mai multe blocuri de cod care vor fi executate

Sintaxa

switch (expresie)
{
case eticheta1:
instructii care se vor executa daca expresia=eticheta1;
break;
case eticheta2:
instructii care se vor executa daca expresia=eticheta2;
break;
default:
instructii care se vor executa daca expresia este diferita de ambele etichete atat eticheta1 cat si eticheta2;
}
Functionarea:

La inceput avem o singura expresie(care poate fi o variabila) care va fi evaluata prima data.Valoarea expresiei va fi apoi comparata cu fiecare eticheta respectiv, valoare din structura case. Daca expresia va fi egala cu eticheta blocul de instructii asociat etichetei respective va fi executat. Se foloseste instr. break
ptr. a preveni saltul la urmatorul case.

Exemplu
< script language=”JavaScript”>
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
< /script>

Operatorul conditional din Java Script atribuie o valoare unei variabile bazindu-se pe o conditie
Sintaxa
variablename=(condition)?value1:value2
Exemplu
greeting=(visitor=="PRES")?"Dear President ":"Dear "

Daca variabila visitor este egala cu PRES atunci in variabila greeting se va memora "Dear President ", iar daca variabila visitor nu este egala cu PRES atunci in variabila greeting se va memora "Dear”.

EX 1 -Instructiunea IF
< html>
< body>
< script language=”JavaScript”>
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("<b>Good morning</b>");
}
< /script>
< p>
This example demonstrates the If statement.
< /p>
< p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
< /p>
< /body>
< /html>
Prin rulare se va obtine
This example demonstrates the If statement.
If the time on your browser is less than 10, you will get a "Good morning" greeting.

EX2-if else

<html>
< body>
< script language=”JavaScript”>
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("<b>Good morning</b>");
}
else
{
document.write("<b>Good day</b>");
}
< /script>
< p>
This example demonstrates the If...Else statement.
< /p>
< p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
< /p>
< /body>
< /html>
Prin rulare se va obtine
Good day
This example demonstrates the If...Else statement.
If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting.

EX3 -RANDOM LINK
< html>
< body>
< script language=”JavaScript”>
var r=Math.random();
if (r>0.5)
{
document.write("<a href='http://www.w3schools.com'>Learn Web Development!</a>");
}
else
{
document.write("<a href='http://www.refsnesdata.no'>Visit Refsnes Data!</a>");
}
< /script>
< /body>
< /html>
Prin rulare se va obtine:
Learn Web Development! <http://www.w3schools.com>

Ex 4 - Instructiunea switch

<html>
< body>
< script language=”JavaScript”>
var d = new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm really looking forward to this weekend!");
}
< /script>
< p>This example demonstrates the switch statement.</p>
< p>You will receive a different greeting based on what day it is.</p>
< p>Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>
< /body>
< /html>

Prin rulare se va obtine:
Finally Friday
This example demonstrates the switch statement.
You will receive a different greeting based on what day it is.
Note that Sunday=0, Monday=1, Tuesday=2, etc.

Instructiunile de ciclare in JavaScript sunt folosite pentru a executa acelasi bloc de instructiuni de un numar specificat de ori. Acestes sunt:
while - executa blocul de instructiuni (bucla) atata timp cat conditia este adevarata
do...while - executa blocul de instructiuni macar o data, si dupa aceea repeta codul de instructiuni (respectiv bucla)cat timp conditia este adevarata.
for - executa blocul de instructiuni de un numar specificat de ori.

While

while (conditie)
{
instructiuni;
}

do...while

do
{
instructiuni;
}
while (conditie)

for
for (initializare; conditie; incrementare)
{
instructiuni;
}

Ex 1: For-Loop
< html>
< body>
< script language=”JavaScript”>
for (i = 0; i <= 5; i++)
{
document.write("The number is " + i);
document.write("<br>");
}
< /script>
< p>Explanation:</p>
< p>The for loop sets <b>i</b> equal to 0.</p>
< p>As long as <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
< p><b>i</b> will increase by 1 each time the loop runs.</p>
< /body>
< /html>
Prin rulare se va obtine:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
Explanation:
The for loop sets i equal to 0.
As long as i is less than , or equal to, 5, the loop will continue to run.
i will increase by 1 each time the loop runs.

EX 2 Scrierea unui text formatat folosind ciclul for
< html>
< body>
< script language=”JavaScript”>
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i);
document.write("</h" + i + ">");
}
< /script>
< /body>
< /html>
Prin rulare se va obtine:
This is header 1
This is header 2
This is header 3
This is header 4
This is header 5
This is header 6
EX 3 While-Loop
< html>
< body>
< script language=”JavaScript”>
i = 0;
while (i <= 5)
{
document.write("The number is " + i);
document.write("<br>");
i++;
}
< /script>
< p>Explanation:</p>
< p><b>i</b> equal to 0.</p>
< p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
< p><b>i</b> will increase by 1 each time the loop runs.</p>
< /body>
< /html>
Prin rulare se va obtine:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
Explanation:
i equal to 0.
While i is less than , or equal to, 5, the loop will continue to run.
i will increase by 1 each time the loop runs.
Ex 4:Do While Loop
< html>
< body>
< script language=”JavaScript”>
i = 0;
do
{
document.write("The number is " + i);
document.write("<br>");
i++;
}
while (i <= 5)
< /script>
< p>Explanation:</p>
< p><b>i</b> equal to 0.</p>
< p>The loop will run</p>
< p><b>i</b> will increase by 1 each time the loop runs.</p>
< p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
< /body>
< /html>
Prin rulare se va obtine:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
Explanation:
i equal to 0.
The loop will run
i will increase by 1 each time the loop runs.
While i is less than , or equal to, 5, the loop will continue to run.

O functie numita “myfunction” este diferita de o alta functie numita “myFunction”.
Simboluri
Simbolurile deschise ( { [ “ ’ trebuiesc neaparat inchise ' " ] } ).
Cele doua linii (declarari de variabile) sunt identice.

name="Hege"
name = "Hege"
Intreruperea unei linii
Puteti rupe o linie dintr-un text cu un backslash \.

document.write("Hello \
World!")
Note: Nu puteti intrerupe codul unei linii in modul urmator.

document.write \
("Hello World!")
Acest exemplu va declansa o eroare.

Inserarea de caractere speciale

Puteti insera caractere speciale ca : “ ‘ ; & impreuna cu backslash \.
Ex
document.write ("You \& I sing \"Happy Birthday\".");
La iesire
You & I sing "Happy Birthday".
Comentarii
Intr-un cod sursa JavaScript puteti introduce comentarii sub forma “//”:

sum=a + b //se va calcula suma

Comentariile JavaScript se mai pot introduce si sub forma /*………text…………….*/ , acesta numindu-se comentariu multilinie.

sum=a + b /*calculeaza suma a celor doua numere*/

Comentarii multilinie

/* This is a comment
block. It contains
several lines*/