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:

  1. aniRamasiPensie care este noua metoda a unui obiect persoana si e folosita pentru calculul anilor pana la pensie
  2. 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>