Scribd
Încărcați
42 vizualizări

Limbajul Client JavaScript

Documentul prezintă exemple de utilizare a limbajului JavaScript pentru crearea și manipularea de obiecte, tablouri și valori matematice. Sunt demonstrate diferite tipuri de operatori precum aritmetici, de asignare, de comparare și logici.

Încărcat de

Ionut Daniel Dragut
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
42 vizualizări

Limbajul Client JavaScript

Documentul prezintă exemple de utilizare a limbajului JavaScript pentru crearea și manipularea de obiecte, tablouri și valori matematice. Sunt demonstrate diferite tipuri de operatori precum aritmetici, de asignare, de comparare și logici.

Încărcat de

Ionut Daniel Dragut
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 11

Limbajul client JavaScript

Exemplu 1: crearea unui tablou


<html>
<body>
<script type="text/javascript">
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />")
}
</script>
</body>
</html>

Exemplu 2: Afisarea elemetelor unui tablou folosind structura for ..in, pe care o vom
explica mai tarziu:
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>

Exemplu 3: unirea a doua tablouri.


<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Tove"
arr[2] = "Hege"
var arr2 = new Array(3)
arr2[0] = "John"
arr2[1] = "Andy"
arr2[2] = "Wendy"
document.write(arr.concat(arr2))
</script>
</body>
</html>

Exemplu 4: punerea elem. unui tablou intr-un sir de caractere:


<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr.join() + "<br />")
document.write(arr.join("."))
</script>
</body>
</html>

Exemplu 5: sortarea alfabetica


<html>
<body>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
arr[3] = "Kai Jim"
arr[4] = "Borge"
arr[5] = "Tove"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
</body>
</html>

l
Exemplu 6: sortarea numerica.
<html>
<body>
<script type="text/javascript">

function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>

Obiecte de tip boolean


Aceste obiecte sunt mai speciale deoarece au doar doua valori, adevarat si fals si sunt folosite
in general cand avem doar doua cazuri intr-o anumita situatie.
Putem defini un obiect boolean astfel:
var myBoolean=new Boolean()

Obs: daca obiectului nu i se da initial nici o valoare sau i se da una din valorile 0, -0, false, ""
acesta este setat automat pe false.
Toate liniile de cod de mai jos creeaza obiecte booleene cu valoarea false:
var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
Toate liniile de mai jos creeaza obiecte de tip boolean care au valoarea initiala true:
var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")
Voi da mai jos cateva exemple de utilizare a obiectelor de tip boolean:

Exemplu 1: verificarea daca un booleean este adevarat sau fals.


<html>
<body>
<script type="text/javascript">
var b1=new Boolean( 0)
var b2=new Boolean(1)
var b3=new Boolean("")
var b4=new Boolean(null)
var b6=new Boolean("false")
document.write("0 is boolean "+ b1 +"<br />")
document.write("1 is boolean "+ b2 +"<br />")
document.write("An empty string is boolean "+ b3 + "<br />")
document.write("null is boolean "+ b4+ "<br />")
document.write("NaN is boolean "+ b5 +"<br />")
document.write("The string 'false' is boolean "+ b6 +"<br />")
</script>
</body>
</html>

Obiecte de tip matematic


Aceste obiecte ne permit sa realizam operatii matematice obisnuite. Clasa de obiecte
matematice include o serie de valori si functii matematice. Un obiect din aceasta clasa nu
trebuie definit inainte de a fi folosit.

Valori matematice:
JavaScript ne ofera cateva valori matematice predefinite utilizate in calculele matematice cum
sunt: E, PI, radical din 2, radical din 0.5, logaritm natural din 2, etc.
Putem folosi aceste valori astfel:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Metode matematice:
Alaturi de valorile predefinite existente in aceasta clasa exista si cateva metode sau functii
matematice.
Exemple de astfel de functii:
1. functia round() - realizeaza rotunjirea unui numar cu zecimale:
document.write(Math.round(4.7))
va afisa:
5
2. functia random() - returneaza un numar la nimereala intre 0 si 1:
document.write(Math.random())
va afisa
0.3734018030443152
3. codul de mai jos foloseste floor() pentru a afisa un numar intre 0 si 10
document.write(Math.floor(Math.random()*11))
va afisa:
8

Metodele existente in clasa Math:

Metoda Descriere
abs(x) Returneaza valoarea absoluta a unui numar
acos(x) Returneaza acos dintr-un numar
asin(x) Returneaza asin dintr-un numar
atan(x) Returneaza atangent dintr-un numar ca valoare intre -PI/2 si PI/2 grade
ceil(x) Returneaza rotunjirea unui numar la valoarea mai mare cea mai apropiata
cos(x) Returneaza cosinus dintr-un numar
floor(x) Returneaza rotunjirea unui numar la valoarea mai mica cea mai apropiata
log(x) Returneaza logaritm natural (in baza E) dintr-un numar
max(x,y) Returneaza maximul dinte x si y
min(x,y) Returneaza minimul dintre x si y
pow(x,y) Returneaza x la puterea y
random() Returneaza un numar la nimereala intre 0 si 1
round(x) Rotunjeste un numar la cea mai apropiata valoare
sin(x) Returneaza sinusul unui numar
sqrt(x) Returneaza radacina unui numar
tan(x) Returneaza tangenta unui numar

Exemple de utilizare a clasei Math:

Exemplu 1: metoda round()


<html><body><script type="text/javascript">
document.write(Math.round(0.60) + "<br />")
document.write(Math.round(0.50) + "<br />")
document.write(Math.round(0.49) + "<br />")
document.write(Math.round(-4.40) + "<br />")
document.write(Math.round(-4.60))</script></body></html>

Exemplu 2: metoda random()


<html><body><script type="text/javascript">
document.write(Math.random())
</script></body></html>

Exemplu 3: metoda max()


<html><body><script type="text/javascript">
document.write(Math.max(5,7) + "<br />")
document.write(Math.max(-3,5) + "<br />")
document.write(Math.max(-3,-5) + "<br />")
document.write(Math.max(7.25,7.30))
</script></body></html>

Exemplu 4: metoda min()


<html><body>
<script type="text/javascript">
document.write(Math.min(5,7) + "<br />")
document.write(Math.min(-3,5) + "<br />")
document.write(Math.min(-3,-5) + "<br />")
document.write(Math.min(7.25,7.30))
</script></body></html>
Operatori

Operatorii sunt elemente ale limbajului JavaScript care actioneaza asupra unuia sau mai
multor operanzi pentru a produce o valoare, o actiune si o valoare sau o limitare de domeniu
pentru unele variabile sau pentru anumite restrictii. Exista mai multe tipuri de operatori.

Operatorii aritmetici

Operator Descriere Exemplu Rezultat


+ Adunarea a doua numere x=2 4
y=2
x+y
- Scaderea a doua numere x=5 3
y=2
x-y
* Inmultirea x=5 20
y=4
x*y
/ Impartirea 15/5 3
5/2 2.5
% Operatia modul (restul impartirii 5%2 1
unui numar la altul) 10%8 2
10%2 0
++ Incrementarea (adunare cu 1) x=5 x=6
x++
-- Decrementare (scadere cu 1) x=5 x=4
x--

Operatori de asignare (operatori prin care dam valori)

Operator Exemplu Este acelasi lucru 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

Operatori de comparatie

Operator Descriere Exemplu


== Este egal cu 5==8 returneaza false
=== Este egal cu (verifica pentru amandoua x=5
valorile si scrie) y="5"
x= =y returneaza true
x= = =y returneaza false
!= Nu este egal cu 5!=8 returns true
> Este mai mare decat 5>8 returneaza false
< Este mai mic decat 5<8 returneaza true
>= Este mai mare sau egal 5>=8 returneaza false
<= Este mai mic sau egal 5<=8 returns true

Operatori logici

Operator Descriere Exemplu


&& si x=6
y=3

(x < 10 && y > 1) returneaza true


|| ori x=6
y=3

(x==5 || y==5) returneaza false


! not x=6
y=3

!(x==y) returneaza true

Operatori pentru siruri de caractereUn obiect de tip string este dupa cum am spus un text, ca
de exemplu "Hello World!".Pentru a concatena, sau auni doua stringuri putem folosi
operatorul "+" astfel: txt1="What a very"txt2="nice day!"txt3=txt1+txt2

Variabila txt3 contine acum textul "What a verynice day!".Pentru a adauga un spatiu intre
doua variabile de tip string, inseram un spatiu in expresie sau intr-una din cele doua variabile:
txt1="What a very"txt2="nice day!"txt3=txt1+" "+txt2ortxt1="What a very "txt2="nice
day!"txt3=txt1+txt2

Variabila txt3 contine acum textul "What a very nice day!".Operatori conditionaliJavaScript
contine de asemenea si operatori conditionali care dau o valoare unei variabile in functie de o
conditie.Sintaxa: variablename=(condition)?value1:value2

Exemplu: greeting=(visitor=="PRES")?"Dear President ":"Dear "

Daca variabila visitor este egala cu PRES, atunci pune textul "Dear president" in variabila
numita greeting. Altfel pune doar textu "Dear" in aceeasi variabila greeting.
Instructiuni JavaScript

Instructiunile sunt structuri care ne ajuta sa lucram mai usor cu elementele limbajului si cu
obiectele acestuia.

Structura conditionala
Foarte des atunci cand scriem cod trebuie sa realizam anumite actiuni in anumite conditii.
Pentru aceasta putem folosi structura conditionala.

In JavaScript exista mai multe astfel de structuri:


- if (daca) - folosita atunci cand vrem sa se execute un cod anume numai atunci cand e
indeplinita o anumita conditie;
- if...else (daca...altfel) - folosita atunci cand avem de executat cod pentru cazul in care
conditia este adevarata si pentru cand ea nu este adevarata;
- if...else if....else - folosita atunci cand avem mai multe cazuri ca subcazuri ale altui caz;
- switch (alege) - folosita atunci cand exista mai multe cazuri si avem blocuri de cod diferite
pentru fiecare in parte.

Structura If Sintaxa if (condition){code to be executed if condition is true}

Observati ca if este scris cu litere mici. Daca folositi litere mari va da o eroare.

Exemplu 1
<script type="text/javascript">//Write a "Good morning" greeting if//the time is less than
10var d=new Date()var time=d.getHours()if (time<10) {document.write("<b>Good
morning</b>")}</script>

Exemplu 2
<script type="text/javascript">//Write "Lunch-time!" if the time is 11var d=new Date()var
time=d.getHours() if (time==11) {document.write("<b>Lunch-time!</b>")}</script>

Observati ca atunci cand comparam doua variabile trebuie sa punem doi de = unul langa
altul!Si mai observati ca nu este nici un else in structura deci ii spunem programului sa
execute codul numai atunci cand conditia este adevarata.

Structura If...else
Daca vrem sa se execute un cod pentru cazul in care o conditie este adevarata si unul pentru
atunci cand este falsa vom folosi structura If...elseSintaxa if (condition){code to be executed
if condition is true}else{code to be executed if condition is not true}

Exemplu: <script type="text/javascript">//If the time 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>

Structura If...else if...else


Sintaxa if (condition1){code to be executed if condition1 is true}else if (condition2){code to
be executed if condition2 is true}else{code to be executed if condition1 andcondition2 are not
true}

Exemplu:
<script type="text/javascript">var d = new Date()var time = d.getHours()if
(time<10){document.write("<b>Good morning</b>")}else if (time>10 &&
time<16){document.write("<b>Good day</b>")}else{document.write("<b>Hello
World!</b>")}</script>

Structura Switch Trebuie folosita atunci cand exista mai mult de doua cazuri in care vrem sa
se execute anumite blocuri de cod.Sintaxa switch(n){case 1: execute code block 1 break case
2: execute code block 2 breakdefault: code to be executed if n is different from case 1 and 2}

Iata cum functioneaza: la inceput avem o singura expresie (in cele mai multe cazuri o
variabila), aceasta este evaluata o singura data. Valoarea expresiei este apoi comparata cu
valorile din fiecare case din structura. Daca este o potrivire, atunci blocul de cod asociat se
executa.

Folosim expresia break pentru a nu mai cauta alta potrivire atunci cand a gasit una.

Exemplu: <script type="text/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") breakcase 6: document.write("Super Saturday") breakcase
0: document.write("Sleepy Sunday") breakdefault: document.write("I'm looking forward to
this weekend!")}</script>

Structura repetitiva while


Aceasta structura este folosita atunci cand vrem sa executam un cod atata timp cat este
indeplinita o comditieSintaxa: while (var<=endvalue){ code to be executed}

Obs: <= poate fi orice operator de comparatie. Exemplu: acest exemplu defineste o structura
repetitiva care incepe de la 0. Codul se va executa atata timp cat variabila i este mai mica sau
egala cu 10. Variabila va fi incrementata la fiecare pas de repetitie. <html><body><script
type="text/javascript">var i=0while (i<=10){document.write("The number is " +
i)document.write("<br />")i=i+1}</script></body></html>

Structura repetitiva do...while


Aceasta structura este asemanatoare cu while. Aceasta va executa intotdeauna codul o data, si
va continua sa il execute atata timp cat expresia este adevarata. Aceasta structura va determina
codul sa se execute cel putin o data, deoarece acesta se executa inainte de a testa
conditia.Sintaxa: do{ code to be executed}while (var<=endvalue)

Exemplu: <html><body><script type="text/javascript">var i=0do {document.write("The


number is " + i)document.write("<br />")i=i+1}while (i<0)</script></body></html>
Structurile breack si continue
Sunt doua instructiuni speciale care pot fi folosite in interiorul unei structuri
repetitive.BreakComanda breack va determina oprirea executarii codului din
structura.Exemplu: <html><body><script type="text/javascript">var i=0for
(i=0;i<=10;i++){if (i==3){break}document.write("The number is " + i)document.write("<br
/>")}</script></body></html>

Continue
Comanda va opri executarea buclei si va continua cu codul de dupa aceasta.Exemplu:
<html><body><script type="text/javascript">var i=0for (i=0;i<=10;i++){if
(i==3){continue}document.write("The number is " + i)document.write("<br
/>")}</script></body></html>

Structura For …In


Aceasta structura este folosita pentru a ne plimba printre elementele unui tablou. Codul din
corpul structurii este executat pentru fiecare element al tabloului.

Sintaxa este: for (variable in object){ code to be executed}

Argumentul poate fi un tablou, o variabila anume sau o proprietate a unui obiect.

Folosirea structurii in interiorul unui tablou: <html><body><script type="text/javascript">var


xvar mycars = new Array()mycars[0] = "Saab"mycars[1] = "Volvo"mycars[2] = "BMW" for
(x in mycars){document.write(mycars[x] + "<br />")}</script></body></html>

Primul script JavaScript

Cand am inceput sa studiez JavaScript primul meu script arata cam asa:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

Daca nu v-ati prins pana acum cam ce ar fi de facut va voi explica eu imediat.
Deschideti un document HTML cu structura obisnuita:
<html>
<head>
<title>Primul meu script JS</title>
</head>
<body>
<p>Yupii, am reusit!</p>

</body>
</html>

Acum nu mai aveti altceva de facut decat sa copiati acel prim script JS in cadrul elemetului
<body></body> si gata primul tau script JavaScript.
Si daca sunteti si mai curiosi puteti testa toate exemplele de pana acum pentru a vedea cum
functioneaza (daca nu ati facut asta deja pana acum).

S-ar putea să vă placă și