Suport de Curs Web Design Cls X

DESIGN WEB
-suport de curs-
Craiova, 2012
1
Internet. Servicii Internet
INTERNETUL este cea mai mare retea de informatii si comunicare din lume, o retea globala de
retele de computere interconectate, care permit transmiterea de mesaje electronice catre alti
utilizatori si acces la informatii stocate în computere din lumea întreaga. Este o retea
asemanatoare cu o sosea virtuala, cu o multitudine de benzi pe care circula în ambele directii
diferite tipuri de date: texte, poze, filme, programe. Fiecare calculator functioneaza fie
independent (off-line) fie conectat la Internet (on-line). Orice computer care foloseste Internetul
se numeste host (gazda).
SERVICIILE OFERITE DE INTERNET

a) WWW (World Wide Web) reprezintă totalitatea documentelor disponibile pe Internet sub forma
de fisiere având un format grafic particular, având la baza un limbaj numit HTML (Hyper Text
Mark-up Language). Aceste documente se numesc pagini Web. Paginile Web pot fi legate între
ele prin legaturi numite hyperlinks (hiperlegaturi). Documentele construite cu hyperlinks se
numesc hypertext daca contin text simplu, sau hypermedia daca sunt incluse si sunete, imagini
grafice sau video. Practic, World Wide Web este o parte a retelei Internet, în timp ce Internet
este o retea globala de retele.
b) E-mail – posta electronica pe Internet, reprezintă schimbul de mesaje personale dintre diferiti
utilizatori. Minimul necesar pentru acest serviciu: un computer conectat la Internet, un program
special pentru e-mail, o adresa proprie de e-mail.
c) Chat - conversatie pe Internet – este posibil datorita unor locatii pe Internet numite Chat-
rooms (camere virtuale de conversatie) în care se poate discuta cu alte persoane simultan.
Exemple de programe pentru chat: IRC (Internet Relay Chat), ICQ sau mIRC (mIRC se gaseste
la adresa http://www.mirc.de). Chat-ul se gaseste din ce în ce mai mult în numeroase site-uri
web.
d) Newsgroups (Usenet) - ultimele noutati pe o tema anumita. Aici lumea poarta conversatii la
„nivel înalt”; puteti contribui cu idei la tema în discutie si sa raspundeti la întrebari. Spre
deosebire de un chat, discutiile nu se poarta în timp real. Forumurile functioneaza asincron, în
special la dialogurile ce se poarta intre fusuri orare diferite.
2
e) Telnet – permite conectarea la un calculator (server) aflat la distanta. În acest caz
calculatorul care se conecteaza este un simplu terminal.
f) FTP – File Transfer Protocol – serviciu pentru copierea (transferul) fisierelor de pe un
computer pe un altul, prin intermediul Internetului.
UTILIZABILITATEA, ERGONOMIA SI ACCESIBILITATEA SITURILOR WEB

Mediile web accesibile trebuie să fie şi utilizabile, adică să îmbine armonios caracteristicile
utilizatorului, caracteristicile activităţii şi caracteristicile sistemului (interfaţa utilizator). Altfel
exprimat, utilizabilitatea unei interfeţe utilizator este determinată de combinaţia setărilor făcute
de utilizator, adică ceea ce încearcă acesta să facă, cu modul în care utilizatorul îşi îndeplineşte
sarcina cu sistemul pe care îl foloseşte. Sistemele trebuie să dispun caracteristici ale
utilizabilităţii, cum sunt: uşurinţă în utilizare, învăţare uşoară şi compatibilitate între activitatea
(acţiunea) utilizatorului şi scopurile activităţii. Factorii care influenţează aceste elemente sunt:
tehnologia web, proiectarea orientată utilizator şi legislaţia.
Conţinutul celor mai importante standarde care se referă la accesabilitatea web este produs de
către W3C. Acesta este creat pentru a îmbunatăţi accesabilitatea site-urilor web şi se împarte în 3
categorii distincte de standarde:
 Web Content Accessiblity Guidelines (WCAG) – explică cum se poate face conţinutul
paginilor web accesibil pentru persoanele cu dizabilităţi. Principalul obiectiv este să
promoveze accesabilitatea pentru un public foarte variat.
 User Agent Accessibility Guidelines (UAAG) – oferă indicaţii pentru crearea de agenţi pentru
utilizatori, care sa înlăture barierele accesibilităţii web pentru persoanele cu dizabilităţi
(vizuale, de auz, fizice, cognitive şi neuronale). Pe lângă faptul că ajută dezvoltatorii de
browsere HTML şi de media playere, acest document va fi şi în favoarea dezvoltatorilor de
tehnologii asistive, întrucât explică la ce tipuri de informaţie şi de control se poate aştepta
tehnologia asistivă din partea unui user agent.
 Authoring Tool Accessiblity Guidelines(ATAG) – include instrucţiuni pentru dezvoltatorii de
“authoring tool” pentru web. Instrumentele folosite la crearea acestor tipuri de informaţii
trebuie să fie la rândul lor, accesibile. Acest document face parte dintr-o serie de documente
care fac referinţă la accesabilitate, toate fiind publicate de W3C în Web Accessibility
Initiative(WAI).
3
CSS
Introducere in CSS
CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor
web (de exemplu formatare text, background sau aranjare in pagina, etc.).
Beneficiile sintaxei CSS sunt:
 formatarea este introdusa intr-un singur loc pentru tot documentul
 editarea rapida a etichetelor
 datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului
paginii, implicit incarcarea mai rapida a acesteia
Sintaxa CSS este structurata pe trei nivele:
nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
nivelul 2 este informatia introdusa in blocul HEAD, nivelul 3 este reprezentat de comenzile
aflate in pagini separate, tip externe.
Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practic deoarece
poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot folosi acelasi fisier extern
CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare pagina si totodata
editarea lor intr-un singur loc pentru mai multe fisiere.
Extensia acestor fisiere este .css.
Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:
<link rel="stylesheet" type="text/css" href="fisier_css.css">
Atributele indica urmatoarele: rel - fisierul este tip styleshhet
type - tip text ce contine comenzi CSS
href - fisierul sau adresa fisierului CSS.
Comenzile de nivel 2 sunt cele gazduite oriunde intre perechea de etichete <head> si </head>
conform sintaxei:
<style type="text/css">
... declaratii CSS ...
</style>
4
Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a
ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style.
O declaratie CSS are sintaxa:

nume_proprietate:valoare_proprietate;
Exemplu:
<html>
<head>
<title>CSS Example</title>
p {
color: red;
}
a {
color: blue;
}
</style>
Codul de mai sus face toate paragrafele din pagina rosii si toate link-urile albastre. Fiind o
metoda similara cu cea in-line nu este foarte recomandata.
Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi
CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:
<eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
</eticheta>
Exemplu:
<p style="color: red">text</p>
Codul de mai sus face un anumit paragraf rosu.
5
Elementele class si id
id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa
aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de
browsere numele asociate zonelor nu vor contine caracterul _.
Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML,
plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD
sau intr-un fisier extern.
Exemplu: folosirea elementului id
<html>
<head>
<title>Exemplu 2_1</title>

</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</body>
</html>
Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau
pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-un
fisier extern.
Exemplu: folosirea elementului class
<html>
<head>

</style>
</head>
<body>
<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>
</html>
6
Casete in CSS
In CSS fiecarui element HTML ii este asociata o caseta. Caseta are patru parti:
 marginea (margin) este spatiul exterior chenarului pana la celelalte elemente

 chenarul (border) este o bordura care inconjoara elementul
 completarea (padding) stabileste distanta dintre continut si chenar
 continutul include informatia utila (text, tabele, imagini, formulare, etc.)
Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate
dimensiunile prezentate in continuare.
Proprietatile width si height
Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Aceste
atribute pot fi adaugate sau suprascrise prin comenzi CSS.
Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii
<html>
<head>

</style>
</head>
7
<body>
<img src="margini.gif">
</body>
</html>
Proprietatile padding si margin

Proprietatea padding stabileste distanta dintre obiect si chenar simultan pentru toate
laturile. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-
left sau padding-right.
Proprietatea margin stabileste distanta dintre chenar si celelalte obiecte din pagina
simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top,
margin-bottom, margin-left sau margin-right.
Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau cm
(centimetri).
Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px
fata de latura de sus
<html>
<head>

</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>
Proprietatea border
8
Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea
chenarului este border avand proprietatile asociate width, style si color. Pentru a fi siguri ca
aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declaram
pentru border cel putin width si style.
 border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt

(puncte), cm (centimetri) sau in (inci).
 border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove,
ridge, inset si outset.
 border-color stabileste culoarea chenarului si poate fi exprimata prin valoare
hexazecimala sau in cuvinte.
Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-

color
<html>
<head>

</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted; border-
color: red;</div><br>
<div class="clasa2">border-width: 3px; border-style: dashed; border-
color: blue;</div><br>
<div class="clasa3">border-width: 2px; border-style: solid; border-
color: green;</div><br>
<div class="clasa4">border-width: 3px; border-style: double; border-
color: black;</div><br>
<div class="clasa5">border-width: 2px; border-style: groove; border-
color: silver;</div><br>
9
<div class="clasa6">border-width: 3px; border-style: ridge; border-
color: lime;</div><br>
<div class="clasa7">border-width: 2px; border-style: inset; border-
color: yellow;</div><br>
<div class="clasa8">border-width: 3px; border-style: outset; border-
color: aqua;</div><br>
<div class="clasa9">border-width: 2px; border-style: hidden; border-
color: olive;</div>
</body>
</html>
10
Stiluri pentru text
Proprietatea font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le
recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si
tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de
exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele
duble pentru ca browserul sa le interpreteze impreuna.
Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua
fonturi din lista, folosindu-l pe al treilea
<html>
<head>

</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>
Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML
<html>
<head>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul
Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul
Arial</p>
</body>
</html>
Proprietatea font-size
11
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt),
keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.
Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli
<html>
<head>

</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>
Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc
dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.
CSS keyword numar FONT size
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7
Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din
cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi
vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.
Proprietatea font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si
italic.

</style>
12
Proprietatea font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de
la 100 la 900 sau BOLD, BOLDER, LIGHTER.

</style>
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite
de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus aplicat etichetei p
<html>
<head>

</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>
Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left,
right si center ca si eticheta align din HTML.
In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:

</style>
Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului
13
<html>
<head>

</style>
</head>
<body>
<div class="pecentru"><img src="poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>
vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua
valorile: top, middle si bottom.
In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale tabelului

</style>
float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In
functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.
Exemplu: cream clasa auto si o aplicam inaginii
<html>
<head>

</style>
</head>
<body>
<img src="poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei
"auto".
</body>
</html>
Tabulare
14
Proprietatea text-indent este folosit pentru alinierea textului in interior avand valori exprimate
in inci (in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior

</style>
Decorare
Proprietatea text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea
valorile underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>

</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>
Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>

</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>
15
Stiluri pentru legaturi
In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate
in interiorul etichetei BODY. Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa
CSS.
Exemplu
<html>
<head>

</style>
</head>
<body>
Text normal
<a href="exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>
a defineste stilul general pentru legatura

a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii
Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.
Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p
<html>
<head>
16

</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>
17
Stiluri pentru liste
Proprietatea list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in
zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nu
permite asocierea comenzilor CSS decat pentru eticheta li.
Sintaxa este:

</style>
valoarea poate fi:
valoare disc
disc disc
circle cerc
square patrat
decimal numere intregi
lower-roman numere romane, caractere mici (i, ii, iii, iv)
upper-roman numere romane, caractere mari (I, II, III, IV)
upper-alpha litere mari (A, B, C, D)
lower-alpha litere mici (a, b, c, d)
none nimic
Exemplu: lista ordonata folosind marcaje cu litere mici
<html>
<head>

</style>
</head>
<body>
Necesar materiale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
18
</body>
</html>
Proprietatea list-style-image
In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin
comansa CSS list-style-image. Imaginile sunt introduse prin adresa url().
Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif
<html>
<head>

</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>
19
Pozitionarea in CSS
Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata
obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile
LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).
Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate
fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau
imagine.
Exemplu: am aplicat pozitionarea absoluta etichetei h4
<html>
<head>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>
Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare
si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si
top.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ
<html>
<head>

</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate
obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>
20
Proprietatea Display
Exista elemente html care sunt delimitate de celelalte elemente sau de elemente de acelasi tip
printr-un salt in linie (enter, line break, br). Spunem ca aceste elemente sunt afisate in block.
- <h1>, <h2>, <h3>, etc
- <div> <p>, <li>

Deasemenea exista elemente care sunt afisate in pe acelasi rand fara sa influienteze cursul pagini.
-<span>, <a>
Spunem ca aceste elemente sunt afisate inline.
Cu ajutorul CSS afisarea elementelor poate fi schimbata si anume putem afisa elemente precum
div paragraf etc inline si elemente precum linkuri span etc in block.
div {display:inline;}
Exemplul de mai sus va afisa toate div-urile pe aceasi linie.Se foloseste in general cu clase sau id
in css pentru a personaliza doar div-urile care se vor personalizate. Ex: bara de meniuri orizontala
div.bara_orizontala {display:inline;}
Mai jos am exemplificat un link afisat in block, introducand un salt in linie inainte si dupa el.
a {display:block;}
Se foloseste in general cu clase sau id in css pentru a personaliza doar link-urile care se vor
personalizate. Ex: sidebar.
a.sidebar_links {display:block;}
Vom folosi proprietatea display in css pentru a ascunde un element in html si proprietatea
visibility pentrs a nu afisa acelasi element html.
Intrebarea logica ar fi: Si care este diferenta?
p.ascuns {visibility:hidden;}
visibility:hidden; ascunde paragraful pastrand insa spatiul rezervat in cursul paginii. Celelalte
elemente se vor comporta ca si cand paragraful ar fi afisat pe pagina chiar daca acesta nu este
vizibil.
p.ascuns {display:none;}
display:none; ascunde paragraful fara sa pastreze spatiul rezervat acestuia in pagina. Celelalte
elemente vor ocupa spatiul rezervat acestuia.
21
Crearea unui meniu de navigare folosind o lista structurala
Pentru site-urile noi ar fi bine sa eviti folosirea tabelurilor pentru layout sau foloseste-le numai
acolo unde este absolut necesar. Eliminand elementele tabelare vei vedea ca pagina ta va contine
mult mai putin markup. Un sistem de navigare este pur si simlu o lista cu locuri pe care
utilizatorii le viziteaza pe site, deci o lista neordonata este modalitatea ideala de a marca
navigarea ta.
Sistemul de navigare din imaginea de mai jos este structurat ca o lista si formatat (styled)
folosind CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav1.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
22
</div>
</body>
</html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
Pentru a crea un sistem de navigare bazat pe o lista neordonata, mai intai creaza lista, plasand
fiecare link de legatura/navigare inauntrul unui element <li>.
<ul>
</ul>
Apoi, incadreaza textul cu <div> si cu un ID corespunzator (element de identificare, denumire).
23
<div id="navigation">
<ul>
</ul>
</div>
Aceasta marcare nu arata extraordinar daca lasam formatarea implicita a browserului.
Primul lucru care trebuie facut este sa stilizam incadrarea care contine legaturile de navigare, in
acest caz:
#navigation: #navigation {
width: 200px;
}
Am oferit lui #navigation o latime. Daca acest sistem de navigare ar face parte dintr-o pagina de
layout CSS, am adauga informatii de pozitionare si la acest ID. Acum stilizam lista:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
Regula de mai sus scoate bulinele de listare si spatiul de la margine pe care browserul il aplica
implicit atunci cand afiseaza o lista.
24
Pasul urmator este sa stilizam elementele li din #navigation, pentru a le pune o margine
inferioara:
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
In final stilizam linkul in sine:
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
Cea mai mare parte din munca este realizata aici, la crearea regulilor CSS pentru a aduga margini
de stanga si dreapta, scoaterea sublinierii etc. Prima declarare de proprietate in aceasta regula
seteaza proprietatea display pe block. Aceasta face linkul sa afiseze ca element bloc, adica zona
fiecarui buton de navigare sa fie activa cand muti cursorul peste ea; acelasi efect il vezi daca
folosesti o imagine pentru navigare.
25
JavaScript
Notiuni introductive
Pentru a insera JavaScript într-un document HTML deja existent, este necesara introducerea în fisier a
etichetei <script> si </script>. Aceasta eticheta necesita aributul "type", sau atributul "language" (acesta
din urma este depreciat in standardul XHTML) care va specifica browser-ului limbajul folosit pentru
interpretarea codului inclus.
In interiorul etichetei <script> ... </script> vom scrie codul nostru.
Pentru scrierea si executarea programelor JavaScript avem nevoie de un editor simplu de texte (cum ar fi
Notepad pentru Windows sau emacs pentru Unix) si un browser (ex. Mozilla Firefox, Internet Explorer).
- Atributul "language" (care insa nu este folosit in XHTML, ci doar in paginile web standard HTML) – va
avea urmatoarea sintaxa: language="JavaScript", aceasta specifica browser-ului ce limbaj este
folosit
- Atributul "type" – inlocuitorul lui "language" – va avea urmatoarea sintaxa:
type="text/javascript", aceasta spune browser-ului ca scriptul este scris in format plaintext.
Putem, de asemenea, sa introducem instructiunile JavaScript intr-un alt fisier, extern, care va avea
extensia ".js", pentru editarea acestui fisier este nevoie la fel de un editor simplu de texte. Avantajul fiind
ca putem folosi acelasi cod in mai multe pagini HTML si in cazul necesitatii unei modificari in codul
JavaScript, modificam doar datele dintr-un singur fisier (cel cu extensia ".js"), dezavantajul acestei
metode este faptul ca intr-un fisier extern ".js" nu putem folosi etichete HTML, ci numi instructiuni
JavaScript.
In cazul in care codul JavaScript se afla intr-un fisier extern, eticheta <script> din pagina HTML va trebui
sa contina atributul "src" a carui valoare determina locatia fisierului in care se afla codul JavaScript.
In fisierul extern cu extensia "js" nu trebuie sa scriem eticheta "<script>", scriem direct instructiunile
scriptului.
Iata un exemplu de script JavaScript scris in interiorul unei pagini web (XHTML):
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Cod JavaScript</title>
26
</head>
<body>
<script type="text/javascript">
document.write("Textul care va fi afisat pe ecran");
</script>
</body>
</html>
Si pt. HTML:
<html>
<head>
</head>
<body>
document.write("Textul care va fi afisat pe ecran");
</script>
</body>
</html>
Comanda document.write este folosita pentru a tipari ceva in pagina.
Rezultatul acestui script, afisat in pagina web (XHTML si HTML) va fi urmatorul:
Textul care va fi afisat pe ecran
Daca dorim sa incarcam scriptul dintr-un fisier extern (de exemplu "cod.js"), codul nostru in
documentul HTML va arata astfel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script src="cod.js" type="text/javascript"> </script>
</body>
</html>
- Iar fisierul "cod.js" va contine :
27
document.write("Textul care va fi afisat pe ecran")
Rezultatul afisat in pagina web va fi acelasi ca-n exemplele anterioare.
Folosirea variabilelor
Intr-un script (sau program) se folosesc date constante dar si date variabile care isi schimba
valorile in timpul executei programului. Aceste date se numesc variabile.
 Variabila = numele unei locatii din memoria calculatorului, folosita pentru a memora date.
Modul cel mai simplu de a folosi si a face referire la o astfel de data variabila este de a o denumi. Numele
variabilei permite accesul la valoarea ei precum si schimbarea valorii daca este necesar.
Se poate crea o variabila si sa-i atribuim o valoare prin doua metode:
- Cu declaratia var
 var nume = valoare
- Fara declaratia var
 nume = valoare
- Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe care i-o atribuim.
Tipuri de variabile - Spre deosebire de alte limbaje (cum sunt Pascal sau C), JavaScript nu are tipuri fixe
de date, adica permite schimbarea tipului unei variabile in cadrul scriptului, acesta poate recunoaste
singur cand datele sunt de tip "sir", numerice sau alt tip.
De exemplu:
 var x = "xyz";
x = 8;
- Observati ca valorile de tip 'sir' (formate din litere) se scriu intre ghilimele, iar cele 'numerice' pot fi
scrise si fara ghilimele.
Durata de viata a unei variabile - O variabila scrisa in cadrul unei functii este o variabila locala, valoarea
ei fiind recunoscuta numai in cadrul acelei functii, cand se iese din functie variabila este distrusa. Astfel, o
alta functie poate declara si folosi o variabila cu acelasi nume, JS (Java Script) trateaza cele doua variabile
28
ca fiind diferite (functiile si lucrul cu acesta vor fi explicate in lectiile urmatoare).
Se pot declara si variabile, in afara oricarei functii, care sa fie folosite de toate functiile, acestea se
numesc variabile globale si sunt valabile de la incarcarea paginii web pana la inchidere, in orice script JS.
Operatorii
Cu ajutorul operatorilor manipulam, combinam si modificam datele dintr-un prrogram sau script.
Acestia sunt de mai multe feluri, in aceasta lectie sunt prezentati tipurile de operatori folositi in
JavaScript.
Operatori aritmetici
Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu numere, acestia
efectueaza operatiile aritmetice cunoscute: adunare (+), scadere (-), inmultire (*), impartirere
(/). Pe langa acesti patru operatori, in programare sunt folositi inca trei operatori aritmetici :
 Modulul (%) - acesta determina restul impartirii a doua numere

Eexemplu:
o 8%3 da rezultatul 2
10%2 da rezultatul 0
 Incrementare (++) - Acest operator creste valoarea cu o unitate, este des folosit in programare,
in lucrul cu variabile.
De exemplu, daca avem variabila 'i', putem folosi operatorul de incrementare astfel: i++ care este
similar cu i = i+1.
Exemplu:
ox = 7;
x++;
rezultatul va fi x = 8
 Decrementare (--) - Acest operator scade valoarea cu o unitate.
De exemplu, daca avem variabila 'i', putem folosi operatorul de decrementare astfel: i-- care este
similar cu i = i-1.
Exemplu:
o x = 7;
x--;
rezultatul va fi x = 6
29
 Cei doi operatori de incrementare (++) respectiv decrementare (--) pot fi folositi atat ca prefix (in
fata variabilei) ++i respectiv --i cat si ca sufix (dupa numele variabilei) i++ respectiv i--. Valoarea
obtinuta este aceeasi, insa ordinea operatiei si rezultatul atribuirii valorii sunt diferite.
 Folosirea operatorului ca prefix determina in primul rand modificarea valorii si apoi are loc
atribuirea acesteia.
 In cazul folosirii operatorului ca sufix, intai este atribuita valoarea variabilei si apoi variabila este
incrementata (sau decrementata).
Operatori de atribuire
In cazul acestui operator JavaScript actioneaza mereu de la dreapta la stanga ; se evalueaza

operandul din dreapta iar valoarea se atribuie variabilei din stanga semnului "=" .
Mai jos puteti vedea un tabel din care puteti intelege modul de lucru si actiune al operatorilor de
atribuire:
Operator Exemple Este acelasi cu

= x=y x=y
+= x += y x = x+y
-= x -= y x = x-y
*= x *= y x = x*y
/= x /= y x = x/y
%= x %= y x = x%y
Operatori de comparare
Expresiile care folosesc acesti operatori pun o intrebare despre doua valori pe care le compara.
Raspunsul poate fi TRUE sau FALSE.
Un operator de comparatie des folosit este operatorul de identitate (egalitate), reprezentat prin
doua semne egal "==". Este diferit de simplul "=", operatorul '==' compara doua valori
determinand daca acestea sunt identice, adica egale atat ca valoare cat si ca tip.
Operatori de comparatie sunt prezentati in tabelul urmator:
Operator Semnificatie Exemple

== Egal 3 == 8 returneaza FALSE
!= Diferit 3 != 8 returneaza TRUE
> Mai mare 3 > 8 returneaza FALSE
< Mai mic 3 < 8 returneaza TRUE
>= Mai mare sau egal 3 >= 8 returneaza FALSE
<= Mai mic sau egal 3 <= 8 returneaza TRUE
30
Operatori logici (booleeni)
Similar cu operatori de comparatie, operatorii logici compara doua expresii si returneaza TRUE
sau FALSE.
Acesti operatori sunt:
 && - si (and) - Compara doua expresii si returneaza TRUE daca amandoua sunt adevarate, in caz
contrar returneaza FALSE.
Eexemplu:
o x=5
y=8
x<7 && y>3
(returneaza TRUE)
 || - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una din ele este
adevarata, in caz contrar returneaza FALSE.
Eexemplu:
o x=5
y=8
x>7 || y<3
(returneaza FALSE)
 ! - not - este operator unar, foloseste o singura expresie si returneaza TRUE daca expresia este
falsa, daca expresia este adevarata returneaza FALSE.
Eexemplu:
o x=5
y=8
!(x==y)
(returneaza TRUE deoarece 'x' nu este egal cu'y')
Operator pentru string (sir)
Un string este in general un sir de caractere, intre ghilimele.

Pentru a alatura (concatena) doua variabile string impreuna se foloseste operatorul de
concatenare a sirurilor +
Exemplu:
 t1 = "Astazi este o zi"

t2 = "frumoasa"
t3 = t1+t2
(Variabila 't3' va contine sirul "Astazi este o zifrumoasa")
Observati ca nu este saptiu intre 'zi' si 'frumoasa'. Pentru a adauga spatiu intre siruri, sunt doua
modalitati:
 1 - Adaugati spatiu intre variabilele string

Exemplu:
o t1 = "Astazi este o zi"
t2 = "frumoasa"
31
t3 = t1+" "+t2
(Variabila 't3' va contine sirul "Astazi este o zi frumoasa")
 2 - Adaugati spatiu in una din variabilele string
Exemplu:
o t1 = "Astazi este o zi"
t2 = " frumoasa"
t3 = t1+t2
(Variabila 't3' va contine sirul "Astazi este o zi frumoasa")
Operatorul typeof
Acest operator returneaza tipul de date continut la momentul respectiv de operandul sau. Este util
in special pentru a determina daca o variabila a fost definita cu un anumit tip de date.
Studiind tabelul urmator puteti intelege modul de operare al acestuiai operator:
Operator Descriere
typeof parseFloat returneaza sirul 'function'
typeof 33 returneaza sirul 'number'
typeof "un anume text" returneaza sirul 'string'
typeof true returneaza sirul 'boolean'
typeof window returneaza sirul 'object'
Operatori pentru functii
Functiile vor fi explicate in una din lectiile urmatoare, totusi este util sa fiti familiarizati cu doi
operatori:
1. Primul se numeste operator de apelare si este reprezentat printr-o pereche de paranteze

rotunde () care urmeaza intodeauna dupa numele functiei, astfel o functie va fi declarata astfel:
function nume_functie() {
// Corpul functiei
}
Apoi operatorul de apelare este folosit din nou cand functia este apelata in interiorul scriptului:
 nume_functie()
Parantezele aratand ca este folosita o functie.
Al doilea operator pentru functii este virgula "," - care se foloseste pentru a separa mai multe argumente
pe care le primeste o functie.
32
Argumentele sunt scrise intodeauna in interiorul parantezelor rotunde si sunt separate prin virgula.
Astfel o functie cu doua argumente ar arata:
function nume_functie(arg1, arg2) {
// Corpul functiei
}
Operatori pentru structuri de date (obiecte)
Acesti operatori sunt necesari atunci cand lucram cu structuri de date, sau obiecte.
In JavaScript obiectele sunt folosite la gruparea informatiilor pentru a servi unui scop specific.
1. Un operator care ar trebui cunoscut bine este punctul "." , numit operator pentru membrul
unei structuri. Acesta ne permite sa ne referim la un membru ( variabila ,functie sau obiect ) care
apartine obiectului specificat.
Sintaxa este urmatoarea :
 numeObiect.nume_Variabila
numeObiect.nume_Functie()
numeObiect.alt_Obiect
Aceasta modalitate de referire la o informatie, numita notatie cu punct, returneaza valoarea

variabilei, functiei sau obiectului aflat cel mai in dreapta.
2. Operatorul pentru element din matrice, numit si operator indice al tabloului, se foloseste
pentru a accesa o data specifica, o cheie, dintr-un tablou de date. Acesta este simbolizat printr-o
pereche de paranteze drepte [ ] , si permite sa ne referim la orice membru al unui tablou.
Tablourile sunt obiecte JavaScript si vor fi detaliate in lectiile urmatoare.
Sintaxa de folosire a operatorului pentru tablou este :
 nume_tablou[cheie]
33
Operatorul conditional "?"
JavaScript contine si un operator conditional ? : care atribuie o valoare unei variabile pe baza
unei conditii.
Sintaxa de folosire a acestui operator este urmatoarea:
 variabila = (conditie)?val1:val2
Modul de operare este urmatorul - se evalueaza conditia, daca este adevarata atunci variabila ia
valoarea 'val1', altfel ia valoarea 'val2'.
Iata un exemplu:
vizitator = "barbat"
mesaj = (vizitator=="barbat")?"Stimate domn":"Stimata doamna"
document.write(mesaj) </script>
Daca variabila "vizitator" este egala cu 'barbat', variabila "mesaj" primeste valoarea 'Stimate domn", altfel
primeste valoarea "Stimata doamna". Iar instructiunea de afisare "document.write()" va afisa valoarea lui
"mesaj".
10. Precedenta operatorilor

Cand in expresii se folosesc mai multi operatori, JavaScript tine cont de precedenta (importanta)
predefinita a fiecarui operator. Precum in aritmetica, intr-o ecuatie cu adunare si inmultire (2+3*4
), daca nu sunt paranteze, se executa intai inmultirea, aceasta avand precedenta superioara fata de
adunare. La fel e si cu operatorii in programare.
Daca apar mai multi operatori cu aceeasi precedenta, JavaScript ii va evalua de la stanga spre
dreapta.
In tabelul urmator sunt prezentati operatorii in ordinea precedentei lor, unde operatorii din partea
de sus a tabelului au precedenta maxima:
Operator Nume operator
() [] . de apelare, pt. structuri de date
! ++ -- de negare, incrementare
* / % de inmultire, impartire
+ - de adunare, scadere
< <= > >= de comparatie
== != de egalitate
&& SI logic
|| SAU logic
34
Operator Nume operator
?: conditionnal
= += -= *= /= %= de atribuire
, virgula
Instructiuni conditionale
Partea cea mai interesanta, dar si dificila, in scrierea unui script este proectarea acestuia astfel
incat sa ia decizii in timp ce este executat.
Cu ajutorul instructiunilor conditionale putem face programele sa testeze diferite conditii dupa
care sa decida modul de executie a datelor.
In Java Script sunt urmatoarele instructiuni conditionale:
 if - executa comenzile dorite cand o conditie este adevarata.

 if ... else - executa anumite comenzi cand o conditie este adevarata si alte comenzi cand aceasta
este falsa.
 switch - selecteaza care comanda va fi executata.
1. Instructiunea "if"
Se poate spune ca instructiunea "if" este una din cele mai des folosite.
Forma generala a acestei instructiuni este urmatoarea :
 if (conditie) {
codul care va fi executat daca este adevarata conditia
}
- Unde 'conditie' poate fi orice expresie logica.
Daca rezultatul conditiei este TRUE se executa codul dintre acolade, in caz contrar, cand conditia
returneaza FALSE, se trece peste acest cod.
Iata un exemplu practic. Urmatorul script afiseaza "Buna ziua" daca ora este mai mare decat 11.
Se foloseste obiectul Date care determina data curenta (va fi explicat mai amanuntit in alta lectie).

</script>
- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'time' preia numai ora din
variabila 'd'. Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat
executa comanda dintre acolade, care afiseaza mesajul.
Daca ora este mai mica decat 11 scriptul nu va executa instructiunea dintre acolade.
2. Instructiunea "if ... else"
In exemplul anterior am vazut ca este afisat "Buna ziua!" daca ora > 11 iar in caz contrar nu se
intampla nimic.
Folosind instructiunea "if ... else" putem stabili comenzi care sa fie executate cand conditia
instructiunii "if" este FALSE.
Forma generala a instructiuni "if ... else" este urmatoarea :
 if (conditie) {
codul care va fi executat daca este adevarata conditia
}
else {
codul care va fi executat daca conditia este falsa
}
- Unde 'conditie' poate fi orice expresie logica.

Daca rezultatul conditiei este TRUE se executa codul dintre primele acoladele, care apartin de
"if", in caz contrar, cand conditia returneaza FALSE, sunt executate comenzile din a doua grupa
de acolade (dupa else).
Iata din nou exemplul de mai sus, de asta data folosindu-se instructiunea "if ... else".
Scriptul afiseaza "Buna ziua!" daca ora este mai mare decat 11, in caz contrar afiseaza 'Este ora
...'.

</script>
- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'time' preia ora din variabila 'd'.
Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat executa
comanda dintre primele acolade.
Daca ora este mai mica decat 11 scriptul va executa comanda din grupul de acolade determinat de
"else". (Observati folosirea operatorului de concatenare +).
3. Instructiunea switch
Aceasta instructiune e folosita pentru a compara o valoare cu altele dintr-o lista.

Sintaxa generala a instructiuni "switch" este urmatoarea.
 switch (expresie) {
case valoare1:
cod executat daca expresie = valoare1
break
case valoare2:
break
case valoare3:
break
default :
cod executat daca expresie e diferit de valoare1, valoare2 sau valoare3
}
37
- Prima data este evaluata expresia scrisa intre paranteze rotunde, apoi valoarea expresiei este comparata
pe rand cu fiecare valoare determinata de "case". Daca se gaseste o identitate se executa codul asociat
acelui "case". Apoi se iese din instructiunea "switch".
Daca, parcurgand fiecare "case", nu se gaseste o egalitate, se executa codul de dupa "default".
Prin folosirea lui "break" se opreste parcurgerea corpului instructiunii atunci cand s-a gasit o valoare egala
cu 'expresie' si se iese din "switch".
Iata un exemplu de script care afiseaza un mesaj in functie de zilele saptamanii:

</script>
- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'ziua' care preia numarul zilei din
variabila 'd' (duminica = 0, luni = 1, ...). Se intra in corpul instructiunii "switch" si se verifica, pe rand,
fiecare valoare "case" cu valoarea variabilei 'ziua', cand se gaseste egalitatea se executa comanda asociata
acelui 'case' si se iese din "switch".
Daca nici una din valorile 'case' nu este egala cu valoarea variabilei 'ziua', se va executa comanda de dupa
'default', care afiseaza mesajul: "Mai e pana sambata".
Iata inca un exemplu cu "case", de data aceasta foloseste valori de tip sir (string).

</script>
Instructiuni ciclice (repetitive)
Instructiunile repetitive se folosesc atunci cand se doreste efectuarea unei comenzi de mai multe
ori.
In java script putem folosi urmatoarele instructiuni ciclice:
 for - la fel ca si in alte limbaje de programare, executa codul de un numar specificat de ori
for ... in - executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect
while - repeta codul atata timp cat o anumita conditie este adevarata
do ... while - intai executa o data codul apoi il repeta atata timp cat o anumita conditie este
adevarata
1. Instructiunea for
Aceasta are urmatoarea forma generala:
for (incepere_nr; conditie_nr; ciclu) {

cod care va fi executat
}
- Unde "incepe_nr" e folosit la 'initializare' pentru a da o valoarea initiala numarului de repetari, de multe
ori prin aceasta se declara o variabila care poate fi folosita ca un contor al ciclului.
"conditie_nr" verifica daca numarul de cicluri se incadreaza intr-o anumita valoare si daca rezultatul este
39
TRUE se executa inca o data codul dintre acolade.
"ciclu incrementeaza sau decrementeaza valoarea la care a ajuns contoarul ciclului, apoi aceasta valoare
este verificata din nou de "conditie_nr" pana cand rezultatul este FALSE.
Aceste trei expresii dintre parantezele rotunde sunt optionale, dar daca este omisa una din ele, caracterul
punct si virgula ";" trebuie sa ramana pentru ca fiecare expresie sa ramana la locul ei.
In interiorul instructiunii for (ca si la instructiunea "if"), intre acolade, pot fi introduse si alte instructiuni
"for", sau alte instructiuni conditionale, acest lucru se numeste imbricarea instructiunilor.
Iata un exemplu simplu de utilizare a instructiunii "for":

</script>
- Se atribue lui 'x' valoarea 1, se verifica conditia (x<5) care este adevarata si se executa corpul
instructiunii (dintre acolade, care afiseaza "x este 1) apoi se incrementeaza valoarea lui 'x' cu o unitate
(x++), acum 'x are valoarea 2. Se verifica din nou conditia (x<5) si fiindca este adevarata, se executa iar
corpul instructiunii apoi se incrementeaza valoarea lui 'x', ..., si tot asa pana cand 'x' va ajunge sa aibe
valoarea 5 care la verificarea conditiei returneaza FALSE, moment in care se termina executia
instructiunii "for".
Acest script va afisa urmatorul rezultat:
x este 1
x este 2
x este 3
x este 4
2. Instructiunea for ... in
Pentru utilizarea acestei instructiuni trebuie sa aveti cunostinte despre obiectele JavaScript asa ca
va trebui sa reveniti asupra ei dupa ce le veti invata - in lectiile urmatoare .
Cu "for ... in" se executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect.
Acest ciclul se poate executa cu orice obiect JavaScript, indiferent daca are sau nu proprietati.
40
Pentru fiecare proprietate se executa cate o iteratie, daca obiectul nu are nici o proprietate nu se
desfasoara nici un ciclu.
Instructiunea "for ... in" are urmatoarea forma generala:
for (nume_proprietate in obiect) {

instructiuni
}
- Unde "nume_ proprietate" este un literal de tip sir generat de JavaScript. Pentru fiecare
repetare a executiei instructiunii, lui "nume_proprietate" i-se atribuie urmatorul nume de
proprietate continut in "obiect", pana cand sunt folosite toate.
3. Instructiunea while
Aceasta instructiune repeta un cod atata timp cat conditia este adevarata.
Comanda actioneaza similar cu instructiunea "for", dar nu include functiile de initializare si
incrementare a variabilelor.
Instructiunea "while" are urmatoarea forma generala:
while (conditie) {
codul care va fi executat
}
Iata exemplu anterior, de la instructiunea "for", aici este scris in varianta instructiunii "while":

</script>
41
- Prima data am declarat variabila 'x' dandu-i valoarea 1.
Instructiunea "while" verifica conditia (aici x<5) care este adevarata si permite executarea
corpului functiei dintre acolade care afiseaza "x este 1" si incrementeaza valoarea lui 'x' cu o
unitate. Acum 'x' are valoarea 2, se verifica conditia, care este adevarata si se executa iar codul
dintre acolade, ..., si tot asa pana cand la verificarea conditiei rezultatul este FALSE, moment in
care se termina rularea instructiunii "while".
x este 1
x este 2
x este 3
x este 4
4. Instructiunea do ... while
Forma generala a acestei instructiuni este:
do {
}
while (conditie)
Asemanatoare in mare parte cu instructiunea "while", instructiunea "do ... while" intai executa codul din
corpul instructiunii, dupa care verifica conditia, apoi il repeta pana cant conditia returnbeaza FALSE.
Astfel corpul functiei este executat cel putin o data, chiar daca conditia nu este adevarata.
Iata un exemplu din care puteti intelege mai bine aceasta instructiune:

</script>
- Aceasta functie afiseaza "x este 8".
Observati ca desi conditia este falsa (x<5), codul dintre acolade este totusi executat o singura data.
42
Instructiunile break si continue
Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana cand conditia este
FALSE. Aceasta excutie poate fi schimbata cu ajutorul instructiunilor break si continue, care
dau posibilitatea intreruperii ciclului sau iesirea din acesta inainte de a se ajunge la sfarsit (la
ultima acolada).
 break - intrerupe definitiv executarea ciclului.

Iata un exemplu din care puteti intelege modul de lucru a lui break:
for (x=1; x<10; x++) {
document.write("<br /> X este "+x);
if (x==3) {
break;
}
}
</script>
X este 1
X este 2
X este 3
Fereastra Alert
Probabil ati intalnit pana acum, de mai multe ori exemple cu "Alert".
Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a sintaxei acestuia.
Crearea ferestrelor alert se face cu sintaxa:
 window.alert("mesaj")
- Unde "mesaj" este textul care va apare in fereastra Alert.

Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit".

</script>
In browser va apare o fereastra ca in imaginea urmatoare
43
Fereastra Confirm
Fereastra de confirmare se creaza cu sintaxa:
 window.confirm("intrebare")
In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK" si "Cancel".

Aceasta fereastra este folosita pentru a fi executata o comanda cand este apasat butonul "OK"
(returneaza TRUE) si alta comanda cand este apasat butonul "Cancel" (returneaza FALSE)
Urmatorul exemplu deschide o fereastra "Confirm" in care apare intrebarea "Rezultatul lui 0+0
este 0?". Daca este apasat butonul "OK" apare o fereastra Alert cu mesajul "Corect", iar daca este
apasat butonul "Cancel" apare o fereastra Alert cu mesajul "Incorect"

</script>
In browser va apare o fereastra ca in imaginea urmatoare
44
Functii
Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program.
O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate usor si de
mai multe ori prin apelarea functiei care le contine.
Daca un program necesita multe linii de cod, folosind functiile putem imparti codul in parti mai
mici pe care le putem utiliza separat acolo unde este nevoie.
Pot fi doua feluri de functii:
 predefinite - cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", ...

 Create de programator
o - care returneaza o valoare
o - care nu returneaza o valoare
1. Crearea (definirea) functiilor
O functie se defineste la inceputul fisierului, in sectiunea head si poate fi folosita in cadrul

paginii prin apelarea ei. Scriptul care contine definirea unei functii se adauga in sectiunea "head"
pentru a fi siguri ca aceasta a fost incarcata inainte de a fi apelata.
Pentru crearea unei functii se foloseste cuvantul function urmat de numele pe care vrem sa-l dam
functiei dupa care putem adauga intre paranteze rotunde argumentele (numite si atribute) functiei
(separate prin virgula daca sunt mai multe) si intre acolade corpul functiei care contine codul care
trebuie executat.
Forma generala a unei functii este urmatoarea:
function nume_functie(argument1, argument, ...) {

}
Argumentele sunt variabile folosite de functie si a caror valoare este preluata la apelarea functiei.
Atributele nu sun obligatorii, o functie poate fi definita si fara argumente, dar se pastreaza
parantezele rotunde, astfel sintaxa unei functii fara argumente este urmatoarea:
45
function nume_functie() {
}
2. Instructiunea return
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceasta
specifica valoarea pe care o returneaza functia cand este apelata.
Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii return:
function suma(x, y) {
z = x+y;
return z
}
- "suma" reprezinta numele functiei (puteti da orice nume care respecta regulile limbajuli si nu
sunt identice cu cele rezervate, cum ar fi "function"), "x, y" reprezinta argumentele functiei a
caror valoare este data cand functia este apelata. Intre acolade avem codul care trebuie executat si
care, prin instructiunea "return" va returna valoarea lui "z" care reprezinta suma lui "x" si "y".
Astfel valoarea returnata de functia "suma()" va fi valoarea pe care o are "z".
3. Apelarea functiilor
Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata.

- O functie care contine argumente se apeleaza in felul urmator:
 nume_functie(argument1, argument, ...)
- O functie fara argumente se apeleaza in felul urmator:
 nume_functie()
Observati ca la apelul functiei nu se mai folosesc cuvantul "function" si acoladele

In locul in care am apelat astfel o functie va fi executat corpul acelei functii.
46
4. Exemple de scripturi cu functii
In continuare studiati exemplele de mai jos, care folosesc functii simple, astfel veti intelege mai
bine modul de lucru si executie a unei functii.
Exemplu 1 - functie fara argument

Urmatorul exemplu prezinta un script care afiseaza un text:
<html>
<head>

</script>
</head>
<body>
exemplu1()
</script>
</body>
</html>
- Observati ca functia "exemplu1" a fost definita in sectiunea head a documentului HTML si apoi a fost
apelata in sectiunea "body", unde va afisa textul "Bine ati venit!"
Exemplu 2 - functie cu un argument

Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra "alert" care va
afisa un text in functie de argumentul transmis.
Specificatie - Sintaxa generala a functiei "alert" din JavaScript este: alert('Text'), aceasta deschide o
fereastra de atentionare in care este afisat mesajul dintre paranteze "Text".
<html>
<head>
47

</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu2('Buna dimineata!')"
value="dimineata" />
<input type="button" onclick="exemplu2('Buna ziua!')"
value="ziua" />
</form>
</body>
</html>
Acest cod va afisa in pagina HTML urmatorul rezultat:
- Studiati cu atentie scriptul si modul in care acesta este apelat.
Textul afisat de "alert" este preluat de la valoarea argumentului functiei "exemplu2" care l-a randul lui il
preia din ceea ce este scris la apelarea functiei.
- "onclick" (la click) este o comanda JavaScript care specifica momentul cand trebuie sa fie executata
functia.
Cand apasati cele doua butoane veti obtine o fereastra 'Alert' cu doua mesaje diferite (specificate la
fiecare apelare a functiei "exemplu2")
48
Obiectele Java Script
In lumea din jurul nostru obiectele sunt de exemplu: o carte, o masina, un televizor; in JavaScript
obiectele sunt de exemplu: un formular, o fereastra, butoane, imagini ...
Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte.
Obiectele au anumite proprietati, de exemplu in lumea reala televizoarele au butoane, masinile au
roti; asa si in JavaScript obiectele au proprietati: formularele au buton, ferestrele au titluri.
Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode".
Metodele reprezinta functiile pe care un obiect poate sa le faca. Ferestrele se deschid cu metoda
"open()", butoanele au metoda "click()". Parantezele rotunde "()" arata ca se face referire la o
metoda, nu la o proprietate.
Astfel, putem rezuma ca un obiect este o colectie de proprietati si functii (metode)
Sintaxa pentru folosirea obiectelor este:
 obiect.prorietate
obiect.metoda()
- Punctul (.) se foloseste pentru a specifica detinatorul metodei sau proprietatii.
Obiectele din JavaScript le putem cataloga in trei categorii principale:

 - Obiecte pe partea de client
- Obiecte pe partea de server

- Obiecte esentiale
Astfel avem mai multe tipuri de obiecte care pot fi folosite, pentru incepatori e bine de stiut in
principal obiectele pe partea de client si cele esentiale, cum sunt: "string", "math" sau cele care
vin de la etichetele HTML.
Mai multe astfel de obiecte pot forma o celula (o grupa) numita "clasa", astfel, diferite obiecte
incorporate pentru o executie comuna formeaza un "set de clase" care se mai numeste si
"biblioteca de clase", iar mai exact pentru limbajul JavaScript "biblioteca de obiecte
JavaScript", si pot fi refolosite.
49
1. Obiectul string
String (sau sir) se foloseste pentru a prelua text.

Proprietatea acestui obiect este:
 length - returneaza numarul de caractere dintr-un sir (string)
Metodele obiectului string sunt urmatoarele:
anchor() - Returneaza un sir ca si "anchor"

big() - Returneaza un sir cu text mare
blink() - Returneaza un sir care clipeste
bold() - Returneaza un sir cu litere ingrosate
charAt() - Returneaza un caracter de la pozitia care este specificata
charCodeAt() - Returneaza codul ASCII al unui caracter de la o pozitie specificata
concat() - Returneaza doua siruri concatenate
fixed() - Returneaza un sir cu caractere tip
fontcolor() - Returneaza un sir cu o culoare specificata
fontsize() - Returneaza un sir cu litere de o anume marime
fromCharCode() - Returneaza valoare Unicode a unui caracater
indexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca subsirul nu
e gasit, valoarea -1
italics() - Returneaza un sir in italic (scris aplecat)
lastIndexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca acesta
nu e gasit, -1 (Importanr: se incepe din dreapta sirului spre stanga)
link() - Returneaza un sir ca hyperlink
match() - Similar cu indexOf si lastIndexOf, dar aceasta metoda returneaza sirul
specificat sir, sau "null", in locul unor valori numerice
replace() - Inlocuieste intr-un sir unele caractere specificate cu altele noi specificate.
search() - Returneaza un numar intreg daca sirul contine caracterele specificate, altfel
returneaza -1
slice() - Returneaza un sir incepand de la pozitia index specificata
small() - Returneaza un sir cu caractere mai mici
50
split() - Imparte un sir in mai multe siruri, in functie de caracterele specificate
strike() - Returneaza un sir taiat cu o linie la mijloc
sub() - Returneaza un sir ca indice
substr() - Returneaza un subsir specificat astfel, exemplu: 12,8 returneaza 8 caractere,
incepand de la caracterul al 12-lea (se incepe de la 0)
substring() - Returneaza un subsir specificat astfel, exemplu: 8,12 returneaza toate
caracterele, incepand de la caracterul al 8-lea, pana la al 12-lea
sup() - Returneaza un sir ca putere (superscript)
toFixed(n) - Returneaza sirul numeric rotunjindu-l la o valoare cu 'n' zecimale
toLowerCase() - Converteste un sir in litere mici
toUpperCase() - Converteste un sir in litere mari
In continuare este prezentat un exemplu in care se foloseste proprietatea "length" pentru a afla
cate elemente are un sir si metoda "indexOf" prin care verificam daca un sir dat contine un
anumit cuvant specificat. Daca este gasit cuvantul, se returneaza pozitia primei litere din el, in
caz contrar apare mesajul "Cuvantul nu a fost gasit"
var str="Filme, Cursuri, Jocuri si Animatii"
document.write(src+"<br />")
document.writeln("Acest sir are "+ str.length + " caractere")
var pos=str.indexOf("Jocuri")
if (pos>=0) {
document.write("Jocuri incepe de la pozitia: ")
document.write(pos + "<br />")
}
else
{
document.write("Cuvantul nu a fost gasit!")
}
</script>
Primului caracter din sir are pozitia 0, al doilea caracter are pozitia 1, si tot asa ....
Dupa ce este adaugat intr-un document HTML, acest script va afisa in pagina urmatorul rezultat:
51
Filme, Cursuri, Jocuri si Animatii
Acest sir are 34 caractere Jocuri incepe de la pozitia: 17
- Iata un alt exemplu in care este foloseste metoda replace().

Avem un sir din care vom pastra doar numerele, eliminand toate celelalte caractere.

</script>
- In acest exemplu avem variabila "sir" ce contine sirul complet si o variabila "sablon" ce contine
o expresie regulata care reprezinta toate caracterele non-numerice, \D fiind echivalent cu [^0-9]
(mai multe detalii despre expresiile regulate gasiti la: RegExp Javascript).
- Expresia sir.replace(sablon, '') inlocuieste cu '' (adica nimic) caracterele din "sir" care se
incadreaza in "sablon".
- document.write(sir) va afisa sirul care a ramas, adica 12378
Obiectul Array (tablou sau matrice)
Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a stoca mai multe valori
intr-un singur nume de variabila.
Fiecare valoare stocata devine un element al tabloului, acesta are asociat un "numar index" (sau
cheie). Cu ajutorul acestei chei se poate face referire la oricare element din tablou.
Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array, ca in exemplul
urmator:
 var nume_colegi = new Array(4)
- Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4.
Numarul de elemente, cheile, incep implicit de la 0.
52
Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de
paranteze patrate, in interiorul carora se adauga cheia specifica fiecarui element, apoi semnul egal
si valoarea dorita. Dupa cum puteti vedea in urmatorul exemplu:
 nume_colegi[0] = "Cristi"
nume_colegi[1] = "Ion"
nume_colegi[2] = "Simona"
nume_colegi[3] = "Adi"
Sau puteti scrie si astfel:
 var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');
- In cazul acesta cheile se subanteleg si sunt aceleasi ca in prima varianta, incepand cu 0.
Pentru a face referire la un anumit element din tablou si pentru a extrage anumite valori din
Array, se scrie numele tabloului si intre parantezele patrate cheia specifica acelui element; ca in
exemplul urmator:
 coleg = nume_colegi[0]
colega = nume_colegi[2]
Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega" valoarea "Simona".
Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea "length", ca in
exemplu urmator:
 nr_colegi = nume_colegi.length
Obiectul Array are urmatoarele metode:
 concat() - Returneaza un tablou rezultat din concatenarea a doua tablouri

join() - Returneaza un tablou format din toate elementele unui tablou concatenat
reverse() - Returneaza inversul unui tablou
slice() - Returneaza o parte specificata a unui tablou
sort() - Returneaza tabloul ordonat
Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou (aici tabloul "nume_colegi"),
extrage valoarea fiecarui element si o afiseaza.
53

</script>
54
Ierarhia Java Script
JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie. Toate elementele sunt
vazute ca obiecte si fiecare obiect are anumite proprietati si metode sau alte obiecte.
Cu JavaScript putem manipula usor obiectele. Pentru aceasta este importanta intelegerea ierarhiei
obiectelor HTML.
 JavaScript intelege fereastra browser-ului ca pe un obiect window, acesta contine

anumite elemente, cum ar fi de exemplu bara de stare (status bar).
 In fereastra browser-ului putem incarca (afisa) un document HTML (sau si de alt tip, dar
aici ne referim la HTML). Aceasta pagina din interiorul navigatorului este un obiect
document.
Obiectul document
Acesta este unul din obiectele cele mai importante in JavaScript, este folosit foarte des.
Obiectul Window lasa continutul unui document web in grija obiectului Document, acesta este
responsabil de continutul afisat pe o pagina si se poate lucra cu el pentru afisarea de paginii
HTML dinamice.
Obiectul document contine mai multe proprietati, cum ar fi culoarea de fundal a paginii (bgcolor)
sau alte obiecte, cum sunt tag-urile HTML. De retinut ca toate elementele HTML sunt proprietati
ale obiectului document, si la randul lor acestea sunt obiecte. Un obiect HTML este de exemplu
un formular, o eticheta DIV sau un link.
Pentru a desemna obiectul sau proprietatea curenta pe care dorim sa o folosim, adaugam cuvantul
this urmat de caracterul punct (.) si numele proprietatii, dupa cum vedeti in urmatoarea sintaxa:
 this.nume_proprietate
Astfel aceasta expresie se adreseaza proprietatii "nume_proprietate" din obiectul curent.
Obiectul document are urmatoarele proprietati:
 alinkColor - culoarea unei legaturi active

 all - tabloul tuturor etichetelor HTML din document
 anchors - tabloul de obiecte "Anchor", in ordinea specificata in sursa
 applets - tabloul de obiecte "Applet"
 bgcolor - culoarea de fundal a documentului
55
 classes - tabloul claselor paginilor cu stiluri
 cookie - fisier cookie asociat cu documentul
 domain - domeniu al documentului
 embeds - tablou de obiecte inglobate
 fgcolor - culoarea textului in document
 forms[] - tablou de obiecte "Form" (formular)
 formName - specifica instanta "Form" care este accesata prin folosirea valorii atributului "name"
din eticheta <form>
 height - specifica inaltimea documentului in pixeli
 ids - tabloul identificatorilor paginii cu stiluri
 images - tablou de obiecte "Image"
 lastModified - data cand a fost modificat ultima oara documentul
 layers - tablou de obiecte "Layer"
 linkColor - culoarea legaturilor
 links - tablou de obiecte "Link", ce corespund tuturor link-urilor HREF din document, in ordinea
specificata in sursa
 plugins - tablou de obiecte inglobate
 referrer - adresa URL (externa) a documentului la care a fost legat documentul curent
 tags - tabloul etichetelor paginii cu stiluri
 title - titlul documentului
 URL - adresa URL a documentului curent
 vlinkColor - culoarea legaturilor vizitate
 width - specifica latimea documentului in pixeli
 lastModified - URL-ul documentului
Obiectul document are urmatoarele meode:
 captureEvents() - captureaza evenimentele care vor fi tratate de document

 close() - inchide fluxul datelor de iesire spre document
 contextual() - permite sa aplicam in mod selectiv un stil unui element HTML care apare intr-un
anumit context specific
 getSelection() - intoarce textul selectat
 handleEvent() - apeleaza handlerul pentru evenimentul specificat
 open() - deschide fluxul datelor de iesire spre document
56
 releaseEvents() - elibereaza evenimentele capturate de document
 routeEvent() - dirijeaza evenimentele capturate spre alte obiecte
 write() - adauga text in document
 writeln() - adauga text si un caracter linie noua in document (textul pe linia lui)
In urmatorul exemplu puteti vedea cum au fost folosite proprietatile obiectului document pentru stabilirea
culorii de fundal, a textului, link-urilor si titlul unei pagini web:

</script>
Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoarea
textului rosu, a legaturilor verde si titlul "Lectie Java Script".
Obiectul document si Formulare
Formularele de asemenea pot fi considerate si tratate ca obiecte dintr-un document HTML,

acestea fiind sub-obiecte ale obiectului "document", astfel se apeleaza impreuna cu acesta.
Penru a intelege mai bine lucrul cu obiectul document si cum se lucreaza cu ierarhia obiectelor,
studiati si urmatorul exemplu:
<html>
<head>

</script>
</head>
<body >
<form name="nume_form">
Name: <input type="text" name="nume_camp" value=""><br>
<input type="button" value="Apasa" name="Buton" onClick="alert('Salut '
+afisare())">
</form>
</body>
</html>
Dupa ce scrieti in campul "Name" un nume si apasati butonul "Apasa" va apare o vereastra Alert
cu mesajul "Salut "nume" ".
Ierarhia obiectelor din pagina afisata de acest exemplu este urmatoarea:
 document (pagina HTML) -> Forms[0] (sau numele formularului din

"name" - intregul formular) -> {Element[0] (primul camp din
formular), Element[1] (butonul din formular)}
Daca de exemplu doriti sa aflati ce se introdce in primul element din formular, trebuie sa va
ganditi cum sa accesati acest obiect.
Pornim din vârful ierarhiei "document", urmarim calea catre primul formular "forms[0]" pana la
obiectul numit "elements[0]" (se adauga toate numele obiectului pe masura ce le depasim). Astfel
putem accesa primul element prin :
 document.forms[0].elements[0]
Pentru a afla ce text a fost introdus, apelam valoarea acelui element. Pentru elemente din
formular (tip "input") se foloseste proprietatea "value". Acesta arata valoarea casetei "input"
respective (aici textul introdus in campul de text). Acum putem afla valoarea cu ajutorul
urmatoruli cod:
 name = document.forms[0].elements[0].value;
58
Valoarea este stocata in variabila "name", pe care o putem folosi in script.
Astfel, putem crea o fereastra cu ajutorul liniei de cod "alert("Salut! " + name)", unde "name" va
fi valoarea variabilei "name" care reprezinta textul introdus in primul element din primul
formular.
Daca aveti formulare de dimensiuni mari, poate deveni dificila apelarea obiectelor dupa ordinea
lor, prin numere intre paranteze patrate. Daca am avea trei formulare si vrem sa apelam al
cincisprezecelea element (camp) din al treilea formular, ar trebui sa scriem
"document.forms[2].elements[14]". Pentru a facilita astfel de apelari, se pot da nume unice
diferitelor obiecte, folosind atributul "name", dupa cum puteti vedea in exemplu urmator:
 <form name="nume_form">
Nume: <input type="text" name="nume_element" value="">
Astfel "forms[0]" este de asemenea "nume_form" si in loc de "elements[0]" puteti utiliza

"nume_element" (specificat cu atributul "name" in eticheta <input>).
Prin urmare, in loc de a scrie "name = document.forms[0].elements[0].value;" se poate scrie:
"name = document.nume_form.nume_element.value;"
59
DOM - Modelul Obiectului Document
DOM (Document Object Model) defineste o structura logica si standardizata a documentelor, o

ordine prin care putem parcurge si edita elemente si continut din documente HTML sau XML.
Structura DOM este o ierarhie de obiecte, compatibila cu a limbajului JavaScript sau cu a
oricarui limbaj bazat pe obiecte.
In schema urmatoare puteti vedea modelul si ierarhia obiectelor:
60
Obiecte pe partea de client
Elementele principale legate de lucrul pe partea de client din JavaScript se axeaza pe ceea ce
putem face cu paginile HTML, mai exact - ceea ce poate face vizitatorul cu scriptul Javascript
incarcat in pagina HTML.
Primul set de obiecte are o legatura cu navigatorul si cu etichetele HTML din acesta.
Puteti accesa sau transfera continutul unei eticheta HTML (de exemplu dintr-un <div> ... </div>)
utilizand id-ul acesteia, folosind expresia:
 nume_var = document.getElementById("id").innerHTML;
sau
 nume_var = document.getElementById("id").childNodes[0].nodeValue;
- Aici, "nume_var" este o variabila care preia continutul incadrat de tag-ul HTML care are
atributul id="id".
Pentru a schimba sau adauga continut intr-un element HTML cu un id specific, folositi expresia
de mai sus in sens invers, adica:
 document.getElementById("id").innerHTML = "continut"
Unde "id" este valoarea atributului "id" din etiheta HTML respectiva iar "continut" este
continutul (text, tag-uri) care va fi adaugat in aceasta eticheta HTML (va inlocui orice alt context
care se afla in cadrul acestui element HTML).
Majoritatea obiectelor JavaScript din nivelul 2 sunt vazute ca obiecte ale tag-urilor HTML, dupa
cum puteti observa in lista de mai jos, in care sunt prezentate obiectele JavaScript si etichetele
HTML corespunzatoare:
Button - <input type="button">

Checkbox - <input type="checkbox">
Hidden - <input type="hidden">
61
Fileupload - <input type="file">
Password - <input type="password">
Radio - <input type="radio">
Reset - <input type="reset">
Select - <select>
Frame - <frame>
Document - <body>
Layer - <layer> sau <ilayer>
Link - <a href="">
Image - <img>
Area - <map>
Anchor - <a name="">
Applet - <applet>
Plugin - <embed>
Form - <form>
Submit - <input type="submit">
Text - <input type="text">
Textarea - <textarea>
Option - <option>
Exemplu
Iata un alt exemplu, cu o actiune inversa celui de sus. Adica, textul introdus intr-un camp
textarea, dupa apasarea unui buton va fi inclus in pagina in cadrul unei etichete HTML <div>,
fara ca pagina sa fie reincarcata.
Retineti, aceasta actiune este pe partea de client, vizibila doar de utilizatorul actual, nu modifica
pagina originala de pe server si dupa inchiderea navigatorului textul introdus dispare.
<html>
<head>
<title>Script JS</title>

</script>
</head>
<body>
<div id="div_id2">Aici va apare textul din formular</div><br>
<form name="formular2">
<textarea cols="30" rows="5" name="text2" id="textul2"></textarea> <br>
<input type="button" value="Afiseaza" onclick="ScrieDiv();" />
</form>
</body>
</html>
Evenimente JavaScript
Evenimentele sunt elemente foarte importante in programarea JavaScript. Acestea sunt actiuni
provocate de cele mai multe ori de vizitatorul paginii.
Daca vizitatorul apasa un buton din pagina se provoaca evenimentul "Click". Daca mouse-ul este
deasupra unui link, se declanseaza un eveniment "MouseOver".
JavaScript poate reactiona la unele evenimente. Aceasta se poate realiza cu ajutorul "event-
handlers" (manageri de evenimente sau gestionar de evenimente).
Handlerele de evenimente se adauga ca atribute ale etichetelor HTML.
De exemplu, daca dorim sa apelam o functie "nume_functie()" de fiecare data cand s-a modificat
un anumit obiect Text, procedam astfel: atribuim functia "nume_functie()" handlerului de
eveniment "onChange" al obiectului Text respectiv, ca in exemplul de mai jos:
 <input type="text" size="25" name="nume" onChange="nume_functie(this)">
- "onChange" este atribut al etichetei <input>, a carui valoare, intre ghilimele, este functia
"nume_functie()". In locul functiei dintre ghilimele putem sa scriem direct tot codul din functie, separand
prin caracterul ; comenzile JavaScript (acest lucru este nerecomandat in cazul unui cod mare).
63
Evenimentele JavaScript
In continuare este prezentata o lista cu evenimentele care pot fi folosite in programarea

JavaScript:
onClick - Se executa la apasarea unui click pe un obiect.(document, link, buton,

checkbox, buton radio, buton reset sau submit)
onDblClick - Executa actiunea la efectuarea a doua clickuri unul dupa altul
on MouseOver - Actioneaza cand se pozitioneaza mouse-ul deasupra unui link sau unei
imagini
onMouseOut - Actioneaza cand se muta mouse-ul de pe un hiperlink sau o imagine
onMouseMove - Actioneaza cand se misca mouse-ul
onMouseDown - Actioneaza cand tinem apasat unul din butoanele mouse-ului, pe un
document, buton sau link
onMouseUp - Actiunea se executa atunci cand este eliberat degetul de pe unul din
butoanele mouse-ului
onFocus - Actiunea apare cand este activat un obiect camp: caseta password, camp text,
bloc de text, camp FileUpload dintr-un formular HTML.
onChange - Actiunea apare cand se modifica continutul unui camp dintr-un formular
HTML (o parola, text, bloc de text, sau FileUpload) si cand acesta pierde focalizarea
onBlur - Este inversul lui "onFocus()", este declansat atunci cand un obiect nu mai este
activ, prin trecerea la o alta resursa
onLoad - Actioneaza cand browserul a terminat de incarcat un document, imagine sau
toate Frame-urile dintr-un <FRAMESET>
onUnload - Actiunea apare cand se iese din un document si se incarca un altul.
onKeydown - Actiunea apare cand se apasa o tasta
onKeyUp - Actiunea apare dupa ce am terminat de apasat pe o tasta
onKeyPress - Apare la apasarea unei taste (precede "KeyDown")
onSubmit - Actiunea apare la inaintare (trimiterea) unui formular
onReset - Actiunea apare la reinitializarea unui formular
onSelect - Actiunea apare cand utilizatorul selecteaza text dintr-un obiect Text sau
Textarea.
64
onAbort - Actiunea se executa in momentul in care se renunta la incarcarea unei imagini,
ferestre
onError - Actiunea apare cand actiunea de incarcare a unei imagin sau document
esueaza.
onMove - Actiunea se declanseaza cand se comanda deplasarea ferestrei sau cadrului
onResize - Actiunea se declanseaza atunci cand se comanda redimensionarea ferestrei sau
cadrului
In continuare sunt prezentate obiectele impreuna cu evenimentele pe care le pot folosi:
 Evenimente ale ferestrelor
o - onload
- onunloavd - onresize: (in Netscape)
- onmove
- onabort
- onerror
- onfocus
- onblur
 Evenimente de mouse:
o - onmousedown
- onmouseup
- onmousemove
- onmouseover
- onmouseout
- ondblclick
- onclick
 Evenimente ale formularelor si elementelor acestora:
o - onsubmit
- onreset
- onchange
- onselect
- onclick
65
- onblur
- onfocus
 Evenimente ale tastelor
o - onkeydown
- onkeyup
- onkeypress
Exemple cu evenimentele JavaScript
Pentru a intelege mai bine modul de folosire a evenimentelor, studiati cu atentie exemplele de
mai jos.
Exemplu "onClick"
Daca dorim executia unei anumite actiuni la apasarea unui click de mouse, folosim "onClick".
form>
<input type="button" value="Apasa" onClick="alert('Salut')" />
</form>
Exemplu "OnMouseOver - onMouseOut - onClick"
<html>
<head>
function setfocus() {
document.form2.camp.select();
}
</script>
</head>
<body>
<br>
<a href="http://www.marplo.net"
OnMouseOver="this.style.color='red';"
OnMouseOut="alert('Fereastra deschisa cu onMouseOut')">
Apasa aici pentru a vizita America!
66
</a>
<form name="form2">
<input type="text" name="camp" size="30" value="orice text">
<input type="button" value="Selecteaza" onclick="setfocus()">
</form>
</body>
</html>
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:

- Cand se pozitioneaza mouse-ul pe legatura "Apasa aici pentru a vizita America!", culoarea
textului devine rosu (datorita expresiei "this.style.color='red'" - "this" face referire la obiectul
curent care e actionat).
Dupa ce mutati mouse-ul de pe link, se va deschide (prin evenimentul "onMouseOut") o fereastra
Alert.
Cand apasati butonul "Selecteaza", va fi selectat textul din campul de text.
67
Obiectul image
Folosind JavaScript puteti crea o multime de efecte imaginilor de pe site.

In aceasta lectie si in urmatoarea veti invata sa lucrati cu obiectul image, sa creati efecte cu
ajutorul imaginilor, folosid JavaScript.
Imaginile in pagina web
In JavaScript toate imaginile sunt reprezentate intr-o matrice numita images. Aceasta este o
proprietate (si subobiect) a obiectului "document".
Pentru indexarea in matrice (sau tablou), fiecare imagine de pe o pagina web are un anumit
numar (index). Prima imagine are numarul 0, cea de-a doua imagine are numarul 1 si asa mai
departe.
Astfel, se poate face referire la prima imagine folosind expresia "document.images[0]".
Fiecare imagine dintr-un document HTML este considarata un obiect Image.
Un obiect Image are mai multe proprietati care pot fi accesate prin JavaScript. De exemplu puteti
vedea dimensiunile unei imagini folosind proprietatile "width" si "height".
Urmatorul exemplu returneaza lungimea (in pixeli) a primei imagini din document:
 document.image[0].height
Declararea imaginii care apare in pagina web se face cu sintaxa HTML:
 <img src="fisier.gif" name="nume_img" id="id_img" />
Daca sunt mai multe imagini pe o singura pagina, e mai dificil sa se lucreze cu ele folosind numarul
indexului, de aceea se poate atribui fiecarei imagini cate un nume (cu atributul "name").
O alta metoda este folosirea proprietatii "getElementById("id_element"), unde "id_element" este id-ul
imaginii dat cu atributul "id="..."", ca in exemplu urmator:
 document.nume_img.height
o sau
 document.getElementById("id_img").height
Obiectul "image" are o singura metoda:
68
 handleEvent() - reprezinta evenimentul specificat pentru executarea unei anumite actiunie
Proprietatile obiectului image sunt urmatoarele:
Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata în pixeli
Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser)
Align - unde sa fie plasata imaginea
Complete - poate fi doar citita si este o valoare booleana care permite sa stim daca imaginea a
fost descarcata complet.
Height - inaltimea in pixeli a imaginii
Hspace - se refera la spatiul din dreapta si stanga imaginii (in pixeli)
Lowsrc - specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta
Name - se foloseste pentru a da nume unei imagini
Src - specifica URL-ul (adresa si numele) imaginii
usemap - eticheta map
Vspace - spatiul dintre partea de sus si de jos a imaginii
Width - latimea in pixeli a imaginii
Incarcarea unei imagini noi
Daca doriti sa schimbati imaginile pe pagina prin JavaScript, se foloseste propprietatea src.
Ca si in eticheta <img>, proprietatea "src" reprezinta adresa imaginii afisate.
Cu JavaScript putem da o noua adresa imaginiii care trebuie incarcate in pagina, astfel imaginea
de la noua adresa va inlocui vechea imagine.
Iata un exemplu prin care puteti intelege cum se face aceasta schimbare de imagini:
<img name="imagine" src="img1.jpg" width="155" height="155">

<form>
<input type="button" onClick="document.imagine.src='img2.jpg'"
value="Schimba imaginea">
</form>
- Imaginea "img1.jpg" este incarcata si ia numele "imagine".
- Cu linia de cod "document.imagine.src='img2.jpg' se inlocuieste fosta imagine "img1.jpg" cu o
noua imagine "img2.jpg", prin apasarea butonului "Schimba imaginea".
69
- Imaginea noua va fi afisata in acelasi loc, suprafata de afisare a imaginii ramane aceeasi.
Exemplu
Iata inca un exemplu in care avem o pagina HTML cu doua link-uri (legaturi) care, printr-un
script JS schimba afisarea mai multor imagini in acelasi loc. Imaginile sunt declarate si stocate
intr-o variabila tablou "imagini". Pentru schimbarea imaginilor se folosesc 2 functii: "gonext" si
"goback".
<html>
<head>
<title>Titlu</title>

</script>
</head>
<body>
<h4 align=center>Imagini<br>
<img src="img/img1.jpg" name="imgs" width="155" height="155"><br>
<a href="javascript:goback()"><<- Precedenta</a> |
<a href="javascript:gonext()">Urmatoarea ->></a>
</h4>
70
</body>
</html>
Preincarcarea imaginilor
In exemplul precedent a fost explicat modul de incarcare a unei imagini noi in locul altei imagini
folosind JavaScript. Acest exemplu prezinta dezavantajul ca browserul trebuie sa astepte afisare
noi imagini pana cand aceasta este incarcata iar in cazul unor imagini mari asteptarea poate dura
prea mult. Acest lucru poate fi evitat prin "preincarcarea imaginilor", toate imaginile folosite in
pagina vor fi incarcate la deschiderea acesteia (printr-un script JS) si vor fi afisate doar atunci
cand este executata o comanda de afisare.
Iata un exemplu prin care puteti intelege cum se face aceast lucru:

</script>
<img name="imagine" src="img1.jpg" width="155" height="155">
<form>
<input type="button" onclick="document.imagine.src=hiddenImg.src"
value="Schimba imaginea">
</form>
- In interiorul scriptului, prima linie creaza un nou obiect "Image".
A doua linie defineste adresa imaginii noi care va fi incarcata si reprezentata prin obiectul
"hiddenImg". Astfel imaginea "img2.jpg" este incarcata (dar nu afisata) cand este executata
aceasta linie de cod (la deschiderea paginii). Imaginea este pastrata in memorie pentru folosire
ulterioara, si anume cand este apasat butonul "Schimba imaginea", care prin codul
"document.imagine.src=hiddenImg.src" va afisa imaginea "img2.jpg" in locul celei actuale
(img1.jpg). Afisarea se face imediat, fara a mai astepta incarcarea acesteia.
Daca numarul si marimea imaginilor este mare va dura mai mult incarcarea initiala a paginii, de
aceea e bine sa aveti in vedere viteza conexiunii pentru a sti ce metoda este mai indicata.
71
Bibliografie
Situri Web la cheie. Solutii profesionale de implementare, Sabin Buraga, Editura Polirom
Proiectarea siturilor Web. Design si functionalitate, sabin Buraga, editura Polirom
Cum sa creezi un site Web, Scott Mitchel, Editura Teora
HTML, XHTML CSS si XML prin exemple, Teodoru Gugoiu, editura Teora
www.w3schools.com/js/
www.w3schools.com/css/default.asp
72

Suport de Curs Web Design Cls X

Încărcat de

Informații document

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

Suport de Curs Web Design Cls X

Încărcat de

Drepturi de autor:

Formate disponibile

DESIGN WEB

SERVICIILE OFERITE DE INTERNET

UTILIZABILITATEA, ERGONOMIA SI ACCESIBILITATEA SITURILOR WEB

O declaratie CSS are sintaxa:

Exemplu: folosirea elementului id

Exemplu: folosirea elementului class

 marginea (margin) este spatiul exterior chenarului pana la celelalte elemente

Proprietatile width si height

Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii

Proprietatile padding si margin

 border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt

Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-

Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML

Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli

Exemplu: folosirea unui stil compus aplicat etichetei p

In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:

Exemplu: cream clasa auto si o aplicam inaginii

a defineste stilul general pentru legatura

Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p

valoarea poate fi:

Exemplu: lista ordonata folosind marcaje cu litere mici

Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif

Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ

- <div> <p>, <li>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Apoi, incadreaza textul cu <div> si cu un ID corespunzator (element de identificare, denumire).

Aceasta marcare nu arata extraordinar daca lasam formatarea implicita a browserului.

In final stilizam linkul in sine:

Rezultatul afisat in pagina web va fi acelasi ca-n exemplele anterioare.

 var nume = valoare

- Fara declaratia var

 Modulul (%) - acesta determina restul impartirii a doua numere

In cazul acestui operator JavaScript actioneaza mereu de la dreapta la stanga ; se evalueaza

Operator Exemple Este acelasi cu

Operator Semnificatie Exemple

Operator pentru string (sir)

Un string este in general un sir de caractere, intre ghilimele.

 t1 = "Astazi este o zi"

 1 - Adaugati spatiu intre variabilele string

Operatori pentru functii

1. Primul se numeste operator de apelare si este reprezentat printr-o pereche de paranteze

Parantezele aratand ca este folosita o functie.

Operatori pentru structuri de date (obiecte)

Aceasta modalitate de referire la o informatie, numita notatie cu punct, returneaza valoarea

10. Precedenta operatorilor

 if - executa comenzile dorite cand o conditie este adevarata.

- Unde 'conditie' poate fi orice expresie logica.

2. Instructiunea "if ... else"

- Unde 'conditie' poate fi orice expresie logica.

Aceasta instructiune e folosita pentru a compara o valoare cu altele dintr-o lista.

Instructiuni ciclice (repetitive)

Aceasta are urmatoarea forma generala:

for (incepere_nr; conditie_nr; ciclu) {

2. Instructiunea for ... in

Instructiunea "for ... in" are urmatoarea forma generala:

for (nume_proprietate in obiect) {

Instructiunea "while" are urmatoarea forma generala:

4. Instructiunea do ... while

Forma generala a acestei instructiuni este:

 break - intrerupe definitiv executarea ciclului.

- Unde "mesaj" este textul care va apare in fereastra Alert.

Fereastra de confirmare se creaza cu sintaxa:

In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK" si "Cancel".

 predefinite - cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", ...