Curs 8

Introducere in JavaScript
Este un limbaj de scripting care furnizeaza dezvoltatorilor

de pagini WEB un instrument pentru gestionarea
interfetei utilizator:
Pagina WEB poate reactiona la diferite evenimente generate de
utilizator;
Se pot gestiona cookie;
Se pot crea formulare;
Se pot valida datele introduce in formulare inainte de a fi
trimise de catre server;
Se pot modifica pagini WEB prin adaugare, stergere, reodonare
a componentelor unei pagini.
Introducere in Javascript
In 1998 W3C publica standardul Level 1 DOM care
permite accesul la fiecare element dintr-o pagina WEB.
In prezent toate browserele implementeaza acest
standard.
Core DOM defineste un set standard de obiecte pentru

orice document structurat.
XML DOM - defineste un set standard de obiecte pentru
documente XML
HTML DOM - defineste un set standard de obiecte pentru
documente HTML
Orice obiect are:

Atribute (proprietati)
Metode (defineste comportamentul obiectului)
Obiecte Javascript
Obiect
Descriere
Window
Reprezinta fereastra browserului. Este

creat automat la intalnirea tag-ului
<body>
Navigator
Contine informatii depsre browser
Screen
Contine informatii despre display
History
O lista de URL-uri vizitate
Location
Informatii despre URL-ul curent
Obiecte HTML DOM (cateva exemple)

Obiect
Descriere
Document
Documentul HTML curent
Anchor
Elementul <a>
Body
Elementul <body>
Button
Elementul <button>
link
Elementul <link>
Table
Un element <table>
Un script se introduce intr-o pagina WEB astfel:

<html>
<body>
<script type=text/javascript language=javascript>
</script>
</body>
</html>
Cu ajutorul Javascript poate fi modificat continutul unei
pagini WEB.
Proprietatile innerText si innerHTML permit accesul la
continutul oricarui obiect HTML. De regula se foloseste
atributul id pentru a identifica elementul dorit.
Exemple:
document.getElementbyId(demo).innerHTML cod HTML al

elementului identificat prin demo;
document.getElementbyId(demo).innerText textul
elementului identificat prin demo;
Exemplu: <b>acesta este un exemplu</b>

innerText - <b>acesta este un exemplu</b>
innerHTML - acesta este un exemplu
Exemplu un script simplu care aduna doua numere si

afiseaza apoi rezultatul:
<html>
<head>
<title> Exemplu de formular</title>
</head>
<script type="text/javascript" language="javascript">
function sum(a,b) {
return a+b;
}
function suma(a,b) {
a=document.getElementById("t1").value;
b=document.getElementById("t2").value;
var a1= parseInt(a);
var b1= parseInt(b);
c= sum(a1,b1);
document.getElementById("Rezultat").innerHT
ML= " Rezultatul este:" + c;
}
</script>
<body>

var msg = "Aceasta este o pagina simpla ce
utilizeaza Javascript";
document.write(msg);
</script>
<p>
Introduceti a: <input type="text" id="t1" value="0"
name="text1" size="30">
<p>
Introduceti b: <input type="text" id="t2" value="0"
name="text2" size="30">
<p>
<input type="button", value="Aduna" id="v1"
onclick="suma()">
<p id="Rezultat"> Rezultatul este:</p>
</body>
</html>
Cu ajutorul Javascript avem acces si la stilul unui obiect
Exemplu:
Document.getElementById(demo).style.property
In Javascript se poate lucra cu obiectul style care are o

serie de proprietati:
Proprietate
Descriere
Style.background
Figura utilizata ca background
Style.backgroundColor
Culoarea de fundal
Style.borderColor
Culoarea chenarului unui obiect
Comentarii:
/* . */ se pot intinde pe mai multe linii
// o singura linie
O instructiune poate fi scrisa pe mai multe linii, la finalul

unei linii utilizandu-se \
Unde se plaseaza un script?
1. In interiorul paginii in acest caz ele se executa la
incarcarea paginii in browser. Exemplu:
<html>
<head>
<title> Exemplul 2</title>
</head>
<body>
<!-var msg = "Aceasta este o pagina simpla ce utilizeaza Javascript";
//-->
</script>
</body>
</html>
2. In antetul paginii. Exemplu:
<html>
<head>
var msg = "Aceast mesaj este afisat de script";
</script>
</head>
<body>
<p>
Textul apare dupa executia scriptului.
</body>
</html>
3. In exteriorul paginii. Exemplu:
Fisierul script.js contine:

var msg = "Aceast mesaj este afisat de script";
Documentul html:
<html>
<head>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<p>
Textul apare dupa executia scriptului.
</body>
</html>
Definirea variabilelor:
Daca o variabila este definita in interiorul unei functii ea va
putea fi accesata doar in acea functie
Variabilele declarate in afara functiilor pot fi accesate in toata
pagina
Var var_name=valoare
Exemplu:
var x = 5;
var y = 6;
var z = x + y;
Metode. Javascript este un limbaj orientat obiect. Toate

obiectele au proprietati si metode. Exemple de metode
pentru obiecte predefinite:
document.write(mesaj);
window.alert(mesaj); // un mesaj si butonul OK
window.prompt(mesaj, valoare implicita); OK, CANCEL
window.confirm(mesaj); OK, CANCEL
window.open(url, name);
Definirea unei functii:
function name(parameter1, parameter2, parameter3) {
code to be executed
}
Este recomandabil ca functiile sa fie definite in antetul
paginii;
O functie este executata:
Daca este apelata

Daca este invocata de un eveniment
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
var text = "The temperature is " + toCelsius(77) + "
Celsius";
Instructiunea de asignare
var = expr;
Exemplu: var x = 10;
Operatori aritmetici
Operator
+
*
/
%
++
-
Descriere
Adunare
Scadere
Inmultire
Impartire
Modulo
Incrementare
Decrementare
Operatori de asignare
Operator
=
+=
-=
*=
/=
%=
Exemplu
x=y
x += y
x -= y
x *= y
x /= y
x %= y
Echivalent cu
x=y
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
Operatori de comparare si logici
Operator
Descriere
==
Egal cu
!=
Diferit
>
Mai mare
<
Mai mic
>=
Mai mare sau egal
<=
&&
||
!
Mai mic sau egal

Si logic
Sau logic
Negare logica
Executie conditionata
if (condition) {
instructiuni
}
if (condition) {
instructiuni 1
} else {
instructiuni 2
}
if (condition1) {
instructiuni daca condition 1 este adevarata
} else if (condition2) {
instructiuni daca condition 1 e falsa si condition 2 e
adevarata
} else {
instructiuni daca c1 si c2 si c3 sunt false
}
Exemple:
if (hour < 18) {
document.write("Good day);
} else {
document.write("Good evening);
}
if (time < 10) {
document.write("Good morning);
} else if (time < 20) {
document.write("Good day);
} else {
document.write("Good evening);
}
switch(expression) {
case n:
... Instr
break;
case n:
instr
break;
default:
instr
}
switch (new Date().getDay()) {

case 0:
day = duminica";
break;
case 1:
day = luni";
break;
case 2:
day = marti";
break;
case 3:
day = miercuri";
break;
case 4:
day = joi";
break;
case 5:
day = vineri";
break;
case 6:
day = sambata";
break;
}
Bucle de program (instructiunea repetitiva)
for (statement 1; statement 2; statement 3) {
instr
}
Exemplu:
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
while (condition) {
instr
}
Exemplu:
while (i < 10) {
text += "The number is " + i;
i++;
}
Evenimente care pot declansa scripturi (cateva exemple):
Un click de mouse
Se incarca o pagina
Se incarca o imagine
Mouse-ul este deasupra unui element
Se modifica textul dintr-un element
Se trimite un formular HTML
Se tasteaza ceva
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText()">Click aici!</h1>
<script>
function changeText(id) {
id.innerHTML = Ai dat un click!";
}
</script>
</body>
</html>
Bibliografie
www.w3schools.com
V. Avram, D. Rizescu, Technologies for e-Business, Editura
Universitara, Bucuresti, 2015.
B. Oancea, Bazele Informaticii, Editura Economica, 2004.

Curs 8

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 8

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere in JavaScript

Este un limbaj de scripting care furnizeaza dezvoltatorilor

Core DOM defineste un set standard de obiecte pentru

Orice obiect are:

Reprezinta fereastra browserului. Este

Contine informatii depsre browser

Contine informatii despre display

O lista de URL-uri vizitate

Informatii despre URL-ul curent

Obiecte HTML DOM (cateva exemple)

Documentul HTML curent

Un script se introduce intr-o pagina WEB astfel:

document.getElementbyId(demo).innerHTML cod HTML al

Exemplu: <b>acesta este un exemplu</b>

Exemplu un script simplu care aduna doua numere si

<script type="text/javascript" language="javascript">

In Javascript se poate lucra cu obiectul style care are o

Figura utilizata ca background

Culoarea chenarului unui obiect

O instructiune poate fi scrisa pe mai multe linii, la finalul

2. In antetul paginii. Exemplu:

3. In exteriorul paginii. Exemplu:

Fisierul script.js contine:

Metode. Javascript este un limbaj orientat obiect. Toate

Daca este apelata

Operatori de comparare si logici

Mai mare sau egal

Mai mic sau egal

switch (new Date().getDay()) {

Evenimente care pot declansa scripturi (cateva exemple):

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