Date post: | 06-Apr-2018 |
Category: |
Documents |
Upload: | hyndu-pussyfer-makatutta |
View: | 232 times |
Download: | 3 times |
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 2/98
J J avaava S S cript:cript: generalităţi generalităţi • JavaScript este un limbaj de programare simplu
de tip script, utilizat pentru definireacomportamentului elementelor dintr-o paginăWeb.
• Scriptul Java este un ansamblu de instrucţiuni
ce realizează o anumită acţiune, în generaldependentă de un eveniment care se produce întimpul navigării pe o pagină Web.
• Java Script ≠ Java• Nu necesită compilare, dar acest lucru îiafectează în mod negativ viteza de execuţie
• JS nu poate funcţiona de sine stătător, fiindintegrat în conţinutul HTML al paginii WEB.
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 3/98
• generarea conţinutului dinamic în paginile WEB
• reacţionarea la acţiuni sau evenimente (deschidereaunei pagini web, deplasarea mouse-ului intr-un anumitpunct, stergerea unui anumit camp dintr-un formular)
• citirea şi scrierea de elemente HTML . JS poate scrie şipoate citi etichete HTML , permiţând schimbareadinamică a conţinutului unei etichete HTML
• validarea datelor înainte de trasmiterea acestora cătreserver
• identificarea navigatorului Web şi detectarea setărilor browser-ului utilizatorilor;
• crearea de cookie-uri (mici fişiere care stocheazăinformaţii pe calculatorul utilizatorului) prin scrierea şicitirea informaţiilor despre calculatorul pe care rulează
pagina Web
J J avaava S S cript:cript: facilităţi facilităţi
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 4/98
ELEMENTE DE SINTAXĂ• Codul JavaScript este case sensitive – se face
diferenţa între minuscule şi majuscule;• Fiecare instrucţiune este urmată de “ ; ”
document.write(“Salut !”);
• În absenţa simbolului “ ; ”, sfârşitul instrucţiuniieste considerat a fi sfârşitul liniei
• Pentru structurare, unele seturi de instrucţiuni
JavaScript pot fi grupate în blocuri de cod, începute şi finalizate cu acolade – “{” şi “}”
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 5/98
Scriptul este încadrat de marcajele <script>...</script>
<html><body>
..................................
</script>
</body></html>
J J avaava S S cript:cript: generalităţi generalităţi
<script type=“text/javascript”><script language =“JavaScript”>
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 6/98
În secţiunea head
<html><head><script type=“text/javascript”>
....</script></head>
</html>
Tehnici de inserare a codului JavaScript într-o pagină HTML
Scriptul se execută numai atunci când este apelat Permite asigurarea că întregul script a fost încărcat
înainte de utilizarea saObligatoriu pentru un script care conţine funcţii
Î
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 7/98
INTEGRARE ÎN ANTETUL PAGINII <HTML>
<HEAD> <SCRIPT type="text/javascript">
function mesaj()
{alert("Salut! Sunt un mesaj!");
}
</SCRIPT>
</HEAD>
<BODY onload=" mesaj()">
</BODY>
</HTML>
Î
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 8/98
INTEGRARE ÎN ANTETUL PAGINII
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 9/98
În secţiunea body
<html><head>...........</head><body>
<script type=“text/javascript“>....</script></body>
Tehnici de inserare a codului JavaScript într-o pagină HTML
Scriptul se execută în momentul încărcării paginii
Execuţia sa generează de fapt conţinutul paginii
Î
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 10/98
INTEGRARE ÎN CORPUL PAGINII <HTML>
<HEAD>
</HEAD> <BODY>
<SCRIPT type="text/javascript">
document.write("Mesaj generat de JavaScript");
</SCRIPT> </BODY>
</HTML>
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 11/98
Într-un fişier extern
Pentru a oferi posibilitatea utilizării aceloraşi scripturi înmai multe pagini se poate recurge la grupareaacestora într-un fişier cu extensia .js către care sepoate face o referinţă astfel:
<html>
<head><script src =“numeFisier.js”></script>
</head><body></body></html>
Tehnici de inserare a codului JavaScript într-o pagină HTML
Când acelaşi script apare în pagini diferiteEvită necesitatea includerii în fiecare pagină
Argumentul src= trimite către fişierul extern
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 12/98
INTEGRARE SCRIPT EXTERN<HTML> <HEAD>
</HEAD> <BODY>
<SCRIPT src="extern.js">
</SCRIPT> <HR> <P>Textul de deasupra liniei a fostgenerat de catre <BR> un
<I>script</I> extern numit"extern.js".</BODY> </HTML>
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 13/98
INTEGRARE SCRIPT EXTERNConţinutul fişierului extern.js este:
document.write ("Text generat de un script extern");
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 14/98
INTEGRAREA COMENTARIILORComentarii: şiruri de caractere care nu vor fi
luate în considerare de către browser, fiind scrise
pentru uzul propriu al programatorului.• Pe o singură linie (dublu slash - // ): <SCRIPT type="text/javascript">
// Această linie este un comentariu //Următoarea linie generează un mesajdocument.write("Mesaj JavaScript");
</SCRIPT>
• Pe mai multe linii (simbolurile /* şi */): <SCRIPT type="text/javascript">
/* Această linie este un comentariuUrmătoarea linie generează un mesaj*/
document.write("Mesaj JavaScript");
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 15/98
Elementele limbajului Java Script : Datele simple
Numerice;Numerice;
Alfanumerice;Alfanumerice;LogiceLogice (True / False)(True / False).
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 16/98
• Instrucţiunea document.write poate fi
utilizată pentru a scrie conţinut în pagina Webprin intermediul programului
• Sintaxa:
document.write(“text”);
• Exemplu:
document.write(“Salut !”);• Textul poate conţine şi etichete HTML care vor
fi interpretate de către browser:
document.write(“<B>Titlu</B>”);
Elementele limbajului Java Script Instrucţiuni
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 17/98
Elementele limbajului Java Script Instrucţiuni
<HTML> <BODY>
<SCRIPT type="text/javascript">
document.write("Hello World!");
</SCRIPT>
</BODY>
</HTML>
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 18/98
Elementele limbajului Java Script : VariablileVariabilele sunt utilizate pentru stocarea
temporară a valorilor cu care se lucreazăla un moment dat.
Reguli pentru denumirea variabilelor:• Numele de variabilă este case sensitive
• Numele unei variabile trebuie să înceapăcu un caracter alfabetic sau cu _ (underscore)
V i blil
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 19/98
Elementele limbajului Java Script : Variablile• Crearea unei variabile JScript se numeşte “declaraţie”
• În acest scop se utilizează cuvântul-cheie var • Exemple:•var x;•var marca;
• Variabilele pot primi valori încă din momentuldeclarării:•var x=5;•var marca=“Toyota”;
• Notă: Atribuirea unei valori de tip text (şir de caractere) presupune încadrarea şirului de caractere între ghilimele
• Declararea implicită a variabilelor – se realizează prin atribuirea directă aunei valori pentru o variabilă care nu a fost declarată în prealabil:
•x=5;• marca=“Toyota”;
SCHIMBAREA VALORII UNEI VARIABILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 20/98
SCHIMBAREA VALORII UNEI VARIABILE<HTML>
<BODY>
<SCRIPT type=“text/javascript”> var prenume;
prenume=“Vasile”;
document.write(prenume);
document.write(“<BR>”);
prenume=“Marcel”;
document.write(prenume);
</SCRIPT> <P>Scriptul declară o variabilă, îi atribuie ovaloare, afişează valoarea,<BR> modificăvaloarea, afişează din nou valoarea.</P>
</BODY>
</HTML>
V i blil
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 21/98
Elementele limbajului Java Script : Variablile <SCRIPT type=“text/javascript”>
var x, y;var suma;
var mesaj;
x=90;
y=80;
suma=x+y;
mesaj=“Suma este: “;
document.write(mesaj+suma) </SCRIPT>
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 22/98
Elementele limbajului Java Script : OperatoriOperatori aritmetici
Considerând că y=10Operator Descriere Exemplu Rezultat
+ Adunare / Concatenare(siruri)
x=y+2 x=12
- Scădere x=y-2 x=8
* Înmulţire x=y*2 x=20
/ Împărţire x=y/2 x=5
% Modulo(restul împărţirii) x=y%2 x=0
++ Incrementare x=++y x=11
-- Decrementare x=--y x=9
O
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 23/98
Elementele limbajului Java Script : Operatori
Operatori de atribuire compuşi:
Considerând x=5 şi y=10
Operator Exemplu Echivalent cu Rezultat
= x=y x=10+= x+=y x=x+y x=15
-= x-=y x=x-y x=-5
*= x*=y x=x*y x=50/= x/=y x=x/y x=0.5
O i
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 24/98
Elementele limbajului Java Script : Operatori
Operatori de comparare:
Considerând x=10Operator Descriere Exemplu
== egal x==8 este fals
=== exact egal (valoare şi tip) x===10 este adevăratx==='10' este fals
!= diferit x!=8 este adevărat
> mai mare x>8 este adevărat
< mai mic x<8 este fals>= mai mare sau egal x>=10 este adevărat
<= mai mic sau egal x<=10 este adevărat
O t i
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 25/98
Elementele limbajului Java Script : Operatori
Operatori logici:
Considerând că x=7 şi y=8
Operator Descriere Exemplu
&& And(şi) (x < 10 && y > 1)este adevărat
|| or (sau) (x==5 || y==5)
este fals! not !(x==y)
este adevărat
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 26/98
<script>a=4;b=6;nume1=”Maxim”;
if((a>2)&&(b==6))
{document.write(“a este mai mare ca 2”);
document.write(“ şi b este egalcu 6”)}
</script>
Elementele limbajului Java Script : Operatori
OPERATORUL CONDIŢIONAL
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 27/98
OPERATORUL CONDIŢIONAL Utilizare:Utilizare: atribuirea unei valori către oatribuirea unei valori către o
variabilă, în funcţie de o condiţie.variabilă, în funcţie de o condiţie. Sintaxă generală:Sintaxă generală:variabilă=(variabilă=(condiţie)condiţie)?? valoare1valoare1::valoare2valoare2
Exemplu:Exemplu:statut=statut=(media(media<5<5))??”ne”nepromovatpromovat””::””promovatpromovat””
Explicaţie:Explicaţie:Dacă variabilaDacă variabila mediamedia are o valoare sub 5are o valoare sub 5,,variabilavariabila statut statut ia valoarea “ia valoarea “nepromovatnepromovat”,”,
în caz contrar, variabila în caz contrar, variabila statut statut ia valoareaia valoarea““promovatpromovat”.”.
STRUCTURI FUNDAMENTALE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 28/98
STRUCTURI FUNDAMENTALE• Realizarea unui program complex
presupune, în majoritatea cazurilor,utilizarea a trei structuri de programare: – Structura secvenţială – instrucţiuni care se
execută în ordinea în care au fost scrise – Structura alternativă – instrucţiuni care seexecută sau nu în funcţie de valoarea deadevăr a unei condiţii
– Structura repetitivă – instrucţiuni a căror execuţie se reia de mai multe ori, în funcţiede parametrii specificaţi
STRUCTURI ALTERNATIVE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 29/98
STRUCTURI ALTERNATIVE• if – permite execuţia unei secţiuni de program
numai dacă o anumită condiţie esteadevărată• if...else – permite execuţia unei secţiuni de
program atunci când o condiţie este
adevărată şi a altei secţiuni în cazul în carecondiţia este falsă• if...else if....else – se utilizează pentru
selecţia unei anumite secţiuni de program, dinmultiple variante posibile
• switch – se utilizează pentru selecţia uneianumite secţiuni de program, din multiple
variante posibile
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 30/98
Instrucţiunea IF... ELSE:
if (condiţie)
{ instrucţiune 11;
………………....
instrucţiune 1n }[ else
{instrucţiune 21;
…………………..instrucţiune 2m;} ]
I t ţi IF ELSE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 31/98
Test
NU
S 2
DA
S 1
Instrucţiunea IF... ELSE:
I t ţi IF ELSE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 32/98
<html><head> </head>
<body> <script language=“javascript”>
var nota
nota=prompt(“Introduceti nota”,”0”)
if (nota<5){alert (“Nepromovat”)}
else
{alert (“Promovat”)} </script>
</body></html>
Instrucţiunea IF ... ELSE
Instr cţi nea IF ELSE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 33/98
<html><body>
<script language="javascript"> var nota
nota=prompt("Introduceti nota","0")
if (nota<5)
{alert ("Nepromovat")}
else{if (nota<7)
• {alert ("Bine")}• else
• {alert ("Foarte bine") }}• </script> • </body>• </html>
Instrucţiunea IF ... ELSE
INSTRUCŢIUNEA IF ELSE IF ELSE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 34/98
INSTRUCŢIUNEA IF…ELSE IF…ELSE Sintaxă generală:Sintaxă generală:if (condiif (condiţieţie1)1)
{{Instrucţiuni care se executăInstrucţiuni care se execută atunci cândatunci când
condiţicondiţia 1a 1 esteeste adevăratăadevărată
}}
else if (condielse if (condiţieţie2)2)
{{
Instrucţiuni care se executăInstrucţiuni care se execută atunci cândatunci când
condiţicondiţia 2a 2 esteeste adevăratăadevărată
}}
elseelse
{{
Instrucţiuni care se executăInstrucţiuni care se execută atunci cândatunci când
nici una dintrenici una dintre condiţicondiţii nui nu esteeste adevăratăadevărată
}}
I t ţi SWITCH CASE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 35/98
Instrucţiunea SWITCH... CASE
switch (constanta/variabila conditionala)
{
case valoare 1: bloc_1 de instrucţiuni
break
case valoare 2: bloc_2 de instrucţiuni
break.............................
case valoare n: bloc_n de instrucţiuni
break
default : bloc de instrucţiuni ce seexecuta in cazul neîndepliniriicondiţiilor enunţate;
}
Instrucţiunea SWITCH CASE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 36/98
Instrucţiunea SWITCH... CASE
Instrucţiunea SWITCH CASE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 37/98
<script language="javascript">var a=10var b=20
var x=Number(0)var operatie = "+"switch (operatie){
case "-" : x = a-b
breakcase "+" : x = a+balert ("x este"+x)breakcase "*" : x = a*b
breakcase "/" : x = a/b;breakdefault : document.write ("operatie eronata")
}</script>
Instrucţiunea SWITCH... CASE
STRUCTURI REPETITIVE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 38/98
STRUCTURI REPETITIVE• Sunt utilizate pentru repetarea unei
secvenţe de instrucţiuni de un număr specificat de ori sau atât timp cât oanumită condiţie este adevărată
• for – repetă o secvenţă deinstrucţiuni de un număr specificatde ori
• while – repetă o secvenţă deinstrucţiuni atât timp cât o anumită
condiţie este adevărată
Structuri repetitive: DO WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 39/98
Structuri repetitive: DO ... WHILE
do { instrucţiune 1;
instrucţiune 2;……………instrucţiune n;
}while (condiţie)
NU
DA
Bloc de instructiuni
Test
Execută odată un bloc de instrucţiuni, după care repetă execuţia acelui bloc atâtatimp cât condiţia de la finalul blocului este îndeplinită
Structuri repetitive: DO WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 40/98
Structuri repetitive: DO ... WHILE
• Sintaxă:
do{
instrucţiuni
}while (var <= valf);
• Semnificaţie: – valf – valoarea finală a contorului – Incrementarea nu este automată! – Instrucţiunea se execută cel puţin o dată!
Structuri repetitive: DO WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 41/98
.........<script language=“javascript”>
var nn=Number(0)
var ii=Number(0)var sumasuma=Number(0)
nn=prompt(“Pentru cate numere calculati suma ?”)
dodo
{ sumasuma=sumasuma+ii
ii++
}
while while (ii<=nn)
alert(“Suma este: “ +sumasuma)
</script>
Structuri repetitive: DO ... WHILE
1+2+3+4
NU
DA
Te
st
1 <= 42 <= 43 <= 4
4 <= 45 <= 4
Suma = 0 + 0 → Suma = 0Suma = 0 + 1 → Suma = 1
Suma = 1 + 1 → Suma = 2Suma = 2 + 1 → Suma = 3Suma = 3 + 1 → Suma = 4
Structuri repetitive: WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 42/98
Structuri repetitive: WHILE
while (condiţie)
{
instrucţiune 1;
instrucţiune 2;
................
..instrucţiune n;
}
NU
DA
Blocinstructiuni
Test
Repetă execuţia unui bloc de instrucţiuni până când o condiţie este îndeplinită
Structuri repetitive: WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 43/98
Structuri repetitive: WHILE
• Sintaxă:
while (var <= valf ){
instrucţiuni
}• Semnificaţie:
– valf – valoarea finală a contorului
– Operatorul “<=” poate fi înlocuit cu oriceoperator de comparaţie (<, >, !=, >=, etc.) – Incrementarea nu este automată!
EXEMPLU WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 44/98
EXEMPLU WHILE <HTML>
<HEAD></HEAD>
<BODY> <script type="text/javascript">
var i=0;
while (i<=10)
{
document.write("Valoarea este " + i);
document.write("<br>");
i=i+1;
}
</script>
</BODY></HTML>
EXEMPLU WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 45/98
EXEMPLU WHILE
EXEMPLU WHILE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 46/98
.............<script language=“javascript”>
var nn=Number(0);
var ii=Number(0);var sumasuma=Number(0);
nn=prompt(“Pentru cate numere calculati suma”);
while (ii<=nn)
{sumasuma=sumasuma+ii;
ii++;
}alert(“Suma este: “ +sumasuma);
</script>
..............
EXEMPLU WHILE
Nu
DA
Structuri repetitive: FOR
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 47/98
St uctu epet t e O
FOR ([expresie iniţială]; [condiţie]; [expresie finală]){ bloc instrucţiuni}
for (var=v1;var<=v2;var=var+pas)
{
instrucţiuni
}
• Semnificaţie:• V1 – valoarea iniţială a contorului• V2 – valoarea finală a contorului• Pas – valoarea cu care se incrementează contorul la începutul
fiecărei iteraţii
EXEMPLU FOR
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 48/98
EXEMPLU FOR <HTML>
<HEAD></HEAD>
<BODY>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++){document.write("Aceasta este linia " + i);
document.write("<br>");
}
</script>
</BODY>
</HTML>
EXEMPLU FOR
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 49/98
EXEMPLU FOR
EXEMPLU FOR
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 50/98
EXEMPLU FOR <HTML>
<HEAD></HEAD>
<BODY> <script type="text/javascript">
var i=0;
for (i = 1; i <= 6; i++){
document.write("<H" + i + "> Acesta esteheader " + i);
document.write("</H" + i + ">");}
</script>
</BODY></HTML>
EXEMPLU FOR
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 51/98
EXEMPLU FOR
EXEMPLU FOR
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 52/98
<html><body><script language=“javascript”>
var nn =Number(0);var ii = Number(0);
var sumasuma = Number(0);
nn= prompt(“Pentru cate numere doriti sa calculati suma”)
for (ii=0; ii <=nn;ii++)
{sumauma=sumasuma+i
}alert (“Suma este” +sumasuma)
</script>
</body></html>
EXEMPLU FOR
Funcţii JavaScript
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 53/98
Funcţii JavaScript
• Definiţie: o secvenţă de codreutilizabilă, executată caurmare a apariţiei unuieveniment sau a unui apel dincadrul programului
• O funcţie poate fi apelată dinmai multe locaţii diferite
Funcţii JavaScript
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 54/98
Funcţiile pot fi declarate în orice zonă
a paginii (de asemenea pot fideclarate într-un fişier extern cuextensia .js).
Ele pot fi definite atât în secţiuneahead cat şi în body, dar pentru a
avea certitudinea încărcării funcţiei în memorie înainte de apelarea ei serecomandă declararea acestora în
secţiunea head
Funcţii JavaScript
Funcţii JavaScript
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 55/98
Sintaxa generala utilizată la declararea unei funcţii:
functionnume_functie([var1,var2,...,varX])
{
Bloc instrucţiuni}
unde var1,var2,...,varX sunt parametrii funcţiei
ţ p
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 57/98
INSTRUCŢIUNEA RETURN
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 58/98
INSTRUCŢIUNEA RETURN
• Permite specificarea explicită a valorii
returnate de către o funcţie• Orice funcţie care returnează o valoaretrebuie să o utilizeze
• Sintaxă:function numefuncţie()
{
instrucţiuni…
return valoare
}
EXEMPLU RETURN
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 59/98
EXEMPLU RETURN <HTML><HEAD>
<script type="text/javascript">
function produs(a,b)
{
x=a*b;
return x;}
</script>
</HEAD>
<BODY> <input type="button"
onclick="alert( produs(2,3))"value="Afiseaza produsul">
</BODY></HTML>
CASETE DE DIALOG
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 60/98
CASETE DE DIALOG• Utilizare: metoda de bază pentru
asigurarea comunicării cuutilizatorul.• Funcţii:
–Transmiterea (afişarea) de mesaje –Cererea (interogarea) unor date
• Tipuri de casete de dialog: –Casetă de atenţionare (alert box ) –Casetă de confirmare (confirm box )
–Casetă de interogare (prompt box)
CASETA DE ATENŢIONARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 61/98
CASETA DE ATENŢIONARE• Permite asigurarea că o anumită
informaţie este văzută deutilizator.
• După afişarea casetei, execuţiaprogramului se suspendă până laapăsarea butonului “OK”
• Sintaxă:alert(“Mesaj”);
CASETA DE ATENŢIONARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 62/98
CASETA DE ATENŢIONARE <HTML>
<HEAD>
<script type="text/javascript"> function AfisareMesaj()
{
alert("Sunt o caseta de dialog!!");
} </script>
</HEAD>
<BODY>
<INPUT type="button"onclick=" AfisareMesaj()"value="Afiseaza caseta de dialog">
</BODY>
</HTML>
CASETA DE CONFIRMARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 63/98
CASETA DE CONFIRMARE• Permite asigurarea că utilizatorul verifică
sau acceptă o informaţie.• Afişarea unei asemenea casete suspendă
execuţia programului până la apăsareabutonului “OK” sau a butonului “Cancel”
• Caseta se comportă ca o funcţie: – Butonul “OK” returnează true – Butonul “Cancel” returnează false
• Sintaxă:confirm(“mesaj”);
CASETA DE CONFIRMARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 64/98
CASETA DE CONFIRMARE <HTML><HEAD>
<script type="text/javascript">
function AfisareConfirmare()
{
var r=confirm(“Alegeti un buton!");
if (r==true)
{
document.write("Ati apasat OK!");
}
else{
document.write("Ati apasat Cancel!");
}
}
</script> </HEAD>
<BODY>
<INPUT type="button" onclick=" AfisareConfirmare()"value="Afiseaza caseta de confirmare">
</BODY></HTML>
CASETA DE CONFIRMARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 65/98
CASETA DE CONFIRMARE
CASETA DE INTEROGARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 66/98
CASETA DE INTEROGARE• Permite cererea unei valori de la
utilizator.• După afişarea casetei, execuţia
programului se suspendă până laintroducerea valorii şi apăsarea butonului
“OK” sau a butonului “Cancel”• Caseta se comportă ca o funcţie:
– Butonul “OK” returnează val. introdusă
– Butonul “Cancel” returnează null • Sintaxă: prompt(“Mesaj",“Val.Impl.");
CASET A DE INTEROGARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 67/98
CASET <HTML><HEAD>
<script type="text/javascript">
function AflaNume()
{var nume= prompt("Introduceti numele:","Popescu Ion");
if (nume!=null && nume!="")
{
document.write("Salut " + nume + "! Ce faci?");
}
}
</script>
</HEAD> <BODY>
<INPUT type="button" onclick=" AflaNume()"value="Afiseaza caseta interogare">
</BODY></HTML>
CASETA DE INTEROGARE
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 68/98
CASETA DE INTEROGARE
OBIECTE JavaScript
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 69/98
OBIECTE JavaScript
JavaScript este un limbaj de programare
bazat pe obiecte.Obiectele reprezinta un tip special de datetip special de date
care au asociate proprietăţi şi metode.Proprietăţile sunt valori asociateobiectelor.
Metodele sunt acţiuni care se executăasupra obiectelor.
OBIECTE J S i t
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 70/98
OBIECTE JavaScript
• Pentru a lucra cu o aplicaţie, trebuiecunoscute obiectele specifice aplicaţieirespective:
• Exemple MS Office: – Word: documente; paragrafe; cuvinte; – Excel: fişiere; foi de calcul; câmpuri
– Access: tabele; înregistrări; câmpuri
OBIECTE JavaScript
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 71/98
p
• Programarea Orientată pe Obiecte (POO)presupune descrierea unui mediu informaţionalsub formă de obiectesub formă de obiecte (Eu, Dvs. Lumea, etc)
• Limbajul JavaScript posedă o multitudine deobiecte:• STRING• DATE
• MATH• ARRY• Etc.
Obiecte: Colecţii de obiecte
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 72/98
ţ
• Numeroase obiecte aparţin colecţiilor de obiecte
• Ex: un bloc este o colecţie de scări; – o scară este o colecţie de etaje:
• un etaj este o colecţie de apartamente, etc.)
• ColecţiileColecţiile sunt ele însele obiecte care conţin alteobiecte, cu care sunt în relaţie.
• Colecţiile de obiecte se găsesc adeseaprezentate printr-o structură ierarhică sauarborescentă
Obiecte: Proprietăţi
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 73/98
p ţ• Proprietăţile reprezintăProprietăţile reprezintă caracteristicile fizice alecaracteristicile fizice ale
obiectelor obiectelor .
• Proprietăţile pot fi măsurate sau cuantificateProprietăţile pot fi măsurate sau cuantificate (Obiectul“Eu” poate avea ca proprietăţi: înălţime, greutate, vârstă,nume, CNP, sold cont personal, număr cărţi scrise, etc.).Câteva din aceste proprietăţi sunt uşor de modificat (soldcont personal), altele sunt mai dificil de modificat (ani,
înălţime, greutate, număr cărţi scrise, vârstă), iar altele(aproape) imposibil (sex, nume, CNP, etc)
• Pentru a face referire la proprietatea unui obiect, trebuiereferit obiectul, iar apoi proprietatea acestuia:Obiect.Proprietate valorizatăObiect.Proprietate valorizată – În JS: OObiectStringbiectString. Length. Length (pentru a returna numărul de
caractere din obiectul de tip text. – În VBA Excel: Range(“D4”).Range(“D4”).Value=“Albu”Value=“Albu” (pentru a
introduce în celula D4 numele “Albu”
– În VBA Access: FormsForms!FacturiFacturi.NrFactura.VisibleVisible=YES
Obiecte: Metode• M t d l i tăMetodele reprezintă ţi i t fi î d li it d bi tacţ
iuni care pot fi îndeplinite de obiecte
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 74/98
• Metodele reprezintăMetodele reprezintă acţiuni care pot fi îndeplinite de obiecteacţiuni care pot fi îndeplinite de obiecte sau pot fi aplicate obiectelor sau pot fi aplicate obiectelor
• Metodele permit adesea schimbarea proprietăţilor obiectelor Metodele permit adesea schimbarea proprietăţilor obiectelor
• Exemple: – Metoda “merge” poate schimba poziţia unui individ (obiect)dintr-un punct A (valoare) într-un punct B (valoare),modificând proprietatea “amplasare” din valoarea A în B.
– Metoda “cheltuieşte” permite diminuarea proprietăţii “sold
bancar” aferente obiectului “Eu”• Mod de referire: ObiectObiect..MetodăMetodă – În Excel: În Excel:
• RangeRange(“D2:D10”).(“D2:D10”).SelectSelect• RangeRange(“D2:D10”).(“D2:D10”).CopyCopy sausau SelectionSelection..CopyCopy
• RangeRange(“F2:F10”).(“F2:F10”).SelectSelect• ActiveSheetActiveSheet..PastePaste
– În JavaScript: În JavaScript: • OObiectString.biectString.indexOf(indexOf(textcautat,pozitieStarttextcautat,pozitieStart))
EVENIMENTE JavaScript
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 75/98
pEvenimentele sunt acţiuni care pot fi detectateacţ iuni care pot fi detectate
de JavaScript. Fiecare element al unei paginiweb are ataşate evenimente care pot declanşafuncţii JavaScript.
Exemple :• Un click sau dubluclick de mouse• Încărcarea unei pagini sau a unei imagini• Deplasarea mouse-ului deasupra unei zone reactive dintr-o
pagină• Selectarea unei casete de validare dintr-un formular HTML• Transmiterea unui formular HTML• Apăsarea unei taste
ec u r ng V
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 76/98
Sintaxa utilizată pentru crearea unui obiect de tip text : Var
obiect=new String();Proprietatea lengthlengthReturnează numărul de caractere din obiectul de
tip text.Sintaxa: obiectStringobiectString. length. length<script type="text/javascript">
var txt="CIG"
document.write(txt.length);
</script>
ec u r ng V
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 77/98
Sintaxa utilizată pentru crearea unui obiect de tip text : Var
obiect=new String();
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 78/98
g
MetodaMetoda indexOf()indexOf()Sintaxa:Sintaxa:
obiectStringobiectString.indexOf(.indexOf(textcautattextcautat,pozitieStart),pozitieStart)
Returnează poziţia primei apariţii a unui textReturnează poziţia primei apariţii a unui text în cadrul altui text. în cadrul altui text.ArgumentulArgumentul pozitieStart pozitieStart este o valoareeste o valoare
opţionalopţionalăă indicând poziindicând poziţţiaia cu carecu care începe începecăutarea.căutarea.
Atunci când textul căutat nu este găsitAtunci când textul căutat nu este găsitmetoda returnează -1metoda returnează -1
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 79/98
Ob ec u St g
<script type="text/javascript">
var txt="CIG";
document.write("Pozitia literei I in
cadrul textului: " + txttxt.indexOf(".indexOf("II")"));
document.write("<BR>");
document.write("Pozitia literei i in
cadrul textului: " + txttxt.indexOf(".indexOf("ii")"));
</script>
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 80/98
g
MetodaMetoda lastlastIIndexOf()ndexOf() Sintaxa:Sintaxa:obiectStringobiectString.lastindexOf(.lastindexOf(textcautattextcautat,pozitieStart),pozitieStart)
Returnează poziţia ultimei apariţii a unuiReturnează poziţia ultimei apariţii a unui şir deşir decaracterecaractere în cadrul altui text. în cadrul altui text.
pozitieStart pozitieStart este o valoare opţionaleste o valoare opţionalăă indicând pozitiaindicând pozitiade la carede la care începe căutarea. începe căutarea.
Atunci când textul căutat nu este găsit metodaAtunci când textul căutat nu este găsit metodareturnează -1returnează -1
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 81/98
g
ExempluExemplu metoda lastindexOf()lastindexOf() obiectStringobiectString.lastindexOf(.lastindexOf(textcautattextcautat,pozitieStart),pozitieStart)
<script type="text/javascript">
var txt="INFORMATICA";
document.write("Pozitia ultimei aparitii aliterei I in cadrul textului: " +
txt.lastIndexOf("I",0));
document.write("<BR>");
document.write("Pozitia literei i in cadrultextului: " + txt.lastIndexOf("i"));
</script>
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 82/98
gMetodaMetoda substr()substr()Sintaxa:Sintaxa:obiectStringobiectString.substr(poziţieStart,lungime).substr(poziţieStart,lungime)
Extrage un număr de caractere egal cu valoareaExtrage un număr de caractere egal cu valoareaprecizată deprecizată de lungimelungime începând cu poziţia precizată începând cu poziţia precizatăprinprin argumentulargumentul poziţieStartpoziţieStart. Daca. Daca argumentulargumentul lungimelungime
lipseşte se va extrage textul până la sfârşitlipseşte se va extrage textul până la sfârşit
MetodaMetoda substr substr inging()()Sintaxa:Sintaxa: obiectStringobiectString.substring(poziţieStart, poziţieSfârşit).substring(poziţieStart, poziţieSfârşit)
Extrage textul cuprins întreExtrage textul cuprins între argumenteleargumentele poziţieStartpoziţieStart şişipoziţieSfârşitpoziţieSfârşit. Dacă poziţieSfârşit este omis se va. Dacă poziţieSfârşit este omis se vaextrageextrage şirul de caractereşirul de caractere până la sfârşit.până la sfârşit.
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 83/98
g
Exemple mExemple metodetodee substr()substr() şişi substring()substring()obiectStringobiectString.substr(poziţieStart,lungime).substr(poziţieStart,lungime)
obiectStringobiectString.substring(poziţieStart, poziţieSfârşit).substring(poziţieStart, poziţieSfârşit)
<script type="text/javascript">
var txt="CONTABILITATE SI INFORMATICA DE GESTIUNE";
document.write(txt.substr(17));
</script><br>
<script type="text/javascript">
var txt="CONTABILITATE SI INFORMATICA DE GESTIUNE";
document.write(txt.substring(17,28));</script>
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 84/98
g
MetodaMetoda toLowerCase()toLowerCase()
Sintaxa:Sintaxa:obiectStringobiectString..toLowerCase()toLowerCase()
Transformă toate caracter Transformă toate caracter eleele textului în minuscule.textului în minuscule.
MetodaMetoda toUpperCase()toUpperCase()
Sintaxa:Sintaxa: obiectStringobiectString..toUpperCase ()toUpperCase ()
Transformă toate caracter Transformă toate caracter eleele textului în majuscule.textului în majuscule.
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 85/98
gMetodMetodeleele toLowerCase()toLowerCase() şişi totoUpper Upper Case()Case() obiectStringobiectString..toLowerCase()toLowerCase()
obiectStringobiectString..toUpperCase ()toUpperCase ()
<script type="text/javascript">
var txt="CONTABILITATE SI INFORMATICA DE GESTIUNE";
document.write(txt.toLowerCase());
</script>
<br>
<script type="text/javascript">
var txt="Contabilitate si Informatica de Gestiune";document.write(txt.toUpperCase());
</script>
Obiectul String
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 86/98
g <SCRIPT type="text/javascript">
var txt=“Bafta la examen !";
document.write("Big:" + txt. big() +"<BR>");document.write("Small:" + txt.small() +"<BR>");
document.write("Bold:" + txt. bold() +"<BR>");
document.write("Italic:" + txt.italics() +"<BR>");
document.write("Taiat:" + txt.strike() +"<BR>");
document.write("Cul:" + txt.fontcolor("Red") +"<BR>");
document.write("Marime:" + txt.fontsize(16) +"<BR>");
document.write("Indice:" + txt.sub() +"<BR>");
document.write("Exponent:" + txt.sup() +"<BR>");
</SCRIPT>
ec u a eVar
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 87/98
Sintaxa utilizată pentru crearea unui obiect de tip dată : Var
obiect=new Date();Metoda Date()Returnează data şi ora curentă.Sintaxa: obiectDate.Date()
<script type="text/javascript">var data=new Date();
document.write("Data si ora curenta: "
+data.Date());
Obiectul Date
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 88/98
Metoda getDate() Returnează ziua dintr-o dată subforma unui număr cuprinsîntre 1 şi 31Sintaxa: obiectDate.getDate()
<script type="text/javascript">
var data=new Date();
document.write("Ziua curenta "+data.getDate());
</script>
Obiectul Date
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 89/98
Metoda getMonth() Returnează luna dintr-o dată subforma unui număr cuprinsîntre 1 şi 12Sintaxa: obiectDate.getMonth()
<script type="text/javascript">
var data=new Date();
document.write(“Luna curenta "+data.getMonth());
</script>
Obiectul Date
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 90/98
Metoda getFullYear()
Returnează anul curentSintaxa:
obiectDate.getFullYear()
<script type="text/javascript">
var data=new Date();
document.write(“Anul curent "+data.getFullYear());
</script>
Obiectul Date
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 91/98
Metoda setDate()
Setează ziua pentru o datăcalendaristicăSintaxa: obiectDate.setDate()
<script type="text/javascript">
var data=new Date();
data.setDate(20);
document.write("Data: " +data);
• </script>
Obiectul Date
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 92/98
Metoda setMonth()
Setează luna pentru o datăcalendaristică cu valori cuprinseîntre 0 si 11
Sintaxa: obiectDate.setMonth()
<script type="text/javascript">
var data=new Date();
data.setMonth(11);
document.write("Data: " +data);• </script>
Obiectul Date
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 93/98
Metoda setFullYear()
Setează anul pentru o datăcalendaristicăSintaxa:
obiectDate.setFullYear()
<script type="text/javascript">
var data=new Date();
data.setFullYear(2010);
document.write("Data: " +data);
</script>
Obiectul Date
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 94/98
Metoda toDateString()
Returnează data dintr-unobiect de tip Date.Sintaxa:
obiectDate.toDateString()
<script type="text/javascript">
var data=new Date();
document.write("Data: " data.toDateString());
</script>
Obiectul Math
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 95/98
• Metoda Round()
Rotunjeşte argumentul la cea mai apropiată valoare întreagă.Sintaxa: Math.Round(x)• Metodele Ceil() / Floor(x)Rotunjeşte argumentul prin adaos sau lipsă către cea mai apropiată
valoare întreagă.Sintaxa: Math.Ceil(x) / Mat.Floor(x)
• Metoda Pow()Returnează valoarea obţinută prin ridicarea lui x la puterea y.
Sintaxa: Math.Pow(x,y)
Obiectul Math
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 96/98
Obiectul Math
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 97/98
• Metoda Abs()
Returnează valoarea absolută a argumentului.Sintaxa: Math.Abs(x)• Metodele Max() / Min()Returnează cea mai mare / mică valoare dintre argumente.Sintaxa: Math.Max(x,y) / Mat.Min(x,y)• Metoda Sqrt()Returnează rădăcina pătrată a argumentului.
Sintaxa: Math.Sqrt(x)
Obiectul ARRAY
8/2/2019 57122015 Curs Java Script
http://slidepdf.com/reader/full/57122015-curs-java-script 98/98
Este utilizat pentru a stoca valori multiple într-o singură variabilă Sintaxa utilizată pentru crearea unui obiect de tip tablou :
Var obiect=new Array();• Proprietatea Length()Returnează numărul de elemente dintr-un obiect de tip Array.
Sintaxa: obiectArray.Length()• Metoda Reverse()Inversează ordinea elementelor dintr-un vector.
Sintaxa: obiectArray.reverse()• Metoda sort()Realizează o sortare alfabetică a elementelor dintr