6.curs 6 (Java Script)

PROIECTAREA
INTERFEȚELOR
UTILIZATOR
GIANINA GABOR
C6
CUPRINS
JS – istoric, caracteristici, execuție programe
JS – sintaxă, cuvinte rezervate, tipuri de date
JS – operatori, control, ciclare, excepții
JS – obiecte - creare, accesare, tablouri
JS – funcții, funcții recursive, funcții și clase
JS – prototipuri, extindere clase, încapsulare,
evenimente
JS & HTML – inserare cod JavaScript
JS & HTML DOM – ierarhie clase DOM,
utilizare obiecte DOM
JS evenimente
CE ESTE JAVASCRIPT?
JavaScript
un limbaj de programare pentru web
JAVASCRIPT ISTORIC
Inventat de Brendan Eich (1995)
denumit inițial LiveScript
Implementat în premieră în browser-ul

Netscape Navigator
JAVASCRIPT ISTORIC
adaptat de Microsoft - Jscript (1996)
standardizat în 1997 de ECMA

European Computer Manufacturers Association
ECMAScript
JAVASCRIPT CARACTERISTICI
Limbaj de tip script (interpretat)
destinat să manipuleze, să automatizeze

și să integreze facilitățile oferite
de un anumit sistem
nu necesită intrări/ieșiri în mod implicit

 Mod execuție programe JS
mediu de execuție ( host-environment )
navigator web
permite rularea de aplicații web la nivelul unei

platforme /sistem de operare
desktop (ex. Windows 8, Windows 10)

mobil ( Android, iOS, Wp7, WP8)
...
navigator web
“injectarea” de cod Javascript

în documente HTML via element <script>
cod extern referit prin URL vs.

cod direct inclus în pagina web
independent de navigatorul web
platforme de dezvoltare aplicații distribuite – Node.js

servere web & servere de baze de date
componente ale sistemului de operare
aplicații de sine stătătoare
 Sintaxa
cuvinte rezervate
 Sintaxa
alte cuvinte rezervate
 Tipuri de date
Number
reprezentare în dublă precizie

stocare pe 64 biți
 Tipuri de date
String
secvențe de caractere Unicode

fiecare caracter ocupă 16 biți
 Tipuri de date
Boolean
secvențe care se pot evalua

ca fiind true/false
 Tipuri de date
Object
Function
Array
Date
RegExp
și altele
 Tipuri de date
Null
semnifică “nici o valoare”

 Tipuri de date
Undefined
are semnificația “nici o valoare asignată încă”

 Tipuri de date
Nu există valori întregi

convertirea unui șir în număr: parseInt()
 Tipuri de date
Operații avansate cu numere se pot realiza
via obiectul predefinit Math

constante predefinite:
 Tipuri de date
Operații avansate cu numere se pot realiza
via obiectul predefinit Math

metode:
 Tipuri de date
“valoarea” NaN (“not a number”)

 Tipuri de date
valori speciale:
 Tipuri de date
un caracter reprezintă un șir de lungime 1
șirurile sunt obiecte

 Tipuri de date
Metode pentru șiruri:
 Tipuri de date
valorile 0, ,NaN, null, undefined
sunt interpretare ca fiind false
 Tipuri de date
variabilele se vor declara cu var
variabilele declarate fără valori asignate

se consideră undefined
 Tipuri de date
dacă nu se folosește var

atunci variabila este considerată globală
de evitat așa ceva !

 Tipuri de date
Mai nou, există posibilitatea mărginirii
domeniului de vizibilitate (scope) via let

Operatori
 pentru numere + - * / %
 de asignare += -= *= /= %=
 incrementare & decrementare ++ --
 concatenare de șiruri
 Operatori
conversia tipurilor se face “din zbor”
adăugând un șir vid la o expresie

o convertim pe aceasta la string
 Operatori
comparații < > <= >= (numere & șiruri)
egalitatea de testează cu == și !=
 Operatori
aflarea tipului unei expresii – operatorul
typeof
 Operatori
operatori logici && și ||
 Operatori
Operatorul de test ?:
 Control
 Control
 Control
 Obiecte
perechi nume-valoare
numele este desemnat de un șir de caractere

valoare poate fi de orice tip
 Obiecte
obiect = colecție de proprietăți

având mai multe atribute
proprietățile pot conține alte obiecte

valori primitive sau metode
 Obiecte
în JavaScript se predefinesc obiectele
 Obiecte
create prin intermediul operatorului new
 Obiecte
accesarea proprietăților – operatorul .
 Obiecte
accesarea proprietăților
 Obiecte
declarare + asignare
 Obiecte
accesare
 Obiecte
iterarea proprietăților – considerate chei
 Tablouri
Tipuri speciale de obiecte
proprietățile (cheile) sunt numere

nu șiruri de caractere
 Tablouri
se poate utiliza sintaxa de la obiecte
notație alternativă - preferată

 Tablouri
tablourile pot avea “găuri” (sparse arrays)
pentru a adăuga elemente putem folosi

 Tablouri - exemplu
 Tablouri - exemplu
 Tablouri
iterări
 Tablouri
Elementele pot aparține

unor tipuri de date eterogene
 Tablouri
Metode utile
 Funcții
definite via function
 Funcții
dacă nu este întors nimic în mod explicit
valoarea de retur se consideră undefined
parametrii pot lipsi fiind considerați undefined
pot fi transmise mai multe argumente cele în

plus fiind ignorate
 Funcții
argumentele primite de o funcție se accesează
 Funcții
Funcțiile sunt tot obiecte

astfel pot fi specificate funcții anonime
în acest sens JavaScript este un limbaj funcțional

 Funcții
JS FUNCȚII RECURSIVE
precizeaza care e
functia apelanta
 mai nou se pot defini funcții iterator - generator
JS CARACTERISTICI
 de la funcții la clase
JS CARACTERISTICI
o “clasă” referitoare la animale
JS CARACTERISTICI
apelarea metodelor definite

JS CARACTERISTICI
apelând însă o funcție fără notația cu “.”
nu obținem rezultatul scontat
obiectul curent this este setat ca fiind obiectul global

(în browser reprezintă fereastra curentă
în care este redat documentul this  window)
JS CARACTERISTICI
JS CARACTERISTICI
 Funcții și obiecte
operatorul new crează un nou obiect vid
și apelează funcția specificată cu
this setat pe acest obiect
aceste funcții se numesc constructori

trebuie apelate via new
& prin convenție au numele scris cu literă mare
JS CARACTERISTICI
 Funcții și obiecte
metodele pot fi declarate și în exteriorul
constructorului
JS CARACTERISTICI
 Prototipuri
Structura unei clase poate fi extinsă ulterior

folosind proprietatea prototype
dacă se încearcă accesarea unui element inexistent

în cadrul unui obiect dat,
se va verifica lanțul de prototipuri (prototype chain)
JS CARACTERISTICI
 Prototipuri
JS CARACTERISTICI
 Prototipuri
 Prototipuri
pentru a cunoaște tipul unui obiect

(pe baza constructorului și a ierarhiei de prototipuri)
se folosește operatorul instanceof
 Prototipuri
 Extinderea claselor
Adăugarea unei metode se realizează via
prototype
pot fi extinse și obiecte predefinite
Cel mai general prototype este cel al lui
Object
Una dintre metodele disponibile este

toString()
care poate fi supra-scrisă (over-ride)
Atenție la pericole !
de exemplu, comportamentul diferit al construcției

for (var proprietate in obiect)
Deoarece o funcție reprezintă un obiect
poate fi
stocată într-o variabilă
pasată unei alte funcții
întoarsă de o funcție – fiind argument pentru

return
Dorim să calculăm greutatea unui animal
după formula greutate = marime * 33
varianta clasică
varianta îmbunătățită – mai generală
 Încapsulare
Java Script oferă un singur spațiu de nume
la nivel global
 conflicte privind denumirea funcțiilor/variabilelor

specificate de programe diferite concepute
de mai mulți dezvoltatori
 Încapsulare
Nu trebuie afectat spațiul de nume global
păstrându-se codul sursă la nivel privat
Codul poate fi complet încapsulat via funcții

anonime care “păstrează” construcțiile
la nivel privat
 Closures
declararea imbricată - ca expresii de tip
funcție a funcțiilor anonime = closures
 Closures
via closures simulăm metodele private

 Evenimente
 evenimentele sunt acțiuni care pot fi
detectate de JavaScript
 putem configura execuția unor acțiuni la
detectarea evenimentelor
 exemple de evenimente
• s-a efectuat click pe un buton
• s-a terminat de încărcat pagina
DE CE JAVASCRIPT ?
 JS oferă designerilor HTML posibilitatea

de a executa scripturi la nivelul browser-
ului
 JS poate reacționa la evenimente - un
JavaScript poate fi configurat să execute
o anumită operație atunci când se
întâmplă ceva
 JS poate citi și scrie elemente HTML – un
JavaScript poate citi și schimba
conținutul unui element HTML
DE CE JAVASCRIPT ?
 JS poate fi utilizat pentru a valida datele
din formulare înainte de a fi trimise către
server
 JS poate fi utilizat pentru a detecta tipul
browser-ului & în funcție de acesta
putem încărca o pagină sau alta
 JS poate fi utilizat pentru a manipula
cookie-uri – un JS poate fi utilizat pentru
a seta cookie-uri și a obține valoarea
acestora
COD JAVASCRIPT
 Inserare cod Javascript

utilizare tag <script>
<script type="text/javascript">
...
instrucțiuni
...
</script>
unde type stabilește limbajul de scripting utilizat

implicit JavaScript
JAVASCRIPT DISPONIBIL ?
 evitare afișare cod JS de browser vechi

care nu recunoaște <script>

</script>
JAVASCRIPT DISPONIBIL ?
 dezactivare de la nivel de browser a

execuției JS
<noscript>mesaj afisat dacat JavaScript e

dezactivat </noscript>
JAVASCRIPT EXEMPLU
<html>
<head>
<title>JS</title>
</head>
<body>

</script>
<noscript>Limbajul JavaScript nu e disponibil</noscript>
</body>
</html>
UTILIZARE JAVASCRIPT
 în <head> funcţiile JS se definesc aici

pentru a ne asigura că sunt încărcate
înainte de fi utilizate
 în <body> codul JS se va executa în
momentul în care este încărcată
pagina
UTILIZARE JAVASCRIPT
 în fișier extern cu extensia .js care

poate fi inclus în mai multe pagini
HTML
<script type="text/javascript"
src="/cale/numefiser.js"></script>
 JS poate fi utilizat în obiecte de tip

form codul fiind executat când obiectul
este folosit
JAVASCRIPT EXEMPLU
date.js
function displayDate(id) {
document.getElementById(id).value=Date(); }
date.HTML <html>
<head> <title>Afisare data</title>
<script type="text/javascript” src="date.js"></script>
</head>
<body>
<form>
Data: <input type="text" id="data" value="">
<input type="button" onclick="displayDate('data')"
value="Data curenta">
</form>
</body>
</html>
HTML DOM & JAVASCRIPT
 JS permite manipularea unei pagini

HTML prin DOM care descrie structura
paginii HTML
 Operațiuni ce pot fi realizate prin DOM
 accesarea elementelor din cadrul unei
pagini HTML
 schimbarea conținutului unei pagini
HTML
 capturarea evenimentelor și gestionarea
acestora prin event handlers
IERARHIE CLASE DOM
DOCUMENT OBJECT MODEL
 Basic DOM = standard W3C

compatibil cu majoritatea browser-elor
 Elementul de la baza ierahiei DOM =
window
 fiecare variabilă JavaScript este un
câmp al obiectului window
 în DOM toate variabilele încep cu
“window”
<html>
<head>
<title>My Title</title>
HTML DOM EXEMPLU
</head>
<body>
<a href="">My
Link</a>
<h1>My Header</h1>
</body>
</html>
HTML DOM
 fiecare document HTML încărcat într-

o ferastră = window devine obiect de
tip Document
 obiectul Document pune la dispoziție
metode prin care putem accesa toate
elementele HTML din cadrul paginii
CÂMPURI OBIECT WINDOW
 window – ferestra curentă de regula nu se
specifică
 self –referință la fereastra curentă, identică
cu window = window.window
 parent – referința la fereastra/cadrul părinte
al ferestrei/cadrului curent.
 top – referința către fereastra navigatorului
situata în prim plan
 frames[ ] – setul de cadre/frames afișate
care sunt la rândul lor de tip window
 frames.length – numărul de cadre din
ferestra curentă
CÂMPURI OBIECT WINDOW
 document – document HTML afișat în
fereastra curentă
 location – URL document afișat în fereastara
curentă / pentru refresh la pagina curentă
utilizez location.reload()
 navigator – referința la browser-ul ce a
încărcat acea pagină
 navigator.appName – numele browser-ului
 navigator.platform – numele sistemului de
operare
 status – șirul de caractere afișat în bara de
status a browser-ului
OBIECT WINDOW EXEMPLU
<html>
<head>
<title>Proprietatile obiectului window</title>
</head>
<body>
document.write("Location " + window.location
+"<br>");
document.write("Navigator " + navigator.appName +
"<br>");
document.write("Platforma " + navigator.platform +
"<br>");
window.status = "Mesaj in bara de status";
</script>
</body>
</html>
METODE OBIECT WINDOW
 alert(string) – afișare fereastră de dialog

cu șirul specificat si un buton OK
 confirm(string) – afișare ferestră de
confirmare cu șirul specificat și butoane
Cancel & OK care returneaza true pentru
OK și false pentru Cancel
 prompt(string) – afișare ferestră de
confirmare cu șirul specificat un input de
tip text butoane Cancel si OK & returneaza
șirul introdus de utilizator pentru OK
respectiv null pentru Cancel
METODE OBIECT WINDOW
 open(URL) - deschide o fereastră noua în

care se încarcă documentul specificat
prin URL
 close() - închide fereastra /nu un frame
OBIECT WINDOW EXEMPLU
<html>
<head>
<title>Proprietatile obiectului window</title>
</head>
<body>
var url = prompt('Introduceti adresa unei pagini web:');
if (url != null){ var myWindow = open(url);
if (confirm('Doriti inchiderea paginii ' + url + '?')){
myWindow.close(); }
} else
{
alert('Nu ati introdus nimic'); }
</script>
</body>
</html>
OBIECT DOCUMENT
 Toate proprietățile trebuie prefixate de

document !
 anchors[ ] - tablou de obiecte de tip
Anchor ce conțin tag-urile <a name=...>
 forms[ ] - tablou de obiecte de tip Form ce
reprezintă formularele din document; dacă
documentul are un formular = forms[0]
 images[ ] - tablou de obiecte de tip Image
reprezentând imaginile din document;
dacă dorim să schimbăm o anumită
imagine atribuim noul URL proprietății src
OBIECT DOCUMENT
 ! Toate proprietățile trebuie prefixate de
document
 links[ ] - tablou de obiecte de tip Link
objects reprezentand link-urile din pagină;
proprietatea ce reține adresa paginii
referite este href
 bgColor - culoarea de backgroud a paginii
web & poate fi schimbată în orice moment
 title - propietate read-only ce reține titlul
paginii web
 URL - propietate read-only ce reține URL-
ul documentului curent
METODE OBIECT DOCUMENT
 getElementByID(string) - întoarce o
referință la primul element cu id-ul
specificat
 getElementsByName(string) - întoarce un
tablou ce conține toate obiectele cu un
nume specificat
 getElementsByTagName(string) - întoarce
un tablou ce conține toate obiectele cu
tag-ul specificat
PROPRIETĂȚI OBIECT FORM
 elements[ ] - tablou care conține toate

input-urile din formular
 action - URL-ul specificat în atributul
action către care se vor trimite datele din
formular
 method - metoda prin care se trimit
datele din formular / POST sau GET
METODE OBIECT FORM
 submit() - trimite datele din formular

către server
 reset() - resetează conținutul
formularului
JS EVENIMENTE
 Majoritatea elementelor din pagina

HTML “răspund” la acțiuni ale
utilizatorului de tip apăsare taste sau
efectuare de click prin generare de
evenimente
 fiecare tip de element produce
evenimente specifice
 se vor prezenta evenimentele
recunoscute de elemente de tip
formular și cele comune
JS EVENIMENTE
 Pentru gestionarea evenimentelor

trebuie să implementăm niște funcții
speciale numite handler-e pe care le
asociem diverselor tipuri de evenimente
 la apariția evenimentului respectiv
este apelat automat handler-ul
corespunzător
JAVASCRIPT EVENIMENTE
JAVASCRIPT EXEMPLU
<!DOCTYPE html>
<html>
<body>

<h2>Exemplu JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML =
Date()">
Click pentru afisare data si ora !</button>

<p id="demo"></p>

</body>
</html>

EXEMPLE UTILIZARE JS
CONSULTĂ FISIER
PIU_EX_C6
LINK-URI UTILE
 https://www.w3schools.com/js/
http://koala.cs.pub.ro/dk/wiki/module/11-basic-
web-dev/lectie-07
https://web.ceiti.md/lesson.php?id=16#t21
 https://marplo.net/javascript
https://www.javatpoint.com/javascript-tutorial
https://www.geeksforgeeks.org/javascript-
tutorial/
REZUMAT
JS – istoric, caracteristici, execuție programe
JS – sintaxă, cuvinte rezervate, tipuri de date
JS – operatori, control, ciclare, excepții
JS – obiecte - creare, accesare, tablouri
JS – funcții, funcții recursive, funcții și clase
JS – prototipuri, extindere clase, încapsulare,
evenimente
JS & HTML – inserare cod JS
JS & HTML DOM – ierarhie clase DOM,
utilizare obiecte DOM
JS evenimente

6.curs 6 (Java Script)

Î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

6.curs 6 (Java Script)

Încărcat de

Drepturi de autor:

Formate disponibile

PROIECTAREA

Inventat de Brendan Eich (1995)

denumit inițial LiveScript

Implementat în premieră în browser-ul

adaptat de Microsoft - Jscript (1996)

standardizat în 1997 de ECMA

Limbaj de tip script (interpretat)

destinat să manipuleze, să automatizeze

nu necesită intrări/ieșiri în mod implicit

 Mod execuție programe JS

mediu de execuție ( host-environment )

permite rularea de aplicații web la nivelul unei

desktop (ex. Windows 8, Windows 10)

 Mod execuție programe JS

mediu de execuție ( host-environment )

“injectarea” de cod Javascript

cod extern referit prin URL vs.

 Mod execuție programe JS

mediu de execuție ( host-environment )

independent de navigatorul web

platforme de dezvoltare aplicații distribuite – Node.js

reprezentare în dublă precizie

secvențe de caractere Unicode

secvențe care se pot evalua

semnifică “nici o valoare”

are semnificația “nici o valoare asignată încă”

Nu există valori întregi

via obiectul predefinit Math

via obiectul predefinit Math

“valoarea” NaN (“not a number”)

șirurile sunt obiecte

variabilele declarate fără valori asignate

dacă nu se folosește var

de evitat așa ceva !

domeniului de vizibilitate (scope) via let

 incrementare & decrementare ++ --

adăugând un șir vid la o expresie

numele este desemnat de un șir de caractere

obiect = colecție de proprietăți

proprietățile pot conține alte obiecte

proprietățile (cheile) sunt numere

notație alternativă - preferată

pentru a adăuga elemente putem folosi

Elementele pot aparține

parametrii pot lipsi fiind considerați undefined

pot fi transmise mai multe argumente cele în

Funcțiile sunt tot obiecte

în acest sens JavaScript este un limbaj funcțional

apelarea metodelor definite

obiectul curent this este setat ca fiind obiectul global

aceste funcții se numesc constructori

Structura unei clase poate fi extinsă ulterior

dacă se încearcă accesarea unui element inexistent

pentru a cunoaște tipul unui obiect

Una dintre metodele disponibile este

de exemplu, comportamentul diferit al construcției

stocată într-o variabilă

pasată unei alte funcții

întoarsă de o funcție – fiind argument pentru

 conflicte privind denumirea funcțiilor/variabilelor

Codul poate fi complet încapsulat via funcții

via closures simulăm metodele private

 JS oferă designerilor HTML posibilitatea