profiasi


backbone
jQuery
svg cu 2 cercuriofficeCSS
js
php
Net
prof
wp
div
JS1 NewBoston

JavaScript The New Boston

JavaScript The New Boston

Video1

Inserarea unui script in interiorul codului HTML se realizeaza prin inserarea unui
tag <script>

Vom afisa textul “salutare”

<script type=”text/javascript”>

document.write(“salutare”);

</script>

Video 2 Comentarii si instructiuni

Pentru a putea insera in script informatii care nu trebuie afisate vom putea folosi
comentarii. Exista 2 tipuri:

– pentru linii individuale // inaintea unei linii

– pentru bloc de text /* inaintea blocului si dupa bloc se insereaza */

<script type=”text/javascript”>

//Aceasta este o linie de cod comentata

</script>
<script type=”text/javascript”>

/*

Aceasta este un

bloc de cod comentat

*/

</script>

Instructiunile sunt de forma

<script type=”text/javascript”>

document.write(“Bine ai venit”);

</script>

Se observa ca la sfarsit se adauga punct si virgula ;

Video 3 Variabile

Variabilele sunt asemanatoare cu cele de la algebra. Doar ca daca avem o variabila

aceasta poate lua orice valoare.

La algebra variabila, desi necunoscuta, era fixa si in urma calculelor reiesea

valoarea; in cazul programarii variabila este chiar ceea ce spune numele adica
variaza din punct de vedere a valorii.

<script type=”text/javascript”>

var x=23;

document.write(x);

</script>

x primeste valoarea 23. Acest lucru se numeste atribuire.

In exemplul anterior am folosit ghilimele instructiunea document.write pentru un

text

document.write(“Bine ai venit”);

In cazul variabilelor acestea sunt folosite simplu doar prin nume.

document.write(x) va avea ca efect afisarea numarului 23 care a fost atribuit mai
intai variabilei x.

Video 4 Tipuri de date

Pana acum am vorbit de doua tipuri de date: numeric si text. Nu vom intalni altele
prea des.

Valorile numerice pot fi afisate direct:

document.write(23);

in timp ce valorile de tip text necesita ghilimele

document.write(“douazeci si trei”);

Insa daca dorim sa afisam un text de forma “Sorina a spus “Am douazeci si trei de
carioci” ”

document.write(“Sorina a spus “Am douazeci si trei de carioci” “);

Faptul ca apar ghilimelele de mai multe ori in acelasi text e prea mult pentru
JavaScript, nu va putea intelege unde incepe si unde se termina textul . Deci vom
inlocui ghilimelele din interior cu asa-zise caractere escape “.

document.write(“Sorina a spus “Am douazeci si trei de carioci” “);

In acest mod Javascript va crede ca semnul ” e altceva nu ghilimele normale.

Video 5 Folosirea variabilelor cu siruri

Pe parcursul realizarii scripturilor ne intalnim adesea combinand valori numerice

cu valori de tip text. Asa ca ne va interesa cum inseram in aceeasi linie prin
concatenare si text si valori numerice

<script type=”text/javascript”>

var name=”Bucky”;

var age = 24;

document.write(name + “is my name”);

</script>

Se va afisa Bucky is my name care este concatenarea dintre variabila name si textul
“is my name”.

Putem concatena si variabila age:

<script type=”text/javascript”>

var name=”Bucky”;

var age = 24;

document.write(name + ” is my name and my age is ” + age);

</script>

Se va afisa Bucky is my name and my age is 24.

Trebuie sa avem grija sa inseram spatiile necesare intre elementele concatenate

pentru a nu aparea ca un singur cuvant.

De ex:

<script type=”text/javascript”>

var name1=”Bucky”;

var name2 = “Daniel”;

var name3 = “Dori”;

document.write(“Prietenii mei sunt”+name1+name2+name3);

</script>

Va fi afisat Prietenii mei suntBuckyDanielDori.

Ca sa evitam acest lucru inseram spatiile corespunzatoare dintre cuvinte:

<script type=”text/javascript”>

var name1=”Bucky”;

var name2 = “Daniel”;

var name3 = “Dori”;

document.write(“Prietenii mei sunt “+name1+” “+name2+” “+name3);

</script>

si se va afisa Prietenii mei sunt Bucky Daniel Dori

video 6 functii

Functiile sunt elementul principal in programare. Adica prin intermediul

functiilor putem denumi blocuri de cod si le putem refolosi ori de cate ori avem
nevoie in script-urile noastre doar prin apelul numelui de functie.

<script type=”text/javascript”>

function funky()

alert(“Ouch!!!”);

funky();

</script>

Functiile in JavaScript se pot folosi si in cazul unor evenimente cum ar fi click-

ul de mouse

<body>

<script type=”text/javascript”>

function funky()

alert(“Ouch!!!”);

</script>

<form>

<input type=”button” value =”click for message” onclick=”funky()”;

</form>

</body>

In acest caz evenimentul onclick al butonului este legat de functia funky() si in

momentul cand evenimentul onclick se produce este apelata si functia. – va aparea
mesajul “Ouch!!!” cand se da click pe buton

Video 7 Parametri pentru functii

Utilizarea parametrilor pentru functii este similara cu predarea unei cantitati de

materie prima unui meserias, de exemplu 5 kg de lut unui olar, iar acesta
returneaza 10 boluri de lut.

<script type=”text/javascript”>

function meatball(x)

alert(“I love” +x);

meatball(“bacon”);

meatball(“natalie portman”);

meatball(“good will hunting”);

</script>

Se va afisa cate o fereastra cu mesaj:

I love bacon

I love natalie portman

I love good will hunting

prin urmare functia primeste o valoare si o foloseste in interiorul ei, in acest

caz concateneaza textul “I love” si ceea ce primeste prin intermediul parametrului
x: “bacon”,” natalie portman” si “good will hunting”
Video 8 functii cu mai multi parametri

La fel cum unei functii i se poate transmite o singura valoare ca in exemplul

anterior, o functie poate primi mai multe valori prin intermediul unor parametri.

In exemplul urmator functia compara primeste 2 parametri si valorile lor sunt

inserate intr-un text de forma Valoare1 + “sunt mai bune decat” + Valoare2

<script type=”text/javascript”>

function compara(one, two)

document.write(one + ” sunt mai bune decat ” + two + “<br>”);

compara(“portocalele”,”merele”);

compara(“laptopurile”,”tabletele”);

compara(“nucile”,”strugurii”);

</script>

Se va afisa:

portocalele sunt mai bune decat merele

laptopurile sunt mai bune decat tabletele

nucile sunt mai bune decat strugurii

Daca ar fi alte preferinte s-a putea schimba preferinta prin schimbarea ordinii
valorilor in momentul apelarii functiei:

compara(“merele”,”portocalele”);

compara(“tabletele”,”laptopurile”);

compara(“strugurii”,”nucile”);
Se va afisa :

merele sunt mai bune decat portocalele

Astfel prin inversarea valorilor pentru parametrii one si two se inverseaza si

pozitia valorilor in textul afisat

Video 9 instructiunea return

Instructiunea return este folosita pentru a scoate (returna) valori din functie
astfel incat sa poata fi folosite mai departe pe parcursul rularii scriptului.
Astfel apelarea unei functii devina similara cu folosirea unei variabile.

In exemplul urmator folosirea functiei toeasy() este asemanatoare cu folosirea unei

variabile cu valoarea “gametime”;

Ex:

<script type=”text/javascript”>

function toeasy()

return “gametime”;

document.write( toeasy() );

</script>

Va afisa: gametime

Sa realizam o functie car aduna doua numere primite ca parametri.

<script type=”text/javascript”>

function addNumbers(a,b){

var c=a+b;

return c;

}
document.write(addNumbers(3,6) );

</script>

Doar apelul simplu al functiei addNumbers(3,6) nu ar fi facut nimic chiar daca

returna valoarea adunarii 9, de aceea ca si in exemplul de dinainte am folosit
functia document.write pentru afisarea valori returnate de functie.

Video 10 folosirea unei functii din interiorul altei functii

Odata ce cream o functie aceasta va fi tratata ca o simpla instructiune deci va

putea fi folositea ori de cate ori in viitoarele noastre functii la fel ca o
functie obisnuita din JavaScript.

<script type=”text/javascript”>

function doFirst()

document.write(“I’m first<br>”);

function doSecond()

document.write(“2222222!!!!”);

function start(){

doFirst();

doSecond();

start();
</script>

In functia start() au fost folosite cele doua functii create anterior, doFirst() si
doSecond(). Apelul lor nu difera cu nimic de apelul altor functii native
JavaScript.

Uneori exista riscul sa cream functii care sa se apeleze reciproc si care intra
intr-un ciclul infinit de apelari. Trebuie evitat acest lucru altfel browser-ul ne
va intreba daca dorim sa oprim rularea script-ului daca nu cumva o va opri el
singur.

De ex:

<script type=”text/javascript”>

function doFirst()

document.writeln(“I’m first”);

doSecond();

function doSecond()

document.write(“I’m second”);

doFirst();

doFirst();

</script>

In acest exemplu functia doFirst() apeleaza functia doSecond() dar si functia

doSecond() apeleaza functia doFirst() si se vor apela reciproc la infinit. Veti
primi un mesaj de eroare si scriptul se va opri sau chiar va trebui sa opriti
fortat procesul asociat browser-ului .

Totusi, desi e de evitat aceasta situatie, vom spune ca aceasta situatie uneori
este intentionat creata. Ea este numita recursivitate (reciproca) si se foloseste
intr-un mod controlat in anumite tehnici de programare.
Video 11 Variabile globale si locale

O variabila este globala daca este declarata chiar la inceputul scriptului si e

vizibila (poate fi folosita) in toate functiile sau pe parcursul scriptului.

Pe de alta parte daca e declarata in interiorul unei functii sau chiar a unui bloc
de instructiuni ea nu mai poate fi folosita in exteriorul blocului.

E ca o sursa de lumina care poate lumina diverse cutii imprastiate intr-o camera
dar o data ce este pusa intr-o cutie nu mai poate lumina nici o cutie din jurul ei.

<script type=”text/javascript”>

var girl = “Kelsey”;

function spit()

document.write(girl);

spit();

document.write(girl);

</script>

Va afisa: KelseyKelsey

In acest exemplu variabila girl este accesibila si din interiorul functiei spit()
in momentul apelului dar si din exteriorul ei prin intermediul instructiunii
document.write(girl). In acest caz valoarea variabilei girl, “Kelsey”, va fi
afisata de 2 ori.

Situatia se schimba atunci cand variabila girl este declarata doar in interiorul
functiei. In acel moment ea nu mai poate fi folosita in afara functiei de exemplu
de instructiunea document write. De aceea in exemplul urmator valoarea variabilei
girl, “Kelsey”, va fi afisata doar o data, din interiorul functiei spit();

<script type=”text/javascript”>

function spit()
{

var girl = “Kelsey”;

document.write(girl);

spit();

document.write(girl);

</script>

Va afisa: Kelsey datorita apelului functiei spit()

Apelul instructiunii document.write(girl) nu va da eroare dar nici nu va afisa

nimic pentru ca variabila girl nu mai exista in momentul acela.

Si atunci cum e mai bine sa folosim variabilele? Ca variabile locale sau globale?
Ar parea ca e mai bine sa le folosim pe toate ca fiind globale.

Daca am dori sa folosim toate variabilele ca globale atunci s-ar aduna o multime de
variabile la inceputul scriptului si nu doar ca nu am sti ce reprezinta fiecare ci
ar ocupa multa memorie ingreunand executia scriptului. De aceea se apeleaza mai
curand la variabile locale care exista doar pe durata executiei functiei si nu
ocupa memorie inutil. In plus, atunci cand sunt declarate intr-o functie, putem sti
ce face in acea functie si nu ne incurca in restul scriptului. Mai mult, pentru ca
nu sunt vizibile si in alte functii, variabilele locale pot fi folosite cu acelasi
nume in diferite functii, fiind de fapt variabile diferite existente doar pe
parcursul executiei acelor functii.

Video 12 Operatori matematici

<script type=”text/javascript”>

var apples=4+76;

document.write(apples);

</script>

Operatorii adunare, scadere, inmultire, impartire sunt similari celor din

matematica si functioneaza in felul urmator: doua valori adunate 4+76 returneaza o
valoare. Acea valoare poate fi atribuita unei variabile, in acest caz apples. In
acest moment variabila apples poarta rezultatul adunarii si poate fi folosita in
continuare si in alte operatii.
Adunarea nu se limiteaza doar la suma a doua numere, putem aduna oricate valori si
sa stocam rezultatul intr-o variabila: apples = 4 + 76 +1880 + 40;

Pe langa adunare putem avea

scadere:

apples= 76 – 4;

inmultire

apples = 76 * 4;

impartire:

apples = 76 / 4;

Un operator important cu multe aplicatii in algoritmica este operatorul modulo. Cu

ajutorul lui putem afla restul impartirii a doua numere. Impartirea lui 56 la 3,
56/3 da rezultatul 18,(6) dar modulo care este reprezentat de simbolul procent %,
56 % 3 returneaza valoarea 2.

var apples = 56 % 3;

document.write(apples);

Se va afisa 2 care este restul impartirii. Nu va afisa catul impartirii care este
18 sau 18,66.. doar restul si acest lucru este important pentru ca in acest mod
putem afla anumite proprietati ale numerelor. De exemplu care este ultima cifra a
unui numar Number= 256? Aflam restul impartirii la 10.

document.write(number % 10);

Un alt operator pe care il vom folosi des este cel de incrementare ++.

In mod normal putem adauga valoarea 1 la o variabila folosind metoda obisnuita

variabila_inc = variabila_inc + 1;

In acest fel variabila_inc va avea valoarea cu o unitate mai mare.

<script type=”text/javascript”>

var variabila_inc=7;
variabila_inc = variabila_inc + 1;

document.write(variabila_inc);

</script>

Va afisa: 8

Dar putem folosi operatorul ++ pentru a face aceeasi operatie

<script type=”text/javascript”>

var variabila_inc=7;

variabila_inc++;

document.write(variabila_inc);

</script>

Va afisa: 8 ca si in cazul anterior

In acelasi mod functioneaza si operatorul de decrementare: variabila– se va

decrementa cu o unitate.

Video 13 Operatorul de atribuire

Am vazut deja in ce consta atribuirea. Dar exista anumite scurtaturi

corespunzatoare operatorilor matematici care combina operatorul si atribuirea
rezultand un operator de atribuire care face si operatia corespunzatoare. Astfel

variabila_add +=5; este echivalent cu

variabila_add = variabila_add + 5;

Ex:

<script type=”text/javascript”>

var bucky = 24;

bucky += 54;

document.write(bucky);

</script>

Va afisa: 78 care este rezultatul adunarii variabilei bucky cu 54.

La fel functioneaza atribuirea cu scadere, inmultire, impartire. Nu e cazul pentru
modulo.

<script type=”text/javascript”>

var bucky = 24;

bucky += 67;

bucky -= 32;

bucky *=4;

bucky /= 5;

document.write(bucky);

</script>

Va afisa cat? Ghiciti singuri?

Video 14 Instructiunea If si operatorii logici

Instructiunea if testeaza daca valoarea de adevar a expresiei comparatie este

adevarata si daca este atunci se executa blocul de cod dintre acolade:

if(comparatie){

cod de executat

Astfel:

<script type=”text/javascript”>

var apples = 53;

var hotdogs = 53;

if(apples==hotdogs){

document.write(“It worked”);

</script>

Mai intai trebuie sa observam ca operatorul de comparare a egalitatii nu este un

simplu egal “=” ci sunt doua egaluri “==” pentru ca deja exista operatorul de
atribuire “=” si daca am folosi doar “=” nu am face decat sa atribuim valoarea
variabilei hotdogs catre variabila apples.

In cazul in care cele doua variabile contin aceleasi valori se va executa codul
dintre acolade, in acest caz s-ar afisa “It worked”. Adica expresia (apples==
hotdogs) este adevarata si atunci instructiunea if decide ca sa execute codul
dintre acolade.

In mod similar se poate folosi negarea adica in loc de “==” vom folosi “!=” care
inseamna “nu este egal”.

Daca vom compara apples cu hotdogs folosind operatorul “not egal”, ” != ” atunci
expresia (apples != hotdogs) este falsa deoarece ambele variabile au aceeasi
valoare.

In urmatorul exemplu variabilele apples si hotdogs au valori diferite deci expresia

(apples != hotdogs) va fi tot adevarata

<script type=”text/javascript”>

var apples = 53;

var hotdogs = 99;

if(apples==hotdogs){

document.write(“It worked”);

</script>

Se va afisa: “It worked”

Putem folosi operatoru “mai mare”, “>” sau “mai mic”, “<”

<script type=”text/javascript”>

var apples = 53;

var hotdogs = 99;

if(apples<hotdogs){

document.write(“It worked”);

</script>

Se va afisa: “It worked” pentru ca variabila apples are o valoare mai mica decat
hotdogs si atunci expresia (apples < hotdogs) e adevarata. Daca am fi folosit
expresia (apples > hotdogs) nu s-ar fi afisat nimic pentru ca ar fi fost falsa.

In mod similar pot fi folosit operatorii <= (mai mic sau egal) sau >= (mai mare sau
egal)

Intr-o mica recapitulare avem urmatorii operatori logici

== pentru testarea egalitatii

!= petru testarea inegalitatii

< testeaza daca e mai mic

<= mai mic sau egal

> testeaza daca e mai mare

>= mai mare sau egal

Cand cele doua valori comparate corespund operatorului atunci rezultatul expresiei
este adevarat iar instructiunea if decide sa execute codul dintre acolade.

Video 15

Presupunem ca avem instructiunea if de forma

if(expresie)

{ bloc de instructiuni}

In cazul in care (expresie) are valoarea true atunci se executa blocul de

instructiuni care urmeaza intre acolade. Dar ce se intampla daca (expresie) este
false? In acest caz nu se mai executa blocul de instructiuni si efectul
instructiunii if e ca nu se executa nimic ca si cand nu ar fi in program. Dar
uneori dorim sa executam un bloc de instructiuni chiar si daca (expresie) este
false. In acel caz adaugam alternativa else / altfel.

if(expresie)

bloc de instructiuni 1

else

bloc de instructiuni 2

In acest mod daca (expresie) este adevarata se executa bloc de instructiuni 1 iar
daca e falsa se executa bloc de instructiuni 2. In orice situatie se va executa un
bloc de instructiuni.

if(2==2)

document.write(“I love hotpockets”);

else

document.write(“I love strawberries”);

Se va afisa: I love hotpockets pentru ca 2==2 e adevarata si se executa blocul care

urmeaza dupa conditia (2==2)
if(2==65)

document.write(“I love hotpockets”);

else

document.write(“I love strawberries”);

Se va afisa: I love strawberries pentru ca 2==65 e falsa si se merge pe ramura else

Sa folosim variabile:

var blue = 43;

var red = 76;

if(blue == red)

document.write(“I love hotpockets”);

else

document.write(“I love strawberries”);

Se va afisa: I love strawberries pentru ca (blue==red) e falsa dar daca vom avea
valorile

var blue = 43;

var red = 43;

se va afisa I love hotpockets pentru ca am avea (blue==red) true

Se aplica pentru orice fel de conditie (blue != 43) , (blue>43), (blue > red) etc

Video 16 Nesting (instructiuni if in alte instructiuni if)

var firstName=”bucky”;

var lastName = “roberts”;

if(firstName == “bucky”){

if(lastName==”roberts”){

document.write(“welcome bucky roberta!!!!”);

In acest caz daca variabila firstName are valoarea “bucky” atunci se executa
instructiunea if din interior. Daca si la aceasta conditia lastName==”Roberts” este
adevarata atunci se va afisa textul “welcome bucky roberta!!!!”. Prin urmare exista
doua conditii de verificat pentru a se executa blocul de instructiuni. Asta
inseamna nesting (nest inseamna cuibar) adica avem o instructiune if in alta
instructiune if.

In urmatorul exemplu instructiunea if din interior e de tipul if – else

var firstName=”bucky”;

var lastName = “roberts”;

if(firstName == “bucky”){

if(lastName==”roberts”){

document.write(“welcome bucky roberta!!!!”);

}else{

document.write(“welcome bucky someone!!!!”);

}
Putem avea si situatia cand nu dorim sa executam vreo instructiune in caz ca
expresia logica e adevarata

if(firstName == “bucky”){

if(lastName==”roberts”){

}else{

document.write(“welcome bucky someone!!!!”);

In acest caz daca ambele conditii sunt adevarate nu se executa nimic doar daca
prima e adevarata iar a doua falsa se afiseaza “welcome bucky someone!!!”

Video 17 Conditii complexe

In loc sa punem mai multe instructiuni if unele in altele, doar pentru a realiza o
conditionare mai stricta, putem crea conditii compuse din mai multe expresii logice

var first = “bucky”;

var last = “roberts”;

if( (first==”bucky”) && (last==”roberts”) )

document.write(“hey good job”)

Se va afisa “hey good job” pentru ca ambele conditii (first==”bucky”) si

(last==”roberts”) sunt adevarate

Conditia ( (first==”bucky”) && (last==”roberts”) ) este compusa din 2 expresii

logice legate prin operatorul logic && care inseamna “si logic”. Adica am putea sa
o exprimam in acest mod:
Daca first are valoarea “bucky” si last are valoarea “roberts” atunci executa
urmatorul bloc de instructiuni. In acest mod au fost compuse doua conditii in un
singura. Expresia rezultata nu poate fi adevarata decat daca fiecare expresie din
interior este adevarata.

Putem avea si o conditie care verifica doar daca una din conditii e adevarata.
Acest lucru se realizeaza cu operatorul logic “sau ||”. Daca macar una din
expresiile componente este adevarata atunci intreaga expresie devine adevarata.

var first = “bucky”;

var last = “hanks”;

if( (first==”tommy”) || (last==”hanks”) )

document.write(“bacon”);

Se va afisa: bacon

In acest caz conditia ( (first==”tommy”) || (last==”hanks”) ) este adevarata

pentru ca ambele expresii din interior sunt adevarate.

In urmatorul exemplu variabila first ia valoarea “bucky” si prima expresie, (first

== tommy) nu mai este adevarata. Totusi conditia compusa ( (first==”tommy”) ||
(last==”hanks”) ) este adevarata pentru ca a doua expresie, (last==”hanks”), este
adevarata

var first = “bucky”;

var last = “hanks”;

if( (first==”tommy”) || (last==”hanks”) )

document.write(“bacon”);

}
Se va afisa: bacon

Video 18 Switch

Instructiunea switch e asemanatoare instructiunii if doar ca se aplica situatiilor

cand avem de ales din mai multe optiuni la un moment dat.

De exemplu, in functie de numele pe care il are, o persoana poate prefera gradinile

cu flori sau plimbarile.

var girl = “natalie”;

switch(girl){

case “natalie”:

document.write(“you must like garden state”);

break;

case “ashley”:

document.write(“oo fan of twilight ey?”);

break;

default:

document.write(“this is the default”);

Va afisa: you must like garden state, pentru ca variabila girl are valoarea natalie
si coincide cu valoarea de verificat pentru prima optiune.

In cazul in care variabila girl are valoarea emily atunci nici o optiune nu se
verifica si se ajunge la optiunea default caz in care se va afisa “this is the
default”.

Se observa ca la sfarsitul fiecarei optiuni exista instructiunea break. Aceasta

intrerupe executia lui switch odata ce o optiune s-a terminat de executat. Altfel
s-ar trece si la celelalte optiuni si le-ar executa

Video 19 instructinea for

Daca doriti sa scrieti ceva de mai multe ori atunci am putea folosi instructiunea
document.write(“ceva de scris”); de ori de cate ori dorim. De exemplu afisam “ceva
de scris” de 5 ori:

<script>

document.write(“ceva de scris <br>”);

document.write(“ceva de scris <br>”);

document.write(“ceva de scris <br>”);

document.write(“ceva de scris <br>”);

document.write(“ceva de scris <br>”);

</script>

Este corect dar am putea face lucrul asta folosind doar o singura data
instructiunea document.write insa apeland la o instructiune repetitiva care sa
specifica ca instructiunea document.write() va aparea de 10 ori.

pentru i de la 0 la 10

afiseaza “ceva de scris”

Astfel pentru fiecare i de la 0 pana la 10 se va afisa textul “ceva de scris”

In JavaScript acest lucru se traduce:

<script>

for(x=0;x<10;x++)

document.write(“ceva de afisat <br>”)

</script>

Va afisa de 10 ori text “ceva de afisat”

ceva de afisat
ceva de afisat

ceva de afisat

ceva de afisat

ceva de afisat

Putem specifica chiar sa afiseze de 1000 de ori sau de un numar oarecare de ori
daca pentru conditia de oprire se specifica acel numar x<numar.

var numar=10000;

for(x=0;x<numar;x++)

document.write(“ceva de afisat <br>”);

x=0; este initializarea variabilei contor x

x<numar; este conditia de oprire

x++ este incrementarea, fara aceasta x nu ar creste de la valoarea initiala pana la

cea finala iar instructiunea for nu s-ar mai opri.

Video 20 instructiunea de ciclare while

Are forma

while(conditie de oprire)

bloc de instructiuni

Atat timp cat conditie de ciclare este adevarata se executa bloc de instructiuni

In cazul instructiunii for se stia de unde se porneste x=0, se stia unde se ajunge
x<numar, si in plus se stiau pasii cu care crestea x pana la valoarea finala cand
ciclarea se oprea. In cazul lui while nu avem de verificat decat conditia de
oprire.
Aceasta poate fi de orice fel

Atat timp cat e frumos afara

iesim cu bicicleta

sau

Aalegem bile dintr-o cutie care contine bile albe si negre. Ne oprim cand gasim o
bila neagra.

Atat timp cat bila este alba

extrage bila

Daca am incerca sa convertim instructiunea for anterioara am avea ceva de felul:

x=0;

while(x<10)

document.write(i+” ceva de afisat <br />”);

x++;

Se va afisa

0 ceva de afisat

1 ceva de afisat

2 ceva de afisat

….

9 ceva de afisat

adica pornim de la 0, verificam daca x ajunge la 10 caz in care se intrerupe

ciclarea. Totusi x nu ar creste pana la 10 daca nu l-am incrementa. Si va trebui sa
facem acest lucru in interiorul blocului de executat pentru ca trebuie sa creasca
cu o unitate de fiecare data cand e verificata conditia de oprire.

Video 21 instructiunea de ciclare do while

Are forma

do

bloc de instructiuni

while(conditie de ciclare)

E asemanatoare instructiunii while diferenta fiind pozitionarea la sfarsit a

conditiei de ciclare. Asta face ca blocul de instructiuni sa se execute macar o
data inainte ca sa se verifice conditia pentru prima oara.

Ex:

do

document.write(“afiseaza ceva”);

while(1==0);

In acest caz se va afisa: afiseaza ceva chiar daca valoarea conditiei (1==0) este
falsa.

Video 22

Evenimente pentru obiecte

Aproape toate obiectele accepta evenimente. Butoanele in mod special sunt folosite
pentru preluarea evenimentelor prin intermediul handler-ului onclick. Adica onclick
este proprietatea prin care putem asocia o actiune momentului in care a fost apasat
butonul de mouse.

Actiunea asociata lui onClick este un cod Javascript.

<input type=”button” value=”apasa ” onClick=”alert(‘ Hello’);” />

In momentul in care se da clic pe butonu “apasa” apare o caseta cu textul ‘Hello’.

Se mai poate adauga o actiune:

<input type=”button” value=”apasa ” onClick=”alert(‘ Hello’); alert(‘Salut inca o

data!’);” />

Vor aparea doua casete text. De obicei, atunci cand avem mai multe actiuni de
realizat la apasarea unui buton, in loc de a le insera la evenimentul onClick=””
vom crea o functie care sa le contina si vom apela acea functie in momentul
apasarii butonului.

<script>

function actiune()

alert(‘ Hello’);

alert(‘Salut inca o data!’);

</script>

<input type=”button” value=”apasa ” onClick=”actiune();” />

Se pot folosi si alte evenimente, de exemplu daca dorim sa se produca o actiune in

momentul in care mouse-ul ajunge deasuprea unui link.

<a href=”http://thenewboston.com” onmouseover=”actiune();”>hover over me </a>

In mod similar putem atasa o actiune si asupra evenimentului onMouseOut care va fi

lansata in momentul in care mouse-ul va parasi link-ul.

Putem atasa actiuni si asupra evenimentelor specifice unei pagini. Evenimentul

onload poate genera o actiune in momentul in care o pagina s-a terminat de
incarcat.
<body onload=”alert(‘pagina s-a terminat de incarcat’);”

</body>

Si in momentul in care iesim de pe o pagina putem lansa o actiune prin intermediul

evenimentului onUnload.

<body onUnload=”alert(‘La revedere’);”

</body>

In momentul in care a fost parasita pagina va fi afisat textul “La revedere”

video 23 Obiecte

Un obiect este un element care contine proprietati asemanatoare variabilelor si

metode care sunt functii. De exemplu, in cazul unui masini am putea sa consideram
obiectul masina. Ca sa aflam greutatea ei putem folosi proprietatea .greutate:
masina.greutate iar pentru a afla rulajul masina.kilometraj. Pentru a o deplasa de
la punctul x la punctul y vom folosi functia deplaseaza: masina.deplaseaza(x,y).

Toate elementele vizibile intr-o pagina web sunt obiecte. In general un obiect este
continut de un alt obiect. De exemplu toate imaginile dintr-o pagina web pot fi
accesate prin intermediul obiectului document: document.images care returneaza
toate imaginile sub forma unui vector. Se observa ca pentru a avea acces la
obiectele imagine trebuie sa folosim operatorul punct(.).

Acest lucru este valabil pentru orice element fie ca este tag fie ca este declarat
de utilizator cum e un numar sau un text.

Deja am folosit functia document.write care este o metoda a obiectului document.

Vom crea o variabila text si vom afisa lungimea acesteia folosind

proprietatea .length

<script type=”text/javascript”>

text=”acesta este un text de o lungime oarecare”;

document.write(text.length);
</script>

video 25 Crearea propriilor noastre obiecte

Asa cum in pagina web pot exista obiecte specifice limbajului HTML tot asa putem
crea propriile noastre obiecte. De exemplu dorim sa cream obiecte asociate unor
persoane. Pentru aceasta vom crea modelul de completare cu datele unei persoane
prin intermediul unei functii. Daca dorim ca acea persoana sa primeasca un nume si
o varsta vom crea o functie cu 2 parametri nume, varsta.

function persoana(nume, varsta)

this.nume = nume;

this.varsta = varsta;

Dorim sa cream o persoana numita Alex cu varsta 25 ani

var alex=new persoana(“Alex”,25);

Se observa operatorul new care intr-o prima faza genereaza un obiect necompletat
iar mai apoi functia persoana adauga proprietatile nume si varsta.

Asa ar arata pagina:

<html>

<head>

<title></title>

<script>

function persoana(nume, varsta)

this.nume = nume;

this.varsta = varsta;
}

</script>

</head>

<body>

<script type=”text/javascript”>

var Bucky=new persoana(“Bucky”,25);

document.write(Bucky.varsta);

</script>

</body>

</html>

Daca am fi avut o functie denumita nimic() am fi putut crea un obiect care nu

contine nimic

function nimic()

{}

var ceva = new nimic();

Apoi obiectul ceva poate primi proprietati:

ceva.valoare=20;

Acum obiectul “ceva” contine proprietatea valoare avand valoarea numerica 20.

document.write(ceva.valoare);
Asa ar arata pagina:

<html>

<head>

<title></title>

<script>

function nimic()

{}

</script>

</head>

<body>

<script type=”text/javascript”>

var ceva=new nimic();

ceva.valoare=20;

document.write(ceva.valoare);

</script>

</body>

</html>

Atat functia persoana() cat si functia nimic() se numesc functii constructor pentru
ca prin ele sunt construite obiectele. Diferenta intre persoana() si nimic() este
ca prin intermediul functiei persoana() se dau si proprietati obiectului in timp ce
functia nimic() nu ofera nici o proprietate, acestea putand fi adaugate mai tarziu.

Video 26 Initializarea obiectelor

Cel mai adesea cand avem de creat doar un obiect sau doua vom folosi initializarea
obiectelor chiar la crearea lor. E mai simpla decat crearea obiectelor folosind
functiile constructor. Dar in acelasi timp daca avem de facut 500 de obiecte vom
folosi metoda cu functia constructor putand folosi o instructiune de ciclare
Initializarea unui obiect este de forma

nume_obiect = { lista de proprietati despartite prin virgula};

Ex:

tom = {name:”Tom”,age:”25″};

Seamana oarecum cu declararea unei reguli CSS mai putin semnul “=” si virgula
dintre proprietati.

<html>

<head>

<title></title>

<script>

tom = {name:”Tom”,type:”cat”,age:4};

jerry= {name:”Jerry”,type:”mouse”,age:1};

</script>

</head>

<body>

<script type=”text/javascript”>

document.write(tom.name+”, the “+tom.type+”, loves “+jerry.name+ ” because it is

a”+jerry.type);

</script>

</body>

</html>
Video 27 Adaugarea metodelor pentru obiecte

Mai intai vom avea o functie constructor

function persoana(nume, varsta)

this.nume=nume;

this.varsta=varsta;

var victor= new persoana(“Victor”,23);

Deocamdata am creat un obiect corespunzator unei persoane numita Victor

Daca pana acum am lucrat doar cu proprietati ale obiectelor, de acum ne vom ocupa
si de partea de functionalitate a lor.

De exemplu daca obiectul victor are proprietatile nume “Victor si varsta 23 ce ar

fi sa adaugam in obiectul victor si o functie care sa calculeze cat mai are pana la
pensie.

function aniRamasi()

var nrAniPensie=65 – this.age;

return nrAniPensie;

Dar cum facem legatura intre obiectul victor si functia aniRamasi() pentru ca
momentan el nu stie ce fel de functie este aniRamasi(). Din punctul lui de vedere
este o functie oarecare care nu are legatura cu el.

De aceea vom modifica functia constructor persoana() astfel:

function persoana(nume, varsta)

this.nume=nume;

this.varsta=varsta;
this.aniRamasiPensie = aniRamasi;

Se observa ca in atribuirea this.aniRamasiPensie = aniRamasi; au aparut doua

elemente noi:

aniRamasiPensie care este noua metoda a unui obiect persoana si e folosita pentru
calculul anilor pana la pensie
aniRamasi care este chiar functia creata de noi dar se observa ca nici pentru
aceasta nici pentru numele metodei nu folosim in aceasta faza parantezele rotunde.
Adica javascript nu accepta asa ceva:
this.aniRamasiPensie() = aniRamasi;

si nici

this.aniRamasiPensie= aniRamasi();

Corect este: this.aniRamasiPensie= aniRamasi; unde aniRamasi este functia creata de

noi.

Intr-un script vom putea folosi noua metoda astfel:

<html><head>

<script type=”text/javascript”>

function aniRamasi()

var nrAniPensie=65 – this.varsta;

return nrAniPensie;

function persoana(nume, varsta)

this.nume=nume;

this.varsta=varsta;

this.aniRamasiPensie = aniRamasi;
}

victor = new persoana(“Victor”,23);

bucky = new persoana(“Bucky”,32);

</script>

</head>

<body>

<script type=”text/javascript”>

document.writeln(victor.varsta);

document.writeln(victor.aniRamasiPensie());

document.writeln(bucky.aniRamasiPensie());

</script>

Se va afisa

23 42 33

ce reprezinta varsta lui Victor, cat mai are pana la pensie, si cat mai aire Bucky
pana la pensie.

Video 28 Vectori (matrici unidimensionale sau tablou unidimensional)

De obicei obiectele se grupeaza in siruri si au un numar de identificare.

Daca am dori sa tinem evidenta a 1000 de persoane ar trebui sa cream 1000 de linii
de cod de forma:

var persoana1 = “Adrian”;

var persoana2= “Victor”;

si tot asa pana la 1000

insa iar foarte mult timp si ocupa mult cod. De aceea lucrurile se rezolva folosind
vectori.

var persoane = new Array(“Adrian”,”Victor”,”Alexandru”,”Bogdan”,”Cezar”);

De fiecare data cand dorim sa accesam o persoana vom folosi numarul pozitiei pe
care se afla fiecare persoana: Adrian e pe pozitia 0, Victor pe 1 si tot asa.

document.writeln(persoane[0]);

document.writeln(persoane[1]);

document.writeln(persoane[4]);

Se va afisa:

Adrian Victor Cezar

Daca am incerca sa accesam o variabila care nu se afla in acest sir de 5 javascript

va specifica ca acea variabila este nedefinita.

document.writeln(persoane[5]);

va afisa:

undefined

Asa ar arata intr-un script

<html><head>

<script type=”text/javascript”>

var persoane = new Array(“Adrian”,”Victor”,”Alexandru”,”Bogdan”,”Cezar”);

</script>

</head>

<body>
<script type=”text/javascript”>

document.writeln(persoane[0]);

document.writeln(persoane[1]);

document.writeln(persoane[4]);

document.writeln(persoane[5]);

</script>

Afiseaza:

Adrian Victor Cezar undefined

Video 29: Alte moduri de a crea vectori

In exemplul anterior am vazut ca am creat un vector enumerand elementele din care

este constituit.

Acum vom crea un vector doar specificand dimensiunea acestuia urmand ca apoi sa
introducem si informatiile

<script>

var things = new Array(3);

things[0]=”tricou”;

things[1]=”camasa”;

things[2]=”geaca”;

document.write(things[2]);//va afisa geaca

</script>

O a treia metoda este de a crea un vector vid si mai apoi adaugam elementele din
mers.
<script>

var stuff = new Array();

stuff[0]=”bacon”;

stuff[1]=”al doilea elem”;

document.write(stuff[1]);//se va afisa “al doilea elem”

</script>

Video 30 proprietati si metode pentru vectori

<script>

var masini = new Array(“renault”,”volkswagen”,”peugeot”);

var motociclete = new Array(“suzuki”,”bmw”,”honda”);

var vehicule = masini.concat(motociclete);

document.write(vehicule[5]); //va afisa “honda”

</script>

Cu ajutorul proprietatii .concat am adaugat continutul vectorului motociclete in

continuarea vectorului masini si rezultatul a fost atribuit unei alte variabile
vector, vehicule.

Acum variabilea vehicule contine 6 elemente ce insumeaza continutul celor doi

vectori creati anterior.

Se observa ca si vectorii au comportament de obiecte adica la randul lor au

proprietati si metode.
Video 31: metodele join si pop

Sa construim un vector care contine denumirile mai multor fructe:

Mai intai vom transforma vectorul intr-un sir de caractere (un text)

<script>

var fructe = new Array(“mere”,”cirese”,”gutui”,”prune”);

var sir1= fructe.join();

document.write(sir1);

</script>

Va afisa:

mere,cirese,gutui,prune

Daca am dori ca numele fructelor sa fie despartite prin alte simboluri, de exemplu
minus(cratima):

var sir1 = fructe.join(“-“);

Cand vom afisa vom avea:

document.write(sir);

Va afisa:

mere-cirese-gutui-prune

O alta metoda aplicabila la vectori este pop().

Cu ajutorul ei putem scoate ultimul element din vector, vectorul scurtandu-se

astfel cu o unitate.

<script>

var fructe = new Array(“mere”,”cirese”,”gutui”,”prune”);

document.write(fructe[3]+”<br>”);

fructe.pop();

document.write(fructe[3]);

</script>

Se va afisa:

prune
undefined

Mai intai este afisat ultimul element din vector fructe[3] care are valoarea
“prune” iar mai apoi acesta este eliminat din vector pe pozitia 3 ne mai ramanand
nimic.

Video 32:vectori – metodele reverse, push, sort

<script>

var fructe = new Array(“mere”,”cirese”,”gutui”,”banane”);

fructe.reverse(); //inverseaza vectorul

fructe.push(“portocale”,”prune”); //adauga 2 elemente in vector

fructe.sort();

var sir1 = fructe.join();

document.write(sir1);

</script>

Va afisa:

banane,cirese,gutui,mere,portocale,prune
deoarece:

mai intai am creat vectorul (“mere”,”cirese”,”gutui”,”banane”)

Apoi am adaugat 2 elemente fructe.push(“portocale”,”prune”)

deci vectorul fructe a devenit

(“mere”,”cirese”,”gutui”,”banane”,”portocale”,”prune”)

Iar dupa ce l-am sortat, adica fructe.sort() a devenit

(“banane”,”cirese”,”gutui”,”mere”,”portocale”,”prune”)

In cele din urma am aplicat un .join() ca sa le trimitem intr-un sir , sir1, pe

care l-am afisat.

Video 33: Adaugarea elementelor folosind o bucla for sau while

O metoda de a adauga elemente intr-un vector:

<script>

var elem = new Array();

var maxDim = 5;

for(i=0;i<maxDim;i++)

elem[elem.length]=prompt(“introdu o valoare”,”3″);

</script>
Astfel am creat un vector de dimensiune maxDim (5 elemente)

elem.length este lungimea vectorului si este chiar pozitia de dupa ultimul element
din vector si in felul acesta spunem catre javascript sa insereze un element chiar
dupa ultimul element din vector.

Video 34: Afisarea unui vector

Intr-un mod similar crearii vectorului vom realiza si afisarea acestuia

<script>

for(i=0;i<elem.length;i++)

document.write(elem[i]+” “);

</script>

Daca acceptam valoarea sugerata de prompt atunci va afisa

3 3 3 3 3

adica i va pleca de la 0 si va lua valori pana la dimensiunea vectorului

(elem.length-1), adica pana la 4 iar cu ajutorul lui document.write se va afisa
fiecare element din vector de pe pozitia i.

Video 35: Vectori asociativi

Pana acum am folosit numere pentru indexul vectorului, direct (elem[4]) ori prin
intermediul unei variabile indice i (elem[i]). Vom vedea insa cum se pot folosi
sirurile de caractere pentru a desemna pozitiile elementelor din vector. Acest tip
de vector se numeste asociativ pentru ca se asociaza un nume(sir de caractere) cu
valoarea din vector de pe o anumita pozitie.

<script>
var gust = new Array();

gust[“strugurii”]=”dulci”;

gust[“lamaile”]=”acre”;

gust[“grapefruit”]=”amare”;

var fruct_fav = “strugurii”;

document.write(“Fructele mele favorite sunt ” + fruct_fav + ” pentru ca sunt ” +

gust[fruct_fav] );

</script>

Se va afisa:

Fructele mele favorite sunt strugurii pentru ca sunt dulci

Astfel in loc de numere am folosit chiar numele fructelor iar ca valoare am

specificat o proprietate a fructului. De fapt vectorii asociativi sunt chiar mai
apropiati de viata reala pentru ca in general se folosesc pentru a specifica o
proprietate a unui obiect: gust[“struguri”]=”dulci”;

Video 36: Obiectul Math – operatii matematice

Contine proprietati cum ar fi π sau constanta lui Euler e

<script>

document.write(Math.Pi+”<br>” ); // numarul pi

document.write(Math.E+”<br>”);//constanta lui Euler

n= prompt (“Introdu un numar pozitiv”,”25″);

var rad = Math.sqrt(n);

document.write(“Radical din “+n +” este ” + rad+”<br>”); //se afiseaza radacina lui

n

</script>
Video 37: Obiectul Date

<body>

<script language=”JavaScript” type=”text/javascript”>

var cont=1;

function doSomething()

document.getElementById(“afisare”).innerHTML=cont++;

</script>

<div id=”afisare”></div>

<script language=”JavaScript” type=”text/javascript”>

setInterval(“doSomething()”,2000);

</script>

</body>// va executa functia doSomething la fiecare 2000 de milisecunde (2 secunde)

</script>

Va afisa cate un sir de caractere “ceva” la fiecare secunda.

Sa vedem cum se poate realiza un ceas care se actualizeaza la fiecare secunda.

<body>

<script type=”text/javascript”>

function printTime()

var now = new Date();

var hours = now.getHou rs();

var mins = now.getMinutes();

var seconds= now.getSeconds();

var de_afisat= hours+” : “+mins+” : ” + seconds +”</ br>”

document.getElementById(“timp”).innerHTML=de_afisat;

</script>

<div id=”timp”></div>

<script language=”JavaScript” type=”text/javascript”>

setInterval(“printTime()”,1000);

</script>

</body>

Video 38-39 Accesarea formularelor

Verificarea datelor din formulare

Ce trebuie stiut inainte: la crearea formularelor, in browser, acestea sunt

numerotate astfel incat fiecare formular este inserat intr-un vector : primul
formular este forms[0], al doilea forms[1] si tot asa.

Cand avem doar un formular il vom accesa cu forms[0];

Pe langa asta, in fiecare element de forma forms[i], toate elementele input sunt la
randul lor inserate intr-un vector astfel incat vom putea afla cate elemente sunt
in formular accesandu-i lungimea forms[i].length .

<body>

<form name=”formularContact”>

Username: <input type=”text” name=”numePers” value=”Introdu un nume”/>

Password: <input type=”password” name=”parola”/>

<input type=”submit” value=”submit” />

</form>

<script language=”JavaScript” type=”text/javascript”>

var x = document.forms[0].length;

document.write(x); // se afiseaza numarul de elemente din formular

document.write(document.forms[0][0].value); // se acceseaza primul element din

formular, caseta text pentru introducerea numelui, si anume valoarea text din
interiorul ei

document.write(document.forms[0].elements[0].value); // face acelasi lucru, doar ca

denumim explicit vectorul din interiorul formularului ca fiind elements

document.write(document.forms[0].elements[1].name);//va afisa numele celui de al

doilea element input care este parola
document.write(document.formularContact.elements[1].name);//la fel ca anteriorul
doar ca formularul este accesat prin numele acestuia : document.formularContact

document.write(document.formularContact.parola.name);//la fel ca anteriorul doar ca

elementul input password este accesat prin numele acestuia :
document.formularContact.parola

</script>

</body>

In concluzie putem folosi vectorii ca sa accesam fiecare element din formular sau
putem accesa aceleasi elemente prin numele acestora dat de proprietatea name. Dar
nu numai formularele pot fi accesate in acest mod. La fel se poate lucra cu
imaginile

document.images[0].src sau document.numeImag.src

sau link-urile

document.links[0].href sau document.numeLink.href

Video 40 Validarea formularelor

Verificam daca o caseta de bifare este bifata sau nu

<head>

<script>

function validator(){

if(document.formularValid.theBox.checked) //accesam caseta tip checkbox prin

intermediul numelui formularului urmat de numele casetei checkbox

alert(“yes, its checked”);

else
{

alert(“no, its not checked”);

</script>

</head>

<body>

<form name=”formularValid”>

<input type=”checkbox” name=”theBox” />

<input type=”button” value=”press me” onclick=”validator()” />

</form>

</body>

Copyright profiasi
Theme By SiteOrigin