Sunteți pe pagina 1din 122

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


JAVASCRIPT CARACTERISTICI

 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)
...
JAVASCRIPT CARACTERISTICI

 Mod execuție programe JS

mediu de execuție ( host-environment )

navigator web

“injectarea” de cod Javascript


în documente HTML via element <script>

cod extern referit prin URL vs.


cod direct inclus în pagina web
JAVASCRIPT CARACTERISTICI

 Mod execuție programe JS

mediu de execuție ( host-environment )

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
JAVASCRIPT CARACTERISTICI

 Sintaxa
cuvinte rezervate
JAVASCRIPT CARACTERISTICI

 Sintaxa
alte cuvinte rezervate
JAVASCRIPT CARACTERISTICI

 Tipuri de date

Number

reprezentare în dublă precizie


stocare pe 64 biți
JAVASCRIPT CARACTERISTICI

 Tipuri de date

String

secvențe de caractere Unicode


fiecare caracter ocupă 16 biți
JAVASCRIPT CARACTERISTICI

 Tipuri de date

Boolean

secvențe care se pot evalua


ca fiind true/false
JAVASCRIPT CARACTERISTICI

 Tipuri de date
Object

Function
Array
Date
RegExp

și altele
JAVASCRIPT CARACTERISTICI

 Tipuri de date

Null

semnifică “nici o valoare”


JAVASCRIPT CARACTERISTICI

 Tipuri de date

Undefined

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


JAVASCRIPT CARACTERISTICI

 Tipuri de date

Nu există valori întregi


convertirea unui șir în număr: parseInt()
JAVASCRIPT CARACTERISTICI

 Tipuri de date
Operații avansate cu numere se pot realiza

via obiectul predefinit Math


constante predefinite:
JAVASCRIPT CARACTERISTICI

 Tipuri de date
Operații avansate cu numere se pot realiza

via obiectul predefinit Math


metode:
JAVASCRIPT CARACTERISTICI

 Tipuri de date

“valoarea” NaN (“not a number”)


JAVASCRIPT CARACTERISTICI

 Tipuri de date

valori speciale:
JAVASCRIPT CARACTERISTICI

 Tipuri de date
un caracter reprezintă un șir de lungime 1

șirurile sunt obiecte


JAVASCRIPT CARACTERISTICI

 Tipuri de date
Metode pentru șiruri:
JAVASCRIPT CARACTERISTICI

 Tipuri de date
valorile 0, ,NaN, null, undefined
sunt interpretare ca fiind false
JAVASCRIPT CARACTERISTICI

 Tipuri de date
variabilele se vor declara cu var

variabilele declarate fără valori asignate


se consideră undefined
JAVASCRIPT CARACTERISTICI

 Tipuri de date

dacă nu se folosește var


atunci variabila este considerată globală

de evitat așa ceva !


JAVASCRIPT CARACTERISTICI

 Tipuri de date
Mai nou, există posibilitatea mărginirii

domeniului de vizibilitate (scope) via let


JAVASCRIPT CARACTERISTICI
Operatori

 pentru numere + - * / %

 de asignare += -= *= /= %=

 incrementare & decrementare ++ --

 concatenare de șiruri
JAVASCRIPT CARACTERISTICI

 Operatori
conversia tipurilor se face “din zbor”

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


o convertim pe aceasta la string
JAVASCRIPT CARACTERISTICI
 Operatori
comparații < > <= >= (numere & șiruri)

egalitatea de testează cu == și !=
JAVASCRIPT CARACTERISTICI
 Operatori
aflarea tipului unei expresii – operatorul
typeof
JAVASCRIPT CARACTERISTICI

 Operatori
operatori logici && și ||
JAVASCRIPT CARACTERISTICI

 Operatori

Operatorul de test ?:
JAVASCRIPT CARACTERISTICI
 Control
JAVASCRIPT CARACTERISTICI
 Control
JAVASCRIPT CARACTERISTICI

 Control
JAVASCRIPT CARACTERISTICI
 Obiecte

perechi nume-valoare

numele este desemnat de un șir de caractere


valoare poate fi de orice tip
JAVASCRIPT CARACTERISTICI
 Obiecte

obiect = colecție de proprietăți


având mai multe atribute

proprietățile pot conține alte obiecte


valori primitive sau metode
JAVASCRIPT CARACTERISTICI

 Obiecte
în JavaScript se predefinesc obiectele
JAVASCRIPT CARACTERISTICI

 Obiecte
create prin intermediul operatorului new
JAVASCRIPT CARACTERISTICI

 Obiecte
accesarea proprietăților – operatorul .
JAVASCRIPT CARACTERISTICI

 Obiecte
accesarea proprietăților
JAVASCRIPT CARACTERISTICI

 Obiecte
declarare + asignare
JAVASCRIPT CARACTERISTICI

 Obiecte
accesare
JAVASCRIPT CARACTERISTICI
 Obiecte
iterarea proprietăților – considerate chei
JAVASCRIPT CARACTERISTICI

 Tablouri
Tipuri speciale de obiecte

proprietățile (cheile) sunt numere


nu șiruri de caractere
JAVASCRIPT CARACTERISTICI
 Tablouri
se poate utiliza sintaxa de la obiecte

notație alternativă - preferată


JAVASCRIPT CARACTERISTICI
 Tablouri
tablourile pot avea “găuri” (sparse arrays)

pentru a adăuga elemente putem folosi


JAVASCRIPT CARACTERISTICI

 Tablouri - exemplu
JAVASCRIPT CARACTERISTICI
 Tablouri - exemplu
JAVASCRIPT CARACTERISTICI

 Tablouri
iterări
JAVASCRIPT CARACTERISTICI

 Tablouri

Elementele pot aparține


unor tipuri de date eterogene
JAVASCRIPT CARACTERISTICI

 Tablouri

Metode utile
JAVASCRIPT CARACTERISTICI

 Funcții
definite via function
JAVASCRIPT CARACTERISTICI
 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
JAVASCRIPT CARACTERISTICI
 Funcții
argumentele primite de o funcție se accesează
JAVASCRIPT CARACTERISTICI
 Funcții

Funcțiile sunt tot obiecte


astfel pot fi specificate funcții anonime

în acest sens JavaScript este un limbaj funcțional


JAVASCRIPT CARACTERISTICI
 Funcții
JS FUNCȚII RECURSIVE
JS FUNCȚII RECURSIVE

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

apelarea metodelor definite


JS CARACTERISTICI
 de la funcții la clase
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
 de la funcții la clase
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
JAVASCRIPT CARACTERISTICI
 Prototipuri

pentru a cunoaște tipul unui obiect


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

Una dintre metodele disponibile este


toString()
care poate fi supra-scrisă (over-ride)
JAVASCRIPT CARACTERISTICI
 Extinderea claselor
JAVASCRIPT CARACTERISTICI
 Extinderea claselor

Atenție la pericole !

de exemplu, comportamentul diferit al construcției


for (var proprietate in obiect)
JAVASCRIPT CARACTERISTICI
 Extinderea claselor
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
JAVASCRIPT CARACTERISTICI
 Extinderea claselor
Dorim să calculăm greutatea unui animal
după formula greutate = marime * 33
varianta clasică
JAVASCRIPT CARACTERISTICI
 Extinderea claselor
varianta îmbunătățită – mai generală
JAVASCRIPT CARACTERISTICI
 Î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
JAVASCRIPT CARACTERISTICI

 Î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
JAVASCRIPT CARACTERISTICI
 Closures
declararea imbricată - ca expresii de tip
funcție a funcțiilor anonime = closures
JAVASCRIPT CARACTERISTICI
 Closures

via closures simulăm metodele private


JAVASCRIPT CARACTERISTICI
 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 type="text/javascript">
<!--
instructiuni
//-->
</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 type="text/javascript">
<!--
document.write("<h1>Limbaj JavaScript!</h1>");
//-->
</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>
<script type="text/javascript">
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>
<script type="text/javascript">
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 EVENIMENTE
JAVASCRIPT EVENIMENTE
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

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